@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/build/outfit-latin-6c18d579fd87.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/build/outfit-latin-ext-0f53d1c03b39.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}


  :root{
    --navy:#082332; --ink:#13141D; --blue:#003854;
    --green:#A3BF1A; --green-2:#BCCF21; --green-3:#C8D400;
    --n-300:#D4D3D4; --n-200:#DFE0E2; --white:#FFFFFF;
  }
  html[data-theme="dark"]{
    --text:#FFFFFF; --soft:rgba(255,255,255,.82); --eyebrow:var(--green); --accent:var(--green);
    --edge:rgba(255,255,255,.15); --edge-2:rgba(255,255,255,.46);
    --chipbg:rgba(255,255,255,.08); --loader:#1a1d27;
    --content-bg:#102431; --content-tr:rgba(16,36,49,.90); --card:rgba(255,255,255,.06); --card-bd:rgba(255,255,255,.14);
    --veil:linear-gradient(180deg,rgba(19,20,29,.22)0%,rgba(19,20,29,0)16%,rgba(19,20,29,0)72%,rgba(19,20,29,.58)100%);
    --sidewash:radial-gradient(130% 95% at 15% 46%,rgba(8,35,50,.48)0%,rgba(8,35,50,0)56%);
    /* glass — the audit asks us to lean into the look the testimonials already
       use, so it's a token now rather than a one-off on .quote */
    --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.10); --glass-bd:rgba(255,255,255,.13);
    --glass-hi:rgba(255,255,255,.30);
    --lime-glass:rgba(163,191,26,.13); --lime-glass-bd:rgba(200,212,0,.34);
    /* native form controls — see the note on .g8f-field select */
    --scheme:dark; --field-bg:#14313f; --pop-bg:#14313f; --pop-text:#FFFFFF;
    --accent-txt:var(--green-3);
  }
  html[data-theme="light"]{
    --text:#0a2230; --soft:rgba(10,34,48,.80); --eyebrow:#4a6a0c; --accent:#4a6a0c;
    --edge:rgba(10,34,48,.16); --edge-2:rgba(10,34,48,.42);
    --chipbg:rgba(10,34,48,.05); --loader:#eef1f2;
    --content-bg:#f4f6f7; --content-tr:rgba(244,246,247,.95); --card:#ffffff; --card-bd:rgba(10,34,48,.10);
    /* stronger scrim so navy text stays readable over the bright 3D room */
    --veil:linear-gradient(180deg,rgba(238,241,242,.7)0%,rgba(238,241,242,.15)22%,rgba(238,241,242,.15)60%,rgba(238,241,242,.82)100%);
    --sidewash:radial-gradient(135% 100% at 14% 48%,rgba(244,246,247,.9)0%,rgba(244,246,247,.25)45%,rgba(244,246,247,0)66%);
    --glass:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.92); --glass-bd:rgba(10,34,48,.11);
    --glass-hi:rgba(255,255,255,.9);
    --lime-glass:rgba(163,191,26,.16); --lime-glass-bd:rgba(92,125,15,.30);
    --scheme:light; --field-bg:#ffffff; --pop-bg:#ffffff; --pop-text:#0a2230;
    --accent-txt:#4a6a0c;
  }
  :root{--hdr:clamp(84px,10vh,112px)}   /* height the site header occupies */
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Outfit",system-ui,sans-serif;background:var(--loader);color:var(--text);-webkit-font-smoothing:antialiased;transition:color .4s,background .4s}

  /* fixed immersive stage */
  #scene{position:fixed;inset:0;z-index:0;display:block;transition:opacity .6s ease}
  .veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--sidewash),var(--veil);transition:opacity .6s ease}
  #fx{position:fixed;inset:0;z-index:5;pointer-events:none}
  #scrollspace{position:relative;z-index:0;height:1200vh;pointer-events:none}
  /* yellow page-transition wipe (brand green-3 #C8D400): sweeps across on page/route
     changes. Navy was tried and dropped — the site background IS navy, so the wipe
     didn't read as a transition at all. The yellow is the whole point of it. */
  #pagewipe{position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--green-3);transform:scaleX(0)}
  #pagewipe.in{transform-origin:right center;animation:pgwipeIn .42s cubic-bezier(.76,0,.24,1) forwards}
  #pagewipe.out{transform-origin:left center;animation:pgwipeOut .46s cubic-bezier(.76,0,.24,1) forwards}
  @keyframes pgwipeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes pgwipeOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  /* the full gener8 lockup rides the wipe — its own layer so the wipe's scaleX
     doesn't distort it. White on the yellow: low contrast on paper, but the wipe
     is only on screen for ~430ms and it reads as a flash of brand, not a sign. */
  #pw8{position:fixed;left:50%;top:50%;z-index:10000;pointer-events:none;
    width:min(62vw,760px);max-height:52vh;height:auto;object-fit:contain;
    opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .26s ease,transform .42s cubic-bezier(.2,.8,.3,1.4)}
  #pw8.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  @media (prefers-reduced-motion:reduce){html:not([data-motion="full"]) #pagewipe,html:not([data-motion="full"]) #pw8{display:none}}
  html[data-motion="reduced"] #pagewipe,html[data-motion="reduced"] #pw8{display:none}

  /* ================= ABOUT route (#about-us) ================= */
  .ab-view{position:fixed;inset:0;z-index:40;display:none;opacity:0;transition:opacity .45s ease;
    background:var(--navy);color:var(--text);overflow-y:auto;overflow-x:hidden}
  html[data-theme="light"] .ab-view{background:#eef1f2;color:#0a2230}
  .ab-view.on{display:block;opacity:1}
  html.about-open,html.about-open body{overflow:hidden}
  html.about-open #fx{z-index:41}            /* keep the particle layer over the route */
  .ab-view::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(120% 90% at 80% 6%,rgba(0,56,84,.5),transparent 58%),
               radial-gradient(90% 80% at 8% 94%,rgba(163,191,26,.10),transparent 60%)}
  .ab-scroll{position:relative;z-index:2}
  .ab-sec{padding:clamp(38px,6vh,80px) 0}
  .ab-sec.first{padding-top:clamp(104px,14vh,150px)}
  .ab-h1{font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:clamp(34px,5.2vw,66px);max-width:17ch;margin:10px 0}
  .ab-lead{margin-top:18px;max-width:60ch;font-size:clamp(16px,1.5vw,21px);line-height:1.6;color:var(--soft);font-weight:300}
  .ab-sub{margin-top:10px;color:var(--soft);font-size:clamp(15px,1.4vw,18px);font-style:italic}
  /* core-values orbit */
  .ab-orbit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,54px);align-items:center;margin-top:clamp(22px,4vh,42px)}
  @media(max-width:860px){.ab-orbit-grid{grid-template-columns:1fr}}
  .orbit{position:relative;width:min(500px,82vw);aspect-ratio:1;margin:0 auto}
  .orbit::before{content:'';position:absolute;inset:15%;border-radius:50%;border:1px dashed rgba(163,191,26,.22)}
  .orbit-core{position:absolute;left:50%;top:50%;width:clamp(96px,16vw,148px);height:clamp(96px,16vw,148px);transform:translate(-50%,-50%);
    border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 34%,#103042,#07141d);
    border:1px solid rgba(163,191,26,.5);box-shadow:0 0 60px rgba(163,191,26,.16);z-index:2}
  .orbit-core img{width:50%;height:auto;animation:abcorespin 22s linear infinite}
  @keyframes abcorespin{to{transform:rotate(360deg)}}
  .orbit-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform;z-index:3}
  .orbit-chip{white-space:nowrap;padding:10px 16px;border-radius:999px;cursor:pointer;font-family:inherit;
    background:rgba(9,26,37,.9);border:1px solid rgba(163,191,26,.4);color:var(--text);font-size:13px;font-weight:600;
    transition:transform .22s,border-color .22s,background .22s;backdrop-filter:blur(3px)}
  html[data-theme="light"] .orbit-chip{background:rgba(255,255,255,.92);color:#0a2230}
  .orbit-node:hover .orbit-chip,.orbit-node.on .orbit-chip{transform:scale(1.1);border-color:var(--green-3);background:rgba(163,191,26,.2)}
  /* ---- core values (audit §6, reworked) --------------------------------
     Was a WebGL globe firing each value out as a comet. The audit asked for
     something more approachable and less "disperse", so this is now a calm,
     centred reveal: the hero fades, "We're all about…" pins, and the four
     values arrive one at a time as glass cards. No WebGL — nothing to fail,
     and it reads the same on a phone as on a desktop.
     Driver is tall so the scroll is slow and controlled: one intro screen plus
     one per value (tuned for VALUES.length = 4). */
  .abv{position:relative;height:640vh}
  .abv-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:calc(var(--hdr) + 8px) clamp(20px,5vw,60px) 6vh;text-align:center}
  /* a soft, warm bloom behind the whole scene instead of a planet */
  .abv-stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(46% 40% at 50% 34%,rgba(163,191,26,.15),transparent 68%)}
  .abv-intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:0 clamp(20px,5vw,60px);pointer-events:none;will-change:opacity,transform}
  .abv-h1{font-weight:700;letter-spacing:-.02em;line-height:1.04;font-size:clamp(34px,5vw,64px);margin:8px 0 0;max-width:17ch}
  .abv-lead{margin-top:18px;max-width:54ch;font-size:clamp(15px,1.4vw,20px);line-height:1.6;color:var(--soft);font-weight:300}
  .abv-cue{margin-top:22px;color:var(--accent-txt);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}

  .abv-head{position:relative;z-index:3;opacity:0;will-change:opacity,transform;margin-bottom:clamp(20px,3.5vh,40px)}
  .abv-h2{font-weight:700;letter-spacing:-.025em;line-height:1.02;font-size:clamp(32px,5.2vw,66px);margin-top:4px}
  .abv-words{position:relative;z-index:3;margin:0;padding:0;list-style:none;width:min(1180px,100%);
    display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);text-align:left}
  .abv-word{opacity:0;will-change:opacity,transform;border-radius:20px;padding:clamp(18px,1.8vw,26px);
    background:var(--glass);border:1px solid var(--glass-bd);
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 var(--glass-hi) inset,0 calc(var(--glow,0)*26px) calc(var(--glow,0)*60px) rgba(163,191,26,calc(var(--glow,0)*.30));
    transition:border-color .4s}
  .abv-word.lit{border-color:rgba(200,212,0,.45)}
  .abv-num{color:var(--accent-txt);font-weight:700;font-size:12px;letter-spacing:.14em}
  .abv-word h3{font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.12;margin:6px 0 9px;letter-spacing:-.01em;
    text-shadow:0 0 calc(var(--glow,0)*30px) rgba(163,191,26,calc(var(--glow,0)*.85))}
  .abv-word p{color:var(--soft);font-size:clamp(13px,1.05vw,14.5px);line-height:1.58;font-weight:300;margin:0}
  @keyframes abvReveal{0%{text-shadow:0 0 0 rgba(163,191,26,0)}35%{text-shadow:0 0 24px rgba(163,191,26,.85)}100%{text-shadow:0 0 0 rgba(163,191,26,0)}}
  @keyframes abvPing{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(2.1)}}
  @media(max-width:1080px){.abv-words{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:860px){
    /* mobile: drop the pin entirely; hero, then heading, then cards reveal on scroll */
    .abv{height:auto}
    .abv-stage{position:relative;height:auto;overflow:visible;display:block;text-align:left;
      padding:calc(var(--hdr) + 10px) clamp(16px,5vw,28px) 10px}
    .abv-intro{position:relative;inset:auto;height:auto;padding:0;align-items:flex-start;text-align:left}
    .abv-head{opacity:1!important;transform:none!important;margin:clamp(30px,6vh,54px) 0 18px}
    .abv-words{grid-template-columns:1fr;gap:14px}
    .abv-word{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.25,1),border-color .4s}
    .abv-word.in{opacity:1;transform:none}
    .abv-word.in h3{animation:abvReveal 1.15s ease-out}
    .abv-num{position:relative;display:inline-block}
    .abv-word.in .abv-num::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1px solid var(--green-3);animation:abvPing .9s ease-out}
  }
  @media(max-width:860px) and (prefers-reduced-motion:reduce){.abv-word{opacity:1;transform:none;transition:none}}
  /* story split + mission/vision + benefits + press */
  .ab-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;margin-top:22px}
  @media(max-width:820px){.ab-split{grid-template-columns:1fr}}
  .ab-split .im{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.10);aspect-ratio:4/3;background:#0b2436}
  .ab-split .im img{width:100%;height:100%;object-fit:cover;display:block}
  .ab-p{color:var(--soft);font-size:clamp(15px,1.45vw,19px);line-height:1.66;font-weight:300;max-width:60ch;margin-top:14px}
  .ab-mv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  @media(max-width:760px){.ab-mv{grid-template-columns:1fr}}
  .ab-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:clamp(22px,2.6vw,32px)}
  html[data-theme="light"] .ab-card{background:rgba(10,34,48,.04);border-color:rgba(10,34,48,.10)}
  .ab-card h4{color:var(--accent-txt);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
  .ab-card p{color:var(--soft);font-size:clamp(15px,1.4vw,18px);line-height:1.62;font-weight:300}
  /* Why BLIS: a fully-animated 3D timeline. Items are driven per-frame from
     about.js (CSS vars --op/--tz/--rx/--ry) so they bank through depth as they
     scroll past centre; a glowing spine draws itself and lights each node. */
  .ab-timeline{list-style:none;margin:clamp(30px,5vh,54px) 0 0;padding:0 0 0 clamp(42px,5.2vw,76px);position:relative;
    perspective:1500px;perspective-origin:46% 42%}
  .ab-timeline::before{content:'';position:absolute;left:clamp(18px,2.1vw,32px);top:4px;bottom:4px;width:2px;border-radius:2px;
    background:rgba(163,191,26,.14)}
  .ab-tl-fill{position:absolute;left:clamp(18px,2.1vw,32px);top:4px;width:2px;border-radius:2px;height:0;
    background:linear-gradient(180deg,var(--green-3),var(--green));box-shadow:0 0 16px 1px rgba(163,191,26,.75);z-index:1}
  .ab-tl-item{position:relative;padding:0 0 clamp(28px,3.8vh,50px);transform-style:preserve-3d;opacity:var(--op,0);
    transform:perspective(1500px) translateZ(var(--tz,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform,opacity}
  .ab-tl-item:last-child{padding-bottom:0}
  .ab-tl-num{position:absolute;left:calc(-1 * clamp(42px,5.2vw,76px));top:-4px;width:clamp(36px,4.2vw,56px);height:clamp(36px,4.2vw,56px);
    display:grid;place-items:center;border-radius:50%;background:var(--navy);border:1.5px solid rgba(163,191,26,.4);
    color:var(--accent-txt);font-weight:700;font-size:clamp(12px,1.15vw,16px);z-index:2;
    transition:border-color .45s,box-shadow .45s,transform .45s,color .45s}
  html[data-theme="light"] .ab-tl-num{background:#eef1f2}
  .ab-tl-item.on .ab-tl-num{border-color:var(--green-3);color:var(--accent-txt);transform:scale(1.14);
    box-shadow:0 0 0 4px rgba(163,191,26,.14),0 0 26px rgba(163,191,26,.6)}
  .ab-tl-num::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(163,191,26,.4);opacity:0}
  .ab-tl-item.on .ab-tl-num::after{animation:tlping 1.9s ease-out infinite}
  @keyframes tlping{0%{opacity:.55;transform:scale(.7)}100%{opacity:0;transform:scale(1.55)}}
  .ab-tl-body{position:relative;overflow:hidden;border-radius:18px;padding:clamp(18px,2vw,28px);
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
    box-shadow:0 26px 60px -34px rgba(0,0,0,.85)}
  html[data-theme="light"] .ab-tl-body{background:linear-gradient(135deg,rgba(10,34,48,.06),rgba(10,34,48,.02));border-color:rgba(10,34,48,.12)}
  .ab-tl-body::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;opacity:0;transition:opacity .45s;
    background:linear-gradient(180deg,var(--green-3),var(--green))}
  .ab-tl-item.on .ab-tl-body::before{opacity:1}
  .ab-tl-body::after{content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
    background:linear-gradient(115deg,transparent 42%,rgba(163,191,26,.12) 50%,transparent 58%)}
  .ab-tl-item.on .ab-tl-body::after{animation:tlsheen 2.6s ease-in-out .15s}
  @keyframes tlsheen{to{transform:translateX(130%)}}
  .ab-tl-body h4{font-size:clamp(18px,1.7vw,23px);font-weight:600;margin:0 0 7px}
  .ab-tl-body p{color:var(--soft);font-size:clamp(14px,1.3vw,17px);line-height:1.58;font-weight:300;margin:0}
  /* timeline keeps its animated 3D on mobile too — about.js drives it with gentler
     depth (see updateTimeline); only reduced-motion flattens it */
  @media(prefers-reduced-motion:reduce){.ab-tl-item{transform:none!important;opacity:1!important}.ab-tl-fill{height:100%!important}}
  .ab-news{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
  .ab-news a{text-decoration:none;color:inherit;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
  html[data-theme="light"] .ab-news a{background:rgba(10,34,48,.04);border-color:rgba(10,34,48,.10)}
  .ab-news a:hover{transform:translateY(-3px);border-color:rgba(163,191,26,.45)}
  .ab-news .im{aspect-ratio:16/9;background:#0b2436;overflow:hidden}
  .ab-news .im img{width:100%;height:100%;object-fit:cover;display:block}
  .ab-news .im{position:relative}
  /* A film has to look like a film before it is clicked. */
  .newsplay{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;
    transform:translate(-50%,-50%);background:rgba(9,24,33,.62);border:1px solid rgba(255,255,255,.34);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .22s,background .22s}
  .newsplay::after{content:'';position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
    border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
  .ab-news a:hover .newsplay{transform:translate(-50%,-50%) scale(1.1);background:rgba(163,191,26,.86)}
  .ab-news a:hover .newsplay::after{border-left-color:#0e1e2a}

  /* THE FILM MODAL adds one thing to the enquiry panel: a frame to put the
     player in. Everything else — the backdrop, the flip, the close button, the
     reduced-motion fallback — is the enquiry modal's, unchanged.

     The panel is capped by HEIGHT as well as width, because a 16:9 box in a
     panel only constrained sideways runs off the bottom of a short laptop
     screen. 190px is the padding, the close button and the caption. */
  .g8f-panel.wide{width:min(1180px,100%,calc((100vh - 190px) * 16 / 9))}
  .g8v-box{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:14px;
    overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.5)}
  .g8v-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .g8v-cap{margin:14px 2px 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);max-width:80ch}
  html[data-theme="light"] .g8v-cap{color:rgba(10,34,48,.8)}

  .ab-news .tx{padding:16px 18px}
  .ab-news .tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
  .ab-news .tx i{font-style:normal;font-size:12px;color:var(--accent-txt);letter-spacing:.1em;text-transform:uppercase}
  @media (prefers-reduced-motion:reduce){.orbit-core img{animation:none}}
  body.past-immersive .veil{opacity:0}
  body.past-immersive .stage,body.past-immersive #rail,body.past-immersive #scrollHint,body.past-immersive .badge{opacity:0 !important;pointer-events:none}

  /* header */
  /* the site header rides above every view, including the case-studies route */
  .chrome{position:fixed;inset:0 0 auto 0;z-index:60;pointer-events:none}
  header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(15px,2.4vw,28px);transition:background .4s}
  body.past-immersive header,html.cs-open header,html.about-open header{background:linear-gradient(180deg,var(--content-bg),transparent)}
  .brand{display:flex;align-items:center;pointer-events:auto;text-decoration:none}
  /* the lockup carries the strapline now, so it needs a little more height to
     stay legible; the two tag colourways swap with the theme */
  .brand img{height:clamp(36px,3.9vw,52px);width:auto;display:block}
  /* both lockups ship; the theme picks one. Type+class specificity has to match
     `.brand img` or the display:block there wins and you get two logos. */
  img.on-light{display:none}
  html[data-theme="light"] img.on-dark{display:none}
  html[data-theme="light"] img.on-light{display:block}
  nav{display:flex;align-items:center;gap:22px;pointer-events:auto}
  .nav-links{display:flex;gap:22px}
  nav a{color:var(--soft);text-decoration:none;font-size:14.5px;transition:color .2s}
  nav a:hover{color:var(--text)}
  .btn{font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:10px 19px;border-radius:999px;border:1px solid transparent;
    background:linear-gradient(135deg,var(--green-3),var(--green));color:var(--navy);box-shadow:0 6px 26px rgba(163,191,26,.32);
    transition:transform .2s,box-shadow .2s;text-decoration:none;display:inline-block;pointer-events:auto}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(163,191,26,.5)}
  .btn.ghost{background:transparent;border-color:var(--edge);color:var(--text);box-shadow:none}
  .btn.ghost:hover{border-color:var(--edge-2);background:var(--chipbg)}
  .themebtn{pointer-events:auto;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text);
    background:var(--chipbg);border:1px solid var(--edge);padding:9px 14px;border-radius:999px;transition:border-color .2s}
  .themebtn:hover{border-color:var(--edge-2)}
  .themebtn svg{width:15px;height:15px}
  /* mobile menu button + backdrop (hidden on desktop) */
  .navtoggle{display:none;pointer-events:auto;position:relative;z-index:81;width:46px;height:46px;padding:0;cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:var(--chipbg);border:1px solid var(--edge);border-radius:13px}
  html.menu-open .navtoggle{background:transparent}
  .navtoggle:hover{border-color:var(--edge-2)}
  .navtoggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .3s ease,opacity .2s ease}
  html.menu-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html.menu-open .navtoggle span:nth-child(2){opacity:0}
  html.menu-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-backdrop{position:fixed;inset:0;z-index:59;background:rgba(4,12,18,.55);opacity:0;visibility:hidden;
    transition:opacity .35s ease,visibility .35s ease;pointer-events:none}
  html.menu-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}

  /* ---- scroll rail (audit §1) -------------------------------------------
     Was seven anonymous dots. Now each stop carries a short name and is a
     real button, so you can jump straight to a section and back instead of
     scrolling the whole timeline. Labels live in SLIDES in src/config.js and
     are placeholders until the copy round lands. */
  .rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;
    gap:2px;pointer-events:none;transition:opacity .4s;align-items:flex-end}
  .rail button{pointer-events:auto;cursor:pointer;font-family:inherit;background:none;border:0;padding:7px 2px 7px 14px;
    display:flex;align-items:center;gap:11px;flex-direction:row-reverse;color:var(--soft);
    font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    opacity:.42;transition:opacity .3s,color .3s}
  .rail button i{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;transition:all .3s}
  .rail button span{white-space:nowrap;transform:translateX(6px);opacity:0;transition:transform .3s,opacity .3s}
  .rail:hover button,.rail button:focus-visible{opacity:.72}
  .rail:hover button span,.rail button:focus-visible span{transform:none;opacity:1}
  .rail button:hover{opacity:1;color:var(--text)}
  .rail button.on{opacity:1;color:var(--accent-txt)}
  .rail button.on span{transform:none;opacity:1}
  .rail button.on i{background:var(--green);box-shadow:0 0 12px rgba(163,191,26,.8);transform:scale(1.35)}
  .rail button:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
  /* the same rail on the full-screen routes — a design principle, not a
     homepage feature. Routes are z-index 40 and make their own stacking
     context, so this only needs to clear the route's own content. */
  .route-rail{z-index:7}
  /* the homepage rail is a sibling of the routes, not inside them — take it out
     entirely while a route is open, or two rails stack up on the same edge */
  html.cs-open #rail,html.about-open #rail,html.led-open #rail,
  html.ft-open #rail,html.sc-open #rail,html.fq-open #rail{display:none}

  /* ---- nav dropdown (audit §6) ------------------------------------------ */
  /* the nav carries seven items now (audit §7), so it tightens up before the
     hamburger takes over at 860 */
  @media(min-width:861px) and (max-width:1240px){
    nav{gap:15px}
    .nav-links{gap:15px}
    nav a{font-size:13.5px}
    .themebtn span{display:none}
    .themebtn{padding:9px 11px}
  }
  .drop{position:relative;display:flex;align-items:center}
  .drop-btn{display:flex;align-items:center;gap:5px}
  .drop-btn svg{width:13px;height:13px;transition:transform .25s}
  .drop.open .drop-btn svg{transform:rotate(180deg)}
  .drop.open .drop-btn{color:var(--text)}
  /* the panel floats over live content, so it needs a near-opaque backing of its
     own — the site's --glass is far too sheer to read a menu through */
  html[data-theme="dark"]{--drop-bg:rgba(13,34,47,.95)}
  html[data-theme="light"]{--drop-bg:rgba(255,255,255,.97)}
  .drop-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,-8px);
    display:grid;grid-template-columns:repeat(2,minmax(196px,1fr));gap:2px;padding:10px;
    border-radius:18px;background:var(--drop-bg);border:1px solid var(--glass-bd);backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 24px 60px rgba(2,10,16,.45);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;z-index:70}
  .drop.open .drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .drop-panel a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;font-size:14px;
    color:var(--text);transition:background .18s,color .18s}
  .drop-panel a:hover{background:rgba(163,191,26,.13);color:var(--accent-txt)}
  .drop-panel .ic{width:17px;height:17px;flex:none;color:var(--accent-txt)}
  .drop-panel a.all{grid-column:1/-1;justify-content:center;font-weight:600;color:var(--accent-txt);
    border-top:1px solid var(--glass-bd);border-radius:0 0 12px 12px;margin-top:4px;padding-top:13px}

  /* immersive overlays */
  .stage{position:fixed;inset:0;z-index:3;pointer-events:none;transition:opacity .4s}
  .ov{position:fixed;inset:0;display:flex;align-items:center;padding:0 clamp(20px,6vw,110px);opacity:0;will-change:opacity,transform}
  .ov .panel{max-width:900px;position:relative}
  /* the room is bright now that the LED walls aren't fogged, so the overlay copy
     gets its own soft scrim rather than relying on the wall behind it */
  .ov .panel::before{content:'';position:absolute;inset:-28px -40px -24px -40px;z-index:-1;border-radius:28px;
    background:radial-gradient(80% 100% at 22% 50%,var(--panel-scrim) 0%,transparent 72%)}
  html[data-theme="dark"]{--panel-scrim:rgba(6,18,26,.72)}
  html[data-theme="light"]{--panel-scrim:rgba(240,243,245,.82)}
  .eyebrow{font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow);font-size:clamp(12px,1.2vw,14px);margin-bottom:16px}
  h1{font-weight:700;letter-spacing:-.025em;line-height:1.02;font-size:clamp(36px,6.4vw,82px);max-width:16ch}
  h2{font-weight:700;letter-spacing:-.02em;line-height:1.05;font-size:clamp(32px,5.2vw,64px);max-width:15ch}
  h1 .accent,h2 .accent{color:var(--accent)}
  .sub{margin-top:18px;max-width:52ch;font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:var(--soft);font-weight:300}
  .cta-row{margin-top:26px;display:flex;gap:13px;flex-wrap:wrap}

  .chips{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}
  .chip{font-family:inherit;font-size:14px;font-weight:500;color:var(--text);background:var(--chipbg);border:1px solid var(--edge);
    padding:10px 17px;border-radius:999px;cursor:pointer;transition:all .2s}
  .chip:hover{border-color:rgba(163,191,26,.6)}
  .chip.active{background:linear-gradient(135deg,var(--green-3),var(--green));color:var(--navy);border-color:transparent;font-weight:600}
  /* the screens / ambient / auto-orbit toggles were pulled from this panel —
     the readout now follows the sector chips directly, so it carries the gap. */
  .readout{margin-top:22px;font-weight:500;font-size:clamp(14px,1.5vw,17px);letter-spacing:.02em;color:var(--eyebrow)}

  .scroll{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;
    font-size:12px;letter-spacing:.1em;color:var(--soft);pointer-events:none;transition:opacity .4s}
  .scroll .dot{width:22px;height:36px;border:1.5px solid var(--edge-2);border-radius:12px;position:relative}
  .scroll .dot::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--green);transform:translateX(-50%);animation:sc 1.6s ease-in-out infinite}
  @keyframes sc{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

  #loader{position:fixed;inset:0;z-index:20;background:var(--loader);display:grid;place-items:center;transition:opacity .8s ease}
  #loader .l-mark{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green-3),var(--green));display:grid;place-items:center;animation:pulse 1.4s ease-in-out infinite}
  #loader .l-mark img{height:30px;width:auto}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  .badge{position:fixed;left:50%;bottom:6px;transform:translateX(-50%);z-index:5;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);opacity:.5;pointer-events:none;transition:opacity .4s}

  /* =============================== CONTENT SITE =============================== */
  .content{position:relative;z-index:4;color:var(--text);margin-top:-24vh;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0, var(--content-tr) 22vh)}
  .content>*{position:relative}
  .lines{position:absolute;inset:0;pointer-events:none;opacity:.13;overflow:hidden;z-index:0}
  html[data-theme="light"] .lines{opacity:.20}
  .lines .layer{position:absolute;left:-4%;right:-4%;top:-12%;bottom:-12%;will-change:transform;display:flex}
  .lines .lcol{flex:1 1 0;min-width:0}   /* line-art tiles in N columns so wide/4K screens don't stretch them */
  .lines .layer.l2{opacity:.65;transform-origin:center}
  .lines .layer.l3{opacity:.45}
  .lines svg{width:100%;height:1100px;display:block}
  .lines .base{fill:none;stroke:#A3BF1A;stroke-width:1.3;opacity:.5}
  .lines .runner{fill:none;stroke:#C8D400;stroke-width:1.7;stroke-dasharray:9 91}
  .lines .r1{animation:linerun 7s linear infinite}
  .lines .r2{animation:linerun 10s linear infinite;animation-delay:-3s}
  .lines .r3{animation:linerun 13s linear infinite;animation-delay:-6s}
  .lines .n{fill:#A3BF1A;opacity:.55}
  .lines .link{stroke:#A3BF1A;opacity:.3}
  @keyframes linerun{to{stroke-dashoffset:-100}}
  @media (prefers-reduced-motion: reduce){.lines .runner{animation:none;opacity:0}}
  /* client ticker */
  /* copy round 8.3: more breathing space before this band, and the last
     slide clears before it arrives (see readScroll in site.js) */
  .ticker-sec{padding:clamp(70px,9vw,130px) 0 0}
  .ticker{overflow:hidden;margin-top:20px;padding:14px 0;perspective:700px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .tick-track{display:flex;gap:clamp(12px,1.6vw,22px);width:max-content;animation:tick 46s linear infinite}
  .ticker:hover .tick-track{animation-play-state:paused}
  /* big, fluid chips — scale with the viewport, phone to ultrawide */
  .tick-track span{background:#fff;color:#0b2a3b;border:1px solid var(--card-bd);border-radius:16px;
    padding:clamp(12px,1.4vw,18px) clamp(20px,2.6vw,34px);display:grid;place-items:center;
    min-width:clamp(160px,20vw,250px);height:clamp(76px,9vw,110px);flex:none;
    transition:transform .28s cubic-bezier(.2,.7,.3,1.3),box-shadow .28s,border-color .28s;will-change:transform}
  .tick-track img{max-height:clamp(46px,5.6vw,70px);max-width:clamp(130px,16vw,200px);object-fit:contain;filter:saturate(.9)}
  .tick-track span b{font-size:13.5px;line-height:1.25;text-align:center;padding:0 6px}  /* readable text fallback if a logo image can't load */
  @keyframes tick{to{transform:translateX(-50%)}}
  /* seven hover personalities, cycling down the row */
  .tick-track span:nth-child(7n+1):hover{transform:translateY(-10px) rotate(-3deg);box-shadow:0 14px 30px rgba(8,35,50,.28)}
  .tick-track span:nth-child(7n+2):hover{transform:scale(1.14);box-shadow:0 10px 26px rgba(8,35,50,.24)}
  .tick-track span:nth-child(7n+3):hover{animation:tkwob .5s ease-in-out infinite}
  .tick-track span:nth-child(7n+4):hover{transform:rotateY(16deg) translateY(-4px);box-shadow:0 12px 26px rgba(8,35,50,.24)}
  .tick-track span:nth-child(7n+5):hover{animation:tkbnc .6s cubic-bezier(.3,1.6,.4,1) infinite}
  .tick-track span:nth-child(7n+6):hover{border-color:var(--green);animation:tkglow 1.1s ease-in-out infinite}
  .tick-track span:nth-child(7n+7):hover{transform:skewX(-6deg) translate(5px,-6px);box-shadow:0 12px 26px rgba(8,35,50,.24)}
  @keyframes tkwob{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
  @keyframes tkbnc{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px)}}
  @keyframes tkglow{0%,100%{box-shadow:0 0 0 rgba(163,191,26,.0)}50%{box-shadow:0 0 26px rgba(163,191,26,.65)}}
  @media (prefers-reduced-motion: reduce){
    .tick-track{animation:none}
    .tick-track span:hover{animation:none;transform:translateY(-4px)}
  }
  /* ---- content blocks (audit §4) ---------------------------------------
     "The blocks/sections feel too large… it feels like every block is trying
     to deliver all the information at once." Section padding, headline scale
     and lead width all come down a notch so the eye gets somewhere to rest. */
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,52px)}
  .c-sec{padding:clamp(28px,3.4vw,50px) 0}
  .c-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
  .c-eyebrow{font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow);font-size:clamp(11.5px,1.1vw,13px);margin-bottom:12px}
  .c-h2{font-weight:700;letter-spacing:-.02em;line-height:1.08;font-size:clamp(26px,3.4vw,42px);max-width:20ch}
  .c-h2 .accent{color:var(--accent)}
  .c-lead{margin-top:16px;max-width:56ch;font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--soft);font-weight:300}

  /* ---- glass (audit §4) --------------------------------------------------
     "Keep and lean into the glass-look blocks – e.g. the way the testimonials
     are presented. That's the preferred style." One utility, used by the
     cards, the tiles, the dropdown, the FAQ rows and the new routes. */
  .gl{background:var(--glass);border:1px solid var(--glass-bd);
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 var(--glass-hi) inset,0 12px 34px rgba(2,10,16,.16);position:relative}
  .gl:hover{border-color:rgba(163,191,26,.42);background:var(--glass-2)}

  .grid{display:grid;gap:16px;margin-top:14px}
  .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
  /* cards inherit the testimonial glass rather than the old flat --card fill */
  .card{background:var(--glass);border:1px solid var(--glass-bd);border-radius:18px;padding:21px;
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 var(--glass-hi) inset;
    transition:transform .25s,border-color .25s,background .25s;opacity:0;transform:translateY(22px)}
  .card.in{opacity:1;transform:none}
  .card{transform-style:preserve-3d}
  .touchripple{position:fixed;width:44px;height:44px;border-radius:50%;border:2px solid rgba(163,191,26,.75);
    pointer-events:none;z-index:60;transform:translate(-50%,-50%) scale(.25);opacity:.9;animation:rippl .65s ease-out forwards}
  @keyframes rippl{to{transform:translate(-50%,-50%) scale(3.2);opacity:0}}
  @media (prefers-reduced-motion: reduce){.touchripple{display:none}.widephoto .draghint{animation:none}}
  .card:hover{transform:translateY(-4px);border-color:rgba(163,191,26,.45)}
  .card .num{font-weight:700;letter-spacing:.08em;color:var(--accent);font-size:14px}
  .card h4{margin:8px 0 6px;font-size:17.5px;font-weight:600;letter-spacing:-.01em}
  .card p{font-size:14px;line-height:1.58;color:var(--soft);font-weight:300}

  /* ---- sector tiles (audit §3) -------------------------------------------
     Replaces the four photo cards. The reference — Canva's "Industries and
     sectors" grid — is an icon, a name and a link, nothing else. Pictures
     were what made this section long, so there are none. */
  .sec-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
  @media(max-width:900px){.sec-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.sec-tiles{grid-template-columns:1fr}}
  .sec-tile{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;
    text-decoration:none;color:var(--text);font-size:15px;font-weight:500;
    transition:transform .22s,border-color .22s,background .22s}
  .sec-tile:hover{transform:translateY(-3px)}
  .sec-tile .ic{width:20px;height:20px;flex:none;color:var(--accent-txt)}
  .sec-tiles.big .sec-tile{padding:22px 22px;font-size:16.5px}
  .sec-tiles.big .ic{width:24px;height:24px}
  .card.sector{min-height:180px;display:flex;flex-direction:column;justify-content:flex-start;background:linear-gradient(180deg,rgba(163,191,26,.06),var(--card));overflow:hidden;padding:0}
  .card.sector .tx{flex:1}
  .card.sector .ph{width:100%;height:150px;object-fit:cover;display:block}
  .card.sector .tx{padding:20px 22px 22px}
  .card.case{overflow:hidden;padding:0;position:relative;display:flex;flex-direction:column}
  .card.case .ph{width:100%;height:150px;object-fit:cover;display:block;flex:none}
  .card.case.nofilm .ph{object-fit:contain;background:#0b2436;padding:18px}   /* logo posters: framed, not full-bleed */
  .card.case .tx{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
  .card.case .tx h4{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .card.case .tx p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* play badge over case-study thumbnails (they're videos on the live site) */
  .card.case::before{content:'';position:absolute;left:50%;top:75px;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(8,35,50,.5);border:1.5px solid rgba(255,255,255,.75);z-index:2;pointer-events:none;transition:transform .25s}
  .card.case::after{content:'';position:absolute;left:50%;top:75px;transform:translate(-38%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;z-index:3;pointer-events:none}
  .card.case:hover::before{transform:translate(-50%,-50%) scale(1.08)}
  /* one dark "box" holding the whole case-studies block (copy + videos + button + logos), like the
     live site. Always dark-themed inside, so text stays legible even in the site's light mode. */
  .casebox{background:#0f2b3c;border:1px solid rgba(255,255,255,.08);border-radius:28px;
    padding:clamp(24px,3.4vw,48px);color:#eaf0f2}
  .casebox .c-lead{color:#c3ced3;margin-top:16px}
  .casebox .grid{margin-top:26px}
  #caseGrid{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
  .card.case{cursor:pointer;text-align:left;font-family:inherit;color:inherit;border:1px solid rgba(255,255,255,.09);width:100%}
  .card.case.nofilm::before,.card.case.nofilm::after{display:none}
  .card.case .tx i{display:block;margin-top:auto;padding-top:10px;font-style:normal;font-size:12px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent-txt)}
  .casebox .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
  .casebox .card h4{color:#f3f7f8}
  .casebox .card p{color:#b9c4c9}
  /* the accreditation marquee outlived the case-study block it used to sit in;
     `slim` is the same box with nothing above the logos */
  .casebox.slim{padding:clamp(16px,2vw,26px) clamp(20px,3vw,38px)}
  .casebox.slim .logomarquee{margin-top:0;padding-top:0;border-top:0}
  /* accreditation logos: a scrolling marquee inside the box (divider above, no chips), fading at the
     edges. Bigger logos than a static row. Set is duplicated so translateX(-50%) loops seamlessly. */
  .logomarquee{overflow:hidden;margin-top:clamp(24px,3.2vw,40px);padding-top:clamp(24px,3vw,34px);
    border-top:1px solid rgba(255,255,255,.10);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .logo-track{display:flex;align-items:center;gap:clamp(48px,7vw,108px);width:max-content;
    animation:logoscroll 34s linear infinite}
  .logomarquee:hover .logo-track{animation-play-state:paused}
  .logo-track img{height:clamp(52px,6vw,78px);width:auto;object-fit:contain;flex:none}
  .logo-track b{color:#dfe7ea;font-size:15px;font-weight:600;flex:none}
  @keyframes logoscroll{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.logo-track{animation:none}}
  .widephoto{margin-top:34px;border-radius:22px;overflow:hidden;border:1px solid var(--card-bd);position:relative;
    cursor:grab;touch-action:pan-y;perspective:900px;user-select:none;-webkit-user-select:none}
  .widephoto.dragging{cursor:grabbing}
  .widephoto img{width:100%;display:block;will-change:transform;transition:transform .5s cubic-bezier(.2,.7,.25,1);-webkit-user-drag:none;user-drag:none;pointer-events:none}
  .widephoto .draghint{position:absolute;top:14px;right:14px;z-index:2;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:#fff;background:rgba(8,35,50,.55);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);
    padding:8px 14px;border-radius:999px;pointer-events:none;animation:hintpulse 2.4s ease-in-out infinite}
  @keyframes hintpulse{0%,100%{opacity:.75}50%{opacity:1}}
  .widephoto .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;font-weight:500;font-size:clamp(15px,1.6vw,19px);color:#fff;background:linear-gradient(180deg,transparent,rgba(8,35,50,.85))}
  /* two-column feature panel: copy + button on a dark card, draggable image filling the other side
     (matches the live "Helping the next generation…" block). Dark-themed inside so it reads well in
     the site's light mode too. .split.rev flips the columns for visual rhythm between sections. */
  .split{display:grid;grid-template-columns:1.04fr 1fr;align-items:center;
    background:#0f2b3c;border:1px solid rgba(255,255,255,.10);border-radius:28px;overflow:hidden;color:#eaf0f2}
  .split .sp-copy{padding:clamp(30px,4vw,58px);display:flex;flex-direction:column;justify-content:center}
  /* .split stays dark in BOTH themes by design, so it must not take the light
     theme's dark-olive accent — that landed at 3:1 on the navy card. Pin the
     bright lime here, the same way the card pins its own text colour. */
  .split .sp-copy .c-eyebrow,.split .sp-copy .c-h2 .accent{color:var(--green-3)}
  .split .sp-copy .c-lead{color:#c3ced3;margin-top:16px}
  .split .sp-copy .c-h2{margin-top:6px}
  /* image shown FRAMED (16:10, natural-ish crop) and centred — avoids the extreme zoom you get
     forcing a wide panorama into a tall column. object-position keeps the people in frame. */
  .split .sp-media{padding:clamp(18px,2.2vw,30px);display:flex;align-items:center;justify-content:center}
  /* Our mission: copy left, photo right. The photo is shown WHOLE — it sits at
     its own aspect ratio with no box cropping it and nothing laid over it. */
  .mission-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);
    align-items:center;margin-top:16px}
  @media(max-width:900px){.mission-split{grid-template-columns:1fr}}
  .mission-band{margin:0;border-radius:20px;overflow:hidden;line-height:0;
    border:1px solid var(--card-bd);box-shadow:0 18px 46px rgba(0,0,0,.26)}
  .mission-band img{width:100%;height:auto;display:block}
  .mission-split .c-lead{margin-top:14px}

  .split .sp-media .widephoto{position:relative;margin:0;width:100%;aspect-ratio:16/10;overflow:hidden;
    border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
  .split .sp-media .widephoto img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
  .split.rev .sp-copy{order:2}
  .split.rev .sp-media{order:1}
  @media(max-width:860px){.split{grid-template-columns:1fr}
    .split .sp-media{min-height:300px;order:2}.split .sp-copy{order:1}}
  .quote .head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .quote .head img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(163,191,26,.5)}
  /* "Designed for end users" was removed from the landing page in (33).
     Its styles went with it rather than being left behind as dead weight in
     every page load; the section is in git if it comes back. */

  /* rotating testimonials */
  .tcar{overflow:hidden;margin-top:16px}
  .tcar-track{display:flex;gap:18px;transition:transform .65s cubic-bezier(.25,.8,.3,1)}
  .tcar .quote{flex:0 0 calc(50% - 9px)}
  @media(max-width:720px){.tcar .quote{flex:0 0 100%}}
  /* these were 9px dots at --edge on a dark ground: effectively invisible.
     Bigger, brighter, with a real hit area and a visible focus ring. */
  .tdots{display:flex;gap:10px;margin-top:24px;justify-content:center}
  .tdots button{width:34px;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;
    background:var(--edge-2);opacity:.5;transition:all .25s;position:relative}
  .tdots button::after{content:'';position:absolute;inset:-11px -4px}
  .tdots button:hover{opacity:.85}
  .tdots button.on{background:var(--green);opacity:1;box-shadow:0 0 12px rgba(163,191,26,.65)}
  .tdots button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
  /* integration logos */
  .intlogos{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
  .intlogos span{background:#fff;border:1px solid var(--card-bd);border-radius:14px;padding:12px 22px;display:grid;place-items:center;height:64px;min-width:130px}
  .intlogos img{max-height:36px;max-width:130px;object-fit:contain}
  .chips-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .tag{font-size:13px;color:var(--soft);border:1px solid var(--card-bd);background:var(--card);padding:9px 15px;border-radius:999px}
  .logos{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;margin-top:8px}
  .logos span{font-size:clamp(17px,2vw,24px);font-weight:600;color:var(--soft);letter-spacing:-.01em}
  .quote{background:var(--glass);border:1px solid var(--glass-bd);border-radius:18px;padding:24px;
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 var(--glass-hi) inset;opacity:0;transform:translateY(22px)}
  .quote.in{opacity:1;transform:none}
  .quote p{font-size:16px;line-height:1.6;font-weight:300}
  .quote .who{margin-top:16px;font-size:14px;color:var(--accent);font-weight:600}
  .quote .role{color:var(--soft);font-weight:300;font-size:13px}
  .trustsec .badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
  .trustsec .badges span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border:1px solid var(--card-bd);padding:12px 18px;border-radius:12px;font-weight:600}
  /* ---- bottom CTA (audit §4) --------------------------------------------
     "use lime glass instead of a solid colour" — so the block is a translucent
     lime pane over the page rather than a slab of brand green. The panel is
     inset in the wrap so the glass edge is visible, which is the whole point
     of the treatment. */
  .c-cta{text-align:center;padding:clamp(22px,3vw,44px) 0 clamp(34px,4vw,60px)}
  .c-cta .wrap>div{border-radius:26px;padding:clamp(34px,5vw,62px) clamp(22px,4vw,52px);
    background:var(--lime-glass);border:1px solid var(--lime-glass-bd);
    backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:0 1px 0 rgba(200,212,0,.28) inset,0 24px 70px rgba(163,191,26,.14);
    position:relative;overflow:hidden}
  /* a soft lime bloom inside the pane so it reads as lit glass, not a flat tint */
  .c-cta .wrap>div::before{content:'';position:absolute;inset:-40% -10% auto -10%;height:180%;pointer-events:none;
    background:radial-gradient(52% 60% at 50% 0%,rgba(200,212,0,.28),transparent 70%)}
  .c-cta h2{color:var(--text);margin:0 auto;max-width:18ch;position:relative}
  .c-cta p{margin:14px auto 24px;font-size:16.5px;color:var(--soft);max-width:46ch;position:relative}
  .c-cta .btn{position:relative}
  .c-foot{border-top:1px solid var(--card-bd);padding:60px 0 40px}
  .c-foot .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .c-foot img{height:42px;margin-bottom:16px}
  .c-foot .addr{font-size:14px;color:var(--soft);line-height:1.7;font-weight:300;max-width:34ch}
  .c-foot .addr b{color:var(--text);font-weight:600}
  .c-foot .fnav{display:flex;gap:clamp(24px,3.4vw,44px);flex-wrap:wrap}
  .c-foot .fcol a{display:block;color:var(--soft);text-decoration:none;font-size:14px;margin-bottom:10px;transition:color .2s}
  .c-foot .fcol a:hover{color:var(--accent)}
  .c-foot .fcol h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:14px}
  .c-foot .legal{margin-top:40px;font-size:12.5px;color:var(--soft);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

  /* chat launcher: the network globe, bottom-left (tawk.to) */
  .chatglobe{position:fixed;left:22px;bottom:22px;z-index:70;width:60px;height:60px;border-radius:50%;opacity:0;pointer-events:none;
    background:radial-gradient(circle at 35% 30%, #0f2c3d, #07141d);border:1px solid rgba(163,191,26,.55);
    display:grid;place-items:center;cursor:pointer;padding:0;
    box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 18px rgba(163,191,26,.22);
    transition:transform .25s,box-shadow .25s}
  .chatglobe:hover{transform:translateY(-3px) scale(1.07);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 28px rgba(163,191,26,.5)}
  .chatglobe svg{width:38px;height:38px;animation:cgspin 16s linear infinite}
  .chatglobe .cgdot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
    background:var(--green-3);box-shadow:0 0 8px var(--green);animation:cgpulse 1.8s ease-in-out infinite}
  @keyframes cgspin{to{transform:rotate(360deg)}}
  @keyframes cgpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
  .chatglobe.landed{animation:cgland .6s cubic-bezier(.3,1.5,.4,1)}
  @keyframes cgland{0%{transform:scale(.35)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
  .chatmsg{position:fixed;left:26px;bottom:94px;z-index:70;font-size:13.5px;font-weight:600;color:#fff;
    background:rgba(8,35,50,.92);border:1px solid rgba(163,191,26,.55);padding:10px 16px;
    border-radius:14px 14px 14px 4px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35);
    opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;pointer-events:none}
  .chatmsg.on{opacity:1;transform:none;pointer-events:auto}
  @media (max-width:860px){.chatmsg{left:16px;bottom:80px}}
  @media (prefers-reduced-motion: reduce){.chatglobe svg,.chatglobe .cgdot{animation:none}}
  @media (max-width:860px){.chatglobe{left:14px;bottom:14px;width:54px;height:54px}.chatglobe svg{width:33px;height:33px}}
  @media (max-width:860px){
    .rail{display:none}
    .navtoggle{display:inline-flex}
    /* the whole #siteNav becomes an off-canvas drawer opened by the hamburger */
    #siteNav{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);z-index:70;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;
      padding:calc(env(safe-area-inset-top,0px) + 82px) 26px calc(env(safe-area-inset-bottom,0px) + 30px);
      background:var(--content-bg);border-left:1px solid var(--edge);box-shadow:-30px 0 60px rgba(0,0,0,.42);
      transform:translateX(106%);visibility:hidden;overflow-y:auto;
      transition:transform .38s cubic-bezier(.2,.8,.25,1),visibility .38s ease}
    html.menu-open #siteNav{transform:none;visibility:visible}
    .nav-links{display:flex;flex-direction:column;gap:0;width:100%}
    #siteNav a:not(.btn){font-size:19px;font-weight:500;color:var(--text);padding:15px 2px;border-bottom:1px solid var(--edge)}
    /* in the drawer the Sectors panel is an inline accordion, not a floating
       menu — a positioned panel has nowhere to go inside a 340px drawer */
    .drop{display:block;width:100%}
    .drop-btn{width:100%;justify-content:space-between}
    .drop-panel{position:static;transform:none;display:none;grid-template-columns:1fr;gap:0;padding:2px 0 10px;
      background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
      opacity:1;visibility:visible;pointer-events:auto}
    .drop.open .drop-panel{display:grid;transform:none}
    .drop-panel a{font-size:16px!important;padding:11px 2px 11px 14px!important;border-bottom:0!important;color:var(--soft)!important}
    .drop-panel a.all{justify-content:flex-start;border-top:0;margin-top:0;padding-top:11px!important;color:var(--accent-txt)!important}
    .themebtn{margin-top:20px;justify-content:center;padding:13px}
    #siteNav .btn{margin-top:14px;text-align:center;width:100%}
    html.menu-open,html.menu-open body{overflow:hidden}
  }

  /* ========================================================================
     CASE STUDIES — the globe page (#case-studies). A full-screen route with
     its own Three scene: globe left, names top right, and the selected case
     study spinning out of its pin as a 3D panel.
     ==================================================================== */
  html.cs-open, html.cs-open body{overflow:hidden}
  /* the chat launcher sits at z-index 70 and its fade is driven by the scroll
     timeline, which pauses while this route is open — hide it outright */
  html.cs-open .chatglobe,html.cs-open .chatmsg{display:none !important}
  /* keep the site-wide particles running over this route too, so it reads as
     the same page rather than a separate app */
  html.cs-open #fx{z-index:41}
  /* no WebGL (or a lost context): drop the empty stage, keep the list + panels */
  .cs-view.no-gl #csGlobe,.cs-view.no-gl .cs-hint{display:none}
  .cs-view.no-gl .cs-wrap{grid-template-columns:1fr;max-width:820px;margin:0 auto}
  .cs-view{position:fixed;inset:0;z-index:40;display:none;opacity:0;transition:opacity .45s ease;
    /* one set of tokens for the whole route, flipped by the site theme */
    --cs-bg:#0a1a26; --cs-fg:#eaf0f2; --cs-dim:#9fb0ba; --cs-soft:#c3ced4;
    --cs-panel:rgba(12,31,43,.62); --cs-line:rgba(255,255,255,.12); --cs-line-2:rgba(255,255,255,.24);
    --cs-item:rgba(255,255,255,.05); --cs-item-h:rgba(255,255,255,.09); --cs-shadow:rgba(0,0,0,.6);
    background:var(--cs-bg);color:var(--cs-fg)}
  html[data-theme="light"] .cs-view{
    --cs-bg:#eaeef0; --cs-fg:#0a2230; --cs-dim:#4e6272; --cs-soft:#33505f;
    --cs-panel:rgba(255,255,255,.74); --cs-line:rgba(10,34,48,.14); --cs-line-2:rgba(10,34,48,.30);
    --cs-item:rgba(10,34,48,.04); --cs-item-h:rgba(10,34,48,.08); --cs-shadow:rgba(10,34,48,.22)}
  .cs-view.on{display:block;opacity:1}
  .cs-view::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(120% 90% at 22% 48%,rgba(163,191,26,.10),transparent 60%),
               radial-gradient(90% 80% at 82% 12%,rgba(0,56,84,.55),transparent 65%)}
  html[data-theme="light"] .cs-view::before{
    background:radial-gradient(120% 90% at 22% 48%,rgba(163,191,26,.16),transparent 62%),
               radial-gradient(90% 80% at 82% 12%,rgba(0,56,84,.10),transparent 68%)}
  .cs-wrap{position:relative;height:100%;display:grid;grid-template-columns:2fr 1fr;
    gap:clamp(12px,2vw,34px);padding:calc(var(--hdr) + 46px) clamp(16px,3vw,44px) clamp(16px,3vh,32px)}

  /* top bar */
  /* the site header supplies the branding and nav now — this row is just the way out */

  /* globe stage — full-screen, behind the content (over the background, under the list/nav) */
  .cs-stage{position:absolute;inset:0;z-index:1;overflow:hidden}
  #csGlobe{width:100%;height:100%;display:block;touch-action:pan-y}
  .cs-stage .cs-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;
    font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-soft);opacity:.9;
    pointer-events:none;transition:opacity .3s}
  .cs-view.picked .cs-hint{opacity:0}

  /* right column */
  /* the panel doesn't block the globe — only the actual cards/links do, so you can drag the globe
     through the empty space of the list */
  .cs-side{position:relative;min-height:0;display:flex;flex-direction:column;gap:clamp(12px,1.6vh,20px);z-index:3;grid-column:2;pointer-events:none}
  .cs-side .cs-item,.cs-side a,.cs-side button{pointer-events:auto}
  /* soft scrim so the list/heading stay readable over the full-screen globe behind them */
  .cs-side::before{content:'';position:absolute;inset:-28px -40px -28px -70px;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--cs-bg) 58%);opacity:.6}
  /* only the panel flexes — without this the intro and list get squashed to nothing
     on short/narrow viewports */
  .cs-intro,.cs-list{flex:0 0 auto}
  .cs-side h2{font-size:clamp(26px,3.2vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.01em}
  .cs-side .cs-kick{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-txt);
    font-weight:600;margin-bottom:10px}
  .cs-side .cs-blurb{color:var(--cs-soft);font-size:15px;line-height:1.55;max-width:52ch}

  .cs-list{display:block}
  .cs-group{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:12px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--cs-dim)}
  .cs-group:first-child{margin-top:0}
  .cs-group::after{content:'';flex:1;height:1px;background:var(--cs-line)}
  .cs-group span{order:1;font-size:11px;letter-spacing:.06em;color:#061019;background:var(--green-3);
    border-radius:999px;padding:2px 8px}
  .cs-row{display:grid;grid-template-columns:1fr;gap:8px}   /* single column now the panel is ~1/3 wide */
  @media (max-width:860px){.cs-row{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.cs-row{grid-template-columns:1fr}}
  .cs-item{--pin:var(--green-3);font-family:inherit;cursor:pointer;text-align:left;display:flex;align-items:flex-start;gap:10px;
    padding:11px 12px;border-radius:14px;background:var(--cs-item);border:1px solid var(--cs-line);
    color:var(--cs-fg);transition:background .2s,border-color .2s,transform .2s}
  .cs-item:hover{background:var(--cs-item-h);border-color:var(--cs-line-2);transform:translateY(-2px)}
  .cs-item.on{background:rgba(163,191,26,.16);border-color:var(--pin)}
  .cs-dot{width:9px;height:9px;margin-top:3px;border-radius:50%;background:var(--pin);flex:none;box-shadow:0 0 0 0 var(--pin);transition:box-shadow .3s}
  .cs-item.on .cs-dot{box-shadow:0 0 0 5px rgba(200,212,0,.18)}
  .cs-item-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .cs-item-tx b{font-size:13.5px;font-weight:600;line-height:1.25}
  .cs-item-tx i{font-style:normal;font-size:11.5px;color:var(--cs-dim);line-height:1.3}
  .cs-item-go{color:var(--pin);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
  .cs-item:hover .cs-item-go,.cs-item.on .cs-item-go{opacity:1;transform:none}

  /* ------------------------------------------------------------------
     The case study itself. It flips in from the pin (transform-origin is set
     to the pin's screen position in JS) and opens over the whole viewport —
     60% transparent, so the globe stays visible behind it. Left-drag tilts it
     up to 5 degrees on each axis; it springs back on release.
     ------------------------------------------------------------------ */
  .cs-panel-holder{position:fixed;inset:0;z-index:50;pointer-events:none;cursor:default;
    perspective:1700px;perspective-origin:50% 45%;
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--hdr) + 6px) clamp(10px,3vw,40px) clamp(10px,2.4vh,26px)}
  .cs-panel{position:relative;width:min(940px,100%);max-height:100%;overflow:hidden;
    border-radius:20px;opacity:0;pointer-events:none;
    transform:rotateY(-90deg) scale(.42);
    transition:transform .92s cubic-bezier(.62,.02,.3,1),opacity .42s cubic-bezier(.62,.02,.3,1)}
  .cs-panel.in{transform:none;opacity:1;pointer-events:auto}
  .cs-panel-holder.armed{pointer-events:auto}
  /* once the flip has landed the hinge moves to the middle so the drag-tilt
     pivots about the card, not about the pin it came from */
  .cs-panel.leaving{transition:transform .42s cubic-bezier(.5,0,.75,.35),opacity .3s ease}
  .cs-panel.settled{transform-origin:50% 50% !important;transition:transform .45s cubic-bezier(.2,.9,.3,1)}
  .cs-panel.settled.dragging{transition:none;cursor:grabbing}
  /* dragging to tilt must not paint a text selection across the copy */
  .cs-panel.dragging,.cs-panel.dragging *{user-select:none;-webkit-user-select:none}

  .cs-panel-in{position:relative;max-height:calc(100vh - clamp(20px,4.8vh,52px));overflow:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--cs-panel);backdrop-filter:blur(18px) saturate(1.25);
    -webkit-backdrop-filter:blur(18px) saturate(1.25);
    border:1px solid var(--cs-line);border-top:3px solid var(--sect,var(--green-3));
    border-radius:20px;padding:clamp(20px,2.4vw,34px);padding-top:clamp(52px,5vw,64px);
    box-shadow:0 40px 110px var(--cs-shadow)}
  .cs-panel-in::after{content:'';display:block;height:clamp(14px,3vh,32px)}   /* clean end to the scroll */

  .cs-close{position:absolute;top:14px;left:16px;z-index:6;font-family:inherit;font-size:15px;font-weight:600;
    line-height:1;cursor:pointer;color:var(--cs-fg);background:var(--cs-item-h);
    border:1px solid var(--cs-line-2);padding:9px 14px 9px 12px;border-radius:999px;
    display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s,border-color .2s}
  .cs-close:hover{background:var(--cs-item);border-color:var(--sect,var(--green-3))}
  .cs-close b{font-size:17px;line-height:1;font-weight:400}

  .cs-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
  .cs-logo{height:48px;width:auto;max-width:130px;object-fit:contain;flex:none}
  .cs-logo-fb{flex:none;width:110px;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.01em;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
    color:var(--sect,var(--green-3));border:1px solid var(--sect,var(--green-3));border-radius:10px;padding:8px 10px}
  .cs-place{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-dim);margin-bottom:5px}
  .cs-head h3{font-size:clamp(21px,2.6vw,34px);font-weight:600;line-height:1.12}

  /* the film and the copy sit side by side once there's room for both */
  .cs-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start}
  .cs-media{position:sticky;top:0}
  .cs-body.solo{grid-template-columns:1fr}
  .cs-video{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;
    cursor:pointer;background:var(--cs-item-h);aspect-ratio:16/9}
  .cs-video.still{cursor:default}
  .cs-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,filter .3s}
  .cs-video:not(.still):hover img{transform:scale(1.04);filter:brightness(1.06)}
  .cs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
    background:rgba(8,35,50,.62);border:1.5px solid rgba(255,255,255,.8);transition:transform .25s}
  .cs-play::after{content:'';position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
    border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
  .cs-video:hover .cs-play{transform:translate(-50%,-50%) scale(1.09)}
  .cs-vlabel{position:absolute;left:14px;bottom:12px;font-size:12px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7)}
  .cs-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block}
  .cs-lead{margin-top:16px}
  .cs-lead p{font-size:15.5px;line-height:1.62;color:var(--cs-soft)}
  .cs-lead p+p{margin-top:11px}

  /* the client block — photo, name, role, their words — as the live pages lead with */
  .cs-person{display:grid;grid-template-columns:76px 1fr;grid-template-areas:'ph cap' 'q q';
    gap:6px 16px;align-items:center;margin-bottom:22px;padding-bottom:20px;
    border-bottom:1px solid var(--cs-line)}
  .cs-person img{grid-area:ph;width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;
    border:2px solid var(--sect,var(--green-3))}
  .cs-person figcaption{grid-area:cap;display:flex;flex-direction:column;gap:2px}
  .cs-person figcaption b{font-size:16px;font-weight:600}
  .cs-person figcaption span{font-size:12.5px;color:var(--cs-dim);line-height:1.35}
  .cs-person blockquote{grid-area:q;margin-top:12px}
  .cs-person blockquote p{font-size:14.5px;line-height:1.65;color:var(--cs-soft)}
  .cs-person blockquote p+p{margin-top:10px}

  .cs-sec{margin-top:20px}
  .cs-sec:first-child{margin-top:0}

  /* the photos from the case-study page */
  .cs-gallery{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .cs-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block;
    border:1px solid var(--cs-line);transition:transform .3s}
  .cs-gallery img:hover{transform:scale(1.03)}

  /* the demo prompt the live pages close on */
  .cs-cta{margin-top:26px;padding:18px 20px;border-radius:16px;display:flex;flex-wrap:wrap;gap:14px;
    align-items:center;justify-content:space-between;
    background:var(--cs-item);border:1px solid var(--cs-line)}
  .cs-cta p{margin:0;font-size:14.5px;line-height:1.55;color:var(--cs-soft);max-width:52ch}
  .cs-cta p b{color:var(--cs-fg)}
  .cs-panel-in h4{margin-top:18px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--sect,var(--green-3));font-weight:600}
  .cs-panel-in h4:first-child{margin-top:0}
  .cs-panel-in p{margin-top:7px;font-size:14.5px;line-height:1.68;color:var(--cs-soft)}
  .cs-quote{margin-top:20px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10)}
  .cs-quote blockquote{font-size:15px;line-height:1.6;color:#e6ecee}
  .cs-quote figcaption{margin-top:11px;display:flex;flex-direction:column}
  .cs-quote figcaption b{font-size:14px;font-weight:600}
  .cs-quote figcaption span{font-size:12.5px;color:#9fb0ba}
  .cs-tilthint{margin-top:26px;padding-top:16px;border-top:1px solid var(--cs-line);
    text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-dim);opacity:.8}

  /* the name that rides the selected pin */
  .cs-tag{position:absolute;z-index:3;pointer-events:none;opacity:0;transform:translate(18px,-50%);
    font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap;color:#08202e;
    background:var(--pin,var(--green-3));padding:4px 10px;border-radius:999px;transition:opacity .3s}

  /* once a case is picked the intro collapses so the list has the room */
  .cs-view .cs-intro{transition:max-height .5s ease,opacity .35s ease,margin .5s ease;overflow:hidden;max-height:320px}
  .cs-view.picked .cs-blurb,.cs-view.picked .cs-prompt{display:none}
  .cs-view.picked .cs-side h2{font-size:clamp(19px,2vw,26px)}

  .cs-prompt{margin-top:4px;color:var(--cs-dim);font-size:13.5px}

  @media (max-width:900px){
    .cs-wrap{grid-template-columns:1fr;grid-template-rows:minmax(210px,30vh) auto;padding-top:calc(var(--hdr) + 42px);
      overflow:auto;height:100%;align-content:start}
    .cs-stage{position:relative;inset:auto;height:min(42vh,360px);z-index:1}
    .cs-side{overflow:visible;grid-column:auto}
    .cs-side::before{display:none}
    .cs-side h2{font-size:clamp(22px,6vw,30px)}
    .cs-view.picked .cs-side h2{font-size:19px}
    .cs-stage .cs-hint{font-size:10.5px;letter-spacing:.12em}
    .cs-panel-holder{perspective:1000px;padding:8px}
    .cs-head{flex-direction:column;align-items:flex-start;gap:10px}
    .cs-body{grid-template-columns:1fr}
    .cs-media{position:static}
    .cs-person{grid-template-columns:60px 1fr}
    .cs-person img{width:60px;height:60px}
    .cs-gallery{grid-template-columns:1fr 1fr}
    .cs-tilthint{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .cs-panel{transition:opacity .3s ease}
    .cs-panel:not(.in){transform:none}
  }

  /* ======================================================================
     INTERACTIVE LED SPACES (#led-spaces)
     A real 4.0 x 4.0 x 2.6 m room in CSS 3D, built from 500 mm LED panels.
     CSS 3D and not WebGL because the client's Vimeo film has to PLAY on the
     back wall — a cross-origin iframe can't be a WebGL texture, but it can
     be a DOM element sitting in perspective inside the room.
     ==================================================================== */
  /* ======================= CONTENT ROUTES (#features / #sectors / #faqs) ====
     Deliberately quiet next to the 3D routes: these pages exist to be read.
     Same glass vocabulary as the rest of the site. */
  html.ft-open,html.ft-open body,html.sc-open,html.sc-open body,html.fq-open,html.fq-open body{overflow:hidden}
  html.ft-open .chatglobe,html.ft-open .chatmsg,
  html.sc-open .chatglobe,html.sc-open .chatmsg,
  html.fq-open .chatglobe,html.fq-open .chatmsg{display:none !important}

  .pg-view{position:fixed;inset:0;z-index:40;display:none;opacity:0;transition:opacity .4s ease;
    --pg-bg:#0e1e2a; --pg-fg:#eaf0f2; --pg-soft:#c2ced5; --pg-line:rgba(255,255,255,.12);
    --pg-card:rgba(255,255,255,.05); --pg-on:#C8D400;
    background:var(--pg-bg);color:var(--pg-fg)}
  html[data-theme="light"] .pg-view{
    --pg-bg:#eef1f2; --pg-fg:#0a2230; --pg-soft:#3b5666; --pg-line:rgba(10,34,48,.13);
    --pg-card:rgba(255,255,255,.72); --pg-on:#4a6a0c}
  .pg-view.on{display:block;opacity:1}
  /* a soft lime bloom top-left so the page isn't a flat field of navy */
  .pg-view::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(58% 44% at 14% -6%,rgba(163,191,26,.13),transparent 62%)}
  .pg-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    padding:0 clamp(16px,3vw,44px) 60px}
  /* display:block is load-bearing — the global `header{display:flex}` for the
     site chrome would otherwise lay this out as a row */
  /* ---- the sector hero: the room, built from LED pixels (sectors3d.js) ----
     A 2D canvas, not WebGL — the site already runs two contexts and this needs
     none. sectors3d.js projects a field of points itself and draws them as small
     squares: the same pixels the product is made of. The shell (floor grid and
     three walls) never changes; only what stands inside it does. */
  /* Written as .pg-hero.oct-hero on purpose. .pg-hero caps every other route's
     hero at the 1180px text measure and pads it below the header — right for
     prose, wrong for this — and it is declared LATER in this sheet, so a plain
     .oct-hero rule loses on source order and the room gets drawn into a 1180px
     box while only looking full width. The negative inline margin cancels
     .pg-scroll's own gutter, which is the last thing between this and the edge
     of the glass. */
  .pg-hero.oct-hero{position:relative;min-height:100vh;min-height:100svh;
    padding:0;max-width:none;width:auto;
    margin:0 calc(-1 * clamp(16px,3vw,44px));
    display:grid;place-items:center;background:var(--pg-bg);overflow:hidden}
  .oct-stage{position:absolute;inset:0;cursor:grab;touch-action:none;z-index:1}
  .oct-zoom{position:absolute;z-index:5;right:18px;top:calc(var(--hdr) + 12px);display:flex;gap:4px}
  .oct-zoom button{min-width:44px;min-height:44px;border:1px solid var(--pg-line);border-radius:8px;background:var(--pg-bg);color:var(--pg-text);font:inherit;cursor:pointer;padding:8px}
  @media(max-width:700px){.oct-zoom{top:calc(var(--hdr) + 4px);right:8px}.oct-head{top:calc(var(--hdr) + 60px)!important}}
  .oct-stage.grabbing{cursor:grabbing}
  .oct-stage canvas{display:block;width:100%;height:100%}
  /* the field falls away at the edges so it reads as an object on the page
     rather than a canvas that has been cropped by its own box */
  .oct-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(150% 115% at 50% 50%,transparent 68%,var(--pg-bg) 100%)}
  .sc-rest{position:relative;z-index:3;background:var(--pg-bg)}

  .oct-head{position:absolute;z-index:3;text-align:center;pointer-events:none;
    left:50%;transform:translateX(-50%);top:calc(var(--hdr) + 22px);width:min(760px,88vw)}
  .oct-head h1{margin:.2em 0 .5em}
  .oct-head .pg-kick{justify-content:center}
  .oct-hint{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--pg-soft);opacity:.8;
    margin:0 auto 12px;padding:0 4px}
  .oct-grab{width:26px;height:14px;border:1px solid var(--pg-line);border-radius:8px;position:relative}
  .oct-grab::after{content:"";position:absolute;top:3px;left:4px;width:5px;height:6px;
    border-radius:3px;background:var(--green);animation:octnudge 2.4s ease-in-out infinite}
  @keyframes octnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(11px)}}

  .oct-rail{position:absolute;left:max(14px,3vw);top:50%;transform:translateY(-50%);
    z-index:4;display:flex;flex-direction:column;gap:2px}
  .oct-lab{display:flex;align-items:center;gap:9px;justify-content:flex-start;
    background:none;border:0;font:inherit;font-size:12.5px;letter-spacing:.04em;
    color:var(--pg-soft);opacity:.6;cursor:pointer;padding:6px 2px;text-align:left;
    transition:opacity .2s,color .2s}
  .oct-lab .ic{width:15px;height:15px;flex:none}
  .oct-lab:hover{opacity:.95}
  .oct-lab.on{opacity:1;color:var(--pg-on);font-weight:600}
  .oct-lab:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

  /* THE BAR — always visible, deliberately small. It names the sector, gives its
     one line, and offers the button. The room is the hero; the reading is on
     request, so the copy does not sit on top of the thing it is describing. */
  /* --sheetw is set from JS to the sheet's real width while it is open, so the
     bar re-centres itself in the space that is left rather than sliding under
     it. Zero when the sheet is shut, which is the plain centred case. */
  .oct-panel{position:absolute;left:calc(50% - var(--sheetw,0px) / 2);bottom:max(28px,7vh);z-index:5;
    width:min(760px,calc(92vw - var(--sheetw,0px)));opacity:0;transform:translate(-50%,16px);
    /* left/width move WITH the sheet and on the same curve. At .5s against the
       sheet's 1.1s the bar had finished re-centring before the panel was half
       way in, and two things moving the same distance at different speeds is
       what reads as a slam however slow you make the slower one. opacity and
       transform stay quicker: they are the bar appearing, not the bar moving. */
    transition:left .92s cubic-bezier(.22,.72,.24,1),width .92s cubic-bezier(.22,.72,.24,1),
      opacity .5s ease,transform .5s cubic-bezier(.22,.72,.24,1)}
  /* stretch, not center: as a centred flex item the bar sizes to its own
     content and happily grows past the panel it is supposed to fit inside. */
  .oct-panel{pointer-events:none;display:flex;flex-direction:column;align-items:stretch}
  .oct-hint{align-self:center}
  .oct-panel.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .oct-bar{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);
    padding:14px 16px 14px 20px;border-radius:999px;background:rgba(9,24,33,.66);
    border:1px solid var(--pg-line);backdrop-filter:blur(16px)}
  html[data-theme="light"] .oct-bar{background:rgba(255,255,255,.78)}
  .oct-bar-txt{min-width:0;flex:1}
  .oct-bar-kick{display:flex;align-items:center;gap:8px;margin:0 0 3px;min-width:0;
    font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--pg-on);font-weight:600}
  .oct-bar-kick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .oct-bar-kick .ic{width:14px;height:14px;flex:none}
  /* the room configuration this sector is built in — 4x4 suite, 8 m front,
     8 m wraparound or the half-hex wrap. Small, lime, and set apart from the
     sector name so it reads as a spec rather than part of the title. */
  .oct-cfg{font-style:normal;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--green);flex:none;opacity:.9}
  .oct-bar p{margin:0;font-size:14px;line-height:1.4;color:var(--pg-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .oct-open{flex:none;white-space:nowrap}
  .oct-open .cnt{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
    background:rgba(0,0,0,.22);font-size:11.5px;font-weight:700;vertical-align:1px}

  /* THE SHEET — the copy, on request. It takes the right-hand side and the room
     eases across and shrinks to sit beside it rather than being covered: the
     point of the page is that you are looking at the room while you read about
     what goes in it. */
  /* Opaque, and starting below the site header. --pg-card is a 5% wash meant to
     lift a panel off the page background, not to carry body copy over a moving
     canvas; used here it left the headline and the nav legible straight through
     four paragraphs of text. */
  .oct-sheet{position:absolute;top:var(--hdr);right:0;bottom:0;z-index:8;width:min(560px,44vw);
    display:flex;flex-direction:column;background:var(--pg-bg);
    box-shadow:-28px 0 60px rgba(0,0,0,.34);
    border-left:1px solid var(--pg-line);
    transform:translateX(30%);opacity:0;visibility:hidden;
    /* .5s, then .62s, then 1.1s. Three goes at the DURATION, and the duration
       was never what was wrong.

       The panel travelled its own full width: 560px of opaque slab crossing the
       room with a 60px shadow running ahead of it. An object that travels its
       own width reads as thrown however long it takes — slowing it down only
       buys you a slow heavy thing. It moves 30% of its width now and opacity
       carries the rest, so it settles into place beside the room instead of
       arriving from off-stage.

       The other half of it was never CSS at all: see openSheet(). */
    transition:transform .92s cubic-bezier(.22,.72,.24,1),opacity .5s ease,
      visibility 0s linear .92s}
  .oct-sheet.on{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  /* The CONTENT settles in just behind the panel rather than arriving with it.
     This rule is not new — it has been here since (31) and had never once run,
     because the panel's markup was rebuilt after the open class went on and
     every fresh child was born already matching the .on state below. It runs
     now, so these numbers finally mean something. */
  .oct-sheet-top,.oct-sheet-body,.oct-sheet-cta{opacity:0;transform:translateY(12px);
    transition:opacity .50s ease .22s,transform .60s cubic-bezier(.22,.72,.24,1) .22s}
  .oct-sheet.on .oct-sheet-top,.oct-sheet.on .oct-sheet-body,
  .oct-sheet.on .oct-sheet-cta{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .oct-sheet{transition:none}
    .oct-sheet-top,.oct-sheet-body,.oct-sheet-cta{transition:none;opacity:1;transform:none}
  }
  .oct-sheet-top{display:flex;align-items:flex-start;gap:16px;
    padding:clamp(22px,3vw,34px) clamp(20px,2.6vw,32px) 14px}
  .oct-sheet-top .oct-bar-kick{margin-bottom:6px}
  .oct-sheet h2{font-size:clamp(19px,1.8vw,24px);line-height:1.24;margin:0;
    font-weight:600;max-width:none}
  .oct-shut{flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
    background:none;border:1px solid var(--pg-line);color:var(--pg-fg);font:inherit;
    font-size:17px;line-height:1;display:grid;place-items:center;
    transition:border-color .2s,color .2s}
  .oct-shut:hover{border-color:var(--pg-on);color:var(--pg-on)}
  .oct-sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;
    padding:0 clamp(20px,2.6vw,32px) clamp(20px,3vw,30px)}
  .oct-sheet-body p{font-size:15px;line-height:1.66;color:var(--pg-soft);
    font-weight:300;margin:0 0 1em;max-width:none}
  .oct-cases{margin-top:22px;padding-top:20px;border-top:1px solid var(--pg-line)}
  .oct-cases h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--pg-on);font-weight:600;margin:0 0 12px}
  .oct-case{display:flex;align-items:baseline;gap:10px;padding:11px 0;
    border-bottom:1px solid var(--pg-line);text-decoration:none;color:inherit}
  .oct-case:last-child{border-bottom:0}
  .oct-case strong{font-size:14.5px;font-weight:600}
  .oct-case span{font-size:12.5px;color:var(--pg-soft)}
  .oct-case:hover strong{color:var(--pg-on)}
  .oct-case::after{content:"\2192";margin-left:auto;color:var(--pg-soft)}
  .oct-sheet-cta{display:flex;gap:10px;flex-wrap:wrap;
    padding:16px clamp(20px,2.6vw,32px) clamp(20px,3vw,28px);
    border-top:1px solid var(--pg-line)}

  .sc-intro{padding-top:clamp(30px,4vw,54px)}

  @media (max-width:820px){
    .oct-rail{left:8px;gap:0}
    .oct-lab span{display:none}
    .oct-lab{padding:9px 4px}
    .oct-head{top:calc(var(--hdr) + 14px)}
    .oct-hint{font-size:11px}
    .oct-bar{padding:11px 12px 11px 16px;gap:12px}
    /* :not() matters — the kick is a <p> too, and a bare rule ate the sector
       name along with the blurb, leaving a pill with only a button in it. */
    .oct-bar p:not(.oct-bar-kick){display:none}   /* the blurb leads the sheet anyway */
    /* no room to sit beside anything on a phone: the sheet becomes a bottom
       sheet over the lower two-thirds and the room keeps the strip above it */
    .oct-sheet{top:auto;left:0;width:auto;height:76%;border-left:0;
      border-top:1px solid var(--pg-line);border-radius:18px 18px 0 0;
      box-shadow:0 -24px 60px rgba(0,0,0,.4);transform:translateY(26%)}
    /* no horizontal room to give back on a phone */
    .oct-panel{left:50%;width:min(760px,92vw)}
    .oct-hero.sheet-on .oct-head,
    .oct-hero.sheet-on .oct-rail{opacity:0;pointer-events:none;transition:opacity .8s ease}
  }
  @media (prefers-reduced-motion: reduce){ .oct-grab::after{animation:none} }

  .pg-hero{display:block;max-width:1180px;margin:0 auto;padding:calc(var(--hdr) + 52px) 0 8px}
  .pg-hero.narrow,.pg-sec.narrow{max-width:840px}
  .pg-hero h1{font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:-.025em;line-height:1.05;max-width:17ch}
  .pg-hero h1 em{font-style:normal;color:var(--pg-on)}
  .pg-kick{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--pg-on);font-weight:600;margin-bottom:13px}
  .pg-kick .ic{width:16px;height:16px}
  .pg-lede{margin-top:16px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.62;color:var(--pg-soft);max-width:60ch;font-weight:300}
  .pg-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
  .pg-sec{max-width:1180px;margin:0 auto;padding:clamp(30px,4vw,54px) 0}
  .pg-sec h2{font-size:clamp(21px,2.5vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:26ch}
  .pg-grid{display:grid;gap:14px;margin-top:22px}
  .pg-grid.g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:960px){.pg-grid.g3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.pg-grid.g3{grid-template-columns:1fr}}
  .pg-card{border-radius:18px;padding:22px;background:var(--pg-card);border:1px solid var(--pg-line);
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 rgba(255,255,255,.10) inset;transition:transform .22s,border-color .22s}
  html[data-theme="light"] .pg-card{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 28px rgba(10,34,48,.07)}
  .pg-card:hover{transform:translateY(-3px);border-color:rgba(200,212,0,.45)}
  .pg-card .n{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--pg-on);display:block;margin-bottom:10px}
  .pg-card .ic{width:24px;height:24px;color:var(--pg-on);display:block;margin-bottom:12px}
  .pg-card h4{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
  .pg-card p{font-size:14px;line-height:1.6;color:var(--pg-soft);font-weight:300}
  .pg-card p small{opacity:.88;font-size:12px}
  .pg-card.link{text-decoration:none;color:inherit;display:flex;flex-direction:column;cursor:pointer}
  .pg-card.link i{font-style:normal;margin-top:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-on)}
  .pg-note{margin-top:20px;font-size:13.5px;color:var(--pg-soft);opacity:.85;max-width:60ch}
  .pg-foot{max-width:1180px;margin:0 auto;padding:clamp(34px,5vw,70px) 0 20px;text-align:center;
    border-top:1px solid var(--pg-line)}
  .pg-foot h2{font-size:clamp(22px,2.8vw,36px);font-weight:700;letter-spacing:-.02em}
  .pg-foot .pg-lede{margin-left:auto;margin-right:auto}
  /* deep links (#sectors/<id>) must clear the fixed header when they land */
  .sec-panel{border-top:1px solid var(--pg-line);scroll-margin-top:calc(var(--hdr) + 30px)}
  .pg-view .sec-tile{color:var(--pg-fg);background:var(--pg-card);border:1px solid var(--pg-line);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .pg-view .sec-tile .ic{color:var(--pg-on)}
  .pg-view .sec-tile:hover{border-color:rgba(200,212,0,.45)}

  /* FAQ accordion */
  .faq-list{display:grid;gap:10px;margin-top:20px}
  .faq{border-radius:16px;background:var(--pg-card);border:1px solid var(--pg-line);overflow:hidden;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .faq summary{cursor:pointer;list-style:none;padding:17px 20px;font-size:16px;font-weight:600;
    display:flex;align-items:center;justify-content:space-between;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--pg-on)}
  .faq .chev{flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s;opacity:.7}
  .faq[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
  .faq .faq-a{padding:0 20px 18px}
  .faq .faq-a p{font-size:14.5px;line-height:1.66;color:var(--pg-soft);font-weight:300;max-width:70ch}

  /* the Features teaser that replaced the six-card block on the homepage */
  .feat-teaser{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
    border-radius:20px;padding:clamp(20px,2.6vw,30px)}
  .feat-teaser .c-lead{max-width:60ch}

  html.led-open, html.led-open body{overflow:hidden}
  html.led-open .chatglobe,html.led-open .chatmsg{display:none !important}
  html.led-open #fx{z-index:41}

  .led-view{position:fixed;inset:0;z-index:40;display:none;opacity:0;transition:opacity .45s ease;
    --led-bg:#0e1e2a; --led-fg:#eaf0f2; --led-dim:#a3b5c1; --led-soft:#ccd6dc;
    --led-line:rgba(255,255,255,.12); --led-card:rgba(255,255,255,.045);
    --led-on:#C8D400; --led-glow:rgba(200,212,0,.55); --led-ontx:#C8D400;
    background:var(--led-bg);color:var(--led-fg)}
  html[data-theme="light"] .led-view{
    --led-bg:#e9edef; --led-fg:#0a2230; --led-dim:#4e6272; --led-soft:#33505f;
    /* lime is a 1.4:1 text colour on this background — text takes the olive,
       while --led-on stays lime for the pixels and glows */
    --led-ontx:#4a6a0c;
    --led-line:rgba(10,34,48,.14); --led-card:rgba(10,34,48,.04)}
  .led-view.on{display:block;opacity:1}
  .led-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}

  /* ---------- the hero stage ------------------------------------------- */
  /* the room IS the hero — full bleed, copy laid over it */
  /* the room is a 3D object and will happily overflow its section — clip it so
     the floor stops just under the size picker rather than sliding down over
     the copy below. overflow lives on the hero, NOT on .led-stage, because
     clipping the element that owns the perspective flattens the room. */
  .led-hero{position:relative;height:100vh;min-height:560px;overflow:hidden}
  .led-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;
    touch-action:pan-y}
  /* ambient bounce, so the room reads as lit rather than switched off */
  .led-stage::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity 1s ease .3s;
    background:radial-gradient(58% 46% at 52% 44%,rgba(140,200,230,.20),transparent 68%),
               radial-gradient(70% 55% at 50% 78%,rgba(200,212,0,.12),transparent 70%)}
  .led-view.live .led-stage::before{opacity:1}
  .led-copy{position:absolute;left:clamp(16px,3vw,52px);bottom:clamp(96px,15vh,150px);z-index:4;
    max-width:min(38ch,42vw);pointer-events:none}
  .led-copy>*{pointer-events:auto}
  .led-hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,var(--led-bg) 6%,rgba(14,30,42,.42) 32%,rgba(0,0,0,0) 56%),
               linear-gradient(0deg,var(--led-bg) 2%,rgba(0,0,0,0) 24%)}
  html[data-theme="light"] .led-hero::after{
    background:linear-gradient(90deg,var(--led-bg) 4%,rgba(255,255,255,0) 52%),
               linear-gradient(0deg,var(--led-bg) 2%,rgba(255,255,255,0) 26%)}
  .led-room{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;z-index:1}

  /* every surface is a grid of panels, sized in real metres */
  .led-wall{position:absolute;transform-style:preserve-3d;display:grid;
    grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);
    gap:3px;padding:3px;background:#0a1520;border:1px solid rgba(255,255,255,.22);
    box-shadow:0 0 70px rgba(200,212,0,.20),inset 0 0 60px rgba(120,190,220,.06)}
  /* every surface is positioned from JS in real metres — see layout() in led.js */
  /* The floor spans the full depth, so on the deep presets its near edge sails
     straight past the camera. Cut it off hard at the room's front line — after
     rotateX(90deg) the element's bottom edge IS the near edge, so the mask runs
     bottom-to-top with a short ramp rather than a long fade. */
  .led-wall.floor{
    -webkit-mask-image:linear-gradient(to top,transparent 0,transparent 16%,#000 21%,#000 100%);
    mask-image:linear-gradient(to top,transparent 0,transparent 16%,#000 21%,#000 100%)}

  .led-tile{display:block;border-radius:1px;position:relative;
    background:linear-gradient(160deg,#28455a,#162c3b);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12);
    opacity:0;transform:translateZ(-160px) scale(.4);
    transition:opacity .5s ease var(--d),transform .62s cubic-bezier(.2,.9,.3,1.2) var(--d),
               background .35s ease,box-shadow .35s ease}
  .led-view.rig .led-tile{opacity:1;transform:none}
  /* the power-on test every LED panel does before it shows content */
  .led-view.power .led-tile{animation:ledPower .7s ease var(--d) both}
  @keyframes ledPower{
    0%{filter:none} 16%{filter:brightness(6) saturate(0)} 32%{filter:brightness(3) hue-rotate(40deg) saturate(4)}
    50%{filter:brightness(2.2) hue-rotate(160deg) saturate(3)} 72%{filter:brightness(1.4)} 100%{filter:none}}
  /* pointer over a panel lights it — this is what the touch software does */
  .led-tile.hot{background:var(--led-on);box-shadow:0 0 12px var(--led-glow);transition:background .05s,box-shadow .05s}

  /* the scanline sweep, then the surfaces come alive */
  .led-wall::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,transparent 42%,rgba(200,212,0,.55) 50%,transparent 58%)}
  .led-view.scan .led-wall::after{animation:ledScan .8s ease-out both}
  @keyframes ledScan{0%{opacity:1;transform:translateY(-100%)}100%{opacity:0;transform:translateY(100%)}}

  /* generative content on the side walls, one look per use case */
  .led-side-art{position:absolute;inset:3px;z-index:2;opacity:0;pointer-events:none;
    transition:opacity .6s ease .1s;mix-blend-mode:screen}
  .led-view.live .led-side-art{opacity:1}
  .led-room[data-mode="sell"]  .led-side-art{background:
    repeating-linear-gradient(90deg,rgba(200,212,0,.30) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(0deg,rgba(200,212,0,.18) 0 2px,transparent 2px 26px);
    animation:ledDrift 9s linear infinite}
  .led-room[data-mode="train"] .led-side-art{background:
    radial-gradient(60% 40% at 30% 60%,rgba(255,86,86,.5),transparent 70%),
    radial-gradient(50% 50% at 75% 30%,rgba(200,212,0,.42),transparent 70%);
    animation:ledPulse 3.2s ease-in-out infinite}
  .led-room[data-mode="teach"] .led-side-art{background:
    linear-gradient(115deg,rgba(90,169,230,.5),transparent 55%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.10) 0 3px,transparent 3px 22px);
    animation:ledDrift 12s linear infinite reverse}
  .led-room[data-mode="brand"] .led-side-art{background:
    conic-gradient(from 0deg at 50% 50%,rgba(200,212,0,.55),rgba(55,194,168,.45),rgba(90,169,230,.5),rgba(200,212,0,.55));
    animation:ledSpin 14s linear infinite}
  @keyframes ledDrift{to{background-position:260px 260px,260px 260px}}
  @keyframes ledPulse{50%{filter:brightness(1.5)}}
  @keyframes ledSpin{to{filter:hue-rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.led-side-art{animation:none !important}}

  /* the film, genuinely on the back wall */
  /* the size picker, floating over the room once it's built */
  .led-sizes{position:absolute;left:50%;bottom:clamp(20px,4vh,38px);transform:translateX(-50%);z-index:5;
    display:flex;gap:8px;opacity:0;transition:opacity .5s ease .2s;pointer-events:none}
  .led-view.live .led-sizes{opacity:1;pointer-events:auto}
  .led-size{font-family:inherit;text-align:left;cursor:pointer;padding:9px 15px;border-radius:14px;
    background:rgba(6,15,22,.92);border:1px solid rgba(255,255,255,.22);color:var(--led-fg);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45);
    transition:border-color .2s,background .2s,transform .2s}
  html[data-theme="light"] .led-size{background:rgba(255,255,255,.94);border-color:rgba(10,34,48,.22)}
  .led-size:hover{transform:translateY(-2px);border-color:var(--led-on)}
  .led-size.on{border-color:var(--led-on);background:rgba(200,212,0,.16)}
  .led-size b{display:block;font-size:13.5px;font-weight:600}
  .led-size span{display:block;margin-top:3px;font-size:11.5px;color:var(--led-soft);opacity:.85;max-width:24ch}
  @media (max-width:700px){.led-size span{display:none}}


  /* ---------- hero copy ------------------------------------------------- */
  .led-copy .eyebrow{color:var(--led-ontx)}
  .led-copy h1{font-size:clamp(30px,3.4vw,50px);font-weight:700;letter-spacing:-.025em;line-height:1.05}
  .led-copy h1 em{font-style:normal;color:var(--led-ontx)}
  .led-copy p{margin-top:14px;font-size:clamp(14px,1.05vw,16.5px);line-height:1.58;color:var(--led-soft);max-width:44ch}
  .led-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .led-replay{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--led-fg);
    background:var(--led-card);border:1px solid var(--led-line);border-radius:999px;padding:10px 17px;
    transition:border-color .2s,background .2s}
  .led-replay:hover{border-color:var(--led-on);color:var(--led-ontx)}

  /* ---------- content below --------------------------------------------- */
  .led-sec{padding:clamp(48px,7vh,96px) clamp(16px,3vw,44px);max-width:1240px;margin:0 auto}
  .led-sec h2{font-size:clamp(26px,3.4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:20ch}
  .led-sec .lede{margin-top:16px;font-size:clamp(15px,1.2vw,18px);line-height:1.62;color:var(--led-soft);max-width:62ch}
  .led-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--led-ontx);font-weight:600;margin-bottom:14px}

  .led-uses{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .led-use{font-family:inherit;text-align:left;cursor:pointer;padding:20px;border-radius:16px;
    background:var(--led-card);border:1px solid var(--led-line);color:var(--led-fg);
    transition:border-color .25s,background .25s,transform .25s}
  .led-use:hover{transform:translateY(-3px);border-color:var(--led-on)}
  .led-use.on{border-color:var(--led-on);background:rgba(200,212,0,.12)}
  .led-use-n{font-size:11px;letter-spacing:.2em;color:var(--led-ontx);font-weight:700}
  .led-use h4{margin-top:10px;font-size:16.5px;font-weight:600;line-height:1.25}
  .led-use p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--led-dim)}

  .led-stats{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .led-stat{padding:22px;border-radius:16px;background:var(--led-card);border:1px solid var(--led-line)}
  .led-stat b{display:block;font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1;color:var(--led-ontx)}
  .led-stat b sup{font-size:.5em;vertical-align:super}
  .led-stat span{display:block;margin-top:10px;font-size:14px;font-weight:600}
  .led-stat p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--led-dim)}

  .led-two{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px)}
  .led-list{list-style:none;display:grid;gap:10px}
  .led-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--led-soft)}
  .led-list li::before{content:'';flex:none;width:9px;height:9px;margin-top:6px;border-radius:2px;
    background:var(--led-on);box-shadow:0 0 10px var(--led-glow)}
  .led-panelbox{padding:clamp(20px,2.4vw,30px);border-radius:20px;background:var(--led-card);
    border:1px solid var(--led-line)}
  .led-steps{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
  .led-step{padding:20px;border-radius:16px;background:var(--led-card);border:1px solid var(--led-line);
    position:relative;overflow:hidden}
  .led-step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
    font-size:11px;letter-spacing:.2em;color:var(--led-ontx);font-weight:700}
  .led-step h4{margin-top:10px;font-size:16px;font-weight:600}
  .led-step p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--led-dim)}
  .led-foot{padding:clamp(40px,6vh,80px) clamp(16px,3vw,44px) clamp(60px,9vh,120px);text-align:center}
  .led-foot h2{margin:0 auto;max-width:18ch}
  .led-foot .lede{margin:16px auto 0}

  @media (max-width:1000px){
    .led-hero{grid-template-columns:1fr;padding-top:calc(var(--hdr) + 26px)}
    .led-stage{height:min(50vh,420px);order:-1}
    .led-uses,.led-stats,.led-steps{grid-template-columns:1fr 1fr}
    .led-two{grid-template-columns:1fr}
  }
  @media (max-width:620px){
    .led-uses,.led-stats,.led-steps{grid-template-columns:1fr}
    .led-stage{height:44vh}
    .led-room{transform:translateZ(-264px) scale(.62)}
  }

  /* the film, at a size you can actually watch */
  .led-filmbox{position:relative;margin-top:26px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;
    background:#04101a;border:1px solid var(--led-line)}
  .led-filmbox img{width:100%;height:100%;object-fit:cover;display:block}
  .led-filmbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .led-filmbox.playing img,.led-filmbox.playing .led-play{display:none}
  .led-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;
    border-radius:50%;cursor:pointer;background:rgba(8,35,50,.6);border:2px solid #fff;
    transition:transform .25s,background .25s}
  .led-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--led-on)}
  .led-play span{position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);border-style:solid;
    border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
  .led-play:hover span{border-left-color:#08202e}

  /* glass feature boxes (audit §6) */
  .led-boxes{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .led-boxes.small{grid-template-columns:repeat(4,1fr)}
  @media(max-width:960px){.led-boxes{grid-template-columns:repeat(2,1fr)}.led-boxes.small{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.led-boxes,.led-boxes.small{grid-template-columns:1fr}}
  .led-box{padding:20px;border-radius:18px;background:var(--led-card);border:1px solid var(--led-line);
    backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:0 1px 0 rgba(255,255,255,.09) inset;transition:transform .22s,border-color .22s}
  html[data-theme="light"] .led-box{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px rgba(10,34,48,.06)}
  .led-box:hover{transform:translateY(-3px);border-color:var(--led-glow)}
  .led-box svg{width:24px;height:24px;display:block;margin-bottom:12px;color:var(--led-ontx);
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .led-box h4{font-size:16px;font-weight:600;letter-spacing:-.01em}
  .led-box p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--led-soft);font-weight:300}
  .led-boxes.small .led-box{padding:16px 18px}
  .led-boxes.small .led-box svg{width:20px;height:20px;margin-bottom:9px}
  .led-boxes.small .led-box h4{font-size:14.5px;font-weight:500}

  .led-gallery{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  /* gallery shots link through to their case study; the caption rises on hover */
  .led-shot{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--led-line);
    background:var(--led-card);text-decoration:none;color:#fff;transition:border-color .25s}
  .led-shot.wide{grid-column:1 / -1}
  .led-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
  .led-shot.wide img{max-height:440px}
  .led-shot:not(.wide) img{aspect-ratio:4/3}
  .led-shot:hover{border-color:var(--led-glow)}
  .led-shot:hover img{transform:scale(1.045)}
  .led-shot .cap{position:absolute;inset:auto 0 0 0;padding:44px 20px 18px;display:flex;flex-direction:column;gap:4px;
    background:linear-gradient(180deg,transparent,rgba(4,14,20,.86));
    opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s}
  .led-shot:hover .cap,.led-shot:focus-visible .cap{opacity:1;transform:none}
  .led-shot .cap b{font-size:15px;font-weight:600}
  .led-shot .cap i{font-style:normal;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--led-ontx)}
  .led-shot:focus-visible{outline:2px solid var(--led-on);outline-offset:3px}
  @media(hover:none){.led-shot .cap{opacity:1;transform:none}}
  .led-gallery figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--led-line);background:var(--led-card)}
  .led-gallery figure.wide{grid-column:1 / -1}
  .led-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
  .led-gallery figure.wide img{max-height:440px}
  .led-gallery figure:not(.wide) img{aspect-ratio:4/3}
  .led-gallery figure:hover img{transform:scale(1.04)}

  /* the client wall, scrolling */
  .led-logos{margin-top:26px;overflow:hidden;padding:clamp(20px,3vh,34px) 0;
    border-top:1px solid var(--led-line);border-bottom:1px solid var(--led-line);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .led-logo-track{display:flex;align-items:center;gap:clamp(44px,5.5vw,96px);width:max-content;
    animation:ledLogos 48s linear infinite}
  .led-logos:hover .led-logo-track{animation-play-state:paused}
  .led-logo-track img{height:clamp(52px,6vw,86px);width:auto;object-fit:contain;opacity:.9;
    filter:brightness(0) invert(1);transition:opacity .25s}
  .led-logo-track img:hover{opacity:1}
  html[data-theme="light"] .led-logo-track img{filter:none;opacity:.75}
  @keyframes ledLogos{to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.led-logo-track{animation:none}}
  @media (max-width:620px){.led-gallery{grid-template-columns:1fr}}

  /* ======================================================================
     ENQUIRY MODAL — Book a demo / Contact us, hinged on the button pressed
     ==================================================================== */
  html.g8f-open, html.g8f-open body{overflow:hidden}
  .g8f-wrap{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
    padding:clamp(12px,3vh,32px) clamp(12px,3vw,40px);perspective:1600px;
    background:rgba(4,12,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;
    transition:opacity .35s ease}
  html[data-theme="light"] .g8f-wrap{background:rgba(220,228,232,.66)}
  .g8f-wrap.on{display:flex;opacity:1}
  /* THE TIMING LIVES WITH THE STATE IT MOVES TO, and this is deliberate.
     The resting rule below carries the EXIT timing, and .in carries the
     ENTRANCE timing, so closing is nothing but removing a class: the transition
     that governs the change is already the one attached to the state being
     moved to, and there is no moment where the definition and the value it
     governs both change at once.

     Doing it the other way — a .leaving class that swaps the transition at the
     same instant the transform changes — was measured on the built page and
     does not reliably start at all: zero transition events, nothing from
     getAnimations(), the panel snapping to its end state with a perfectly valid
     .42s duration sitting on it doing nothing.

     Out is half the time of in, on the accelerating curve rather than the
     decelerating one: an arrival should settle into place, a departure should
     leave at speed. Same numbers .cs-panel.leaving uses. */
  .g8f-panel{position:relative;width:min(760px,100%);max-height:100%;
    transform:rotateY(-88deg) scale(.5);opacity:0;
    transition:transform .42s cubic-bezier(.5,0,.75,.35),opacity .3s ease}
  .g8f-panel.in{transform:none;opacity:1;
    transition:transform .78s cubic-bezier(.62,.02,.3,1),opacity .4s cubic-bezier(.62,.02,.3,1)}
  .g8f-panel.settled{transform-origin:50% 50% !important}
  /* .on is what sets display:flex, so it has to stay on for the exit to be
     visible at all; .closing runs the backdrop down underneath the panel. */
  .g8f-wrap.closing{opacity:0}

  .g8f-in{max-height:calc(100vh - clamp(24px,6vh,64px));overflow:auto;overscroll-behavior:contain;
    background:var(--content-bg);border:1px solid var(--card-bd);border-top:3px solid var(--green-3);
    border-radius:22px;padding:clamp(22px,3vw,38px);padding-top:clamp(54px,5vw,64px);
    box-shadow:0 40px 120px rgba(0,0,0,.5)}
  .g8f-close{position:absolute;top:14px;left:16px;z-index:3;font-family:inherit;font-size:15px;font-weight:600;
    line-height:1;cursor:pointer;color:var(--text);background:var(--chipbg);border:1px solid var(--edge);
    padding:9px 14px 9px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
    transition:border-color .2s,background .2s}
  .g8f-close:hover{border-color:var(--green-3)}
  .g8f-close b{font-size:17px;font-weight:400;line-height:1}
  .g8f-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
  .g8f-in h3{margin-top:10px;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
  .g8f-lede{margin-top:12px;font-size:15px;line-height:1.6;color:var(--soft);max-width:56ch}

  .g8f-form{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .g8f-field{display:flex;flex-direction:column;gap:6px}
  .g8f-field.wide{grid-column:1 / -1}
  .g8f-field>span{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--soft)}
  .g8f-field>span i{font-style:normal;color:var(--accent-txt)}
  .g8f-field input,.g8f-field select,.g8f-field textarea{
    font-family:inherit;font-size:15px;color:var(--text);background:var(--card);
    border:1px solid var(--card-bd);border-radius:12px;padding:12px 14px;width:100%;
    transition:border-color .2s,box-shadow .2s;
    /* color-scheme tells the browser which way to draw the parts of a native
       control we can't reach with CSS. Without it the OS assumes light. */
    color-scheme:var(--scheme)}
  /* A <select>'s open list is drawn by the OS, not by us, and it will not use a
     translucent background — Chrome on Windows fell back to WHITE while the
     options still inherited the dark theme's white --text. White on white: the
     sector list was invisible until you moused over a row. Two things fix it
     together, because no single one covers every platform: an OPAQUE background
     on the control (Windows/Linux Chrome uses it for the list), and
     color-scheme above (macOS and Firefox go by that). The options get explicit
     colours as well so nothing is left to inherit. */
  .g8f-field select{background:var(--field-bg)}
  .g8f-field select option,.g8f-field select optgroup{
    background:var(--pop-bg);color:var(--pop-text)}
  .g8f-field textarea{resize:vertical;min-height:96px}
  .g8f-field input:focus,.g8f-field select:focus,.g8f-field textarea:focus{
    outline:none;border-color:var(--green-3);box-shadow:0 0 0 3px rgba(200,212,0,.18)}
  .g8f-field .bad{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.16)}
  .g8f-actions{grid-column:1 / -1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
  .g8f-note{font-size:12.5px;color:var(--soft)}
  .g8f-error{grid-column:1 / -1;margin-top:2px;font-size:13.5px;color:#ff8080}

  .g8f-done{text-align:center;padding:22px 0 6px}
  .g8f-tick{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;position:relative;
    background:var(--green-3);animation:g8fPop .5s cubic-bezier(.2,.9,.3,1.5) both}
  .g8f-tick::after{content:'';position:absolute;left:22px;top:16px;width:16px;height:28px;
    border:solid #08202e;border-width:0 4px 4px 0;transform:rotate(45deg)}
  @keyframes g8fPop{from{transform:scale(.4);opacity:0}}
  .g8f-done h4{font-size:21px;font-weight:700}
  .g8f-done p{margin-top:8px;font-size:15px;color:var(--soft)}
  .g8f-close2{margin-top:20px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
    color:var(--text);background:var(--chipbg);border:1px solid var(--edge);border-radius:999px;padding:10px 20px}
  .g8f-close2:hover{border-color:var(--green-3)}

  @media (max-width:620px){
    .g8f-form{grid-template-columns:1fr}
    .g8f-wrap{perspective:900px}
  }
  @media (prefers-reduced-motion:reduce){
    .g8f-panel{transition:opacity .3s ease}
    .g8f-panel:not(.in){transform:none}
  }