/* ============================================================
   JAY — Jain Association of Youth · jainyouth.org
   Structure modelled on lionsclubs.org; palette taken from the
   JAY logo (saffron #FB780E · indigo #4735BB · teal #009C90).
   ============================================================ */
@layer reset, tokens, base, layout, header, hero, components, utils, responsive, polish;

@layer reset {
  picture{display:contents}
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,svg,video,canvas{display:block;max-width:100%;height:auto}
  input,button,select,textarea{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  ul,ol{list-style:none;padding:0}
  h1,h2,h3,h4{font-size:inherit;font-weight:inherit;line-height:inherit;text-wrap:balance}
  p{text-wrap:pretty}
  site-header,cine-hero,ig-feed{display:block}
}

@layer tokens {
  :root{
    /* brand, sampled from the logo */
    --saffron:#FB780E;  --saffron-d:#DD5A00;  --saffron-l:#FFA352;
    --vermilion:#E24405;
    --indigo:#4735BB;   --indigo-d:#2F2088;   --indigo-l:#6A56D6;
    --teal:#009C90;     --teal-d:#00696B;
    --magenta:#C31E67;  --magenta-d:#96134D;
    --gold:#F2A20C;
    --cta:#F9C910;     --cta-d:#E4B400;   --cta-l:#FFDA4A;

    /* surfaces — deep indigo stands in for the Lions navy */
    --navy:#171034;     --navy-2:#221845;   --navy-3:#2E2158;
    --ink:#141029;      --ink-2:#4A4361;    --ink-3:#7B7392;
    --page:#F4F1ED;     --white:#fff;       --cream:#FFF9F2;
    --line:#E6DFD6;     --line-2:#D6CCC0;

    --f-display:"Plus Jakarta Sans","Noto Sans Devanagari",system-ui,sans-serif;
    --f-body:"Assistant","Noto Sans Devanagari",system-ui,sans-serif;
    --f-serif:"Fraunces","Noto Sans Devanagari",Georgia,serif;

    --pad:clamp(18px,4vw,60px);
    --wrap:1240px;
    --sect:clamp(44px,5vw,78px);
    --r:5px;                              /* Lions uses a tight 5px radius */
    --r-m:10px;
    --ease:cubic-bezier(.22,.8,.3,1);
    --shadow:0 2px 4px rgba(20,16,41,.05),0 18px 40px -24px rgba(20,16,41,.32);
    --shadow-l:0 30px 70px -34px rgba(20,16,41,.45);
    --cut:34px;                            /* diagonal photo cut */
    --hdr-h:80px;
  }
  .t-navy   {--acc:var(--indigo);  --acc-d:var(--indigo-d); --acc-soft:#ECE9FB}
  .t-orange {--acc:var(--saffron); --acc-d:var(--saffron-d);--acc-soft:#FFEEDD}
  .t-teal   {--acc:var(--teal);    --acc-d:var(--teal-d);   --acc-soft:#E2F5F2}
  .t-purple {--acc:var(--indigo);  --acc-d:var(--indigo-d); --acc-soft:#ECE9FB}
  .t-magenta{--acc:var(--magenta); --acc-d:var(--magenta-d);--acc-soft:#FDE7EF}
  .t-gold   {--acc:#C98205;        --acc-d:#9E6503;         --acc-soft:#FCF0D9}
  .t-blue   {--acc:#1E63C4;        --acc-d:#154A96;         --acc-soft:#E4EDFB}
  :root{--acc:var(--saffron);--acc-d:var(--saffron-d);--acc-soft:#FFEEDD}
}

@layer base {
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:var(--f-body);font-size:clamp(16px,.4vw + 15px,17px);
    line-height:1.65;color:var(--ink);background:var(--page);overflow-x:hidden;
    /* The sticky header shrinks on scroll. Scroll anchoring reacts by moving
       the scroll position to compensate, which re-triggers the header — an
       endless flicker. Every image here carries explicit dimensions, so
       anchoring is not earning its keep anyway. */
    overflow-anchor:none}
  ::selection{background:var(--saffron);color:#fff}
  :focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:3px}

  .d1,.d2,.d3,.d4{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em;line-height:1.06}
  .d1{font-size:clamp(2.3rem,4.6vw,4.2rem)}
  .d2{font-size:clamp(1.8rem,3.2vw,2.9rem);line-height:1.1}
  .d3{font-size:clamp(1.35rem,1.9vw,1.85rem);line-height:1.16}
  .d4{font-size:clamp(1.08rem,1.2vw,1.28rem);line-height:1.28;font-weight:700}

  .lede{font-size:clamp(1.02rem,1vw,1.16rem);line-height:1.6;color:var(--ink-2)}
  .muted{color:var(--ink-2)}

  /* the signature: a short saffron rule under every section heading */
  .ruled{position:relative;padding-bottom:18px}
  .ruled::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:4px;
    background:var(--saffron);border-radius:2px}
  .ruled--c{text-align:center}
  .ruled--c::after{left:50%;transform:translateX(-50%)}
  .on-dark .ruled::after,.ruled--light::after{background:var(--saffron)}

  .eyebrow{font-family:var(--f-display);font-weight:700;font-size:.72rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--acc-d)}
  [lang="hi"]{font-family:"Noto Sans Devanagari",var(--f-body);line-height:1.85}
}

@layer layout {
  .wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
  .wrap-w{width:min(100% - var(--pad)*2,1480px);margin-inline:auto}
  .sect{padding-block:var(--sect)}
  .sect--tight{padding-block:clamp(30px,3.4vw,52px)}
  .bg-page{background:var(--page)}
  .bg-white{background:var(--white)}
  .bg-cream{background:var(--cream)}
  .bg-navy{background:var(--navy);color:#fff}
  .bg-navy .lede,.bg-navy p{color:rgba(255,255,255,.78)}

  .grid{display:grid;gap:clamp(18px,2.2vw,32px)}
  .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
  .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
  .split{display:grid;gap:clamp(24px,3.4vw,56px);align-items:center;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  @media (max-width:900px){.split{grid-template-columns:1fr}}
  .head{display:grid;gap:13px;max-width:64ch;margin-bottom:clamp(20px,2.3vw,34px)}
  .head--c{margin-inline:auto;text-align:center;justify-items:center}
  .head--row{max-width:none;grid-template-columns:1fr auto;align-items:end;gap:24px}
  @media (max-width:760px){.head--row{grid-template-columns:1fr}}

  /* the white content card the whole page sits on, Lions style */
  .panel{background:var(--white);padding:clamp(26px,4vw,64px) clamp(20px,3.4vw,56px)}
}

@layer header {
  site-header{position:sticky;top:0;z-index:100}
  /* `relative` so the brand rail and the mobile nav panel hang off it */
  .hdr{position:relative;background:var(--white);
    transition:box-shadow .22s ease-out,background-color .22s ease-out}
  /* Compact state: frosted and floating rather than flat white. Both
     properties are composited, so collapsing costs no layout. */
  body.stuck .hdr{background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
    backdrop-filter:blur(14px) saturate(1.5);
    box-shadow:0 10px 30px -20px rgba(20,16,41,.62)}
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    body.stuck .hdr{background:var(--white)}
  }

  /* ── the brand rail · doubles as the read-progress indicator ────────
     The header is plain white, so the JAY palette lives on its edge
     permanently: a 3px ribbon under a
     white wash that retreats as you scroll, so the colours ink in.
     One transform on a flat fill — nothing here can trigger layout. */
  .hdr__rail{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
    overflow:hidden;pointer-events:none;
    background:linear-gradient(90deg,var(--teal) 0%,var(--saffron) 52%,var(--indigo) 100%)}
  .prog{position:absolute;inset:0;background:rgba(255,255,255,.82);
    transform-origin:100% 50%;transform:scaleX(1);will-change:transform}
  body.stuck .prog{background:rgba(255,255,255,.7)}


  /* ── the main row · brand · nav · actions ───────────────────────────
     One row on desktop rather than two: with four nav items a second band
     left half the header empty. */
  /* 64px around a 42px mark left 11px of air top and bottom, which read as
     cramped next to 40px buttons. The row now carries real padding and the
     mark sits in the middle of it rather than filling it. */
  .brandrow{display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);
    min-height:74px;padding-block:6px}
  /* ── brand lockup · mark │ name / place ────────────────────────────
     The name used to be an unstyled <span>, so it rendered as plain body
     copy and read louder than the mark beside it. It is now a proper
     two-line lockup behind a hairline rule: display face, tight leading,
     and a letter-spaced line under it. */
  .brand{display:flex;align-items:center;gap:12px;flex:none}
  .brand img{width:auto;height:42px}
  .brand__txt{display:flex;flex-direction:column;justify-content:center;gap:3px;
    min-height:28px;padding-left:13px;border-left:1px solid var(--line-2)}
  .brand__txt b{font-family:var(--f-display);font-weight:800;
    font-size:clamp(.94rem,1.05vw,1.06rem);line-height:1.04;
    letter-spacing:-.014em;color:var(--ink);white-space:nowrap}
  .brand__txt small{font-family:var(--f-display);font-weight:700;font-size:.58rem;
    line-height:1;letter-spacing:.155em;text-transform:uppercase;
    color:var(--ink-3);white-space:nowrap}
  body.stuck .brand__txt{gap:0;min-height:21px}
  body.stuck .brand__txt small{display:none}
  .hdr__actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
  .hdr__actions .btn{min-height:40px;padding-inline:1.15em;font-size:.87rem;
    border-radius:var(--r);white-space:nowrap}
  .lbl-short{display:none}

  /* ── navigation ─────────────────────────────────────────────────── */
  .mainnav__in{display:flex;align-items:center;gap:clamp(2px,.7vw,12px)}
  .mainnav__in>li{position:relative;display:flex}
  .mainnav a.top{display:flex;align-items:center;gap:.35em;padding:11px 13px;
    font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--ink);
    position:relative;white-space:nowrap;border-radius:var(--r);
    transition:color .2s,background .2s}
  .mainnav a.top::after{content:"";position:absolute;left:13px;right:13px;bottom:-2px;
    height:3px;border-radius:2px;background:var(--saffron);transform:scaleX(0);
    transform-origin:left;transition:transform .25s var(--ease)}
  .mainnav a.top:hover,.mainnav li.hover>a.top{color:var(--saffron-d)}
  .mainnav a.top:hover::after,.mainnav li.hover>a.top::after,
  .mainnav li:focus-within>a.top::after,
  .mainnav a.top[aria-current="page"]::after{transform:scaleX(1)}
  .mainnav a.top .cv{width:11px;height:11px;opacity:.45;
    transition:rotate .25s var(--ease)}
  .mainnav li.hover>a.top .cv,.mainnav li:focus-within>a.top .cv{rotate:180deg}

  /* dropdown panels */
  .drop{position:absolute;top:calc(100% + 6px);left:0;min-width:266px;
    background:var(--white);border:1px solid var(--line);
    border-top:3px solid var(--saffron);box-shadow:var(--shadow);padding:9px;
    display:grid;gap:2px;z-index:5;opacity:0;visibility:hidden;translate:0 8px;
    transition:opacity .2s ease-out,translate .2s var(--ease),visibility .2s}
  /* an invisible bridge so the pointer can cross the gap without closing */
  .drop::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
  .mainnav li.hover>.drop,.mainnav li:focus-within>.drop{opacity:1;visibility:visible;translate:0}
  html:not(.js) .mainnav li:hover>.drop{opacity:1;visibility:visible;translate:0}
  .drop a{display:block;padding:9px 12px;border-radius:var(--r);font-size:.93rem;
    font-weight:600;color:var(--ink-2);transition:background .18s,color .18s}
  .drop a:hover{background:var(--acc-soft);color:var(--ink)}
  .drop a small{display:block;font-weight:500;font-size:.79rem;color:var(--ink-3);margin-top:1px}
  html:not(.js) .drop{position:static;opacity:1;visibility:visible;translate:0;
    box-shadow:none;border:0;min-width:0}

  /* ── the menu control · a labelled pill, not a grey square ─────────
     Three bare lines in a grey box gave the right-hand end of the compact
     bar no weight at all, and left the control unnamed. A tinted indigo
     pill with the word MENU balances the lockup opposite it and says what
     it does. It fills solid while the panel is open. */
  .burger{display:none;position:relative;margin-left:auto;align-items:center;justify-content:center;
    gap:9px;height:40px;min-width:40px;padding:0 13px;border-radius:var(--r);
    border:1px solid #D8D1F1;background:#F2EFFD;color:var(--indigo-d);
    font-family:var(--f-display);font-weight:800;font-size:.72rem;
    letter-spacing:.13em;text-transform:uppercase;
    transition:background .2s,border-color .2s,color .2s}
  .burger:hover{background:#E7E2FB;border-color:#C6BCEC}
  .burger__lbl{line-height:1;font-style:normal}
  .burger__bars{display:block;width:18px;height:2px;background:currentColor;
    position:relative;flex:none}
  /* offset the bars with translate, not `top` — the cross animates on the
     compositor instead of reflowing on every frame */
  .burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;top:0;
    width:18px;height:2px;background:currentColor;
    transition:transform .26s var(--ease)}
  .burger__bars::before{transform:translateY(-6px)}
  .burger__bars::after{transform:translateY(6px)}
  .burger[aria-expanded="true"]{background:var(--indigo);border-color:var(--indigo);
    color:#fff}
  .burger[aria-expanded="true"] .burger__bars{background:transparent}
  .burger[aria-expanded="true"] .burger__bars::before{transform:rotate(45deg)}
  .burger[aria-expanded="true"] .burger__bars::after{transform:rotate(-45deg)}
  .scrim{position:fixed;inset:0;z-index:90;background:rgba(18,12,36,.5);opacity:0;
    pointer-events:none;transition:opacity .28s var(--ease)}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
}

@layer hero {
  /* ── cinematic montage: camera rigs + graded FX, ported from the
        supplied simulator and re-timed for a marketing header ────── */
  .cine{position:relative;height:min(94vh,860px);min-height:520px;overflow:hidden;
    background:#0B0718;isolation:isolate}
  .cine__stage{position:absolute;inset:0;z-index:0}
  .cine__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
    transition:opacity 1.5s cubic-bezier(.4,0,.2,1),visibility 1.5s;pointer-events:none}
  .cine__slide.is-on{opacity:1;visibility:visible;z-index:2}
  .cine__media{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;
    transform-origin:center center;will-change:transform}

  /* Camera moves used expo-out curves, which spend ~90% of the travel in
     the first third of the frame and then sit dead still. Sine-in-out
     spreads the move across the whole take — it is still drifting at 90%
     — which is what a real dolly or crane looks like. --rig comes from the
     frame's own duration, so timing lives in one place. */
  .cine{--rig:7.8s;--ease-cam:cubic-bezier(.37,0,.63,1)}
  /* The moves used to zoom up to 17% about the centre of the frame, which on
     a wide screen pushed faces near the top edge clean out of the picture.
     They now zoom at most 9%, about the photograph's own focal point (the
     faces, --fx/--fy, set per image), so the push goes *into* the people.
     .is-leaving keeps the move running on the frame being dissolved away —
     removing it mid-fade made the outgoing picture snap back a step. */
  .is-on .rig-push,  .is-leaving .rig-push  {animation:rigPush  var(--rig) var(--ease-cam) forwards}
  .is-on .rig-dolly, .is-leaving .rig-dolly {animation:rigDolly var(--rig) var(--ease-cam) forwards}
  .is-on .rig-tilt,  .is-leaving .rig-tilt  {animation:rigTilt  var(--rig) var(--ease-cam) forwards}
  .is-on .rig-pan,   .is-leaving .rig-pan   {animation:rigPan   var(--rig) linear forwards}
  .is-on .rig-rise,  .is-leaving .rig-rise  {animation:rigRise  var(--rig) var(--ease-cam) forwards}
  @keyframes rigPush {from{transform:scale(1) translate3d(0,0,0)}
                      to  {transform:scale(1.075) translate3d(0,-6px,0)}}
  @keyframes rigDolly{from{transform:scale(1.09) translate3d(0,4px,0)}
                      to  {transform:scale(1.02) translate3d(0,-8px,0)}}
  @keyframes rigTilt {from{transform:scale(1.06) translate3d(0,12px,0)}
                      to  {transform:scale(1.06) translate3d(0,-12px,0)}}
  @keyframes rigPan  {from{transform:scale(1.06) translate3d(-16px,0,0)}
                      to  {transform:scale(1.06) translate3d(16px,0,0)}}
  @keyframes rigRise {from{transform:scale(1.01) translate3d(0,10px,0)}
                      to  {transform:scale(1.08) translate3d(0,-6px,0)}}

  .fx{position:absolute;inset:0;pointer-events:none}
  .fx-vig{background:radial-gradient(circle at center,transparent 32%,rgba(12,7,26,.6) 78%,rgba(8,4,18,.9) 100%),
      linear-gradient(180deg,rgba(10,6,22,.6) 0%,transparent 26%,transparent 52%,rgba(10,6,22,.88) 100%)}
  .is-on .fx-flare,.is-leaving .fx-flare{animation:flare var(--rig) var(--ease-cam) forwards;
    background:radial-gradient(circle at 76% 16%,rgba(255,214,150,.42) 0%,rgba(251,120,14,.16) 36%,transparent 70%);
    mix-blend-mode:screen}
  @keyframes flare{0%{opacity:.2;transform:translate3d(-40px,-20px,0) scale(.9)}
                   50%{opacity:.8}100%{opacity:.3;transform:translate3d(30px,10px,0) scale(1.1)}}
  .is-on .fx-warm,.is-leaving .fx-warm{animation:warm var(--rig) var(--ease-cam) forwards;
    background:linear-gradient(125deg,rgba(251,120,14,.22) 0%,transparent 55%,rgba(71,53,187,.2) 100%);
    mix-blend-mode:overlay}
  @keyframes warm{from{opacity:.4}to{opacity:.82}}
  .is-on .fx-sweep,.is-leaving .fx-sweep{animation:sweep var(--rig) var(--ease-cam) forwards;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);
    mix-blend-mode:screen}
  @keyframes sweep{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}
  .cine__grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 0);background-size:4px 4px}
  /* only the lower bar is a real bar; the upper one is a gradient that lets
     the photograph run right up under the header */
  .cine__bar{position:absolute;left:0;width:100%;z-index:20;pointer-events:none;
    transition:height .4s var(--ease)}
  .cine__bar--t{top:0;height:0;
    background:linear-gradient(180deg,rgba(11,7,24,.78),transparent)}
  .cine__bar--b{bottom:0;height:0;background:#0B0718}
  .cine.is-scope .cine__bar--t{height:8vh;background:#0B0718}
  .cine.is-scope .cine__bar--b{height:8vh}

  .cine__body{position:relative;z-index:30;height:100%;display:flex;flex-direction:column;
    justify-content:flex-end;padding-bottom:clamp(26px,4vw,58px)}
  .cine__tagrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .cine__tag{font-family:var(--f-display);font-weight:700;font-size:.74rem;
    letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-l);
    background:rgba(251,120,14,.16);border:1px solid rgba(251,120,14,.34);
    backdrop-filter:blur(4px);padding:.35em .8em;border-radius:var(--r)}
  .cine__count{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.08em}
  .cine h1{color:#fff;max-width:19ch;text-shadow:0 4px 20px rgba(0,0,0,.6);
    font-size:clamp(2.2rem,3.9vw,3.7rem)}
  .cine__desc{color:rgba(255,255,255,.82);max-width:50ch;margin-top:16px;
    text-shadow:0 2px 10px rgba(0,0,0,.6)}
  .is-on ~ .cine__body .cine__tag{animation:capUp .6s var(--ease) .05s both}
  .cine__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
  @keyframes capUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .cine__cap>*{animation:capUp .9s var(--ease) both}
  .cine__cap>*:nth-child(2){animation-delay:.12s}
  .cine__cap>*:nth-child(3){animation-delay:.24s}

  .cine__deck{display:flex;align-items:center;gap:18px;margin-top:clamp(20px,3vw,34px);
    flex-wrap:wrap}
  .cine__segs{display:flex;gap:7px;flex:1;min-width:190px;max-width:520px}
  .cine__seg{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.26);
    overflow:hidden;cursor:pointer;position:relative;border:0;padding:0}
  .cine__seg::after{content:"";position:absolute;inset:-14px 0}
  .cine__seg i{display:block;height:100%;width:0;background:var(--saffron);border-radius:99px}
  .cine__seg.done i{width:100%;background:#fff}
  .cine__ctl{display:flex;align-items:center;gap:8px}
  .cine__btn{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;display:grid;place-items:center;
    background:rgba(8,4,18,.45);border:1px solid rgba(255,255,255,.16);color:#fff;
    backdrop-filter:blur(8px);transition:background .22s,transform .22s var(--ease)}
  .cine__btn:hover{background:rgba(8,4,18,.8);transform:translateY(-1px)}
  .cine__btn svg{width:16px;height:16px}
  .cine__play{width:auto;padding:0 18px;border-radius:99px;background:var(--saffron);
    color:#25150a;font-family:var(--f-display);font-weight:700;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.06em;gap:8px;grid-auto-flow:column;border:0}
  .cine__play:hover{background:var(--saffron-l)}
  .cine__title{color:#fff}
  .cine__prev,.cine__next,.cine__scope{flex:none}
  .cine__playtxt{line-height:1}
  html:not(.js) .cine__slide{opacity:1;visibility:visible}
  html:not(.js) .cine__deck{display:none}
  @media (prefers-reduced-motion:reduce){
    .cine__media{animation:none!important}
    .fx-flare,.fx-warm,.fx-sweep{animation:none!important;opacity:.5}
    .cine__cap>*{animation:none!important}
  }
}

@layer components {
  /* ---------- buttons: solid, 5px, no shouting ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
    font-family:var(--f-display);font-weight:700;font-size:.96rem;
    padding:.82em 1.5em;border-radius:var(--r);background:var(--indigo);color:#fff;
    transition:background .22s,transform .22s var(--ease),box-shadow .22s}
  .btn:hover{background:var(--indigo-d);transform:translateY(-2px);
    box-shadow:0 10px 22px -12px rgba(47,32,136,.8)}
  .btn svg{width:1em;height:1em;flex:none}
  /* the sponsor call to action has its own gold; it must read as the one
     thing on the page you are meant to press */
  .btn--saffron{background:var(--cta);color:#231603}
  .btn--saffron:hover{background:var(--cta-d);color:#231603;
    box-shadow:0 10px 22px -12px rgba(228,180,0,.9)}
  .btn--magenta{background:var(--magenta)} .btn--magenta:hover{background:var(--magenta-d)}
  .btn--teal{background:var(--teal)}       .btn--teal:hover{background:var(--teal-d)}
  .btn--acc{background:var(--acc)}         .btn--acc:hover{background:var(--acc-d)}
  .btn--ghost{background:transparent;color:var(--ink);
    box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--ink) 22%,transparent)}
  .btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
  .btn--outline{background:var(--indigo);color:#fff}
  .btn--outline:hover{background:var(--indigo-d);color:#fff}
  .btn--onnavy{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
  .btn--onnavy:hover{background:#fff;color:var(--navy);box-shadow:none}
  .btn--sm{font-size:.86rem;padding:.62em 1.1em}
  .btn--lg{font-size:1.02rem;padding:.95em 1.8em}
  .btn--block{width:100%}

  .tlink{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-display);
    font-weight:700;font-size:.93rem;color:var(--acc-d);position:relative}
  .tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
    background:currentColor;transform:scaleX(0);transform-origin:right;
    transition:transform .32s var(--ease)}
  .tlink:hover::after{transform-origin:left;transform:scaleX(1)}
  .tlink svg{width:.95em;height:.95em;transition:translate .28s var(--ease)}
  .tlink:hover svg{translate:3px 0}

  /* ---------- impact numbers: colour tiles, Lions-style ----------
     Solid tiles in the brand's darks, edge to edge in one row, each with a
     gold numeral that rolls into place like a mechanical counter, the way
     lionsclubs.org's "Making a global impact" does. One rule per part — the
     old ".stat > span" also caught the numeral (it is a span too) and shrank
     it to label size. */
  .stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    border-radius:var(--r);overflow:hidden;isolation:isolate}
  /* the five colours of the JAY logo, in turn — indigo, teal, saffron,
     magenta, lotus purple — each taken just deep enough that white text
     on it passes contrast (the bright logo teal and saffron do not) */
  .stat{--tile:var(--indigo);position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    aspect-ratio:1/1;max-height:270px;min-height:210px;
    padding:clamp(18px,2vw,28px) clamp(12px,1.4vw,20px);
    background:var(--tile);color:#fff}
  .stat:nth-child(5n+2){--tile:linear-gradient(150deg,#008C84 0%,#00706B 100%)}
  .stat:nth-child(5n+3){--tile:linear-gradient(150deg,#D65300 0%,#B04400 100%)}
  .stat:nth-child(5n+4){--tile:var(--magenta)}
  .stat:nth-child(5n+5){--tile:#7A2A86}
  /* a soft light from one corner, so the tiles read as lit rather than flat */
  .stat::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 85% at 0% 0%,rgba(255,255,255,.10),transparent 58%)}
  .stat__n{display:flex;align-items:flex-start;justify-content:center;
    font-family:var(--f-display);font-weight:800;line-height:1;
    font-size:clamp(2.6rem,4.2vw,3.7rem);color:#fff;letter-spacing:-.02em;
    text-shadow:0 2px 14px rgba(0,0,0,.18);
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .stat__n{flex-wrap:wrap;max-width:100%}
  .stat--long .stat__n{font-size:clamp(1.9rem,3vw,2.7rem)}
  .stat__pre{display:block;margin-bottom:4px;font-family:var(--f-display);font-weight:800;
    font-size:clamp(.95rem,1.2vw,1.15rem);letter-spacing:.16em;text-transform:uppercase;opacity:.92}
  .stat__n u{text-decoration:none;font-size:.55em;margin-left:.03em;line-height:1.1}
  .stat__n u.w{align-self:flex-end;margin-left:.2em;font-size:.4em;line-height:1.7;font-weight:700}
  .stat__lab{display:block;margin-top:12px;font-family:var(--f-display);font-weight:700;
    font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.2;color:#fff}
  .stat__note{display:block;margin-top:6px;max-width:24ch;font-size:.84rem;
    line-height:1.4;color:rgba(255,255,255,.86)}

  /* the odometer: every digit is a reel of 0-9 that rolls up to its value.
     One transform per reel, so it runs on the compositor. */
  .odo,.odo__v{display:inline-flex}
  .odo__d{position:relative;display:inline-block;overflow:hidden;height:1em}
  .odo__s{visibility:hidden}
  .odo__r{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;
    transform:translate3d(0,0,0);
    transition:transform 2.2s cubic-bezier(.16,.84,.26,1) var(--odo-d,0s)}
  .odo__r span{display:block;height:1em;line-height:1}
  .lit .odo__r{transform:translate3d(0,calc(var(--k) * -1em),0)}
  @media (prefers-reduced-motion:reduce){.odo__r{transition:none}.chaps::after{transform:translateX(-50%)}}

  /* ---------- impact page: the heading row and the age range ----------
     The age range belongs to every initiative, so it sits beside the
     heading rather than in the list. */
  .imp-head{align-items:flex-end;gap:20px 40px}
  .ages{display:flex;align-items:center;gap:16px;padding:14px 22px 14px 18px;border-radius:var(--r-m);
    color:#fff;background:linear-gradient(150deg,#008C84 0%,#00706B 100%);
    box-shadow:0 18px 40px -26px rgba(0,80,76,.7)}
  .ages__n{font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:-.02em;
    font-size:clamp(2.2rem,3.2vw,2.9rem);font-variant-numeric:tabular-nums}
  .ages__t b{display:block;font-family:var(--f-display);font-weight:800;font-size:1rem}
  .ages__t small{display:block;margin-top:2px;font-size:.84rem;opacity:.9}

  /* ---------- impact page: the chapters ----------
     One spine down the middle of the page with a numbered node per
     initiative. Photograph on one side, the story on the other, swapping
     sides each time; each chapter takes its colour from the JAY logo, which
     tints the node, the numeral, the photograph's offset block and a large
     outlined index number set behind the text. */
  .chap-sect{overflow:hidden}
  .chaps{position:relative;display:grid;gap:clamp(64px,8vw,120px);margin-top:clamp(34px,4vw,60px)}
  .chaps::before{content:"";position:absolute;top:-10px;bottom:-10px;left:50%;width:2px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,var(--line-2) 5%,var(--line-2) 95%,transparent)}
  /* the spine fills with the logo colours as the reader scrolls down it */
  .chaps::after{content:"";position:absolute;top:-10px;bottom:-10px;left:50%;width:4px;border-radius:4px;
    transform:translateX(-50%) scaleY(var(--p,0));transform-origin:top;
    background:linear-gradient(180deg,#4735BB,#008C84 22%,#D65300 42%,#C31E67 62%,#7A2A86 80%,#00696B)}
  .chap{--tc:#4735BB;position:relative;display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(72px,9vw,150px)}
  .chap:nth-child(6n+2){--tc:#008C84}
  .chap:nth-child(6n+3){--tc:#D65300}
  .chap:nth-child(6n+4){--tc:#C31E67}
  .chap:nth-child(6n+5){--tc:#7A2A86}
  .chap:nth-child(6n+6){--tc:#00696B}
  .chap:nth-child(even) .chap__fig{order:2}
  .chap__fig{position:relative;display:block;isolation:isolate;text-decoration:none}
  .chap__fig::before{content:"";position:absolute;inset:-16px 16px 16px -16px;z-index:-1;
    border-radius:var(--r-m);background:var(--tc);opacity:.16}
  .chap:nth-child(even) .chap__fig::before{inset:-16px -16px 16px 16px}
  .chap__ph{display:block;overflow:hidden;aspect-ratio:3/2;border-radius:var(--r-m);background:var(--navy);
    box-shadow:0 34px 60px -38px rgba(20,16,41,.65)}
  .chap__ph picture{display:contents}
  .chap__ph img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
  .chap:hover .chap__ph img{scale:1.04}
  .chap__season{position:absolute;left:14px;bottom:14px;padding:.45em .9em;border-radius:99px;color:#fff;
    background:rgba(11,7,25,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-family:var(--f-display);font-weight:800;font-size:.68rem;letter-spacing:.12em;
    text-transform:uppercase}
  .chap__node{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--tc);
    background:var(--white);font-family:var(--f-display);font-weight:800;font-size:.95rem;
    box-shadow:0 0 0 2px var(--tc),0 0 0 9px var(--white);
    transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
  /* lit when its chapter is reached */
  .chap.lit .chap__node{background:var(--tc);color:#fff;
    box-shadow:0 0 0 2px var(--tc),0 0 0 9px var(--white),0 14px 30px -8px var(--tc)}
  .chap__body{position:relative;isolation:isolate;min-width:0}
  .chap__wm{position:absolute;right:0;top:-.42em;z-index:-1;pointer-events:none;
    font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:-.04em;
    font-size:clamp(6rem,12vw,10.5rem);color:transparent;-webkit-text-stroke:2px var(--tc);opacity:.16}
  .chap__kicker{font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--tc)}
  .chap__name{margin-top:8px;font-family:var(--f-display);font-weight:800;color:var(--ink);
    font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
  .chap__name a{color:inherit;text-decoration:none}
  .chap__name a:hover{color:var(--tc)}
  .chap__stat{display:flex;align-items:center;gap:16px;margin-top:18px;padding:14px 0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .chap .stat__n{justify-content:flex-start;flex:none;color:var(--tc);text-shadow:none;
    font-size:clamp(3rem,4.6vw,4.3rem)}
  .chap__lab b{display:block;font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.05rem}
  .chap__lab small{display:block;margin-top:2px;color:var(--ink-3);font-size:.86rem}
  .chap__desc{margin-top:16px;max-width:46ch;color:var(--ink-2)}
  .chap .tlink{margin-top:14px;color:var(--tc)}

  /* ---------- photo lockup: the diagonal cut is the signature ---------- */
  .lockup{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    background:var(--white);align-items:stretch;overflow:hidden}
  .lockup__fig{position:relative;overflow:hidden;min-height:clamp(220px,26vw,360px);
    clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
  .lockup__fig img{width:100%;height:100%;object-fit:cover}
  .lockup__body{display:grid;align-content:center;gap:14px;justify-items:start;
    padding:clamp(22px,2.8vw,44px)}
  .lockup--flip .lockup__fig{order:2;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
  .lockup--flip .lockup__body{order:1}
  .lockup p{color:var(--ink-2);max-width:52ch}

  /* ---------- initiative logo tiles ---------- */
  .logotiles{display:grid;gap:clamp(14px,1.8vw,24px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .ltile{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(12px,1.2vw,16px) clamp(12px,1.2vw,16px) clamp(16px,1.8vw,22px);
    display:grid;gap:14px;align-content:start;
    text-align:center;position:relative;overflow:hidden;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
  .ltile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
    background:var(--acc);transform:scaleX(0);transform-origin:left;
    transition:transform .34s var(--ease)}
  .ltile:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-2)}
  .ltile:hover::before{transform:scaleX(1)}
  /* absolute + object-fit means a tall logo can never push the caption out
     of the tile, whatever its aspect ratio */
  .ltile__plate{position:relative;width:100%;aspect-ratio:16/11;border-radius:var(--r);
    background:var(--acc-soft);overflow:hidden}
  .ltile__plate img{position:absolute;inset:11%;width:78%;height:78%;
    object-fit:contain;object-position:center;transition:scale .4s var(--ease)}
  .ltile:hover .ltile__plate img{scale:1.05}
  .ltile__plate .mono{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
    width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
    background:var(--white);color:var(--acc-d);box-shadow:var(--shadow)}
  .ltile__plate .mono svg{width:28px;height:28px}
  .ltile b{font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1.25}
  .ltile small{display:block;font-size:.8rem;color:var(--ink-3);font-weight:600;margin-top:2px}
  .ltile a.stretch::after{content:"";position:absolute;inset:0}

  /* ---------- "Join us" tiles with the diagonal banner ---------- */
  .jtile{background:var(--white);border-radius:var(--r);overflow:hidden;position:relative;
    display:flex;flex-direction:column;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .jtile:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
  .jtile__fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--acc-soft)}
  .jtile__fig img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
  .jtile:hover .jtile__fig img{scale:1.05}
  .jtile__ban{position:absolute;left:0;bottom:0;z-index:2;background:var(--acc);color:#fff;
    font-family:var(--f-display);font-weight:700;font-size:.92rem;
    padding:.72em 2.6em .72em 1.1em;
    clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}
  .jtile__name{padding:18px clamp(16px,2vw,22px) clamp(18px,2vw,24px);
    font-family:var(--f-display);font-weight:800;font-size:1.1rem;color:var(--navy)}
  .jtile a.stretch::after{content:"";position:absolute;inset:0;z-index:3}

  /* ---------- "ways to work with us" ---------- */
  .ways{display:grid;gap:clamp(16px,2vw,26px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
  .way{display:flex;gap:clamp(16px,1.8vw,22px);background:var(--white);
    border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(20px,2.4vw,30px);position:relative;overflow:hidden;
    transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s}
  .way::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--acc);transform:scaleY(0);transform-origin:top;
    transition:transform .32s var(--ease)}
  .way:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
  .way:hover::before{transform:scaleY(1)}
  .way__ic{width:52px;height:52px;flex:none;border-radius:var(--r);display:grid;
    place-items:center;background:var(--acc-soft);color:var(--acc-d)}
  .way__ic svg{width:25px;height:25px}
  .way__body{display:grid;gap:8px;align-content:start}
  .way__body p{color:var(--ink-2);font-size:.96rem;line-height:1.6}
  .way__body .eyebrow{margin-bottom:-2px}
  .way__body .tlink{margin-top:4px;justify-self:start}
  @media (max-width:560px){
    .way{flex-direction:column;gap:14px}
    .way__ic{width:46px;height:46px}
  }

  /* ---------- Instagram feed ----------
     Shaped like an actual post: account row, square media, action row,
     caption. Recognisable at a glance, and honest about where it links. */
  .igbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    margin-bottom:clamp(20px,2.4vw,32px)}
  .igchip{display:inline-flex;align-items:center;gap:.55em;background:var(--white);
    border:1px solid var(--line);border-radius:99px;padding:.52em 1.05em;
    font-family:var(--f-display);font-weight:700;font-size:.88rem;
    transition:border-color .22s,color .22s,transform .22s var(--ease)}
  .igchip:hover{border-color:#DD2A7B;color:#C13584}
  .igchip svg{width:17px;height:17px;color:#DD2A7B}
  /* Instagram's own gradient, so the section reads as Instagram rather than
     as another orange band. It slides on hover instead of changing colour.
     The warm end of the brand ramp is left off: white on #F9CE34 is 1.5:1.
     These three are Instagram's own stops and the worst point is 4.55:1 —
     the yellow still appears, on the avatar rings, where it carries no text. */
  .btn--ig{background:linear-gradient(45deg,#D6249F 0%,#962FBF 48%,#4F5BD5 100%);
    background-size:180% 180%;background-position:0% 50%;color:#fff;
    transition:background-position .5s var(--ease),transform .22s var(--ease),
      box-shadow .22s}
  .btn--ig:hover{background-position:100% 50%;color:#fff;
    box-shadow:0 12px 26px -14px rgba(193,53,132,.7)}
  .btn--igline{border:1px solid #E4A7C4;color:#C13584;background:var(--white)}
  .btn--igline:hover{border-color:#DD2A7B;color:#B02A78;background:#FDF2F8}
  .btn--igline svg{color:#DD2A7B}

  .igfeed{display:grid;gap:clamp(14px,1.6vw,22px);
    grid-template-columns:repeat(3,minmax(0,1fr))}
  .igpost{position:relative;display:flex;flex-direction:column;background:var(--white);
    border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
    transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease)}
  .igpost:hover{box-shadow:0 16px 38px -22px rgba(20,16,41,.5);border-color:var(--line-2)}

  .igpost__top{display:flex;align-items:center;gap:10px;padding:11px 13px}
  /* the gradient ring is the give-away that this is Instagram */
  .igpost__av{width:34px;height:34px;border-radius:50%;flex:none;padding:2px;
    background:conic-gradient(from 210deg,#F9CE34,#EE2A7B,#6228D7,#F9CE34)}
  .igpost__av span{display:grid;place-items:center;width:100%;height:100%;
    border-radius:50%;background:var(--white);overflow:hidden}
  .igpost__av img{width:84%;height:84%;object-fit:contain}
  .igpost__who{display:grid;line-height:1.25;min-width:0}
  .igpost__who b{font-family:var(--f-display);font-weight:700;font-size:.85rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .igpost__who small{font-size:.74rem;color:var(--ink-3);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .igpost__dots{margin-left:auto;color:var(--ink-3);flex:none}
  .igpost__dots svg{width:17px;height:17px}

  .igpost__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--cream)}
  .igpost__media img{width:100%;height:100%;object-fit:cover;
    transition:scale .7s var(--ease)}
  .igpost:hover .igpost__media img{scale:1.05}

  .igpost__acts{display:flex;align-items:center;gap:14px;padding:11px 13px 6px;
    color:var(--ink)}
  .igpost__acts svg{width:21px;height:21px}
  .igpost__acts .save{margin-left:auto}
  .igpost:hover .igpost__acts .like{color:#ED4956}
  .igpost__cap{padding:0 13px 14px;font-size:.9rem;line-height:1.5;color:var(--ink-2);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .igpost__cap b{color:var(--ink);font-weight:700;font-family:var(--f-display);
    font-size:.86rem;margin-right:.35em}
  .igpost__cap i{font-style:normal;color:var(--indigo)}
  .igpost a.stretch::after{content:"";position:absolute;inset:0;z-index:2}

  /* ---------- marquee (sits just above the footer) ---------- */
  .mq{overflow:hidden;position:relative;padding-block:clamp(16px,1.9vw,24px);
    background:var(--white);border-block:1px solid var(--line)}
  .mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;
    width:clamp(40px,7vw,120px);z-index:2;pointer-events:none}
  .mq::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
  .mq::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
  .mq__track{display:flex;width:max-content;gap:clamp(36px,5vw,80px);align-items:center;
    animation:slide 82s linear infinite}
  .mq:hover .mq__track{animation-play-state:paused}
  .mq__track img{height:clamp(38px,4vw,54px);width:auto;opacity:.8;
    filter:saturate(.25);transition:opacity .3s,filter .3s}
  .mq__track a:hover img{opacity:1;filter:none}
  @keyframes slide{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.mq__track{animation:none}}

  /* ---------- event page: fact bar under the hero ---------- */
  .factbar{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;box-shadow:var(--shadow)}
  .fact{display:flex;gap:14px;align-items:flex-start;padding:clamp(18px,2vw,26px);
    border-right:1px solid var(--line)}
  .fact:last-child{border-right:0}
  .fact__ic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;
    place-items:center;background:var(--acc-soft);color:var(--acc-d)}
  .fact__ic svg{width:19px;height:19px}
  .fact b{display:block;font-family:var(--f-display);font-weight:700;font-size:.7rem;
    letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
  .fact span{font-size:.98rem;line-height:1.4;font-weight:600;color:var(--ink)}
  @media (max-width:760px){
    .factbar{grid-template-columns:1fr}
    .fact{border-right:0;border-bottom:1px solid var(--line);padding:15px 16px}
    .fact:last-child{border-bottom:0}
  }

  /* ---------- editorial feature list (replaces a wall of icon cards) ----- */
  .feats{display:grid;gap:clamp(16px,2vw,26px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
  .feat{position:relative;padding-left:clamp(52px,5vw,64px);min-height:56px}
  .feat__n{position:absolute;left:0;top:-4px;font-family:var(--f-display);font-weight:800;
    font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1;color:var(--acc);
    letter-spacing:-.04em;opacity:.9}
  .feat__n::after{content:"";display:block;width:22px;height:3px;border-radius:2px;
    background:var(--acc);margin-top:8px;opacity:.5}
  .feat h3{font-family:var(--f-display);font-weight:700;font-size:1.06rem;line-height:1.3;
    margin-bottom:6px;display:flex;align-items:center;gap:.5em}
  .feat h3 svg{width:17px;height:17px;color:var(--acc-d);flex:none}
  .feat p{font-size:.95rem;line-height:1.62;color:var(--ink-2)}

  /* ---------- compact chips for disciplines / modules ---------- */
  .pills{display:flex;flex-wrap:wrap;gap:10px}

  /* ---------- Jain Olympics · the games ----------
     One photograph per game, captioned over a dark foot: ten tiles, five a
     row (two on phones). A game without a photograph folds into a closing
     "Also contested" tile rather than leaving a hole. */
  .games{display:grid;gap:clamp(10px,1.2vw,16px);
    grid-template-columns:repeat(5,minmax(0,1fr))}
  .game{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r-m);
    overflow:hidden;background:var(--navy);isolation:isolate}
  .game img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
  .game:hover img{scale:1.045}
  .game::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 48%,rgba(11,7,25,.35) 66%,rgba(11,7,25,.9) 100%)}
  .game figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;
    gap:10px;align-items:center;padding:clamp(12px,1.3vw,16px);color:#fff}
  .game__ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:var(--cta);color:#231603;flex:none}
  .game__ic svg{width:18px;height:18px}
  .game figcaption b{display:block;font-family:var(--f-display);font-weight:800;
    font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.45)}
  .game figcaption small{display:block;margin-top:2px;font-family:var(--f-display);
    font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
  .game--more{display:flex;flex-direction:column;gap:12px;
    padding:clamp(16px,1.8vw,24px);color:#fff;
    background:radial-gradient(120% 90% at 100% 0%,var(--indigo-l),var(--indigo) 55%,var(--indigo-d))}
  .game--more::after{display:none}
  .game--more__n{font-family:var(--f-display);font-weight:800;line-height:.85;
    font-size:clamp(3.2rem,5.4vw,4.8rem);color:var(--cta)}
  .game--more b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.02rem}
  .game--more small{display:block;margin-top:14px;font-family:var(--f-display);font-weight:700;
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
  .game--more ul{display:grid;gap:7px;margin-top:auto}
  .game--more li{display:flex;gap:8px;align-items:center;font-family:var(--f-display);
    font-weight:700;font-size:.92rem}
  .game--more li svg{width:16px;height:16px;color:var(--cta);flex:none}

  /* ---------- Umang · the modules ----------
     Six cards, three a row: a group photograph per module, captioned like
     the games; a module without a photograph is a colour card with its
     icon. 3:2 so a whole group stays in the frame. */
  .mods{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(3,minmax(0,1fr))}
  .mod{position:relative;margin:0;aspect-ratio:3/2;border-radius:var(--r-m);overflow:hidden;
    background:var(--navy);isolation:isolate;color:#fff}
  .mod img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
  .mod:hover img{scale:1.04}
  .mod::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 50%,rgba(11,7,25,.35) 70%,rgba(11,7,25,.88) 100%)}
  .mod figcaption,.mod__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;
    gap:10px;align-items:center;padding:clamp(12px,1.3vw,16px)}
  .mod__ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
    background:var(--cta);color:#231603}
  .mod__ic svg{width:18px;height:18px}
  .mod b{display:block;font-family:var(--f-display);font-weight:800;line-height:1.15;
    font-size:clamp(.98rem,1.15vw,1.12rem);text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .mod small{display:block;margin-top:2px;font-family:var(--f-display);font-weight:700;
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
  .mod--plain{background:var(--tile,var(--indigo))}
  .mod--plain::after{display:none}
  .mod--c1{--tile:linear-gradient(150deg,var(--magenta) 0%,var(--magenta-d) 100%)}
  .mod--c2{--tile:linear-gradient(150deg,#008C84 0%,#00706B 100%)}
  .mod__mark{position:absolute;right:-6%;top:-14%;width:62%;aspect-ratio:1;color:#fff;opacity:.16;
    pointer-events:none}
  .mod__mark svg{width:100%;height:100%;stroke-width:1.2}

  /* ---------- sponsors in their words (partner page) ----------
     Short banners, one at a time: portrait on the left behind the diagonal
     cut, the quote on the right, the name on a plum lower-third chip set in
     Poppins (the face their own video titles use). Slides share one grid
     cell, so the banner is as tall as the longest quote and never jumps. */
  .qs{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-m);
    border:1px solid var(--line);
    background:linear-gradient(115deg,#FFF8EC 0%,#FFFFFF 52%,#F3F0FC 100%);
    box-shadow:0 26px 60px -36px rgba(31,20,90,.38)}
  .qs__track{display:grid;touch-action:pan-y}
  .qs__slide{grid-area:1/1;margin:0;display:grid;
    grid-template-columns:clamp(230px,24vw,320px) minmax(0,1fr);
    opacity:0;visibility:hidden;transform:translateX(var(--from,28px));
    transition:opacity .55s var(--ease),transform .75s var(--ease),visibility 0s .75s}
  .qs__slide.is-on{opacity:1;visibility:visible;transform:none;
    transition:opacity .55s var(--ease),transform .75s var(--ease),visibility 0s}
  .qs__photo{position:relative;overflow:hidden;background:var(--indigo-d);
    clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%)}
  .qs__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  .qs__body{position:relative;display:grid;align-content:center;gap:18px;
    padding:clamp(26px,3vw,46px) clamp(22px,3.6vw,60px) clamp(86px,7vw,96px) clamp(22px,2.6vw,40px)}
  .qs__mark{position:absolute;top:clamp(-6px,0vw,4px);right:clamp(16px,3vw,44px);z-index:-1;
    font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1;
    font-size:clamp(7rem,11vw,10rem);color:var(--saffron);opacity:.2;pointer-events:none}
  .qs blockquote{margin:0}
  .qs blockquote p{max-width:64ch;color:var(--ink);font-family:var(--f-body);font-weight:500;
    font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.64}
  .qs__who{display:flex;align-items:center;gap:12px}
  .qs__ava{display:none;width:58px;height:58px;flex:none;border-radius:50%;overflow:hidden;
    box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line-2)}
  .qs__ava img{width:100%;height:100%;object-fit:cover}
  .qs__chip{display:inline-grid;gap:4px;justify-items:start;padding:.62em 1.15em .72em;
    border-radius:10px;background:#644371;color:#fff;box-shadow:0 10px 24px -14px rgba(60,30,80,.7)}
  .qs__chip b{font-family:"Poppins",var(--f-display);font-weight:700;text-transform:uppercase;
    letter-spacing:.01em;line-height:1.12;font-size:clamp(1rem,1.3vw,1.22rem)}
  .qs__chip small{font-family:"Poppins",var(--f-display);font-weight:500;font-size:.8rem;
    line-height:1.3;opacity:.94}
  .qs__nav{position:absolute;z-index:2;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2vw,24px);
    display:flex;align-items:center;gap:10px}
  .qs__dots{display:flex;gap:6px;margin-right:4px}
  .qs__dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;
    background:rgba(31,20,90,.22);transition:transform .35s var(--ease),background .3s}
  .qs__dot.is-on{background:var(--indigo);transform:scale(1.4)}
  .qs__count{margin-right:2px;font-family:var(--f-display);font-weight:700;font-size:.8rem;
    color:var(--ink-3);font-variant-numeric:tabular-nums}
  .qs__count b{color:var(--ink)}
  .qs__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:42px;min-width:42px;padding:0 12px;border-radius:99px;cursor:pointer;
    border:1px solid var(--line-2);background:#fff;color:var(--ink);
    font-family:var(--f-display);font-weight:800;font-size:.86rem;
    transition:background .25s,color .25s,border-color .25s}
  .qs__btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
  .qs__btn:hover{border-color:var(--indigo);color:var(--indigo)}
  .qs__btn--next{padding:0 16px 0 18px;background:var(--indigo);border-color:var(--indigo);color:#fff}
  .qs__btn--next:hover{background:var(--indigo-d);border-color:var(--indigo-d);color:#fff}
  .qs__btn--next:hover svg{transform:translateX(3px)}

  /* ---------- the team behind each initiative ----------
     Minimal: a short credit beside one photograph. The photograph sits on an
     offset outline in the initiative's own accent, with a quiet chip; a
     single leader gets a portrait instead of a group shot. */
  .crew{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    gap:clamp(30px,4.4vw,80px);align-items:center}
  .crew__txt{min-width:0}
  .crew__txt .lede{margin-top:14px;max-width:34ch}
  .crew__fig{position:relative;margin:0 18px 18px 0;isolation:isolate}
  .crew__fig::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;
    border:2px solid var(--acc);border-radius:var(--r-m);opacity:.6}
  .crew__fig::after{content:"";position:absolute;width:86px;height:86px;left:-22px;top:-22px;z-index:-1;
    background:radial-gradient(var(--acc) 1.6px,transparent 1.8px) 0 0/12px 12px;opacity:.35}
  .crew__ph{overflow:hidden;border-radius:var(--r-m);aspect-ratio:16/10;background:var(--navy);
    box-shadow:0 34px 64px -36px rgba(20,16,41,.6)}
  .crew__ph img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
  .crew__fig:hover .crew__ph img{scale:1.03}
  .crew__tag{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
    padding:.5em .95em .5em .6em;border-radius:99px;color:#fff;
    background:rgba(11,7,25,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase}
  .crew__tag span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    background:var(--cta);color:#231603}
  .crew__tag svg{width:13px;height:13px}
  /* one person: text left, portrait right */
  .crew--person{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .crew__fig--person{justify-self:center;width:min(100%,380px)}
  .crew__fig--person .crew__ph{aspect-ratio:4/5}
  .crew__name{margin-top:18px;font-family:var(--f-display);font-weight:800;color:var(--ink);
    font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.08;letter-spacing:-.015em}
  .crew__role{margin-top:6px;color:var(--acc-d);font-family:var(--f-display);font-weight:700;
    font-size:.98rem}
  .crew__bio{margin-top:14px;max-width:44ch;color:var(--ink-2);font-size:clamp(1rem,1.1vw,1.08rem);
    line-height:1.6}
  .crew__pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .crew__pts li{display:inline-flex;align-items:center;gap:8px;padding:.45em .95em;border-radius:99px;
    border:1px solid var(--line);background:var(--page);font-family:var(--f-display);
    font-weight:700;font-size:.86rem;color:var(--ink-2)}
  .crew__pts svg{width:16px;height:16px;color:var(--acc)}
  .crew__spons{display:grid;gap:10px;margin-top:26px;max-width:46ch}
  .crew__spon{display:flex;gap:12px;align-items:flex-start;
    padding:14px 16px;border-radius:var(--r-m);background:var(--acc-soft)}
  .crew__spon-ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
    background:var(--acc);color:#fff}
  .crew__spon-ic svg{width:16px;height:16px}
  .crew__spon small{display:block;font-family:var(--f-display);font-weight:800;font-size:.66rem;
    letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d)}
  .crew__spon b{display:block;margin-top:2px;font-family:var(--f-display);font-weight:800;color:var(--ink)}
  .crew__spon span span{display:block;margin-top:2px;font-size:.88rem;color:var(--ink-2)}

  /* ---------- signature event (Family Relays) ----------
     An indigo panel with track lanes running under it: the copy on the left,
     two photographs on the right, the second overlapping the first like a
     hand-off. */
  .spot{position:relative;isolation:isolate;overflow:hidden;color:#fff;
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(26px,3.6vw,60px);align-items:center;border-radius:var(--r-m);
    padding:clamp(26px,3.6vw,58px);
    background:radial-gradient(120% 130% at 0% 0%,var(--indigo-l),var(--indigo) 46%,var(--indigo-d))}
  .spot::before{content:"";position:absolute;inset:auto -10% -1px -10%;height:42%;z-index:-1;
    pointer-events:none;opacity:.16;transform:perspective(600px) rotateX(58deg);transform-origin:bottom;
    background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 2px),#fff calc(12.5% - 2px) 12.5%)}
  .spot::after{content:"";position:absolute;width:46vmax;height:46vmax;right:-14vmax;top:-22vmax;
    z-index:-1;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(251,120,14,.38),transparent)}
  .spot__body{min-width:0;justify-self:start}
  .spot__tag{display:inline-flex;align-items:center;gap:8px;padding:.5em 1em;border-radius:99px;
    background:var(--cta);color:#231603;font-family:var(--f-display);font-weight:800;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
  .spot__tag svg{width:15px;height:15px}
  .spot__title{margin-top:16px;font-family:var(--f-display);font-weight:800;color:#fff;
    font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:.96;letter-spacing:-.02em}
  .spot__lede{margin-top:16px;max-width:36ch;color:#fff;font-family:var(--f-display);
    font-weight:700;font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.4}
  .spot__txt{display:grid;gap:10px;margin-top:14px;max-width:48ch}
  .spot__txt p{color:rgba(255,255,255,.86)}
  .spot__meta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--cta);
    font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase}
  .spot__meta svg{width:16px;height:16px}
  .spot__pts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
  .spot__pts li{padding:.42em 1.1em .42em .42em;border-radius:99px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
  .spot__pts li{display:flex;align-items:center;gap:12px;font-family:var(--f-display);
    font-weight:700;font-size:.98rem}
  .spot__ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:var(--cta)}
  .spot__ic svg{width:17px;height:17px}
  .spot__fig{position:relative;padding-bottom:22%}
  .spot__fig figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-m);
    aspect-ratio:4/3;background:var(--indigo-d)}
  .spot__fig img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
  .spot__fig figure:hover img{scale:1.04}
  .spot__a{width:84%;box-shadow:0 22px 50px -18px rgba(8,4,30,.65)}
  .spot__b{position:absolute!important;right:0;bottom:0;width:54%;
    outline:5px solid #fff;outline-offset:-1px;box-shadow:0 26px 56px -16px rgba(8,4,30,.7)}
  .spot__fig figcaption{position:absolute;left:10px;bottom:10px;padding:.42em .8em;border-radius:99px;
    background:rgba(11,7,25,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#fff;font-family:var(--f-display);font-weight:700;font-size:.72rem;line-height:1.2}
  .pill{display:inline-flex;align-items:center;gap:.55em;background:var(--white);
    border:1px solid var(--line);border-radius:99px;padding:.6em 1.1em;
    font-family:var(--f-display);font-weight:600;font-size:.92rem;
    transition:border-color .24s,background .24s,transform .24s var(--ease)}
  .pill:hover{border-color:var(--acc);background:var(--acc-soft);transform:translateY(-2px)}
  .pill svg{width:17px;height:17px;color:var(--acc-d);flex:none}
  .pill small{color:var(--ink-3);font-weight:600;font-size:.78rem}

  /* ---------- person ---------- */
  .person{display:flex;gap:16px;align-items:center;background:var(--white);
    border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
    transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
  .person:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .person__av{width:54px;height:54px;border-radius:50%;flex:none;display:grid;
    place-items:center;color:#fff;font-family:var(--f-display);font-weight:800;
    font-size:1.1rem;letter-spacing:-.02em;
    background:linear-gradient(140deg,var(--acc),var(--acc-d))}
  .person__av svg{width:24px;height:24px}
  .person b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.04rem}
  .person span{font-size:.9rem;color:var(--ink-2);line-height:1.4}
  .person small{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-3);
    font-weight:600;line-height:1.4}

  /* ---------- event logo plate beside the story ---------- */
  .plate{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(24px,3vw,40px);display:grid;place-items:center;gap:18px;
    box-shadow:var(--shadow);text-align:center}
  .plate img{max-height:clamp(120px,15vw,190px);width:auto;object-fit:contain}
  .plate img.plate__photo{max-height:none;width:100%;height:auto;object-fit:cover;display:block}
  .plate p{font-family:var(--f-serif);font-size:1.06rem;line-height:1.45;color:var(--ink-2)}

  /* ---------- partner page: the photograph beside "What a partner gets" ---------- */
  .getfig{position:relative;margin:0;align-self:center;overflow:hidden;isolation:isolate;
    border-radius:var(--r-m);background:var(--navy);box-shadow:0 30px 60px -36px rgba(20,16,41,.6)}
  .getfig__ph{display:block;aspect-ratio:4/3;overflow:hidden}
  .getfig img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease)}
  .getfig:hover img{scale:1.03}
  /* the caption is a strip under the photograph, so nothing in it is covered */
  .getfig figcaption{display:flex;gap:12px;align-items:center;color:#fff;
    padding:clamp(14px,1.6vw,18px) clamp(14px,1.8vw,22px);
    background:linear-gradient(90deg,var(--navy),#2A1E6E)}
  .getfig__ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
    background:var(--cta);color:#231603}
  .getfig__ic svg{width:18px;height:18px}
  .getfig b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(.98rem,1.2vw,1.1rem);
    line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .getfig small{display:block;margin-top:2px;font-size:.84rem;line-height:1.35;opacity:.9}

  /* ---------- inner page hero ----------
     Two jobs: carry the page title at display size, and hand off cleanly to
     whatever follows. The scrim is layered rather than a single wash — a
     vertical fade for legibility plus a corner pool under the type, so the
     photograph stays a photograph in the top half. */
  .phero{position:relative;min-height:clamp(250px,29vw,410px);display:grid;
    align-items:end;overflow:hidden;background:var(--navy);isolation:isolate}
  .phero__bg{position:absolute;inset:0;z-index:-1}
  .phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 36%}
  .phero__bg::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(13,8,30,.46) 0%,rgba(13,8,30,.26) 38%,rgba(11,7,25,.9) 100%),
      radial-gradient(130% 88% at 6% 104%,rgba(11,7,25,.62),transparent 62%)}
  .phero__in{padding-block:clamp(30px,3.4vw,58px);color:#fff;max-width:64ch}
  /* the eyebrow keeps clear of the title: the display face's glyph box is
     taller than its 1.06 line, so without a gap the title (and its shadow and
     selection) paints over the top of the eyebrow */
  .phero__eyebrow{position:relative;z-index:1;display:block;margin-bottom:clamp(10px,1vw,14px);
    line-height:1.5;color:var(--saffron-l);text-shadow:0 1px 8px rgba(0,0,0,.6)}
  .phero h1{color:#fff;text-wrap:balance;text-shadow:0 3px 22px rgba(0,0,0,.55)}
  .phero p{color:rgba(255,255,255,.93);margin-top:14px;max-width:58ch;
    text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .phero p[lang="hi"]{color:var(--saffron-l);font-weight:600}
  /* a hairline of the brand ribbon, so the hero ends the way the header does */
  .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,var(--teal),var(--saffron) 52%,var(--indigo))}

  .phero--plain{background:linear-gradient(180deg,var(--cream),var(--white));
    min-height:0;align-items:center}
  .phero--plain .phero__in{color:var(--ink);padding-block:clamp(28px,3.6vw,56px)}
  .phero--plain .phero__eyebrow{color:var(--saffron-d)}
  .phero--plain h1{color:var(--ink);text-shadow:none}
  .phero--plain p{color:var(--ink-2);text-shadow:none}
  .phero--plain::after{opacity:.45}

  /* ---------- breadcrumb ----------
     It used to wrap onto a second line on a phone, which turned a one-line
     orientation cue into a block of shouty small caps. It is now a single
     rail that scrolls sideways if it has to, with the current page truncating
     rather than pushing the trail off the screen. */
  .crumbs{background:var(--cream);border-bottom:1px solid var(--line);
    position:relative}
  .crumbs ol{display:flex;flex-wrap:nowrap;gap:.55em;align-items:center;
    padding-block:12px;font-size:.76rem;font-weight:700;color:var(--ink-3);
    font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .crumbs ol::-webkit-scrollbar{display:none}
  .crumbs li{display:flex;align-items:center;flex:none;min-width:0}
  .crumbs a{color:var(--ink-3);padding-block:4px;
    border-bottom:1px solid transparent;
    transition:color .18s,border-color .18s}
  .crumbs a:hover{color:var(--saffron-d);border-bottom-color:currentColor}
  .crumbs [aria-current]{color:var(--ink);min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crumbs svg{width:10px;height:10px;opacity:.42;flex:none}

  /* ---------- generic content bits ---------- */
  .fcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(20px,2.2vw,30px);display:grid;gap:12px;align-content:start;
    position:relative;overflow:hidden;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .fcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--acc);transform:scaleY(0);transform-origin:top;
    transition:transform .34s var(--ease)}
  .fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .fcard:hover::before{transform:scaleY(1)}
  .fcard__ic{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;
    background:var(--acc-soft);color:var(--acc-d)}
  .fcard__ic svg{width:24px;height:24px}
  .fcard h3{font-family:var(--f-display);font-weight:700;font-size:1.06rem;line-height:1.3}
  .fcard p{font-size:.95rem;line-height:1.6;color:var(--ink-2)}
  .fcard--navy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
  .fcard--navy p{color:rgba(255,255,255,.74)}
  .fcard--navy .fcard__ic{background:rgba(255,255,255,.1);color:#fff}

  .checks{display:grid;gap:11px}
  .checks li{display:flex;gap:.7em;align-items:flex-start;line-height:1.55}
  .checks svg{width:21px;height:21px;color:var(--acc);flex:none;margin-top:.2em}

  .prose{max-width:70ch;display:grid;gap:18px;line-height:1.72}
  .prose p{color:var(--ink-2)}
  .prose p:first-of-type{color:var(--ink);font-size:1.06em}
  .prose strong{color:var(--ink);font-weight:700}

  .gal{display:grid;gap:clamp(10px,1.2vw,16px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
  .gal figure{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;
    background:var(--cream)}
  .gal img{width:100%;height:100%;object-fit:cover;transition:scale .6s var(--ease)}
  .gal figure:hover img{scale:1.06}
  .gal figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;color:#fff;
    font-size:.82rem;line-height:1.4;opacity:0;translate:0 8px;
    background:linear-gradient(transparent,rgba(15,9,34,.88));
    transition:opacity .3s var(--ease),translate .3s var(--ease)}
  .gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;translate:0}

  .faq{display:grid;gap:10px}
  .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden}
  .faq details[open]{border-color:var(--saffron)}
  .faq summary{cursor:pointer;list-style:none;padding:clamp(15px,1.7vw,20px) clamp(16px,2vw,24px);
    display:flex;gap:16px;align-items:center;justify-content:space-between;
    font-family:var(--f-display);font-weight:700;font-size:1.01rem;line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";width:11px;height:11px;flex:none;
    border-right:2px solid var(--saffron);border-bottom:2px solid var(--saffron);
    rotate:45deg;translate:0 -2px;transition:rotate .3s var(--ease)}
  .faq details[open] summary::after{rotate:-135deg;translate:0 2px}
  .faq .ans{padding:0 clamp(16px,2vw,24px) clamp(16px,1.8vw,22px);color:var(--ink-2);
    font-size:.98rem;line-height:1.66;max-width:78ch}

  .quote{background:var(--white);border-left:4px solid var(--saffron);border-radius:var(--r);
    padding:clamp(20px,2.4vw,32px);font-family:var(--f-serif);
    font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.5}
  .quote cite{display:block;margin-top:14px;font-family:var(--f-display);font-style:normal;
    font-weight:700;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

  /* ---------- founder ----------
     Set as a pull quote rather than body copy: it is one person speaking, and
     the serif face plus the oversized mark say so before the words do. */
  /* the whole message sits between two oversized marks: one opening in the
     left gutter at the top, one closing in the right gutter at the foot —
     a mirror pair, with nothing inside the paragraphs themselves */
  .fquote{position:relative;padding-inline:clamp(26px,3.2vw,46px)}
  .fquote::before,.fquote::after{position:absolute;
    font-family:var(--f-serif);font-weight:600;line-height:1;
    font-size:clamp(5.4rem,9vw,8.4rem);color:var(--acc);opacity:.38;
    pointer-events:none}
  .fquote::before{content:"\201C";left:-.1em;top:-.3em}
  .fquote::after{content:"\201D";right:-.1em;bottom:-.7em}
  /* the message is set in the same face, size and colour as the rest of the
     page; the serif made "JAY" and the final paragraph look like a different
     voice. The oversized mark alone says it is a quotation. */
  .fquote p{font-family:var(--f-body);color:var(--ink-2);
    font-size:clamp(1.04rem,.4vw + .92rem,1.15rem);line-height:1.72;
    text-wrap:pretty}
  .fquote p + p{margin-top:.85em}

  .founder{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(30px,4.4vw,72px);align-items:center}
  /* a framed portrait on an offset block in the page's accent */
  .founder__fig{position:relative;align-self:center;margin:0 18px 18px 0;isolation:isolate}
  .founder__fig::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;
    border-radius:var(--r-m);background:var(--acc);opacity:.22}
  .founder__fig::after{content:"";position:absolute;width:86px;height:86px;left:-22px;top:-22px;z-index:-1;
    background:radial-gradient(var(--acc) 1.6px,transparent 1.8px) 0 0/12px 12px;opacity:.4}
  .founder__fig img{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    border-radius:var(--r-m);box-shadow:0 34px 64px -34px rgba(20,16,41,.6)}
  .founder__sig{font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--ink);
    margin-top:clamp(18px,2vw,26px);padding-left:clamp(26px,3.2vw,46px)}
  .founder__sig::before{content:"— "}
  .founder__role{padding-left:clamp(26px,3.2vw,46px);
    font-family:var(--f-display);font-weight:700;font-size:.8rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

  /* ---------- footer ---------- */
  /* Every colour here was a translucent white, which on a dark ground reads
     as grey text rather than as white text — the "dull" look. Solid white
     throughout; hierarchy comes from size and weight instead. */
  .ftr{background:var(--navy);color:#fff;padding-block:clamp(38px,4vw,62px) 0}
  .ftr__grid{display:grid;gap:clamp(22px,2.4vw,36px);
    grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
  .ftr h2{font-family:var(--f-display);font-weight:800;font-size:.84rem;letter-spacing:.15em;
    text-transform:uppercase;color:var(--cta);margin-bottom:18px}
  .ftr__logo{height:76px;width:auto;margin-bottom:12px}
  .ftr__name{font-family:var(--f-display);font-weight:800;
    font-size:clamp(.88rem,1vw,1rem);letter-spacing:.13em;text-transform:uppercase;
    line-height:1.35;color:#fff;margin-bottom:14px}
  .ftr ul{display:grid;gap:11px}
  /* Flush left, and colour is the only thing hover changes. The old dot was
     laid out at opacity 0, so every link sat indented by a marker nobody
     could see, and the column never lined up with its heading. */
  .ftr li a{display:inline-block;font-size:1.02rem;color:#fff;
    transition:color .2s}
  .ftr li a:hover{color:var(--cta)}
  .ftr__tag{font-size:1.06rem;line-height:1.65;max-width:44ch;color:#fff}
  .ftr__contact{display:grid;gap:14px;font-size:1.02rem;line-height:1.55;color:#fff}
  .ftr__contact div{display:flex;gap:.7em;align-items:flex-start}
  .ftr__contact svg{width:18px;height:18px;color:var(--cta);flex:none;margin-top:.25em}
  .ftr__contact a{color:#fff}
  .ftr__contact a:hover{color:var(--cta)}
  .soc{display:flex;gap:10px;margin-top:18px}
  .soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
    color:#fff;background:rgba(255,255,255,.14);
    transition:background .26s,color .26s,transform .26s var(--ease)}
  .soc a:hover{background:var(--cta);color:#231603;transform:translateY(-3px)}
  .soc svg{width:19px;height:19px}
  /* right padding keeps the last link clear of the floating back-to-top
     button, which otherwise sits on it once the page is fully scrolled */
  .ftr__base{padding-right:64px;margin-top:clamp(24px,2.8vw,38px);border-top:1px solid rgba(255,255,255,.12);
    padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
    font-size:.92rem;color:rgba(255,255,255,.86)}
  .ftr__base a{color:#fff;text-decoration:underline;text-underline-offset:3px}
  .ftr__base a:hover{color:var(--cta)}

  /* ---------- reveal + chrome ---------- */
  .js .rv-s{opacity:0;scale:.96}
  .js .rv-s.in{opacity:1;scale:1;transition:opacity .7s var(--ease),scale .7s var(--ease)}
  .js .rv{opacity:0;translate:0 22px}
  .js .rv.in{opacity:1;translate:0;
    transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--d,0s)}
  @media (prefers-reduced-motion:reduce){
    .js .rv{opacity:1!important;translate:none!important;transition:none!important}}
  .totop{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:46px;
    height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
    place-items:center;z-index:80;box-shadow:var(--shadow);opacity:0;pointer-events:none;
    translate:0 12px;transition:opacity .3s var(--ease),translate .3s var(--ease),background .22s}
  .totop.on{opacity:1;pointer-events:auto;translate:0}
  .totop:hover{background:var(--saffron)}
  .totop svg{width:19px;height:19px}
}

@layer utils {
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
    padding:.8em 1.3em;font-weight:700}
  .skip:focus{left:0}
  .center{text-align:center}
  .mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:clamp(22px,2.6vw,36px)}
  .full{width:100%}
  .nowrap{white-space:nowrap}
}

@layer responsive {

  /* ---- narrow desktops: the single row is tight, so trim it rather than
          let the nav wrap ---- */
  /* with three menu items there is room again for the full "Become a
     Sponsor" label on narrow laptops; only the type is trimmed */
  @media (min-width:1281px) and (max-width:1440px){
    .mainnav a.top{font-size:.88rem;padding:11px 10px}
    .mainnav a.top::after{left:10px;right:10px}
    .brand__txt b{font-size:.88rem}
    .brand__txt small{font-size:.55rem;letter-spacing:.13em}
    .hdr__actions .btn{padding-inline:.9em}
  }

  /* ---- 1280px: nav folds into the burger ---- */
  @media (max-width:1280px){
    :root{--hdr-h:74px}
    .burger{display:flex}
    /* the panel is absolutely positioned against the sticky header, so it
       stays glued to it at every width */
    .mainnav{position:absolute;top:100%;left:0;right:0;background:var(--white);
      border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      box-shadow:var(--shadow);max-height:min(76dvh,600px);overflow-y:auto;
      overscroll-behavior:contain;clip-path:inset(0 0 100% 0);
      transition:clip-path .34s var(--ease);order:9}
    .mainnav[data-open="true"]{clip-path:inset(0 0 0 0)}
    .mainnav__in{flex-direction:column;align-items:stretch;gap:0;
      padding:6px var(--pad) 22px}
    .drop{top:auto}
    .drop::before{display:none}
    .mainnav__in>li{flex-direction:column}
    .mainnav a.top{padding:.85em .2em;font-size:1.04rem;min-height:52px;
      border-bottom:1px solid var(--line);justify-content:space-between}
    .mainnav a.top::after{display:none}
    .mainnav a.top[aria-current="page"]{color:var(--saffron-d)}
    .drop{position:static;opacity:1;visibility:visible;translate:0;box-shadow:none;
      border:0;border-left:3px solid var(--saffron);border-radius:0;min-width:0;
      padding:6px 0 10px 12px;margin-bottom:8px;
      display:none}
    .mainnav li[data-open="true"]>.drop{display:grid}
    .drop a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  }

  /* ---- tablets: the compact state had no rules here at all, so the bar
          simply lost its coloured strip and kept everything else ---- */
  @media (min-width:761px) and (max-width:1280px){
    body.stuck .brandrow{min-height:58px}
    body.stuck .brand img{height:32px}
    body.stuck .brand__txt b{font-size:.92rem}
    body.stuck .hdr__actions .btn{min-height:34px;font-size:.82rem;padding-inline:.85em}
    body.stuck .burger{height:34px;min-width:34px}
  }

  /* ---- below laptop width the impact tiles go two a row ---- */
  @media (max-width:1023px){
    .stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
    .stat{aspect-ratio:auto;min-height:clamp(168px,26vw,230px)}
    .stats > .stat:last-child:nth-child(odd){grid-column:1/-1}
  }

  /* ---- 900px ---- */
  @media (max-width:900px){
    /* the spine moves to the left edge; photograph above the story */
    .chaps{gap:56px}
    .chaps::before,.chaps::after{left:22px}
    .chap{grid-template-columns:1fr;gap:22px;padding-left:62px}
    .chap:nth-child(even) .chap__fig{order:0}
    .chap__fig::before,.chap:nth-child(even) .chap__fig::before{inset:-10px -10px 10px 10px}
    .chap__node{left:22px;top:0;transform:translate(-50%,0);width:44px;height:44px;font-size:.82rem;
      box-shadow:0 0 0 2px var(--tc),0 0 0 6px var(--white)}
    .chap__wm{font-size:clamp(5rem,20vw,7rem)}
    .crew,.crew--person{grid-template-columns:1fr;gap:34px}
    .crew__fig{margin:0 12px 12px 0}
    .crew__fig::before{inset:12px -12px -12px 12px}
    .crew__fig--person{justify-self:start;width:min(80%,340px)}
    .games,.mods{grid-template-columns:repeat(2,minmax(0,1fr))}
    .spot{grid-template-columns:1fr}
    .spot__fig{padding-bottom:18%}
    .spot__a{width:86%}
    .spot__b{width:56%;outline-width:4px}
    .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ftr__grid>div:first-child,.ftr__grid>div:last-child{grid-column:1/-1}
    .lockup{grid-template-columns:1fr}
    .lockup__fig{clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),0 100%);
      min-height:clamp(220px,46vw,320px)}
    .lockup--flip .lockup__fig{order:1;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),0 100%)}
    .lockup--flip .lockup__body{order:2}
    .founder{grid-template-columns:1fr;gap:20px}
    .founder__fig{max-width:340px;margin-inline:auto}
  }

  /* ---- 760px: phone ---- */
  @media (max-width:760px){
    /* sponsor quotes: the portrait becomes a banner across the top of the
       card, head and shoulders, with the diagonal cut along its foot */
    .qs__slide{grid-template-columns:1fr}
    .qs__photo{height:clamp(240px,70vw,320px);
      clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),0 100%)}
    .qs__photo img{object-position:50% 18%}
    .qs__ava{display:none}
    .qs__body{padding:46px 20px 84px}
    .qs__mark{font-size:5.2rem;right:14px;top:-6px}
    .qs__nav{left:20px;right:16px;justify-content:flex-end}
    .qs__dots{margin-right:auto}
    :root{--sect:clamp(34px,6.4vw,52px);--cut:20px}

    /* the hero: taller relative to the viewport, more room under the type,
       and a heavier pool behind it because the text block is proportionally
       much bigger on a phone than it is on a desktop */
    .phero{min-height:clamp(240px,58vw,340px)}
    .phero__in{padding-block:24px 28px;max-width:none}
    .phero__bg::after{background:
      linear-gradient(180deg,rgba(13,8,30,.4) 0%,rgba(13,8,30,.3) 30%,rgba(11,7,25,.93) 100%)}
    .phero h1{text-wrap:pretty}
    .phero p{margin-top:10px;font-size:.98rem;max-width:none}
    .phero p[lang="hi"]{font-size:.94rem}
    .phero--plain .phero__in{padding-block:26px}
    .crumbs ol{padding-block:10px;font-size:.72rem;gap:.5em}

    .brandrow{min-height:62px}
    .brand img{height:40px}
    .brand__txt{padding-left:9px;gap:2px}
    .brand__txt b{font-size:.9rem}
    .brand__txt small{font-size:.54rem;letter-spacing:.12em}



    .stat{min-height:168px}
    .stat__n{font-size:clamp(2.3rem,10vw,2.9rem)}
    .stat__lab{font-size:.98rem;margin-top:9px}
    .stat__note{font-size:.76rem}

    .logotiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .ltile{padding:10px 10px 14px}
    .ltile b{font-size:.9rem}
    .igfeed{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .igpost__cap{-webkit-line-clamp:2;font-size:.82rem;padding:0 10px 12px}
    .igpost__top{padding:9px 10px;gap:8px}
    .igpost__av{width:29px;height:29px}
    .igpost__who b{font-size:.78rem}
    .igpost__who small{font-size:.68rem}
    .igpost__acts{padding:9px 10px 5px;gap:11px}
    .igpost__acts svg{width:19px;height:19px}
    .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.g4{grid-template-columns:1fr}

    .d1{font-size:clamp(2rem,9vw,2.8rem)}
    .d2{font-size:clamp(1.55rem,7vw,2.1rem)}
    .cine{height:min(86vh,680px);min-height:460px}
    .cine h1{max-width:none}
    .cine__desc{font-size:.96rem}
    .cine__btns{gap:9px}
    .cine__btns .btn{width:100%;font-size:.92rem;padding-block:.78em}
    .cine__deck{gap:12px}
    .cine__ctl{width:100%;justify-content:space-between}
    .lockup__body .btn,.head .btn{width:100%}
    .panel{padding:22px 18px}
  }

  /* ---- phones: both calls to action get their own row ----------------
     Squeezing "Join Us" and "Become a Sponsor" beside the logo and the
     burger does not fit; a dedicated row keeps both, full width and
     thumb-sized. */
  /* ---- phones: both calls to action, on their own compact row -------- */
  @media (max-width:760px){
    .brandrow{flex-wrap:wrap;min-height:0;padding-block:11px 0;gap:10px}
    .brand{gap:9px}
    .brand img{height:34px}
    .burger{order:2;height:38px;min-width:38px;padding:0 11px;gap:8px;font-size:.68rem}
    .burger__bars,.burger__bars::before,.burger__bars::after{width:17px}
    .hdr__actions{order:3;width:100%;margin:9px 0 0;gap:7px;
      padding-block:9px 13px;border-top:1px solid var(--line)}
    .hdr__actions .btn{flex:1;min-height:36px;font-size:.82rem;padding-inline:.5em}
    /* stuck: one tight row — mark │ name ............ MENU */
    body.stuck .brandrow{padding-block:11px}
    body.stuck .brand img{height:30px}
    body.stuck .brand__txt b{font-size:.84rem}
    body.stuck .hdr__actions{display:none}
  }
  @media (max-width:400px){
    .hdr__actions .btn{font-size:.79rem}
    .lbl-full{display:none}
    .lbl-short{display:inline}
  }
  /* A phone cannot hold the full lockup and a worded pill on one line, so
     below 561px the control keeps its tint and loses its label. Above it —
     tablets, where the pill *is* the navigation — the word stays. */
  @media (max-width:560px){
    .chaps::before,.chaps::after{left:16px}
    .chap{padding-left:44px}
    .chap__node{left:16px;width:34px;height:34px;font-size:.72rem}
    .chap .stat__n{font-size:clamp(2.6rem,12vw,3.2rem)}
    .imp-head{align-items:stretch}
    .ages{padding:12px 16px}

    .mods{grid-template-columns:1fr}
    .mod__mark{width:44%;top:-18%}
    /* clipped rather than display:none — the pill is the only navigation on
       a phone, and display:none would leave the button with no name */
    .burger__lbl{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap}
    .burger{padding:0;gap:0}
  }
  @media (max-width:430px){
    .brand{gap:8px}
    .brand__txt{padding-left:8px}
  }
  @media (max-width:359px){
    .brand img{height:36px}
    .brand__txt b{font-size:.8rem}
    .brand__txt small{display:none}
    body.stuck .brand__txt b{font-size:.78rem}
  }
  @media (max-width:560px){
    .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ftr__base{flex-direction:column;gap:8px}
    .quote{font-size:1.04rem}
  }

  /* ---- touch: no sticky hover states, captions always visible ---- */
  @media (hover:none){
    .ltile:hover,.jtile:hover,.fcard:hover,.igpost:hover,.btn:hover,.soc a:hover,
    .igchip:hover,.cine__btn:hover{transform:none}
    .ltile:hover .jtile__fig img,.jtile:hover .jtile__fig img,
    .igpost:hover .igpost__fig img,.gal figure:hover img,.game:hover img,.mod:hover img,.getfig:hover img,.chap:hover .chap__ph img,.crew__fig:hover .crew__ph img,.spot__fig figure:hover img{scale:1}
    .tlink:hover::after{transform:scaleX(0)}
  }
  @media (hover:none) and (pointer:coarse){
    .gal figure{aspect-ratio:auto;overflow:visible;background:none}
    .gal figure img{aspect-ratio:4/3;border-radius:var(--r)}
    .gal figcaption{position:static;opacity:1;translate:0;background:none;
      color:var(--ink-2);padding:8px 2px 0;font-size:.78rem}
  }

  body.nav-open{overflow:hidden}
  @media (min-width:1281px){.scrim{display:none}}

  /* ---- print ---- */
  @media print{
    .mainnav,.burger,.hdr__actions,.prog,.hdr__rail,.totop,.mq,.cine__deck,.scrim{display:none}
    site-header{position:static}
    .cine{height:auto;min-height:0}
    .cine__slide{position:static;opacity:1;visibility:visible}
    .cine__slide+.cine__slide{display:none}
    .bg-navy,.ftr,.phero{background:#fff!important;color:#000!important}
    .bg-navy p,.ftr,.phero p{color:#333!important}
    .js .rv{opacity:1!important;translate:none!important}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#666}
  }
}

/* ============================================================
   POLISH — motion, stability and the small things that make a
   page feel calm. Last layer, so it wins without specificity games.
   ============================================================ */
@layer polish {
  :root{interpolate-size:allow-keywords}

  /* ---- 1. viewport stability -----------------------------------------
     100vh does not change when a mobile browser hides its toolbar, but the
     rendered height does — so a vh-sized hero visibly jumps mid-scroll.
     svh is the *small* viewport height: stable in both states. */
  /* Height follows width, so the montage keeps about 2.2:1 from a 1366
     laptop to a 2560 monitor. A fixed height made wide screens a letterbox:
     the frame was blown up to the full width and most of it cropped away,
     which is what looked stretched. */
  .cine{height:clamp(460px,min(80svh,47vw),1180px);min-height:0}
  @supports not (height:1svh){ .cine{height:clamp(460px,min(80vh,47vw),1180px)} }
  .cine__media{inset:-2.5%;width:105%;height:105%;
    object-position:var(--fx,50%) var(--fy,45%);
    transform-origin:var(--fx,50%) var(--fy,45%)}
  /* phones: a portrait cut, and the box grows if the caption needs it rather
     than letting the headline slide off the top */
  @media (max-width:760px){
    .cine{height:auto;min-height:max(440px,min(80svh,640px))}
    .cine__body{min-height:inherit}
    .cine__media{object-position:var(--fxm,50%) var(--fym,30%);
      transform-origin:var(--fxm,50%) var(--fym,30%)}
  }

  /* phones work the montage like a story: swipe for the next or previous
     frame, press and hold to pause. The buttons step out of sight — kept in
     the page for screen readers and keyboards, and shown again if focused.
     touch-action leaves vertical scrolling to the browser and hands the
     horizontal gesture to the page. */
  .cine__hint{display:none}
  @media (max-width:760px){
    .cine{touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
    .cine__ctl{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap}
    .cine__ctl:focus-within{position:static;width:100%;height:auto;overflow:visible;clip-path:none}
    .cine__hint{display:block;width:100%;margin:0;font-family:var(--f-display);font-weight:700;
      font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
      color:rgba(255,255,255,.72);animation:hintOut .6s ease 9s forwards}
    .cine.was-touched .cine__hint{animation:hintOut .3s ease forwards}
    /* while held, the words step aside so the photograph can be seen */
    .cine__cap,.cine__btns{transition:opacity .25s ease}
    .cine.is-held .cine__cap,.cine.is-held .cine__btns{opacity:0}
  }
  @keyframes hintOut{to{opacity:0}}

  /* inner-page banners: a little lower, and scaling with the width so a wide
     screen gets a proportionally taller banner instead of a sliver */
  .phero{min-height:clamp(210px,22vw,540px)}
  .phero__bg img{object-position:var(--fx,50%) var(--fy,42%)}
  @media (max-width:760px){
    .phero{min-height:clamp(220px,52vw,300px)}
    .phero__bg img{object-position:var(--fxm,50%) var(--fym,40%)}
  }

  /* anchors clear the sticky header, whatever height it currently is */
  html{scroll-padding-top:calc(var(--hdr-h,80px) + 18px)}

  /* ---- 2. header: quick, and never animating layout on the main thread
        Once you scroll it tightens right down — smaller mark, no wordmark,
        shorter nav and smaller buttons — so the bar gives the page back
        about 24px of height. */
  /* Nothing in the header animates its box: font-size, padding, min-height
     and max-width are all layout properties, and animating several at once on
     every scroll-stick is what made this feel gluey. It snaps. */
  .brandrow,.brand img,.brand__txt,.brand__txt b,.mainnav a.top,
  .hdr__actions .btn{transition:none}
  .mainnav a.top{transition:color .18s,background .18s}
  .hdr__actions .btn{transition:background .18s,color .18s}
  /* The wordmark used to be hidden outright once stuck, which yanked the
     whole nav ~230px to the left on every stick and unstick. It now just
     drops its place line and steps down a size, so the row keeps its
     shape and only the scale changes. */
  @media (min-width:1281px){
    body.stuck .brandrow{min-height:58px}
    body.stuck .brand img{height:30px}
    body.stuck .brand__txt b{font-size:.9rem}
    body.stuck .mainnav a.top{padding-block:7px;font-size:.89rem}
    body.stuck .hdr__actions .btn{min-height:33px;font-size:.82rem;padding-inline:.8em}
  }
  /* nothing in the header animates its box: font-size, padding, min-height
     and max-width are all layout properties, and animating five at once on
     every stick is what made this feel gluey. The bar snaps. */
  .hdr{transition-duration:.2s;transition-timing-function:var(--ease)}
  .brand img{transition:none}
  .brandrow,.brand__txt{transition:none}

  /* ---- 3. reveal: shorter throw, tighter stagger, then get out of the
        compositor's way entirely ---------------------------------------- */
  .js .rv{translate:0 14px}
  .js .rv-s{scale:.975}
  .js .rv:not(.in),.js .rv-s:not(.in){will-change:opacity,transform}
  .js .rv.in,.js .rv-s.in{transition-duration:.52s}
  .js .rv.done,.js .rv-s.done{will-change:auto}

  /* ---- 4. hover: smaller lift, composited, and calmer shadows ---------
     A big lift moves the card out from under the pointer near its bottom
     edge, which un-hovers it, which drops it back — a flicker loop. */
  .ltile,.jtile,.fcard,.igpost,.btn,.igchip,.soc a,.cine__btn{
    will-change:transform;transition-duration:.22s}
  .ltile:hover,.fcard:hover{transform:translateY(-3px)}
  .jtile:hover{transform:translateY(-4px)}
  .igpost:hover{transform:none;border-color:var(--line-2);
    box-shadow:0 10px 26px -18px rgba(20,16,41,.5)}
  .btn:hover{transform:translateY(-1px)}
  .soc a:hover,.igchip:hover{transform:translateY(-2px)}

  /* ---- 5. numerals must not reflow while they count up ---------------- */


  /* ---- 6. hero: cheaper crossfade, and no stale interactive slides ---- */
  /* A true dissolve: the incoming frame fades in ON TOP of the outgoing one,
     which stays fully opaque underneath until the fade is done. Fading both
     at once let the dark stage show through halfway — a dip, not a cut. */
  .cine{--xfade:1.6s;--ease-x:cubic-bezier(.45,0,.25,1)}
  .cine__slide{z-index:0;
    transition:opacity var(--xfade) var(--ease-x),visibility 0s linear var(--xfade)}
  .cine__slide.is-on{z-index:2;will-change:opacity;
    transition:opacity var(--xfade) var(--ease-x),visibility 0s}
  .cine__slide.is-leaving{opacity:1;visibility:visible;z-index:1;transition:none}
  /* the caption leaves before the next one rises, instead of swapping text
     mid-air */
  @keyframes capOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
  .cine__cap.is-out>*{animation:capOut .34s cubic-bezier(.4,0,1,1) both}
  .cine__cap.is-out>*:nth-child(2){animation-delay:.03s}
  .cine__cap.is-out>*:nth-child(3){animation-delay:.06s}
  .cine__slide[aria-hidden="true"]{pointer-events:none}
  .cine__slide[aria-hidden="true"] a{pointer-events:none}
  .cine__seg i{transition:none}
  .cine__title,.cine__desc,.cine__tag{transition:none}

  /* ---- 7. media boxes get an intrinsic ratio so nothing reflows on load */
  .lockup__fig img,.phero__bg img{aspect-ratio:auto}
  .igpost__fig,.jtile__fig,.gal figure{contain:paint}

  /* ---- 8. cross-document view transitions, where supported ------------ */
  @view-transition{navigation:auto}
  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root){animation:vtOut .18s ease both}
    ::view-transition-new(root){animation:vtIn .26s var(--ease) both}
  }
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0;transform:translateY(8px)}
                  to{opacity:1;transform:none}}

  /* ---- 9. marquee on the GPU ------------------------------------------ */
  .mq__track{will-change:transform;transform:translate3d(0,0,0);
    backface-visibility:hidden}
  @keyframes slide{to{transform:translate3d(-50%,0,0)}}

  /* ---- 10. focus that is visible without being loud ------------------- */
  :focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
  .bg-navy :focus-visible,.cine :focus-visible,.phero :focus-visible,
  .ftr :focus-visible{outline-color:var(--saffron)}

  /* ---- 11. details/summary open smoothly where supported -------------- */
  .faq details::details-content{transition:height .3s var(--ease),
    content-visibility .3s allow-discrete;height:0;overflow:hidden}
  .faq details[open]::details-content{height:auto}

  /* ---- 11b. if the bundle never arrives, nothing may stay hidden ------
     `.js` is set inline so the menu is not flashed open. That also means the
     reveal styles engage immediately, so a failed script must not leave the
     page blank. */
  .js-failed .rv,.js-failed .rv-s{opacity:1!important;translate:none!important;
    scale:none!important}
  .js-failed .cine__slide{opacity:1;visibility:visible}
  .js-failed .cine__slide:not(.is-on){display:none}
  .js-failed .cine__deck{display:none}

  /* ---- 12. one honest reduced-motion switch --------------------------- */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
    .js .rv,.js .rv-s{opacity:1!important;translate:none!important;scale:none!important}
    .cine__slide{opacity:1;visibility:visible}
    .cine__slide:not(.is-on){display:none}
  }
}