/* HOME — sections that exist only on pages/index.html, loaded after main.css
     (via the head include's "extra" param). Split out of main.css so interior
     pages don't ship homepage CSS, and so this maps 1:1 onto a front-page
     template when the site moves into a CMS. Depends on main.css for tokens,
     .btn/.eyebrow/.sec-head, the .face chip and @keyframes spin. */

  /* ---------- HERO (full-bleed showreel) ---------- */
  .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
    overflow:hidden;padding-bottom:clamp(52px,8vh,96px)}
  .hero-media{position:absolute;inset:0;overflow:hidden;z-index:0}
  .hero-poster,.hero-media video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;will-change:transform;
    filter:brightness(1.16) saturate(1.1) contrast(1.02)}
  .hero-poster{z-index:0}
  .hero-media video{z-index:1;opacity:0;transition:opacity .8s ease}
  .hero-media video.ready{opacity:1}
  /* light-touch grade: keep nav + CTAs legible, let the reel stay bright */
  .hero-grade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
    linear-gradient(180deg,rgba(15,15,19,.40) 0,rgba(15,15,19,0) 15%,rgba(15,15,19,0) 58%,rgba(15,15,19,.30) 82%,rgba(15,15,19,.80) 100%),
    linear-gradient(100deg,rgba(15,15,19,.52) 0,rgba(15,15,19,.10) 38%,rgba(15,15,19,0) 66%)}
  .hero-inner{position:relative;z-index:4;width:100%}
  .kicker{font-family:var(--sans);font-weight:600;font-size:0.8125rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--orange);margin-bottom:24px;display:flex;align-items:center;gap:12px}
  .kicker::before{content:"";width:34px;height:1px;background:var(--orange);display:inline-block}
  /* restrained tagline — the showreel is the headline */
  .hero-tagline{overflow:hidden;margin-bottom:30px}
  .hero-tagline .lead{font-family:var(--sans);font-weight:600;font-size:clamp(1.4375rem,3.1vw,2.75rem);
    letter-spacing:-0.02em;line-height:1.06;max-width:24ch;text-shadow:0 2px 42px rgba(0,0,0,.55)}
  .hero-tagline .lead .accent{color:var(--orange);display:block}
  /* supporting beat under the tagline — quiet, never a second headline */
  .hero-sub{font-family:var(--sans);font-weight:500;font-size:clamp(0.9375rem,1.4vw,1.0625rem);
    color:var(--fg-2);letter-spacing:-0.01em;margin-top:14px;text-shadow:0 2px 42px rgba(0,0,0,.55)}
  .hero-cta{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
  .reel{display:flex;align-items:center;gap:13px;font-family:var(--sans);font-size:0.875rem;font-weight:500;
    color:var(--fg);cursor:pointer;background:none;border:none}
  .reel .play{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
    display:grid;place-items:center;transition:.25s;font-size:0.75rem;color:var(--fg)}
  .reel:hover .play{border-color:var(--orange);color:var(--orange);transform:scale(1.06)}
  /* ambient-sound toggle — lets the showreel actually speak */
  .hero-sound{position:absolute;right:var(--pad);bottom:34px;z-index:4;width:56px;height:56px;
    border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(15,15,19,.32);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;
    color:var(--fg);transition:border-color .3s,color .3s,transform .3s}
  .hero-sound:hover{border-color:var(--orange);color:var(--orange);transform:scale(1.07)}
  .hero-sound svg{width:22px;height:22px;fill:currentColor}
  .hero-sound .wave{transition:opacity .3s} .hero-sound[aria-pressed="false"] .wave{opacity:.25}
  .hero-sound[aria-pressed="false"] .slash{opacity:1} .hero-sound[aria-pressed="true"] .slash{opacity:0}
  .hero-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--sans);font-size:0.625rem;
    letter-spacing:.26em;text-transform:uppercase;color:var(--fg-2);writing-mode:vertical-rl}
  .hero-scroll .line{width:1px;height:48px;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
  .hero-scroll .line::after{content:"";position:absolute;left:0;top:-46%;width:100%;height:46%;
    background:var(--orange);animation:scrolldn 1.9s cubic-bezier(.7,0,.3,1) infinite}
  @keyframes scrolldn{0%{top:-46%}55%,100%{top:100%}}
  @media(max-width:640px){.hero-scroll{display:none}.hero-sound{width:50px;height:50px;bottom:26px}}
  /* ---------- WORK (big editorial imagery) ---------- */
  .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  /* a slight radius only — the old 22px read too soft against the keyline grids,
     dead-square read too stark on full-bleed imagery */
  .case{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-2);
    border:1px solid var(--line);min-height:540px;display:flex;flex-direction:column;justify-content:flex-end}
  .case .img{position:absolute;inset:-6%;background-size:cover;background-position:center;
    filter:saturate(1.02) brightness(.96);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s}
  .case:hover .img{transform:scale(1.05);filter:saturate(1.16) brightness(1.12)}
  .case::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(20,20,25,0) 34%,rgba(13,13,17,.86) 100%)}
  .case-body{position:relative;z-index:2;padding:36px}
  .case-tag{font-family:var(--sans);font-size:0.75rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
  .case h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.625rem,2.3vw,2.125rem);letter-spacing:-0.02em;margin-bottom:10px}
  .case p{font-size:0.9375rem;color:#e0dcd3;max-width:46ch;margin-bottom:18px}
  .case .more{font-family:var(--sans);font-size:0.8125rem;font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .case .more span{color:var(--orange);transition:transform .2s}
  .case:hover .more span{transform:translateX(6px)}
  .case.wide{grid-column:1 / -1;min-height:600px}
  .case.wide .case-body{padding:clamp(36px,4vw,64px);max-width:760px}
  .case.wide h3{font-size:clamp(2.125rem,4.6vw,3.75rem);line-height:1}
  .case.wide p{font-size:clamp(0.9375rem,1.3vw,1.125rem);max-width:54ch}
  @media(max-width:820px){.work-grid{grid-template-columns:1fr}.case.wide{grid-column:auto}
    .case{min-height:440px}.case.wide{min-height:480px}}
  /* two large feature cases side-by-side, then a full-bleed rail of the same cards below —
     one body of work under one heading, not two sections */
  .work-grid-feature .case{min-height:clamp(440px,46vw,600px)}
  .work-grid-feature .case h3{font-size:clamp(1.75rem,3vw,2.625rem)}
  .work-more-head{margin-top:34px;margin-bottom:22px;align-items:center}
  .work-more-label{font-family:var(--sans);font-weight:600;font-size:0.8125rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--fg-2)}
  /* mini cases: the feature-card treatment, one size down */
  .mini-case{position:relative;flex:none;width:clamp(300px,26vw,360px);min-height:clamp(380px,30vw,440px);
    border-radius:12px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:flex-end;
    transition:border-color .3s}
  .mini-case:hover{border-color:rgba(255,255,255,.22)}
  .mini-case .img{position:absolute;inset:-6%;background-size:cover;background-position:center;
    filter:saturate(1.02) brightness(.96);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s}
  .mini-case:hover .img{transform:scale(1.05);filter:saturate(1.16) brightness(1.12)}
  .mini-case::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(20,20,25,0) 30%,rgba(13,13,17,.9) 100%)}
  .mini-body{position:relative;z-index:2;padding:26px}
  .mini-case .case-tag{font-size:0.75rem;margin-bottom:10px}
  .mini-case h4{font-family:var(--sans);font-weight:700;font-size:1.3125rem;letter-spacing:-0.015em;
    line-height:1.22;margin-bottom:16px}
  .mini-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .mini-meta{font-size:0.8125rem;color:var(--fg-2);font-weight:500}
  .mini-case .more{font-family:var(--sans);font-size:0.8125rem;font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .mini-case .more span{color:var(--orange);transition:transform .2s}
  .mini-case:hover .more span{transform:translateX(6px)}
  @media(max-width:820px){.mini-case{width:76vw;min-height:400px;scroll-snap-align:center}}
  /* rail chrome (head row, progress bar, prev/next) + the scroller itself — used by the work rail */
  .blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px;flex-wrap:wrap}
  .blog-head-right{display:flex;align-items:center;gap:26px}
  .blog-progress{width:130px;height:3px;background:var(--line);border-radius:4px;overflow:hidden}
  .blog-progress span{display:block;height:100%;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left}
  .blog-nav{display:flex;gap:10px}
  .bnav{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;
    color:var(--fg);font-size:1.125rem;cursor:pointer;display:grid;place-items:center;
    transition:border-color .2s,color .2s,background .2s,opacity .2s,transform .2s}
  .bnav:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
  .bnav:disabled{opacity:.3;cursor:default;transform:none;border-color:var(--line);color:var(--fg)}
  .blog-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;
    scrollbar-width:none}
  .blog-scroll::-webkit-scrollbar{display:none}
  /* start the track inset so card 1 lines up under the heading (not flush to the edge) */
  .blog-track{display:flex;gap:26px;width:max-content;
    padding-left:max(var(--pad),calc((100vw - 1400px)/2 + var(--pad)));
    padding-right:max(var(--pad),calc((100vw - 1400px)/2 + var(--pad)))}
  @media(max-width:820px){
    .blog-scroll{scroll-snap-type:x mandatory;padding-bottom:6px}
    .blog-progress{display:none}
  }
  /* ---------- EMPLOYEE-OWNED (seal + kinetic team wall) ---------- */
  .owned{position:relative;background:
      radial-gradient(120% 80% at 82% 30%,rgba(255,90,31,.10),transparent 55%),var(--bg-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
  .owned-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;
    padding-top:100px;padding-bottom:56px}
  .owned h2{font-size:clamp(2rem,4.4vw,3.625rem);margin-bottom:22px;line-height:1.02}
  .owned p{font-size:1rem;color:var(--fg-2);max-width:44ch;margin-bottom:32px;line-height:1.6}

  /* rotating employee-owned seal */
  .owned-seal{position:relative;width:min(340px,80vw);aspect-ratio:1;justify-self:center}
  .seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 26s linear infinite;
    transform-origin:center;will-change:transform;backface-visibility:hidden}
  .seal-ring text{font-family:var(--sans);font-weight:600;font-size:0.5938rem;letter-spacing:.34em;
    text-transform:uppercase;fill:var(--fg)}
  .seal-ring .tick{fill:var(--orange)}
  .owned:hover .seal-ring{animation-duration:12s}
  .seal-core{position:absolute;inset:20%;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 40% 30%,#1b0e0b,#120c0e);border:1px solid rgba(255,90,31,.28);
    box-shadow:inset 0 0 30px rgba(255,90,31,.06),0 24px 60px -24px rgba(0,0,0,.7)}
  .seal-core svg{width:52%;height:52%}
  .seal-core .lb{fill:var(--orange)}
  .seal-core .lw{display:none}
  /* team wall — two rows drifting in opposite directions */
  .team-wall{position:relative;padding:8px 0 60px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .team-row{display:flex;gap:16px;width:max-content;padding:10px 8px;animation:teamscroll 60s linear infinite}
  .team-row.rev{animation-direction:reverse;animation-duration:74s}
  .team-wall:hover .team-row{animation-play-state:paused}
  @keyframes teamscroll{to{transform:translateX(-50%)}}
  @media(max-width:820px){.owned-head{grid-template-columns:1fr;gap:44px;padding-top:80px}
    .owned-seal{width:min(280px,68vw)}.face{width:66px;height:66px}}

  /* variant B: flat band (no glow), the whole team on ticker rows where the seal sat, one real
     all-hands photo beneath, stats folded in.
     Claims the deck so the page steps black (work) → deck (here) → paper (manifesto). */
  .owned-alt{background:var(--bg)}
  .owned-alt .owned-head{grid-template-columns:1fr 1.15fr;padding-bottom:56px}
  /* the ticker band bleeds past its column toward the viewport edge (same maths as .blog-track),
     capped at 140px overhang so it stays tethered to the wrap on huge screens; carries its own
     padding so hover-scaled faces and name pills never clip */
  .owned-faces{align-self:center;min-width:0;display:flex;flex-direction:column;gap:10px;
    overflow:hidden;padding:14px 0 34px;
    margin-right:calc(-1 * min(140px, max(var(--pad),(100vw - 1400px)/2 + var(--pad))));
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
  .of-row{display:flex;gap:12px;width:max-content;animation:teamscroll 52s linear infinite}
  /* animated rows are stacking contexts, so a later row paints over the name pill — lift the hovered one */
  .of-row:hover,.team-row:hover{z-index:5}
  .of-row.rev{animation-direction:reverse;animation-duration:64s}
  .of-row:nth-child(3){animation-duration:58s}
  .owned-faces:hover .of-row{animation-play-state:paused}
  .owned-faces .face{width:76px;height:76px}
  /* homepage team ticker shows faces in colour; the shared .face greyscale (main.css) still
     applies elsewhere. Same specificity as the shared rules, so restate hover to keep the pop. */
  .owned-faces .face img,.team-row .face img{filter:brightness(.96)}
  .owned-faces .face:hover img,.team-row .face:hover img{filter:brightness(1.05)}
  /* the proof shots: candid team frames (assets/team/) on the shared photo-fade (main.css),
     a wide band between the head and the stats — the photos carry the mood, the roundels
     carry the names. Large-plate radius, no keyline: the photo's own edge carries the deck step */
  .owned-photo{margin:0 0 64px;aspect-ratio:21/9;border-radius:18px;overflow:hidden;background:var(--bg-2)}
  /* the owned section's accent is lime, not orange — ownership reads as its own chapter
     (cyan belongs to digital, pink to Labs). Heading span, hover ring and name pill all
     follow via the chip contract (main.css): one line retints the lot. Lime takes dark ink (APCA). */
  .owned,.team-row{--chip-acc:var(--lime);--chip-ink:#141419}
  .owned .accent{color:var(--lime)}
  /* stats share the client grid's keyline treatment (main.css .client-grid): square cells,
     shared 1px hairlines, quiet hover lift — one unified lime, matching the section accent */
  .owned-stats{padding-top:10px;padding-bottom:88px}
  .owned-stats .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .owned-stats .stat{display:flex;flex-direction:column;justify-content:space-between;gap:22px;
    min-height:200px;padding:30px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transition:background .3s ease}
  /* stats sit on the deck band, so the hover wash steps up to the panel */
  .owned-stats .stat:hover{background:var(--bg-2)}
  .owned-stats .n{color:var(--lime)}
  .owned-stats .l{margin-top:0}
  @media(max-width:820px){
    .owned-alt .owned-head{grid-template-columns:1fr}   /* this override outranks the base 820px rule, so restate it */
    .owned-faces{margin-left:calc(-1 * var(--pad))}     /* stacked: run the ticker edge to edge */
    .owned-faces .face{width:62px;height:62px}
    .owned-photo{aspect-ratio:16/10;margin-bottom:48px} /* stacked: a deeper plate reads better at phone width */
  }
  @media(max-width:640px){.owned-stats .stat-grid{grid-template-columns:1fr 1fr}
    .owned-stats .stat{min-height:150px;padding:22px}}
  /* ---------- STAT BAND ---------- */
  .band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:80px;padding-bottom:80px}
  .stat .n{font-family:var(--sans);font-weight:700;font-size:clamp(2.375rem,4.6vw,3.625rem);letter-spacing:-0.03em;line-height:1}
  .stat .n.o{color:var(--orange)} .stat .n.c{color:var(--cyan)}
  .stat .n.p{color:var(--pink)} .stat .n.v{color:var(--violet)} .stat .n.li{color:var(--lime)}
  .stat .l{font-size:0.875rem;color:var(--fg-2);margin-top:10px;max-width:22ch}
  @media(max-width:640px){.band .wrap{grid-template-columns:1fr 1fr}}
  /* ---------- SERVICES (two-column grid — desc sits under the name) ---------- */
  .svc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4.5vw,64px);
    border-top:1px solid var(--line)}
  .svc{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:start;
    align-content:start;row-gap:6px;padding:28px 0 32px;border-bottom:1px solid var(--line);
    transition:.35s;overflow:hidden}
  .svc:hover{padding-left:20px}
  /* highlight (no dimming): a soft wash in the row's own icon colour sweeps in on hover. */
  .svc-bar{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;
    background:linear-gradient(90deg,color-mix(in srgb,var(--acc,var(--orange)) 15%,transparent),transparent);
    transition:width .45s cubic-bezier(.2,.7,.2,1)}
  .svc:hover .svc-bar{width:100%}
  .svc>*:not(.svc-bar){position:relative;z-index:1}
  .svc .num{grid-column:1;grid-row:1;font-family:var(--sans);font-size:0.875rem;color:var(--fg-2);font-weight:600}
  /* icon sits ABOVE the name (matches the service-page .sv2-ic pattern). Colour is a
     random palette hue per load (home.js sets --acc); it's decorative, not a per-service code. */
  .svc .svc-ic{grid-column:2;grid-row:1;width:15px;height:15px;flex:none;margin-bottom:8px;color:var(--acc,var(--fg-2))}
  .svc .name{grid-column:2;grid-row:2;font-family:var(--sans);font-weight:700;font-size:clamp(1.4375rem,2.4vw,2.125rem);letter-spacing:-0.02em;transition:transform .35s ease;justify-self:start}
  /* hover highlight: the name lights up as a gentle gradient in its own icon colour
     (accent → a lighter tint of the same hue), echoing the Labs row's brand gradient. */
  .svc:hover .name{background:linear-gradient(90deg,var(--acc,var(--orange)),color-mix(in srgb,var(--acc,var(--orange)) 55%,#fff));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .svc .desc{grid-column:2;grid-row:3;font-size:0.875rem;color:var(--fg-2);max-width:44ch}
  /* Labs keeps its two-colour brand gradient (--g1/--g2 from labs.css) on both icon and name */
  .svc.svc-labs .svc-ic{color:var(--g1)}
  .svc.svc-labs:hover .name{background:linear-gradient(90deg,var(--g1),var(--g2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .svc.svc-labs .svc-bar{background:linear-gradient(90deg,color-mix(in srgb,var(--g1) 12%,transparent),transparent)}
  @media(max-width:820px){.svc-list{grid-template-columns:1fr}
    .svc{grid-template-columns:44px 1fr;padding:22px 0 26px}}
  /* team preview — a group shot of the people in that service. Docks in the
     hovered row's empty right side (home.js), vertically centred on the row and
     keylined in the row's accent so it belongs to that item without covering its
     text; the left-edge vertical centre is the anchor, hence translate(0,-50%). */
  .svc-preview{position:fixed;left:0;top:0;z-index:70;pointer-events:none;
    width:clamp(210px,19vw,252px);will-change:transform}
  .svc-preview-inner{border-radius:18px;padding:22px 22px 19px;
    background:var(--bg-2);border:1px solid color-mix(in srgb,var(--acc,var(--orange)) 45%,transparent);
    box-shadow:0 34px 80px -24px rgba(0,0,0,.75);
    transform:translate(0,-50%) scale(.82) rotate(-4deg);transform-origin:0 50%;opacity:0;
    transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
  .svc-preview.show .svc-preview-inner{opacity:1;transform:translate(0,-50%) scale(1) rotate(0deg)}
  .svc-faces{display:flex;margin-bottom:15px;padding-left:14px}
  .svc-faces img{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-left:-14px;
    border:2px solid var(--bg-2);box-shadow:0 6px 16px -6px rgba(0,0,0,.7);background:var(--bg)}
  .svc-cap-role{display:block;font-family:var(--sans);font-size:0.6875rem;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:var(--acc,var(--orange));margin-bottom:4px}
  .svc-cap-cta{display:block;font-family:var(--sans);font-size:0.875rem;font-weight:600;color:var(--fg)}
  @media(hover:none){.svc-preview{display:none}}
  /* services heading "built to ..." word cycle (CVP promises) — .roof-line keeps
     the moving phrase on one line so the heading height never jumps mid-cycle.
     Below 480px the longest phrase outgrows the viewport at the clamped floor
     size, so overflow would be worse than the height shift — let it wrap there. */
  .roof-line{white-space:nowrap}
  @media(max-width:480px){.roof-line{white-space:normal}}
  .roof-accent{color:var(--lime)}
  .roof-cycle{display:inline-block;position:relative;will-change:transform,opacity}
  /* ---------- MANIFESTO (light break) ---------- */
  .manifesto{background:var(--paper-2);color:#141419;padding:clamp(80px,11vw,130px) 0;overflow:hidden}
  .manifesto .eyebrow{color:#a15b32}
  .manifesto-statement{font-family:var(--sans);font-weight:700;font-size:clamp(1.875rem,5.2vw,4.5rem);
    letter-spacing:-0.03em;line-height:1.04;max-width:22ch}
  .manifesto-statement .w{display:inline-block}
  .manifesto-statement .nw{white-space:nowrap}
  .manifesto-statement .accent{color:var(--violet-lg)}   /* display size — large-text AA */
  .manifesto-statement .accent2{color:var(--pink-lg)}
  /* ---------- NEWS / BLOG (image-led feature + 2×2 grid) ---------- */
  .blog{padding:110px 0 90px}
  .news-feature,.news-cell{--acc:var(--cyan)}   /* each entry overrides inline with its post's accent */
  .news-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;color:var(--fg-2);margin-bottom:16px}
  .news-cat{color:var(--acc);text-transform:uppercase;letter-spacing:.08em;font-size:0.75rem}
  .news-cat b{font-weight:600}
  .news-byline{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
    font-size:0.875rem;color:var(--fg-2)}
  .news-byline img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
  /* featured post — big image left, editorial body right, no card box */
  .news-feature{display:grid;grid-template-columns:minmax(0,54%) minmax(0,1fr);
    gap:clamp(28px,4.5vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,64px)}
  /* slide covers are 16:9 — contain on black so nothing gets cropped */
  .news-feature-media{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--black);
    border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
  .news-feature:hover .news-feature-media{border-color:rgba(255,255,255,.22);
    box-shadow:0 40px 80px -40px rgba(0,0,0,.75)}
  .news-feature-media img{width:100%;height:100%;object-fit:contain;
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .news-feature:hover .news-feature-media img{transform:scale(1.03)}
  .news-feature h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.625rem,2.9vw,2.5rem);
    letter-spacing:-0.025em;line-height:1.08;transition:color .25s}
  .news-feature:hover h3{color:var(--acc)}
  .news-feature p{margin-top:16px;font-size:1rem;color:var(--fg-2);line-height:1.55;max-width:48ch}
  .news-feature .news-byline{margin-top:26px}
  .news-go{margin-left:auto;display:inline-flex;gap:7px;color:var(--fg);font-size:0.8125rem;white-space:nowrap}
  .news-go span{color:var(--acc);transition:transform .25s}
  .news-feature:hover .news-go span{transform:translateX(5px)}
  /* the 2×2 beneath — keyline cells, headline takes the post accent on hover */
  .news-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,4.5vw,64px)}
  .news-cell{display:flex;flex-direction:column;align-items:flex-start;
    border-top:1px solid var(--line);padding:26px 0 32px}
  .news-cell h4{font-family:var(--sans);font-weight:700;font-size:clamp(1.25rem,1.8vw,1.5625rem);
    letter-spacing:-0.015em;line-height:1.2;transition:color .25s}
  .news-cell:hover h4{color:var(--acc)}
  .news-cell p{margin-top:10px;font-size:0.9375rem;color:var(--fg-2);line-height:1.5;max-width:48ch}
  .news-cell .news-byline{margin-top:auto;padding-top:18px}
  @media(max-width:820px){
    .news-feature{grid-template-columns:1fr;gap:22px}
    .news-grid{grid-template-columns:1fr}
    .news-cell{padding:22px 0 26px}
  }
  /* ---------- SHOWREEL MODAL (nice popup, not raw fullscreen) ---------- */
  body.reel-open{overflow:hidden}
  .reel-modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;
    padding:clamp(24px,7vw,90px);background:rgba(8,8,11,.5);
    -webkit-backdrop-filter:blur(5px) saturate(1.05);backdrop-filter:blur(5px) saturate(1.05);
    opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}
  .reel-modal.open{opacity:1;visibility:visible}
  .reel-modal-inner{position:relative;width:min(1000px,100%);aspect-ratio:16/9;
    border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.12);
    box-shadow:0 60px 150px -50px rgba(0,0,0,.92);
    transform:translateY(26px) scale(.94);opacity:0;
    transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
  .reel-modal.open .reel-modal-inner{transform:translateY(0) scale(1);opacity:1}
  .reel-modal-inner video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
  .reel-close{position:absolute;top:14px;right:14px;z-index:2;width:48px;height:48px;border-radius:50%;
    border:1px solid rgba(255,255,255,.3);background:rgba(15,15,19,.55);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--fg);cursor:pointer;
    transition:border-color .25s,color .25s,transform .3s,background .25s}
  .reel-close::before,.reel-close::after{content:"";position:absolute;top:50%;left:50%;
    width:19px;height:2px;background:currentColor;border-radius:4px}
  .reel-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .reel-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .reel-close:hover{border-color:var(--orange);color:var(--orange);transform:rotate(90deg) scale(1.06);background:rgba(15,15,19,.82)}
  @media(max-width:600px){.reel-close{width:42px;height:42px;top:10px;right:10px}}