/* ============================ TOKENS ============================ */
:root{
  --paper:#F3ECE2; --paper-2:#FBF7F1; --paper-3:#ECE3D5; --paper-card:#FAF5EC;
  --ink:#192640; --ink-2:#46506A; --ink-3:#737C90;
  --line:rgba(25,38,64,.14); --line-2:rgba(25,38,64,.08);
  --gold:#9E7A3C; --gold-2:#B89253; --gold-soft:rgba(158,122,60,.12);
  --serif:'Montserrat',system-ui,-apple-system,sans-serif;
  --display:'Cinzel',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(25,38,64,.04),0 18px 50px -28px rgba(25,38,64,.28);
  --shadow-lg:0 2px 4px rgba(25,38,64,.05),0 40px 90px -40px rgba(25,38,64,.40);
  --container:1240px; --gutter:clamp(20px,5vw,72px);
  --sect:clamp(84px,11vw,168px);
  --home-sect:clamp(64px,6.8vw,108px);
  --head-gap:clamp(34px,4.2vw,58px);
  --content-gap:clamp(26px,3.2vw,44px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --paper:#1B2138; --paper-2:#232B45; --paper-3:#151A2E; --paper-card:#232B45;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.78); --ink-3:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.07);
  --gold:#FFFFFF; --gold-2:#FFFFFF; --gold-soft:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px -30px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 50px 100px -45px rgba(0,0,0,.8);
}
/* ============================ BASE ============================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink-2);font-family:var(--sans);
  font-weight:400;font-size:17px;line-height:1.62;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .5s var(--ease),color .5s var(--ease);
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper);}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.04;letter-spacing:-.01em;text-wrap:pretty;}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* taps fire immediately on touch devices — without this, iOS holds rapid taps back
   while it waits to rule out a double-tap zoom, which made fast toggling feel broken */
a,button{touch-action:manipulation}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--sect) 0;position:relative}
.section--alt{background:var(--paper-3)}
html[data-theme="dark"] .section--alt{background:rgba(10,17,32,.78)}
.section--ink{background:var(--paper-card)}
.section--break{margin-top:clamp(58px,7vw,118px)}
html[data-theme="dark"] .section--break{box-shadow:inset 0 1px 0 rgba(236,229,215,.06)}
.skyline-section{background:transparent}
html[data-theme="dark"] .skyline-section{background:transparent}
.home-rhythm{margin-top:0;padding-top:var(--home-sect);padding-bottom:var(--home-sect)}
.home-rhythm + .home-rhythm{margin-top:0;padding-top:var(--home-sect)!important}

/* ============================ FIXED HOMEPAGE BACKGROUND ============================ */
.site-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,14,28,.74) 0%, rgba(8,14,28,.86) 55%, rgba(8,14,28,.94) 100%),
    url("/assets/bg-skyline.jpg") center 28% / cover no-repeat}
html[data-theme="light"] .site-bg{background:
    linear-gradient(180deg, rgba(243,236,226,.86) 0%, rgba(243,236,226,.92) 55%, rgba(243,236,226,.96) 100%),
    url("/assets/bg-skyline.jpg") center 28% / cover no-repeat}
.site-bg-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 95%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 95%)}
html[data-theme="light"] .site-bg-grid{background-image:
    linear-gradient(to right, rgba(25,38,64,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,38,64,.05) 1px, transparent 1px)}
.hairline{height:1px;background:var(--line);border:0;width:100%}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.eyebrow-em{width:21px;flex:0 0 auto;color:var(--gold)}
.sect-head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:var(--head-gap)}
.sect-head.center{align-items:center}
.sect-head h2{padding-bottom:.08em}
.sect-index{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
.section-kicker{display:flex;align-items:baseline;gap:18px;margin-bottom:var(--content-gap)}
.section-kicker.center{justify-content:center}

/* display sizes */
.d-hero{font-family:var(--display);font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.12;letter-spacing:.012em;font-weight:400}
.d-1{font-family:var(--display);font-size:clamp(1.6rem,3.1vw,2.62rem);line-height:1.2;letter-spacing:.012em;font-weight:400;}
.d-2{font-family:var(--display);font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.22;letter-spacing:.012em;font-weight:400}
.d-3{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.16}
/* shared subheading size — one rule so every lede/sub matches across the whole site + phone */
.lede{font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.55;color:var(--ink-2);font-weight:400}
.muted{color:var(--ink-3)}
.serif-it{font-family:var(--serif);font-style:italic;color:var(--ink)}
.serif-it.accent-word{font-family:var(--display);font-style:normal;letter-spacing:.012em}

/* ============================ TEXT EFFECTS ============================ */
/* accent word: solid gold (reliable across renderers) */
.accent-word{color:var(--gold)}
/* hero line mask-rise reveal */
.fx-rise{display:block;overflow:hidden;padding:0 0.6em 0.05em 0;margin-right:-0.6em}
.fx-rise>span{display:block;transform:translateY(106%);transition:transform 1.05s var(--ease)}
.reveal.in .fx-rise>span{transform:none}
/* layout-safe title effect: clip-path wipe reveal on scroll-in */
.fx-track{position:relative;display:block}
.reveal .fx-track{clip-path:inset(-8% 102% -8% -4%)}
.reveal.in .fx-track{clip-path:inset(-8% -4% -8% -4%);transition:clip-path 1.05s var(--ease) .12s}
@media (prefers-reduced-motion:reduce){.reveal .fx-track,.reveal.in .fx-track{clip-path:none;transition:none}}
/* ink: handwritten-style highlight sweep on key phrases */
.ink{position:relative;display:inline;color:var(--ink);background-image:linear-gradient(var(--gold-soft),var(--gold-soft));
  background-repeat:no-repeat;background-position:0 92%;background-size:0% .52em;
  transition:background-size 1.1s var(--ease) .2s}
.ink.in{background-size:100% .52em}
/* word-by-word staggered reveal */
.split-w{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.split.in .split-w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.split-w{opacity:1;transform:none;transition:none}}
/* shimmer on emblem-adjacent figures */
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--sans);font-weight:600;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:1.02em 1.7em;
  border-radius:2px;transition:all .4s var(--ease);position:relative;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}
html[data-theme="dark"] .btn-primary:hover{color:#0D1524}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.5;cursor:default;pointer-events:none}
.btn:disabled:hover{transform:none}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.link-ar{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:6px;transition:all .35s var(--ease)}
.link-ar:hover{color:var(--gold);border-color:var(--gold)}
.link-ar:hover .ar{transform:translateX(4px)}
.link-ar .ar{transition:transform .35s var(--ease)}

/* ============================ REVEAL ============================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Pause continuous decorative animations in sections that are scrolled off-screen.
   Toggled by an IntersectionObserver in App — keeps the main thread idle instead of
   repainting infinite SVG beams / box-shadow beacons across a 7000px+ page. Scoped to
   off-screen sections, so there is zero visual change while a section is in view.
   (.reveal uses transitions, not @keyframes, so reveals are unaffected.) */
.anim-paused,.anim-paused *{animation-play-state:paused!important}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:all .5s var(--ease)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;
  padding:26px var(--gutter);transition:padding .5s var(--ease)}
.nav.scrolled .nav-inner{padding:16px var(--gutter)}
.nav::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);opacity:0;
  border-bottom:1px solid var(--line-2);transition:opacity .5s var(--ease)}
.nav.scrolled::before{opacity:.92;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;z-index:3;opacity:0;transition:opacity .5s}
.nav.scrolled .nav-prog{opacity:1}
.nav-prog>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform-origin:left;transform:scaleX(0);will-change:transform}
.nav-logo{display:flex;align-items:center;gap:13px;position:relative;z-index:2;cursor:pointer}
.nav-logo .em{width:40px;color:var(--ink);transition:color .5s var(--ease),transform .6s var(--ease)}
.nav-logo:hover .em{transform:rotate(-8deg)}
.nav-wordmark{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.16em;
  color:var(--ink);text-transform:uppercase;line-height:1;white-space:nowrap}
.nav-wordmark small{display:block;font-size:.46rem;letter-spacing:.42em;margin-top:5px;color:var(--ink-3);padding-left:.42em}
.nav-links{display:flex;align-items:center;gap:30px;position:relative;z-index:2}
.nav-link{font-family:var(--sans);font-size:.79rem;font-weight:500;letter-spacing:.06em;color:var(--ink-2);
  position:relative;padding:6px 0;cursor:pointer;transition:color .3s var(--ease)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav-link:hover{color:var(--ink)}.nav-link:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:16px;position:relative;z-index:2;justify-self:end}

.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink);transition:all .4s var(--ease)}
.theme-btn:hover{border-color:var(--gold);color:var(--gold);transform:rotate(20deg)}

.acc-wrap{position:relative}
.acc-wrap .theme-btn:hover{transform:none}
.acc-swatch{width:14px;height:14px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--paper)}
.acc-pop{position:absolute;top:48px;right:0;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:10px;min-width:152px;z-index:30;animation:fade .22s var(--ease)}
.acc-pop-h{display:block;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:4px 8px 10px}
.acc-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 8px;font-family:var(--sans);font-size:.85rem;color:var(--ink-2);border-radius:2px;transition:all .25s}
.acc-opt:hover{background:var(--paper-3);color:var(--ink)}
.acc-opt.on{color:var(--ink);font-weight:500}
.acc-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{right:0}
.nav-cta{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.82em 1.3em;background:var(--ink);color:var(--paper);border-radius:2px;cursor:pointer;transition:all .4s var(--ease)}
.nav-cta:hover{background:var(--gold);color:#fff}
html[data-theme="dark"] .nav-cta:hover{color:#0D1524}
/* distinctive-but-legible menu icon: three rounded bars, the middle one shorter and
   gold (brand accent) — reads instantly as a hamburger, with a unique signature */
.nav-burger{display:none;flex-direction:column;align-items:flex-end;gap:6px;width:26px;z-index:2;background:none;border:0;cursor:pointer;padding:3px 0}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:width .35s var(--ease),background .35s var(--ease)}
.nav-burger span:nth-child(2){width:60%;background:var(--gold)}
.nav-burger:hover span:nth-child(2){width:100%}
@media(max-width:1020px){
  /* nav-links is removed from the grid here, so drop the empty third column and let
     the logo's 1fr push the actions (Enquire + hamburger) flush to the right edge */
  .nav-inner{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .nav-burger{display:flex}
}

/* mobile drawer */
.drawer{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:100;background:var(--paper);transform:translateY(-100%);visibility:hidden;
  transition:transform .6s var(--ease),visibility .6s;display:flex;flex-direction:column;padding:24px var(--gutter) 40px}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.drawer-head .nav-logo .em{width:34px}
.drawer-head .nav-wordmark{font-size:1rem}
.drawer a{font-family:var(--serif);font-size:1.9rem;color:var(--ink);padding:14px 0;cursor:pointer;border-bottom:1px solid var(--line-2)}
.drawer-close{font-size:1.6rem;line-height:1;color:var(--ink);background:none;border:0;cursor:pointer;flex:0 0 auto}

/* ============================ CARDS / GRID ============================ */
.grid{display:grid;gap:1px;background:var(--line-2)}
.card{background:var(--paper);transition:background .4s var(--ease)}
.bordered{border:1px solid var(--line)}

/* generic chip */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.73rem;font-weight:500;
  letter-spacing:.08em;padding:.5em .9em;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);
  text-transform:uppercase;transition:all .3s var(--ease)}

/* footer */
.footer{background:var(--paper-card);border-top:1px solid var(--line);padding:clamp(64px,7vw,96px) 0 40px}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:0;border:3px solid var(--paper)}

/* utility */
.center{text-align:center}
.flex{display:flex}
.aic{align-items:center}
.jcb{justify-content:space-between}
.gap-s{gap:14px}.gap-m{gap:28px}.gap-l{gap:56px}
.mt-s{margin-top:18px}.mt-m{margin-top:34px}.mt-l{margin-top:64px}
.maxw-sm{max-width:560px}.maxw-md{max-width:720px}.maxw-lg{max-width:880px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.noscroll{overflow:hidden}

/* emblem */
.em{display:inline-block;line-height:0;color:inherit}
.em svg{width:100%;height:auto;display:block;color:inherit}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:36px;padding:0 18px;font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:.04em;
  font-size:clamp(1.15rem,1.95vw,1.7rem);color:var(--ink);white-space:nowrap}
.marquee-em{width:16px;color:var(--gold);font-style:normal}
@keyframes marq{to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* UK map */
/* translateZ(0): the ~670-dot SVG gets its own compositor layer, so the section's
   reveal transition (and scrolling) composite a cached texture instead of
   re-rasterising every dot each frame — this fired exactly as the map scrolled
   into view and was the biggest remaining source of scroll jank */
.ukmap{width:100%;height:100%;overflow:visible;transform:translateZ(0)}
.ukmap-land{fill:var(--ink);opacity:.06;stroke:var(--line);stroke-width:1.2;stroke-linejoin:round}
.ukmap-dot{fill:var(--ink);opacity:.26}
/* selected/hover state is toggled via a class on the 12 region groups (no transition —
   selected regions read as an instant on/off switch). .on must win over .hov. */
.ukmap-dotg.hov .ukmap-dot{opacity:.55}
.ukmap-dotg.on .ukmap-dot{opacity:1}
.ukmap-line{animation:dash 0.5s var(--ease) forwards}

@keyframes dash{to{stroke-dashoffset:0}}
.ukmap-pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(3);opacity:0}100%{opacity:0}}
.ukmap-labelg{cursor:pointer}
.ukmap-leader{stroke:var(--line);stroke-width:.8;opacity:.4}
.ukmap-labelg.on .ukmap-leader{stroke:var(--gold);opacity:.7}
.ukmap-anchor{fill:var(--ink-3)}
.ukmap-labelg.on .ukmap-anchor{fill:var(--gold)}
.ukmap-label{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;fill:var(--ink-3);
  text-transform:uppercase;-webkit-user-select:none;user-select:none}
@media(hover:hover){.ukmap-labelg:hover .ukmap-label{fill:var(--ink)}}
.ukmap-labelg.on .ukmap-label{fill:var(--gold)}
.ukmap-tip{pointer-events:none}
.ukmap-tip rect{fill:var(--paper);stroke:var(--gold);stroke-width:.8}
.ukmap-tip .tip-t{font-family:var(--serif);font-size:14px;fill:var(--ink)}
.ukmap-tip .tip-s{font-family:var(--sans);font-size:9.5px;fill:var(--ink-2);letter-spacing:.02em}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;padding:124px 0 76px;overflow:hidden}
.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 28%,var(--gold-soft),transparent 60%),
             radial-gradient(90% 80% at 10% 90%,var(--paper-3),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.3fr .82fr;gap:clamp(30px,4vw,62px);align-items:center;position:relative;z-index:2}
.hero--center{text-align:center}
.hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero--center .hero-kicker{margin-bottom:34px}
.hero--center .hero-title{margin:0}
.hero--center .hero-sub{margin:34px auto 0;max-width:760px}
.hero--center .hero-cta{margin-top:44px;justify-content:center}
.hero-kicker{display:inline-flex;align-items:center;gap:13px;font-family:var(--display);font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:30px}
.hero-kicker-em{width:22px;color:var(--gold)}
.hero-title{margin:0 0 8px;hyphens:none;color:var(--ink)}
.hero-line{display:block}
/* hero headline uses the written/char-reveal effect (.written-quote) */
.hero-written{display:inline}
.hero-sub{max-width:548px;margin-top:32px}
.hero-cta{margin-top:40px}
.hero-visual{position:relative}
.hero-map-frame{position:relative;border:1px solid var(--line);background:var(--paper-2);padding:24px 26px 20px;box-shadow:var(--shadow)}
.hero-map-frame .ukmap{height:clamp(360px,50vh,540px);width:auto;margin:4px auto}
.hero-map-head{display:flex;justify-content:space-between;align-items:center}
.mono-label{font-family:var(--display);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mono-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);animation:beacon 2.4s ease-out infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 var(--gold-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tick{position:absolute;width:9px;height:9px;border:1px solid var(--gold);opacity:.6}
.tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.tick.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.tick.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero-readout{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:16px}
.ro{display:flex;flex-direction:column;gap:5px;flex:1}
.ro-fig{font-family:var(--serif);font-size:1.55rem;color:var(--ink);line-height:1}
.ro-tot{color:var(--ink-3);font-size:1rem}
.ro-lab{font-family:var(--sans);font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3)}
.ro-div{width:1px;align-self:stretch;background:var(--line)}
/* ===== Attention Engine (hero instrument) ===== */
.hero-engine-frame{position:relative;border:1px solid var(--line);background:var(--paper-2);padding:22px 24px 20px;box-shadow:var(--shadow)}
/* dedicated directed-attention section */
.directed-sect{position:relative;overflow:hidden}
.directed-frame{position:relative;max-width:880px;margin:0 auto;border:1px solid var(--line);background:var(--paper-2);padding:26px 30px 24px;box-shadow:var(--shadow-lg)}
.ae{display:flex;flex-direction:column;gap:14px}
.ae-chips{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ae-chips-lab{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--ink-2)}
.ae-chips-row{display:flex;flex-wrap:wrap;gap:7px}
.ae-chip{font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.01em;padding:.5em .85em;white-space:nowrap;
  border:1px solid var(--line);border-radius:100px;color:var(--ink-2);background:var(--paper);transition:all .3s var(--ease)}
.ae-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.ae-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html[data-theme="dark"] .ae-chip.on{color:#0D1524}
.ae-stage{position:relative;width:100%}
.ae-svg{width:100%;height:auto;display:block;overflow:visible}
.ae-core-emblem{position:absolute;left:calc(64/620*100%);top:calc(270/540*100%);transform:translate(-50%,-50%);
  width:26px;color:var(--gold);pointer-events:none}
.ae-beam{stroke:var(--gold);stroke-width:1;opacity:.34;animation:aeBeam .6s var(--ease)}
@keyframes aeBeam{from{opacity:0}to{opacity:.34}}
.ae-pulse{stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 600;opacity:.9;
  animation:aePulse 1.7s linear infinite}
@keyframes aePulse{from{stroke-dashoffset:14}to{stroke-dashoffset:-600}}
.ae-node-dot{fill:var(--ink-3);transition:fill .4s var(--ease),r .4s var(--ease)}
.ae-node.on .ae-node-dot{fill:var(--gold);filter:drop-shadow(0 0 5px var(--gold))}
.ae-node-pulse{fill:none;stroke:var(--gold);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
.ae-node-lab{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.01em;fill:var(--ink-3);transition:fill .4s var(--ease);-webkit-user-select:none;user-select:none}
.ae-node.on .ae-node-lab{fill:var(--ink);font-weight:600}
.ae-core-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5;transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-out infinite}
.ae-core-ring.d2{animation-delay:1.5s}
.ae-core-disc{fill:var(--paper-2);stroke:var(--gold);stroke-width:1.2}
.ae-readout{border-top:1px solid var(--line);padding-top:15px;display:flex;flex-direction:column;gap:14px}
.ae-line{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.32;color:var(--ink);min-height:2.6em;animation:fade .5s var(--ease)}
.ae-metrics{display:flex;gap:20px;align-items:flex-start}
.ae-m{display:flex;flex-direction:column;gap:4px;flex:1}
.ae-m-v{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1}
.ae-m-k{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

/* ============================ INSIGHTS / DIRECTED ATTENTION ============================ */
.ig-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.2vw,32px);align-items:stretch;margin-bottom:clamp(22px,2.6vw,32px)}
@media(max-width:960px){.ig-layout{grid-template-columns:1fr}}
/* full-width objective control bar */
.insights-sect .sect-head{margin-bottom:clamp(16px,2.2vw,26px)!important}
.ig-control{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:clamp(14px,1.8vw,22px)}
/* left: instrument panel */
.ig-left,.ig-right{min-width:0}
.ig-panel{position:relative;height:100%;border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow-lg);
  padding:16px clamp(16px,2vw,24px) 16px;display:flex;flex-direction:column;gap:6px}
.ig-panel-head{display:flex;align-items:center;justify-content:space-between}
.ig-chips-lab{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-2);flex-shrink:0;white-space:nowrap}
.ig-chips-row{display:flex;flex-wrap:wrap;gap:6px}
/* phones-only custom objective dropdown (desktop keeps the chip row) — matches chip styling */
.ig-dd{display:none;position:relative;flex:1;min-width:0}
.ig-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--display);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.82em 1em}
.ig-dd.open .ig-dd-btn{border-color:var(--gold)}
.ig-dd-car{flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.ig-dd.open .ig-dd-car{transform:rotate(225deg) translateY(-2px)}
.ig-dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;display:none;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto}
.ig-dd.open .ig-dd-menu{display:flex}
.ig-dd-opt{text-align:left;cursor:pointer;font-family:var(--display);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:.85em 1em;transition:all .2s var(--ease)}
.ig-dd-opt:last-child{border-bottom:0}
.ig-dd-opt:hover{background:var(--paper-3);color:var(--ink)}
.ig-dd-opt.on{background:var(--gold);color:#fff}
html[data-theme="dark"] .ig-dd-opt.on{color:#0D1524}
.ig-chip{font-family:var(--display);font-size:.63rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:.5em .8em;border:1px solid var(--line);border-radius:2px;color:var(--ink-2);background:var(--paper);
  transition:all .3s var(--ease);white-space:nowrap}
@media(hover:hover){.ig-chip:hover{border-color:var(--ink-3);color:var(--ink)}}
.ig-chip.on{background:var(--gold);border-color:var(--gold);color:#fff}
html[data-theme="dark"] .ig-chip.on{color:#0D1524}
/* ---- perf: tame the continuously-animating SVG accents while scrolling ----
   The UK map and the audience/attention graphs contain small accents that animate
   forever (pulse rings, travelling beams, beacon dots). Profiling the scroll with
   the Long Animation Frames API showed ~20 frames >50ms PER 3s of *pure rendering*
   (zero JavaScript): every animation frame forces the parent SVG — including the
   UK map's ~670 dots and their drop-shadow filters — to re-rasterise, and that is
   what makes scrolling past the map and the graph stutter. Disabling these
   animations collapses the heavy frames ~20x, which pinpoints them as the cause.

   Two complementary mitigations, both visually identical to the original:

   1. will-change promotes each tiny accent to its own compositor layer (on GPU
      browsers) so the expensive static SVG content is rasterised once and only the
      accent updates per frame. */
.ukmap-pulse,
.ae-pulse,.ae-node-pulse,.ae-core-ring,
.ig-pulse,.ig-node-pulse,.ig-core-ring{will-change:transform,opacity}

/* 2. While the page is *actively* scrolling, freeze these animations outright so
      no re-raster competes with the scroll. They resume the instant scrolling
      stops (see the is-scrolling toggle script before the app bundle), so anyone
      reading a section still sees them animate; the freeze during the brief moment
      of scroll motion is imperceptible. Honours reduced-motion (those animations
      are already disabled, so this is inert). Works on every device, GPU or not. */
html.is-scrolling .ukmap-pulse,
html.is-scrolling .ukmap-line,
html.is-scrolling .ae-pulse,
html.is-scrolling .ae-node-pulse,
html.is-scrolling .ae-core-ring,
html.is-scrolling .ig-pulse,
html.is-scrolling .ig-node-pulse,
html.is-scrolling .ig-core-ring,
html.is-scrolling .mono-dot,
html.is-scrolling .ir-status-dot{animation-play-state:paused}
/* graph */
.ig-stage{position:relative;width:100%;max-width:440px;margin:auto}
/* wide viewBox (-120 0 840 600) keeps every node label inside the box; clip as a
   safety so nothing can ever spill outside the panel. translateZ(0) gives the graph
   its own compositor layer (same reveal/scroll re-raster fix as the UK map). */
/* aspect-ratio (from the 840x600 viewBox) pins the graph height deterministically off
   its width instead of letting the browser re-derive intrinsic SVG height on reflow —
   so a phone's address-bar show/hide can never make the graph change size on scroll. */
.ig-svg{width:100%;height:auto;aspect-ratio:840 / 600;display:block;overflow:hidden;transform:translateZ(0)}
.ig-orbit{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7;opacity:.5}
.ig-beam{stroke:var(--gold);stroke-width:1.4;opacity:.4;animation:aeBeam .6s var(--ease)}
.ig-node{cursor:default}
.ig-dot{fill:var(--ink-3);transition:fill .35s var(--ease),r .35s var(--ease)}
.ig-node:not(.on) .ig-dot{opacity:.4}
.ig-node.on .ig-dot{fill:var(--gold)}  /* glow comes from the gradient circle behind the dot — no filter */
.ig-lab{font-family:var(--sans);font-size:22px;font-weight:500;letter-spacing:.01em;fill:var(--ink-3);opacity:.45;transition:fill .35s var(--ease),opacity .35s var(--ease);-webkit-user-select:none;user-select:none}
.ig-node.on .ig-lab{fill:var(--ink);opacity:1;font-weight:600}
.ig-core-ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:.4;transform-box:fill-box;transform-origin:center;animation:pulse 3s ease-out infinite}
.ig-core-disc{fill:var(--paper-2);stroke:var(--gold);stroke-width:1.3}
/* the emblem glyph sits ~4% high inside its own 700×700 box, so nudge it down to
   sit true-centre in the core disc (translate Y = -50% + 3.9%) */
.ig-core-emblem{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:28px;color:var(--gold);pointer-events:none}
/* full-width readout strip below the panels */
.ig-summary{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,30px)}
@media(max-width:760px){.ig-summary{grid-template-columns:1fr;gap:22px}}
/* MOBILE: trim the graph node labels so the long right-hand labels
   ("Analysts & Advisers" etc.) don't crowd the panel edge on a narrow screen.
   (Panel padding + graph sizing handled in the instrument-compaction block below.) */
.ig-line{font-family:var(--serif);font-size:clamp(1.12rem,1.5vw,1.42rem);line-height:1.4;color:var(--ink);min-height:2.8em;animation:fade .5s var(--ease)}
.ig-metrics{display:flex;gap:clamp(18px,2.4vw,34px)}
.ig-m{display:flex;flex-direction:column;gap:6px;flex:1}
.ig-m-v{font-family:var(--serif);font-size:1.75rem;color:var(--ink);line-height:1}
.ig-m-k{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
/* right: compact Framework card */
.ir-panel{position:relative;height:100%;border:1px solid var(--line);background:var(--paper-card);box-shadow:var(--shadow);
  padding:16px clamp(18px,2.2vw,28px) 18px;display:flex;flex-direction:column}
.ir{display:flex;flex-direction:column;animation:fade .45s var(--ease)}
.fw{flex:1 1 auto}
.ir-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.ir-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ir-status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:beacon 2.2s ease-out infinite}
.fw-name{font-family:var(--display);font-size:clamp(1.3rem,1.85vw,1.65rem);line-height:1.05;letter-spacing:.012em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.fw-route{font-family:var(--sans);font-size:.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);line-height:1.55;margin-bottom:13px}
.fw-stats{font-family:var(--serif);font-size:.95rem;color:var(--ink-2);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.fw-stats b{color:var(--ink);font-weight:600}
.fw-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:15px}
.fw-bullets li{display:grid;grid-template-columns:15px 1fr;gap:11px;align-items:start;font-size:.9rem;color:var(--ink-2);line-height:1.4}
.fw-b-i{flex-shrink:0;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);margin-top:2px}
.fw-b-i svg{width:9px;height:9px}
.fw-outcome{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2);font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--ink-2);line-height:1.45}
/* footprint band (merged campaign performance) */
.fp-split{display:flex;align-items:center;justify-content:center;gap:20px;margin:clamp(46px,6vw,82px) 0 clamp(30px,3.5vw,46px)}
.fp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.fp-mark{flex:0 0 auto;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);opacity:.85}
.fp-note{font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--ink-2);line-height:1.3}
.fp-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start;margin-bottom:clamp(34px,4vw,52px)}
.fp-head .lede{max-width:520px}
.fp-head .rep-lines{margin-top:0}
.rep-lower{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,60px);align-items:stretch;flex:1;min-height:0}
.rep-lower .rep-ident{margin-bottom:0;display:flex;flex-direction:column}
.rep-lower .rep-bars{display:flex;flex-direction:column}
@media(max-width:760px){.fp-split{flex-wrap:wrap;gap:12px}.fp-note{flex-basis:100%}.fp-head{grid-template-columns:1fr;gap:32px}.rep-lower{grid-template-columns:1fr;gap:34px}}

.hero-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:32px;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--display);font-size:.7rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);z-index:2;background:none;border:0;cursor:pointer}
.hero-scroll:hover{color:var(--ink-2)}
.hero-scroll-arrow{display:block;animation:scrollBob 2.4s ease-in-out infinite}
@keyframes scrollBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ============================ MODEL ============================ */
.model-centered{max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.4vw,40px)}
.model-centered .d-1{margin:0}
.model-body{display:flex;flex-direction:column;gap:20px;max-width:580px;font-size:1.07rem}
.pull{display:flex;flex-direction:column;align-items:center;padding:0;margin:0}
.pull-em{width:30px;color:var(--gold);margin:0 0 18px}
.pull blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.24;color:var(--ink)}
.written-quote{display:inline}
/* CSS-driven write-on: each char fades in on its own animation-delay; the group is
   paused until `.in`. Browser-timed + composited opacity, so a busy main thread can't
   stall the reveal mid-line (the previous rAF version paused before "that matter"). */
.written-char{opacity:0;animation:charIn .4s var(--ease) both;animation-play-state:paused}
.written-quote.in .written-char{animation-play-state:running}
/* Hero title only: pre-promote the glyph layers (paid while the boot splash still
   covers the screen) so the cold-load write-on on desktop/live never hitches when the
   reveal frame collides with boot teardown, font swap and first paint. */
.hero-written .written-char{will-change:opacity}
@keyframes charIn{from{opacity:0}to{opacity:1}}
.written-quote::after{content:"";display:inline-block;width:1px;height:.82em;margin-left:.08em;background:currentColor;vertical-align:-.08em;opacity:0}
.written-quote.in::after{animation:quoteCursor 1s steps(1,end) infinite;animation-delay:2s}
@keyframes quoteCursor{0%,45%{opacity:.85}46%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .written-char{opacity:1;animation:none;will-change:auto}
  .written-quote::after{display:none}
}
.model-closing{font-size:1.07rem}

/* ============================ STATS ============================ */
.stats-sect{padding-top:clamp(62px,8vw,112px);position:relative}
.positioning{font-size:clamp(1.45rem,2.9vw,2.35rem);line-height:1.3;max-width:1010px;margin-bottom:clamp(52px,6vw,82px);color:var(--ink);font-weight:400}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.stat{padding:32px 26px 4px 0;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0;padding-right:0}
.stat-fig{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.7rem);color:var(--ink);line-height:1;margin-bottom:15px;font-weight:500}
.stat-lab{font-family:var(--sans);font-size:.82rem;color:var(--ink-2);line-height:1.42;display:block;max-width:175px}

@media(max-width:1020px){
  .hero{min-height:auto;padding:128px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:54px}
  .hero-sub{max-width:600px}
  .stats-row{grid-template-columns:repeat(3,1fr);gap:0}
  .stat{padding:28px 22px 28px 0;border-bottom:1px solid var(--line-2)}
}
@media(max-width:620px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .hero-readout{flex-wrap:wrap;gap:16px}
  .ro-div{display:none}
}

/* ============================ SERVICES ============================ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-cell{background:var(--paper)}
.svc-card{background:var(--paper);padding:clamp(28px,3vw,48px);height:100%;display:flex;flex-direction:column;
  transition:background .45s var(--ease);outline:none}
.svc-card.open{background:var(--paper-2)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(26px,3vw,42px)}
.svc-n{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;color:var(--ink-3);transition:color .4s}
.svc-card.open .svc-n{color:var(--gold)}
.svc-mark{width:22px;color:var(--gold);opacity:0;transform:translateY(-5px) rotate(-12deg);transition:all .45s var(--ease)}
.svc-card.open .svc-mark{opacity:1;transform:none}
.svc-title{margin-bottom:14px;transition:transform .4s var(--ease)}
.svc-card.open .svc-title{transform:translateX(4px)}
.svc-blurb{font-size:.99rem;color:var(--ink-2);line-height:1.55}

/* ============================ NETWORK ============================ */
.net-head{max-width:840px;margin:0 auto clamp(40px,5vw,68px);text-align:center}
.net-head .d-1{margin-bottom:20px}
.net-head .lede{max-width:600px;margin-left:auto;margin-right:auto}
/* unique reveal: a thin rule draws out from the centre under the lead phrase (no highlight box) */
.net-head .ink{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-position:center 100%;background-size:0% 2px;transition:background-size .9s var(--ease) .15s}
.net-head .ink.in{background-size:100% 2px}
.net-grid{display:grid;grid-template-columns:minmax(420px,600px) minmax(520px,680px);gap:clamp(42px,5.2vw,78px);align-items:center;justify-content:space-between}
.net-copy{max-width:600px}
.net-copy .ink{background-image:none}
.net-pillars{margin-top:34px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.net-pillar{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.net-pillar-k{font-family:var(--serif);font-size:1.14rem;color:var(--ink)}
.net-pillar-v{font-size:.95rem;color:var(--ink-2);line-height:1.5}
.net-note{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--ink-3);max-width:520px;line-height:1.5}
.net-tool-wrap{width:100%;max-width:680px;justify-self:end}
.net-tool{position:relative;border:1px solid var(--line);background:var(--paper-2);padding:24px 26px 22px;box-shadow:var(--shadow)}
.net-tool-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.net-allbtn{font-family:var(--display);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
@media(hover:hover){.net-allbtn:hover{border-color:var(--gold)}}
.net-map{display:flex;justify-content:center;align-items:center;height:clamp(330px,40vh,440px)}
.net-map .ukmap{height:100%;width:auto;max-width:100%}
.net-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 2px;padding-top:16px;border-top:1px solid var(--line)}
/* no transition — region chips must read as an instant on/off switch.
   hover styles only on devices with a real pointer: on touch screens the hover state
   sticks to the last-tapped chip, which made toggled-off chips look half-selected */
.net-chip{font-family:var(--sans);font-size:.71rem;font-weight:500;padding:.46em .82em;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);white-space:nowrap;flex:none}
@media(hover:hover){.net-chip:hover{border-color:var(--ink-3);color:var(--ink)}}
.net-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.net-readout{display:flex;gap:22px;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:16px}

/* network tool layout + gauge + metrics */
.net-tool-body{display:grid;grid-template-columns:1fr 188px;gap:18px;align-items:center;margin:6px 0 4px}
.net-side{display:flex;flex-direction:column;gap:20px}
.gauge{position:relative;width:120px;height:120px;margin:0 auto}
/* own compositor layer so the arc's stroke-dashoffset repaint stays isolated to the
   gauge instead of repainting the surrounding panel each frame */
.gauge-svg{width:120px;height:120px;transform:translateZ(0)}
.gauge-track{fill:none;stroke:var(--line);stroke-width:6}
/* no drop-shadow here: the 1.15s dashoffset transition runs on every region change,
   and animating through an SVG filter re-rasterises the layer every frame (jank) */
.gauge-fill{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.15s var(--ease)}
.gauge-c{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-v{font-family:var(--display);font-weight:400;font-size:1.85rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.gauge-v .count{display:inline-block;min-width:2ch;text-align:right}
.gauge-pct{font-size:.95rem;color:var(--ink-3)}
.gauge-l{font-family:var(--sans);font-size:.56rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;text-align:center;max-width:64px;line-height:1.25}
.net-metrics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.nm{background:var(--paper-2);padding:11px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.nm-v{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.nm-v .count{display:inline-block;min-width:3ch}
.nm:nth-child(1) .count{min-width:2ch;text-align:right}
.nm:nth-child(2) .count{min-width:3ch;text-align:right}
.nm:nth-child(3) .count{min-width:3ch;text-align:right}
.nm:nth-child(4) .count{min-width:4ch;text-align:right}
.nm-t{font-size:.78rem;color:var(--ink-3)}
.nm-k{font-family:var(--sans);font-size:.53rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}

/* ============================ METHOD ============================ */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:14px}
/* endpoints sit on the first/last circle centres: each column centre is half a column
   in from its edge, and a column is (100% - 4 gaps)/5 wide → inset = (100% - 96px)/10 */
.timeline-line{position:absolute;top:6px;left:calc((100% - 96px)/10);right:calc((100% - 96px)/10);height:1px;background:var(--line);overflow:hidden;z-index:1}
.timeline-prog{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:grow 2.4s var(--ease) .5s forwards}
@keyframes grow{to{transform:scaleX(1)}}
.tl-step{text-align:center;padding-top:46px;position:relative}
.tl-node{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:14px;height:14px;display:grid;place-items:center;z-index:2}
.tl-dot{width:14px;height:14px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .5s var(--ease) .25s,box-shadow .4s var(--ease)}
.reveal.in .tl-dot{transform:scale(1)}
.tl-n{display:block;font-family:var(--display);font-size:2rem;font-weight:500;letter-spacing:.02em;color:var(--ink);opacity:.28;margin-bottom:6px;line-height:1}
.tl-title{margin-bottom:12px;font-family:var(--display);font-weight:400;letter-spacing:.03em;color:var(--ink-2);transition:color .3s var(--ease),text-shadow .3s var(--ease)}
/* subtle, clean hover on each timeline step */
.tl-step{transition:transform .4s var(--ease)}
.tl-n{transition:opacity .35s var(--ease),text-shadow .35s var(--ease),transform .4s var(--ease)}
.tl-step{cursor:default}
/* no movement on hover — only brightness/glow change, so nothing re-rasters while a
   transform runs (that was the lag). brighten is instant; it eases back out smoothly. */
.tl-step:hover .tl-title{color:var(--ink);text-shadow:0 0 22px rgba(255,255,255,.34)}
.tl-step:hover .tl-n{opacity:1;text-shadow:0 0 20px rgba(255,255,255,.42);animation:none}
.tl-step:hover .tl-dot{box-shadow:0 0 14px 2px rgba(255,255,255,.5)}
.tl-step:hover .tl-desc{color:var(--ink-2)}
.tl-step:hover .tl-title,
.tl-step:hover .tl-n,
.tl-step:hover .tl-dot,
.tl-step:hover .tl-desc{transition-duration:0s}
.tl-desc{font-size:.92rem;color:var(--ink-2);max-width:220px;margin:0 auto;line-height:1.5;white-space:pre-line}

@media(max-width:1020px){
  .net-grid{grid-template-columns:1fr;gap:50px}
  .net-copy,.net-tool-wrap{max-width:none}
  .net-pillar{grid-template-columns:1fr;gap:5px;align-items:start}
  .net-tool-body{grid-template-columns:1fr;gap:24px}
  .net-side{flex-direction:row;align-items:center;gap:24px}
  .net-metrics{flex:1}
}
@media(max-width:560px){
  .net-side{flex-direction:column}
}
@media(max-width:1020px){
  /* tablet + phone: drop the timeline rail entirely and use the same compact,
     centred 2-col grid as phones (the ≤620 block refines type sizes below) */
  .timeline{grid-template-columns:1fr 1fr;gap:34px 24px;margin-top:8px}
  .timeline-line{display:none}
  .tl-step{text-align:center;padding:12px 6px 0;border-left:0}
  .tl-step:last-child{grid-column:1 / -1}
  .tl-node{display:none}
  .tl-desc{max-width:none;margin:0 auto}
}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}}

/* ============================ VISIBILITY ============================ */
.vis-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,60px);align-items:start}
.vis-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.vis-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:18px;padding:26px 6px;border-bottom:1px solid var(--line);text-align:left;transition:all .35s var(--ease);color:var(--ink-2)}
.vis-row:hover{padding-left:14px;color:var(--ink)}
.vis-mark{width:20px;color:var(--line);opacity:.5;transition:all .35s}
.vis-row.on{color:var(--ink)}
.vis-row.on .vis-mark{color:var(--gold);opacity:1}
.vis-label{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2}
.vis-ar{opacity:0;transform:translateX(-6px);transition:all .35s;color:var(--gold)}
.vis-row:hover .vis-ar,.vis-row.on .vis-ar{opacity:1;transform:none}
.vis-panel{position:relative;background:var(--paper-card);border:1px solid var(--line);padding:clamp(30px,3.5vw,48px);min-height:250px;display:flex;align-items:center}
html[data-theme="dark"] .vis-panel{background:var(--paper-2)}
.vis-panel-inner{animation:fade .5s var(--ease)}
.vis-note{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.3;color:var(--ink);margin:16px 0 30px}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================ REPORTING ============================ */
.rep-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,84px);align-items:start}
.rep-lines{list-style:none;margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}
.rep-lines li{display:flex;align-items:center;gap:11px;font-size:.91rem;color:var(--ink-2)}
.rep-check{width:18px;height:18px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;flex-shrink:0}
.rep-dash{width:100%;max-width:1188px;margin-inline:auto;border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow-lg);padding:clamp(20px,2.3vw,30px);display:flex;flex-direction:column}
.rep-dash-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
/* phones-only tab bar for the two delivery panels (desktop shows both side by side) */
.rep-tabs{display:none;gap:8px;margin-bottom:18px}
.rep-tab{flex:1;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.7em .6em;border:1px solid var(--line);background:var(--paper);color:var(--ink-3);border-radius:2px;cursor:pointer;transition:all .3s var(--ease)}
.rep-tab.on{background:var(--gold);border-color:var(--gold);color:#fff}
html[data-theme="dark"] .rep-tab.on{color:#0D1524}
.rep-panel-lab{display:block}
.rep-dash-id{display:block;font-family:var(--sans);font-size:.74rem;color:var(--ink-3);margin-top:6px}
.rep-dash-em{width:30px;color:var(--gold)}
.rep-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:24px}
@media(max-width:760px){.rep-dash{aspect-ratio:auto}.rep-metrics{grid-template-columns:1fr 1fr}}
.rep-metric{background:var(--paper-2);padding:17px 18px}
.rep-metric-v{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--ink);line-height:1;font-weight:400;letter-spacing:.01em}
.rep-metric-k{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);margin-top:10px;text-transform:uppercase}
.rep-metric-s{display:block;font-size:.78rem;color:var(--ink-3);margin-top:3px}
.rep-secondary{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;margin-top:-12px;margin-bottom:24px}
.rep-secondary-lab{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.rep-secondary-row{display:flex;flex-wrap:wrap;gap:6px 16px}
.rep-secondary-item{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);letter-spacing:.01em}
.rep-secondary-item b{font-family:var(--display);color:var(--ink-2);font-weight:400}
.rep-secondary-item:not(:last-child){padding-right:16px;border-right:1px solid var(--line-2)}
.rep-ident{margin-bottom:28px}
.rep-audience-list{display:flex;flex:1;flex-direction:column;border-top:1px solid var(--line)}
.rep-audience{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rep-audience-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.rep-ident-n{font-family:var(--display);font-size:1.25rem;line-height:1;color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-ident-k{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);line-height:1.25}
.rep-audience-sub{display:block;margin-top:3px;font-family:var(--sans);font-size:.75rem;color:var(--ink-3)}
.rep-audience-track{display:block;height:3px;margin-top:10px;background:var(--paper-3);overflow:hidden}
.rep-audience-fill{display:block;width:0;height:100%;background:var(--gold);transition:width 1.1s var(--ease)}
.reveal.in .rep-audience-fill{width:var(--w)}
.rep-bar{display:grid;grid-template-columns:92px 1fr 72px;align-items:center;gap:14px;margin-bottom:11px}
.rep-bar-r{font-family:var(--sans);font-size:.8rem;color:var(--ink-2)}
.rep-bar-track{height:6px;background:var(--paper-3);border-radius:3px;overflow:hidden}
.rep-bar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:3px;transition:width 1.1s var(--ease)}
.reveal.in .rep-bar-fill{width:var(--w)}
.rep-bar-v{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:480px){.rep-bar{grid-template-columns:74px 1fr 62px;gap:9px}}

/* ===================== MOBILE INSTRUMENT COMPACTION (phones only) =====================
   The UK map, audience-targeting graph and reporting dashboards are dense desktop
   instruments. On phones they were oversized and ate too much vertical space. These
   overrides tighten padding, sizing and spacing so each fits the small viewport
   comfortably. Every rule is inside this query, so desktop/tablet (>620px) is untouched. */
@media(max-width:620px){
  /* — section eyebrows: shrink so long ones (e.g. "A Different Communications Model")
       stay on ONE line, which keeps the kite mark properly in line with the text — */
  .eyebrow{font-size:.62rem;letter-spacing:.08em}
  .eyebrow-em{width:18px}

  /* — top nav: keep the hamburger from being pushed off the edge — */
  .nav-logo .em{width:32px}
  .nav-wordmark{font-size:.8rem;letter-spacing:.07em}
  .nav-actions{gap:12px}
  .nav-cta{padding:.7em 1em;font-size:.68rem;letter-spacing:.07em}

  /* — hero: pared back for a cleaner phone view (drop the kicker tagline + dim the
       busy background, tighten the spacing so title/sub/CTA read as one calm block) — */
  .hero{padding-bottom:104px}
  /* kicker now shown on phones too — shrink it, centre it and let it wrap cleanly */
  .hero-kicker{font-size:.6rem;letter-spacing:.1em;gap:9px;flex-wrap:wrap;justify-content:center;max-width:300px;line-height:1.5}
  .hero--center .hero-kicker{margin-bottom:24px}
  .hero-kicker-em{width:16px}
  .hero-bg{opacity:.5}
  .hero--center .hero-sub{margin-top:26px}
  .hero-sub{font-size:.95rem}
  .hero--center .hero-cta{margin-top:32px}
  .hero-cta .btn{font-size:.72rem;padding:.85em 1.4em}
  .hero-scroll{bottom:40px}

  /* — moving banner (marquee) a bit smaller — */
  .marquee{padding:16px 0}
  .marquee-item{font-size:.95rem;gap:24px;padding:0 14px}
  .marquee-em{width:13px}

  /* — method timeline: 2-col compact grid instead of a tall vertical rail — */
  .timeline{grid-template-columns:1fr 1fr;gap:22px 16px;margin-top:8px}
  .tl-step{text-align:center;padding:8px 4px 0;border-left:0}
  .tl-step:last-child{grid-column:1 / -1}   /* lone 5th step (V Reporting) centered, not left */
  .tl-node{display:none}
  .tl-n{font-size:1.55rem;margin-bottom:3px}
  .tl-title{font-size:1.04rem;margin-bottom:6px}
  .tl-desc{font-size:.82rem;max-width:none;margin:0 auto}

  /* — UK map tool: footprint gauge LEFT, 2x2 metric grid RIGHT beside it — */
  .net-tool{padding:16px 14px 14px}
  .net-tool-body{gap:14px;margin:4px 0}
  /* width-based (vw) height, never vh: on phones the address bar shows/hides while
     scrolling, which changes vh and made the map resize every frame (and shoved the
     targeting graph below it around). vw is unaffected by vertical scroll, so the map
     stays ONE size no matter how you scroll, while still scaling across phone widths. */
  .net-map{height:clamp(220px,64vw,280px)}
  .net-side{flex-direction:row;align-items:center;gap:14px}
  .gauge,.gauge-svg{width:96px;height:96px}
  .gauge-track,.gauge-fill{stroke-width:5}
  .gauge-v{font-size:1.28rem}
  .gauge-l{max-width:64px;letter-spacing:.02em;font-size:.44rem;line-height:1.25;margin-top:2px}  /* fits inside the ring, no overlap */
  .net-metrics{flex:1}
  .nm{padding:8px 9px}
  .nm-v{font-size:1.02rem}
  .nm-k{font-size:.54rem;letter-spacing:.07em}
  .net-chips{gap:6px;margin-top:12px;padding-top:12px}
  .net-chip{font-size:.66rem;padding:.4em .7em}

  /* — targeting route: objective dropdown replaces chips; the graph shows ALL nodes +
       labels (like desktop) and highlights the active route. The wide viewBox keeps
       every label contained inside the panel; the graph fills the panel width. — */
  .ig-control{flex-wrap:nowrap;align-items:center;gap:10px;margin-bottom:12px}
  .ig-chips-lab{font-size:.92rem}
  .ig-chips-row{display:none}
  .ig-dd{display:block}
  .ig-panel{padding:12px 10px 12px;gap:4px}
  .ig-stage{max-width:none}                                      /* fill the panel so labels read as large as possible */
  .ig-beam{stroke-width:2.2}
  .ig-core-emblem{width:18px}                                    /* kite mark sits inside the smaller disc */
  .ir-panel{padding:15px 16px 16px}
  .ir-head{margin-bottom:11px}
  .fw-name{font-size:1.35rem}
  .fw-route{font-size:.6rem;margin-bottom:12px}
  .fw-stats{font-size:.9rem;padding-bottom:12px;margin-bottom:12px}
  .fw-bullets{gap:9px;margin-bottom:13px}
  .fw-bullets li{font-size:.86rem}
  .fw-outcome{font-size:.88rem;padding-top:12px}

  /* — amplification dashboard: tabbed panels, no scrolling; compact metric tiles — */
  .rep-dash{padding:16px 14px}
  .rep-dash-head{padding-bottom:13px;margin-bottom:14px}
  .rep-metrics{margin-bottom:14px}
  .rep-metric{padding:11px 11px}
  .rep-metric-v{font-size:1.34rem}
  .rep-metric-k{margin-top:5px;font-size:.68rem}
  .rep-metric-s{display:none}                /* drop the per-tile descriptions to shrink the box */
  /* audience quality: compact stacked list — tight rows so the whole report fits a
     phone screen, and the title is cleared of the metrics grid above (the desktop
     rule pulls it up with a negative margin) */
  .rep-secondary{flex-direction:column;align-items:stretch;gap:6px;margin-top:2px;margin-bottom:10px}
  .rep-secondary-lab{font-size:.58rem}
  .rep-secondary-row{flex-direction:column;width:100%;gap:0}
  .rep-secondary-item{display:block;width:100%;padding:4px 0;font-size:.78rem}
  .rep-secondary-item:not(:last-child){padding-right:0;border-right:0;border-bottom:0}
  .rep-tabs{display:flex}
  .rep-panel-lab{display:none}
  .rep-lower{grid-template-columns:1fr;gap:0}
  .rep-lower .rep-ident,.rep-lower .rep-bars{display:none}
  .rep-lower .rep-ident.tab-on,.rep-lower .rep-bars.tab-on{display:flex}
  .rep-ident{margin-bottom:0}
  .rep-bar{margin-bottom:9px}
}

/* ============================ SECTORS ============================ */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.sec-cell{background:var(--paper)}
.sec-card{position:relative;background:var(--paper);padding:clamp(26px,2.6vw,40px);height:100%;transition:background .4s var(--ease);overflow:hidden}
.sec-card:hover{background:var(--paper-2)}
.sec-n{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--ink-3)}
.sec-title{margin:16px 0 12px}
.sec-desc{font-size:.91rem;color:var(--ink-2);line-height:1.5}
.sec-line{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .5s var(--ease)}
.sec-card:hover .sec-line{width:100%}

/* ============================ TESTIMONIALS (3D coverflow) ============================ */
.tst3d{position:relative;margin-top:8px}
.tst3d-stage{position:relative;height:clamp(360px,42vw,440px);transform-style:preserve-3d;perspective:1700px;display:flex;align-items:center;justify-content:center}
.tst3d-card{position:absolute;width:min(640px,82vw);min-height:clamp(290px,34vw,360px);left:50%;top:50%;
  background:var(--paper-card);border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(8,14,26,.55),0 8px 30px -16px rgba(8,14,26,.4);
  padding:clamp(30px,3.4vw,52px);display:flex;flex-direction:column;cursor:pointer;
  transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s var(--ease);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
.tst3d-card.active{cursor:default;box-shadow:0 60px 120px -34px rgba(8,14,26,.62),0 0 0 1px var(--gold-soft)}
.tst3d-em{width:34px;color:var(--gold);margin-bottom:auto;flex-shrink:0}
.tst3d-quote{font-family:var(--serif);font-size:clamp(1.18rem,2.1vw,1.85rem);line-height:1.32;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty;margin:26px 0 28px}
.tst3d-attr{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:20px;margin-top:auto}
.tst3d-name{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:.02em}
.tst3d-co{font-family:var(--sans);font-size:.82rem;color:var(--ink-3);letter-spacing:.04em}
.tst3d-ctrl{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:clamp(26px,3vw,40px)}
.tst3d-dots{display:flex;align-items:center;gap:11px}
.tst3d-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-3);background:transparent;transition:all .4s var(--ease);padding:0}
.tst3d-dot:hover{border-color:var(--gold)}
.tst3d-dot.on{background:var(--gold);border-color:var(--gold);transform:scale(1.18)}
.tst-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:all .35s var(--ease);background:transparent}
.tst-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tst-btn .flip{transform:rotate(180deg)}
/* phones swipe instead of using arrows — small label above the dots */
.tst3d-swipe{display:none;text-align:center;font-family:var(--display);font-size:.62rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:clamp(20px,2.6vw,30px)}
@media(max-width:560px){.tst3d-card:not(.active){opacity:.2 !important}}
/* MOBILE: shrink the active review card so more of the neighbouring cards show — the
   card-to-card switch animation reads much more clearly. */
@media(max-width:620px){
  .tst3d-card{width:74vw;min-height:clamp(248px,52vw,300px);padding:26px 24px}
  .tst3d-quote{font-size:1.12rem;margin:18px 0 20px}
  .tst3d-stage{height:clamp(320px,80vw,380px)}
  .tst-btn{display:none}
  .tst3d-swipe{display:block}
  .tst3d-ctrl{margin-top:12px}
}
/* MOBILE/TABLET: the fanned-out side cards push past the viewport and give the whole
   page a horizontal scroll below the desktop breakpoint — on older iOS Safari that
   makes the browser zoom the whole page out ("not scaled"). Use overflow:hidden (NOT
   overflow-x:clip, which Safari <16 ignores) on the outer wrapper. Not .tst3d-stage,
   which is preserve-3d. Desktop (>1020) is left untouched. */
@media(max-width:1020px){.tst3d{overflow:hidden}}

/* ============================ CLIENT FIT ============================ */
.fit-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.fit-panel{background:var(--paper);padding:clamp(32px,4vw,56px)}
.fit-head{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:400;letter-spacing:.012em;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--ink);margin-bottom:30px}
.fit-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.fit-ic.ok{background:var(--gold-soft);color:var(--gold)}
.fit-list{list-style:none;display:flex;flex-direction:column;gap:20px}
.fit-list li{display:flex;align-items:flex-start;gap:14px;font-size:1.03rem;color:var(--ink-2);line-height:1.5}
.fit-tick{width:22px;height:22px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.fit-partner{background:var(--paper-card);padding:clamp(32px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
html[data-theme="dark"] .fit-partner{background:var(--paper-2)}
.fit-partner-em{width:32px;color:var(--gold);margin-bottom:20px}
.fit-partner-h{font-family:var(--display);font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.fit-partner p{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.35;color:var(--ink);margin-bottom:26px}
.sec-all{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:clamp(40px,5vw,64px);padding:clamp(34px,4vw,52px);border:1px solid var(--line);background:var(--paper)}
.sec-all-em{width:32px;color:var(--gold)}
.sec-all p{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.3;color:var(--ink);max-width:700px;text-wrap:balance}

/* ============================ CTA BLOCK ============================ */
.cta-block{position:relative;overflow:hidden;background:var(--paper-card);text-align:center;padding:var(--home-sect) 0}
.cta-constellation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(620px,88vw);opacity:.07;pointer-events:none}
.cta-constellation .ukmap{height:auto;width:100%}
.cta-rings{width:100%;height:auto;display:block;animation:ctaSpin 80s linear infinite}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta-rings{animation:none}}
.cta-block-inner{position:relative;z-index:2}
.cta-em{width:42px;color:var(--gold);margin:0 auto}

/* ============================ FOOTER ============================ */
.foot-top{display:grid;grid-template-columns:1.2fr 1.6fr;gap:clamp(40px,6vw,90px);padding-bottom:58px;border-bottom:1px solid var(--line)}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px;justify-content:flex-start}
.foot-em{width:32px;color:var(--ink)}
.foot-blurb{font-size:.85rem;color:var(--ink-2);max-width:420px;line-height:1.55}
.foot-mail{display:inline-block;margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px;transition:all .3s}
.foot-mail:hover{color:var(--gold);border-color:var(--gold)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot-h{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.foot-col a{font-size:.92rem;color:var(--ink-2);cursor:pointer;transition:color .3s}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:30px;flex-wrap:wrap}
.foot-note{font-size:.77rem;color:var(--ink-3);max-width:700px;line-height:1.5}
.foot-copy{font-size:.77rem;color:var(--ink-3);line-height:1.5}
.foot-legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-legal span,.foot-legal a{font-size:.77rem;color:var(--ink-3)}
.foot-legal a{cursor:pointer;transition:color .3s}.foot-legal a:hover{color:var(--ink)}

@media(max-width:1020px){
  .vis-grid{grid-template-columns:1fr;gap:32px}
  .rep-grid{grid-template-columns:1fr;gap:50px}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr;gap:48px}
}
@media(max-width:760px){
  .sec-grid{grid-template-columns:1fr}
  .fit-wrap{grid-template-columns:1fr}
  .rep-lines{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ============================ APPLY ============================ */
.apply{min-height:100vh;background:var(--paper);animation:fade .4s var(--ease)}
.apply-bar{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:10}
.apply-close{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.apply-close:hover{color:var(--ink)}
.apply-close .flip{transform:rotate(180deg)}
.legal-doc{max-width:780px;margin:0 auto;padding:clamp(28px,5vw,64px) 0}
.legal-updated{color:var(--ink-3);font-size:.85rem;letter-spacing:.02em;margin:0 0 38px}
.legal-section{margin-bottom:30px}
.legal-h{font-family:var(--serif);font-size:1.28rem;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:.01em}
.legal-content p{color:var(--ink-2);line-height:1.72;margin:0 0 14px;max-width:720px}
.apply-body{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,78px) var(--gutter) 110px}
.apply-grid{max-width:680px;margin:0 auto}
.apply-head{text-align:center;margin-bottom:clamp(34px,4.5vw,56px)}
.apply-intro{font-size:.98rem;color:var(--ink-2);line-height:1.55;max-width:520px;margin:0 auto}
.apply-steps{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:6px}
.apply-steps li{display:flex;align-items:center;gap:14px;padding:13px 0;font-family:var(--sans);font-size:.92rem;color:var(--ink-3);transition:color .3s;border-bottom:1px solid var(--line-2)}
.apply-steps li.on{color:var(--ink);font-weight:500}
.apply-steps li.passed{color:var(--ink-2)}
.apply-step-n{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.69rem;font-weight:600;color:inherit;flex-shrink:0;transition:all .3s}
.apply-steps li.on .apply-step-n{border-color:var(--gold);color:var(--gold)}
.apply-steps li.passed .apply-step-n{background:var(--gold);border-color:var(--gold);color:#fff}
html[data-theme="dark"] .apply-steps li.passed .apply-step-n{color:#0D1524}
.apply-mail{display:inline-block;margin-top:28px;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:all .3s}
.apply-mail:hover{color:var(--gold);border-color:var(--gold)}
.apply-form{border:1px solid var(--line);background:var(--paper-2);padding:clamp(26px,3.4vw,46px);box-shadow:var(--shadow)}
.apply-form-head{margin-bottom:24px}
.apply-form-head h2{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0}
.apply-form-head .sect-index{display:block;margin-bottom:10px;color:var(--gold)}
.apply-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;animation:fade .4s var(--ease)}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1 / -1}
.field-label{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field-hint{font-weight:400;font-size:.73rem;color:var(--ink-3);text-transform:none;letter-spacing:0}
.input{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:.82em .9em;font-size:.95rem;color:var(--ink);transition:border-color .3s;font-family:var(--sans)}
.input::placeholder{color:var(--ink-3);opacity:.75}
.input:focus{outline:none;border-color:var(--gold)}
textarea.input{resize:vertical;line-height:1.5}
.field-err{font-size:.76rem;color:#b4524a}
html[data-theme="dark"] .field-err{color:#e69189}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg.col{flex-direction:column;align-items:flex-start}
.seg-opt{font-family:var(--sans);font-size:.83rem;padding:.6em 1em;border:1px solid var(--line);border-radius:2px;color:var(--ink-2);background:var(--paper);transition:all .3s}
.seg-opt:hover{border-color:var(--ink-3);color:var(--ink)}
.seg-opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.83rem;padding:.55em .95em;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);background:var(--paper);transition:all .3s}
.pick.sm{font-size:.75rem;padding:.42em .8em}
.pick:hover{border-color:var(--ink-3);color:var(--ink)}
.pick.on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.apply-map-row{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:start;border:1px solid var(--line);padding:20px;background:var(--paper)}
.apply-map .ukmap{height:300px;width:auto;margin:0 auto}
.apply-map-side{display:flex;flex-direction:column;gap:18px}
.apply-reach{border-top:1px solid var(--line);padding-top:14px}
.apply-reach-v{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink)}
.apply-reach-l{font-size:.76rem;color:var(--ink-3)}
.apply-turnstile{margin-top:30px;min-height:65px}
/* Cloudflare's widget is a fixed 300px; on small phones the card is narrower, so
   scale just the widget to fit — leaves the form's own spacing/design untouched */
@media(max-width:395px){.apply-turnstile{transform:scale(.92);transform-origin:left center}}
@media(max-width:345px){.apply-turnstile{transform:scale(.8);transform-origin:left center}}
.apply-status{margin-top:16px;font-family:var(--sans);font-size:.85rem;line-height:1.5;color:#b4524a}
html[data-theme="dark"] .apply-status{color:#e69189}
.apply-status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.apply-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.apply-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:.77rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:color .3s}
.apply-back:hover{color:var(--ink)}
.apply-back .flip{transform:rotate(180deg)}
.apply-done{text-align:center;max-width:640px;margin:clamp(30px,6vw,68px) auto;padding:40px 0}
.done-ring{width:78px;height:78px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto;color:var(--gold)}
.done-ring .em{width:34px}
.done-ref{display:inline-block;margin-top:30px;font-family:var(--sans);font-size:.77rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:.7em 1.2em;border-radius:2px}
@media(max-width:900px){
  .apply-fields{grid-template-columns:1fr}
  .apply-map-row{grid-template-columns:1fr;gap:18px}
  .apply-map .ukmap{height:240px}
}

/* click ripple canvas */
.ripple-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none}
/* scroll-traveling kite (home page) */
.scroll-kite{position:fixed;top:0;left:50%;width:0;height:0;z-index:-1;pointer-events:none}
.scroll-kite-inner{position:absolute;top:0;left:0;width:min(620px,64vw);margin-left:calc(min(620px,64vw) / -2);
  color:var(--ink);opacity:.055;will-change:transform}
.scroll-kite-inner .em{display:block;width:100%}
.hero-bg{will-change:transform}

/* loading */
#boot{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--paper);z-index:9999;display:grid;place-items:center;transition:opacity .55s ease}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
#boot .em{width:52px;color:var(--ink);animation:bob 2.4s var(--ease) infinite}
#root{opacity:0;transition:opacity .85s var(--ease)}
#root.site-ready{opacity:1}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* ============================ STATIC PRERENDER (SEO / no-JS fallback) ============================
   Content inside #root is crawlable HTML that React replaces on mount. These rules give it a
   readable, on-brand layout for crawlers and for any visitor whose JS fails. React clears #root
   on hydration, so this never double-renders alongside the app. */
.pr{max-width:var(--container);margin:0 auto;padding:clamp(90px,12vw,150px) var(--gutter) 80px}
.pr-hero{margin-bottom:clamp(48px,7vw,90px)}
.pr-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.12;letter-spacing:.012em;margin:.35em 0}
.pr-kicker{font-family:var(--display);font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pr-sub{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ink-2);max-width:60ch;margin:.6em 0}
.pr-pos{color:var(--ink-3);max-width:60ch;margin:.8em 0}
.pr-updated{color:var(--ink-3);font-size:.9rem;margin-top:.4em}
.pr section{margin:clamp(40px,6vw,72px) 0}
.pr h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.2;margin-bottom:.5em}
.pr p{margin:.7em 0;color:var(--ink-2);max-width:72ch}
.pr-cta{display:inline-block;margin-top:1em;padding:.85em 1.8em;border:1px solid var(--gold);color:var(--gold);border-radius:2px;font-family:var(--display);letter-spacing:.05em;font-size:.9rem}
.pr-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:1.4em}
.pr-service{border:1px solid var(--line);border-radius:4px;padding:26px;background:var(--paper-card)}
.pr-service h3{font-family:var(--serif);font-size:1.1rem;margin:.3em 0 .5em;color:var(--ink)}
.pr-num{font-size:.72rem;letter-spacing:.24em;color:var(--ink-3)}
.pr-list,.pr-stats,.pr-sectors{list-style:none;padding:0;margin:1.2em 0;display:grid;gap:12px}
.pr-sectors{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pr-list li,.pr-stats li,.pr-sectors li{padding:12px 16px;border:1px solid var(--line);border-radius:3px;background:var(--paper-card);color:var(--ink-2)}
.pr-fig{font-family:var(--display);color:var(--gold);margin-right:.4em}
.pr-legal section{margin:1.5em 0}
.pr-legal h2{font-size:clamp(1.15rem,2vw,1.4rem);font-family:var(--serif)}
.pr-foot{margin-top:clamp(50px,8vw,90px);padding-top:30px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.9rem}
.pr-foot a{color:var(--ink-2);text-decoration:underline}

/* hCaptcha widget in the enquiry form */
.apply-captcha{margin:20px 0 4px;min-height:78px}
/* hCaptcha's checkbox iframe is a fixed 303px; on small phones the card is
   narrower, so it overflowed off the right. Scale just the widget to fit —
   forcing the iframe narrower would clip its content, so scale instead (same
   approach as .apply-turnstile above). transform-origin left keeps it aligned. */
@media(max-width:400px){.apply-captcha{transform:scale(.9);transform-origin:left center}}
@media(max-width:345px){.apply-captcha{transform:scale(.8);transform-origin:left center}}
@media(max-width:310px){.apply-captcha{transform:scale(.72);transform-origin:left center}}