/* Fraunces — self-hosted variable file (OFL, licence in assets/fonts/licences).
   The upstream Google URL requested opsz 9..144 at weights 400/500; the variable
   font carries opsz so browsers keep applying optical sizing automatically. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/Fraunces-Variable.woff2") format("woff2"), url("../fonts/Fraunces-Variable.woff2") format("woff2")}
:root{--sec1:url(../img/sectors/beauty.webp);--sec2:url(../img/sectors/fashion.webp);--sec3:url(../img/sectors/real-estate.webp);--sec4:url(../img/sectors/gaming.webp);--sec5:url(../img/sectors/culture.webp);--sec6:url(../img/sectors/business.webp);}
    :root{
    /* Secondary text was --dim #8b96ad and tertiary --faint #4a5268.
       #4a5268 measured 2.54:1 against the background, well under the 4.5:1
       floor, on 51 elements at 10-12px. The ramp is shifted up one step,
       reusing values already in the palette, matching what mobile.css
       already does for #workGrid. Hierarchy now comes from size and
       weight rather than from unreadable greys. */
    --bg:#05060a;--ink:#eef1f8;--dim:#eef1f8;--faint:#8b96ad;--line:#1b2231;
    --indigo:#4c63ff;--cold:#8ea2ff;--glow:rgba(76,99,255,.32);--own:#8affc4;
    --cream:#ffffff;--cream-ink:#0b0d12;--cream-dim:#565d6b;--cream-line:#e4e7ec;
    --track:.2em;--disp:'Outfit',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  a{color:inherit;text-decoration:none}
  a:hover{color:inherit}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .disp{font-family:var(--disp);font-weight:700;letter-spacing:-.015em}
  .mono{letter-spacing:var(--track);text-transform:uppercase}
  /* shared fluid — only visible behind dark sections */
  .fluid{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(38% 46% at 32% 30%,rgba(76,99,255,.34),transparent 62%),
      radial-gradient(44% 40% at 72% 66%,rgba(142,162,255,.22),transparent 66%),
      radial-gradient(60% 60% at 50% 92%,rgba(46,60,140,.28),transparent 72%),
      #05060a;
    background-size:200% 200%;filter:blur(22px) saturate(1.1);
    animation:drift 28s ease-in-out infinite alternate;transition:opacity .6s}
  @keyframes drift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
  @media (prefers-reduced-motion:reduce){.fluid{animation:none}}
  /* NAV — the header and menu overlay live in assets/css/nav.css,
     shared with the case-study pages. Behaviour: assets/js/nav.js. */
  /* page system */
  .page{display:none;position:relative;z-index:2}
  .page.show{display:block}
  section{position:relative;padding:0 56px;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  section.light{background:var(--cream);color:var(--cream-ink)}
  section.dark{background:#070a16}
  section.compact{min-height:auto;padding-top:100px;padding-bottom:100px}
  /* SNAP IS OFF. It only ever applied above 900px (the rule below turns it off
     on phone and tablet) and index.html is the only page with .snap sections,
     so this was desktop-landing behaviour alone.

     Measured cause of the jitter across the first three beats: the snap points
     are the hero at 0 and .breath at 12,960px, because the three tall rigs
     between them — .wwa-scroll 2700px, .reelwwd 5400px, .whofor-scroll 4860px —
     carry no scroll-snap-align at all. Proximity snapping therefore treats the
     entire run as "near the hero" and drags you back to it: six consecutive
     scrollTo calls at 50, 100, 150, 200, 250 and 300 all landed at 0.

     Sticky is NOT the cause and switching it off would not have helped. On
     phone and tablet the sticky rigs are already flattened to position:static
     by home-mobile.css and snap is already off, and the same complaint appears
     there — which is what ruled sticky out.

     .snap is kept as a hook; it simply has nothing to align to now. To bring
     snapping back, every tall rig needs its own snap target first. */
  .snap{scroll-snap-align:none}
  .t-curtain,.t-curtain-dark{position:relative;z-index:2}
  .eyebrow{font-size:12px;letter-spacing:.24em;color:var(--cold);margin-bottom:20px;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
  section.light .eyebrow{color:var(--indigo)}
  .lead{font-weight:200;font-size:clamp(30px,5.5vw,72px);line-height:1}
  .lead b{font-weight:700}
  .body{color:var(--dim);font-weight:300;font-size:15px;line-height:1.75;max-width:580px;margin-top:20px}
  section.light .body{color:var(--cream-dim)}
  .sectlabel{position:absolute;top:30px;right:46px;font-size:10px;letter-spacing:.2em;color:var(--faint)}
  section.light .sectlabel{color:var(--cream-dim)}
  .wire{background:linear-gradient(160deg,rgba(20,26,44,.5),rgba(7,10,20,.5));border:1px solid var(--line);border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--faint);position:relative;overflow:hidden}
  section.light .wire{background:#eaf2f1;border-color:var(--cream-line)}
  .wire::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(142,162,255,.03) 11px 12px)}
  .wtag{position:absolute;top:11px;left:13px;font-size:10px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
  .play{width:54px;height:54px;border-radius:50%;border:1px solid rgba(142,162,255,.5);display:flex;align-items:center;justify-content:center;color:var(--cold);z-index:1}
  /* HERO — exact placement match to reference */
  .hero{height:100vh;height:100svh;min-height:640px;padding:0;position:relative;overflow:hidden;background:#080a1a}
  .hero .fluidslot{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;color:#232f52;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
  /* headline block: left-aligned, positioned left-of-center as in reference */
  .hero .center{position:absolute;left:26%;top:51%;transform:translateY(-50%);z-index:3;text-align:left}
  .hero .center .kick{font-size:15px;color:#e2e6f6;letter-spacing:.005em;font-weight:600;margin-bottom:10px}
  .hero h1{font-size:clamp(34px,4.6vw,74px);line-height:.95;font-weight:800;letter-spacing:.01em;color:#f3ecdf;text-transform:uppercase;white-space:nowrap}
  /* wordmark lower-left, on hero baseline (~same vertical as kicker) */
  .hero .wm{position:absolute;top:calc(52% - 8px);left:52px;z-index:3;display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.34em;color:#eef1f8;font-weight:500;text-transform:uppercase}
  .hero .wm .orb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#dbe2ff,#4c63ff 52%,#0a1033);box-shadow:0 0 10px rgba(76,99,255,.4)}
  /* scroll right — far right, same baseline */
  .hero .rr{position:absolute;top:calc(52% - 6px);right:52px;z-index:3;font-size:11px;letter-spacing:.3em;color:#9aa4bd;text-transform:uppercase}
  /* top-right minimal nav labels handled by topbar; bottom-left see all */
  .hero .seeall{position:absolute;bottom:96px;left:52px;z-index:3;font-size:11px;letter-spacing:.3em;color:#c7cede;text-transform:uppercase}
  .hero .botdot{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;color:#4a5578;font-size:10px}
  .hero .topdot{position:absolute;top:34px;left:64px;z-index:3;color:#3a4566;font-size:10px}
  /* three cards */
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
  .panel{border:1px solid var(--line);border-radius:0;padding:26px;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(16,20,34,.6),rgba(7,10,18,.7))}
  section.light .panel{background:#fff;border-color:var(--cream-line)}
  .panel .pn{position:absolute;top:20px;left:22px;font-size:11px;color:var(--faint);letter-spacing:.14em}
  .panel h3{font-size:21px;font-weight:600}
  .panel p{color:var(--dim);font-size:12px;line-height:1.55;margin-top:8px;font-weight:300}
  section.light .panel p{color:var(--cream-dim)}
  .method{color:var(--dim);font-size:12px;margin-top:26px;font-weight:300;max-width:640px}
  section.light .method{color:var(--cream-dim)}
  /* REEL — large framed studio video */
  .reel-sec{background:#070a16;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:70px 48px;position:relative}
  .reel-frame{position:relative;width:min(1400px,92vw);aspect-ratio:16/9;border:1px solid rgba(142,162,255,.25)}
  .reel-frame .brk{position:absolute;width:26px;height:26px;border:1px solid rgba(142,162,255,.6)}
  .reel-frame .brk.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .reel-frame .brk.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
  .reel-frame .brk.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
  .reel-frame .brk.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .reel-media{position:absolute;inset:0;background:linear-gradient(135deg,#1a2150,#0a0e20 70%);overflow:hidden;display:flex;align-items:center;justify-content:center}
  .reel-media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent,rgba(7,10,22,.5))}
  .reel-label{position:absolute;top:24px;left:26px;z-index:3;display:flex;align-items:center;gap:12px}
  .reel-label .orb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#dbe2ff,#4c63ff 52%,#0a1033);flex:none}
  .reel-label .rl-t{font-size:17px;font-weight:700;letter-spacing:.01em;line-height:1.1}
  .reel-label .rl-s{font-size:11px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
  .reel-play{position:relative;z-index:3;width:76px;height:54px;background:#ff0033;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;box-shadow:0 10px 40px rgba(255,0,51,.35)}
  .reel-play:hover{transform:scale(1.08)}
  .reel-play::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
  .reel-tag{position:absolute;top:calc(50% - 8px);right:-70px;font-size:10px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase;writing-mode:vertical-rl}
  .reel-marks{position:absolute;bottom:-34px;left:0;font-size:10px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase}
  .reel-marks-r{position:absolute;bottom:-34px;right:0;font-size:10px;letter-spacing:.24em;color:var(--faint);text-transform:uppercase;display:flex;gap:6px}
  .reel-marks-r b{color:var(--cold)}
  /* REEL → WHAT WE DO — recede & emerge combined sticky stage */
  .reelwwd{position:relative;height:600vh;background:#070a16}
  .rw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .rw-reel{position:absolute;z-index:4;will-change:transform,opacity}
  .rw-wwd{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 56px;opacity:0;will-change:opacity}
  .wwd-head{position:static;width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
  .wwd-head .eyebrow{margin-bottom:0}
  .wwd-progress{display:flex;gap:8px}
  .wwd-progress i{width:34px;height:2px;background:rgba(142,162,255,.2);display:block;transition:.4s}
  .wwd-progress i.on{background:var(--cold)}
  .wwd-slides{position:relative;height:52vh;width:100%;max-width:1000px}
  .wwd-slide{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;gap:28px;opacity:0;transform:translateY(40px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .wwd-slide.on{opacity:1;transform:translateY(0);pointer-events:auto}
  .wwd-slide .wnum{font-family:var(--disp);font-weight:800;font-size:clamp(50px,8vw,130px);line-height:.85;flex:none;color:#fff}
  .wwd-slide h2{font-size:clamp(34px,4.8vw,68px);font-weight:800;letter-spacing:-.02em}
  .wwd-slide p{color:#fff;font-size:18px;line-height:1.7;margin-top:16px;font-weight:400;max-width:460px;opacity:1}
  .wwd-method{position:absolute;bottom:60px;left:56px;right:56px;text-align:left;color:var(--faint);font-size:12px;font-weight:300;letter-spacing:.02em}
  /* WHO WE ARE — sticky line-by-line reveal */
  .wwa-scroll{position:relative;height:300vh;background:var(--cream)}
  .wwa-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 56px;overflow:hidden}
  .wwa-stage .eyebrow{position:static;color:var(--indigo);margin:0 0 28px}
  .wwa-lines{max-width:1100px}
  .wwa-line{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4.6vw,66px);line-height:1.08;letter-spacing:-.01em;color:var(--cream-ink);
    opacity:.12;transition:opacity .5s ease}
  .wwa-line.on{opacity:1}
  .wwa-foot{position:absolute;bottom:80px;left:56px;right:56px;display:flex;justify-content:space-between;align-items:flex-end}
  .wwa-foot .body{max-width:420px;margin:0}
  /* WHO WE DO IT FOR — full screen with media placeholder */
  /* BREATH — fluid field buffer before selected work */
  .breath{position:relative;height:100vh;height:100svh;background:radial-gradient(50% 60% at 50% 45%,#101736,#070a16 72%);overflow:hidden;display:flex;align-items:center;justify-content:center}
  .breath canvas{position:absolute;inset:0}
  .breath .blabel{position:relative;z-index:2;font-family:var(--head);font-size:clamp(22px,3vw,46px);letter-spacing:.08em;color:rgba(210,218,240,.85);text-transform:uppercase;font-weight:400}
  .breath-light{background:radial-gradient(50% 60% at 50% 45%,#eef1f8,#ffffff 72%)}
  .breath-light .blabel{color:var(--indigo)}
  .breath-light .blabel::after{content:"";display:block;width:52px;height:2px;background:var(--indigo);margin:18px auto 0}
  /* CLOSE — full-screen living close with fluid field */
  .close-sec{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;background:#05060f;padding:0}
  .close-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 60% at 50% 42%,transparent,rgba(5,6,15,.55));pointer-events:none}
  .close-center{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px}
  .close-center .c-eyebrow{font-size:11px;letter-spacing:.28em;color:var(--cold);text-transform:uppercase;margin-bottom:28px;opacity:0;transform:translateY(20px);animation:cUp .9s cubic-bezier(.16,1,.3,1) .1s forwards}
  .close-center h2{font-size:clamp(38px,6.4vw,104px);font-weight:800;letter-spacing:-.03em;line-height:.96}
  .close-center h2 .l1{display:block;opacity:0;transform:translateY(30px);animation:cUp 1s cubic-bezier(.16,1,.3,1) .22s forwards}
  .close-center h2 .l2{display:block;opacity:0;transform:translateY(30px);animation:cUp 1s cubic-bezier(.16,1,.3,1) .36s forwards}
  .close-center h2 b{color:var(--cold);font-weight:800}
  .close-center .c-sub{color:var(--dim);font-size:16px;font-weight:300;margin-top:26px;opacity:0;transform:translateY(20px);animation:cUp 1s cubic-bezier(.16,1,.3,1) .5s forwards}
  .close-actions{display:flex;gap:14px;margin-top:52px;align-items:center;opacity:0;transform:translateY(20px);animation:cUp 1s cubic-bezier(.16,1,.3,1) .64s forwards}
  @keyframes cUp{to{opacity:1;transform:none}}
  /* The closing pair speaks the pill's language: same radius, same type, same
     indigo, same hover motion. Primary is the filled state at rest so "start a
     project" still outranks the secondary link, and hovers by lifting rather
     than by changing colour, since it is already wearing the hover fill.
     It used to be a white slab that hovered to transparent, which was the
     inverse of every other button on the site. */
  .cta-primary{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:var(--indigo);border:1px solid var(--indigo);
    border-radius:100px;padding:17px 34px;cursor:pointer;font-weight:600;transition:background-color .2s,border-color .2s,color .2s,box-shadow .3s,transform .3s}
  .cta-primary:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;
    box-shadow:0 10px 26px -10px rgba(76,99,255,.7);transform:translateY(-1px)}
  .cta-ghost{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
    border:1px solid var(--indigo);border-radius:100px;padding:17px 30px;
    cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .3s,transform .3s}
  .cta-ghost:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;
    box-shadow:0 10px 26px -10px rgba(76,99,255,.7);transform:translateY(-1px)}
  .cta-primary:focus-visible,.cta-ghost:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
  .close-foot{position:relative;z-index:3;padding:0 48px 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
  .cf-brand .top{display:flex;align-items:center;gap:11px}
  .cf-brand .orb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#dbe2ff,#4c63ff 52%,#0a1033)}
  .cf-brand .wm{font-size:13px;letter-spacing:.3em;font-weight:700}
  .cf-brand .tag{font-size:10px;letter-spacing:.04em;color:var(--faint);margin-top:8px;max-width:240px;line-height:1.5}
  .cf-nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
  .cf-nav a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.2s}
  .cf-nav a:hover{color:#fff}
  .cf-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .cf-socials{display:flex;gap:16px}
  .cf-socials a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.2s}
  .cf-socials a:hover{color:#fff}
  .cf-legal{font-size:10px;letter-spacing:.08em;color:var(--faint)}
  .cf-divider{position:relative;z-index:3;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0 48px 28px}
  /* SELECTED OUTPUT REEL — a horizontal walk through the building.
     Cell widths and the single/stacked rhythm carry the sequence, so the
     eye is moved rather than handed a uniform contact sheet. */
  .sd-reel-panel .pnl{display:flex;flex-direction:column;justify-content:center;gap:0}
  .reel-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .reel-meta{display:flex;align-items:baseline;gap:20px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
  .reel-count b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
  .reel-hint{color:rgba(255,255,255,.32)}
  .reel{margin-top:26px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;cursor:grab;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* the strip runs to the panel edges, so it reads as a continuing band */
    margin-left:calc(var(--pnl-pad, 56px) * -1);margin-right:calc(var(--pnl-pad, 56px) * -1);
    padding-inline:var(--pnl-pad, 56px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%)}
  .reel::-webkit-scrollbar{display:none}
  .reel.is-drag{cursor:grabbing}
  .reel:focus-visible{outline:1px solid var(--cold);outline-offset:6px}
  .reel-track{display:flex;gap:14px;height:min(58vh,560px);width:max-content;align-items:stretch}
  .rc{flex:none;height:100%;opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .sd-reel-panel.in .rc{opacity:1;transform:none}
  .sd-reel-panel.in .rc:nth-child(2){transition-delay:.06s}
  .sd-reel-panel.in .rc:nth-child(3){transition-delay:.12s}
  .sd-reel-panel.in .rc:nth-child(4){transition-delay:.18s}
  .sd-reel-panel.in .rc:nth-child(n+5){transition-delay:.24s}
  .rc-tall{width:min(30vw,330px)}
  .rc-wide{width:min(52vw,700px)}
  .rc-video{width:min(30vw,330px)}
  .rc-split{width:min(24vw,260px);display:flex;flex-direction:column;gap:14px}
  .rc-split .rf{flex:1;min-height:0}
  .rc.is-lead{margin-right:6px}
  .rf{position:relative;margin:0;height:100%;overflow:hidden;background:#0b0d14;
    border:1px solid var(--line)}
  .rf img,.rf video{width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.06);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease;
    filter:saturate(.94)}
  .rf:hover img,.rf:hover video{transform:scale(1.01);filter:saturate(1.04)}
  .rf figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);
    background:linear-gradient(to top,rgba(6,8,14,.86),transparent);
    opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
  .rf:hover figcaption{opacity:1;transform:none}
  .rv-tag{position:absolute;top:12px;left:12px;padding:5px 10px;border:1px solid rgba(255,255,255,.28);
    background:rgba(6,8,14,.55);backdrop-filter:blur(4px);
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
  .reel-foot{margin-top:22px}
  .reel-bar{height:1px;background:var(--line);position:relative;overflow:hidden}
  .reel-bar i{position:absolute;left:0;top:0;height:100%;width:18%;background:var(--cold);
    transition:transform .12s linear}
  @media (max-width:900px){
    .reel-track{height:min(52vh,420px);gap:10px}
    .rc-tall,.rc-video{width:64vw}
    .rc-wide{width:86vw}
    .rc-split{width:52vw;gap:10px}
    .reel-hint{display:none}
    .rf figcaption{opacity:1;transform:none}
  }
  /* ILLUSORR SPACES BAND — the product runs live behind its own copy.
     The frame is mounted only while the band is on screen: it is a WebGL
     scene, and holding a context for a section nobody is looking at costs
     the whole page its frame rate. */
  .spaces-band{min-height:100vh;min-height:100svh;background:#020B11;display:flex;flex-direction:column;justify-content:center;padding:120px 56px;position:relative;overflow:hidden}
  .sb-stage{position:absolute;inset:0;z-index:0}
  .sb-frame{position:absolute;inset:0;overflow:hidden;contain:strict}
  .sb-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none}
  .sb-scrim{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,rgba(2,11,17,.95) 0%,rgba(2,11,17,.86) 34%,rgba(2,11,17,.32) 64%,rgba(2,11,17,.6) 100%),
               radial-gradient(120% 90% at 50% 120%,transparent 40%,rgba(2,11,17,.85) 100%)}
  .sb-in{position:relative;z-index:2;max-width:1100px;width:100%}
  .sb-eyebrow{font-size:11px;letter-spacing:.24em;color:#00B2FF;text-transform:uppercase;display:flex;align-items:center;gap:10px;font-weight:600}
  .sb-eyebrow::before{content:"";width:22px;height:1px;background:#00B2FF}
  .sb-in h2{font-size:clamp(36px,5.6vw,86px);font-weight:800;letter-spacing:-.02em;margin-top:22px;line-height:1}
  .sb-in p{color:var(--dim);font-size:15px;line-height:1.7;font-weight:300;margin-top:26px;max-width:520px}
  .sb-stats{display:flex;gap:0;margin-top:56px;max-width:800px}
  .sb-stat{flex:1;padding-right:32px;border-left:1px solid var(--line);padding-left:26px;
    opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .spaces-band.in .sb-stat{opacity:1;transform:none}
  .spaces-band.in .sb-stat:nth-child(2){transition-delay:.12s}
  .spaces-band.in .sb-stat:nth-child(3){transition-delay:.24s}
  .sb-stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.01em;color:#00B2FF;line-height:1}
  .sb-stat span{display:block;margin-top:9px;font-size:12px;line-height:1.5;color:var(--dim);font-weight:300}
  .sb-actions{display:flex;align-items:center;gap:20px;margin-top:52px;flex-wrap:wrap}
  .sb-hint{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34)}
  /* COLLECTIVE BAND — talent pipeline, after work before close */
  .collective-band{min-height:100vh;min-height:100svh;background:#070a16;display:flex;flex-direction:column;justify-content:center;padding:120px 56px;position:relative;overflow:hidden}
  .cb-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(46% 56% at 78% 40%,rgba(76,99,255,.18),transparent 60%);pointer-events:none;animation:cbFloat 14s ease-in-out infinite}
  @keyframes cbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-6%,4%)}}
  .cb-in{position:relative;z-index:2;max-width:1100px;width:100%}
  .cb-eyebrow{font-size:11px;letter-spacing:.24em;color:var(--cold);text-transform:uppercase;display:flex;align-items:center;gap:10px;font-weight:600}
  .cb-eyebrow::before{content:"";width:22px;height:1px;background:var(--cold)}
  .cb-in h2{font-size:clamp(36px,5.6vw,86px);font-weight:800;letter-spacing:-.02em;margin-top:22px;line-height:1}
  .cb-in p{color:var(--dim);font-size:15px;line-height:1.7;font-weight:300;margin-top:26px;max-width:500px}
  .cb-steps{display:flex;gap:0;margin-top:70px;max-width:940px}
  .cb-step{flex:1;padding-right:36px;border-left:1px solid var(--line);padding-left:28px;opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .collective-band.in .cb-step{opacity:1;transform:none}
  .collective-band.in .cb-step:nth-child(2){transition-delay:.14s}
  .collective-band.in .cb-step:nth-child(3){transition-delay:.28s}
  .cb-step .sn{font-size:11px;letter-spacing:.14em;color:var(--cold);text-transform:uppercase}
  .cb-step h3{font-size:20px;font-weight:700;margin-top:14px}
  .cb-step p{font-size:13px;color:var(--dim);font-weight:300;margin-top:10px;line-height:1.6}
  /* animated connective line under the steps */
  .cb-line{position:relative;height:1px;background:var(--line);max-width:940px;margin-top:36px;overflow:hidden}
  .cb-line::after{content:"";position:absolute;left:0;top:0;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--cold),transparent);animation:cbSweep 3.4s linear infinite}
  @keyframes cbSweep{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
  .cb-cta{margin-top:56px;display:inline-flex}
  /* WHO WE DO IT FOR — white, sticky scroll-through all sector media */
  .whofor-scroll{position:relative;height:540vh;background:#fff}
  .whofor{position:sticky;top:0;height:100vh;height:100svh;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:46% 54%;overflow:hidden;background:#fff}
  .wf-visual{position:relative;overflow:hidden;border-right:1px solid #e4e7ec;background:#fff;perspective:1400px;perspective-origin:50% 50%}
  /* isolation:isolate confines .wf-sheen's mix-blend-mode:screen to this
     stage. Without it the blend has no stacking context of its own, so the
     compositor must read back the whole page backdrop every frame instead of
     moving a cached layer. This section is the only one on the page carrying
     a blend mode, 3D transforms and will-change together, which is why the
     jitter was confined to the opening sections. contain:paint stops its
     painting leaking into the sections that follow. */
  .wf-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform;isolation:isolate}
  section.whofor{contain:paint}
  .wf-img{position:absolute;inset:-10%;background-size:cover;background-position:center;opacity:0;backface-visibility:hidden;
    transform:scale(1.14) translateZ(-150px);transition:opacity 1s ease,transform 9s cubic-bezier(.33,0,.25,1)}
  .wf-img.on{opacity:1;transform:scale(1) translateZ(70px)}
  .wf-sheen{position:absolute;inset:-20%;z-index:4;pointer-events:none;transform:translateZ(90px);mix-blend-mode:screen;
    background:radial-gradient(40% 40% at var(--mx,60%) var(--my,30%),rgba(180,200,255,.22),transparent 60%)}
  .wf-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;
    background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px)}
  .wf-imgtag{text-shadow:0 1px 16px rgba(0,0,0,.75);position:absolute;bottom:30px;left:30px;z-index:5;font-size:10px;letter-spacing:.2em;color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:9px;font-weight:600}
  .wf-imgtag::before{content:"";width:16px;height:1px;background:var(--indigo)}
  .wf-count{text-shadow:0 1px 16px rgba(0,0,0,.75);position:absolute;top:30px;right:30px;z-index:3;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
  .wf-count b{color:#fff}
  .wf-frame{position:absolute;top:24px;left:24px;right:24px;bottom:24px;border:1px solid rgba(255,255,255,.35);z-index:5;pointer-events:none}
  .wf-body{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;position:relative;background:#fff}
  .wf-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--indigo);text-transform:uppercase;display:flex;align-items:center;gap:12px;font-weight:600}
  .wf-eyebrow::before{content:"";width:26px;height:1px;background:var(--indigo);flex:none}
  .wf-body h2{font-size:clamp(30px,3.4vw,52px);font-weight:800;margin-top:16px;letter-spacing:-.02em;line-height:1.08;max-width:560px;color:var(--cream-ink)}
  .wf-sectors{margin-top:30px;display:flex;flex-direction:column;gap:2px}
  .srow{display:grid;grid-template-columns:38px 1fr;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--cream-line);cursor:pointer}
  .srow:last-child{border-bottom:1px solid var(--cream-line)}
  .sr-num{font-size:11px;color:var(--cream-dim);letter-spacing:.1em;transition:.4s}
  .sr-name{font-size:clamp(17px,1.7vw,24px);color:var(--cream-dim);transition:.45s cubic-bezier(.16,1,.3,1);font-weight:700;letter-spacing:-.01em}
  .srow:hover .sr-name{color:var(--indigo)}
  .srow.on .sr-name{color:var(--cream-ink)}
  .srow.on .sr-num{color:var(--indigo)}
    /* Each sector row is now a way into that sector's page, and the block ends
     with a route to all of them. The anchor wraps the row's existing content
     wrapper, so the grid and the scroll-through behaviour are unchanged. */
  .sr-go{display:block;text-decoration:none;color:inherit}
  .srow:hover .sr-go .sr-name{color:var(--indigo)}
  .sr-go:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:2px}
  /* "Discover all sectors" is the peer of "more about us" and "see all work":
     the same go deeper move at the end of a band. It was an underlined indigo
     link, so one page carried three section closing calls to action wearing
     three different designs. It takes the pill below instead, and only keeps
     what is specific to it: a gap, because its arrow is a separate span where
     the other pills carry theirs inside the label.

     The old ::after hit expander is gone with it. That existed because a 19px
     link is under the 44px target floor and padding would have pushed the
     underline away from the text; the pill clears 44px on its own. */
  /* The other pills carry their arrow inside the label, separated by a real
     space: about 2.8px at 11px Outfit plus 1.54px of tracking. This one keeps
     its arrow in an aria-hidden span, which inline-flex makes a separate item,
     so the gap stands in for that space and has to match it rather than be a
     round number. At 8px the arrow sat visibly further out than on its peers. */
  .wf-all{margin-top:22px;gap:4px;text-decoration:none}
  .sr-desc{grid-column:2;font-size:13px;color:var(--cream-dim);font-weight:300;line-height:1.6;max-height:0;opacity:0;overflow:hidden;transition:.5s cubic-bezier(.16,1,.3,1)}
  .srow.on .sr-desc{max-height:60px;opacity:1;margin-top:8px}
  @media(max-height:840px){.wf-body{padding:48px 56px}.wf-body h2{font-size:clamp(26px,2.5vw,38px)}
    .srow{padding:10px 0}.wf-div{margin-top:26px}.wf-clients{margin-top:14px}}
  .wf-div{margin-top:48px;display:flex;align-items:center;gap:18px}
  .wf-div .lbl{font-size:10px;letter-spacing:.26em;color:var(--cream-dim);text-transform:uppercase}
  .wf-div .ln{flex:1;height:1px;background:linear-gradient(90deg,#e4e7ec,transparent)}
  .wf-clients{margin-top:24px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .wf-ribbon{display:flex;gap:40px;width:max-content;animation:slide 34s linear infinite;align-items:center}
  .wf-clients:hover .wf-ribbon{animation-play-state:paused}
  .wf-ribbon span{font-size:20px;font-weight:700;color:var(--cream-dim);letter-spacing:-.01em;white-space:nowrap;transition:color .35s}
  .wf-ribbon span:hover{color:var(--indigo)}
  /* The marks in assets/img/clients/fit are one white-on-transparent set, cut
     for the dark about page. On this cream panel grayscale() would leave them
     white on white, so brightness(0) flips each one to a solid ink silhouette
     instead. Height is set on the 360x120 canvas, which carries its own
     padding, so the glyph reads about 23px. */
  .wf-ribbon img{height:26px;width:auto;display:block;object-fit:contain;flex:none;
    filter:brightness(0) opacity(.5);transition:filter .3s,opacity .3s}
  .wf-ribbon img:hover{filter:brightness(0) opacity(.85)}
  @keyframes slide{to{transform:translateX(-50%)}}
  .wf-ribbon span{font-size:18px;font-weight:600;color:var(--cream-dim);letter-spacing:.04em;white-space:nowrap;transition:color .3s}
  .wf-ribbon span:hover{color:var(--cream-ink)}
  .sector-teaser span{background:rgba(255,255,255,.35)}
  /* SELECTED WORK — full screen */
  /* SELECTED WORK — white conveyor snap */
  .conv-section{padding:44px 52px 38px !important;justify-content:center}
  .conv-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px}
  .conv-eyebrow{font-size:12px;letter-spacing:.24em;color:var(--indigo);text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px}
  .conv-eyebrow::before{content:"";width:26px;height:1px;background:var(--indigo);flex:none}
  .conv-head h2{font-size:clamp(30px,4vw,58px);font-weight:800;margin-top:14px;letter-spacing:-.02em;color:var(--cream-ink)}
  .conv-count{font-size:12px;letter-spacing:.16em;color:var(--cream-dim);text-transform:uppercase;font-variant-numeric:tabular-nums}
  .conv-count b{color:var(--cream-ink);font-weight:700}
  .conv-vp{overflow:hidden}
  .conv{display:flex;gap:10px;height:56vh;min-height:420px}
  .ccard{flex:none;width:80px;text-decoration:none;color:inherit;border:1px solid #e4e7ec;background:#eef1f8;position:relative;overflow:hidden;cursor:pointer;
    transition:width .8s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s,background .5s;display:flex;flex-direction:column;justify-content:flex-end;padding:30px}
  .ccard .cmedia{position:absolute;inset:0;z-index:0;transform:scale(1.12);opacity:0;transition:opacity .7s;background-size:cover;background-position:center}
  .ccard .cmedia::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.96) 8%,rgba(255,255,255,.55) 42%,transparent 78%)}
  .ccard.active .cmedia{opacity:1;animation:kb 8s ease-out forwards}
  @keyframes kb{from{transform:scale(1.12)}to{transform:scale(1.02)}}
  .ccard .csector{position:absolute;top:28px;left:30px;font-size:10px;letter-spacing:.2em;color:var(--indigo);text-transform:uppercase;font-weight:700;opacity:0;transform:translateY(-6px);transition:.5s .06s;z-index:3;display:flex;align-items:center;gap:8px}
  .ccard .csector::before{content:"";width:14px;height:1px;background:var(--indigo)}
  .ccard .cci{position:relative;z-index:3}
  .ccard h3{font-size:clamp(30px,3.6vw,58px);font-weight:800;letter-spacing:-.025em;white-space:nowrap;line-height:.92;color:var(--cream-ink);opacity:0;transform:translateY(18px);transition:.6s cubic-bezier(.16,1,.3,1) .1s}
  .ccard .cclient{font-size:15px;color:var(--indigo);font-weight:600;margin-top:10px;opacity:0;transform:translateY(14px);transition:.6s cubic-bezier(.16,1,.3,1) .16s}
  .ccard .cdesc{font-size:14px;color:#565d6b;font-weight:300;margin-top:16px;max-width:360px;line-height:1.65;opacity:0;transform:translateY(14px);transition:.6s cubic-bezier(.16,1,.3,1) .22s}
  .ccard .ctag{font-size:10px;letter-spacing:.16em;color:#565d6b;text-transform:uppercase;margin-top:18px;opacity:0;transform:translateY(12px);transition:.6s cubic-bezier(.16,1,.3,1) .28s;display:inline-flex}
  .ccard .ctag span{border:1px solid #e4e7ec;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.7)}
  .ccard .cvlabel{position:absolute;bottom:30px;left:50%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:15px;font-weight:700;color:#565d6b;white-space:nowrap;transition:opacity .35s,color .3s;z-index:3}
  .ccard .cvnum{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--cream-dim);letter-spacing:.1em;z-index:3;transition:opacity .35s;font-variant-numeric:tabular-nums;font-weight:600}
  .ccard:not(.active):hover{background:#eef1f8}
  .ccard:not(.active):hover .cvlabel{color:var(--indigo)}
  .ccard.active{width:640px;border-color:transparent;background:#fff;box-shadow:0 30px 70px -30px rgba(40,55,120,.28)}
  .ccard.active .csector,.ccard.active h3,.ccard.active .cclient,.ccard.active .cdesc,.ccard.active .ctag{opacity:1;transform:none}
  .ccard.active .cvlabel,.ccard.active .cvnum{opacity:0}
  .conv-foot{display:flex;justify-content:space-between;align-items:center;margin-top:32px}
  .conv-dots{display:flex;gap:8px}
  .conv-dots i{width:34px;height:3px;background:#e4e7ec;cursor:pointer;transition:background .3s;position:relative;overflow:hidden;border-radius:2px}
  .conv-dots i .fill{position:absolute;inset:0;background:var(--indigo);transform:scaleX(0);transform-origin:left;border-radius:2px}
  .conv-dots i.on .fill{animation:dotfill 3s linear forwards}
  @keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .conv-dots i.done{background:rgba(76,99,255,.35)}
  /* SELECTED WORK — dark variant */
  .conv-dark{background:#070a16}
  .conv-dark .conv-head h2,.conv-dark .conv-count b{color:#eef1f8}
  .conv-dark .conv-eyebrow{color:var(--cold)}
  .conv-dark .conv-eyebrow::before{background:var(--cold)}
  .conv-dark .conv-count{color:var(--faint)}
  .conv-dark .ccard{border-color:rgba(142,162,255,.16);background:#0c1828}
  .conv-dark .ccard.active{border-color:rgba(142,162,255,.35);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
  .conv-dark .cvlabel,.conv-dark .cvnum{color:var(--faint)}
  .conv-dark .ccard h3,.conv-dark .cclient{color:#eef1f8}
  .conv-dark .csector,.conv-dark .cdesc{color:#8b96ad}
  .conv-dark .ctag{color:var(--cold);border-color:rgba(142,162,255,.35)}
  .conv-dark .conv-dots i{background:rgba(142,162,255,.16)}
  .conv-dark .conv-dots i.done{background:rgba(142,162,255,.4)}
  .conv-dark .conv-foot{color:#8b96ad}
  .selwork-over{position:relative;z-index:5;background:#070a16;padding:100px 56px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  /* who we do it for teaser row */
  .sector-teaser{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .sector-teaser span{border:1px solid var(--cream-line);border-radius:100px;padding:10px 17px;font-size:13px;color:var(--cream-dim)}
  /* selected work */
  .selwork{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
  .selcard{border-radius:0;overflow:hidden;min-height:300px;position:relative;border:1px solid var(--line);background:linear-gradient(160deg,rgba(20,26,44,.6),rgba(7,10,18,.75));display:flex;flex-direction:column;justify-content:flex-end;padding:24px;cursor:pointer;transition:.3s}
  .selcard:hover{border-color:rgba(142,162,255,.5);transform:translateY(-3px)}
  .selcard h4{font-size:22px;font-weight:600;position:relative;z-index:1}
  .selcard small{color:var(--dim);font-size:11px;letter-spacing:.06em;position:relative;z-index:1;margin-top:4px}
  /* CTA */
  .cta{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .cta .join{margin-top:22px;font-size:12px;color:var(--dim)}
  .cta .join a{color:var(--cold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  /* WORK */
  .work-controls{display:flex;flex-direction:column;gap:16px;margin:38px 0 26px}
  .filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .filter-row .flabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);min-width:80px}
  .chipset{display:flex;flex-wrap:wrap;gap:6px}
  .chipset span{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:6px 12px;cursor:pointer;transition:.2s}
  .chipset span.on{color:#fff;border-color:rgba(142,162,255,.5);background:rgba(76,99,255,.12)}
  .chipset span:hover{color:var(--ink)}
  .viewtoggle{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;align-self:flex-start}
  .viewtoggle button{background:none;border:none;color:var(--dim);font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;cursor:pointer}
  .viewtoggle button.on{background:rgba(76,99,255,.15);color:#fff}
  .field-view{position:relative;height:520px;border:1px solid var(--line);border-radius:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(16,20,34,.4),rgba(5,6,10,.85))}
  .frag{position:absolute;border:1px solid var(--line);border-radius:0;background:linear-gradient(160deg,rgba(20,26,44,.7),rgba(7,10,18,.8));display:flex;align-items:flex-end;padding:10px;font-size:11px;color:var(--dim);cursor:pointer;transition:.4s}
  .frag:hover{border-color:rgba(142,162,255,.6);color:#fff;transform:scale(1.04)}
  .index-grid{display:none;grid-template-columns:repeat(3,1fr);gap:14px}
  .index-grid.on{display:grid}
  .icard{border-radius:0;overflow:hidden;background:var(--cream);color:var(--cream-ink);min-height:240px;display:flex;flex-direction:column;cursor:pointer;transition:.3s}
  .icard:hover{transform:translateY(-3px)}
  .icard .ii{flex:1;background:linear-gradient(160deg,#dbceb9,#c9bfae)}
  .icard .im{padding:13px 15px}.icard h5{font-size:15px;font-weight:600}.icard small{color:var(--cream-dim);font-size:11px}
  /* ABOUT chapters */
  .chapter{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:start}
  .chapter .cn{font-family:var(--disp);font-weight:700;font-size:40px;color:var(--faint)}
  section.light .chapter .cn{color:#c2c6cd}
  .chapter .ct{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cold);margin-top:8px}
  section.light .chapter .ct{color:var(--indigo)}
  .chapter h2{font-size:clamp(26px,3.6vw,44px);font-weight:600;line-height:1.08}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
  .member{aspect-ratio:3/4;border:1px solid var(--line);border-radius:0;background:radial-gradient(circle at 50% 40%,rgba(30,40,70,.8),rgba(7,10,18,.9));display:flex;flex-direction:column;justify-content:flex-end;padding:14px;position:relative;overflow:hidden}
  .member::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(142,162,255,.25),transparent 55%);mix-blend-mode:screen}
  .member .nm{font-size:12px;font-weight:500;position:relative}.member .rl{font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;position:relative}
  .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
  .cap{background:#fff;color:#111;border-radius:0;padding:22px 20px;min-height:320px;position:relative;display:flex;flex-direction:column;border:1px solid var(--cream-line)}
  .cap h4{font-size:18px;font-weight:700}.cap ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
  .cap li{font-size:12px;color:#333;padding-bottom:9px;border-bottom:1px dotted #ccc}
  /* SECTORS scroll-through */
  .sector-sec{min-height:92vh;display:flex;align-items:center;position:relative}
  .sector-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;width:100%}
  .sector-txt .snum{font-size:11px;letter-spacing:.24em;color:var(--cold);font-weight:600}
  section.light .sector-txt .snum{color:var(--indigo)}
  .sector-txt h2{font-size:clamp(30px,3.4vw,52px);font-weight:800;letter-spacing:-.02em;margin-top:14px;line-height:1.02}
  .sector-txt .sof{margin-top:20px;font-size:15px;line-height:1.75;font-weight:300;color:var(--dim);max-width:440px}
  .sector-txt .scap{margin-top:24px;display:flex;flex-direction:column;gap:9px;max-width:340px}
  .sector-txt .scap .cap{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;gap:12px}
  .sector-txt .scap .cap>span:first-child{font-size:11px;color:var(--dim);letter-spacing:.02em}
  .sector-txt .scap .cap .bar{height:3px;border-radius:100px;background:rgba(142,162,255,.16);overflow:hidden}
  .sector-txt .scap .cap .bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#4c63ff,#aebbff)}
  .sector-txt .scap .cap .cv{font-size:10px;color:var(--cold);font-family:'Outfit',sans-serif;text-align:right}
  .sector-txt .sclients{margin-top:26px;display:flex;flex-wrap:wrap;gap:7px}
  .sector-txt .sclients span{font-size:11px;letter-spacing:.02em;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:7px 13px;transition:.3s}
  .sector-txt .sclients span:hover{border-color:rgba(142,162,255,.5);color:#fff}
  .svis{position:relative;height:420px;border-radius:20px;overflow:hidden;
    background:radial-gradient(120% 100% at 32% 18%,var(--g1),var(--g2) 58%,#0a0e1c);
    border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 90px -50px rgba(0,0,0,.85)}
  .svis::after{content:"";position:absolute;inset:0;background:
    radial-gradient(55% 45% at 78% 12%,rgba(255,255,255,.20),transparent 55%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.04) 0 2px,transparent 2px 11px)}
  .svis::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,8,16,.6));z-index:1}
  .svis .sv-num{position:absolute;top:22px;left:26px;z-index:2;font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.2em;color:#fff;opacity:.85}
  .svis .sv-big{position:absolute;right:20px;top:6px;z-index:2;font-weight:800;font-size:clamp(90px,12vw,150px);color:rgba(255,255,255,.10);letter-spacing:-.03em;line-height:1}
  .svis .sv-tag{position:absolute;left:26px;bottom:24px;z-index:3;font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
    border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:8px 14px;background:rgba(8,10,20,.4);backdrop-filter:blur(6px)}
  .svis .sv-dots{position:absolute;right:26px;bottom:26px;z-index:3;display:flex;gap:6px}
  .svis .sv-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
  .svis .sv-dots i:first-child{background:#fff}
  @media(max-width:860px){.svis{height:300px}.sector-txt .scap .cap{grid-template-columns:100px 1fr 34px}}
  section.light .sector-sec .sclients{color:var(--cream-dim)}
  /* LAB */
  .lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
  .lab-card{border:1px solid var(--line);border-radius:0;min-height:250px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,rgba(16,20,34,.5),rgba(7,10,18,.65));position:relative}
  .lab-card .lt{position:absolute;top:20px;left:22px;font-size:10px;letter-spacing:.16em;color:var(--cold)}
  .lab-card h3{font-size:22px;font-weight:600}.lab-card p{color:var(--dim);font-size:12px;line-height:1.55;margin-top:8px;font-weight:300}
  /* COLLECTIVE as program */
  .prog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
  .prog-step{border:1px solid var(--line);border-radius:0;padding:26px;background:linear-gradient(160deg,rgba(16,20,34,.5),rgba(7,10,18,.65));position:relative}
  .prog-step .num{font-family:var(--disp);font-weight:700;font-size:34px;color:var(--cold)}
  .prog-step h4{font-size:18px;font-weight:600;margin-top:12px}
  .prog-step p{color:var(--dim);font-size:12px;line-height:1.55;margin-top:8px;font-weight:300}
  .prog-arrow{position:absolute;top:50%;right:-11px;font-size:16px;color:var(--faint);z-index:3}
  /* PROJECT DETAIL */
  .proj-hero{height:60vh;min-height:400px;border:1px solid var(--line);border-radius:0;margin:90px 46px 0;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;background:linear-gradient(160deg,rgba(20,26,44,.6),rgba(7,10,18,.8));position:relative;overflow:hidden}
  .proj-hero h1{font-size:clamp(36px,6vw,84px);font-weight:700;line-height:.95}
  .proj-hero .sub{color:var(--dim);font-style:italic;font-size:16px;margin-top:8px}
  .meta-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:34px 46px;border-bottom:1px solid var(--line)}
  .meta-row .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .meta-row .v{font-size:13px;margin-top:8px;color:var(--ink);font-weight:300;line-height:1.4}
  /* THE PILL. One call to action treatment for the whole site: an indigo
     stroke at rest, filling indigo with white type on hover. Only the RESTING
     ink follows the ground it sits on. The stroke, the fill, the hover and the
     motion are identical everywhere, so a pill reads the same on the navy
     hero as it does on the white "who we are" band.

     The stroke was rgba(142,162,255,.5) and the resting ink was --cold, a pale
     blue on a half-transparent pale blue. Both are now the real accent. */
  .fakebtn,.wf-all{align-self:flex-start;border:1px solid var(--indigo);border-radius:100px;
    padding:12px 24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;min-height:44px;
    /* Named properties, not the shorthand. "transition:.35s" is transition:ALL,
       so the browser watches every animatable property on the button and any
       unrelated paint or layout change can restart the run. With the WebGL
       field saturating the GPU behind these sections, a hover could still be
       part way through its fade a second and a half after the pointer landed:
       captured mid-fade the fill reads as a pale periwinkle rather than the
       accent, and which button it caught varied run to run. Only these five
       properties ever change, and colour settles faster than the lift. */
    transition:background-color .2s cubic-bezier(.16,1,.3,1),
      border-color .2s cubic-bezier(.16,1,.3,1),
      color .2s cubic-bezier(.16,1,.3,1),
      box-shadow .3s cubic-bezier(.16,1,.3,1),
      transform .3s cubic-bezier(.16,1,.3,1)}

  /* The light grounds are the same list nav.js inverts the header on, so a
     pill flips exactly where the header flips instead of keeping its own idea
     of which sections are light. */
  section.light .fakebtn,.wf-body .fakebtn,.conv-section .fakebtn,
  .wwa-scroll .fakebtn,.whofor .fakebtn,.whofor-scroll .fakebtn,
  section.light .wf-all,.wf-body .wf-all,.conv-section .wf-all,
  .wwa-scroll .wf-all,.whofor .wf-all,.whofor-scroll .wf-all{color:var(--cream-ink)}

  /* The light selectors above are (0,2,1) and outrank a bare .fakebtn:hover at
     (0,2,0), so the old light pill kept its indigo text when the fill went
     indigo and hovered into an apparently empty outline. The hover is written
     at matching specificity for that reason, not for tidiness. */
  .fakebtn:hover,.wf-all:hover,
  section.light .fakebtn:hover,.wf-body .fakebtn:hover,.conv-section .fakebtn:hover,
  .wwa-scroll .fakebtn:hover,.whofor .fakebtn:hover,.whofor-scroll .fakebtn:hover,
  section.light .wf-all:hover,.wf-body .wf-all:hover,.conv-section .wf-all:hover,
  .wwa-scroll .wf-all:hover,.whofor .wf-all:hover,.whofor-scroll .wf-all:hover{
    background:var(--indigo);border-color:var(--indigo);color:#fff;
    box-shadow:0 10px 26px -10px rgba(76,99,255,.7);transform:translateY(-1px)}
  .fakebtn:focus-visible,.wf-all:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
  .footer{padding:50px 46px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);color:var(--faint);font-size:11px;letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:2}
  .footer a{color:var(--dim);cursor:pointer}
  .hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:150;font-size:10px;letter-spacing:.14em;color:var(--faint);background:rgba(11,14,22,.85);border:1px solid var(--line);border-radius:100px;padding:7px 16px;text-transform:uppercase}
  @media(max-width:1100px){
    .three[style]{grid-template-columns:repeat(2,1fr) !important}
  }
  @media(max-width:900px){
    .three,.team-grid,.cards4,.selwork,.prog,.lab-grid,.index-grid,.sector-inner,.meta-row{grid-template-columns:1fr}
    .three[style]{grid-template-columns:1fr !important}
    .chapter{grid-template-columns:1fr;gap:14px}
    section{padding:80px 22px;min-height:auto}
    html{scroll-snap-type:none}
    .hero .center{left:22px;right:22px}
    .hero h1{white-space:normal;font-size:clamp(36px,11vw,64px)}
    .hero .wm{left:22px}.hero .seeall{left:22px}.hero .rr{right:22px}
    .selwork-over{padding:80px 22px;min-height:auto}
    .brands-inner{padding:0 22px}
    .whofor-scroll{height:auto}
    .whofor{position:static;height:auto;min-height:auto;grid-template-columns:1fr}
    .wf-visual{height:40vh;border-right:none;border-bottom:1px solid #e4e7ec}
    .wf-visual{perspective:none}
    .wf-stage{transform:none!important}
    .wf-img{inset:0;transform:none}
    .wf-img.on{transform:none}
    .wf-body{padding:56px 22px}
    .spaces-band{padding:80px 22px;min-height:auto}
    .sb-stats{flex-direction:column;gap:18px;margin-top:38px}
    .sb-stat{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:14px;padding-right:0}
    .sb-scrim{background:linear-gradient(180deg,rgba(2,11,17,.9),rgba(2,11,17,.82) 55%,rgba(2,11,17,.95))}
    .collective-band{padding:80px 22px;min-height:auto}
    .cb-steps{flex-direction:column;gap:20px}
    .cb-step{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:16px;padding-right:0}
    .close-sec{height:auto;min-height:100vh;min-height:100svh}
    .close-foot{grid-template-columns:1fr;gap:24px;text-align:center;padding:0 22px 30px}
    .cf-brand .top,.cf-right{justify-content:center;align-items:center}
    .cf-brand{display:flex;justify-content:center}
    .cf-nav{justify-content:center}
    .close-actions{flex-direction:column}
    .conv-section{padding:80px 22px !important}
    .ccard.active{width:80vw}
    .ccard{padding:20px}
    .ccard .cdesc{display:none}
    .reel-sec{padding:80px 16px;min-height:auto}
    .reel-tag{display:none}
    /* reel → what we do: unstick and stack on mobile */
    .reelwwd{height:auto}
    .rw-stage{position:static;height:auto;display:block}
    .rw-reel{position:static;transform:none !important;opacity:1 !important;padding:80px 16px 0}
    .rw-wwd{position:static;opacity:1 !important;padding:clamp(56px,9vw,88px) 22px 80px;display:block}
    .wwd-head{position:static;margin-bottom:30px}
    .wwd-slides{height:auto}
    .wwd-slide{position:static;opacity:1;transform:none;margin-bottom:36px;pointer-events:auto}
    .wwd-method{position:static;text-align:left;margin-top:20px}
    /* who we are: unstick on mobile */
    .wwa-scroll{height:auto}
    .wwa-stage{position:static;height:auto;padding:80px 22px;display:block}
    .wwa-stage .eyebrow{position:static;margin-bottom:20px}
    .wwa-line{opacity:1}
    .wwa-foot{position:static;flex-direction:column;align-items:flex-start;gap:20px;margin-top:30px}
  }
/* ===== EMBEDDED ABOUT (scoped) ===== */
#aboutRoot{--bg:#05060c;--ink:#eef1f8;--dim:#eef1f8;--faint:#8b96ad;--line:#1b2231;--indigo:#4c63ff;--cold:#8ea2ff}
#aboutRoot *{box-sizing:border-box;margin:0;padding:0}
#aboutRoot{background:var(--bg);color:var(--ink);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased}
#aboutRoot .disp{font-weight:800;letter-spacing:-.02em}
#aboutRoot .mono{letter-spacing:.2em;text-transform:uppercase}
#aboutRoot .top{display:none !important}
#aboutRoot .badge{display:none !important}
#aboutRoot .top-hidden-orig{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px 40px;mix-blend-mode:difference}
#aboutRoot .top .wm{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.3em;font-weight:700;color:#fff}
#aboutRoot .top .orb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#dbe2ff,#4c63ff 52%,#0a1033)}
#aboutRoot .badge{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:110;font-size:10px;letter-spacing:.2em;color:var(--cold);text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:6px 14px;background:rgba(7,10,22,.7)}
#aboutRoot .hwrap{height:460vh;position:relative}
#aboutRoot .hsticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#aboutRoot /* the reality environment layer morphs across the whole run */
  .env{position:absolute;inset:0;z-index:0}
#aboutRoot .env .layer{position:absolute;inset:0;opacity:0;transition:opacity .1s linear}
#aboutRoot .env .physical{background:radial-gradient(70% 80% at 38% 42%,#14140f,#030303 76%)}
#aboutRoot .env .digital{background:radial-gradient(60% 70% at 50% 44%,#050822,#030409 78%)}
#aboutRoot .env .digital canvas{position:absolute;inset:0}
#aboutRoot .env .virtual{background:radial-gradient(66% 76% at 62% 48%,#100b1e,#030308 78%)}
#aboutRoot .env .grid{display:none}
#aboutRoot .htrack{display:flex;height:100vh;height:100svh;position:relative;z-index:2;will-change:transform}
#aboutRoot .panel{flex:none;width:100vw;height:100vh;height:100svh;display:flex;align-items:center;padding:0 7vw;position:relative}
#aboutRoot .realtag{position:absolute;top:16vh;left:7vw;font-size:11px;letter-spacing:.24em;color:var(--cold);text-transform:uppercase;display:flex;align-items:center;gap:10px}
#aboutRoot .realtag::before{content:"";width:20px;height:1px;background:var(--cold)}
#aboutRoot /* intro */
  .p-intro{justify-content:center;text-align:center;flex-direction:column}
#aboutRoot .p-intro .bigwm{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
#aboutRoot .p-intro .bigorb{width:clamp(52px,6.2vw,104px);height:clamp(52px,6.2vw,104px);border-radius:0;background:var(--markup) center/contain no-repeat;flex:none}
#aboutRoot .p-intro h1{font-family:var(--wordmark);font-weight:400;font-size:clamp(30px,5.4vw,92px);letter-spacing:.16em}
#aboutRoot .p-intro .sub{margin-top:26px;font-size:13px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
#aboutRoot .p-intro .cue{position:absolute;bottom:5vh;font-size:10px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
#aboutRoot /* statement / physical */
  .p-statement .st{max-width:1000px}
#aboutRoot .p-statement .a{font-size:clamp(30px,4.4vw,72px);font-weight:800;letter-spacing:-.02em;line-height:1.08}
#aboutRoot .p-statement .a em{font-style:italic;color:var(--cold)}
#aboutRoot .p-statement .b{font-size:clamp(18px,2vw,26px);color:var(--dim);margin-top:28px;font-weight:300;max-width:600px}
#aboutRoot /* team / digital */
  .p-team{flex-direction:column;justify-content:center}
#aboutRoot .p-team .thead,#aboutRoot .p-virtual .thead{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin-bottom:32px}
#aboutRoot .p-team .thead h2,#aboutRoot .p-virtual .thead h2{font-size:clamp(30px,4vw,58px);font-weight:800;letter-spacing:-.01em}
#aboutRoot .p-team .thead p,#aboutRoot .p-virtual .thead p{max-width:300px;color:var(--dim);font-size:13px;font-weight:300;text-align:right}
#aboutRoot .team-row{display:flex;gap:14px;width:100%}
#aboutRoot .member{flex:1;aspect-ratio:4/5;position:relative;overflow:hidden;border:1px solid rgba(142,162,255,.2);cursor:pointer;background:linear-gradient(140deg,#1e2b6b,#0a0e20)}
#aboutRoot .member img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15);transition:.7s}
#aboutRoot .member:hover img{transform:scale(1.05);filter:none}
#aboutRoot .member .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(220,228,255,.45);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
#aboutRoot .member .info{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(5,6,15,.9),transparent);z-index:2}
#aboutRoot .member .nm{font-size:15px;font-weight:700}
#aboutRoot .member .rl{font-size:10px;letter-spacing:.1em;color:var(--cold);text-transform:uppercase;margin-top:3px}
#aboutRoot /* clients / virtual */
  .p-clients{flex-direction:column;justify-content:center}
#aboutRoot .p-clients .chead{display:flex;flex-direction:column;gap:18px;align-items:flex-start;width:100%;margin-bottom:6vh}
#aboutRoot .p-clients .chead h2{font-size:clamp(30px,4vw,64px);font-weight:800}
#aboutRoot .p-clients .chead p{max-width:46ch;font-size:clamp(14px,1.15vw,17px);letter-spacing:0;color:var(--dim);text-transform:none;text-align:left;line-height:1.55;text-wrap:pretty}
#aboutRoot .p-clients .chead h2{letter-spacing:-.025em}
#aboutRoot .cflow-logos .cflow-track{gap:clamp(26px,3vw,54px);align-items:center}
#aboutRoot .cflow-logos .cflow-track img{width:clamp(104px,10.5vw,158px);height:clamp(34px,3.5vw,53px);
  object-fit:contain;max-width:none;flex:none;opacity:.62;transition:opacity .4s ease,transform .4s ease}
#aboutRoot .cflow-logos .cflow-track img:hover{opacity:1;transform:translateY(-2px)}
#aboutRoot .cflow-logos .cflow-row{padding:clamp(14px,1.8vh,26px) 0}
#aboutRoot .cflow-logos .cflow-row[data-dir="l"] .cflow-track{animation-duration:58s}
#aboutRoot .cflow-logos .cflow-row[data-dir="r"] .cflow-track{animation-duration:66s}
#aboutRoot .cflow{width:100%;overflow:hidden;margin-top:2vh}
#aboutRoot .cflow-row{overflow:hidden;white-space:nowrap;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#aboutRoot .cflow-track{display:inline-flex;align-items:center;gap:0;will-change:transform}
#aboutRoot .cflow-row[data-dir="l"] .cflow-track{animation:cflowL 42s linear infinite}
#aboutRoot .cflow-row[data-dir="r"] .cflow-track{animation:cflowR 52s linear infinite}
  @keyframes cflowL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes cflowR{from{transform:translateX(-50%)}to{transform:translateX(0)}}#aboutRoot .cflow-track span{font-size:clamp(30px,4.6vw,72px);font-weight:800;letter-spacing:-.02em;color:rgba(238,241,248,.22);transition:color .4s;padding:0 6px;cursor:default}
#aboutRoot .cflow-track span:hover{color:#fff}
#aboutRoot .cflow-track .dot{color:var(--cold);opacity:.5;font-weight:400;padding:0 10px}
#aboutRoot .cflow-row:hover .cflow-track{animation-play-state:paused}
#aboutRoot .hrail{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:16px;align-items:center}
#aboutRoot .hrail .seg{display:flex;flex-direction:column;align-items:center;gap:6px}
#aboutRoot .hrail .bar{width:60px;height:2px;background:rgba(255,255,255,.16)}
#aboutRoot .hrail .bar i{display:block;height:100%;width:0;background:var(--cold);transition:width .2s}
#aboutRoot .hrail .lbl{font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
#aboutRoot /* vertical after release */
  .vsec{padding:140px 56px}
#aboutRoot .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--cold);text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}
#aboutRoot .eyebrow::before{content:"";width:22px;height:1px;background:var(--cold)}
#aboutRoot .rv{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.16,1,.3,1)}
#aboutRoot .rv.in{opacity:1;transform:none}
#aboutRoot .rv.d1{transition-delay:.1s}
#aboutRoot .rv.d2{transition-delay:.2s}
#aboutRoot .rv.d3{transition-delay:.3s}
#aboutRoot .recognition{background:#05060f}
#aboutRoot .recognition h2{font-size:clamp(28px,3.6vw,54px);font-weight:800;margin-top:16px}
#aboutRoot .rec-row{display:grid;grid-template-columns:150px 320px 1fr;gap:30px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
#aboutRoot .rec-row .rn{font-size:12px;color:var(--faint);letter-spacing:.14em}
#aboutRoot .rec-row .rt{font-size:20px;font-weight:600}
#aboutRoot .rec-row .rd{color:var(--dim);font-size:14px;font-weight:300}
#aboutRoot .rec-list{margin-top:44px;max-width:900px}
#aboutRoot .expertise{background:#070a16;position:relative;overflow:hidden}
#aboutRoot .expertise .ehead{font-size:clamp(40px,7vw,120px);font-weight:800;letter-spacing:-.03em;line-height:.92}
#aboutRoot .ecards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
#aboutRoot /* ===== stack -> coverflow ===== */
  .expStage{margin-top:64px;position:relative;height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#aboutRoot .expHint{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);transition:opacity .5s;z-index:5}
#aboutRoot .expStage.open .expHint{opacity:0;pointer-events:none}
#aboutRoot .flow{position:relative;width:100%;height:440px;transform-style:preserve-3d;perspective:1800px;cursor:pointer}
#aboutRoot .fcard{position:absolute;top:50%;left:50%;width:min(340px,80vw);height:440px;
    transform-origin:center center;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s ease,filter .8s ease;will-change:transform,opacity}
#aboutRoot .fc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,1,.3,1)}
#aboutRoot .fcard.flipped .fc-inner{transform:rotateY(180deg)}
#aboutRoot .fc-front, #aboutRoot .fc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;
    background:
      linear-gradient(160deg,#0c1020,#070a14 72%);
    padding:7px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(120,140,255,.18)}
#aboutRoot .fc-back{transform:rotateY(180deg)}
#aboutRoot /* ornate frame */
  .gc-frame{position:relative;height:100%;border-radius:11px;padding:14px 14px 12px;display:flex;flex-direction:column;
    border:1px solid rgba(142,162,255,.30);
    background:
      linear-gradient(160deg,color-mix(in srgb,var(--g1) 55%,#080b16),#070a14 68%);
    overflow:hidden}
#aboutRoot .gc-frame::before{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;
    background:linear-gradient(135deg,rgba(180,195,255,.14),transparent 30%,transparent 70%,rgba(180,195,255,.10));mix-blend-mode:screen}
#aboutRoot .gc-corner{position:absolute;width:14px;height:14px;border:2px solid rgba(180,195,255,.7);z-index:3}
#aboutRoot .gc-corner.tl{top:7px;left:7px;border-right:0;border-bottom:0;border-top-left-radius:5px}
#aboutRoot .gc-corner.tr{top:7px;right:7px;border-left:0;border-bottom:0;border-top-right-radius:5px}
#aboutRoot .gc-corner.bl{bottom:7px;left:7px;border-right:0;border-top:0;border-bottom-left-radius:5px}
#aboutRoot .gc-corner.br{bottom:7px;right:7px;border-left:0;border-top:0;border-bottom-right-radius:5px}
#aboutRoot .gc-head{display:flex;align-items:center;gap:8px;position:relative;z-index:2}
#aboutRoot .gc-emblem{font-size:16px;color:#cdd7ff;filter:drop-shadow(0 0 6px rgba(120,140,255,.6))}
#aboutRoot .gc-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff;flex:1;line-height:1.05}
#aboutRoot .gc-rar{font-size:10px;letter-spacing:.14em;color:#0a0e1c;background:linear-gradient(90deg,#aebbff,#8ea2ff);padding:4px 8px;border-radius:100px;font-weight:600}
#aboutRoot .gc-art{position:relative;margin-top:11px;height:150px;border-radius:8px;overflow:hidden;flex:none;
    background:radial-gradient(120% 100% at 30% 15%,color-mix(in srgb,var(--g1) 90%,#fff 6%),var(--g2) 60%,#0a0e1c);
    border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center}
#aboutRoot .gc-art::after{content:"";position:absolute;inset:0;background:
      radial-gradient(60% 50% at 78% 12%,rgba(255,255,255,.22),transparent 55%),
      repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
#aboutRoot .gc-bignum{position:relative;z-index:2;font-size:72px;font-weight:800;color:rgba(255,255,255,.92);text-shadow:0 6px 30px rgba(0,0,0,.5)}
#aboutRoot .gc-type{position:absolute;left:12px;bottom:10px;z-index:2;font-size:10px;letter-spacing:.24em;color:#fff;background:rgba(8,10,20,.55);border:1px solid rgba(255,255,255,.25);padding:5px 9px;border-radius:100px;backdrop-filter:blur(4px)}
#aboutRoot .gc-stats{list-style:none;margin-top:11px;flex:1;display:flex;flex-direction:column;gap:6px}
#aboutRoot .gc-stats li{display:grid;grid-template-columns:1fr 46px 22px;align-items:center;gap:8px}
#aboutRoot .gc-stats .s-name{font-size:11px;color:#c1cae0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aboutRoot .gc-stats .s-bar{height:4px;border-radius:100px;background:rgba(142,162,255,.18);overflow:hidden}
#aboutRoot .gc-stats .s-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#4c63ff,#aebbff);box-shadow:0 0 8px rgba(120,140,255,.6)}
#aboutRoot .gc-stats .s-val{font-size:10px;color:#8ea2ff;text-align:right}
#aboutRoot .gc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:9px;border-top:1px solid rgba(142,162,255,.18);
    font-size:10px;letter-spacing:.16em;color:var(--faint)}
#aboutRoot .gc-foot .gc-flip{color:#8ea2ff}
#aboutRoot /* back face */
  .gc-desc{margin-top:14px;font-size:13px;line-height:1.65;color:#c7cede;font-weight:300;position:relative;z-index:2}
#aboutRoot .gc-inds-label{margin-top:16px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
#aboutRoot .gc-inds{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap}
#aboutRoot .gc-inds span{font-size:10px;color:#fff;border:1px solid rgba(180,195,255,.35);border-radius:100px;padding:6px 11px;background:rgba(180,195,255,.06)}
#aboutRoot .gc-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    color:#0a0e1c;background:linear-gradient(90deg,#aebbff,#8ea2ff);border-radius:9px;padding:13px;text-decoration:none;transition:.3s;
    box-shadow:0 8px 24px -8px rgba(120,140,255,.7)}
#aboutRoot .gc-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
#aboutRoot /* legendary card gets a warmer/gold frame accent */
  .fcard[data-i="2"] .gc-frame{border-color:rgba(255,190,150,.4)}
#aboutRoot .fcard[data-i="2"] .gc-corner{border-color:rgba(255,205,160,.85)}
#aboutRoot .fcard[data-i="2"] .gc-rar{background:linear-gradient(90deg,#ffcf9a,#ff9d6e);color:#2a1408}
#aboutRoot .fcard[data-i="2"] .gc-stats .s-bar i{background:linear-gradient(90deg,#ff9d6e,#ffcf9a);box-shadow:0 0 8px rgba(255,160,110,.6)}
#aboutRoot .fcard[data-i="2"] .gc-cta{background:linear-gradient(90deg,#ffcf9a,#ff9d6e);box-shadow:0 8px 24px -8px rgba(255,160,110,.7)}
#aboutRoot .fcard[data-i="2"] .gc-emblem, #aboutRoot .fcard[data-i="2"] .gc-foot .gc-flip{color:#ffbe96}
#aboutRoot /* STACKED (initial) state: cards piled center */
  .flow:not(.fanned) .fcard{transform:translate(-50%,-50%) translateY(calc(var(--d)*10px)) scale(calc(1 - var(--d)*0.04)) rotate(calc(var(--d)*1.2deg));opacity:calc(1 - var(--d)*0.16)}
#aboutRoot .flow:not(.fanned) .fcard[style*="--d:0"]{}
#aboutRoot /* FANNED coverflow state handled via inline transforms from JS */
  .flow-ui{display:flex;align-items:center;gap:22px;margin-top:26px;opacity:0;transform:translateY(10px);transition:.6s;pointer-events:none}
#aboutRoot .expStage.open .flow-ui{opacity:1;transform:none;pointer-events:auto}
#aboutRoot .flow-dots{display:flex;gap:9px}
#aboutRoot .flow-dots i{width:8px;height:8px;border-radius:50%;background:rgba(142,162,255,.28);transition:.3s;cursor:pointer}
#aboutRoot .flow-dots i.on{background:var(--cold);transform:scale(1.25)}
#aboutRoot .flow-arrow{background:none;border:1px solid rgba(142,162,255,.4);color:var(--cold);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;line-height:1}
#aboutRoot .flow-arrow:hover{background:var(--cold);color:#05060f}
#aboutRoot .ecard{border:1px solid var(--line);padding:28px;min-height:360px;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(20,26,44,.4),rgba(7,10,18,.5));transition:.3s}
#aboutRoot .ecard:hover{border-color:rgba(142,162,255,.5)}
#aboutRoot .ecard h3{font-size:19px;font-weight:800}
#aboutRoot .ecard .mk{font-size:11px;color:var(--cold);letter-spacing:.14em;margin-top:4px}
#aboutRoot .ecard ul{list-style:none;margin-top:22px;flex:1}
#aboutRoot .ecard li{font-size:13px;color:var(--dim);padding:9px 0;border-bottom:1px solid rgba(27,34,49,.6)}
#aboutRoot .close{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(60% 60% at 50% 45%,#050822,#030409 74%)}
#aboutRoot .close h2{font-size:clamp(36px,6vw,92px);font-weight:800;letter-spacing:-.03em;line-height:.98}
#aboutRoot .close h2 b{color:var(--cold)}
#aboutRoot .close .sub{color:var(--dim);font-size:16px;font-weight:300;margin-top:20px}
#aboutRoot .close .cta{margin-top:40px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#05060f;background:#fff;border-radius:100px;padding:16px 32px;cursor:pointer;font-weight:600;transition:.3s}
#aboutRoot .close .cta:hover{background:var(--indigo);color:#fff}
/* The CTA above is the pre-system rule and no longer matches: the button is
   .il-btn il-btn--primary il-btn--lg now. Everything else it set is carried by
   the pill, but the 40px that separated it from "let's build yours" was
   spacing, not styling, so it did not come across and the button sat flush
   against the line. Same story for .collhead's 26px below. */
#aboutRoot .close .il-btn{margin-top:40px}
  @media(max-width:860px){#aboutRoot .hwrap{height:auto}
#aboutRoot .hsticky{position:static;height:auto}
#aboutRoot .htrack{flex-direction:column;transform:none!important}
#aboutRoot .panel{width:100%;height:auto;min-height:100vh;min-height:100svh;padding:100px 22px}
#aboutRoot .team-row{flex-direction:column}
#aboutRoot .ecards{grid-template-columns:1fr}
#aboutRoot .hrail{display:none}
#aboutRoot .vsec{padding:90px 22px}
#aboutRoot .rec-row{grid-template-columns:1fr;gap:6px}
#aboutRoot .env .layer{opacity:1!important}
#aboutRoot .env .physical, #aboutRoot .env .virtual{display:none}
}#aboutRoot /* Sara lead panel (final horizontal) */
  .p-tlead{padding:0;align-items:flex-end;justify-content:flex-start;position:relative}
#aboutRoot .p-tlead .tl-scrim{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(3,4,9,.6) 100%),linear-gradient(0deg,rgba(3,4,9,.9) 2%,transparent 40%);z-index:1}
#aboutRoot .p-tlead .realtag{position:absolute;top:16vh;left:7vw;z-index:3}
#aboutRoot .p-tlead .tl-word{position:absolute;top:8vh;right:6vw;font-size:clamp(56px,11vw,200px);color:#fff;opacity:.08;z-index:2;letter-spacing:.04em;line-height:1}
#aboutRoot .p-tlead .tl-name{position:relative;z-index:3;color:#fff;font-size:clamp(40px,6.5vw,110px);letter-spacing:-.02em;line-height:.9;margin:0 0 12vh 7vw;max-width:70vw;text-shadow:0 8px 40px rgba(0,0,0,.4)}
#aboutRoot .p-tlead .tl-role{position:absolute;left:7vw;bottom:8vh;z-index:3;color:#fff;opacity:.85;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
#aboutRoot .p-tlead .tl-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:5vh;z-index:3;color:#fff;opacity:.6;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#aboutRoot /* ===== cinematic team (vertical) ===== */
  .teamSec{height:800vh;position:relative}
#aboutRoot .teamSticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05060c}
#aboutRoot .timgs{position:absolute;inset:0;z-index:1}
#aboutRoot .pimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1);z-index:1;clip-path:inset(0 0 0 100%)}
#aboutRoot .pimg.on{opacity:1;transform:scale(1);z-index:2;clip-path:inset(0 0 0 0%)}
#aboutRoot .pimg.prev{opacity:1;z-index:1;clip-path:inset(0 0 0 0%)}
#aboutRoot .pimg.first{clip-path:inset(0 0 0 0%)!important}
#aboutRoot .pimg.ph{display:flex;align-items:center;justify-content:center;font-size:16px;letter-spacing:.24em;text-transform:uppercase;font-family:'Outfit',sans-serif;color:rgba(255,255,255,.5)}
#aboutRoot .tscrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(5,6,12,.5) 100%),linear-gradient(0deg,rgba(5,6,12,.85) 2%,transparent 34%),linear-gradient(180deg,rgba(5,6,12,.5) 0%,transparent 20%)}
#aboutRoot .tbridge-top{position:absolute;top:0;left:0;right:0;height:22vh;z-index:4;pointer-events:none;background:linear-gradient(180deg,#05060c,transparent)}
#aboutRoot .tbridge-bot{position:absolute;bottom:0;left:0;right:0;height:22vh;z-index:4;pointer-events:none;background:linear-gradient(0deg,#070a16,transparent)}
#aboutRoot .tcompose{position:absolute;inset:0;z-index:12;pointer-events:none}
#aboutRoot .tcline{position:absolute;opacity:0;transform:translateY(20px);transition:.8s cubic-bezier(.16,1,.3,1)}
#aboutRoot .tcompose.on .tcline{opacity:1;transform:none}
#aboutRoot .tcompose.on .tcline.d1{transition-delay:.1s}
#aboutRoot .tcompose.on .tcline.d2{transition-delay:.2s}
#aboutRoot .tcompose.on .tcline.d3{transition-delay:.3s}
#aboutRoot .tword{position:absolute;top:8vh;right:5vw;font-size:clamp(56px,11vw,200px);font-weight:800;letter-spacing:.04em;color:#fff;opacity:.08;line-height:1}
#aboutRoot .tc-count{position:absolute;top:11vh;left:5vw;font-size:11px;color:#fff;font-family:'Outfit',sans-serif;letter-spacing:.2em;opacity:.7}
#aboutRoot .tc-ticks{position:absolute;top:16vh;left:5vw;font-size:10px;color:#fff;font-family:'Outfit',sans-serif;letter-spacing:.3em;opacity:.5}
#aboutRoot .tc-name{position:absolute;left:5vw;bottom:14vh;font-size:clamp(36px,6vw,104px);font-weight:800;letter-spacing:-.02em;line-height:.9;color:#fff;max-width:72vw;text-shadow:0 8px 40px rgba(0,0,0,.4)}
#aboutRoot .tc-role{position:absolute;left:5vw;bottom:9vh;font-size:12px;letter-spacing:.2em;color:#fff;text-transform:uppercase;font-family:'Outfit',sans-serif;opacity:.85;max-width:70vw}
#aboutRoot .tc-init{position:absolute;right:5vw;bottom:12vh;font-size:clamp(44px,7vw,130px);font-weight:800;color:#fff;opacity:.12;letter-spacing:.02em}
#aboutRoot .tc-desc{position:absolute;right:5vw;top:30vh;max-width:250px;text-align:right;font-size:13px;color:#fff;font-weight:300;line-height:1.7;opacity:.8;text-shadow:0 2px 16px rgba(0,0,0,.5)}
#aboutRoot .tc-tags{position:absolute;right:5vw;top:46vh;max-width:270px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
#aboutRoot .tc-tags span{font-size:10px;letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:6px 11px;background:rgba(255,255,255,.04)}
#aboutRoot .thead2{position:absolute;top:4vh;left:44px;z-index:16}
#aboutRoot .thead2 .eyebrow{color:var(--cold)}
#aboutRoot .tdots{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:16;display:flex;gap:9px}
#aboutRoot .tdots i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(255,255,255,.4);transition:.3s}
#aboutRoot .tdots i.on{background:#fff;border-color:#fff}
#aboutRoot /* ===== collective network (vertical, #aboutRoot full height) ===== */
  .collSec{height:300vh;position:relative}
#aboutRoot .collSticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(60% 70% at 50% 50%,#050822,#070a16 76%)}
#aboutRoot #collnet{position:absolute;inset:0;z-index:1;display:block}
#aboutRoot .collhead{position:absolute;top:14vh;left:56px;z-index:20;max-width:440px;pointer-events:none}
#aboutRoot .collhead h2{font-size:clamp(30px,4vw,62px);font-weight:800;letter-spacing:-.02em;margin-top:16px;line-height:1}
#aboutRoot .collhead p{color:var(--dim);font-size:14px;line-height:1.7;font-weight:300;margin-top:18px;max-width:360px}
#aboutRoot .collhead .cta{margin-top:26px;display:inline-flex;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cold);border:1px solid rgba(142,162,255,.4);border-radius:100px;padding:12px 22px;cursor:pointer;pointer-events:auto;transition:.3s}
#aboutRoot .collhead .cta:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
#aboutRoot .collhead .il-btn{margin-top:26px}
#aboutRoot .collcount{position:absolute;bottom:9vh;left:56px;z-index:20;font-size:12px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
#aboutRoot .collcount b{color:var(--cold);font-size:22px;font-family:'Outfit',sans-serif;font-weight:500}
#aboutRoot .colllegend{position:absolute;bottom:9vh;right:56px;z-index:20;font-size:10px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase;text-align:right;line-height:2;pointer-events:none}
  @media(max-width:860px){#aboutRoot .teamSec{height:auto}
#aboutRoot .teamSticky{position:static;height:auto}
#aboutRoot .pimg{position:relative;opacity:1;height:76vh;transform:none}
#aboutRoot .tc-name{max-width:90vw}
#aboutRoot .collhead{left:22px;right:22px}
#aboutRoot .collcount{left:22px}
#aboutRoot .colllegend{display:none}
}
/* ===== EMBEDDED WORK GRID (scoped) ===== */
#workGrid{--bg:#05060c;--ink:#eef1f8;--dim:#eef1f8;--faint:#8b96ad;--line:#1b2231;--cold:#8ea2ff;--indigo:#4c63ff}
#workGrid *{box-sizing:border-box;margin:0;padding:0}
#workGrid{background:var(--bg);color:var(--ink);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased}
#workGrid .disp{font-weight:800;letter-spacing:-.02em}
#workGrid .mono{font-family:'Outfit',sans-serif;letter-spacing:.14em}
#workGrid .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--cold);text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}
#workGrid .eyebrow::before{content:"";width:22px;height:1px;background:var(--cold)}
#workGrid .wrap{padding:110px 4vw 80px}
#workGrid .filterbar{margin-top:10px;padding:0;border:0;background:none}
#workGrid .frow-head{display:none}
#workGrid .filterline{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.06)}
#workGrid .disc-row{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline;padding:0;flex:1}
#workGrid .tf{background:none;border:0;cursor:pointer;color:var(--faint);
    font-family:'Outfit',sans-serif;font-size:16px;font-weight:400;letter-spacing:-.005em;padding:0;position:relative;
    transition:color .35s cubic-bezier(.16,1,.3,1)}
#workGrid .tf:hover{color:var(--ink)}
#workGrid .tf.on{color:#fff;font-weight:500}
#workGrid .tf.on::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--cold);transform-origin:left;animation:fund .4s cubic-bezier(.16,1,.3,1)}
  @keyframes fund{from{transform:scaleX(0)}to{transform:scaleX(1)}}#workGrid /* sector dropdown */
  .secdrop{position:relative;flex:none}
#workGrid .secdrop-btn{display:flex;align-items:center;gap:12px;background:none;border:1px solid var(--line);border-radius:100px;
    color:var(--dim);font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    padding:11px 18px;cursor:pointer;transition:.28s;white-space:nowrap}
#workGrid .secdrop-btn:hover{color:#fff;border-color:rgba(142,162,255,.4)}
#workGrid .secdrop-btn .sd-k{color:var(--faint)}
#workGrid .secdrop-btn .sd-v{color:#fff}
#workGrid .secdrop-btn .sd-caret{font-size:10px;transition:transform .3s;opacity:.7}
#workGrid .secdrop.open .secdrop-btn{border-color:rgba(142,162,255,.5);color:#fff}
#workGrid .secdrop.open .sd-caret{transform:rotate(180deg)}
#workGrid .secdrop-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:50;min-width:210px;
    background:rgba(10,13,26,.96);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;
    padding:8px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
    opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.3s cubic-bezier(.16,1,.3,1)}
#workGrid .secdrop.open .secdrop-menu{opacity:1;transform:none;pointer-events:auto}
#workGrid .secdrop-menu .sf{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;background:none;border:0;cursor:pointer;
    color:var(--dim);font-family:'Outfit',sans-serif;font-size:14px;font-weight:400;text-align:left;
    padding:11px 14px;border-radius:9px;transition:.2s}
#workGrid .secdrop-menu .sf:hover{background:rgba(142,162,255,.09);color:#fff}
#workGrid .secdrop-menu .sf.on{color:#fff;font-weight:500}
#workGrid .secdrop-menu .sf.on::after{content:"●";font-size:10px;color:var(--cold)}
#workGrid .hero-quote{padding:9vh 2vw 8vh;max-width:1100px}
#workGrid .hero-quote .q{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4.6vw,64px);line-height:1.08;letter-spacing:-.01em;
    background:linear-gradient(100deg,#eef1f8 0%,#8ea2ff 22%,#4c63ff 40%,#c7cede 58%,#eef1f8 78%,#8ea2ff 100%);
    background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:qsheen 9s ease-in-out infinite}
  @keyframes qsheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}#workGrid .hero-quote .qby{margin-top:26px;color:var(--dim);font-size:14px;letter-spacing:.02em}
#workGrid .count{font-size:11px;color:var(--faint);letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px}
#workGrid .grid{columns:3;column-gap:22px}
  @media(max-width:1000px){#workGrid .grid{columns:2}
}
  @media(max-width:640px){#workGrid .grid{columns:1}
}#workGrid .tile{display:block;break-inside:avoid;margin-bottom:22px;text-decoration:none;color:inherit;
    transform-origin:center;will-change:transform,opacity;backface-visibility:hidden;position:relative}
#workGrid .tile::before{content:"";position:absolute;top:0;left:8px;right:8px;height:var(--h);border-radius:14px;z-index:-1;
    background:linear-gradient(135deg,var(--g1),var(--g2));opacity:0;filter:blur(26px);transition:opacity .5s ease}
#workGrid .tile:hover::before{opacity:.5}
#workGrid /* card-deal: default resting state */
  .tile.dealt{transition:transform .55s cubic-bezier(.18,.9,.28,1.2),opacity .45s ease;transform:none;opacity:1}
#workGrid /* incoming card: flicked in from lower-right, #workGrid rotated, #workGrid like thrown from a hand */
  .tile.deal-in{transition:none;opacity:0;transform:translate(60vw,30vh) rotate(28deg) scale(.7)}
#workGrid /* discarded card: thrown off to the left with spin */
  .tile.hide{transition:transform .5s cubic-bezier(.5,0,.9,.5),opacity .4s ease;opacity:0;transform:translate(-55vw,18vh) rotate(-32deg) scale(.7);pointer-events:none;position:absolute;visibility:hidden}
#workGrid .tile.throw{transition:transform .5s cubic-bezier(.5,0,.9,.5),opacity .45s ease;opacity:0;transform:translate(-40vw,14vh) rotate(-24deg) scale(.72);pointer-events:none}
#workGrid .t-media{height:var(--h);border-radius:12px;overflow:hidden;position:relative;
    background:radial-gradient(120% 100% at 30% 15%,var(--g1),var(--g2) 60%,#0a0e1c);border:1px solid rgba(255,255,255,.07);
    transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .45s ease;
    box-shadow:0 20px 50px -30px rgba(0,0,0,.7)}
#workGrid .t-media::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 10%,rgba(255,255,255,.16),transparent 55%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 10px)}
#workGrid .t-media::before{content:"";position:absolute;inset:0;border-radius:12px;
    background:radial-gradient(80% 60% at 50% 50%,color-mix(in srgb,var(--g1) 40%,transparent),transparent 70%);opacity:0;transition:opacity .45s ease}
#workGrid .t-idx{position:absolute;top:14px;left:15px;z-index:2;font-size:11px;color:#fff;opacity:.75;letter-spacing:.2em}
#workGrid .tile:hover .t-media{transform:translateY(-8px);border-color:color-mix(in srgb,var(--g2) 70%,#fff 20%);
    box-shadow:0 40px 80px -30px color-mix(in srgb,var(--g2) 70%,#000),0 0 40px -8px color-mix(in srgb,var(--g1) 60%,transparent)}
#workGrid .tile:hover .t-media::before{opacity:1}
#workGrid .t-meta{margin-top:14px}
#workGrid .t-meta h3{font-size:19px;font-weight:700}
#workGrid .t-meta span{font-size:10px;color:var(--cold);letter-spacing:.14em;text-transform:uppercase}
#workGrid .empty{color:var(--faint);font-size:14px;padding:40px 0;display:none}
  /* ===== SECTORS — per-sector pitch deck ===== */
  .sector-sec{min-height:auto;display:block;padding-top:104px;padding-bottom:104px}
  .deck{max-width:1240px;margin:0 auto;width:100%}
  .deck-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end}
  .sector-sec:nth-of-type(even) .deck-top{direction:rtl}
  .sector-sec:nth-of-type(even) .deck-top>*{direction:ltr}
  .deck-head .snum{font-size:11px;letter-spacing:.24em;color:var(--cold);font-weight:600}
  .deck-head h2{font-size:clamp(30px,3.6vw,54px);font-weight:800;letter-spacing:-.025em;margin-top:14px;line-height:1.02}
  .deck-lede{margin-top:18px;font-size:17px;line-height:1.6;font-weight:300;color:var(--dim);max-width:460px}
  .deck-shot{height:270px;background-size:cover;background-position:center;border:1px solid var(--line)}
  .dk-lbl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--cold);font-weight:600;
    display:flex;align-items:center;gap:10px}
  .dk-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
  .deck-body{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:44px;margin-top:64px;align-items:start}
  .dk p{margin-top:14px;font-size:14px;line-height:1.7;font-weight:300;color:var(--dim)}
  .dk-offer ul{list-style:none;margin-top:14px;display:flex;flex-direction:column}
  .dk-offer li{font-size:13px;color:var(--ink);font-weight:400;padding:9px 0;border-bottom:1px solid var(--line)}
  .dk-offer li:first-child{border-top:1px solid var(--line)}
  .deck-run{margin-top:58px}
  .run-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:20px}
  .step{border-top:2px solid var(--indigo);padding-top:14px}
  .step .stn{font-size:10px;letter-spacing:.2em;color:var(--cold)}
  .step b{display:block;margin-top:7px;font-size:15px;font-weight:700}
  .step p{margin-top:7px;font-size:13px;line-height:1.6;font-weight:300;color:var(--dim)}
  .run-need{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
  .rn-lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-right:4px}
  .chip{font-size:12px;border:1px solid var(--line);border-radius:100px;padding:7px 14px;color:var(--ink)}
  .deck-cases{margin-top:58px}
  .case-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
  .case{border:1px solid var(--line);padding:16px 20px;min-width:210px;cursor:pointer;
    transition:.35s cubic-bezier(.16,1,.3,1);display:block;text-decoration:none}
  .case:hover{border-color:var(--cold);transform:translateY(-2px)}
  .cs-name{display:block;font-size:16px;font-weight:700;color:var(--ink)}
  .cs-meta{display:block;margin-top:5px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cold)}
  .case-all{display:flex;align-items:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);min-width:auto}
  .deck-cta{margin-top:52px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:26px}
  .cta-note{font-size:12px;color:var(--dim);font-weight:300}
  /* light-section overrides, matching how the rest of the site themes */
  section.light .deck-head .snum,section.light .dk-lbl,section.light .step .stn,
  section.light .cs-meta{color:var(--indigo)}
  section.light .deck-lede,section.light .dk p,section.light .step p,
  section.light .cta-note,section.light .rn-lbl,section.light .case-all{color:var(--cream-dim)}
  section.light .dk-offer li,section.light .chip,section.light .cs-name{color:var(--cream-ink)}
  section.light .dk-lbl::after,section.light .dk-offer li,section.light .dk-offer li:first-child,
  section.light .chip,section.light .case,section.light .deck-cta,section.light .deck-shot{border-color:var(--cream-line)}
  section.light .case:hover{border-color:var(--indigo)}
  @media(max-width:980px){
    .deck-top{grid-template-columns:1fr;gap:28px}
    .sector-sec:nth-of-type(even) .deck-top{direction:ltr}
    .deck-shot{height:200px}
    .deck-body{grid-template-columns:1fr;gap:34px;margin-top:40px}
    .run-steps{grid-template-columns:1fr;gap:20px}
    .sector-sec{padding-top:64px;padding-bottom:64px}
  }
  /* ===== SECTORS — index + per-sector pages ===== */
  .sx-back{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cold);margin-bottom:34px;cursor:pointer}
  .sx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .sx-card{display:block;border:1px solid var(--line);cursor:pointer;text-decoration:none;
    transition:.4s cubic-bezier(.16,1,.3,1)}
  .sx-card:hover{border-color:var(--cold);transform:translateY(-3px)}
  .sx-shot{height:170px;background-size:cover;background-position:center}
  .sx-meta{padding:20px}
  .sx-meta h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:8px;color:var(--ink)}
  .sx-meta p{margin-top:10px;font-size:13px;line-height:1.6;font-weight:300;color:var(--dim)}
  .sx-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
  .sx-tags span,.off-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  .sx-tags span{border:1px solid var(--line);border-radius:100px;padding:5px 11px;color:var(--dim)}
  .t-phy{color:#e0a86a}.t-dig{color:var(--cold)}.t-vir{color:#8affc4}
  .sx-tags .t-phy{border-color:rgba(224,168,106,.4)}
  .sx-tags .t-dig{border-color:rgba(142,162,255,.4)}
  .sx-tags .t-vir{border-color:rgba(138,255,196,.4)}
  .deck-offers{margin-top:56px}
  .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:24px;align-items:start}
  .off-col h4{padding-bottom:12px;border-bottom:2px solid currentColor;margin-bottom:4px}
  .off-item{border-bottom:1px solid var(--line)}
  .off-item summary{list-style:none;cursor:pointer;padding:12px 0;font-size:13px;font-weight:500;
    color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
  .off-item summary::-webkit-details-marker{display:none}
  .off-item summary::after{content:"+";color:var(--cold);font-size:16px;line-height:1}
  .off-item[open] summary::after{content:"–"}
  .off-item p{font-size:12px;line-height:1.65;font-weight:300;color:var(--dim);padding:0 0 14px}
  .off-empty{opacity:.45}
  .off-na{font-size:12px;font-weight:300;color:var(--dim);padding-top:12px}
  .deck-stop{margin-top:52px;border-left:2px solid #e0a86a;padding-left:20px;max-width:660px}
  .deck-stop p{margin-top:12px;font-size:14px;line-height:1.7;font-weight:300;color:var(--dim)}
  section.light .sx-meta h3,section.light .off-item summary{color:var(--cream-ink)}
  section.light .sx-meta p,section.light .off-item p,section.light .off-na,
  section.light .deck-stop p,section.light .sx-tags span{color:var(--cream-dim)}
  section.light .off-item,section.light .sx-card,section.light .sx-tags span{border-color:var(--cream-line)}
  section.light .off-item summary::after,section.light .sx-back{color:var(--indigo)}
  section.light .t-dig{color:var(--indigo)}
  @media(max-width:980px){
    .sx-grid{grid-template-columns:1fr}
    .offers{grid-template-columns:1fr;gap:26px}
  }
  /* ===== SECTORS v2 — index + per-sector pages ===== */
  .sd-wrap{max-width:1280px;margin:0 auto;width:100%}
  .dk-lbl{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--cold);font-weight:600}
  section.light .dk-lbl{color:var(--indigo)}
  .vslot{border:1px dashed rgba(142,162,255,.42);background:rgba(142,162,255,.05);display:flex;
    align-items:center;justify-content:center;aspect-ratio:16/9;min-height:150px}
  .vslot span{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--cold);opacity:.85;text-align:center;padding:0 14px}
  section.light .vslot{border-color:rgba(76,99,255,.4);background:rgba(76,99,255,.04)}
  section.light .vslot span{color:var(--indigo)}
  .vslot-tall{aspect-ratio:4/5;min-height:340px}
  /* .vslot with a real image in it: solid frame, image covers the box */
  .vslot-fill{border-style:solid;border-color:var(--line);background:#0a0c14;overflow:hidden;padding:0}
  section.light .vslot-fill{border-color:var(--cream-line)}
  .vslot-fill img{width:100%;height:100%;object-fit:cover;display:block}
  /* .vslot holding a live embedded study: the iframe is a picture here, the
     whole frame is the link, so the study only becomes interactive once opened */
  .vslot-embed,section.light .vslot-embed{position:relative;display:block;background:#000;
    text-decoration:none;cursor:pointer}
  .vslot-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
  .vslot-embed .vembed-cta{position:absolute;left:14px;bottom:14px;z-index:2;color:#fff;
    background:rgba(5,6,10,.72);border:1px solid rgba(142,162,255,.5);border-radius:100px;
    padding:8px 15px;transition:.25s;white-space:nowrap}
  section.light .vslot-embed .vembed-cta{color:#fff}
  .vslot-embed:hover .vembed-cta{background:var(--indigo);border-color:var(--indigo)}
  /* filled counterpart to .vslot — a real frame rather than a dashed placeholder */
  .vband-2{grid-template-columns:1fr 1fr;align-items:start}
  .vshot{position:relative;overflow:hidden;border:1px solid var(--line);background:#0a0c14;
    aspect-ratio:5/4}
  .vshot-tall{aspect-ratio:5/4}
  .vshot img{width:100%;height:100%;object-fit:contain;display:block}
  /* hero with a user-filled cover: the slot sits behind the scrim and copy,
     and everything above it is click-through so the slot stays reachable */
  .sd-hero-slot{background:#0a0c14}
  .sd-hero-slot > image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .sd-hero-slot > .sd-scrim{pointer-events:none;z-index:1}
  .sd-hero-slot > .sd-hero-in{position:relative;z-index:2;pointer-events:none}
  .sd-hero-slot > .sd-hero-in a,
  .sd-hero-slot > .sd-hero-in button{pointer-events:auto}
  /* the slot centres its empty-state caption in its own box, and the hero copy
     is centred in that same box — so the caption is pinned to the top-right
     band instead, which the copy never occupies */
  .sd-hero-slot > image-slot::part(empty){align-items:flex-end;justify-content:flex-start;
    padding:16px 20px;text-align:right}
  .vshot-slot{position:relative}
  .vshot-slot image-slot{position:absolute;inset:0;width:100%;height:100%}
  .vshot figcaption{position:absolute;left:0;bottom:0;padding:9px 13px;
    font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:linear-gradient(to top,rgba(5,6,10,.82),rgba(5,6,10,0))}
  /* declared after the base rule so it wins at equal specificity: an upload
     slot must keep its bottom-left corner and its controls clear */
  .vshot-slot figcaption{pointer-events:none;background:none;left:auto;right:0}
  /* --- index --- */
  .sx-top{min-height:auto;padding-top:150px;padding-bottom:50px;display:block}
  .sx-title{font-size:clamp(48px,9vw,132px);line-height:.92;letter-spacing:-.04em;margin-top:8px}
  .sx-title b{color:var(--cold);font-weight:inherit}
  .sx-sub{margin-top:26px;max-width:560px;font-size:15px;line-height:1.7;font-weight:300;color:var(--dim)}
  .sx-list{min-height:auto;padding-top:20px;padding-bottom:120px;display:block}
  .sx-row{display:grid;grid-template-columns:60px 1fr auto 300px 78px;gap:26px;align-items:center;
    border-top:1px solid var(--line);padding:22px 0;cursor:pointer;text-decoration:none;transition:.45s cubic-bezier(.16,1,.3,1)}
  .sx-row:last-child{border-bottom:1px solid var(--line)}
  .sx-row:hover{padding-left:14px}
  .sx-n{font-size:11px;letter-spacing:.2em;color:var(--faint)}
  .sx-name{font-size:clamp(22px,2.9vw,42px);line-height:1.05;letter-spacing:-.025em;color:var(--ink);transition:.4s}
  .sx-row:hover .sx-name{color:var(--cold)}
  .sx-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .sx-tags span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    border:1px solid var(--line);border-radius:100px;padding:4px 10px;color:var(--dim)}
  .sx-shot{height:132px;background-size:cover;background-position:center;filter:grayscale(1) brightness(.72);transition:.55s cubic-bezier(.16,1,.3,1)}
  .sx-row:hover .sx-shot{filter:grayscale(0) brightness(1)}
  .sx-go{font-size:10px;letter-spacing:.18em;color:var(--faint);text-align:right;transition:.4s}
  .sx-row:hover .sx-go{color:var(--cold)}
  .t-phy{color:#e0a86a}.t-dig{color:var(--cold)}.t-vir{color:#8affc4}
  .sx-tags .t-phy{border-color:rgba(224,168,106,.45);color:#e0a86a}
  .sx-tags .t-dig{border-color:rgba(142,162,255,.45);color:var(--cold)}
  .sx-tags .t-vir{border-color:rgba(138,255,196,.45);color:#8affc4}
  /* --- detail --- */
  .sd-hero{min-height:74vh;background-size:cover;background-position:center;position:relative;
    display:flex;align-items:flex-end;padding:0 56px 62px}
  .sd-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.72) 0%,rgba(5,6,10,.34) 42%,rgba(5,6,10,.94) 100%)}
  .sd-hero-in{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%}
  .sx-back{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.7;margin-bottom:30px;cursor:pointer}
  .sx-back:hover{opacity:1}
  .sd-num{font-size:10px;letter-spacing:.26em;color:var(--cold)}
  .sd-hero h1{font-size:clamp(38px,7vw,104px);line-height:.95;letter-spacing:-.035em;margin-top:12px;color:#fff}
  .sd-lede{margin-top:20px;max-width:600px;font-size:16px;line-height:1.65;font-weight:300;color:rgba(255,255,255,.78)}
  .sd-sec{min-height:auto;padding-top:96px;padding-bottom:96px;display:block}
  .sd-need{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:start}
  .sd-big{margin-top:20px;font-size:clamp(21px,2.4vw,34px);line-height:1.32;letter-spacing:-.02em;color:var(--cream-ink);font-weight:400}
  .offers{display:grid;gap:40px;margin-top:26px;align-items:start}
  .offers.cols-3{grid-template-columns:repeat(3,1fr)}
  .offers.cols-2{grid-template-columns:repeat(2,1fr)}
  .off-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
    padding-bottom:12px;border-bottom:2px solid currentColor}
  .off-item{border-bottom:1px solid var(--line)}
  .off-item summary{list-style:none;cursor:pointer;padding:13px 0;font-size:14px;font-weight:500;color:var(--ink);
    display:flex;justify-content:space-between;align-items:center;gap:12px}
  .off-item summary::-webkit-details-marker{display:none}
  .off-item summary::after{content:"+";color:var(--cold);font-size:16px;line-height:1}
  .off-item[open] summary::after{content:"–"}
  .off-item p{font-size:12px;line-height:1.65;font-weight:300;color:var(--dim);padding:0 0 15px}
  .sd-band{min-height:auto;padding-top:0;padding-bottom:96px;display:block}
  .vband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .vband-2{grid-template-columns:1fr 1fr}
  .sd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:26px}
  .sd-step{border-top:2px solid var(--indigo);padding-top:15px}
  .sd-step .stn{font-size:10px;letter-spacing:.2em;color:var(--indigo)}
  .sd-step b{display:block;margin-top:8px;font-size:16px;font-weight:700;color:var(--cream-ink)}
  .sd-step p{margin-top:8px;font-size:13px;line-height:1.6;font-weight:300;color:var(--cream-dim)}
  .csgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
  .cscard{border:1px solid var(--cream-line);cursor:pointer;text-decoration:none;display:block;
    padding-bottom:16px;transition:.4s cubic-bezier(.16,1,.3,1)}
  .cscard:hover{border-color:var(--indigo);transform:translateY(-3px)}
  .ph-tile{height:112px;background:repeating-linear-gradient(135deg,#eef1f8 0 9px,#ffffff 9px 18px)}
  .cs-name{display:block;padding:14px 16px 0;font-size:15px;font-weight:700;color:var(--cream-ink)}
  .cs-go{display:block;padding:6px 16px 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
  .sd-cta{margin-top:52px;border-top:1px solid var(--cream-line);padding-top:26px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .cta-note{font-size:12px;color:var(--cream-dim);font-weight:300}
  section.light .off-item summary{color:var(--cream-ink)}
  section.light .off-item p{color:var(--cream-dim)}
  section.light .off-item{border-color:var(--cream-line)}
  @media(max-width:980px){
    .sx-row{grid-template-columns:44px 1fr;gap:12px}
    .sx-tags,.sx-shot,.sx-go{display:none}
    .sd-hero{padding:0 22px 40px;min-height:60vh}
    .sd-need{grid-template-columns:1fr;gap:30px}
    .offers.cols-3,.offers.cols-2{grid-template-columns:1fr;gap:28px}
    .vband,.sd-steps{grid-template-columns:1fr}
    .csgrid{grid-template-columns:repeat(2,1fr)}
    .sd-sec{padding-top:56px;padding-bottom:56px}
  }
  /* ===== TYPE SYSTEM — Outfit everywhere, PP Monument Extended for big headers =====
     Both faces embedded as WOFF, so this file renders correctly offline.
     Outfit is variable (100-900). Monument Extended ships Light + Regular only —
     no bold — so the header tier never asks for a weight above 400. */
  @font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
    src:url(../fonts/outfit-variable.woff2) format('woff2')}
  @font-face{font-family:'PP Monument Extended';font-style:normal;font-weight:400;font-display:swap;
    src:url(../fonts/monument-extended-400.woff2) format('woff2')}
  @font-face{font-family:'PP Monument Extended';font-style:normal;font-weight:300;font-display:swap;
    src:url(../fonts/monument-extended-300.woff2) format('woff2')}
  :root{--head:'PP Monument Extended',sans-serif}
  /* the big-header tier — nothing else gets Monument */
  .mnt,.hero h1,.lead,.sx-title,.sd-hero h1,.sx-name,.railcard h3{
    font-family:var(--head);font-weight:400}
  /* an extended face needs less size and no negative tracking */
  .hero h1{font-size:clamp(18px,2.9vw,48px);letter-spacing:.005em;font-weight:400}
  .lead{font-size:clamp(23px,3.8vw,50px);letter-spacing:0;font-weight:300;line-height:1.06}
  .lead b{font-weight:400}
  .sx-title{font-size:clamp(29px,5.2vw,78px);letter-spacing:-.005em;line-height:.98;font-weight:300}
  .sx-title b{font-weight:400}
  .sd-hero h1{font-size:clamp(24px,4.3vw,62px);letter-spacing:0;line-height:1.02;font-weight:400}

  .sx-name{font-size:clamp(20px,2.6vw,38px);letter-spacing:0;font-weight:400}
  .railcard h3{font-size:clamp(19px,2.1vw,32px);letter-spacing:0;font-weight:400}
  @media(max-width:860px){
    .hero h1{font-size:clamp(16px,5vw,28px);white-space:normal}
  }
  /* small-label tier — Outfit Regular, +2px, tighter tracking */
  .dk-lbl,.off-tag,.sd-num,.sd-step .stn,.sx-n,.sx-go,.sx-back,.cs-kicker,
  .cs-open,.ci-n,.sx-tags span,.cs-tags span,.vslot span{
    font-family:'Outfit',sans-serif;font-weight:400}
  .dk-lbl{font-size:12px;letter-spacing:.08em}
  .off-tag{font-size:11px;letter-spacing:.07em}
  .sd-num{font-size:12px;letter-spacing:.09em}
  .sd-step .stn{font-size:12px;letter-spacing:.09em}
  .sx-n{font-size:13px;letter-spacing:.07em}
  .sx-go{font-size:12px;letter-spacing:.08em}
  .sx-back{font-size:12px;letter-spacing:.08em}
  .cs-kicker{font-size:11px;letter-spacing:.08em}
  .cs-open{font-size:12px;letter-spacing:.08em}
  .ci-n{font-size:12px;letter-spacing:.07em}
  .sx-tags span{font-size:11px;letter-spacing:.05em}
  .cs-tags span{font-size:11px;letter-spacing:.05em}
  .vslot span{font-size:12px;letter-spacing:.07em}
  /* case studies — one featured, the rest as an index */
  .cs-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:24px;align-items:stretch}
  .cs-shot{min-height:310px;aspect-ratio:auto}
  .cs-info{display:flex;flex-direction:column;justify-content:center}
  .cs-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo)}
  .cs-info h3{font-size:clamp(24px,2.7vw,40px);font-weight:800;letter-spacing:-.025em;margin-top:10px;color:var(--cream-ink)}
  .cs-info p{margin-top:14px;font-size:14px;line-height:1.7;font-weight:300;color:var(--cream-dim);max-width:400px}
  .cs-tags{margin-top:20px;display:flex;gap:7px;flex-wrap:wrap}
  .cs-tags span{font-size:10px;text-transform:uppercase;border:1px solid var(--cream-line);
    border-radius:100px;padding:5px 11px;color:var(--cream-dim)}
  .cs-open{margin-top:24px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--indigo);cursor:pointer;align-self:flex-start}
  .cs-list{margin-top:40px;border-top:1px solid var(--cream-line)}
  .cs-item{display:grid;grid-template-columns:44px 1.1fr 1.4fr 26px;gap:22px;align-items:baseline;
    padding:15px 0;border-bottom:1px solid var(--cream-line);cursor:pointer;text-decoration:none;
    transition:.4s cubic-bezier(.16,1,.3,1)}
  .cs-item:hover{padding-left:12px}
  .ci-n{font-size:10px;letter-spacing:.16em;color:var(--cream-dim)}
  .ci-name{font-size:17px;font-weight:700;color:var(--cream-ink);letter-spacing:-.01em}
  .ci-desc{font-size:13px;font-weight:300;color:var(--cream-dim)}
  .ci-go{text-align:right;color:var(--indigo);opacity:0;transition:.3s}
  .cs-item:hover .ci-go{opacity:1}
  @media(max-width:980px){
    .cs-feature{grid-template-columns:1fr;gap:24px}
    .cs-shot{min-height:210px}
    .cs-item{grid-template-columns:34px 1fr;gap:12px}
    .ci-desc,.ci-go{display:none}
  }
  /* ===== case studies — full-bleed horizontal rail ===== */
  .sd-cases{min-height:auto;padding:96px 0 84px;display:block;overflow:hidden}
  .sd-cases-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 56px}
  .rail-nav{display:flex;align-items:center;gap:10px}
  .rail-count{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--faint);
    font-variant-numeric:tabular-nums}
  .rail-btn{width:38px;height:38px;border-radius:100px;border:1px solid var(--line);background:none;
    color:var(--dim);cursor:pointer;font-size:14px;transition:.3s}
  .rail-btn:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
  .rail-btn:disabled{opacity:.28;cursor:default}
  .rail{display:flex;gap:22px;margin-top:30px;padding:0 56px 8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:56px;scrollbar-width:none;cursor:grab}
  .rail::-webkit-scrollbar{display:none}
  .rail.dragging{cursor:grabbing;scroll-snap-type:none}
  .railcard{flex:0 0 clamp(280px,44vw,580px);scroll-snap-align:start;text-decoration:none;display:block}
  .rc-shot{height:clamp(230px,42vh,410px);border:1px dashed rgba(142,162,255,.42);
    background:rgba(142,162,255,.05);display:flex;align-items:center;justify-content:center;
    transition:.5s cubic-bezier(.16,1,.3,1)}
  .railcard:hover .rc-shot{border-color:var(--cold);background:rgba(142,162,255,.1)}
  /* a card still awaiting its cover: a quiet tonal wash rather than an empty
     dashed box, so the rail reads evenly whether or not art has landed */
  .rc-shot:empty{border-style:solid;border-color:var(--line);
    background:linear-gradient(150deg,rgba(142,162,255,.14),rgba(142,162,255,.02) 62%),#0a0c14}
  .railcard:hover .rc-shot:empty{border-color:var(--cold)}
  .rc-shot span{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--cold);opacity:.85;text-align:center;padding:0 16px}
  .rc-meta{padding-top:20px}
  .rc-n{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--faint)}
  .railcard h3{font-size:clamp(21px,2.3vw,36px);line-height:1.02;margin-top:8px;color:var(--ink);
    transition:.35s}
  .railcard:hover h3{color:var(--cold)}
  .rc-meta p{margin-top:12px;font-size:14px;line-height:1.6;font-weight:300;color:var(--dim);max-width:420px}
  .rc-go{display:inline-block;margin-top:16px;font-family:'Outfit',sans-serif;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--cold);opacity:0;transition:.35s}
  .railcard:hover .rc-go{opacity:1}
  .rail-hint{padding:0 56px;margin-top:22px}
  .rail-hint span{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--faint)}
  @media(max-width:980px){
    .sd-cases-head,.rail,.rail-hint{padding-left:22px;padding-right:22px}
    .rail{scroll-padding-left:22px}
    .railcard{flex:0 0 78vw}
    .rail-nav{display:none}
  }
  /* ===== BRAND LOCKUP =====
     Two supplied variants: white wordmark for dark grounds, blue for light.
     The orb is identical in both; only the wordmark changes. */
  :root{
    --logo-on-dark:url(../img/brand/logo-on-dark.webp);
    --logo-on-light:url(../img/brand/logo-on-light.webp);
  }
  .logo{display:block;height:45px;aspect-ratio:440/129;background-image:var(--logo-on-dark);
    background-size:contain;background-repeat:no-repeat;background-position:left center;
    filter:drop-shadow(0 1px 8px rgba(5,6,10,.55))}
  section.light .logo{background-image:var(--logo-on-light)}
  .hero .wm .logo{height:45px}
  @media(max-width:860px){.logo{height:22px}}
  /* ===== scroll reveal ===== */
  .reveal{opacity:0;transform:translateY(24px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .offers .off-col:nth-child(2),.sd-steps .sd-step:nth-child(2),.vband .vslot:nth-child(2){transition-delay:.10s}
  .offers .off-col:nth-child(3),.sd-steps .sd-step:nth-child(3),.vband .vslot:nth-child(3){transition-delay:.20s}
  /* ===== mockup frames (sector "selected output") ===== */
  .mockrow{display:grid;grid-template-columns:1.55fr .95fr .95fr;gap:16px;align-items:start}
  .mock{position:relative;border:1px solid var(--line);background:#0a0c14;overflow:hidden}
  .mock-bar{display:flex;align-items:center;gap:8px;padding:0 11px;height:28px;
    border-bottom:1px solid var(--line);background:rgba(142,162,255,.06)}
  .mock-dots{display:flex;gap:5px}
  .mock-dots i{width:7px;height:7px;border-radius:50%;background:rgba(142,162,255,.34)}
  .mock-url{flex:1;height:14px;border-radius:7px;background:rgba(142,162,255,.10);
    display:flex;align-items:center;padding:0 8px;font-family:'Outfit',sans-serif;
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cold);opacity:.7}
  .mock-view{position:relative;aspect-ratio:16/10}
  .mock-view image-slot{position:absolute;inset:0;width:100%;height:100%}
  .mock-phone{border-radius:22px;padding:8px}
  .mock-phone .mock-view{aspect-ratio:9/17;border-radius:15px;overflow:hidden}
  .mock-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:52px;height:5px;
    border-radius:3px;background:rgba(142,162,255,.30);z-index:2;pointer-events:none}
  .mock-square .mock-view{aspect-ratio:1/1}
  .mock-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 12px 10px;border-top:1px solid var(--line);
    font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--cold);opacity:.82}
  .mock-cap b{font-weight:400;opacity:.6}
  /* inside a viewport-height sticky panel the frames must be clamped, like .vslot:
     the phone's 9:17 ratio alone would otherwise eat a whole screen */
  /* clamp the HEIGHT, keep each frame's own ratio: width follows the ratio and
     the frame centres in its track, so a phone still reads as a phone */
  .sd-panel .mockrow{grid-template-columns:auto auto auto;justify-content:center;
    align-items:start;gap:20px;margin-top:34px}
  .sd-panel .mock{justify-self:center}
  .sd-panel .mock-view{height:clamp(150px,30vh,300px);aspect-ratio:16/10;width:auto}
  .sd-panel .mock-square .mock-view{aspect-ratio:1/1}
  .sd-panel .mock-phone .mock-view{aspect-ratio:9/17}
  @media(max-width:900px){
    .mockrow,.sd-panel .mockrow{grid-template-columns:1fr;justify-content:stretch}
    .sd-panel .mock-view{height:clamp(140px,24vh,210px)}
  }
  /* --- drawn screen content inside the mockup frames --- */
  .mock-view{background:#070910}
  .scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
    font-family:'Outfit',sans-serif;color:var(--ink)}
  /* corporate platform */
  .scr-web{padding:0}
  .scr-top{display:flex;align-items:center;justify-content:space-between;
    padding:6% 6% 0;gap:6%}
  .scr-brand{display:flex;align-items:center;gap:5px;font-size:.9vh;letter-spacing:.22em;
    text-transform:uppercase;color:var(--cold)}
  .scr-brand i{width:5px;height:5px;background:var(--indigo);border-radius:50%}
  .scr-nav{display:flex;gap:9px}
  .scr-nav i{display:block;width:16px;height:3px;background:rgba(142,162,255,.26)}
  .scr-nav i:first-child{background:var(--indigo);width:11px}
  .scr-hero{padding:5% 6% 0;display:flex;flex-direction:column;gap:5px}
  .scr-h{font-family:'Fraunces',serif;font-size:2.3vh;line-height:1.05;letter-spacing:-.01em}
  .scr-sub{display:flex;flex-direction:column;gap:3px}
  .scr-sub i{display:block;height:2px;background:rgba(239,241,248,.14)}
  .scr-sub i:nth-child(1){width:72%}.scr-sub i:nth-child(2){width:54%}
  .scr-kpis{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line)}
  .scr-kpi{padding:4% 6%;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
  .scr-kpi:last-child{border-right:0}
  .scr-kpi b{font-family:'Fraunces',serif;font-weight:400;font-size:1.5vh;color:var(--cold)}
  .scr-kpi span{font-size:.82vh;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .scr-bars{display:flex;align-items:flex-end;gap:3px;height:22%;padding:0 6% 5%}
  .scr-bars i{flex:1;background:linear-gradient(to top,var(--indigo),rgba(76,99,255,.18))}
  /* brand system sheet */
  .scr-brandsheet{padding:7%;gap:6%;background:#fff;color:var(--cream-ink)}
  .scr-mark{font-family:'Fraunces',serif;font-size:3.4vh;line-height:.9;letter-spacing:-.02em}
  .scr-mark em{font-style:normal;color:var(--indigo)}
  .scr-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:auto}
  .scr-swatches i{aspect-ratio:1;display:block}
  .scr-type{display:flex;flex-direction:column;gap:4px;padding-top:6%;
    border-top:1px solid var(--cream-line)}
  .scr-type b{font-size:.85vh;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);font-weight:400}
  .scr-type span{font-family:'Fraunces',serif;font-size:1.4vh;letter-spacing:.04em}
  /* field app */
  .scr-app{padding:9% 8% 8%;gap:0;background:
    radial-gradient(120% 60% at 50% 0%,rgba(76,99,255,.22),transparent 70%),#070910}
  .scr-app-lbl{font-size:.85vh;letter-spacing:.2em;text-transform:uppercase;color:var(--cold);opacity:.8}
  .scr-app-h{font-family:'Fraunces',serif;font-size:1.9vh;line-height:1.1;margin-top:6%}
  .scr-rows{margin-top:9%;display:flex;flex-direction:column;gap:5%}
  .scr-row{border:1px solid var(--line);padding:7% 8%;display:flex;flex-direction:column;gap:4px;
    background:rgba(142,162,255,.045)}
  .scr-row b{font-size:.95vh;font-weight:400;letter-spacing:.05em}
  .scr-row i{display:block;height:2px;width:60%;background:rgba(239,241,248,.16)}
  .scr-row.on{border-color:var(--indigo);background:rgba(76,99,255,.14)}
  .scr-cta{margin-top:auto;height:9%;min-height:16px;background:var(--indigo);
    display:flex;align-items:center;justify-content:center;
    font-size:.8vh;letter-spacing:.2em;text-transform:uppercase;color:#fff}
  /* ===== sectors index — sticky stack ===== */
  .sx-stack{min-height:auto;padding:10px 0 46vh;display:block}
  .scard{position:sticky;top:calc(104px + var(--i) * 15px);display:block;text-decoration:none;margin-bottom:20vh}
  .scard:last-child{margin-bottom:0}
  .sc-inner{display:grid;grid-template-columns:1.02fr .98fr;min-height:clamp(330px,60vh,540px);
    border:1px solid var(--line);background:#0a0c13;overflow:hidden;
    transform-origin:top center;will-change:transform,filter}
  .scard:hover .sc-inner{border-color:var(--cold)}
  .sc-shot{background-size:cover;background-position:center;filter:grayscale(1) brightness(.66);
    transition:filter .7s cubic-bezier(.16,1,.3,1)}
  .scard:hover .sc-shot{filter:grayscale(0) brightness(1)}
  .sc-body{padding:clamp(26px,3.4vw,54px);display:flex;flex-direction:column;justify-content:center}
  .sc-n{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;color:var(--faint)}
  .sc-inner h3{font-size:clamp(23px,3vw,46px);line-height:1.02;margin-top:10px;color:var(--ink);transition:.35s}
  .scard:hover h3{color:var(--cold)}
  .sc-body p{margin-top:16px;font-size:14px;line-height:1.65;font-weight:300;color:var(--dim);max-width:400px}
  .sc-tags{margin-top:22px;display:flex;gap:7px;flex-wrap:wrap}
  .sc-tags span{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    border:1px solid var(--line);border-radius:100px;padding:5px 11px}
  .sc-tags .t-phy{border-color:rgba(224,168,106,.45);color:#e0a86a}
  .sc-tags .t-dig{border-color:rgba(142,162,255,.45);color:var(--cold)}
  .sc-tags .t-vir{border-color:rgba(138,255,196,.45);color:#8affc4}
  .sc-go{margin-top:26px;font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--cold);opacity:.55;transition:.35s}
  .scard:hover .sc-go{opacity:1}
  @media(max-width:980px){
    .scard{position:relative;top:auto;margin-bottom:18px}
    .sc-inner{grid-template-columns:1fr}
    .sc-shot{min-height:190px}
    .sx-stack{padding-bottom:60px}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .scard{position:relative;top:auto;margin-bottom:18px}
  }
  /* ===== SECTOR PAGES — full-screen stacking panels ===== */
  .sd-stack{position:relative}
  .sd-stack>section{position:sticky;top:0;height:100vh;height:100svh;min-height:100vh;min-height:100svh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;padding:0 56px}
  .sd-stack>section.dark{background:var(--bg)}
  .sd-stack>section.light{background:var(--cream)}
  .pnl{max-width:1280px;margin:0 auto;width:100%;position:relative;z-index:2;
    transform-origin:50% 40%;will-change:transform,opacity}
  .pnl-tag{position:absolute;left:56px;bottom:26px;z-index:3;font-family:'Outfit',sans-serif;
    font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);opacity:.7}
  section.light .pnl-tag{color:var(--cream-dim)}
  .sd-hero{padding:0 56px;justify-content:flex-end;padding-bottom:14vh}
  .sd-hero .pnl{margin:0 auto}
  .sd-cue{display:inline-block;margin-top:34px;font-family:'Outfit',sans-serif;font-size:12px;
    letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);
    animation:cue 2.4s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
  /* panels are fixed height now, so dense content scales down rather than overflowing */
  .sd-panel .offers{margin-top:22px;gap:34px}
  .sd-panel .off-item summary{padding:10px 0;font-size:13px}
  .sd-panel .vband{gap:14px}
  .sd-panel .vslot{min-height:0;height:clamp(180px,38vh,360px);aspect-ratio:auto}
  .sd-panel .vshot{height:auto;max-height:56vh}
  .sd-panel .vslot-tall{height:clamp(240px,52vh,440px)}
  .sd-panel .sd-need{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
  .sd-panel .sd-steps{margin-top:22px}
  .sd-rail-panel{padding-left:0;padding-right:0}
  .sd-rail-panel .pnl{max-width:none}
  .sd-rail-panel .rc-shot{height:clamp(170px,30vh,300px)}
  .sd-rail-panel .rail{margin-top:22px}
  .sd-rail-panel .rc-meta{padding-top:14px}
  .sd-end .pnl{text-align:center}
  .sd-end h2{font-size:clamp(30px,5vw,74px);line-height:1;margin-top:14px;color:var(--ink)}
  .sd-end p{margin:18px auto 0;max-width:460px;font-size:15px;line-height:1.7;font-weight:300;color:var(--dim)}
  .sd-end .dk-lbl{justify-content:center}
  .end-cta{margin-top:34px;display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
  .end-back{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--faint);cursor:pointer}
  .end-back:hover{color:var(--cold)}
  @media(max-width:980px){
    .sd-stack>section{position:relative;top:auto;height:auto;min-height:auto;
      padding:70px 22px;display:block}
    .sd-hero{min-height:62vh;display:flex;padding-bottom:50px}
    .pnl-tag{display:none}
    .sd-panel .sd-need{grid-template-columns:1fr;gap:26px}
    .sd-rail-panel{padding:70px 0}
  }
  @media (prefers-reduced-motion:reduce){
    .sd-stack>section{position:relative;top:auto;height:auto;min-height:auto;padding:80px 56px;display:block}
    .sd-cue{animation:none}
  }
  /* ===== partner / accreditation band ===== */
  .accred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;
    margin-top:52px;display:flex;align-items:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap}
  section.light .accred{border-color:var(--cream-line)}
  .acc-lbl{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--cold);flex:none}
  section.light .acc-lbl{color:var(--indigo)}
  .acc-mark{width:154px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;
    border:1px dashed rgba(142,162,255,.42);background:rgba(142,162,255,.05)}
  section.light .acc-mark{border-color:rgba(76,99,255,.4);background:rgba(76,99,255,.04)}
  .acc-mark span{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--cold);text-align:center;padding:0 8px}
  section.light .acc-mark span{color:var(--indigo)}
  .acc-txt b{display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  section.light .acc-txt b{color:var(--cream-ink)}
  .acc-txt span{display:block;margin-top:4px;font-size:12px;font-weight:300;color:var(--dim)}
  section.light .acc-txt span{color:var(--cream-dim)}
  .acc-note{flex:1 1 250px;font-size:13px;line-height:1.6;font-weight:300;color:var(--dim);max-width:400px}
  section.light .acc-note{color:var(--cream-dim)}
  .acc-inline{display:flex;align-items:center;gap:11px;margin-top:22px}
  .acc-inline .dot{width:5px;height:5px;border-radius:50%;background:var(--cold);flex:none;
    box-shadow:0 0 10px rgba(142,162,255,.8)}
  .acc-inline span{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.05em;
    color:rgba(255,255,255,.82)}
  .foot-acc{color:var(--faint)}
  @media(max-width:860px){
    .accred{gap:16px;padding:20px 0;margin-top:34px}
    .acc-mark{width:120px;height:44px}
    .foot-acc{display:none}
  }
  /* ===== brand wordmark face + markup render ===== */
  @font-face{font-family:'Squaresharps';font-style:normal;font-weight:400;font-display:swap;
    src:url(../fonts/squaresharps-400.woff2) format('woff2')}
  :root{--wordmark:'Squaresharps',sans-serif;
    --markup:url(../img/brand/markup.webp)}
  /* ===== LAB ===== */
  .lab-h1{font-size:clamp(28px,4.4vw,64px);line-height:1.04;margin-top:16px;color:var(--ink)}
  .lab-lede{margin-top:22px;max-width:600px;font-size:16px;line-height:1.65;font-weight:300;color:var(--dim)}
  /* scoped: #aboutRoot uses a .st wrapper of its own and inherited the uppercase */
  #p-lab .st{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    border-radius:100px;padding:4px 10px;flex:none;font-weight:400}
  #p-lab .st-live{color:#8affc4;border:1px solid rgba(138,255,196,.45)}
  #p-lab .st-dev{color:#e0a86a;border:1px solid rgba(224,168,106,.45)}
  #p-lab .st-res{color:var(--cold);border:1px solid rgba(142,162,255,.45)}
  #p-lab section.light .st-res{color:var(--indigo);border-color:rgba(76,99,255,.4)}
  .labcols{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;margin-top:24px;align-items:start}
  /* single-child variant: no companion slot, so the list runs full width at a readable measure */
  .labcols-solo{grid-template-columns:1fr}
  .labcols-solo .labcol{max-width:920px}
  .labitem summary{display:flex;align-items:center;gap:14px}
  .labitem .li-n{flex:1;font-size:15px;font-weight:500}
  .ipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
  .ipcard{border:1px solid var(--line)}
  .ipcard .vslot{height:clamp(150px,26vh,240px);aspect-ratio:auto;border:0;border-bottom:1px dashed rgba(142,162,255,.42)}
  .ip-meta{padding:18px 20px 22px}
  .ip-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .ipcard h3{font-size:clamp(17px,1.6vw,24px);line-height:1.05;color:var(--ink)}
  .ip-meta p{margin-top:12px;font-size:13px;line-height:1.6;font-weight:300;color:var(--dim)}
  @media(max-width:980px){
    .labcols{grid-template-columns:1fr;gap:24px}
    .ipgrid{grid-template-columns:1fr;gap:14px}
  }
  /* ===== how the work is made — flow diagram ===== */
  .flow{width:100%;margin-top:clamp(18px,2.6vh,34px)}
  .flow-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
    padding-bottom:16px;border-bottom:1px solid var(--cream-ink)}
  .flow-head h2{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;line-height:.95;
    font-size:clamp(26px,3.1vw,48px);color:var(--cream-ink)}
  .flow-head h2 em{font-style:normal;color:var(--indigo)}
  .flow-key{display:flex;gap:20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cream-dim);padding-bottom:5px}
  .flow-key span{display:flex;align-items:center;gap:8px}
  .flow-key i{width:14px;height:3px;display:block}
  .flow-key .k-st i{background:var(--cream-ink)}
  .flow-key .k-sy i{background:var(--indigo)}
  .flow-grid{display:grid;grid-template-columns:repeat(5,1fr);row-gap:0}
  .fst{grid-row:1;position:relative;display:flex;flex-direction:column;
    padding:18px 24px 0 20px;border-left:1px solid var(--cream-line);
    opacity:0;transform:translateY(20px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),background .3s}
  .fst:first-child{border-left:0;padding-left:0}
  .flow.in .fst{opacity:1;transform:none}
  .flow.in .fst:nth-child(2){transition-delay:.09s}
  .flow.in .fst:nth-child(3){transition-delay:.18s}
  .flow.in .fst:nth-child(4){transition-delay:.27s}
  .flow.in .fst:nth-child(5){transition-delay:.36s}
  .fst+.fst::before{content:"";position:absolute;left:-5px;top:46%;width:8px;height:8px;
    border-top:1px solid #b8bccc;border-right:1px solid #b8bccc;transform:rotate(45deg);
    background:transparent;transition:border-color .3s}
  .fst-bar{display:block;height:3px;width:100%;max-width:78px;transition:height .3s,max-width .45s cubic-bezier(.16,1,.3,1)}
  .fst[data-lead="studio"] .fst-bar{background:var(--cream-ink)}
  .fst[data-lead="system"] .fst-bar{background:var(--indigo)}
  .fst-lead{font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px;color:var(--cream-dim)}
  .fst[data-lead="system"] .fst-lead{color:var(--indigo)}
  .fst-n{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.16em;
    color:var(--cream-dim);margin-top:22px;transition:color .3s}
  .fst h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1;
    font-size:clamp(20px,2.1vw,32px);color:var(--cream-ink);margin-top:8px;transition:color .3s}
  .fst p{font-size:13px;font-weight:300;line-height:1.6;color:var(--cream-dim);margin-top:12px;
    text-wrap:pretty;transition:color .3s}
  .fst-eng{align-self:flex-start;margin-top:14px;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--indigo);border:1px solid rgba(76,99,255,.42);
    border-radius:100px;padding:6px 13px;transition:.3s;white-space:nowrap}
  .fst-out{margin-top:auto;padding:12px 0 16px;border-top:1px solid var(--cream-line);
    display:flex;gap:8px;align-items:baseline;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cream-dim)}
  .fst-out b{font-weight:400;color:var(--cream-ink);letter-spacing:.08em}
  .fst:hover{background:linear-gradient(180deg,rgba(76,99,255,.055),rgba(76,99,255,0) 70%)}
  .fst:hover .fst-bar{height:6px;max-width:100%}
  .fst:hover .fst-n{color:var(--indigo)}
  .fst:hover p{color:var(--cream-ink)}
  .fst:hover .fst-eng{background:var(--indigo);border-color:var(--indigo);color:#fff}
  /* return path: deliver → asset library → build */
  .flow-loop{grid-row:2;grid-column:2 / -1;position:relative;height:clamp(44px,6.4vh,72px);
    margin-top:6px;border:1px dashed rgba(76,99,255,.5);border-top:0}
  .flow-loop::before{content:"";position:absolute;left:-4.5px;top:-4px;width:8px;height:8px;
    border-left:1px solid var(--indigo);border-top:1px solid var(--indigo);transform:rotate(45deg)}
  .fl-pill{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);white-space:nowrap;
    background:var(--cream);border:1px solid var(--indigo);border-radius:100px;padding:9px 20px;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo)}
  .flow-foot{grid-row:3;grid-column:1 / -1;display:flex;justify-content:space-between;gap:24px;
    flex-wrap:wrap;margin-top:30px;font-size:13px;font-weight:300;color:var(--cream-dim)}
  .flow-foot span:last-child{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
  @media(max-width:980px){
    .flow-grid{grid-template-columns:1fr}
    .fst{grid-row:auto;border-left:1px solid var(--cream-line);padding:0 0 26px 18px}
    .fst:first-child{border-left:1px solid var(--cream-line);padding-left:18px}
    .fst+.fst::before{display:none}
    .fst-bar{max-width:56px}
    .fst-n{margin-top:16px}
    .fst-out{margin-top:16px;padding-bottom:0}
    .flow-loop{grid-row:auto;grid-column:1;height:auto;margin-top:0;
      border:0;border-left:1px dashed rgba(76,99,255,.5);padding:0 0 4px 18px}
    .flow-loop::before{display:none}
    .fl-pill{position:static;transform:none;display:inline-block}
    .flow-foot{grid-row:auto;grid-column:1;margin-top:22px}
  }
  /* ===== Collective ===== */
  .collstat{margin-top:34px;display:flex;align-items:baseline;gap:14px}
  .collstat b{font-family:var(--head);font-weight:400;font-size:clamp(30px,4vw,58px);color:var(--cold);line-height:1}
  .collwide{max-width:820px}
  .collstat span{font-size:14px;font-weight:300;color:var(--dim);max-width:220px;line-height:1.4}
  .steps-4{grid-template-columns:repeat(4,1fr);gap:26px}
  .hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
  .hubcard{border-top:2px solid var(--indigo);padding-top:16px}
  .hubcard h3{font-size:clamp(17px,1.7vw,23px);font-weight:700;letter-spacing:-.015em;color:var(--cream-ink)}
  .hubcard p{margin-top:12px;font-size:13px;line-height:1.65;font-weight:300;color:var(--cream-dim)}
  section.light .collstat span{color:var(--cream-dim)}
  @media(max-width:980px){
    .steps-4,.hubgrid{grid-template-columns:1fr;gap:18px}
  }
  /* ===== AD Gaming mark ===== */
  .acc-real{border:0;background:none;width:auto;height:auto;padding:0}
  .acc-real .adg{height:34px;width:auto;display:block;color:var(--ink)}
  section.light .acc-real .adg{color:var(--cream-ink)}
  /* ===== interactive 3D ===== */
  .c3d-ink{background:#07080c!important;border-color:#07080c!important}
  .c3d-ink .c3d-cap{color:rgba(255,255,255,.45)!important}
  .c3d{position:relative;height:var(--h,320px);border:1px solid var(--line);overflow:hidden;
    background:radial-gradient(115% 90% at 50% 42%,#0d1018,#05060a 70%)}
  section.light .c3d{border-color:var(--cream-line)}
  .c3d canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  .c3d canvas:active{cursor:grabbing}
  .c3d-cap{position:absolute;left:14px;bottom:11px;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.07em;text-transform:uppercase;color:var(--faint);pointer-events:none}
  section.light .c3d-cap{color:rgba(226,233,255,.45)}
  /* ===== depth-scan visual (WebGL2, no library) ===== */
  .dscan{position:relative;height:clamp(300px,52vh,440px);overflow:hidden;
    border:1px solid var(--line);background:#05060a center/cover no-repeat}
  section.light .dscan{border-color:var(--cream-line)}
  .dscan canvas{width:100%;height:100%;display:block}
  .sd-panel .dscan{height:clamp(240px,52vh,440px)}
  .dscan-cap{position:absolute;left:14px;bottom:11px;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.07em;text-transform:uppercase;color:rgba(226,233,255,.5);pointer-events:none}
  /* ===== point-cloud globe with a depth scan ===== */
  .pcloud{position:relative;height:clamp(300px,52vh,440px);overflow:hidden;
    border:1px solid var(--line);background:radial-gradient(115% 90% at 50% 42%,#0d1018,#05060a 72%)}
  section.light .pcloud{border-color:var(--cream-line)}
  .pcloud canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  .pcloud canvas:active{cursor:grabbing}
  /* ===== CONTACT ===== */
  .ct-sec{min-height:100vh;min-height:100svh;padding:120px 56px 70px;display:flex;align-items:center}
  .ct-wrap{max-width:1280px;margin:0 auto;width:100%;display:grid;
    grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:start}
  .ct-h1{font-size:clamp(28px,4.2vw,62px);line-height:1.03;margin-top:16px;color:var(--ink)}
  .ct-lede{margin-top:18px;font-size:15px;line-height:1.65;font-weight:300;color:var(--dim);max-width:420px}
  .ct-intents{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
  .ct-chip{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.02em;padding:9px 16px;
    border:1px solid var(--line);border-radius:100px;background:none;color:var(--dim);cursor:pointer;transition:.3s}
  .ct-chip:hover{border-color:var(--cold);color:var(--ink)}
  .ct-chip.on{background:var(--cold);border-color:var(--cold);color:#05060a;font-weight:500}
  .ct-form{margin-top:30px;display:flex;flex-direction:column;gap:16px;max-width:600px}
  .ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ct-form label{display:flex;flex-direction:column;gap:8px;font-family:'Outfit',sans-serif;
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .ct-form input,.ct-form select,.ct-form textarea{
    font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;color:var(--ink);
    background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:0;
    padding:12px 14px;outline:none;transition:.25s;text-transform:none;letter-spacing:0}
  .ct-form textarea{resize:vertical;min-height:96px;line-height:1.55}
  .ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
    border-color:var(--cold);background:rgba(142,162,255,.06)}
  .ct-form select option{background:#0a0c13;color:var(--ink)}
  .ct-actions{margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .ct-send{border:0;cursor:pointer;font-family:'Outfit',sans-serif}
  .ct-promise{font-size:12px;font-weight:300;color:var(--dim);max-width:300px;line-height:1.5}
  .ct-err{font-size:12px;color:#ff8a8a;font-weight:300}
  .ct-done h2{font-size:clamp(26px,3vw,44px);margin-top:12px;color:var(--ink)}
  .ct-done p{margin-top:14px;font-size:15px;font-weight:300;line-height:1.7;color:var(--dim);max-width:440px}
  .ct-again{margin-top:26px;background:none;border:0;cursor:pointer;font-family:'Outfit',sans-serif;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cold);padding:0}
  .ct-right{display:flex;flex-direction:column;gap:26px;padding-top:8px}
  .ct-block{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:14px}
  .ct-k{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cold)}
  .ct-v{font-size:15px;font-weight:300;color:var(--ink);line-height:1.6}
  .ct-link{color:var(--ink);text-decoration:none;cursor:pointer;border-bottom:1px solid var(--line);transition:.25s}
  .ct-link:hover{color:var(--cold);border-color:var(--cold)}
  .ct-accred{margin-top:4px}
  .ct-socials{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
  .ct-socials a{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--dim);cursor:pointer;transition:.25s}
  .ct-socials a:hover{color:var(--cold)}
  @media(max-width:980px){
    .ct-sec{padding:96px 22px 60px;min-height:auto}
    .ct-wrap{grid-template-columns:1fr;gap:40px}
    .ct-row{grid-template-columns:1fr}
  }
  /* ===== CONTACT — stepped ===== */
  .ct-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
  .ct-stepno{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--faint);
    font-variant-numeric:tabular-nums}
  .ct-prog{height:1px;background:var(--line);margin-top:14px;overflow:hidden}
  .ct-prog span{display:block;height:100%;width:0;background:var(--cold);
    transition:width .6s cubic-bezier(.16,1,.3,1)}
  .ct-stage{min-height:clamp(280px,42vh,360px);padding-top:34px}
  .ct-q{font-family:var(--head);font-weight:400;font-size:clamp(24px,3.4vw,46px);line-height:1.06;
    color:var(--ink);letter-spacing:0;min-height:1.1em}
  .ct-q .car{display:inline-block;width:.5ch;background:var(--cold);animation:ctCar 1s steps(1) infinite;
    margin-left:.08em;vertical-align:-0.08em;height:.92em}
  @keyframes ctCar{0%,50%{opacity:1}51%,100%{opacity:0}}
  .ct-sub{margin-top:14px;font-size:14px;font-weight:300;color:var(--dim);max-width:420px;line-height:1.6}
  .ct-opts{margin-top:26px;display:flex;flex-direction:column;max-width:560px}
  .ct-opt{display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:14px;
    padding:13px 4px;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;
    font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;color:var(--dim);
    transition:.3s cubic-bezier(.16,1,.3,1)}
  .ct-opt:last-child{border-bottom:1px solid var(--line)}
  .ct-opt .n{font-size:11px;letter-spacing:.08em;color:var(--faint)}
  .ct-opt .go{opacity:0;color:var(--cold);transition:.3s}
  .ct-opt:hover,.ct-opt:focus-visible{color:var(--ink);padding-left:12px;outline:none}
  .ct-opt:hover .go,.ct-opt:focus-visible .go{opacity:1}
  .ct-opt.sel{color:var(--ink)}
  .ct-opt.sel .n{color:var(--cold)}
  .ct-fields{margin-top:26px;display:flex;flex-direction:column;gap:16px;max-width:520px}
  .ct-fields label{display:flex;flex-direction:column;gap:8px;font-family:'Outfit',sans-serif;
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .ct-fields input,.ct-fields textarea{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
    color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);
    padding:12px 14px;outline:none;transition:.25s;text-transform:none;letter-spacing:0}
  .ct-fields textarea{resize:vertical;min-height:110px;line-height:1.55}
  .ct-fields input:focus,.ct-fields textarea:focus{border-color:var(--cold);background:rgba(142,162,255,.06)}
  .ct-nav{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .ct-back{background:none;border:0;cursor:pointer;font-family:'Outfit',sans-serif;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:0;transition:.25s}
  .ct-back:hover{color:var(--cold)}
  .ct-send{border:0;cursor:pointer;font-family:'Outfit',sans-serif}
  .ct-hint{font-size:12px;font-weight:300;color:var(--faint)}
  .ct-err{margin-top:14px;font-size:12px;color:#ff8a8a;font-weight:300}
  .ct-brief{border-top:1px solid var(--line);padding-top:14px}
  .ct-brieflist{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:9px}
  .ct-brieflist li{font-size:14px;font-weight:300;color:var(--ink);display:grid;
    grid-template-columns:76px 1fr;gap:12px;align-items:baseline;
    animation:ctIn .5s cubic-bezier(.16,1,.3,1) both}
  .ct-brieflist li b{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--cold);font-weight:400}
  .ct-brieflist .ct-empty{color:var(--faint);grid-template-columns:1fr}
  @keyframes ctIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .ct-q .car{animation:none} .ct-brieflist li{animation:none} .ct-prog span{transition:none}
  }
  /* ===== CONTACT — direct ===== */
  .ct-sec{min-height:100vh;min-height:100svh;padding:120px 56px 70px;display:flex;align-items:center}
  .ct-wrap{max-width:1280px;margin:0 auto;width:100%;display:grid;
    grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:start}
  .ct-h1{font-size:clamp(28px,4.2vw,62px);line-height:1.03;margin-top:16px;color:var(--ink)}
  .ct-mail{display:inline-block;margin-top:26px;font-family:var(--head);font-weight:400;
    font-size:clamp(17px,2vw,28px);color:var(--cold);text-decoration:none;
    border-bottom:1px solid rgba(142,162,255,.4);padding-bottom:5px;transition:.3s}
  .ct-mail:hover{color:#fff;border-color:#fff}
  .ct-direct{margin-top:34px;display:flex;flex-direction:column;gap:14px;max-width:560px}
  .ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .ct-direct label{display:flex;flex-direction:column;gap:7px;font-family:'Outfit',sans-serif;
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .ct-direct input,.ct-direct textarea{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
    color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:12px 14px;
    outline:none;transition:.25s;text-transform:none;letter-spacing:0}
  .ct-direct textarea{resize:vertical;min-height:84px;line-height:1.55}
  .ct-direct input:focus,.ct-direct textarea:focus{border-color:var(--cold);background:rgba(142,162,255,.06)}
  .ct-actions{margin-top:4px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .ct-send{border:0;cursor:pointer;font-family:'Outfit',sans-serif}
  .ct-hint{font-size:12px;font-weight:300;color:var(--faint);max-width:280px;line-height:1.5}
  .ct-err{font-size:12px;color:#ff8a8a;font-weight:300}
  .ct-done2 p{margin-top:12px;font-size:15px;font-weight:300;line-height:1.7;color:var(--dim);max-width:460px}
  .ct-switch{display:block;margin-top:46px;border-top:1px solid var(--line);padding-top:20px;
    cursor:pointer;text-decoration:none;max-width:560px;transition:.35s}
  .ct-switch:hover{padding-left:10px}
  .sw-k{display:block;font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--cold)}
  .sw-v{display:block;margin-top:9px;font-family:var(--head);font-weight:400;
    font-size:clamp(19px,2.2vw,30px);color:var(--ink)}
  .sw-v em{font-style:normal;color:var(--cold)}
  .sw-n{display:block;margin-top:8px;font-size:13px;font-weight:300;color:var(--dim)}
  .ct-right{display:flex;flex-direction:column;gap:24px;padding-top:8px}
  .ct-block{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:14px}
  .ct-k{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cold)}
  .ct-v{font-size:15px;font-weight:300;color:var(--ink);line-height:1.6}
  .ct-link{color:var(--ink);text-decoration:none;cursor:pointer;border-bottom:1px solid var(--line);transition:.25s}
  .ct-link:hover{color:var(--cold);border-color:var(--cold)}
  .ct-socials{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
  .ct-socials a{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.25s}
  .ct-socials a:hover{color:var(--cold)}
  /* ===== GUIDED BRIEF — particle field ===== */
  .brief-sec{position:relative;min-height:100vh;min-height:100svh;padding:0;display:flex;align-items:center;
    overflow:hidden;background:#04050a}
  .brief-field{position:absolute;inset:0;width:100%;height:100%;display:block}
  .brief-ui{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;
    padding:110px clamp(22px,5vw,72px) 60px}
  .brief-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;max-width:640px}
  .brief-exit{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--faint);cursor:pointer;text-decoration:none;transition:.25s}
  .brief-exit:hover{color:var(--cold)}
  .brief-step{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--faint);
    font-variant-numeric:tabular-nums}
  .brief-prog{height:1px;background:rgba(255,255,255,.12);margin-top:14px;max-width:640px;overflow:hidden}
  .brief-prog span{display:block;height:100%;width:0;background:var(--cold);
    transition:width .8s cubic-bezier(.16,1,.3,1)}
  .brief-stage{min-height:clamp(260px,40vh,340px);padding-top:38px;max-width:640px}
  /* the receipt is short; the anti-jump floor above would strand the
     "start again" button at the bottom of a 340px void */
  .brief-stage.bf-done{min-height:0}
  .bf-q{font-family:var(--head);font-weight:400;font-size:clamp(24px,3.6vw,50px);line-height:1.05;
    color:#eef1f8;letter-spacing:0;min-height:1.1em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
  .bf-q .car{display:inline-block;width:.5ch;background:var(--cold);margin-left:.08em;
    vertical-align:-0.08em;height:.9em;animation:ctCar 1s steps(1) infinite}
  .bf-opts{margin-top:28px;display:flex;flex-direction:column;max-width:560px}
  .bf-opt{display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:14px;padding:12px 4px;
    border-top:1px solid rgba(255,255,255,.12);background:none;cursor:pointer;text-align:left;
    font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;color:rgba(238,242,255,.62);
    transition:.3s cubic-bezier(.16,1,.3,1)}
  .bf-opt:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
  .bf-opt .n{font-size:11px;letter-spacing:.08em;color:rgba(238,242,255,.35)}
  .bf-opt .go{opacity:0;color:var(--cold);transition:.3s}
  .bf-opt:hover,.bf-opt:focus-visible{color:#fff;padding-left:12px;outline:none}
  .bf-opt:hover .go,.bf-opt:focus-visible .go{opacity:1}
  .bf-fields{margin-top:28px;display:flex;flex-direction:column;gap:15px;max-width:520px}
  .bf-fields label{display:flex;flex-direction:column;gap:7px;font-family:'Outfit',sans-serif;
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(238,242,255,.45)}
  .bf-fields input,.bf-fields textarea{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
    color:#eef1f8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
    padding:12px 14px;outline:none;transition:.25s;text-transform:none;letter-spacing:0}
  .bf-fields textarea{resize:vertical;min-height:100px;line-height:1.55}
  .bf-fields input:focus,.bf-fields textarea:focus{border-color:var(--cold);background:rgba(142,162,255,.1)}
  .brief-nav{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .brief-back{background:none;border:0;cursor:pointer;font-family:'Outfit',sans-serif;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;color:rgba(238,242,255,.45);padding:0;transition:.25s}
  .brief-back:hover{color:var(--cold)}
  .brief-sum{list-style:none;margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;max-width:640px}
  .brief-sum li{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.05em;
    border:1px solid rgba(142,162,255,.4);border-radius:100px;padding:6px 13px;color:rgba(238,242,255,.8);
    animation:ctIn .5s cubic-bezier(.16,1,.3,1) both}
  @media(max-width:980px){
    .ct-sec{padding:96px 22px 60px;min-height:auto}
    .ct-wrap{grid-template-columns:1fr;gap:40px}
    .ct-row2{grid-template-columns:1fr}
    .brief-ui{padding:96px 22px 50px}
  }
  @media (prefers-reduced-motion:reduce){
    .bf-q .car{animation:none} .brief-sum li{animation:none} .brief-prog span{transition:none}
  }
  /* ===== GUIDED BRIEF — centred + minimal ===== */
  /* The exit pill is absolutely positioned while the intake block is centred,
     so on a short window the centred content rose INTO the pill: measured
     overlapping at 390x700, 390x560, 360x640, 1024x600 and 1440x540, and
     clear only on tall viewports. Deriving the top padding from the pill's own
     position and height means the two cannot drift apart again. */
  .brief-sec{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
    overflow:hidden;background:#04050a;padding:0;
    --head-clear:104px}
  .brief-ui{position:relative;z-index:2;width:100%;max-width:720px;margin:0 auto;
    padding:var(--head-clear) clamp(22px,4vw,40px) 108px;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;justify-content:center}
  /* The column is question, answers-so-far, then the escape hatch. The DOM
     order puts the pill first because it used to be pinned top-left, so the
     order property reseats it without moving the markup. */
  .brief-core{order:1} .brief-sum{order:2} .brief-exit{order:3}
  /* Sat under the fixed header, which swallowed the click. It was then pinned
     clear of it at the top left, where it read as a header control competing
     with the question. It now closes the column, centred: an escape hatch you
     meet after the intake rather than before it. */
  .brief-exit{position:static;z-index:130;margin:30px auto 0;
    display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:100px;
    font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:#eef1f8;text-decoration:none;cursor:pointer;
    background:rgba(238,242,255,.07);border:1px solid rgba(238,242,255,.22);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:background .25s,border-color .25s,color .25s,transform .25s}
  .brief-exit .be-m{color:var(--cold);letter-spacing:.04em;text-transform:none;opacity:.78}
  .brief-exit:hover{background:rgba(142,162,255,.16);border-color:var(--cold);transform:translateY(-1px)}
  .brief-exit:focus-visible{outline:2px solid var(--cold);outline-offset:3px}
  @media(max-width:640px){.brief-sec{--head-clear:92px}
    .brief-exit{padding:10px 14px;font-size:11px;margin-top:24px}
    /* the address used to be hidden here, so the button read only
       "JUST EMAIL US" and never showed where it goes. It wraps under the
       label instead of being dropped. */
    .brief-exit{flex-wrap:wrap;max-width:calc(100vw - 44px)}
    .brief-exit .be-m{font-size:10px}}
  .brief-core{width:100%}
  .brief-speaker{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px}
  .sp-orb{width:7px;height:7px;border-radius:50%;background:var(--cold);
    box-shadow:0 0 14px rgba(142,162,255,.9);animation:spPulse 2.4s ease-in-out infinite}
  .sp-orb.think{animation:spThink .7s ease-in-out infinite}
  @keyframes spPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
  @keyframes spThink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.5)}}
  .sp-n{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(238,242,255,.42)}
  .bf-q{font-family:var(--head);font-weight:400;font-size:clamp(22px,3.2vw,42px);line-height:1.12;
    color:#eef1f8;letter-spacing:0;min-height:1.15em;max-width:620px;margin:0 auto}
  .bf-q .car{display:inline-block;width:.42ch;background:var(--cold);margin-left:.1em;
    vertical-align:-0.06em;height:.86em;animation:ctCar 1s steps(1) infinite}
  .bf-dots{display:inline-flex;gap:6px;align-items:center;height:1.1em}
  .bf-dots i{width:5px;height:5px;border-radius:50%;background:rgba(238,242,255,.6);
    animation:bfD 1.1s ease-in-out infinite}
  .bf-dots i:nth-child(2){animation-delay:.16s}.bf-dots i:nth-child(3){animation-delay:.32s}
  @keyframes bfD{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
  .bf-opts{margin:32px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:600px}
  .bf-opt{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:100px;
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);cursor:pointer;
    font-family:'Outfit',sans-serif;font-size:14px;font-weight:300;color:rgba(238,242,255,.72);
    transition:.3s cubic-bezier(.16,1,.3,1)}
  .bf-opt .n{font-size:10px;letter-spacing:.06em;color:rgba(238,242,255,.3)}
  .bf-opt:hover,.bf-opt:focus-visible{color:#fff;border-color:var(--cold);
    background:rgba(142,162,255,.12);transform:translateY(-2px);outline:none}
  .bf-fields{margin:32px auto 0;display:flex;flex-direction:column;gap:14px;max-width:440px;text-align:left}
  .bf-fields label{display:flex;flex-direction:column;gap:7px;font-family:'Outfit',sans-serif;
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,242,255,.4)}
  .bf-fields input,.bf-fields textarea{font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
    color:#eef1f8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
    padding:12px 14px;outline:none;transition:.25s;text-transform:none;letter-spacing:0}
  .bf-fields textarea{resize:vertical;min-height:96px;line-height:1.55}
  .bf-fields input:focus,.bf-fields textarea:focus{border-color:var(--cold);background:rgba(142,162,255,.1)}
  .brief-nav{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
  .brief-foot{position:absolute;left:0;right:0;bottom:34px;display:flex;align-items:center;gap:16px;
    padding:0 clamp(22px,4vw,40px)}
  .brief-prog{flex:1;height:1px;background:rgba(255,255,255,.14);overflow:hidden}
  .brief-prog span{display:block;height:100%;width:0;background:var(--cold);
    transition:width .8s cubic-bezier(.16,1,.3,1)}
  .brief-step{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.1em;
    color:rgba(238,242,255,.4);font-variant-numeric:tabular-nums}
  .brief-back{background:none;border:0;cursor:pointer;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;color:rgba(238,242,255,.4);padding:0;transition:.25s}
  .brief-back:hover{color:var(--cold)}
  /* The running summary was absolutely positioned at bottom:66px, so it
     reserved no space. Once the option list grew past four or five pills the
     centred stage ran straight through it and the answers-so-far chips landed
     on top of the live options (visible from step 06 onward). It sits in the
     flow under the stage now, so the two can never occupy the same band. */
  .brief-sum{position:static;margin:26px auto 0;list-style:none;display:flex;flex-wrap:wrap;
    justify-content:center;gap:7px;padding:0;max-width:640px;width:100%}
  .brief-sum li{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.05em;
    border:1px solid rgba(142,162,255,.3);border-radius:100px;padding:4px 11px;
    color:rgba(238,242,255,.55);animation:ctIn .5s cubic-bezier(.16,1,.3,1) both}
  /* keeps the exit-pill clearance; a flat top value here re-created the
     overlap the calc above exists to prevent */
  @media(max-width:980px){.brief-ui{padding:var(--head-clear) 22px 104px}.bf-opts{gap:7px}}
  @media (prefers-reduced-motion:reduce){
    .sp-orb,.bf-dots i,.bf-q .car,.brief-sum li{animation:none}
    .brief-prog span{transition:none}
  }
  /* ===== #aboutRoot — cancel properties leaking from the global .panel / .cta rules =====
     .panel globally is a card (column, flex-end, border, gradient); About uses it as a
     full-viewport slide. .cta globally is a 70vh section; About uses it as a button. */
  #aboutRoot .panel{flex-direction:row;justify-content:flex-start;border:0;border-radius:0;
    background:none;overflow:visible;min-height:0}
  /* three of the four panels declare column at lower specificity than the fix above */
  #aboutRoot .p-intro,#aboutRoot .p-team,#aboutRoot .p-virtual,#aboutRoot .p-clients{
    flex-direction:column;justify-content:center}
  #aboutRoot .p-intro{text-align:center}
  #aboutRoot .close .cta{min-height:0;display:inline-flex;align-items:center;justify-content:center;
    width:auto;align-self:center;cursor:pointer}
  #aboutRoot .collhead .cta{min-height:0}
  /* ===== #aboutRoot — the global section{display:flex;justify-content:center} rule was
     centring each sticky rig inside its own tall scroll track. teamSec is 7200px with a
     900px sticky child, so the child sat 3150px down: the section began with 3.5 screens
     of nothing, and scroll progress was already past members 1 and 2 by the time it
     appeared. Both scroll rigs must be plain block flow. */
  #aboutRoot .teamSec,#aboutRoot .collSec{display:block;justify-content:flex-start;min-height:0}
  /* ===================================================================
     RESPONSIVE SYSTEM  ·  appended last so it wins over the ad-hoc
     860/900/980 queries already in the file.
     phone ≤600 · tablet 601–900 · tablet-landscape/small-laptop 901–1180
     laptop 1181–1600 (default) · desktop 1601–1999 · 2K 2000+
     =================================================================== */
  /* ---------- 2K and large desktop: stop pinning content to 1280 ---------- */
  /* ---------- desktop 1920x1080 ---------- */
  @media(min-width:1920px){
    .wrap{padding-left:5vw;padding-right:5vw}
    .sd-wrap,.deck,.ct-wrap,.pnl,.brief-sum{max-width:1560px}
    .wf-body,.sd-panel .pnl{max-width:1560px}
    .brief-ui{max-width:840px}
    body{font-size:16px}
    body p{font-size:15px}
    .body{max-width:640px;font-size:16px}
    body h2{max-width:640px}
    .wwd-slides{max-width:1120px}
    .cb-in,.sb-in,.wwa-lines{max-width:1240px}
    .sd-stack>section,.ct-sec{padding-left:64px;padding-right:64px}
    .rail,.sd-cases-head,.rail-hint{padding-left:64px;padding-right:64px}
  }
  /* ---------- desktop 2560x1440 ---------- */
  @media(min-width:2560px){
    .sd-wrap,.deck,.ct-wrap,.pnl,.brief-sum{max-width:1920px}
    .wf-body,.sd-panel .pnl{max-width:1920px}
    .brief-ui{max-width:960px}
    body{font-size:18px;line-height:1.7}
    body p{font-size:17px}
    .body{max-width:720px;font-size:18px}
    body h2{font-size:clamp(30px,2.1vw,64px);max-width:760px}
    .bf-q{font-size:clamp(30px,2.3vw,60px)}
    .wwd-slides{max-width:1360px}
    .cb-in,.sb-in,.wwa-lines{max-width:1520px}
    .sd-stack>section,.ct-sec{padding-left:96px;padding-right:96px}
    .rail,.sd-cases-head,.rail-hint{padding-left:96px;padding-right:96px}

  }
  
  /* ---------- tablet landscape / small laptop: 3-up grids are too tight ---------- */
  @media(min-width:901px) and (max-width:1180px){
    .offers.cols-3{grid-template-columns:repeat(2,1fr);gap:30px}
    .ipgrid,.vband,.hubgrid,.sd-steps,.steps-4{grid-template-columns:repeat(2,1fr)}
    .csgrid{grid-template-columns:repeat(2,1fr)}
    .ct-wrap{gap:40px}
    .sd-need{gap:40px}
    .sx-row{grid-template-columns:52px 1fr auto 220px 64px;gap:18px}
  }
  /* ---------- tablet portrait and below ---------- */
  @media(max-width:900px){
    .conv-foot{flex-wrap:wrap;gap:14px}
    .wf-ribbon{gap:26px}.wf-ribbon img{height:22px}
    /* tap targets: these are 22px links today */
    .ct-socials a,.cf-socials a,.cf-nav a,.ct-link,
    .brief-exit,.sx-back,.end-back,.brief-back,.ct-mail{
      min-height:44px;display:inline-flex;align-items:center}

    /* 15px inputs make iOS zoom the page on focus */
    .ct-direct input,.ct-direct textarea,.bf-fields input,.bf-fields textarea{font-size:16px}
  }
  /* ---------- phone ---------- */
  @media(max-width:600px){
    /* nothing below 12px on a handset */
    .dk-lbl,.ct-k,.sc-n,.rc-n,.ci-n,.pnl-tag,.sx-n,.sx-go,.off-tag,.stn,
    .brief-step,.acc-lbl,.cl-lbl,.sr-num,.c3d-cap,.dscan-cap,.sp-n{font-size:12px}
    .brief-sum li,.sc-tags span,.chip,.cs-tags span{font-size:12px;padding:6px 12px}
    .sd-hero h1{font-size:clamp(22px,7.4vw,32px)}
    .lab-h1,.ct-h1{font-size:clamp(24px,7.6vw,34px)}
    .bf-q{font-size:clamp(21px,6.4vw,30px)}
    .bf-opt{padding:13px 16px;font-size:15px}
    .sd-panel .vslot,.sd-panel .vslot-tall{height:clamp(160px,32vh,240px)}
    .vband-2{grid-template-columns:1fr}
    .sd-panel .vshot{height:auto;max-height:40vh}
    .railcard{flex:0 0 84vw}
    .brief-ui{padding:var(--head-clear) 18px 110px}
    .brief-foot{bottom:26px;padding:0 18px}
    .brief-sum{padding:0}
    .ct-sec{padding:88px 18px 48px}
    .accred{gap:14px}
    .acc-real .adg{height:28px}
  }
  @media(max-width:900px){
    /* touch sizing applies to tablets as well as handsets */
    .rn-lbl,.sd-k,.sd-v,.cue,.eyebrow,.realtag,.count,.rr,.seeall,.fluidslot{font-size:11px}
    /* filters and buttons were 20–39px tall; 44 is the minimum comfortable target */
    .tf,.sf,.secdrop-btn,.fakebtn,.ct-send,.rail-btn{
      min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    .tf,.sf{padding:0 14px}
  }
  /* ---------- very small handsets ---------- */
  @media(max-width:600px){
    .conv-dots{flex-wrap:wrap;max-width:100%;justify-content:center}
    .conv-dots i{width:26px}
    .conv-foot{justify-content:center;text-align:center}
  }
  /* ---------- handsets: iPhone 12+ (390-430px) and Samsung Galaxy (360-412px) ---------- */
  @media(max-width:430px){
    .wrap{padding-left:18px;padding-right:18px}
    .sd-stack>section,.ct-sec{padding-left:18px;padding-right:18px}
    .rail,.sd-cases-head,.rail-hint{padding-left:18px;padding-right:18px}
    .hero h1{font-size:clamp(30px,10.5vw,42px);white-space:normal}
    body h2{font-size:clamp(24px,7.8vw,32px)}
    .three,.team-grid,.cards4,.lab-grid,.index-grid,.csgrid,.offers.cols-3,
    .ipgrid,.vband,.hubgrid,.sd-steps,.steps-4{grid-template-columns:1fr}
    .railcard{flex:0 0 88vw}
    .conv-vp .ccard{min-width:86vw}

    .footer{flex-direction:column;gap:10px;align-items:flex-start;padding-left:18px;padding-right:18px}
    .ct-send,.fakebtn,.bf-opt{width:100%}
    .ct-form,.ct-fields,.bf-fields{max-width:100%}
    .meta-row{grid-template-columns:1fr 1fr;gap:18px}
    body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  }
  @media(max-width:380px){
    .sd-stack>section{padding-left:16px;padding-right:16px}
    .bf-opts{gap:6px}
    .bf-opt{padding:12px 13px;font-size:14px}
  }
  /* ===== noise field — persistent background layer (landing) ===== */
  #nf{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;
    pointer-events:none;background:var(--bg)}
  /* The field shows through the open, typographic beats only. The content-dense
     sections (who we are, what we do, who we do it for, selected work) keep their
     own ground — their layouts were built on it and near-black text over a live
     field is unreadable. They stay tagged so the field's state stays continuous
     underneath and is already correct when it reappears. */
  #p-landing .hero,
  #p-landing .breath,
  #p-landing .spaces-band,
  #p-landing .collective-band,
  #p-landing .close-sec,
  /* the light beat: who we are is typographic, so the inverted field shows here */
  #p-landing .wwa-scroll,
  #p-landing .wwa-stage,
  #p-landing .whofor,
  #p-landing .reelwwd{background:transparent}
  /* selected work carries the project conveyor; the field competes with it,
     so this beat keeps its own clean ground. The boundary transition still
     plays at its edges. */
  #p-landing .conv-section{background:var(--cream)}
  #p-landing .conv-section.conv-dark{background:#070a16}
  /* The field shows through this beat, so the copy was landing on the bright
     core of the orb and losing all contrast. A scrim sits under the text and
     over the field: z-index 2 keeps it below .rw-wwd (3) and .rw-reel (4). */
  #p-landing .rw-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(125% 95% at 32% 50%,rgba(4,5,10,.88) 0%,rgba(4,5,10,.76) 42%,rgba(4,5,10,.5) 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  #p-landing .wwd-slide h2,#p-landing .wwd-slide p,#p-landing .wwd-slide .wnum,
  #p-landing .wwd-head .eyebrow{text-shadow:0 2px 30px rgba(4,5,10,.9)}
  @media(max-width:980px){
    /* Unstuck and stacked, the stage has no height of its own to paint, so the
       scrim moves onto the block itself. It fades out at both ends rather than
       stopping at a hard edge, so it bleeds into the sections above and below
       instead of reading as a pasted-on panel. */
    #p-landing .rw-stage::before{display:none}
    #p-landing .rw-wwd{background:linear-gradient(180deg,
      rgba(4,5,10,0) 0%,
      rgba(4,5,10,.72) 9%,
      rgba(4,5,10,.9) 32%,
      rgba(4,5,10,.9) 68%,
      rgba(4,5,10,.72) 91%,
      rgba(4,5,10,0) 100%)}
  }
  #p-landing .hero h1,#p-landing .hero .sub{text-shadow:0 2px 40px rgba(4,5,10,.8)}
  #p-landing .breath:not(.breath-light) .lead,#p-landing .close-sec .lead{text-shadow:0 2px 40px rgba(4,5,10,.8)}
  @media (prefers-reduced-motion:reduce){#nf{opacity:.55}}
  /* work tiles: upcoming projects read as forthcoming, not live */
  #workGrid .tile[data-upcoming] .t-meta h3::after{
    content:"Upcoming";display:inline-block;margin-left:9px;vertical-align:middle;
    font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:400;color:var(--cold);border:1px solid rgba(142,162,255,.45);
    border-radius:100px;padding:3px 9px}
  #workGrid .tile[data-upcoming] .t-media{opacity:.55}
  #workGrid .tile[data-upcoming] .t-media{opacity:.55}
  /* ===== tag slider — 34 tags in one line, not a wall ===== */
  #workGrid .tagslider{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
  #workGrid .tagtrack{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
  #workGrid .tagtrack::-webkit-scrollbar{display:none}
  #workGrid .tagtrack.dragging{cursor:grabbing;scroll-behavior:auto}
  #workGrid .disc-row{display:flex;flex-wrap:nowrap;gap:0 26px;align-items:baseline;
    padding:0 2px;width:max-content;flex:none}
  #workGrid .disc-row .tf{flex:0 0 auto;white-space:nowrap}
  /* the tags are a text menu, so the controls stay type not chrome */
  #workGrid .tag-nav{flex:none;width:18px;height:34px;border:0;background:none;
    color:var(--cream-dim);cursor:pointer;font-size:15px;line-height:1;padding:0;
    display:flex;align-items:center;justify-content:center;transition:.25s;opacity:.55}
  #workGrid .tag-nav:hover{color:var(--indigo);opacity:1}
  #workGrid .tag-nav:disabled{opacity:.12;cursor:default}
  @media(max-width:900px){
    #workGrid .tagslider{width:100%}
    #workGrid .tag-nav{display:none}
    #workGrid .filterline{flex-wrap:wrap;gap:12px}
  }
  /* ===== tag slider — designed ===== */
  #workGrid .filterbar{padding-bottom:0}
  #workGrid .tagslider{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0}
  #workGrid .tagtrack{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
  #workGrid .tagtrack::-webkit-scrollbar{display:none}
  #workGrid .tagtrack.dragging{cursor:grabbing;scroll-behavior:auto}
  #workGrid .disc-row{display:flex;flex-wrap:nowrap;gap:0;align-items:stretch;
    padding:0;width:max-content;flex:none}
  #workGrid .disc-row .tf{position:relative;flex:0 0 auto;white-space:nowrap;
    display:inline-flex;align-items:baseline;gap:6px;
    padding:14px 17px 15px;border:0;background:none;cursor:pointer;
    font-family:'Outfit',sans-serif;font-size:14px;font-weight:300;letter-spacing:0;
    /* These used the CREAM tokens - ink #0b0d12 on the grid's #05060c - so the
       selected filter measured 1.04:1 and simply could not be seen, and the
       unselected ones sat at 3.06:1. #workGrid declares its own dark-theme
       tokens; use those. */
    text-transform:none;color:var(--faint);transition:color .28s cubic-bezier(.16,1,.3,1)}
  #workGrid .disc-row .tf .tf-n{font-size:10px;font-weight:400;color:#b8bccc;
    transition:color .28s;font-variant-numeric:tabular-nums}
  /* the rule under the row is the track; the active tag lights its own segment */
  #workGrid .disc-row .tf::after{content:"";position:absolute;left:12px;right:12px;bottom:0;
    height:1px;background:var(--indigo);transform:scaleX(0);transform-origin:center;
    transition:transform .4s cubic-bezier(.16,1,.3,1)}
  #workGrid .disc-row .tf:hover{color:var(--ink)}
  #workGrid .disc-row .tf:hover .tf-n{color:var(--indigo)}
  #workGrid .disc-row .tf:hover::after{transform:scaleX(.4)}
  #workGrid .disc-row .tf.on{color:var(--cold);font-weight:500}
  #workGrid .disc-row .tf.on .tf-n{color:var(--cold)}
  #workGrid .disc-row .tf.on::after{transform:scaleX(1)}
  #workGrid .disc-row .tf:focus-visible{outline:2px solid var(--indigo);outline-offset:-4px}
  #workGrid .tag-nav{flex:none;width:26px;border:0;background:none;color:var(--cream-dim);
    cursor:pointer;font-size:14px;line-height:1;padding:0;display:flex;align-items:center;
    justify-content:center;transition:.25s;opacity:.45}
  #workGrid .tag-nav:hover{color:var(--indigo);opacity:1}
  #workGrid .tag-nav:disabled{opacity:.1;cursor:default}
  #workGrid .filterline{align-items:stretch;border-bottom:1px solid var(--cream-line)}
  #workGrid .secdrop{align-self:center;margin-left:14px}
  @media(max-width:900px){
    #workGrid .tagslider{width:100%;order:2}
    #workGrid .tag-nav{display:none}
    #workGrid .filterline{flex-wrap:wrap;gap:0}
    #workGrid .secdrop{order:1;margin:0 0 10px}
    #workGrid .disc-row .tf{padding:12px 13px 13px;font-size:13px}
  }
  /* four geometry markers that drive the colour ramp through "what we do".
     They paint nothing; the field reads their bounds. */
  #p-landing .rw-band{position:absolute;left:0;width:100%;height:25%;
    pointer-events:none;opacity:0}
  #p-landing .rw-band:nth-of-type(1){top:0}
  #p-landing .rw-band:nth-of-type(2){top:25%}
  #p-landing .rw-band:nth-of-type(3){top:50%}
  #p-landing .rw-band:nth-of-type(4){top:75%}
  /* the field shows behind these two, so their grounds step aside */
  #aboutRoot .p-intro{background:transparent}
  #p-contact .ct-sec{background:transparent}
/* sector imagery — consumed as classes so relative urls resolve against this
   stylesheet. Each carries its own focal point: the cards and hero panels crop
   a band out of a tall portrait, and centre would cut the subject's face. */
.sec-bg-1{background-image:url(../img/sectors/beauty.webp);background-position:52% 64%}
.sec-bg-2{background-image:url(../img/sectors/fashion.webp);background-position:50% 24%}
.sec-bg-3{background-image:url(../img/sectors/real-estate.webp);background-position:58% 66%}
.sec-bg-4{background-image:url(../img/sectors/gaming.webp);background-position:50% 42%}
.sec-bg-5{background-image:url(../img/sectors/culture.webp);background-position:50% 34%}
.sec-bg-6{background-image:url(../img/sectors/business.webp);background-position:50% 30%}
/* hero framing: .sd-hero is a wide 354px band, so cover scales by WIDTH and
   the card focal points land far too high — the jacket and the lipstick both
   fall out of frame. These are measured against the hero box, not the card. */
.sd-hero.sec-bg-1{background-position:44% 60%}
.sd-hero.sec-bg-2{background-position:50% 62%}
.sd-hero.sec-bg-3{background-position:56% 72%}
.sd-hero.sec-bg-5{background-position:50% 30%}
/* the new fashion and culture frames are near-white where the kicker sits,
   so those two heroes carry a deeper scrim rather than a dimmed image */
.sd-hero.sec-bg-2 .sd-scrim,
.sd-hero.sec-bg-5 .sd-scrim{background:linear-gradient(180deg,rgba(5,6,10,.86) 0%,rgba(5,6,10,.62) 46%,rgba(5,6,10,.96) 100%)}
  /* ═══ COLLECTIVE — swirl map, constellation, commissions board ═══════
     All three live on the stacking-panel page, so every piece is sized in
     vh and clamps: the panel is 100vh with overflow hidden and cannot grow. */
  /* ── 1 · swirl map ─────────────────────────────────────────────────── */
  .swm-wrap{position:relative;margin-top:14px}
  .swm{position:relative;width:100%;height:clamp(280px,54vh,560px)}
  .swm-svg{width:100%;height:100%;display:block;overflow:visible}
  .swm-ring{fill:none;stroke:rgba(11,13,18,.72);stroke-width:1px;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
  .swm-t{opacity:1}
  .swm-tring{fill:none;stroke:var(--indigo);stroke-width:.7px;stroke-linejoin:round;
    opacity:.42;vector-effect:non-scaling-stroke}
  .swm-t.is-home .swm-tring{stroke:var(--cream-ink);opacity:.45}
  .swm-t.is-hot .swm-tring{opacity:.95}
  .swm-t.is-out{opacity:.1}
  .swm-arc{fill:none;stroke:var(--indigo);stroke-width:1px;opacity:.38;vector-effect:non-scaling-stroke}
  .swm-arc.is-out{opacity:.06}
  .swm-w{opacity:1}
  .swm-w.is-out{opacity:.14}
  .swm-lead{stroke:rgba(11,13,18,.3);stroke-width:.7px;vector-effect:non-scaling-stroke}
  .swm-tie{stroke:rgba(11,13,18,.22);stroke-width:.7px;stroke-dasharray:2 3;
    vector-effect:non-scaling-stroke}
  .swm-pin{fill:var(--cream-ink)}
  .swm-hit{fill:transparent;cursor:pointer}
  .swm-lbl{pointer-events:none}
  .swm-lbl-n{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.1em;fill:var(--cream-dim)}
  .swm-lbl-c{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;fill:var(--cream-ink)}
  .swm-w.is-hot .swm-lbl-n{fill:var(--cream-ink)}
  .swm-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:4;
    background:var(--cream-ink);color:#fff;padding:9px 13px;min-width:150px;
    opacity:0;transition:opacity .18s ease}
  .swm-tip.on{opacity:1}
  .swm-tip b{display:block;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600}
  .swm-tip span{display:block;margin-top:2px;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.06em;color:var(--cold)}
  .swm-tip em{display:block;margin-top:6px;font-style:normal;font-size:10px;line-height:1.5;
    color:rgba(255,255,255,.6)}
  .swm-bar{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline;justify-content:space-between}
  .swm-count{font-size:13px;color:var(--cream-dim)}
  .swm-count b{font-family:'Outfit',sans-serif;font-size:19px;font-weight:600;color:var(--cream-ink)}
  .swm-count span{color:var(--indigo)}
  .swm-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
  .swm-f-lbl{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--cream-dim);margin-right:6px}
  .swm-f{font:inherit;font-size:11px;border:1px solid var(--cream-line);border-radius:100px;
    padding:6px 13px;color:var(--cream-ink);background:none;cursor:pointer;
    transition:border-color .2s ease,background .2s ease,color .2s ease}
  .swm-f:hover{border-color:var(--indigo);color:var(--indigo)}
  .swm-f.on{background:var(--cream-ink);border-color:var(--cream-ink);color:#fff}
  .swm-failed::after{content:"Map data unavailable offline";position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--cream-dim)}
  /* ── 2 · the Collective as a turning body ─────────────────────────── */
  .cst-hold{display:grid;gap:20px;margin-top:16px}
  .cst{position:relative;height:clamp(300px,46vh,520px);background:var(--cream);overflow:hidden}
  .cst-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .cst-over{position:absolute;inset:0;width:100%;height:100%}
  .cst-ray{stroke:rgba(11,13,18,.20);stroke-width:.7px;vector-effect:non-scaling-stroke;
    transition:stroke .25s ease}
  .cst-node-d{fill:var(--indigo);opacity:.55;transition:fill .25s ease,opacity .25s ease}
  .cst-tick{fill:rgba(11,13,18,.28)}
  .cst-rim{fill:none;stroke:rgba(76,99,255,.20);stroke-width:.7px;vector-effect:non-scaling-stroke}
  .cst-dust circle{fill:rgba(11,13,18,.18)}
  .cst-hit{fill:transparent;cursor:pointer}
  .cst-spoke.on .cst-ray{stroke:rgba(76,99,255,.75)}
  .cst-spoke.on .cst-node-d{fill:var(--cream-ink);opacity:1}
  .cst-t{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.01em;
    fill:var(--cream-ink);pointer-events:none;transition:fill .2s ease}
  .cst-num{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.06em;
    fill:var(--cream-dim);pointer-events:none;transition:fill .2s ease}
  .cst-spoke.on .cst-t{font-weight:600}
  .cst-spoke.on .cst-num{fill:var(--indigo)}
  .cst-read{border-left:2px solid var(--cream-line);padding-left:16px;max-width:600px;
    opacity:.55;transition:opacity .3s ease,border-color .3s ease}
  .cst-read.on{opacity:1;border-color:var(--indigo)}
  .cst-r-n{display:block;font-family:'Outfit',sans-serif;font-size:clamp(14px,1.4vw,17px);
    font-weight:600;color:var(--cream-ink)}
  .cst-r-c{display:block;margin-top:3px;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--indigo)}
  .cst-read p{margin-top:8px;font-size:12px;line-height:1.6;font-weight:300;color:var(--cream-dim)}
  .cst-read .cst-r-t{display:block;margin-top:9px;font-family:'Outfit',sans-serif;font-size:11px;
    letter-spacing:.07em;color:var(--cream-ink);opacity:.7}
  /* ── 3 · commissions board ─────────────────────────────────────────── */
  .opb{margin-top:18px;border-top:1px solid var(--line)}
  .opb-head,.opb-row{display:grid;grid-template-columns:2.1fr .9fr .9fr .6fr;
    gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
  .opb-h-n{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint)}
  .opb-row{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
  .opb.in .opb-row{opacity:1;transform:none}
  .opb-row.is-closed{opacity:0;}
  .opb.in .opb-row.is-closed{opacity:.4}
  .opb-role{font-family:'Outfit',sans-serif;font-size:clamp(14px,1.4vw,17px);font-weight:500;color:var(--ink)}
  .opb-role em{display:block;margin-top:5px;font-style:normal;font-family:inherit;
    font-size:12px;line-height:1.55;font-weight:300;color:var(--dim)}
  .opb-cell{font-size:12px;color:var(--dim)}
  .opb-r{text-align:right}
  .opb-pill{font-family:'Outfit',sans-serif;font-style:normal;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;border:1px solid;border-radius:100px;padding:5px 11px;white-space:nowrap}
  .p-open{color:var(--own);border-color:rgba(138,255,196,.42)}
  .p-filling{color:var(--cold);border-color:rgba(142,162,255,.42)}
  .p-closed{color:var(--faint);border-color:var(--line)}
  .opb-foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
    padding-top:14px;font-size:12px;color:var(--dim)}
  .opb-foot b{font-family:'Outfit',sans-serif;font-size:15px;color:var(--own)}
  @media(max-width:980px){
    .cst{height:clamp(300px,46vh,400px)}
    .swm{height:clamp(220px,42vh,360px)}
    .opb-head{display:none}
    .opb-row{grid-template-columns:1fr auto;gap:6px 14px}
    .opb-row .opb-cell:nth-of-type(1){grid-column:1}
    .opb-role{grid-column:1/-1}
    .opb-r{grid-column:2;grid-row:2}
  }
  @media(max-width:600px){
    .opb-h-n,.swm-f-lbl,.cst-r-c,.opb-pill,.cst-row-c{font-size:12px}
    .swm-filters{gap:6px}
    .swm-f{font-size:12px;padding:6px 12px}
  }
/* The field's light region drifts horizontally across the hero. The headline
   is set on a dark theme, so when that bloom travels under it the copy loses
   its ground. A soft elliptical plate rides with the text and holds the
   contrast steady no matter where the field's light happens to be.

   The plate reaches the hero's bottom edge rather than fading out above it.
   It stays CENTRED on the text, so the gradient's darkest point is still the
   headline and every stop is still measured outward from it. .center sits at
   top:51%, so the text centre is 49% of the hero above the bottom edge and a
   half-height of 49svh puts the plate's bottom exactly there: 98svh total.
   The matching overflow above the text is clipped by .hero{overflow:hidden}.
   98vh is declared first for engines without svh; max() holds the plate to
   the hero's 640px min-height floor on a very short viewport.

   Alphas are 22% of their original values (.92 .86 .55 became .20 .19 .12),
   so much more of the field reads through while the falloff keeps its shape.
   The last stop is 100% rather than 82% so the veil thins out AT the bottom
   edge instead of vanishing 20px above it. */
.hero .center::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:98vh;height:max(98svh,627px);pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,
    rgba(4,5,12,.20) 0%, rgba(4,5,12,.19) 34%, rgba(4,5,12,.12) 62%, rgba(4,5,12,0) 100%);
}
.hero .center > *{position:relative;z-index:1}
.wwd-slide p{color:#fff}

/* .sr-name and .wf-ribbon span were #b8bccc, about 2.1:1 on white. The pale
   inactive state is deliberate, but it was below the readable floor, so the
   ramp is re-pitched: inactive --cream-dim (6.6:1), hover --indigo, active
   --cream-ink. Three states that still read as three, all readable, all
   palette values. The two #b8bccc borders are untouched. */

/* Three hardcoded greys sat at 2.20:1, 2.63:1 and 3.16:1 on white, all under
   the 4.5:1 floor: #a9afbc, #9aa0ab and #8a9299. They bypassed the token
   system entirely, which is why brightening --dim never reached them. Now
   --cream-dim (#565d6b, 6.62:1), which is already the light-surface
   secondary. Active states are unchanged so the contrast between an active
   and inactive row still reads. */

/* ── Orphan control ──────────────────────────────────────────────────
   House rule: no word is left alone on the last line.

   text-wrap:balance evens the line lengths and genuinely fixes it, but the
   browser only applies it to short blocks (Chrome caps around six lines), so
   it covers headings and short copy. Longer paragraphs are handled at runtime
   by js/orphans.js, which binds the last two words with a non-breaking space.
   pretty is deliberately NOT used here: measured on about.html it left a 47px
   last line untouched, identical to normal. */
h1, h2, h3, h4, h5, h6,
.module-title, .st, .ct, .lede, .sub, figcaption, blockquote, summary {
  text-wrap: balance;
}
p, li, dd, dt, .meta-v { text-wrap: pretty; }

/* ── Selected Work card palettes ─────────────────────────────────────
   One palette per project, matching the work rather than an abstract
   scheme: the cards used to be nine near-identical pale lavenders, so a
   collapsed card told you nothing.

   Each is three stops running light at the head to dark at the foot. That
   ordering is deliberate: the title sits at the foot, so it always lands on
   the dark stop and stays legible. Measured white-on-foot: 8.75:1 to 19.43:1.
   --num is the head number, dark by default; PixelPaint's red head measures
   4.38:1 against dark, so that one takes white instead.

   A deliberate exception to "never invent a colour": no per-project palette
   existed. Kept as tokens so all nine are changeable in one place. */
.ccard{ --g1:#8b96ad; --g2:#6c7689; --g3:#0b0d12; --num:rgba(255,255,255,.7); }
.ccard[data-proj="pixelpaint"]        { --g1:#e0343f; --g2:#2b4de0; --g3:#0a0d18; --num:rgba(255,255,255,.86); }
.ccard[data-proj="optiverse"]         { --g1:#7c8698; --g2:#3a4150; --g3:#0b0d12; --num:rgba(11,13,18,.72); }
.ccard[data-proj="pylon"]             { --g1:#5ab0ff; --g2:#1f5fc4; --g3:#0d2551; --num:rgba(11,13,18,.72); }
.ccard[data-proj="metagenus"]         { --g1:#ff5ea8; --g2:#8b46d6; --g3:#2c3bb5; --num:rgba(11,13,18,.72); }
.ccard[data-proj="hind-al-oud"]       { --g1:#e2b869; --g2:#a9793c; --g3:#4a3418; --num:rgba(11,13,18,.72); }
.ccard[data-proj="khaltat"]           { --g1:#e8621f; --g2:#b02226; --g3:#111f3d; --num:rgba(11,13,18,.72); }
.ccard[data-proj="koton-lookbook-russia"]{ --g1:#e9e9ea; --g2:#6e7076; --g3:#0b0d12; --num:rgba(11,13,18,.72); }
.ccard[data-proj="aquatic-architects"]{ --g1:#3fa07a; --g2:#1c6b4e; --g3:#05130d; --num:rgba(11,13,18,.72); }
.ccard[data-proj="riyadhverse"]       { --g1:#ded0b6; --g2:#8a7a5e; --g3:#100e0b; --num:rgba(11,13,18,.72); }

/* Collapsed: the project's own cover shows through, with its palette laid
   over as a low tint so the rail still reads as a spectrum at a glance but
   you can see what each project actually is. Active: the tint lifts almost
   away and the image takes over.

   Layering, low to high:
     .cmedia   z0  the cover image
     ::before  z1  the palette tint + a foot scrim to protect the title
     ::after   z2  grain
     label     z3  text */
.ccard{
  /* border:0, not a transparent border. background-clip defaults to border-box,
     so a 1px transparent border still painted the card's base colour under it,
     while .cmedia and ::before start at inset:0 (inside the border). That left
     a 1px ring of raw --g3 reading as a black stroke around every card. */
  border: 0;
  background: var(--g3);            /* shows only until the cover decodes */
}
.ccard .cmedia{
  opacity: 1;                        /* was 0 until active: the cards were blank */
  transform: none;
  animation: none;
}
.ccard::before{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Two jobs, deliberately at full layer opacity so they can be tuned apart:
     the FOOT SCRIM has to be strong enough to carry white text over a pale
     cover (Hind Al Oud's gold, Khaltat's peach), while the TINT stays light
     so the photograph still reads. Baking the alpha into the colour stops
     rather than dimming the whole layer is what lets those differ. */
  background:
    linear-gradient(to top,
      var(--g3) 0%,
      color-mix(in srgb, var(--g3) 92%, transparent) 22%,
      color-mix(in srgb, var(--g3) 74%, transparent) 42%,
      color-mix(in srgb, var(--g3) 34%, transparent) 62%,
      transparent 80%),
    linear-gradient(163deg,
      color-mix(in srgb, var(--g1) 34%, transparent) 0%,
      color-mix(in srgb, var(--g2) 32%, transparent) 46%,
      color-mix(in srgb, var(--g3) 40%, transparent) 100%);
  opacity:1;
  transition:opacity .55s;
}
.ccard::after{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  opacity:.10;
  mix-blend-mode:soft-light;
  transition:opacity .5s;
}
.ccard .cvlabel{ color:#fff; font-size:19px; letter-spacing:-.01em;
                 text-shadow:0 1px 14px rgba(0,0,0,.55); }
.ccard .cvnum{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); }

.ccard.active{
  background:#fff;
  box-shadow:0 30px 70px -30px rgba(40,55,120,.28),
             inset 4px 0 0 0 var(--g2);
}
.ccard.active::before{ opacity:.16; }   /* let the photograph carry the card */
.ccard.active::after{ opacity:.05; }
.ccard.active .cmedia{ animation:kb 8s ease-out forwards; }
.ccard.active .csector{ color: var(--g2); }
.ccard.active .ctag span{ border-color: color-mix(in srgb, var(--g2) 34%, transparent); }

/* ── Reel facade ─────────────────────────────────────────────────────
   The reel iframe used to carry a live src with autoplay=1, so YouTube's
   player shipped on every page load whether or not anyone scrolled to it:
   932 KB on desktop and 1432 KB on phone, where base.js arrived twice. That
   was 28% and 40% of the page.

   A self-hosted still stands in, and js/reel-mount.js swaps in the real
   iframe when the reel comes near the viewport, so autoplay-on-view still
   works and nothing third-party loads before that. */
.reel-media .reel-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
  transition:opacity .6s;
}
.reel-media.is-live .reel-poster{ opacity:0; pointer-events:none; }
.reel-media .reel-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- human check (assets/js/forms.js) ---------- */
/* Shared by the contact form, the brief intake and the collective
   application. Deliberately plain text rather than a warped image so a
   screen reader can read the question out. */
.il-cap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:4px}
.il-cap-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.il-cap-lab{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(238,242,255,.44);margin:0}
.il-cap-q{white-space:nowrap}
.il-cap-in{width:74px;min-height:44px;font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
  color:#eef1f8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  padding:10px 12px;outline:none;text-align:center;transition:.25s}
.il-cap-in:focus{border-color:var(--cold);background:rgba(142,162,255,.1)}
.il-cap-new{background:none;border:0;padding:6px 0;cursor:pointer;font-family:'Outfit',sans-serif;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,242,255,.34);
  transition:color .25s}
.il-cap-new:hover,.il-cap-new:focus-visible{color:var(--cold)}
/* on the cream panels the dark-on-light palette applies instead */
.light .il-cap-lab,.cream .il-cap-lab{color:var(--cream-dim)}
.light .il-cap-in,.cream .il-cap-in{color:var(--cream-ink);background:rgba(11,13,18,.04);
  border-color:var(--cream-line)}
.light .il-cap-new,.cream .il-cap-new{color:var(--cream-dim)}
@media(max-width:520px){.il-cap-lab{flex-wrap:wrap}.il-cap-q{white-space:normal}}

/* ---------- Collective application (panel 09) ---------- */
/* Mirrors .ct-direct so the two forms on the site read as one system. */
.cl-apply{margin:34px auto 0;display:flex;flex-direction:column;gap:14px;max-width:640px;text-align:left}
.cl-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cl-apply label{display:flex;flex-direction:column;gap:7px;font-family:'Outfit',sans-serif;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cl-apply input,.cl-apply textarea,.cl-apply select{font-family:'Outfit',sans-serif;font-size:15px;
  font-weight:300;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);
  padding:12px 14px;outline:none;transition:.25s;text-transform:none;letter-spacing:0;
  border-radius:0;-webkit-appearance:none;appearance:none;min-height:48px}
/* the native arrow disappears with appearance:none, so it is drawn back in */
.cl-apply select{background-image:linear-gradient(45deg,transparent 50%,rgba(238,242,255,.45) 50%),
  linear-gradient(135deg,rgba(238,242,255,.45) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;cursor:pointer}
.cl-apply select option{background:#0b0d12;color:#eef1f8}
.cl-apply textarea{resize:vertical;min-height:88px;line-height:1.55}
.cl-apply input:focus,.cl-apply textarea:focus,.cl-apply select:focus{
  border-color:var(--cold);background:rgba(142,162,255,.06)}
.cl-actions{margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cl-send{border:0;cursor:pointer;font-family:'Outfit',sans-serif;min-height:48px}
.cl-hint{font-size:12px;font-weight:300;color:var(--faint);max-width:300px;line-height:1.5}
.cl-done{margin:34px auto 0;max-width:560px;text-align:left}
.cl-done p{margin-top:12px;font-size:15px;font-weight:300;line-height:1.7;color:var(--dim)}
/* the intake link and the back link stay a row of quiet text under the form */
.sd-end .end-cta{margin-top:34px}
@media(max-width:760px){.cl-row2{grid-template-columns:1fr}}