/* ===========================================================================
   WELL RUN · SIGNAL SYSTEM — IMARA · SITE
   Imara Sickle Cell Framework — landing page styles. Built on Signal Core tokens.
   Brand: Chocolate #47201b · Plum #740041 · Watermelon #df435d (accent only)
          Cream #f9f3dc · Sky #c9f0ff · Typeface: Verdana
   =========================================================================== */

:root{
  /* ── Brand tokens · theme contract (swap these values per client) ── */
  --wr-choco:#47201b;
  --wr-plum:#740041;
  --wr-melon:#df435d;
  --wr-cream:#f9f3dc;
  --wr-sky:#c9f0ff;
  --wr-font:Verdana,Geneva,Tahoma,"DejaVu Sans",sans-serif;
  --wr-radius:22px;
  --wr-ease:cubic-bezier(.22,.61,.36,1);

  /* Design aliases resolve to the brand tokens above (single source of truth) */
  --chocolate:var(--wr-choco);
  --plum:var(--wr-plum);
  --watermelon:var(--wr-melon);
  --cream:var(--wr-cream);
  --sky:var(--wr-sky);

  /* derived */
  --cream-deep:#f9f3dc;     /* = cream (single neutral — no tints) */
  --card:#f9f3dc;           /* cream card surface (no white) */
  --ink:#47201b;            /* body ink = chocolate */
  --ink-soft:rgba(71,32,27,.74);
  --ink-faint:rgba(71,32,27,.52);
  --hair:rgba(71,32,27,.12);
  --hair-strong:rgba(71,32,27,.18);

  /* on dark (chocolate) surfaces */
  --on-dark:#f9f3dc;
  --on-dark-soft:rgba(249,243,220,.72);
  --on-dark-faint:rgba(249,243,220,.62);   /* raised from .42 for WCAG AA contrast on chocolate */
  --hair-dark:rgba(249,243,220,.16);

  --primary:var(--chocolate);     /* tweakable */
  --maxw:1200px;
  --pad:clamp(20px,5vw,48px);
  --sect:clamp(64px,7vw,104px);
  --radius:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:Verdana,Geneva,Tahoma,"DejaVu Sans",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{width:min(var(--maxw),100%);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{width:min(960px,100%);margin-inline:auto;padding-inline:var(--pad)}

/* ── Type scale ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--chocolate);line-height:1.06;
  letter-spacing:-.012em;text-wrap:balance}
.display{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02}
h2.title{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.008em}
p{margin:0}
.lead{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.6;color:var(--ink-soft);
  max-width:42ch;text-wrap:pretty}
.measure{max-width:60ch}

.eyebrow{display:inline-flex;align-items:center;gap:.6em;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--plum)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--plum)}
.eyebrow.center{justify-content:center}

.accent{color:var(--plum)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.55em;border:0;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.01em;
  padding:1rem 1.6rem;border-radius:999px;transition:transform .25s var(--ease),
  background-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
  text-decoration:none;line-height:1}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--primary);color:var(--cream);
  box-shadow:0 10px 26px -12px rgba(71,32,27,.6)}
.btn-primary:hover{background:var(--plum);transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(116,0,65,.7)}
.btn-ghost{background:transparent;color:var(--chocolate);
  box-shadow:inset 0 0 0 1.5px var(--hair-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--chocolate);transform:translateY(-2px)}
.btn-on-dark{background:var(--cream);color:var(--chocolate)}
.btn-on-dark:hover{background:var(--cream);transform:translateY(-2px)}
.btn-ghost-dark{background:transparent;color:var(--on-dark);
  box-shadow:inset 0 0 0 1.5px var(--hair-dark)}
.btn-ghost-dark:hover{box-shadow:inset 0 0 0 1.5px var(--on-dark);transform:translateY(-2px)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100}

/* news / announcement strip */
.hdr-strip{background:var(--plum);color:var(--on-dark);overflow:hidden;max-height:64px;
  transition:max-height .42s var(--ease),opacity .32s var(--ease)}
.hdr-strip .strip-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:44px;font-size:.8rem}
.hdr-strip .ann{display:inline-flex;align-items:center;gap:9px;font-weight:700;
  color:var(--cream);letter-spacing:.01em}
.hdr-strip .ann .pulse{width:8px;height:8px;border-radius:50%;background:var(--watermelon);flex:none;
  box-shadow:0 0 0 0 rgba(223,67,93,.55);animation:annpulse 2.6s var(--ease) infinite}
@keyframes annpulse{0%{box-shadow:0 0 0 0 rgba(223,67,93,.55)}
  70%{box-shadow:0 0 0 8px rgba(223,67,93,0)}100%{box-shadow:0 0 0 0 rgba(223,67,93,0)}}
.hdr-strip .util{display:flex;align-items:center;gap:24px;color:var(--on-dark-soft)}
.hdr-strip .util a{font-weight:600;transition:color .2s var(--ease)}
.hdr-strip .util a:hover{color:var(--cream)}
.hdr-strip .util .sky{color:var(--sky)}
/* collapse the strip away once the user scrolls */
.hdr[data-scrolled="1"] .hdr-strip{max-height:0;opacity:0}

/* floating glass pill */
.hdr-pill-wrap{padding:14px var(--pad) 0}
.hdr-pill{width:min(1100px,100%);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:24px;height:62px;padding:0 14px 0 24px;border-radius:999px;
  background:rgba(249,243,220,.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 40px -18px rgba(71,32,27,.4),inset 0 0 0 1px rgba(249,243,220,.6),
    0 0 0 1px var(--hair);
  transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
.hdr[data-scrolled="1"] .hdr-pill{background:rgba(249,243,220,.95);
  box-shadow:0 16px 44px -20px rgba(71,32,27,.5),inset 0 0 0 1px rgba(249,243,220,.7),
    0 0 0 1px var(--hair-strong)}

.brand{display:flex;align-items:center;gap:12px;height:44px}
.brand img{height:30px;width:auto}
.brand .brand-logo{height:42px;width:auto;display:block}
.brand .logo-l{display:none}

.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:.92rem;font-weight:600;color:var(--ink-soft);position:relative;padding:4px 0;
  white-space:nowrap;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--watermelon);transition:right .28s var(--ease)}
.nav a:hover{color:var(--chocolate)}
.nav a:hover::after{right:0}
.hdr-cta-btn{padding:.62rem 1.1rem;font-size:.9rem}

/* mobile menu button + dropdown */
.menu-btn{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  border-radius:50%;align-items:center;justify-content:center;color:var(--chocolate);
  transition:background-color .2s var(--ease)}
.menu-btn:hover{background:var(--hair)}
.menu-btn svg{width:24px;height:24px}
.menu-btn .ic-close{display:none}
.hdr[data-menu="1"] .menu-btn .ic-open{display:none}
.hdr[data-menu="1"] .menu-btn .ic-close{display:block}

.mobile-menu{display:none;padding:10px var(--pad) 0}
.mobile-menu .mm-inner{width:min(1100px,100%);margin-inline:auto;
  background:rgba(249,243,220,.98);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-radius:22px;box-shadow:0 18px 44px -20px rgba(71,32,27,.5),0 0 0 1px var(--hair);
  padding:12px;display:flex;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-10px);transform-origin:top;pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.hdr[data-menu="1"] .mobile-menu .mm-inner{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a:not(.btn){font-size:1rem;font-weight:600;color:var(--ink-soft);text-align:center;
  padding:13px 16px;border-radius:13px;transition:background-color .18s var(--ease),color .18s var(--ease)}
.mobile-menu a:not(.btn):hover{background:var(--cream-deep);color:var(--chocolate)}
.mobile-menu .btn{justify-content:center;margin-top:8px}

@media (max-width:1080px){
  .hdr-pill .nav{display:none}
  .hdr-cta-btn{display:none}
  .hdr-pill .lang-switch{display:none}
  .menu-btn{display:inline-flex}
  .mobile-menu{display:block}
}

/* ── Language switcher (EN / FR) ─────────────────────────────────────────── */
/* Refined segmented control: recessed track + globe cue + raised active chip. */
:root{--ls-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347201b' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18'/%3E%3C/svg%3E");
  --ls-chip:linear-gradient(155deg,#61302a,#47201b);
  --ls-chip-shadow:0 3px 9px -3px rgba(71,32,27,.6),inset 0 1px 0 rgba(249,243,220,.18)}

/* Desktop: sits in the header pill. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  padding:3px 4px 3px 9px;border-radius:999px;
  background:linear-gradient(180deg,rgba(71,32,27,.035),rgba(71,32,27,.08));
  box-shadow:inset 0 0 0 1px var(--hair-strong),0 1px 1px rgba(249,243,220,.5)}
.lang-switch::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-right:5px;opacity:.5;
  background:center/contain no-repeat var(--ls-globe)}
.lang-switch a,.lang-switch .ls-on{display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 10px;border-radius:999px;text-decoration:none;
  font:700 .72rem/1 var(--wr-font);letter-spacing:.09em;text-indent:.09em;color:var(--ink-faint);
  transition:color .25s var(--ease),background-color .25s var(--ease)}
.lang-switch a:hover{color:var(--chocolate);background:rgba(71,32,27,.06)}
.lang-switch .ls-on{color:var(--wr-cream);background:var(--ls-chip);box-shadow:var(--ls-chip-shadow);cursor:default}

/* Mobile: same control, larger, centred in the dropdown menu. */
.mm-lang{display:inline-flex;align-self:center;align-items:center;gap:3px;margin-top:12px;
  padding:4px 5px 4px 12px;border-radius:999px;
  background:linear-gradient(180deg,rgba(71,32,27,.035),rgba(71,32,27,.08));
  box-shadow:inset 0 0 0 1px var(--hair-strong)}
.mm-lang::before{content:"";flex:0 0 auto;width:17px;height:17px;margin-right:6px;opacity:.5;
  background:center/contain no-repeat var(--ls-globe)}
.mobile-menu .mm-lang a,.mm-lang .ls-on{display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 20px;border-radius:999px;text-decoration:none;background:transparent;
  font:700 .9rem/1 var(--wr-font);letter-spacing:.07em;text-indent:.07em;color:var(--ink-soft);
  transition:color .25s var(--ease),background-color .25s var(--ease)}
.mobile-menu .mm-lang a:hover{background:rgba(71,32,27,.06);color:var(--chocolate)}
.mm-lang .ls-on{color:var(--wr-cream);background:var(--ls-chip);box-shadow:var(--ls-chip-shadow)}
/* Legal-page header: switcher sits beside the back link. */
.legal-head .lh-actions{display:flex;align-items:center;gap:16px}

/* ── Reveal animation ────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* A parallaxed element's transform is driven inline by parallax.js every scroll
   frame — it must NOT inherit the reveal's .8s transform transition, or each
   scroll update gets eased and the element lags/lurches ("jumps") into place.
   Transition only its opacity; leave transform to parallax. */
.reveal[data-parallax]{transition-property:opacity}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hdr-strip .ann .pulse{animation:none}
  .dbar-fill{transition:none}
}

/* ── Hero headline: word-by-word focus-in ────────────────────────────────── */
.fx-head{display:block}
.fx-head .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(30px) scale(1.03);
  will-change:filter,opacity,transform}
.fx-head.play .w{animation:wordRise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordRise{
  0%{opacity:0;filter:blur(12px);transform:translateY(30px) scale(1.03)}
  55%{opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-head .w{opacity:1;filter:none;transform:none;animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;padding-top:clamp(200px,17vw,272px);padding-bottom:clamp(44px,6vw,80px);overflow:hidden}

/* shared bits */
.hero-eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:0}
.hero .lead{margin-top:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-meta{margin-top:46px;display:flex;flex-wrap:wrap;gap:30px 44px;align-items:center}
.hero-meta .mi{display:flex;flex-direction:column;gap:2px}
.hero-meta .mi b{font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.02;color:var(--chocolate);
  font-variant-numeric:tabular-nums}
.hero-meta .mi span{font-size:.82rem;color:var(--ink-faint);letter-spacing:.02em}
.hero-meta .div{width:1px;align-self:stretch;background:var(--hair)}

.hero-photo{position:relative}
.hero-photo img.ph{width:100%;display:block}
.photo-tag{position:absolute;left:18px;bottom:18px;z-index:3;
  font:600 .72rem/1 var(--font);letter-spacing:.04em;color:var(--on-dark);
  background:rgba(71,32,27,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:.5rem .7rem;border-radius:999px;pointer-events:none}
/* keep the caption out of the way until the user drops a real photo */
.hero-photo img.ph:not([data-filled]) + .photo-tag{display:none}

/* floating soft shape */
.orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:0}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND GRAPHIC DEVICES — circles, rings & circular photo crops
   Drawn from the round "head" of the Imara mark. The logo's sickle shape is
   never disassembled or used on its own (brand rule) — only complete circles.
   ═══════════════════════════════════════════════════════════════════════════ */
.bdeco{position:absolute;pointer-events:none;z-index:0;will-change:transform}

/* Compound photo-circle decoration — the ONLY circular device used:
   a filled colour disc + a circular image crop + a small filled accent dot.
   No hollow / outlined rings anywhere. */
.pdeco{position:absolute;pointer-events:none;z-index:0;will-change:transform}
.pdeco .disc{position:absolute;left:0;top:2%;width:72%;height:72%;border-radius:50%;z-index:1}
.pdeco>img.ph{position:absolute;right:0;bottom:0;width:72%;height:72%;border-radius:50%;
  overflow:hidden;z-index:2;pointer-events:auto;
  box-shadow:0 34px 70px -40px rgba(0,0,0,.6)}
.pdeco .dot{position:absolute;left:30%;bottom:1%;width:15%;height:15%;border-radius:50%;z-index:3}

/* ---- Bold dark statement hero ---- */
.hero{background:var(--chocolate);color:var(--on-dark)}
/* looping video background + brand scrim */
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
.hero-cover{position:absolute;inset:0;z-index:4;background:var(--chocolate);
  opacity:0;pointer-events:none;will-change:opacity}
.hero-bg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 12%,rgba(71,32,27,.12),rgba(71,32,27,.34) 58%,rgba(71,32,27,.66)),
    linear-gradient(180deg,rgba(71,32,27,.5),rgba(71,32,27,.2) 32%,rgba(71,32,27,.45) 78%,var(--chocolate))}
/* keep the signature photo-circles vivid above the video */
.hero .pdeco{z-index:2}
.hero-b{display:block;text-align:center;position:relative;z-index:2;
  text-shadow:0 1px 24px rgba(40,16,12,.5)}
.hero h1{color:var(--cream);text-shadow:0 2px 30px rgba(40,16,12,.55)}
.hero .eyebrow{color:var(--sky)}
.hero .eyebrow::before{background:var(--sky)}
.hero .lead{color:var(--on-dark-soft);margin-inline:auto;max-width:52ch}
.hero-actions{justify-content:center}
.hero-meta{justify-content:center}
.hero-meta .mi b{color:var(--sky)}
.hero-meta .mi span{color:var(--on-dark-faint)}
.hero-meta .div{background:var(--hair-dark)}
.hero-bphoto{margin-top:clamp(48px,7vw,86px)}
.hero-bphoto img.ph{width:100%;aspect-ratio:16/8.1;height:auto;
  border-radius:var(--radius);box-shadow:0 50px 90px -50px rgba(0,0,0,.7)}
.hl{color:var(--sky)}

/* the underline-highlight used in headlines — drawn as a background bar that
   sits behind the glyphs, so it never falls behind the section background */
.uline{background-image:linear-gradient(var(--sky),var(--sky));
  background-repeat:no-repeat;background-position:0 90%;background-size:0% .14em;
  padding-bottom:.04em;transition:background-size .9s var(--ease) .35s}
.reveal.in .uline,.in .uline{background-size:100% .14em}
@media (prefers-reduced-motion:reduce){.uline{background-size:100% .14em;transition:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   Generic section heading block
   ═══════════════════════════════════════════════════════════════════════════ */
.section{padding-block:var(--sect);background:var(--cream)}
.section.tight{padding-block:clamp(56px,8vw,104px)}
.sec-head{max-width:64ch}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{margin-bottom:22px}
.sec-head .lead{max-width:56ch}
.center{text-align:center}
.center .lead,.center .sec-head .lead{margin-inline:auto}
.center .eyebrow{justify-content:center}

/* ═══════════════════════════════════════════════════════════════════════════
   CHALLENGE / STATS  (chocolate band)
   ═══════════════════════════════════════════════════════════════════════════ */
.band-dark{background:var(--chocolate);color:var(--on-dark);position:relative;overflow:hidden}
.band-dark h2,.band-dark h3{color:var(--cream)}
.band-dark .eyebrow{color:var(--sky)}
.band-dark .eyebrow::before{background:var(--sky)}
.band-dark .lead{color:var(--on-dark-soft)}
.band-dark .orb{background:var(--plum);opacity:.5}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px}
.stat{padding:6px 30px;border-left:1px solid var(--hair-dark)}
.stat:first-child{padding-left:0;border-left:0}
.stat .num{font-size:clamp(2.6rem,5vw,4rem);font-weight:700;line-height:1;
  color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .num .suf{color:var(--sky);font-size:.5em;font-weight:700;margin-left:.08em}
.stat .lbl{margin-top:16px;font-size:.98rem;line-height:1.5;color:var(--on-dark-soft);
  max-width:24ch}
.stat .src{margin-top:10px;font-size:.72rem;color:var(--on-dark-faint)}

/* ── Crisis section — elevated editorial ledger ─────────────────────────── */
.crisis{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(44px,6vw,80px)}
/* Oversized (170%) + offset up 35% so the stronger parallax drift never bares an edge. */
.crisis-bg{position:absolute;left:0;right:0;top:-35%;height:170%;z-index:-1;
  background:url("../img/photos/crisis-bg.webp") center/cover no-repeat;
  will-change:transform}
.crisis-top{max-width:none}
.crisis-top .eyebrow{margin-bottom:18px}
.crisis-top .title{font-size:clamp(2rem,4vw,3.3rem);max-width:none;margin-bottom:20px}
.crisis-top .lead{max-width:none}

.crisis-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(40px,6vw,90px);
  margin-top:clamp(48px,7vw,92px);align-items:start}

/* feature stat — the gut-punch */
.cf{position:relative}
.cf-tag{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);margin-bottom:22px}
.cf-num{font-size:clamp(4.2rem,9.5vw,7.6rem);font-weight:700;line-height:.86;color:var(--cream);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cf-num .suf{color:var(--sky);font-size:.42em;font-weight:700;margin-left:.04em;
  vertical-align:baseline}
.cf-lbl{margin-top:26px;font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.4;color:var(--cream);
  font-weight:600;max-width:24ch;text-wrap:pretty}
.cf-src{margin-top:20px;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-dark-faint)}

/* supporting stats — hairline rows */
.cl{display:flex;flex-direction:column}
.ci{display:grid;grid-template-columns:9.6ch 1fr;column-gap:clamp(22px,2.6vw,38px);
  align-items:center;padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--hair-dark)}
.ci:first-child{border-top:0;padding-top:6px}
.ci:last-child{padding-bottom:0}
.ci-num{font-size:clamp(2.3rem,3.7vw,3.3rem);font-weight:700;line-height:.95;color:var(--cream);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.ci-num .suf{color:var(--sky);font-size:.5em;font-weight:700;margin-left:.04em}
.ci-lbl{font-size:1.02rem;line-height:1.42;color:var(--on-dark-soft);text-wrap:pretty}
.ci-src{margin-top:6px;font-size:.72rem;letter-spacing:.04em;color:var(--on-dark-faint)}

@media (max-width:860px){
  .crisis-grid{grid-template-columns:1fr;gap:clamp(36px,8vw,52px)}
  /* center the whole neglected-crisis section on tablet + mobile */
  .crisis-top{text-align:center}
  .crisis-top .eyebrow{justify-content:center}
  .crisis-top .title,.crisis-top .lead{margin-inline:auto}
  .cf{text-align:center}
  .cf-lbl{margin-inline:auto}
  .ci{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:8px}
  .ci-lbl{margin-inline:auto}
}
@media (max-width:480px){
  .ci{grid-template-columns:1fr;row-gap:8px}
}

/* ── Video feature block (placeholder) ──────────────────────────────────── */
/* ---- Film scene ----
   No background of its own: the film section is transparent, so the video
   simply rides up OVER the receding hero (which shows through behind it).
   The chocolate you see behind the video is the hero itself receding, not a
   panel that travels with the video. */
.filmscene{position:relative;background:transparent;color:var(--on-dark)}
.filmscene .eyebrow{color:var(--sky)}
.filmscene .eyebrow::before{background:var(--sky)}
.filmscene-bg{display:none}
.filmscene-body{padding-block:clamp(40px,7vw,110px)}
.filmscene .vf-eyebrow{display:flex;justify-content:center;margin-bottom:clamp(18px,2.4vw,28px)}
.videoframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;background:transparent;cursor:pointer;isolation:isolate;
  box-shadow:0 44px 96px -52px rgba(0,0,0,.6)}
.videoframe .vf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.videoframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.videoframe:hover .vf-poster{transform:scale(1.03)}
.videoframe .vf-scrim{position:absolute;inset:0;
  background:radial-gradient(62% 70% at 50% 48%,rgba(71,32,27,.18),rgba(71,32,27,.56));
  transition:background .45s var(--ease)}
.videoframe:hover .vf-scrim{background:radial-gradient(62% 70% at 50% 48%,rgba(71,32,27,.08),rgba(71,32,27,.46))}
.vf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(74px,8vw,108px);height:clamp(74px,8vw,108px);border:0;border-radius:50%;
  background:var(--watermelon);color:var(--cream);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 22px 54px -16px rgba(223,67,93,.75);
  transition:transform .3s var(--ease),background-color .3s var(--ease)}
.vf-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid var(--cream);opacity:.4}
.vf-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--plum)}
.vf-play svg{width:36%;height:36%;margin-left:9%;fill:currentColor}
.vf-label{position:absolute;right:clamp(16px,2vw,26px);top:clamp(16px,2vw,24px);z-index:2;
  display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--cream);
  background:rgba(71,32,27,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:.55rem .9rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair-dark)}
.vf-label .vf-dot{width:7px;height:7px;border-radius:50%;background:var(--sky)}
@media (max-width:880px){
  .stats{grid-template-columns:1fr 1fr;gap:38px 0}
  .stat{padding:6px 0;border-left:0}
  .stat:nth-child(even){padding-left:30px;border-left:1px solid var(--hair-dark)}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .stat:nth-child(even){padding-left:0;border-left:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHAT IS IMARA  (meaning + north star)
   ═══════════════════════════════════════════════════════════════════════════ */
.meaning{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,90px);
  align-items:start}
.meaning .word{font-size:clamp(3.2rem,7vw,5.6rem);font-weight:700;color:var(--plum);
  line-height:.96;letter-spacing:-.02em}
.meaning .pron{margin-top:8px;font-size:.95rem;color:var(--ink-faint);font-style:italic}
.meaning .body p+p{margin-top:22px}
.meaning .body .big{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;font-weight:700;
  color:var(--chocolate);letter-spacing:-.01em;text-wrap:pretty}
@media (max-width:820px){.meaning{grid-template-columns:1fr;gap:30px}}

/* hopeful callout inside the meaning block — number lives in its own centred cell,
   vertically centred against the copy so it can never sit "out" again */
.hope{display:flex;gap:22px;align-items:center;margin-top:36px;padding:24px 26px;
  background:var(--sky);border-radius:18px}
.hope .hope-num{flex:none;display:grid;place-items:center;min-width:2.6ch;
  font-size:clamp(2.6rem,4.6vw,3.6rem);font-weight:700;color:var(--plum);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hope .hope-txt{font-size:1rem;line-height:1.55;color:var(--chocolate)}

/* tag used inside the "Why Imara" feature cards */
.fcard .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum);margin-bottom:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   WHY IMARA — three differentiators as alternating editorial rows
   (numbered disc behind a circular photo crop)
   ═══════════════════════════════════════════════════════════════════════════ */
.pillars{margin-top:clamp(60px,9vw,108px);display:flex;flex-direction:column;
  gap:clamp(60px,9vw,112px)}
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,86px);align-items:center}
.pillar:nth-child(even) .p-media{order:2}
.p-media{position:relative;aspect-ratio:1/1;width:clamp(300px,38vw,460px);justify-self:center;
  isolation:isolate}
.p-media .disc{position:absolute;left:0;top:2%;width:64%;height:64%;border-radius:50%;z-index:1}
.p-media .pn{position:absolute;left:0;top:2%;width:64%;height:64%;z-index:4;
  display:grid;place-items:center;
  font-size:clamp(2.6rem,4.8vw,4rem);font-weight:700;color:var(--cream);
  line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 16px rgba(40,16,12,.45);pointer-events:none}
.p-media img.ph{position:absolute;right:0;bottom:0;width:74%;height:74%;border-radius:50%;
  z-index:2;box-shadow:0 50px 96px -46px rgba(71,32,27,.6)}
.p-media .dot{position:absolute;left:30%;bottom:1%;width:14%;height:14%;border-radius:50%;z-index:3;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.4)}
.p-copy{position:relative;max-width:48ch}
.p-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--watermelon);margin-bottom:14px}
.p-copy h3{font-size:clamp(1.6rem,2.7vw,2.2rem);margin-bottom:16px}
.p-copy>p{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;text-wrap:pretty}
.p-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.p-points li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;line-height:1.45;
  color:var(--chocolate);font-weight:600}
.p-points .dot{width:9px;height:9px;border-radius:50%;background:var(--watermelon);
  margin-top:.5em;flex:none}
@media (max-width:860px){
  .pillar{grid-template-columns:1fr;gap:30px}
  .pillar:nth-child(even) .p-media{order:-1}
  .p-media{order:-1;width:min(80vw,340px);justify-self:center;margin-inline:auto}
  .p-copy{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPROACH  (builds on existing systems)
   ═══════════════════════════════════════════════════════════════════════════ */
.feat{display:grid;--cgap:clamp(20px,2.4vw,34px);gap:var(--cgap);
  grid-template-columns:repeat(3,1fr);margin-top:62px}
.fcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:34px 30px 32px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),
  border-color .35s var(--ease)}
.fcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(71,32,27,.32);
  border-color:var(--hair-strong)}
.fcard .ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky);margin-bottom:22px}
.fcard .ic svg{width:24px;height:24px;stroke:var(--chocolate);fill:none;stroke-width:1.8}
.fcard h3{margin-bottom:10px}
.fcard p{color:var(--ink-soft);font-size:1rem;line-height:1.6}


/* problem → forward strip */
/* problem → forward transformation  ·  Today vs With Imara */
.tf-caption{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--plum);margin:clamp(54px,7vw,78px) 0 24px;
  display:flex;align-items:center;justify-content:center;gap:.7em}
.tf-caption::before,.tf-caption::after{content:"";width:28px;height:1.5px;background:var(--plum)}
.transform{border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair);
  box-shadow:0 40px 88px -50px rgba(71,32,27,.45)}
.tf-row{display:grid;grid-template-columns:1fr 1fr}
.tf-cell{padding:clamp(20px,2.4vw,28px) clamp(22px,2.8vw,36px);display:flex;align-items:center;gap:16px}
.tf-from{background:var(--cream)}
.tf-to{background:var(--sky);border-left:1px solid var(--hair-strong)}
.tf-row+.tf-row .tf-from{border-top:1px solid var(--hair)}
.tf-row+.tf-row .tf-to{border-top:1px solid rgba(71,32,27,.1)}
/* header row */
.tf-head .tf-cell{padding-block:15px}
.tf-label{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tf-from .tf-label{color:var(--ink-faint)}
.tf-to .tf-label{color:var(--plum)}
/* markers */
.tf-mk{flex:none;display:grid;place-items:center}
.tf-from .tf-mk{width:18px;height:18px}
.tf-from .tf-mk i{width:9px;height:9px;background:var(--ink-faint);transform:rotate(45deg);opacity:.5}
.tf-to .tf-mk{width:27px;height:27px;border-radius:50%;background:var(--chocolate)}
.tf-to .tf-mk svg{width:14px;height:14px;stroke:var(--cream);fill:none;stroke-width:2.6}
/* item text */
.tf-from p{color:var(--ink-faint);font-size:1.04rem;line-height:1.42}
.tf-to p{color:var(--chocolate);font-weight:600;font-size:1.06rem;line-height:1.42}
@media (max-width:760px){
  .tf-row{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRAMEWORK  — 10 activities across tiers  (sky band)
   ═══════════════════════════════════════════════════════════════════════════ */
.band-sky{background:var(--cream-deep)}
/* framework framed in the sky accent to break the warm cream rhythm */
.band-skyblue{background:var(--sky);position:relative;overflow:hidden}
.band-skyblue .act{background:var(--cream);border-color:rgba(71,32,27,.10)}
.fw{margin-top:60px;display:flex;flex-direction:column;gap:20px}
.tier{display:grid;grid-template-columns:240px 1fr;gap:clamp(18px,3vw,44px);
  align-items:start;padding:30px 0;border-top:1px solid var(--hair)}
.tier:first-child{border-top:0}
.tier-label{position:sticky;top:96px}
.tier-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin-bottom:12px}
.tier-kicker .pip{width:10px;height:10px;border-radius:50%;background:var(--watermelon)}
.tier h3{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.tier .tier-sub{margin-top:10px;font-size:.95rem;color:var(--ink-soft);line-height:1.5;
  max-width:30ch}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.act{display:flex;gap:16px;align-items:flex-start;background:var(--card);
  border:1px solid var(--hair);border-radius:16px;padding:20px 20px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.act:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(71,32,27,.3);
  border-color:var(--hair-strong)}
.act .no{font-size:.95rem;font-weight:700;color:var(--cream);background:var(--chocolate);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.act.cross .no{background:var(--plum)}
.act .at{font-size:1.02rem;font-weight:700;color:var(--chocolate);line-height:1.25}
.act .ad{margin-top:5px;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
@media (max-width:760px){
  .tier{grid-template-columns:1fr;gap:18px}
  .tier-label{position:static}
  .tier .tier-sub{max-width:48ch}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHERE WE WORK  — light touch country band
   ═══════════════════════════════════════════════════════════════════════════ */
.countries{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);
  margin-top:56px}
.ccard{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hair-dark);min-height:400px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px;color:var(--on-dark);isolation:isolate}
.ccard img.ph{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.ccard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(71,32,27,.05) 0%,rgba(71,32,27,.55) 55%,rgba(71,32,27,.92) 100%)}
.ccard .cname{font-size:1.5rem;font-weight:700;color:var(--cream);line-height:1.1}
.ccard .cstat{margin-top:10px;font-size:.96rem;color:var(--on-dark-soft);line-height:1.45}
.ccard .cstat b{color:var(--sky);font-weight:700}
@media (max-width:820px){.countries{grid-template-columns:1fr}.ccard{min-height:240px}}
/* Implementation Countries — 3 MOU cards. Placeholder fills the card dark until the
   real signing photo is dropped into an <img class="ph"> in place of .mou-ph. */
.countries.countries-3{grid-template-columns:repeat(3,1fr)}
.ccard .mou-ph{position:absolute;inset:0;z-index:-2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;
  color:var(--on-dark-faint);background:radial-gradient(120% 90% at 50% 22%,#5a2a24,#381915)}
.ccard .mou-ph svg{width:42px;height:42px;opacity:.65}
.ccard .mou-ph .mou-cap{font-size:.72rem;letter-spacing:.08em;font-weight:700;
  text-transform:uppercase;opacity:.7}
@media (max-width:900px){.countries.countries-3{grid-template-columns:1fr}}

.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:56px;padding-top:48px;border-top:1px solid var(--hair)}
.goal{text-align:center}
.goal .gnum{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;color:var(--plum);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.goal .gnum .suf{color:var(--plum);font-size:.5em;margin-left:.06em}
.goal p{margin-top:12px;color:var(--ink-soft);font-size:1rem;line-height:1.5;max-width:26ch;margin-inline:auto}
@media (max-width:560px){.goals{grid-template-columns:1fr;gap:30px}}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS / who's behind it
   ═══════════════════════════════════════════════════════════════════════════ */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);
  margin-top:56px}
.role{padding:30px 28px;border-radius:var(--radius);background:var(--card);
  border:1px solid var(--hair)}
.role .tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);margin-bottom:14px}
.role h3{font-size:1.18rem;margin-bottom:8px}
.role p{color:var(--ink-soft);font-size:.96rem;line-height:1.55}
@media (max-width:820px){.roles{grid-template-columns:1fr}}

/* ── Delphi composition graphic (partners) ── */
.delphi{margin-top:56px;padding-top:46px;border-top:1px solid var(--hair)}
.delphi-head{max-width:640px;margin:0 auto 34px;text-align:center}
.delphi-head .eyebrow{margin-bottom:14px}
.delphi-title{font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.01em}
.delphi-note{margin:12px auto 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55;max-width:52ch}
.delphi-chart{display:grid;gap:18px;max-width:760px;margin-inline:auto}
.dbar-label{text-align:left}
.dbar{display:grid;grid-template-columns:minmax(150px,230px) 1fr auto;align-items:center;gap:18px}
.dbar-label{font-size:.94rem;font-weight:600;color:var(--chocolate);line-height:1.28}
.dbar-track{position:relative;height:15px;border-radius:99px;
  background:rgba(71,32,27,.08);overflow:hidden}
.dbar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--plum),var(--watermelon));
  transition:width 1.15s var(--wr-ease)}
.reveal.in .dbar-fill{width:var(--w)}
.delphi .dbar:nth-child(1) .dbar-fill{transition-delay:.06s}
.delphi .dbar:nth-child(2) .dbar-fill{transition-delay:.14s}
.delphi .dbar:nth-child(3) .dbar-fill{transition-delay:.22s}
.delphi .dbar:nth-child(4) .dbar-fill{transition-delay:.30s}
.delphi .dbar:nth-child(5) .dbar-fill{transition-delay:.38s}
.dbar-num{font-size:1.2rem;font-weight:700;color:var(--plum);
  font-variant-numeric:tabular-nums;min-width:1.7em;text-align:right}
@media (max-width:560px){
  .dbar{grid-template-columns:1fr auto;gap:6px 14px}
  .dbar-label{grid-column:1;grid-row:1}
  .dbar-num{grid-column:2;grid-row:1;font-size:1.05rem}
  .dbar-track{grid-column:1 / -1;grid-row:2}
}
.logos{margin-top:60px;padding-top:46px;border-top:1px solid var(--hair)}
.logos .lhint{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:26px}
.logo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:18px}
.logo-slot{height:92px;border-radius:12px;border:1px dashed var(--hair-strong);
  display:grid;place-items:center;text-align:center;padding:0 14px;
  font:600 .82rem/1.3 var(--font);color:var(--ink-faint);
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(71,32,27,.035) 9px,rgba(71,32,27,.035) 18px)}
/* slots holding a real logo: clean, solid, no placeholder hatching */
.logo-slot:has(img){border:1px solid var(--hair);background:var(--cream)}
.logo-slot img{max-height:60px;max-width:88%;width:auto;height:auto;object-fit:contain}
/* coordinating-body member shows the WCSCD mark as a contained badge, not a cover photo */
.rphoto img.logo-fit{object-fit:contain;padding:18%;background:var(--cream)}


/* ── Partner roster — circular documentary photos (Option E) ─────────────── */
#partners .sec-head{margin-inline:auto}
.roster{display:grid;--cgap:clamp(28px,4.5vw,60px);gap:var(--cgap);
  grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto;margin-top:clamp(48px,6vw,68px)}
.rmember{text-align:center;display:flex;flex-direction:column;align-items:center}
.rphoto{position:relative;width:clamp(150px,15vw,196px);aspect-ratio:1/1;
  margin-bottom:26px;isolation:isolate}
.rphoto img.ph{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 34px 66px -34px rgba(71,32,27,.55)}
.rphoto .rring{position:absolute;inset:-7px;border-radius:50%;z-index:-1}
.rmember:nth-child(1) .rring{background:var(--chocolate)}
.rmember:nth-child(2) .rring{background:var(--plum)}
.rmember:nth-child(3) .rring{background:var(--sky)}
.rphoto .rdot{position:absolute;right:5%;bottom:5%;width:15%;height:15%;border-radius:50%;
  background:var(--watermelon);z-index:3;box-shadow:0 0 0 5px var(--cream)}
.rmember .tag{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--plum);margin-bottom:9px}
.rmember h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.12;color:var(--chocolate);
  margin:0 0 11px;letter-spacing:-.01em}
.rmember p{font-size:1rem;line-height:1.55;color:var(--ink-soft);max-width:32ch}
@media (max-width:560px){.roster{grid-template-columns:1fr;gap:46px}}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.cta{position:relative;overflow:hidden;background:var(--plum);color:var(--on-dark)}
.cta .orb{background:var(--watermelon);opacity:.32}
.cta-in{position:relative;z-index:2;text-align:center;padding-block:clamp(72px,8vw,116px)}
.cta h2{color:var(--cream);font-size:clamp(2.2rem,4.6vw,3.8rem);margin-bottom:24px}
.cta .lead{color:rgba(249,243,220,.86);margin-inline:auto;max-width:50ch;margin-bottom:40px}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.cta .contact{margin-top:34px;font-size:.95rem;color:rgba(249,243,220,.72)}
.cta .contact a{color:var(--sky);font-weight:700;border-bottom:1.5px solid transparent;
  transition:border-color .2s var(--ease)}
.cta .contact a:hover{border-color:var(--sky)}

/* ═══════════════════════════════════════════════════════════════════════════
   REDESIGNED FOOTER  ·  chocolate ground, map background, cream + sky accents,
   signature circular photo-device, watermelon hairline rules
   ═══════════════════════════════════════════════════════════════════════════ */
.site-foot{position:relative;background:var(--chocolate);color:var(--on-dark-soft);
  overflow:hidden;isolation:isolate}
.site-foot .foot-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.site-foot .foot-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.site-foot .foot-watermark{position:absolute;right:clamp(-120px,-6vw,-40px);
  bottom:clamp(-120px,-7vw,-60px);width:clamp(280px,34vw,520px);height:auto;
  opacity:.05;z-index:0;pointer-events:none}

.foot-call{position:relative;z-index:2;display:grid;
  grid-template-columns:1.2fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;
  padding-block:clamp(64px,9vw,118px);border-bottom:1px solid var(--hair-dark)}
.foot-call .eyebrow{color:var(--sky);margin-bottom:22px}
.foot-call .eyebrow::before{background:var(--sky)}
.foot-call h2{color:var(--cream);font-size:clamp(2rem,4vw,3.3rem);line-height:1.05;
  letter-spacing:-.015em;max-width:18ch}
.foot-call h2 .hl{color:var(--sky)}
.foot-call p{margin-top:22px;color:var(--on-dark-soft);font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.55;max-width:44ch}
.foot-call .call-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.foot-mark{position:relative;width:clamp(300px,36vw,460px);aspect-ratio:1/1;
  justify-self:end;isolation:isolate}
.foot-mark .fm-disc{position:absolute;left:0;top:2%;width:72%;height:72%;border-radius:50%;
  background:var(--plum);z-index:1}
.foot-mark img.ph{position:absolute;right:0;bottom:0;width:72%;height:72%;border-radius:50%;
  overflow:hidden;z-index:2;box-shadow:0 34px 70px -40px rgba(0,0,0,.6)}
.foot-mark .fm-dot{position:absolute;left:30%;bottom:1%;width:15%;height:15%;border-radius:50%;
  background:var(--watermelon);z-index:3;box-shadow:0 20px 40px -16px rgba(223,67,93,.6)}

.foot-grid{position:relative;z-index:2;display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(30px,4vw,64px);
  padding-block:clamp(48px,6vw,72px)}
.foot-brand img{height:32px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.95rem;line-height:1.6;color:var(--on-dark-soft);max-width:34ch}
.foot-contact{margin-top:22px;font-size:.86rem;line-height:1.55;color:var(--on-dark-faint);max-width:38ch}
.foot-call-copy .btn{margin-top:30px}
.foot-contact a{color:var(--sky);font-weight:700;border-bottom:1.5px solid transparent;
  transition:border-color .2s var(--ease)}
.foot-contact a:hover{border-color:var(--sky)}
.foot-where{display:flex;gap:8px 24px;flex-wrap:wrap;margin-top:24px}
.foot-where .chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;
  letter-spacing:.02em;color:var(--cream)}
.foot-where .chip .pip{width:7px;height:7px;border-radius:50%;background:var(--sky)}

.foot-col h3{margin:0 0 16px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);font-weight:700}
.foot-col a{display:flex;align-items:center;gap:7px;font-size:.94rem;color:var(--on-dark-soft);
  padding:6px 0;width:fit-content;position:relative;transition:color .2s var(--ease)}
.foot-col a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--watermelon);transition:right .28s var(--ease)}
.foot-col a:hover{color:var(--cream)}
.foot-col a:hover::after{right:0}

.foot-base2{position:relative;z-index:2;border-top:1px solid var(--hair-dark);
  padding-block:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  justify-content:space-between;font-size:.85rem;color:var(--on-dark-soft)}
.foot-base2 .legal{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.foot-base2 .legal a{transition:color .2s var(--ease)}
.foot-base2 .legal a:hover{color:var(--cream)}
.foot-base2 .tagline{font-style:italic;color:var(--on-dark-soft)}
.foot-top{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--sky);
  cursor:pointer;transition:color .2s var(--ease)}
.foot-top:hover{color:var(--cream)}
.foot-top .arw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(201,240,255,.1);box-shadow:inset 0 0 0 1px var(--hair-dark);
  transition:transform .25s var(--ease),background-color .25s var(--ease)}
.foot-top:hover .arw{transform:translateY(-3px);background:rgba(201,240,255,.18)}
.foot-top .arw svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}

@media (max-width:1024px){
  .foot-call{grid-template-columns:1fr;gap:44px}
  .foot-mark{display:none}

  /* ── compact footer (everything below the closing call) ── */
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:24px 22px;
    padding-block:clamp(30px,5vw,42px)}
  .foot-brand{grid-column:1 / -1}
  .foot-brand img{margin-bottom:12px}
  .foot-brand p{margin:0}
  .foot-where{margin-top:14px}
  .foot-col h3{margin-bottom:10px}
  .foot-col a{padding:3px 0;font-size:.9rem}
  .foot-base2{padding-block:18px}
}
@media (max-width:560px){
  .foot-grid{gap:22px 14px}
  .foot-col h3{margin-bottom:8px}
  .foot-col a{font-size:.84rem}
  .foot-base2{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ── Footer (legacy, original landing footer) ──────────────────────────────── */
.foot{background:var(--chocolate);color:var(--on-dark-soft);padding-block:56px}
.foot-in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot img{height:30px;width:auto;margin-bottom:16px}
.foot .fcol p{font-size:.88rem;line-height:1.6;color:var(--on-dark-faint);max-width:34ch}
.foot .fnav{display:flex;gap:40px;flex-wrap:wrap}
.foot .fnav h5{margin:0 0 12px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sky);font-weight:700}
.foot .fnav a{display:block;font-size:.9rem;color:var(--on-dark-soft);padding:4px 0;
  transition:color .2s var(--ease)}
.foot .fnav a:hover{color:var(--cream)}
.foot-base{border-top:1px solid var(--hair-dark);margin-top:42px;padding-top:24px;
  font-size:.78rem;color:var(--on-dark-faint);display:flex;flex-wrap:wrap;gap:10px 24px;
  justify-content:space-between}

/* meaning section — "a circle with an image circle on top" composition */
.meaning-mark{width:48px;height:auto;display:block;margin-bottom:18px}
.imgcircle{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;
  margin-top:44px;isolation:isolate}
.imgcircle img.ph{position:absolute;right:0;bottom:0;width:66%;height:66%;
  border-radius:50%;z-index:2;box-shadow:0 34px 64px -34px rgba(71,32,27,.55)}
.imgcircle .c-plum{position:absolute;left:0;top:3%;width:60%;height:60%;
  border-radius:50%;background:var(--plum);z-index:1}
.imgcircle .c-mel{position:absolute;left:31%;bottom:3%;width:17%;height:17%;
  border-radius:50%;background:var(--watermelon);z-index:3}
@media (max-width:820px){.imgcircle{margin-inline:auto}}

/* ── Meaning section — redesigned: oversized photo bleeding off the frame ── */
.meaning-sec{position:relative;overflow:hidden}
.meaning-sec .m-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,72px);align-items:center}
.m-photo{position:relative;width:clamp(380px,48vw,640px);aspect-ratio:1/1;
  margin-left:clamp(-260px,-15vw,-130px);justify-self:start;isolation:isolate}
.m-photo img.ph{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  z-index:2;box-shadow:0 60px 110px -50px rgba(71,32,27,.6)}
.m-photo .m-disc{position:absolute;left:-7%;top:-6%;width:60%;height:60%;border-radius:50%;
  background:var(--plum);z-index:1}
.m-photo .m-dot{position:absolute;right:5%;bottom:3%;width:15%;height:15%;border-radius:50%;
  background:var(--watermelon);z-index:3;box-shadow:0 20px 40px -16px rgba(223,67,93,.6)}

.m-copy{max-width:46ch}
.m-copy .word{font-size:clamp(3.6rem,9vw,7rem);font-weight:700;color:var(--plum);
  line-height:.88;letter-spacing:-.03em}
.m-copy .pron{margin-top:10px;font-size:1rem;color:var(--ink-faint);font-style:italic}
.m-copy .big{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.34;font-weight:700;
  color:var(--chocolate);letter-spacing:-.01em;text-wrap:pretty;margin-top:30px}
.m-copy p+p{margin-top:20px}
@media (max-width:860px){
  .meaning-sec{overflow:hidden}
  .meaning-sec .m-grid{grid-template-columns:1fr;gap:28px}
  .m-photo{width:min(82vw,400px);justify-self:center;margin:0 auto;order:-1}
  .m-copy{max-width:none}
}

/* CTA background photograph beneath the plum wash */
.cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  opacity:.2;filter:saturate(.92)}
.cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 0%,rgba(116,0,65,.38),rgba(116,0,65,.88) 72%)}

/* img.ph defaults so empty state reads on-brand */
img.ph{background:var(--cream-deep);
  --is-bg:var(--cream-deep)}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM  ·  one consolidated set of tiers
   ───────────────────────────────────────────────────────────────────────────
   Card grids (.feat .goals .roster .logo-row) flow 3→2→1 on their own via
   auto-fit. Everything below tunes the edges: wide/ultrawide breathing room,
   and small-screen polish. Editorial 2-col stacks keep their art-directed
   breakpoints above.
       Phone ≤640 · small phone ≤430        Wide ≥1600 · Ultrawide ≥2000 / ≥2560
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── WIDE & ULTRAWIDE — let the layout fill large monitors instead of
      stranding content at 1200px in a sea of margin ──────────────────────── */
@media (min-width:1600px){
  :root{
    --maxw:1340px;
    --pad:clamp(48px,4.2vw,88px);
    --sect:clamp(96px,7vw,134px);
  }
  body{font-size:19px}
  .wrap-narrow{width:min(1060px,100%)}
  .hdr-pill{width:min(1240px,100%)}
}
@media (min-width:2000px){
  :root{
    --maxw:1480px;
    --sect:clamp(116px,6.4vw,156px);
  }
  body{font-size:20px}
}
@media (min-width:2560px){
  :root{--maxw:1640px}
  body{font-size:21px}
  .wrap-narrow{width:min(1160px,100%)}
}

/* ── TABLET & DOWN — clean up the announcement strip ───────────────────────── */
@media (max-width:760px){
  .hdr-strip .util{display:none}
  .hdr-strip .strip-in{justify-content:center}
}

/* ── PHONE ─────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .hero{padding-top:clamp(148px,38vw,196px)}
  .hero-actions{gap:12px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hero-meta{gap:22px 28px}
  .hero-meta .div{display:none}                 /* orphaned hairlines when wrapped */
  .crisis-top .title{max-width:none}
  .tf-cell{gap:11px;padding:16px 16px}
  .tf-from p,.tf-to p{font-size:.96rem}
}

/* ── SMALL PHONE ───────────────────────────────────────────────────────────── */
@media (max-width:430px){
  :root{--pad:18px}
  body{font-size:17px}
  .hero-meta{flex-direction:column;align-items:center;gap:16px;text-align:center}
  .hero-meta .mi{align-items:center}
  .hdr-pill{padding-right:8px}
  .brand .brand-logo{height:36px}
  .foot-base2{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ── 3-UP CARD ROWS — never strand a lone third card ───────────────────────
   Approach cards + partner roster: 3-col desktop → 2-col tablet with the
   orphaned third card centered at a normal card's width → 1-col phone. */
@media (max-width:860px) and (min-width:561px){
  .feat,.roster{grid-template-columns:repeat(2,1fr)}
  .feat>*:last-child:nth-child(odd),
  .roster>*:last-child:nth-child(odd){
    grid-column:1 / -1;justify-self:center;
    width:calc((100% - var(--cgap)) / 2)}
}
@media (max-width:560px){
  .feat,.roster{grid-template-columns:1fr}
}

/* ── MOBILE — center the editorial content, and let the circular photos
      bleed off-screen as graphic elements instead of boxed squares ───────── */
@media (max-width:640px){
  /* center headings + copy */
  .sec-head,.crisis-top,.m-copy,.p-copy,.foot-call-copy{text-align:center}
  .sec-head .eyebrow,.crisis-top .eyebrow,
  .p-copy .p-tag,.foot-call .eyebrow{justify-content:center}
  .sec-head .lead,.crisis-top .lead,.crisis-top .title,
  .p-copy>p,.foot-call h2,.foot-call p{margin-inline:auto}
  .m-copy,.p-copy{max-width:48ch;margin-inline:auto}
  .p-points{align-items:center}
  .p-points li{text-align:left}
  .foot-call .call-actions{justify-content:center}

  /* centered footer brand block (logo, description, region chips) */
  .foot-brand{text-align:center}
  .foot-brand img{margin-inline:auto}
  .foot-brand p{margin-inline:auto}
  .foot-where{justify-content:center}

  /* approach cards centered */
  .fcard{text-align:center}
  .fcard .ic{margin-inline:auto}

  /* where-we-work goals centered */
  .goal{text-align:center}
  .goal p{margin-inline:auto}
}

/* converted design-time image slots → real images */
img.ph{display:block;object-fit:cover}

/* accessible skip link (shared shell) */
.wr-skip{position:absolute;left:-9999px;top:0;z-index:1001;padding:.7rem 1.1rem;
  border-radius:0 0 12px 0;background:var(--wr-choco);color:var(--wr-cream);
  font-family:var(--wr-font);font-weight:700;font-size:.9rem;text-decoration:none}
.wr-skip:focus{left:0}

/* ── Partner form (Signal · lead capture on the dark footer) ─────────────── */
.foot-form{position:relative;z-index:2}
.wr-form{position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--cream);border:1px solid var(--hair);
  border-radius:var(--radius);padding:clamp(22px,3vw,30px);
  box-shadow:0 34px 70px -44px rgba(0,0,0,.55)}
.wr-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wr-field{display:flex;flex-direction:column;gap:6px}
.wr-field label{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--chocolate)}
.wr-field .wr-opt{color:var(--ink-soft);font-weight:600}
.wr-form input,.wr-form textarea{font-family:var(--font);font-size:1rem;color:var(--chocolate);
  background:#fff;border:1px solid var(--hair-strong);border-radius:12px;
  padding:.7rem .9rem;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.wr-form input::placeholder,.wr-form textarea::placeholder{color:rgba(71,32,27,.45)}
.wr-form input:focus,.wr-form textarea:focus{outline:none;border-color:var(--plum);
  background:rgba(201,240,255,.28)}
.wr-form textarea{resize:vertical;min-height:96px}
.wr-consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;
  color:var(--ink-soft);line-height:1.45;cursor:pointer}
.wr-consent-row input{margin-top:.2em;accent-color:var(--watermelon);flex:none;width:16px;height:16px}
.wr-consent-row a{color:var(--plum);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wr-consent-row a:hover{color:var(--chocolate)}
.wr-form__submit{align-self:flex-start;margin-top:4px}
.wr-form__status{font-size:.9rem;line-height:1.5;margin-top:2px;min-height:1.2em;color:var(--ink-soft)}
.wr-form__status.is-ok{color:var(--plum);font-weight:700}
.wr-form__status.is-err{color:var(--watermelon);font-weight:700}
.wr-form.is-sent .wr-field,.wr-form.is-sent .wr-consent-row,.wr-form.is-sent .wr-form__hp,
.wr-form.is-sent .wr-form__submit{display:none}

/* ── Film player states (poster → play → controls) ───────────────────────── */
.videoframe .vf-play,.videoframe .vf-scrim,.videoframe .vf-label{opacity:1;
  transition:opacity .35s var(--ease)}
.videoframe.is-playing .vf-scrim,.videoframe.is-playing .vf-play{opacity:0;pointer-events:none}
.videoframe.is-error .vf-play,.videoframe.is-error .vf-scrim{opacity:0;pointer-events:none}
.vf-fallback{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px;text-align:center;
  color:var(--on-dark-soft);font:600 .9rem/1.4 var(--font)}
.vf-fallback a{color:var(--sky);text-decoration:underline}

/* ── Custom film controls (brand-styled; replaces native controls) ── */
.videoframe.is-playing:hover .vf-poster{transform:none}   /* no zoom while the player is active */
.vf-controls{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:12px;padding:12px clamp(12px,2vw,18px) 14px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s var(--wr-ease),transform .25s var(--wr-ease);
  background:linear-gradient(0deg,rgba(40,16,12,.85),rgba(40,16,12,.35) 62%,transparent)}
.videoframe.is-playing .vf-controls{opacity:1;transform:none;pointer-events:auto}
.videoframe.is-playing:not(:hover) .vf-controls{opacity:.001}   /* fade out when idle-hovering, but keep tab-focusable */
.videoframe.is-playing:hover .vf-controls,
.videoframe.is-playing .vf-controls:focus-within{opacity:1;transform:none}
.vf-btn{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(249,243,220,.16);color:var(--cream);
  transition:background .2s var(--wr-ease),transform .2s var(--wr-ease)}
.vf-btn:hover{background:var(--melon);transform:translateY(-1px)}
.vf-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.vf-btn svg{width:20px;height:20px;fill:currentColor}
.vf-time{flex:0 0 auto;min-width:92px;font:600 .82rem/1 var(--wr-font);color:var(--cream);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vf-seek{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:7px;border-radius:99px;cursor:pointer;
  background:
    linear-gradient(var(--melon),var(--melon)) 0/var(--p,0%) 100% no-repeat,
    rgba(255,255,255,.32);
  box-shadow:inset 0 0 0 1px rgba(40,16,12,.28)}
.vf-seek::-webkit-slider-runnable-track{height:7px;border-radius:99px;background:transparent}
.vf-seek::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4.5px;width:16px;height:16px;border-radius:50%;
  background:var(--cream);box-shadow:0 0 0 3px var(--melon),0 1px 4px rgba(40,16,12,.5);cursor:pointer}
.vf-seek::-moz-range-track{height:7px;border-radius:99px;background:transparent}
.vf-seek::-moz-range-progress{height:7px;border-radius:99px;background:var(--melon)}
.vf-seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;
  background:var(--cream);box-shadow:0 0 0 3px var(--melon),0 1px 4px rgba(40,16,12,.5);cursor:pointer}
.vf-seek:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
@media (max-width:560px){
  .vf-controls{gap:8px;padding:10px 12px}
  .vf-btn{width:38px;height:38px}
  .vf-time{min-width:0;font-size:.72rem}
}

/* ── "Alive" idle drift for the circular photo devices (JS randomizes per element) ──
   Applied to inner layers only (never the [data-parallax] containers/accents, so the
   scroll parallax and this idle motion never fight over transform). Subtle + slow. */
@keyframes wrDriftA{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(9px,-20px,0) rotate(1.1deg)}}
@keyframes wrDriftB{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-15px,-12px,0) rotate(-1deg)}}
@keyframes wrDriftC{0%,100%{transform:translate3d(0,0,0) rotate(0)}34%{transform:translate3d(11px,-9px,0) rotate(.8deg)}68%{transform:translate3d(-9px,-21px,0) rotate(-.7deg)}}
@keyframes wrDriftD{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(16px,-9px,0) rotate(1deg)}}
.wr-alive{will-change:transform}
@media (prefers-reduced-motion:reduce){.wr-alive{animation:none!important}}

/* ── #7/#10 · visible slow "breathing" of the approach-card icons + disc ──── */
.fcard .ic{will-change:transform;animation:wrIcDisc 6s ease-in-out infinite}
.fcard:nth-child(2) .ic{animation-delay:-2s}
.fcard:nth-child(3) .ic{animation-delay:-3.6s}
.fcard .ic svg{transform-origin:center;
  animation:wrIconBreathe 3.8s ease-in-out infinite}
.fcard:nth-child(2) .ic svg{animation-duration:4.6s;animation-delay:-1.5s}
.fcard:nth-child(3) .ic svg{animation-duration:4.2s;animation-delay:-2.6s}
@keyframes wrIconBreathe{
  0%,100%{transform:translateY(0) scale(1) rotate(0)}
  50%{transform:translateY(-3px) scale(1.16) rotate(4deg)}}
@keyframes wrIcDisc{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.fcard .ic,.fcard .ic svg{animation:none}}

/* ── Anti-FOUC for the fly-in: hide the photo-device layers BEFORE first paint,
   only when JS is active + motion allowed (html.wr-js set by an early inline script).
   float.js then flies them in. No .wr-js (JS off / reduced motion) ⇒ they stay visible. */
.wr-js .m-photo img.ph,.wr-js .m-photo .m-disc,.wr-js .m-photo .m-dot,
.wr-js .p-media img.ph,.wr-js .p-media .disc,.wr-js .p-media .dot,.wr-js .p-media .pn,
.wr-js .rphoto img.ph,.wr-js .rphoto .rring,.wr-js .rphoto .rdot{opacity:0}

/* ── "The shift" table — reveal Today first, then whoosh in the "With Imara" side ──
   Right-hand cells wipe in from the right (clipped by .transform's overflow), staggered
   row by row; the check markers pop in just after. Keys off reveal.js's .in on .transform. */
.transform .tf-to{opacity:0;transform:translateX(48px);
  transition:opacity .55s ease, transform .75s cubic-bezier(.22,.61,.36,1)}
.transform.in .tf-to{opacity:1;transform:none}
.transform.in .tf-row:nth-child(1) .tf-to{transition-delay:.30s}
.transform.in .tf-row:nth-child(2) .tf-to{transition-delay:.46s}
.transform.in .tf-row:nth-child(3) .tf-to{transition-delay:.62s}
.transform.in .tf-row:nth-child(4) .tf-to{transition-delay:.78s}
/* check markers pop just after their row arrives */
.transform .tf-to .tf-mk{opacity:0;transform:scale(.2);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease}
.transform.in .tf-to .tf-mk{opacity:1;transform:scale(1)}
.transform.in .tf-row:nth-child(2) .tf-to .tf-mk{transition-delay:.72s}
.transform.in .tf-row:nth-child(3) .tf-to .tf-mk{transition-delay:.88s}
.transform.in .tf-row:nth-child(4) .tf-to .tf-mk{transition-delay:1.04s}
@media (prefers-reduced-motion:reduce){
  .transform .tf-to,.transform .tf-to .tf-mk{opacity:1;transform:none;transition:none}}

/* ── Hero intro sequence — H1 words play via .fx-head; hero.js then reveals
   lead → buttons → stats in order. Gated by .wr-js so JS-off / reduced-motion
   shows everything instantly (no hidden hero). Button choreography is inline in hero.js. */
.wr-js .hero .lead.hero-seq,.wr-js .hero .hero-meta.hero-seq{opacity:0;transform:translateY(18px)}
.hero .lead.hero-seq,.hero .hero-meta.hero-seq{transition:opacity .7s var(--ease),transform .8s var(--ease)}
.hero .lead.hero-seq.is-in,.hero .hero-meta.hero-seq.is-in{opacity:1;transform:none}
.wr-js .hero .hero-actions .btn{opacity:0}

/* ═══ Hero scroll cue ════════════════════════════════════════════════════════
   Small "Scroll" hint pinned to the bottom of the full-height hero; a dot travels
   the rail on a loop and the whole cue fades out once the user scrolls. */
.hero{min-height:100svh;position:sticky;top:0;z-index:0}
/* Everything below the hero rides above it (opaque) and scrolls up to cover it. */
/* Transparent so the FILM section (its first child) is a window onto the
   receding hero behind it. Every other section carries its own opaque
   background (cream / chocolate / sky, set on their own rules), so only the
   film section reveals the hero. */
.after-hero{position:relative;z-index:1}
.hero-scroll{position:absolute;left:50%;bottom:clamp(14px,2.2vw,22px);transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--on-dark-soft);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero-scroll.is-hidden{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}
.wr-js .hero-scroll{opacity:0}
.hero-scroll.is-in{opacity:1}
.hs-label{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.hs-rail{position:relative;width:1.5px;height:30px;border-radius:2px;background:rgba(249,243,220,.24);overflow:hidden}
.hs-dot{position:absolute;left:50%;top:0;width:4px;height:4px;border-radius:50%;background:var(--sky);
  transform:translateX(-50%);animation:hsDot 1.9s var(--ease) infinite}
@keyframes hsDot{0%{top:-5px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:32px;opacity:0}}
@media (max-width:640px){ .hero{min-height:100svh} .hero-scroll{display:none} }
@media (prefers-reduced-motion:reduce){ .hs-dot{animation:none} }

/* ═══ Legal / policy pages (privacy.html, cookies.html) ═════════════════════ */
.legal-page{background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.legal-head{position:sticky;top:0;z-index:50;
  background:rgba(249,243,220,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair)}
.legal-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.legal-head .lh-brand img{height:38px;width:auto;display:block}
.legal-head .lh-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--plum)}
.legal-head .lh-back:hover{color:var(--chocolate)}
.legal-main{flex:1;padding-block:clamp(38px,6vw,68px) clamp(60px,8vw,110px)}
.legal-doc{max-width:760px;margin-inline:auto}
.legal-doc .eyebrow{margin-bottom:14px}
.legal-doc h1{font-size:clamp(2rem,4.4vw,3rem);color:var(--chocolate);line-height:1.06;margin-bottom:12px}
.legal-lead{font-size:1.12rem;line-height:1.6;color:var(--ink-soft);margin:0 0 6px}
.legal-meta{color:var(--ink-soft);font-size:.92rem;margin:0 0 24px}
.legal-doc h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--chocolate);margin:38px 0 12px;line-height:1.15}
.legal-doc h3{font-size:1.06rem;color:var(--chocolate);margin:22px 0 8px}
.legal-doc p{color:var(--ink);font-size:1.02rem;line-height:1.72;margin:0 0 14px}
.legal-doc ul{margin:0 0 16px;padding-left:1.25em;display:flex;flex-direction:column;gap:8px}
.legal-doc li{color:var(--ink);font-size:1.02rem;line-height:1.6;padding-left:4px}
.legal-doc a{color:var(--plum);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.legal-doc a:hover{color:var(--chocolate)}
.legal-doc strong{color:var(--chocolate)}
.legal-toc{background:rgba(249,243,220,.7);border:1px solid var(--hair);border-radius:14px;padding:18px 22px;margin:24px 0 36px}
.legal-toc h2{margin:0 0 10px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.legal-toc ul{margin:0;padding:0;list-style:none;gap:7px}
.legal-toc a{font-weight:600;text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal-note{background:rgba(223,67,93,.08);border:1px solid rgba(223,67,93,.28);border-radius:12px;
  padding:15px 20px;margin:0 0 30px;color:var(--ink);font-size:.95rem;line-height:1.6}
.legal-fill{background:#fff3d6;border:1px dashed #c9a13a;border-radius:7px;padding:1px 7px;
  color:#7a5a12;font-weight:700;font-size:.92em}
.legal-table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:.95rem}
.legal-table th,.legal-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.legal-table th{color:var(--plum);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.legal-table td{color:var(--ink);line-height:1.5}
.legal-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(71,32,27,.07);padding:1px 5px;border-radius:5px}
.legal-foot{background:var(--chocolate);color:var(--on-dark-soft);padding-block:26px;font-size:.9rem}
.legal-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.legal-foot a{color:var(--on-dark-soft);font-weight:600}
.legal-foot a:hover{color:var(--cream)}
.legal-foot .lf-links{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:640px){
  .legal-foot .wrap{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table thead{display:none}
  .legal-table td{border:0;padding:2px 0}
  .legal-table tr{border-bottom:1px solid var(--hair);padding:12px 0}
  .legal-table td::before{content:attr(data-label);display:block;font-size:.7rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--plum);margin-bottom:2px}
}

/* ── Footer: fully centered on tablet & smaller ──────────────────────────────
   Placed last so it wins over the earlier left-align base-bar rules. Centers
   the call-to-action copy, the brand block, the three link columns and the
   base bar. The form fields stay left-aligned (standard form legibility). */
@media (max-width:900px){
  .foot-call-copy{text-align:center}
  .foot-call-copy h2,.foot-call-copy p,.foot-contact{margin-inline:auto}

  .foot-brand{text-align:center;grid-column:1 / -1}
  .foot-brand img,.foot-brand p{margin-inline:auto}
  .foot-where{justify-content:center}

  .foot-col{text-align:center}
  .foot-col a{justify-content:center}

  .foot-base2{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .foot-base2 .legal{justify-content:center}
}

/* ── News / Newsroom page ─────────────────────────────────────────────────── */
.news-doc{max-width:760px;margin-inline:auto}
.news-doc .eyebrow{margin-bottom:14px}
.news-doc h1{font-size:clamp(2rem,4.4vw,3rem);color:var(--chocolate);line-height:1.06;margin-bottom:12px}
.news-lead{font-size:1.12rem;line-height:1.6;color:var(--ink-soft);margin:0 0 8px}
.news-item{margin-top:30px;padding:clamp(24px,4vw,40px);border-radius:var(--radius);background:var(--card);
  box-shadow:0 18px 44px -30px rgba(71,32,27,.5),inset 0 0 0 1px var(--hair)}
.news-date{font:700 .8rem/1 var(--wr-font);letter-spacing:.06em;text-transform:uppercase;color:var(--plum);margin-bottom:10px}
.news-item h2{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--chocolate);line-height:1.15;margin:0 0 16px}
.news-item p{color:var(--ink);font-size:1.04rem;line-height:1.7;margin:0 0 14px}
.news-quote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--watermelon);
  font-size:1.14rem;line-height:1.5;font-style:italic;color:var(--ink)}
.news-quote cite{display:block;margin-top:10px;font-size:.9rem;font-style:normal;color:var(--ink-soft)}
.news-item .btn{margin-top:10px}
.news-res{margin-top:44px;padding-top:30px;border-top:1px solid var(--hair)}
.res-grid{display:grid;gap:14px}
.news-res h2{font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--chocolate);margin:0 0 16px}
.res-card{padding:22px 24px;border-radius:var(--radius);color:var(--ink-soft);line-height:1.6;border:1px dashed var(--hair-strong);
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(71,32,27,.035) 9px,rgba(71,32,27,.035) 18px)}
.res-card strong{color:var(--chocolate)}

/* Sub-page header — 3-column: back (left), logo (centre), actions (right) */
.legal-head--center .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:min(calc(760px + 2 * var(--pad)),100%)}
.legal-head--center .lh-back{justify-self:start}
.legal-head--center .lh-backs{justify-self:start;display:inline-flex;align-items:center;gap:clamp(10px,1.6vw,18px);flex-wrap:wrap}
.legal-head--center .lh-brand{justify-self:center}
.legal-head--center .lh-actions{justify-self:end}
.lh-cta{padding:.55rem 1.05rem;font-size:.88rem;white-space:nowrap}
@media (max-width:760px){.legal-head--center .lh-cta{display:none}}
@media (max-width:520px){
  .legal-head--center .wrap{gap:10px}
  .legal-head--center .lh-back{font-size:0;gap:0}
  .legal-head--center .lh-back svg{width:20px;height:20px}
  .legal-head .lh-brand img{height:30px}
}

/* Narrow footer variant — matches the 760px sub-page content column (News, etc.) */
.site-foot--narrow .wrap{width:min(calc(760px + 2 * var(--pad)),100%)}
.site-foot--narrow .foot-call{grid-template-columns:1fr;gap:40px;padding-block:clamp(48px,7vw,76px)}
.site-foot--narrow .foot-call h2{max-width:20ch}
.site-foot--narrow .foot-grid{grid-template-columns:repeat(3,1fr);gap:30px 24px}
.site-foot--narrow .foot-brand{grid-column:1 / -1}
.site-foot--narrow .foot-brand p{max-width:none}
@media (max-width:640px){
  .site-foot--narrow .foot-grid{grid-template-columns:1fr 1fr}
  .site-foot--narrow .foot-base2{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ── Leaflet page ─────────────────────────────────────────────────────────── */
.lf-doc{max-width:760px;margin-inline:auto}
.lf-doc .eyebrow{margin-bottom:14px}
.lf-titleband{background:linear-gradient(150deg,var(--plum),var(--chocolate));color:var(--cream);
  border-radius:var(--radius);padding:clamp(24px,4vw,40px);margin-bottom:24px}
.lf-titleband h1{font-size:clamp(1.5rem,3.1vw,2.15rem);line-height:1.14;color:var(--cream);margin:0}
.lf-titleband p{margin:12px 0 0;color:var(--sky);font-size:1.05rem}
.lf-download{margin:0 0 28px}
.lf-intro{font-size:1.08rem;line-height:1.7;color:var(--ink);margin:0 0 14px}
.lf-list{margin:0 0 14px;padding-left:1.15em;display:flex;flex-direction:column;gap:8px;color:var(--ink);font-size:1.04rem}
.lf-forward{font-weight:700;color:var(--plum);font-size:1.12rem;margin:0 0 6px}
.lf-stats{display:flex;flex-direction:column;gap:14px;margin:26px 0}
.lf-stat{display:flex;align-items:center;gap:20px;background:linear-gradient(150deg,#6a0b48,var(--plum));
  color:var(--cream);border-radius:16px;padding:20px 24px}
.lf-statnum{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:700;color:var(--sky);line-height:1;
  flex:0 0 auto;min-width:4ch;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lf-stat p{margin:0;font-size:1rem;line-height:1.45;color:var(--cream)}
.lf-stat sup{color:var(--sky)}
.lf-figure{margin:30px 0;border-radius:var(--radius);overflow:hidden}
.lf-figure img{display:block;width:100%;height:auto}
.lf-doc h2{font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--chocolate);line-height:1.15;margin:38px 0 14px}
.lf-doc p{color:var(--ink);font-size:1.04rem;line-height:1.7;margin:0 0 14px}
.lf-sub{color:var(--ink-soft);margin-top:-6px}
.lf-goal{font-size:1.1rem;color:var(--chocolate)}
.lf-goal strong{color:var(--plum)}
.lf-pathway{display:flex;flex-direction:column;gap:16px;margin:22px 0}
.lf-tier{border:1px solid var(--hair);border-radius:var(--radius);padding:22px 24px;background:var(--card)}
.lf-tier-h{font-size:1.08rem;font-weight:700;color:var(--chocolate);margin-bottom:8px;line-height:1.3}
.lf-tier-k{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  background:var(--plum);border-radius:999px;padding:4px 11px;margin-right:9px;vertical-align:middle}
.lf-tier>p{font-size:.98rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
.lf-acts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lf-acts li{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:1rem}
.lf-acts li span{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--watermelon);
  color:var(--cream);font-size:.8rem;font-weight:700;display:inline-grid;place-items:center}
.lf-meaning{margin:32px 0;padding:22px 26px;border-left:3px solid var(--watermelon);
  background:var(--card);border-radius:0 var(--radius) var(--radius) 0}
.lf-meaning p{margin:0;font-size:1.06rem;line-height:1.65}
.lf-meaning strong{color:var(--plum)}
.lf-contact{margin:32px 0;padding:clamp(24px,4vw,34px);border-radius:var(--radius);
  background:linear-gradient(150deg,var(--plum),var(--chocolate));color:var(--cream)}
.lf-contact .eyebrow{color:var(--sky)}
.lf-contact .eyebrow::before{background:var(--sky)}
.lf-contact p{color:var(--cream);margin:10px 0 0;font-size:1.08rem;line-height:1.55}
.lf-contact a{color:var(--sky);font-weight:700;border-bottom:1.5px solid transparent}
.lf-contact a:hover{border-color:var(--sky)}
.lf-refs{margin:34px 0 0;padding:20px 0 0;border-top:1px solid var(--hair);font-size:.8rem;
  color:var(--ink-faint);line-height:1.5;display:flex;flex-direction:column;gap:8px}
.lf-refs em{font-style:italic}
/* News resources card as a link */
.res-card--link{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.res-card--link:hover{border-color:var(--plum)}
.res-card--link strong{color:var(--chocolate)}
.res-card--link .res-go{margin-top:8px;color:var(--plum);font-weight:700}
/* stat-pill text must stay cream (override .lf-doc p) */
.lf-doc .lf-stat p{color:var(--cream)}
.lf-doc .lf-stat p sup{color:var(--sky)}
/* titleband subtitle must stay light on the dark band (override .lf-doc p order) */
.lf-doc .lf-titleband p{color:var(--sky)}

/* ── Presentation / strategic-overview page (.pg-*) ── */
.pg-obj{margin:6px 0 30px;padding:22px 26px;border-left:3px solid var(--watermelon);
  background:var(--card);border-radius:0 var(--radius) var(--radius) 0}
.pg-obj .eyebrow{margin-bottom:10px}
.pg-obj p{margin:0;font-size:1.18rem;line-height:1.5;color:var(--chocolate);font-weight:600}
.pg-chips{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}
.pg-chip{display:inline-flex;align-items:center;gap:9px;padding:.5rem 1rem;border-radius:99px;
  border:1px solid var(--hair);background:var(--card);color:var(--chocolate);font-weight:600;font-size:.98rem}
.pg-chip .pip{width:8px;height:8px;border-radius:50%;background:var(--watermelon);flex:0 0 auto}
.pg-geo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px;margin:22px 0 10px}
.pg-geo-card{border:1px solid var(--hair);border-radius:var(--radius);padding:22px 20px;background:var(--card);text-align:center}
.pg-geo-num{font-size:clamp(2.1rem,4.6vw,2.7rem);font-weight:700;line-height:1;color:var(--plum);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pg-geo-suf{color:var(--watermelon);font-size:.62em;font-weight:700;margin-left:.04em}
.pg-geo-place{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.pg-geo-place strong{color:var(--chocolate);font-size:1.02rem}
.pg-geo-place span{color:var(--ink-soft);font-size:.9rem}
.pg-geo-note{margin-top:2px}
.pg-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 8px}
.pg-pillar{position:relative;border:1px solid var(--hair);border-radius:var(--radius);padding:24px 22px;background:var(--card)}
.pg-pillar-k{width:34px;height:34px;border-radius:50%;background:var(--watermelon);color:var(--cream);
  font-weight:700;display:grid;place-items:center;font-size:1.02rem;margin-bottom:14px}
.pg-pillar h3{font-size:1.12rem;color:var(--chocolate);line-height:1.25;margin:0 0 12px}
.pg-pillar ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px;
  color:var(--ink);font-size:.96rem;line-height:1.45}
.lf-doc .pg-take{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair);
  font-style:italic;color:var(--plum);font-weight:600;font-size:.98rem;line-height:1.45}
.lf-doc .pg-close{margin:26px 0 0;padding:clamp(22px,3.4vw,30px) clamp(24px,4vw,34px);border-radius:var(--radius);
  background:linear-gradient(150deg,var(--plum),var(--chocolate));color:var(--cream);
  font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;line-height:1.35;text-align:center;font-style:italic}
@media (max-width:720px){.pg-pillars{grid-template-columns:1fr}}
@media print{
  .legal-head,.site-foot,.lh-cta{display:none!important}
  .legal-main{padding:0!important}
  .lf-doc{max-width:none;margin:0}
  body.legal-page{background:#fff}
  .reveal{opacity:1!important;transform:none!important}
  .pg-pillar,.lf-tier,.pg-geo-card,.lf-stat,.delphi,.pg-obj,.pg-close,.lf-contact,.lf-titleband{break-inside:avoid}
  .lf-download{display:none!important}
}