/* Digihandler — shared stylesheet.
   Extracted from the original single-file build; every page loads this. */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* ---- surface ramp: pure black base, neutral elevation ---- */
  --black:#000000;      /* true black canvas */
  --black-2:#0a0a0a;    /* elevated surface  */
  --black-3:#141414;    /* highest surface   */

  /* ---- neutral accent ramp (replaces the old blue) ---- */
  --sky:#f2f2f4;        /* primary accent = near-white */
  --sky-2:#ffffff;      /* highlight                   */
  --sky-glow:rgba(255,255,255,.16);
  --blue:#3a3a3c;       /* structural neutral */
  --blue-soft:#8e8e93;  /* muted neutral      */
  --blue-deep:#1c1c1e;  /* deep neutral       */

  /* ---- the single chromatic accent ---- */
  --yellow:#ffd429;
  --yellow-soft:#ffe45c;

  --white:#ffffff;
  --grey:#8a8a8f;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --radius:22px;
  --maxw:1240px;

  /* ============================================================
     FLUID SPACING SCALE
     One rhythm for the whole site. Every value is a clamp() that
     shrinks on a phone and grows on a wide desktop, so vertical
     rhythm and gutters scale smoothly instead of jumping at
     breakpoints. min = comfortable phone, max = the old fixed px.
     ============================================================ */
  --gutter:clamp(20px,5vw,28px);           /* .wrap side padding: was 28 / 20 */
  --space-section:clamp(64px,9.5vw,110px); /* section rhythm: was 110 / 78 */
  --space-cta:clamp(80px,12vw,130px);      /* big CTA band: was 130 */
  --space-hero-top:clamp(120px,16vw,160px);/* hero clears fixed nav: was 160 / 130 */
  --space-footer:clamp(48px,7vw,70px);     /* footer top/bottom: was 70 */
  --pad-lg:clamp(28px,4vw,52px);           /* large card interiors: was 52 / 54 */
  --pad-md:clamp(24px,3vw,38px);           /* medium card interiors: was 34-38 */
  --pad-sm:clamp(20px,2.5vw,32px);         /* small card interiors: was 26-32 */
  /* Fallback chain only. next/font sets --f-d / --f-logo / --f-b on <body>
     along with its metric-matched local fallbacks, and the block below
     re-points these three tokens at them. Keeping real family names here means
     the site still renders correctly if the font payload ever fails. */
  --font-d:Georgia,'Times New Roman',serif;
  --font-logo:Didot,'Bodoni MT',Georgia,serif;
  --font-b:system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ============================================================
     MOTION SYSTEM
     Apple's springs expressed as two families. Critically damped
     (no overshoot) is the default; the bounce variants are reserved
     for motion that follows a real gesture. All values below are
     deliberate — nothing here is a round number for its own sake.
     ============================================================ */
  --spring:cubic-bezier(.32,.72,0,1);         /* damping 1.0  — settles, never overshoots */
  --spring-bounce:cubic-bezier(.34,1.56,.64,1);/* damping ~0.8 — momentum only */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --r-press:.10s;   /* response: press feedback, must feel instant */
  --r-move:.40s;    /* response: reposition (Apple PiP = 0.4)      */
  --r-sheet:.30s;   /* response: drawer / sheet (Apple = 0.3)      */
}

*{margin:0;padding:0;box-sizing:border-box}

/* Base anchor rule.
   Without this, any anchor that does not set its own colour falls through to
   the user agent's link blue (#9E9EFF in dark mode) with an underline. That was
   hitting the nav dropdowns, the service cards and the work cards, because
   those are whole-card links whose inner h3 inherits from the anchor.
   Inheriting the container colour is the design intent: each card's heading,
   body and "more" line already declare their own colour from the token ramp.
   Deliberately the lowest possible specificity, so every rule that opts back
   into an underline (.seo-note a, .consent a) still wins. */
a{color:inherit;text-decoration:none}
/* scrollbar-gutter reserves the scrollbar's width permanently. Without it,
   body.lock (drawer and modal) removes the scrollbar and the whole page
   jumps sideways as the panel opens. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%;
  scrollbar-gutter:stable}
/* The next/font variables live on <body>, so the tokens have to be redefined
   here rather than in :root — a var() in :root cannot see a property declared
   on a descendant. */
body{
  --font-d:var(--f-d),Georgia,'Times New Roman',serif;
  --font-logo:var(--f-logo),Didot,'Bodoni MT',Georgia,serif;
  --font-b:var(--f-b),system-ui,-apple-system,'Segoe UI',sans-serif;
}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-b);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--yellow);outline-offset:3px;
}

/* Press feedback fires on pointer-down and is near-instant.
   Anything a finger can touch gets it. */
.btn:active,.case-tabs button:active,.socials a:active,
.top:active,.play:active,.dots button:active{
  transform:scale(.97);
  transition:transform var(--r-press) var(--ease-out);
}

/* ============================================================
   BACKGROUND TEXTURE  (noise grain + grid + soft colour blurs)
   ============================================================ */
body::before{                       /* grain */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{                        /* fine grid */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.030) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.030) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 80%);
}
/* Glows are neutral now — light falling on a black surface, not colour.
   Kept very low opacity so pure black stays genuinely black. */
.blur{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.blur.b{background:#ffffff;opacity:.05}
.blur.s{background:#ffffff;opacity:.07}
.blur.y{background:var(--yellow);opacity:.10}
.blur.d{background:#ffffff;opacity:.045}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{max-width:var(--maxw);width:100%;min-width:0;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
section{position:relative;padding:var(--space-section) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);border:1px solid var(--line);
  background:rgba(255,255,255,.045);padding:8px 16px;border-radius:100px;margin-bottom:22px;
}
.eyebrow.y{color:var(--yellow);border-color:rgba(255,208,40,.28);background:rgba(255,208,40,.06)}

/* ---- Typography: tracking and leading are size-specific, never one value ---- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;font-optical-sizing:auto}
h1{line-height:1.02;letter-spacing:-.035em}   /* largest → tightest */
h2{line-height:1.06;letter-spacing:-.028em}
h3{line-height:1.15;letter-spacing:-.018em}
h4{line-height:1.25;letter-spacing:-.01em}
h2.title{font-size:clamp(34px,4.6vw,60px);margin-bottom:18px}
h2.title em{font-style:normal;background:linear-gradient(100deg,var(--sky-2),var(--sky) 42%,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--grey);font-size:17px;line-height:1.7;letter-spacing:0;max-width:640px}
small,.meta,.consent,.fine{letter-spacing:.005em}  /* small text opens up slightly */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;
  font-size:15px;padding:15px 28px;border-radius:100px;text-decoration:none;
  transition:transform var(--r-move) var(--spring),background var(--r-move) var(--spring),
             box-shadow var(--r-move) var(--spring),border-color var(--r-move) var(--spring),color .2s var(--ease-out);
  border:1px solid transparent;cursor:pointer;will-change:transform;
  white-space:nowrap;
}
.btn-y{background:var(--yellow);color:#000}
.btn-y:hover{background:var(--yellow-soft);transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,208,40,.26)}
.btn-b{background:var(--black-3);color:#fff;border-color:var(--line)}
.btn-b:hover{background:#1f1f1f;transform:translateY(-2px)}
.btn-s{background:var(--white);color:#000}
.btn-s:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,255,255,.14)}
.btn-o{border-color:var(--line);color:#fff;background:rgba(255,255,255,.03)}
.btn-o:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
.btn i{font-style:normal;transition:transform var(--r-move) var(--spring)}
.btn:hover i{transform:translateX(4px)}

.card{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(14px);
  transition:transform var(--r-move) var(--spring),border-color var(--r-move) var(--spring),
             box-shadow var(--r-move) var(--spring),background var(--r-move) var(--spring);
  will-change:transform;
}
.card:hover{border-color:rgba(255,255,255,.30);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.7)}

/* ============================================================
   HEADER + MEGA MENU
   ============================================================ */
/* Floating translucent chrome. Content scrolls *under* it — no opaque strip.
   The bottom edge is a soft gradient mask, not a 1px rule (scroll edge effect). */
/* The bar is a floating glass island on every page: `.wrap` supplies the outer
   gutter so the pill sits inset from the viewport edges, and `.nav` is the pill
   itself — always translucent, blurred and rounded, not a scroll-triggered
   strip. It is deliberately compact. */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;
  transition:padding var(--r-sheet) var(--spring);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:8px 8px 8px 22px;border-radius:9999px;
  background:rgba(12,12,14,.55);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background var(--r-sheet) var(--spring),box-shadow var(--r-sheet) var(--spring),
             border-color var(--r-sheet) var(--spring),padding var(--r-sheet) var(--spring);
}
/* Once scrolled, the island sits over live content — make the glass read a
   touch denser so text behind never bleeds through. */
header.stuck .nav{
  background:rgba(10,10,12,.72);
  box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
  padding-top:6px;padding-bottom:6px;
}
html[data-theme="light"] .nav{
  background:rgba(255,255,255,.62);border-color:rgba(0,0,0,.08);
  box-shadow:0 10px 34px rgba(20,20,30,.14),inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="light"] header.stuck .nav{background:rgba(255,255,255,.8)}
/* The pill went light but its links did not: #cfd6e6 on a white-ish plate, and
   the hover state went to a flat #fff, so the whole menu read as blank space.
   The tokens already flip with the theme — --grey is #5a6478 in light, --white
   is #0b1020 — so the fix is to stop hard-coding either end. */
html[data-theme="light"] .menu > li > a{color:var(--grey)}
html[data-theme="light"] .menu > li > a:hover,
html[data-theme="light"] .menu > li > a.here{color:var(--white);background:rgba(11,16,32,.06)}
/* ============================================================
   BRAND LOCKUP
   The supplied wordmark is white artwork on a black plate. mix-blend-mode
   :screen drops that plate entirely, so the mark composites cleanly on any
   dark surface — no visible rectangle, no need for a transparent PNG.
   The text version underneath is the fallback if the file ever fails, set
   in Bodoni Moda (the closest Google Font to the wordmark's Didone forms).
   ============================================================ */
/* The wordmark is 9.2:1, so at 168px wide the anchor is only ~18px tall.
   A pseudo-element gives it a 44px hit area without changing the layout. */
.logo{display:inline-flex;align-items:center;text-decoration:none;color:#fff;line-height:0;position:relative}
.logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.logo-img{width:146px;height:auto;display:block}
/* This wordmark is 9.2:1, so sizing it by height makes it enormously wide.
   Width is the controlling dimension for a horizontal lockup like this. */
.logo .wm{display:none}
.logo.is-fallback .wm{
  display:inline;line-height:1;font-family:var(--font-logo);font-optical-sizing:auto;
  font-weight:600;font-size:25px;letter-spacing:.06em;color:#fff}
.logo.is-fallback .wm b{font-weight:600;color:var(--yellow)}
.logo .mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#000;
  background:linear-gradient(135deg,var(--yellow),#ffb800);
}
.logo .wm{white-space:nowrap;letter-spacing:-.02em}
.logo .wm b{color:var(--yellow);font-weight:700}
.menu{display:flex;align-items:center;gap:6px;list-style:none}
.menu > li{position:relative}
.menu > li > a{
  display:block;padding:9px 15px;color:#cfd6e6;text-decoration:none;font-size:14px;font-weight:500;
  border-radius:100px;transition:.25s;
}
.menu > li > a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{display:flex;align-items:center;gap:12px}

.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);
  width:min(1080px,92vw);background:#0b0b0d;border:1px solid var(--line);
  border-radius:24px;padding:30px;
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 30px 90px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;visibility:hidden;
  /* Anchored to the trigger, not the viewport — it grows out of the tab */
  transform-origin:top center;
  transition:opacity .22s var(--ease-out),transform var(--r-sheet) var(--spring),visibility 0s .3s;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.menu > li:hover > .mega,.menu > li:focus-within > .mega{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s
}
.mega h5{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.mega a.item{display:flex;gap:11px;padding:9px;border-radius:12px;text-decoration:none;transition:.22s}
.mega a.item:hover{background:rgba(255,255,255,.08)}
.mega .ico{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:var(--sky);display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.mega .txt strong{display:block;color:#fff;font-size:14px;font-weight:600;font-family:var(--font-d)}
.mega .txt small{color:var(--grey);font-size:12px;line-height:1.4}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-size:19px;cursor:pointer}

/* Between tablet landscape and a compact laptop, the full nav is too dense
   for a reliable mega-menu. Use the same accessible drawer as phones.
   The primary CTA stays — hiding every header action below 1200px left the
   burger as the only thing to press on the widths most visitors arrive at. */
@media(max-width:1200px){
  .menu{display:none}
  .nav-cta .btn-wa{display:none}
  .burger{display:block}
}
/* The nav island on a phone.

   Measured before this block existed, at 390px: the CTA wrapped to two lines
   and pushed the pill to 70px tall, and the burger — a flex item with nothing
   stopping it — was crushed from 44px to 29px, under the minimum touch target.
   At 320px it was 25px and the pill stood 84px high.

   Four items cannot share 350px. The theme toggle is the one a visitor needs
   least often from the header, so it moves into the drawer and the other three
   get their width back. The label shortens with it. */
.lbl-tight{display:none}
@media(max-width:520px){
  /* Left padding is for a text logo, right padding for a bordered square
     button — 16/8 is what makes them look equal. */
  .nav{padding:7px 8px 7px 16px}
  .nav-cta{gap:8px}
  .nav-cta .theme-toggle{display:none}
  .nav-cta .btn-y{padding:11px 16px;font-size:13.5px}
  .nav-cta .btn-y i{display:none}
  /* Never let the touch target absorb the overflow. */
  .burger{flex:0 0 44px}
}
@media(max-width:380px){
  .nav{padding:7px 7px 7px 13px}
  .lbl-full{display:none}
  .lbl-tight{display:inline}
  .nav-cta{gap:7px}
  .nav-cta .btn-y{padding:10px 13px;font-size:13px}
}

/* The drawer's theme row, since the header no longer carries one here. */
.d-theme{display:flex;align-items:center;gap:12px;margin-top:6px;
  font-size:14px;color:var(--grey)}

/* ============================================================
   HERO SLIDER
   ============================================================ */
/* svh = the viewport with the mobile browser bar showing. Plain vh assumes
   the bar is hidden, so the hero starts taller than the screen and the CTA
   sits below the fold on every phone. */
.hero{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding:var(--space-hero-top) 0 40px;overflow:clip}
.hero > .wrap{min-width:0}
.hero .blur.s{width:700px;height:700px;top:-240px;right:-200px;opacity:.075}
.hero .blur.b{width:520px;height:520px;top:180px;right:120px;opacity:.05}
.hero .blur.y{width:420px;height:420px;bottom:-160px;left:-180px;opacity:.09}
/* Keep the large aurora static. Rotating a viewport-sized translucent layer
   caused compositor flicker on some Chromium/GPU combinations. */
.hero .aurora{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:conic-gradient(from 210deg at 70% 30%,transparent 0deg,rgba(255,255,255,.055) 60deg,transparent 140deg,rgba(255,255,255,.03) 220deg,transparent 300deg);
  transform:scale(1.08);
}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}

/* --- live status pill --- */
.pill{
  display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.05);margin-bottom:26px;
  font-size:13px;color:#d6d6d8;font-family:var(--font-b);
  /* Vibrancy: on a translucent surface, text gets more weight and a touch
     more tracking rather than flat grey, so it stays legible. */
  font-weight:450;letter-spacing:.005em;
}
.pill .live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--sky);flex:0 0 auto}
.pill .live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--sky);animation:ping 1.9s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
.pill b{font-weight:600;color:#fff}
.pill .chip{background:var(--yellow);color:#000;font-family:var(--font-d);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:100px}

/* --- headline / swipeable track ---
   The track is driven by a JS spring, not a CSS transition, so it can be
   grabbed and reversed mid-flight. No `transition` here on purpose. */
/* Stacked crossfade, not a translating flex track.
   Every slide sits in the same grid cell (1/1), so the container sizes to the
   tallest one automatically. Nothing translates, so nothing can drift out of
   sync with a measured width — which is what previously leaked slides 2 and 3
   through behind slide 1 and clipped the left edge of the copy. */
.hero-slider{display:grid;min-width:0;width:100%;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.hero-track{display:contents}
.slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none}
/* The previous crossfade left two complete headlines visible together. Hide
   the outgoing slide immediately, then fade only the incoming slide. */
.slide.on{opacity:1;visibility:visible;pointer-events:auto;animation:slide-in .34s var(--ease-out) both}
@keyframes slide-in{from{opacity:0}to{opacity:1}}
.hero-slider:focus-visible{outline:2px solid var(--yellow);outline-offset:14px;border-radius:10px}
.hero .hero-heading{font-family:var(--font-d);font-weight:600;font-optical-sizing:auto;line-height:1.02;letter-spacing:-.035em;font-size:clamp(38px,5vw,72px);margin-bottom:22px}
.hero .hero-heading .l{display:block;overflow:hidden}
.slide.on .hero-l{animation:rise .8s var(--spring) both}
.slide.on .l:nth-child(2) .hero-l{animation-delay:.07s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-l{display:block}
.hero .slide p{min-height:5.2em}
.hero .hero-heading .grad{
  background:linear-gradient(100deg,var(--sky) 0%,var(--sky-2) 40%,var(--yellow) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .hero-heading .out{-webkit-text-stroke:1.4px var(--sky);color:transparent}
.hero .slide>p:not(.hero-heading){color:var(--grey);font-size:18px;line-height:1.72;max-width:500px;margin-bottom:34px}
.hero .slide.on>p:not(.hero-heading){animation:fade .55s .12s var(--ease-out) both}
@keyframes fade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:44px}
.hero-btns .note{color:#69738c;font-size:13px;line-height:1.4}
.hero-btns .note b{color:var(--sky);font-weight:600}

/* --- trust strip --- */
.trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.trust .avs{display:flex}
.trust .avs i{width:34px;height:34px;border-radius:50%;border:2px solid var(--black);margin-left:-11px;
  display:grid;place-items:center;font-style:normal;font-family:var(--font-d);font-size:12px;font-weight:700;color:#000}
.trust .avs i:first-child{margin-left:0}
.trust .avs i:nth-child(1){background:linear-gradient(135deg,var(--sky),#d8d8dc)}
.trust .avs i:nth-child(2){background:linear-gradient(135deg,var(--yellow),#ffb800)}
.trust .avs i:nth-child(3){background:linear-gradient(135deg,var(--blue-soft),var(--blue))}
.trust .avs i:nth-child(4){background:linear-gradient(135deg,var(--sky-2),var(--sky));font-size:11px}
.trust .t-txt{font-size:13px;color:var(--grey);line-height:1.5}
.trust .t-txt b{color:#fff;display:block;font-family:var(--font-d);font-size:14px}
.trust .stars{color:var(--yellow);letter-spacing:2px;font-size:13px}

/* --- right visual: orbit + floating stat cards --- */
.hero-visual{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;justify-self:end;display:grid;place-items:center}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.ring.r1{inset:2%;animation:spin 34s linear infinite}
.ring.r2{inset:16%;border-color:rgba(255,255,255,.19);border-style:dashed;animation:spin 22s linear infinite reverse}
.ring.r3{inset:31%;border-color:rgba(255,208,40,.22);animation:spin 15s linear infinite}
.ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
  background:var(--sky);box-shadow:0 0 24px var(--sky)}
.ring.r2::after{background:var(--yellow);box-shadow:0 0 24px var(--yellow)}
.ring.r3::after{background:var(--sky-2);box-shadow:0 0 20px var(--sky-2)}
@keyframes spin{to{transform:rotate(360deg)}}
.core{
  position:relative;z-index:3;width:46%;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.14),rgba(0,0,0,.92) 68%);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);
  box-shadow:0 0 90px rgba(255,255,255,.15),inset 0 0 60px rgba(255,255,255,.07);
}
.core-logo{
  width:68%;height:auto;display:block;object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.2));
}
.fcard{
  position:absolute;z-index:4;padding:14px 18px;border-radius:16px;
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.fcard b{display:block;font-family:var(--font-d);font-size:22px;line-height:1;color:#fff}
.fcard b i{font-style:normal;color:var(--sky)}
.fcard small{display:block;font-size:11px;color:var(--grey);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.fcard.f1{top:6%;left:-2%}
.fcard.f2{bottom:12%;right:-2%;border-color:rgba(255,208,40,.28)}
.fcard.f2 b i{color:var(--yellow)}
.fcard.f3{bottom:-2%;left:12%;display:flex;align-items:center;gap:10px}
.fcard.f3 .bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.fcard.f3 .bars s{width:5px;border-radius:2px;background:var(--sky);text-decoration:none;animation:grow 1.6s ease-in-out infinite}
.fcard.f3 .bars s:nth-child(1){height:35%;animation-delay:0s}
.fcard.f3 .bars s:nth-child(2){height:60%;animation-delay:.2s}
.fcard.f3 .bars s:nth-child(3){height:45%;animation-delay:.4s}
.fcard.f3 .bars s:nth-child(4){height:85%;background:var(--yellow);animation-delay:.6s}
@keyframes grow{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}

/* --- slider dots + scroll cue --- */
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:60px;padding:22px 0;border-top:1px solid var(--line)}
.slider-controls{display:flex;align-items:center;gap:16px}
.dots{display:flex;gap:9px}
.dots button{width:32px;height:4px;border-radius:4px;border:0;background:rgba(255,255,255,.18);cursor:pointer;transition:.35s}
.dots button.on{background:linear-gradient(90deg,var(--sky),var(--yellow));width:58px}
.slide-toggle{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--grey);cursor:pointer;
  font-family:var(--font-d);font-size:11px;letter-spacing:.04em;transition:.25s}
.slide-toggle:hover{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.slide-toggle span{color:var(--yellow);font-size:10px;line-height:1}
.cue{display:flex;align-items:center;gap:10px;color:#69738c;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-d)}
.cue .m{width:20px;height:32px;border:1px solid var(--line);border-radius:12px;position:relative}
.cue .m::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;
  border-radius:3px;background:var(--sky);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{opacity:0;top:6px}30%{opacity:1}100%{opacity:0;top:19px}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:rgba(255,255,255,.03)}
.track{display:flex;width:max-content;animation:slide 32s linear infinite;align-items:center;will-change:transform}
.track-group{display:flex;align-items:center;gap:38px;flex:0 0 auto;padding-right:38px}
.marquee.rev .track{animation-direction:reverse}
@keyframes slide{to{transform:translateX(-50%)}}
.track span{font-family:var(--font-d);font-size:24px;font-weight:500;color:#dfe5f2;white-space:nowrap}
.track .st{color:var(--sky);font-size:16px}
.marquee.rev .track .st{color:var(--yellow)}
.track .gh{-webkit-text-stroke:1px rgba(255,255,255,.35);color:transparent}

/* ============================================================
   SERVICES (sticky stack)
   ============================================================ */
.svc-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.svc-sticky{position:sticky;top:130px}
.svc-list{display:flex;flex-direction:column;gap:18px}
.svc{padding:var(--pad-md)}
.svc-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.svc-num{font-family:var(--font-d);font-size:13px;color:var(--sky);letter-spacing:.18em}
.svc h3{font-size:28px;flex:1}
.svc ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:26px}
.svc li{display:flex;gap:12px;color:var(--grey);font-size:15px;line-height:1.6}
.svc li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--sky);flex:0 0 auto;margin-top:8px;transform:rotate(45deg);box-shadow:0 0 12px var(--sky-glow)}
.svc a.more{color:var(--sky);text-decoration:none;font-family:var(--font-d);font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.svc a.more:hover{gap:14px}

/* ============================================================
   METRICS BAND
   ============================================================ */
.band{background:linear-gradient(120deg,rgba(255,255,255,.09),rgba(255,255,255,.05) 55%,rgba(255,208,40,.07));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:44px;align-items:center}
.band-lead{font-family:var(--font-d);font-size:22px;line-height:1.45}
.band-lead b{color:var(--sky);font-size:56px;display:block;margin-bottom:10px}
.metric b{font-family:var(--font-d);font-size:48px;font-weight:700;display:block;line-height:1}
.metric b span{color:var(--sky)}
.metric:last-child b span{color:var(--yellow)}
.metric small{color:var(--grey);font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:10px}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.case-tabs button{
  padding:12px 22px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--grey);font-family:var(--font-d);font-size:14px;font-weight:500;cursor:pointer;transition:.25s;
}
.case-tabs button:hover{color:#fff;border-color:var(--sky)}
.case-tabs button.on{background:linear-gradient(120deg,var(--sky),#d8d8dc);color:#000;border-color:transparent;box-shadow:0 10px 30px var(--sky-glow)}
.case{display:none;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;padding:0}
.case.on{display:grid;animation:fade .5s}
.case-txt{padding:var(--pad-lg)}
.case-txt .tag{font-family:var(--font-d);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;display:block}
.case-txt h3{font-size:34px;margin-bottom:16px}
.case-txt p{color:var(--grey);line-height:1.75;margin-bottom:30px}
.case-nums{display:flex;gap:44px;margin-bottom:32px}
.case-nums b{font-family:var(--font-d);font-size:40px;color:var(--sky);display:block;line-height:1}
.case-nums div:last-child b{color:var(--yellow)}
.case-nums small{color:var(--grey);font-size:13px;display:block;margin-top:8px}
.case-img{background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.10),transparent 65%),radial-gradient(circle at 25% 85%,rgba(255,255,255,.07),transparent 60%),var(--black-3);display:grid;place-items:center;min-height:400px;border-left:1px solid var(--line)}
.case-img div{font-family:var(--font-d);font-size:40px;font-weight:700;color:rgba(255,255,255,.14);letter-spacing:-.02em;text-align:center;padding:0 30px}

/* ============================================================
   PROCESS
   ============================================================ */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{padding:var(--pad-md);position:relative;overflow:hidden}
.step .n{font-family:var(--font-d);font-size:74px;font-weight:700;line-height:1;-webkit-text-stroke:1.4px rgba(255,255,255,.34);color:transparent;margin-bottom:22px;transition:.4s}
.step:hover .n{-webkit-text-stroke-color:var(--yellow)}
.step h3{font-size:22px;margin-bottom:14px}
.step p{color:var(--grey);font-size:15px;line-height:1.7}
.step::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--sky),var(--yellow));transition:.45s}
.step:hover::after{width:100%}

/* ============================================================
   TEAM
   ============================================================ */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.member{padding:0;overflow:hidden}
.member .ph{aspect-ratio:4/3.4;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 55%,rgba(255,208,40,.14));display:grid;place-items:center;font-family:var(--font-d);font-size:44px;font-weight:700;color:rgba(255,255,255,.55)}
.member .info{padding:var(--pad-sm)}
.member h4{font-size:19px;margin-bottom:6px}
.member small{color:var(--sky);font-size:13px;display:block;margin-bottom:12px;font-family:var(--font-d);letter-spacing:.04em}
.member a{color:var(--grey);font-size:13px;text-decoration:none}
.member a:hover{color:var(--sky)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.rating{display:flex;align-items:center;gap:10px;color:var(--grey);font-size:14px;margin-bottom:8px}
.rating b{color:#fff;font-family:var(--font-d);font-size:17px}
.rating .s{color:var(--yellow)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{padding:var(--pad-sm)}
.quote .q{font-family:var(--font-d);font-size:40px;color:var(--sky);line-height:.6;margin-bottom:18px;display:block}
.quote p{color:#c9d1e3;line-height:1.75;font-size:15px;margin-bottom:24px}
.quote .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.quote .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--yellow));display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:15px;color:#000}
.quote .who strong{display:block;font-size:15px;font-family:var(--font-d)}
.quote .who small{color:var(--grey);font-size:12px}

/* ============================================================
   BLOG
   ============================================================ */
.blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{padding:0;overflow:hidden}
.post .thumb{height:180px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.06) 55%,rgba(255,208,40,.12));position:relative}
.post .thumb span{position:absolute;left:18px;bottom:18px;background:var(--sky);color:#000;font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
.post .body{padding:var(--pad-sm)}
.post h3{font-size:19px;line-height:1.35;margin-bottom:12px}
.post .meta{color:var(--grey);font-size:13px}

/* ============================================================
   NEWSLETTER + CTA + FOOTER
   ============================================================ */
.news{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,50px);align-items:center;padding:var(--pad-lg);}
.form{display:flex;gap:12px;flex-wrap:wrap}
.form input{
  flex:1;min-width:220px;padding:16px 20px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:#fff;font-family:var(--font-b);font-size:15px;outline:none;
}
.form input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.form input::placeholder{color:#69738c}
.consent{color:#69738c;font-size:12px;margin-top:14px}
.consent a{color:var(--sky)}

.cta{text-align:center;padding:var(--space-cta) 0}
.cta .blur.d{width:760px;height:520px;left:50%;top:20%;transform:translateX(-50%)}
.cta h2{font-size:clamp(40px,6vw,80px);margin-bottom:22px}
.cta h2 em{font-style:normal;background:linear-gradient(100deg,var(--sky),var(--sky-2) 45%,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{color:var(--grey);max-width:560px;margin:0 auto 38px;line-height:1.75}

footer{border-top:1px solid var(--line);padding:var(--space-footer) 0 34px;background:rgba(0,0,0,.6);
  position:relative;overflow:hidden}
footer > .wrap{position:relative;z-index:1}
/* Oversized ghost wordmark bleeding off the bottom edge — the studio's own logo
   as a watermark, in the display face. Outline + faint fill, decorative only. */
/* The footer plate was a flat rgba(0,0,0,.6) at every theme, so in light mode
   the page ended on a mid-grey slab with slate text on it — the whole footer
   was unreadable, links included. It gets a light plate here instead. */
html[data-theme="light"] footer{background:rgba(255,255,255,.74)}

/* ---- footer wordmark ------------------------------------------------------
   Three things made the previous treatment look cheap, and none of them was
   the colour. It was absolutely positioned behind the footer, so it ran under
   the SEO paragraph and the copyright line and you read two layers of text at
   once. It was outlined with -webkit-text-stroke, which is the one Didone
   effect that always reads as a template. And it was jammed against the bottom
   edge with no air.

   So: its own band, last in the flow, nothing over it; a solid hairline fill
   instead of an outline; and the tracking a wordmark of this size needs. Bodoni
   is a high-contrast face, so at 200px+ its thin strokes go sub-pixel and grey
   out — `opsz` at the top of the axis is what keeps the hairlines crisp rather
   than muddy, and it is the whole reason this looks expensive at size. */
.f-mark{
  position:relative;z-index:1;
  padding:clamp(28px,4vw,52px) var(--gutter) clamp(18px,2.4vw,30px);
  border-top:1px solid var(--line-2);
  margin-top:clamp(30px,4vw,54px);
  overflow:hidden;
}
/* The supplied artwork is a light outline on an *opaque* black plate, not a
   transparent PNG, so it cannot simply be dropped onto the footer. `screen`
   discards the black and keeps the outline, which is exactly what the plate
   needs on a dark page. In light mode the same trick runs the other way:
   invert makes it a dark outline on white, and `multiply` discards the white.
   Doing it with blend modes rather than exporting two files means one asset
   and no chance of the pair drifting apart. */
.f-mark-img{
  display:block;width:100%;height:auto;
  mix-blend-mode:screen;
  /* The source outline is already a thin light grey, so `screen` alone lands it
     well below the footer rule. Near-full opacity here is still a soft mark. */
  opacity:.95;
}
html[data-theme="light"] .f-mark-img{
  filter:invert(1);
  mix-blend-mode:multiply;
  opacity:.72;
}
@media(max-width:640px){
  .f-mark{padding-top:clamp(20px,6vw,30px)}
}

/* Five columns of content — the grid must declare five tracks, or the last
   one wraps onto its own row and leaves a hole beside it. */
.f-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:40px;margin-bottom:52px}
.f-col h5{font-family:var(--font-d);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:20px}
/* Padding rather than margin, so the link's hit area grows with it.
   14px text + 2×7px = 28px, clearing the 24px WCAG 2.5.8 minimum. */
.f-col a{display:block;color:var(--grey);text-decoration:none;font-size:14px;
  padding:7px 0;margin-bottom:1px;transition:.22s}
/* --white is the *foreground* token and flips with the theme; #fff here was
   invisible against a light footer. */
.f-col a:hover{color:var(--white);transform:translateX(4px)}
.f-about p{color:var(--grey);font-size:14px;line-height:1.75;margin:18px 0 22px;max-width:320px}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;color:var(--grey);font-size:13px;text-decoration:none;transition:.25s}
.socials a:hover{background:var(--sky);color:#000;border-color:var(--sky);box-shadow:0 8px 24px var(--sky-glow)}
/* low-key SEO paragraph — small, muted, below the fold, but genuinely readable */
.seo-note{border-top:1px solid var(--line);padding:26px 0 4px}
.seo-note p{color:#5a6478;font-size:12.5px;line-height:1.85;max-width:900px}
.seo-note a{color:#6c7789;text-decoration:underline;text-underline-offset:3px;transition:.25s}
.seo-note a:hover{color:var(--sky)}

.f-bot{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#69738c;font-size:13px}
/* inline-block + padding, so the legal links are pressable on a phone
   without pushing the row apart */
.f-bot a{color:#69738c;text-decoration:none;display:inline-block;padding:5px 2px}
.f-bot a:hover{color:var(--yellow)}

/* ============================================================
   WELCOME / MANIFESTO
   ============================================================ */
.welcome{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.welcome .shot{border-radius:26px;aspect-ratio:4/4.4;border:1px solid var(--line)}
.welcome h2{font-size:clamp(32px,4vw,50px);margin-bottom:14px}
.welcome .kicker{font-family:var(--font-d);font-size:clamp(17px,2vw,22px);font-weight:600;line-height:1.5;
  margin-bottom:14px;color:#fff}
.welcome .kicker b{background:linear-gradient(100deg,var(--sky),var(--sky-2) 50%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.welcome > div > p.sub{color:var(--grey);line-height:1.75;margin-bottom:32px;max-width:520px}
.tenets{display:flex;flex-direction:column;gap:16px;margin-bottom:34px}
.tenet{display:flex;gap:16px;align-items:flex-start}
.tenet .n{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-d);font-size:13px;font-weight:700;color:#000;
  background:linear-gradient(135deg,var(--sky),#d8d8dc)}
.tenet:nth-child(2) .n{background:linear-gradient(135deg,var(--yellow),#ffb800)}
.tenet:nth-child(3) .n{background:linear-gradient(135deg,var(--blue-soft),var(--blue));color:#fff}
.tenet h4{font-size:18px;margin-bottom:5px}
.tenet p{color:var(--grey);font-size:15px;line-height:1.7}

/* ============================================================
   SCALE BAND (team / years / clients)
   ============================================================ */
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sc{padding:32px 28px;text-align:left}
.sc b{font-family:var(--font-d);font-size:52px;font-weight:700;line-height:1;display:block;
  background:linear-gradient(120deg,#fff,var(--sky-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sc b i{font-style:normal;color:var(--yellow);-webkit-text-fill-color:var(--yellow)}
.sc small{display:block;color:var(--grey);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.checks{list-style:none;display:grid;gap:14px;margin-top:30px}
.checks li{display:flex;gap:14px;align-items:flex-start;color:#dfe5f2;font-size:15.5px;line-height:1.65;
  padding:15px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:.28s}
.checks li:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05);transform:translateX(5px)}
.checks li em{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  font-style:normal;font-size:11px;font-weight:700;color:#000;background:var(--sky)}
.why .shot{border-radius:26px;aspect-ratio:4/4.6;border:1px solid var(--line)}
.strategy-stock{overflow:hidden;background:var(--black-2)}
.strategy-stock img{width:100%;height:100%;object-fit:cover;display:block}

/* --- approved client proof --- */
.brand-proof{padding:34px 0 0}.brand-proof-inner{padding:24px 28px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}
.brand-proof-inner>p{margin:0 0 18px;color:#80838c;font-family:var(--font-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center}

/* ---- reel slider --------------------------------------------------------
   Scroll-snap rather than a JS-translated track: the browser handles momentum,
   trackpads and touch for free, and there is no measured width to drift. */
.reels-wrap{position:relative}
/* align-items:flex-start, not the default stretch. Stretch sized every card to
   the flex line and the caption underneath the video then hung outside the li,
   where the track's overflow clipped it — the strip rendered with no captions
   at all. Each card is now its own height, and the card itself is a column so
   media and caption stack inside it. */
.reels-track{display:flex;align-items:flex-start;gap:18px;list-style:none;
  padding:4px 2px 18px;margin:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.reels-track::-webkit-scrollbar{display:none}
.reel-card{flex:0 0 auto;display:flex;flex-direction:column;width:260px;scroll-snap-align:center}
.reel-media{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:#0b0b0d;border:1px solid var(--line);
  transition:border-color .3s var(--ease-out),transform .4s var(--spring)}
.reel-card.on .reel-media{border-color:rgba(255,208,40,.42);transform:translateY(-4px)}
.reel-media video,.reel-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Title card stands in for a poster. hsl() driven by --i so the eight cards
   walk across the brand's yellow→sky range instead of repeating. */
.reel-title-card{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:22px 20px;text-decoration:none;
  background:
    radial-gradient(120% 80% at 12% 4%, hsl(calc(48 - var(--i,0) * 9) 82% 56% / .20), transparent 58%),
    linear-gradient(168deg, rgba(255,255,255,.07), rgba(0,0,0,.5) 62%);
  transition:background .4s var(--ease-out)}
.reel-title-card:hover{
  background:
    radial-gradient(120% 80% at 12% 4%, hsl(calc(48 - var(--i,0) * 9) 82% 56% / .32), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.10), rgba(0,0,0,.46) 62%)}
.reel-tc-meta{font-family:var(--font-d);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.reel-tc-text{font-family:var(--font-d);font-size:19px;line-height:1.32;color:#fff;
  font-weight:600;margin-top:auto;padding-bottom:14px}
.reel-tc-cta{display:flex;align-items:center;gap:9px;font-size:12.5px;
  color:rgba(255,255,255,.78)}
.reel-tc-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;color:#000;background:var(--yellow);flex:0 0 auto}
.reel-sound{position:absolute;right:10px;bottom:10px;z-index:2;cursor:pointer;
  padding:7px 12px;border-radius:100px;font-family:var(--font-d);font-size:11px;
  letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.26);
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);transition:.2s var(--ease-out)}
.reel-sound:hover{background:var(--yellow);color:#000;border-color:var(--yellow)}
.reel-sound[aria-pressed="true"]{background:var(--yellow);color:#000;border-color:var(--yellow)}
.reel-cap{margin:12px 2px 0;font-size:13px;line-height:1.5}
.reel-cap a{color:var(--grey);text-decoration:none}
.reel-cap a:hover{color:#fff}
.reel-cap i{font-style:normal;color:var(--sky)}
.reels-nav{display:flex;align-items:center;gap:14px;margin-top:6px}
.reels-nav button{width:42px;height:42px;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:15px;
  transition:.2s var(--ease-out)}
.reels-nav button:hover{background:var(--sky);color:#000;border-color:var(--sky)}
.reels-nav span{font-family:var(--font-d);font-size:12px;color:#7c7c85;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.reel-card{width:74vw}}

/* ---- reel showcase (homepage, full-bleed) -------------------------------
   The reel strip sits directly under the hero now, so it has to read as the
   page's main event rather than a widget inside a text column. Two changes do
   that: the cards grow with the viewport instead of sitting at a fixed 260px,
   and the track bleeds to the right edge of the window while its first card
   still lines up with the headline above it.

   The alignment is one expression — the wrap2 gutter plus whatever margin the
   1320px column is centred by — reused as padding and as scroll-padding so a
   snapped card lands on the same line rather than four pixels off it. Snapping
   is `proximity`, not `mandatory`: a wall you can flick through freely reads
   better than one that fights the flick. */
.dh2 .reel-showcase{overflow:hidden}
.dh2 .reel-showcase-track{--edge:max(40px,calc((100vw - 1320px) / 2 + 40px))}
.dh2 .reel-showcase-track .reels-track{
  gap:clamp(14px,1.5vw,22px);
  padding-left:var(--edge);padding-right:var(--edge);
  scroll-padding-left:var(--edge);
  scroll-snap-type:x proximity}
.dh2 .reel-showcase-track .reel-card{
  width:clamp(232px,23vw,318px);scroll-snap-align:start}
.dh2 .reel-showcase-track .reel-media{border-radius:clamp(18px,1.6vw,24px)}
.dh2 .reel-showcase-track .reel-cap{font-size:13.5px}
.dh2 .reel-showcase-track .reels-nav{padding-left:var(--edge);margin-top:10px}
@media(max-width:900px){
  .dh2 .reel-showcase-track{--edge:20px}
  .dh2 .reel-showcase-track .reel-card{width:min(74vw,300px)}
}

/* ---- service proof band -------------------------------------------------
   The `source` line under each figure is the point of the component: a number
   without a way to check it is decoration. */
.proof-card{padding:38px 40px;display:grid;gap:30px}
.proof-head .title{font-size:clamp(24px,2.6vw,34px);margin:10px 0 14px}
.proof-head>p{color:var(--grey);font-size:15px;line-height:1.75;max-width:66ch}
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0}
.proof-stats>div{border-left:2px solid rgba(255,208,40,.4);padding-left:18px}
.proof-stats dt{font-family:var(--font-d);font-size:38px;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums;margin-bottom:9px}
.proof-stats dd{margin:0;color:#e6e6ea;font-size:14px;line-height:1.5}
.proof-stats dd small{display:block;margin-top:6px;color:#7c7c85;font-size:12px;line-height:1.5}
.proof-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;
  border-top:1px solid var(--line);padding-top:22px}
.proof-links a{color:var(--sky);font-size:13.5px;text-decoration:none;padding:4px 0;
  font-family:var(--font-d)}
.proof-links a:hover{color:var(--yellow)}
.proof-links i{font-style:normal}
@media(max-width:900px){.proof-stats{grid-template-columns:1fr}.proof-card{padding:28px 24px}}

/* ---- rate table ---------------------------------------------------------
   Published platform figures, in the shape a reader compares them in. A real
   <table> rather than a grid of divs: the row header/value relationship is
   what a screen reader needs, and it is also what an AI answer engine lifts
   cleanly when it cites a pricing figure.

   The wrapping card carries overflow-x and min-width:0 — a grid or flex item
   defaults to min-width:auto, which resolves to max-content and beats any
   max-width, so without it a wide table pushes the page sideways. That is the
   same trap documented in AGENTS.md for the hero carousel. */
.rate-table{width:100%;border-collapse:collapse;min-width:540px}
.rate-table th,.rate-table td{padding:18px var(--pad-sm);text-align:left;
  border-bottom:1px solid var(--line-2);font-size:14.5px;line-height:1.5}
.rate-table thead th{font-family:var(--font-b);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#7c7c85;font-weight:600;
  border-bottom:1px solid var(--line);background:var(--black-2)}
.rate-table tbody th{font-family:var(--font-d);font-size:16px;color:var(--white);font-weight:400}
.rate-table tbody td{color:#c8c8ce}
.rate-table tbody strong{color:var(--yellow);font-weight:600;
  font-variant-numeric:tabular-nums}
.rate-table tbody tr:last-child th,.rate-table tbody tr:last-child td{border-bottom:0}

/* ---- tick / cross list --------------------------------------------------
   Marker is a pseudo-element, not a list-style image, so the colour follows
   the modifier class and the text still wraps to a hanging indent. */
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tick-list li{position:relative;padding-left:30px;color:#c8c8ce;font-size:14.5px;
  line-height:1.55}
.tick-list li::before{content:"✓";position:absolute;left:0;top:-1px;
  color:var(--yellow);font-size:15px;font-weight:700}
.tick-list-no li::before{content:"✕";color:var(--blue-soft)}

/* ---- running logo strip -------------------------------------------------
   Masked at both edges so logos fade out rather than being chopped by the
   card border. The track animates transform only — animating scroll position
   or margin would run layout on every frame. */
.brand-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brand-track{display:flex;align-items:center;gap:56px;width:max-content;list-style:none;
  padding:6px 28px;animation:brand-scroll 42s linear infinite;will-change:transform}
.brand-marquee:hover .brand-track{animation-play-state:paused}
.brand-mark{flex:0 0 auto;height:64px;width:176px;display:block;position:relative}
.brand-mark img{object-fit:contain;padding:4px 0;
  display:block;opacity:.72;filter:grayscale(1) saturate(0) brightness(1.25) contrast(.9);
  transition:filter .25s var(--ease-out),opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.brand-mark:hover img{opacity:1;filter:none;transform:translateY(-2px)}
/* -50% is exactly one copy of the list, so copy two arrives where copy one
   started and the seam is invisible. */
@keyframes brand-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- homepage local SEO check --- */
.home-seo-check{padding-top:0}.seo-check-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;padding:44px;align-items:center;overflow:hidden;position:relative;background:linear-gradient(125deg,rgba(255,208,40,.09),rgba(255,255,255,.03) 43%,rgba(255,255,255,.015))}
.seo-check-card::before{content:"";position:absolute;width:340px;aspect-ratio:1;border:1px dashed rgba(255,208,40,.18);border-radius:50%;right:-150px;top:-180px;pointer-events:none}.seo-check-copy{position:relative}.seo-check-copy .title{font-size:clamp(30px,3.4vw,46px);margin:10px 0 16px}.seo-check-copy>p{color:var(--grey);font-size:15px;line-height:1.75;max-width:500px}.seo-score{display:flex;align-items:baseline;gap:11px;margin:26px 0 8px}.seo-score b{font-family:var(--font-d);font-size:46px;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}.seo-score span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}.seo-result{margin-bottom:24px}.seo-check-list{position:relative;border:0;padding:0;margin:0;display:grid;gap:10px}.seo-check-list legend{font-family:var(--font-d);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:13px}.seo-check-list label{display:grid;grid-template-columns:20px minmax(0,1fr) 30px;gap:13px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;color:var(--grey);font-size:14px;line-height:1.55;cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out),color .2s var(--ease-out)}.seo-check-list label:hover{border-color:rgba(255,255,255,.3);color:#fff}.seo-check-list label.checked{border-color:rgba(61,220,132,.34);background:rgba(61,220,132,.07);color:#e7f9ed}.seo-check-list input{appearance:none;width:17px;height:17px;border:1px solid #778092;border-radius:5px;background:#101116;margin:0;display:grid;place-content:center}.seo-check-list input:checked{background:#3ddc84;border-color:#3ddc84}.seo-check-list input:checked::after{content:"✓";font-size:12px;font-weight:700;color:#07100a;line-height:1}.seo-check-list input:focus-visible{outline:2px solid var(--sky);outline-offset:3px}.seo-check-list i{font-style:normal;color:var(--yellow);font-family:var(--font-d);font-size:11px;text-align:center}.seo-check-list label.checked i{color:#3ddc84;font-size:16px}

/* ============================================================
   CAREERS
   ============================================================ */
.careers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.job{padding:38px;position:relative;overflow:hidden}
.job .badge{display:inline-block;font-family:var(--font-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border-radius:100px;margin-bottom:18px}
.job.hire .badge{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:var(--sky)}
.job.intern .badge{background:rgba(255,208,40,.12);border:1px solid rgba(255,208,40,.3);color:var(--yellow)}
.job h3{font-size:27px;margin-bottom:12px}
.job p{color:var(--grey);line-height:1.75;font-size:15px;margin-bottom:24px}
.job .roles{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.job .roles span{font-size:13px;color:#c9d1e3;border:1px solid var(--line);padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.03)}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
/* Spatial consistency: enters from the right, leaves to the right — same path.
   Springs in (settles), eases out (retreats) — mirrored, not identical. */
.drawer{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.88);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  transform:translateX(100%);transition:transform var(--r-sheet) cubic-bezier(.4,0,.9,.6);
  overflow-y:auto;padding:26px 24px 60px;will-change:transform;
}
.drawer.open{transform:none;transition:transform .45s var(--spring)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.drawer .x{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-size:20px;cursor:pointer}
.acc{border-bottom:1px solid var(--line)}
.acc > button{width:100%;background:none;border:0;color:#fff;font-family:var(--font-d);font-size:21px;font-weight:600;
  padding:19px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left}
.acc > button span{color:var(--sky);font-size:19px;transition:.3s}
.acc.on > button span{transform:rotate(45deg)}
/* grid-template-rows 0fr→1fr animates to the content's real height. The old
   max-height:760px was a guess that silently clipped the list once it grew,
   and animating max-height runs layout on every frame. */
.acc .panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--r-move) var(--spring)}
.acc.on .panel{grid-template-rows:1fr}
.acc .panel-in{overflow:hidden;min-height:0}
.acc .panel a{display:block;color:var(--grey);padding:13px 0 13px 14px;text-decoration:none;font-size:15px;border-left:1px solid var(--line)}
.acc .panel a:hover{color:var(--sky);border-left-color:var(--sky)}
.acc .panel h6{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin:16px 0 6px}
.drawer > a.dlink{display:block;color:#fff;font-family:var(--font-d);font-size:21px;font-weight:600;padding:19px 0;
  border-bottom:1px solid var(--line);text-decoration:none}
.drawer .d-cta{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.drawer .d-cta .btn{justify-content:center}
.drawer .d-meta{margin-top:34px;color:var(--grey);font-size:14px;line-height:2}
.drawer .d-meta a{color:var(--grey);text-decoration:none;display:block}

/* ============================================================
   CLIENT LOGO STRIP
   ============================================================ */
.logos{padding:56px 0;border-bottom:1px solid var(--line)}
.logos p{text-align:center;color:#69738c;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-family:var(--font-d);margin-bottom:32px}
.logo-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}

/* ============================================================
   VIDEO SHOWCASE
   ============================================================ */
.reel{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;
  display:grid;place-items:center}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.62),rgba(0,0,0,.35))}
.play{
  position:relative;z-index:3;width:96px;height:96px;border-radius:50%;border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.09);backdrop-filter:blur(10px);color:#fff;font-size:26px;cursor:pointer;
  display:grid;place-items:center;transition:.3s;
}
.play:hover{background:var(--sky);color:#000;transform:scale(1.07)}
.play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.24);animation:ping 2.4s ease-out infinite}
.reel .sound{position:absolute;z-index:3;right:22px;bottom:22px;display:flex;align-items:center;gap:9px;
  color:#fff;font-family:var(--font-d);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(0,0,0,.62);border:1px solid var(--line);padding:9px 16px;border-radius:100px;cursor:pointer}
.reel .cap{position:absolute;z-index:3;left:26px;top:26px;max-width:340px}
.reel .cap h3{font-size:26px;margin-bottom:8px}
.reel .cap p{color:#c9d1e3;font-size:14px;line-height:1.6}

/* ============================================================
   LOCATIONS
   ============================================================ */
.locs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.loc{padding:26px;display:flex;flex-direction:column;gap:8px}
.loc .flag{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.loc h4{font-size:20px}
.loc small{color:var(--grey);font-size:13px;line-height:1.6}
.loc a{color:var(--yellow);font-size:13px;text-decoration:none;margin-top:6px;font-family:var(--font-d)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:12px}

/* Left column extras. The FAQ predates the .dh2 token set and renders in the
   legacy shell (.wrap/.title/.lead), so these are written against --line and
   --grey rather than the newer ramp. */
.faq-extra{margin-top:38px;display:flex;flex-direction:column;gap:22px}
.faq-next h3{font-family:var(--font-d);font-size:15px;font-weight:600;color:#fff;
  margin-bottom:14px}
.faq-next .checks2{gap:10px}
.faq-next .checks2 li{font-size:14px;line-height:1.55}

/* One quiet second action that is not another contact form: the contact
   section directly below already carries the phone, email, address and form. */
.faq-tools{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out),
             transform .25s var(--ease-out)}
.faq-tools b{font-family:var(--font-d);font-size:15px;font-weight:600;color:#fff;
  white-space:nowrap}
.faq-tools span{font-size:13px;line-height:1.45;color:var(--grey);flex:1}
.faq-tools i{font-style:normal;color:var(--yellow);transition:transform .25s var(--ease-out)}
.faq-tools:hover{border-color:rgba(255,212,41,.45);background:rgba(255,212,41,.04);
  transform:translateY(-2px)}
.faq-tools:hover i{transform:translateX(4px)}
.faq-tools:active{transform:scale(.99)}
.fq{padding:0;overflow:hidden}
.fq button{width:100%;background:none;border:0;color:#fff;font-family:var(--font-d);font-size:18px;font-weight:600;
  padding:24px 28px;display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;text-align:left}
.fq button i{font-style:normal;color:var(--sky);font-size:20px;transition:.3s;flex:0 0 auto}
.fq.on button i{transform:rotate(45deg);color:var(--yellow)}
.fq .a{max-height:0;overflow:hidden;transition:.4s cubic-bezier(.2,.7,.3,1)}
.fq.on .a{max-height:300px}
.fq .a p{color:var(--grey);line-height:1.75;font-size:15px;padding:0 28px 26px}

/* ============================================================
   MODAL (Let's Talk enquiry)
   ============================================================ */
/* Modal = a focused task, so it gets a dimming scrim and pushes the page back.
   The surface *materialises* (blur + scale together) rather than plain-fading,
   so it reads as real glass arriving. */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(0px);opacity:0;visibility:hidden;
  transition:opacity var(--r-sheet) var(--spring),backdrop-filter var(--r-sheet) var(--spring),visibility 0s .35s}
.modal.open{opacity:1;visibility:visible;backdrop-filter:blur(14px);transition-delay:0s}
.modal-box{
  width:min(980px,100%);max-height:92vh;overflow-y:auto;border-radius:26px;border:1px solid var(--line);
  background:rgba(10,10,10,.86);backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 40px 120px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  display:grid;grid-template-columns:.85fr 1.15fr;
  transform:translateY(20px) scale(.97);opacity:.6;
  transition:transform var(--r-move) var(--spring),opacity var(--r-sheet) var(--spring);
  position:relative;will-change:transform;
}
.modal.open .modal-box{transform:none;opacity:1}
/* Page pushes back behind the modal — depth, not just an overlay.
   Scale + dim is cheaper than blurring a whole document. */
main,footer{transition:transform var(--r-move) var(--spring),filter var(--r-move) var(--spring)}
body.lock main,body.lock footer{transform:scale(.988);filter:brightness(.62)}
.modal-box .x{position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:17px;cursor:pointer}
.m-side{position:relative;min-height:100%;padding:40px 34px;display:flex;flex-direction:column;justify-content:flex-end;
  border-right:1px solid var(--line)}
.m-side-media{position:absolute;inset:0;overflow:hidden;border-radius:26px 0 0 26px}
.m-side-media img{object-fit:cover;object-position:center 36%}
.m-side::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(0,0,0,.96) 2%,rgba(0,0,0,.68) 48%,rgba(0,0,0,.12) 100%)}
.m-side .txt{position:relative;z-index:2}
.m-side h3{font-size:28px;margin-bottom:12px}
.m-side p{color:#c9d1e3;font-size:14px;line-height:1.7}
.m-side ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.m-side li{color:#dfe5f2;font-size:14px;display:flex;gap:10px}
.m-side li::before{content:"✓";color:var(--sky);font-weight:700}
.m-form{padding:44px 38px}
.m-form h3{font-size:26px;margin-bottom:8px}
.m-form > p{color:var(--grey);font-size:14px;margin-bottom:26px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields .full{grid-column:1/-1}
.fields>label{display:block;color:#dfe5f2;font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.04em}
.fields>label>span{color:#7b8493;font-family:var(--font-b);font-size:11px;font-weight:400;margin-left:5px}
.fields input,.fields select,.fields textarea{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:#fff;font-family:var(--font-b);font-size:14px;outline:none;transition:.25s;
}
.fields>label input,.fields>label select,.fields>label textarea{margin-top:7px}
.fields textarea{resize:vertical;min-height:96px}
.fields select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f2f2f4' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.fields select option{background:var(--black-2)}
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
/* ---- form motion --------------------------------------------------------
   Why: the form is the conversion point of the page and every field looked
   identical whether or not it had the caret. Focus now moves the field
   forward and lights its label, so the eye tracks where it is. Transform and
   box-shadow only. */
.fields>label{transition:color .2s var(--ease-out)}
.fields>label:focus-within{color:var(--yellow)}
.fields input,.fields select,.fields textarea{
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),
             transform .25s var(--ease-out),background .25s var(--ease-out)}
.fields input:hover,.fields select:hover,.fields textarea:hover{
  border-color:rgba(255,255,255,.22)}
.fields input:focus,.fields select:focus,.fields textarea:focus{
  border-color:rgba(255,212,41,.55);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,212,41,.14),0 8px 24px -14px rgba(255,212,41,.5);
  transform:translateY(-1px)}
/* The submit button is the last thing the eye lands on. */
.lead-card .btn:hover{transform:translateY(-2px);
  box-shadow:0 14px 34px -14px rgba(255,212,41,.6)}
.lead-card .btn:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .fields input,.fields select,.fields textarea,
  .lead-card .btn{transition:none}
  .fields input:focus,.fields select:focus,.fields textarea:focus,
  .lead-card .btn:hover{transform:none}
}

.fields input::placeholder,.fields textarea::placeholder{color:#5d677f}
.fields .err{border-color:#ff6b6b!important}

/* ---- AI generator tools --------------------------------------------------
   The fifty generator pages restored from production. They reuse the .fields
   input treatment so a generator looks like the rest of the site's forms
   rather than a bolt-on. */
.aigen h2{font-family:var(--font-d);font-weight:500;font-size:20px;margin:0 0 20px}
.aigen-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.aigen-fields>label{display:block;color:#dfe5f2;font-family:var(--font-d);font-size:12px;
  font-weight:600;letter-spacing:.04em;transition:color .2s var(--ease-out)}
.aigen-fields>label:focus-within{color:var(--yellow)}
.aigen-fields>label>span{display:block;color:#7b8493;font-family:var(--font-b);
  font-size:11px;font-weight:400;margin-top:3px}
.aigen-fields>label.full{grid-column:1/-1}
.aigen-fields input{width:100%;margin-top:7px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;
  font-family:var(--font-b);font-size:14px;outline:none;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),
             background .25s var(--ease-out),transform .25s var(--ease-out)}
.aigen-fields input:hover{border-color:rgba(255,255,255,.22)}
.aigen-fields input:focus{border-color:rgba(255,212,41,.55);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,212,41,.14);transform:translateY(-1px)}

.aigen-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.aigen-quota{font-size:12.5px;color:var(--grey)}

.aigen-out{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.aigen-out pre{white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-b);
  font-size:14.5px;line-height:1.7;color:var(--sky);background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:14px;padding:20px;margin:0 0 14px}

/* The key panel is deliberately quiet: it is an option, not the main path. */
.aigen-key{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.aigen-key summary{cursor:pointer;font-size:13.5px;color:var(--sky);
  font-family:var(--font-d);font-weight:600}
.aigen-key summary:hover{color:var(--yellow)}
.aigen-key>p{font-size:13px;line-height:1.65;color:var(--grey);margin:12px 0 14px;
  max-width:62ch}
.aigen-key .fine{font-size:12px;color:#69738c;margin-top:12px}
.aigen-keyrow{display:flex;gap:8px;flex-wrap:wrap}
.aigen-keyrow input{flex:1;min-width:210px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;
  font-family:var(--font-b);font-size:13.5px;outline:none}
.aigen-keyrow input:focus{border-color:rgba(255,212,41,.55)}

@media (max-width:640px){
  .aigen-fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .aigen-fields input{transition:none}
  .aigen-fields input:focus{transform:none}
}
.m-form .fine{color:#69738c;font-size:12px;margin-top:16px;line-height:1.6}
.m-form .fine a{color:var(--sky)}
.m-form .btn{margin-top:18px;width:100%;justify-content:center}
.thanks{display:none;text-align:center;padding:60px 20px}
.thanks.on{display:block;animation:fade .5s}
.thanks .tick{width:74px;height:74px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  font-size:32px;color:#000;background:linear-gradient(135deg,var(--sky),var(--yellow))}
.thanks h3{font-size:26px;margin-bottom:10px}
.thanks p{color:var(--grey);font-size:15px;line-height:1.7}
body.lock{overflow:hidden}

/* Content is visible in the server-rendered HTML. Earlier versions hid every
   .rv block until IntersectionObserver fired, which produced blank pillar
   pages in full-page captures, slow hydration and some browser sessions. */
.rv,.rv.in{opacity:1;transform:none}

/* ============================================================
   ACCESSIBILITY — three independent signals, each handled properly
   ============================================================ */

/* Reduced motion is not "no feedback" — it's a gentler, non-vestibular
   equivalent. Slides and springs become short cross-fades; opacity and
   colour changes that aid comprehension are kept. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.16s!important;
  }
  .hero .aurora,.core,.fcard,.ring,.cue .m::after,.pill .live::after,.play::before{animation:none!important}
  .modal-box,.drawer{transform:none!important}
  /* A continuously moving strip is exactly what this preference is for. */
  .brand-track{animation:none!important;flex-wrap:wrap;justify-content:center;width:auto}
  .brand-marquee{-webkit-mask-image:none;mask-image:none}
  .btn:hover,.card:hover,.checks li:hover{transform:none!important}
}

/* Reduced transparency: make the glass frosty and solid, drop the blur. */
@media(prefers-reduced-transparency:reduce){
  header.stuck,.mega,.modal-box,.drawer,.fcard,.card,.reel .sound{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:#0d0d0d!important;
  }
  .modal{backdrop-filter:none!important;background:rgba(0,0,0,.94)!important}
  body.lock main,body.lock footer{filter:none;transform:none}
}

/* High contrast: near-solid surfaces with defined borders, brighter text. */
@media(prefers-contrast:more){
  :root{--grey:#c4c4c8;--line:rgba(255,255,255,.32);--line-2:rgba(255,255,255,.22)}
  .card,.mega,.modal-box,.fcard,.checks li{background:#0d0d0d;border-color:rgba(255,255,255,.36)}
  .btn-o{border-color:rgba(255,255,255,.5)}
  .seo-note p{color:#a0a0a6}
  .blur,.hero .aurora{display:none}
}
.top{position:fixed;right:24px;bottom:24px;z-index:90;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);background:rgba(10,10,10,.75);backdrop-filter:blur(12px);color:var(--sky);
  font-size:17px;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s}
.top.on{opacity:1;visibility:visible;transform:none}
.top:hover{background:var(--sky);color:#000}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hero-grid,.svc-wrap,.case.on,.news{grid-template-columns:1fr}
  .hero-visual{max-width:420px;margin:20px auto 0}
  .fcard.f1{left:0}.fcard.f2{right:0}
  .svc-sticky{position:static}
  .band-grid{grid-template-columns:1fr 1fr;gap:34px}
  .process,.team,.quotes,.blogs{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .locs{grid-template-columns:1fr 1fr}
  .welcome,.why{grid-template-columns:1fr;gap:40px}
  .seo-check-card{grid-template-columns:1fr;gap:30px}
  .welcome .shot,.why .shot{aspect-ratio:16/10;order:-1}
  .scale{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr;gap:36px}
  /* The column is no longer short once stacked, and on a phone this would
     only push the questions further down the page. */
  .faq-extra{display:none}
  .modal-box{grid-template-columns:1fr}
  .m-side{min-height:190px;border-right:0;border-bottom:1px solid var(--line);padding:26px}
  .m-side-media{border-radius:26px 26px 0 0}
  .m-side ul{display:none}
}
@media(max-width:640px){
  .process,.team,.quotes,.blogs,.band-grid,.f-grid{grid-template-columns:1fr}
  .hero-btns .note{display:none}
  .trust{gap:14px}
  .fcard{padding:11px 14px}.fcard b{font-size:18px}
  .hero-foot .cue{display:none}
  .brand-proof{padding-top:24px}.brand-proof-inner{padding:20px 8px}
  .brand-track{gap:34px;padding:6px 14px;animation-duration:30s}
  .brand-mark{height:50px;width:128px}
  .case-txt,.news,.m-form{padding:28px}
  .case-nums{gap:26px}
  .logo-row{grid-template-columns:repeat(2,1fr)}
  .locs{grid-template-columns:1fr}
  .scale,.careers{grid-template-columns:1fr}
  .job{padding:28px}
  .fields{grid-template-columns:1fr}
  .reel{aspect-ratio:4/3}
  .reel .cap{position:static;padding:0 0 20px;max-width:none;text-align:center}
  .play{width:74px;height:74px;font-size:21px}
}

/* ============================================================
   MULTI-PAGE COMPONENTS
   Added when the single-page build became a full site.
   Everything below reuses the tokens declared in :root.
   ============================================================ */

/* --- nav active state + WhatsApp button --- */
.menu > li > a.here{color:#fff;background:rgba(255,255,255,.08)}
.btn-wa{font-size:14px;padding:12px 20px}
@media(max-width:1180px){.btn-wa{display:none}}

/* two-column mega menu (six services + studio links) */
.mega-2{width:min(760px,92vw);grid-template-columns:1.15fr .85fr}
.mega-side{border-left:1px solid var(--line);padding-left:24px}

/* --- page hero (every page except home) --- */
.phero{padding:clamp(104px,12vw,132px) 0 50px;position:relative}
.phero h1{font-size:clamp(38px,5.4vw,68px);margin-bottom:20px}
.phero h1 em{font-style:normal;background:linear-gradient(100deg,var(--sky-2),var(--sky) 42%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.crumb{font-size:13px;color:#5a5a60;margin-bottom:26px;font-family:var(--font-d);letter-spacing:.04em}
.crumb a{color:#8a8a8f;text-decoration:none}
.crumb a:hover{color:var(--sky)}
.crumb span{margin:0 8px;opacity:.5}

/* --- homepage: "your situation" cards --- */
.situations{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sit{padding:34px}
.sit h3{font-size:22px;margin-bottom:14px;color:#fff}
.sit p{color:var(--grey);line-height:1.7;font-size:15px;margin-bottom:20px}
.sit .more{color:var(--sky);text-decoration:none;font-family:var(--font-d);font-weight:600;font-size:14px}
.sit:hover .more{color:var(--yellow)}

/* --- service cards grid --- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{padding:32px;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.svc-card .kicker{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:16px;display:block}
.svc-card h3{font-size:23px;margin-bottom:12px}
.svc-card p{color:var(--grey);line-height:1.7;font-size:15px;margin-bottom:22px;flex:1}
.svc-card .more{color:var(--yellow);font-family:var(--font-d);font-weight:600;font-size:14px}
.svc-card .more i{font-style:normal;display:inline-block;transition:transform var(--r-move) var(--spring)}
.svc-card:hover .more i{transform:translateX(4px)}

/* --- work grid --- */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.work{padding:0;text-decoration:none;color:inherit;display:flex;flex-direction:column;position:relative;overflow:hidden}
.work-media{position:relative;display:block;aspect-ratio:9/16;border-bottom:1px solid var(--line);overflow:hidden}
.work-media img{object-fit:cover}
.work-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:30px;text-align:center;background:
  radial-gradient(circle at 50% 36%,rgba(255,255,255,.17),transparent 30%),
  linear-gradient(155deg,#111,rgba(255,255,255,.04) 60%,rgba(255,208,40,.14))}
.work-fallback::before,.work-fallback::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.work-fallback::before{width:72%;aspect-ratio:1}
.work-fallback::after{width:52%;aspect-ratio:1;border-style:dashed;border-color:rgba(255,208,40,.24)}
.work-fallback > img{position:relative!important;width:38%!important;height:auto!important;object-fit:contain!important;
  z-index:1;filter:drop-shadow(0 0 24px rgba(255,255,255,.18))}
.work-fallback > span{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;
  color:#fff;font-family:var(--font-d);font-size:18px;font-weight:600;line-height:1.3}
.work-fallback small{color:var(--yellow);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.work-body{padding:24px;display:flex;flex:1;flex-direction:column}
.work .idx{position:absolute;z-index:3;top:14px;right:14px;font-family:var(--font-d);font-size:11px;color:#fff;
  background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.22);padding:6px 9px;border-radius:100px}
.work strong{font-family:var(--font-d);font-size:30px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(120deg,#fff,var(--sky));-webkit-background-clip:text;background-clip:text;
  color:transparent;display:block;margin-bottom:12px}
.work h4{font-size:17px;margin-bottom:4px}
/* The client is the card's headline now, so the sector drops to a qualifier
   under it rather than competing with the name for the same weight. */
.work-sector{display:block;font-family:var(--font-d);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
.work p{color:var(--grey);font-size:14px;line-height:1.65;margin-bottom:20px;flex:1}
.work .foot{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:16px}
.work .foot em{font-style:normal;color:var(--yellow);font-size:12px;font-family:var(--font-d);letter-spacing:.06em}
.work .foot .more{color:var(--sky);font-size:13px;font-family:var(--font-d)}

/* Case-study cover still. Replaces a four-up grid that was three logo tiles
   wide; one image at full column width shows more of the work than four
   quarter-width boxes did. */
.case-hero-still{margin:0;border-radius:clamp(18px,1.8vw,26px);overflow:hidden;
  border:1px solid var(--line);background:#0b0b0d;line-height:0}
.case-hero-still img{width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover}

/* --- big pull quote --- */
.quote-band{padding-top:0}
.bigquote{padding:52px;text-align:center;position:relative}
.bigquote .q{font-family:var(--font-d);font-size:64px;color:var(--sky);line-height:.4;display:block;margin-bottom:26px}
.bigquote p{font-family:var(--font-d);font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-.02em;margin-bottom:20px}
.bigquote p b{color:var(--yellow);font-weight:600}
.bigquote small{color:var(--grey);font-size:14px;line-height:1.75;max-width:620px;display:block;margin:0 auto}

/* --- reel / vertical-still grid --- */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Scoped to `.reels`. Unscoped, this rule matched the slider's cards too and,
   being later in the file, beat them: aspect-ratio:9/16 forced every slider
   card to exactly the height of its video and overflow:hidden then clipped the
   caption underneath it, so the strip rendered captionless everywhere. */
.reels .reel-card{aspect-ratio:9/16;border-radius:18px;border:1px solid var(--line);position:relative;
  display:block;text-decoration:none;overflow:hidden;transition:transform var(--r-move) var(--spring)}
.reels .reel-card:hover{transform:translateY(-6px)}
.case-still{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.14),transparent 28%),linear-gradient(145deg,#101012,rgba(255,255,255,.025) 68%,rgba(255,208,40,.12))}.case-still .case-cover{object-fit:cover}.case-still .case-brand{width:34%;height:auto;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,255,255,.2))}.case-still>span{position:absolute;left:15px;right:15px;bottom:16px;text-align:center;color:#d9d9df;font-family:var(--font-d);font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.reels .reel-card .rl{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;font-family:var(--font-d);
  font-size:13px;background:rgba(0,0,0,.6);border:1px solid var(--line);padding:7px 14px;border-radius:100px}

/* --- process steps (with a "when" label) --- */
.process .step .when{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-bottom:16px}
.process{grid-template-columns:repeat(4,1fr)}

/* --- team card copy --- */
.member .info p{color:var(--grey);font-size:14px;line-height:1.7;margin:10px 0 14px}
.member .info p a{color:var(--sky);text-decoration:none}
/* A real portrait, so none of the placeholder ornament applies — no gradient
   behind it, no ring, no role letter. `fill` needs the positioned parent, and
   object-position sits slightly high because the face is in the upper third. */
.member .founder-photo{position:relative;padding:0;overflow:hidden;background:#0b0b0d}
.member .founder-photo img{object-fit:cover;object-position:center 28%}
.member .founder-photo.manasvi img{object-position:center 18%}

.member .founder-visual{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 31%),
  linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 62%,rgba(255,208,40,.12))}
.member .founder-visual::before,.member .founder-visual::after{content:"";position:absolute;border-radius:50%;z-index:0}
.member .founder-visual::before{width:64%;aspect-ratio:1;border:1px solid rgba(255,255,255,.15)}
.member .founder-visual::after{width:48%;aspect-ratio:1;border:1px dashed rgba(255,208,40,.26)}
.member .founder-visual img{position:relative;z-index:1;width:31%;height:auto;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,255,255,.22))}
.member .founder-visual span{position:absolute;left:18px;bottom:16px;padding:6px 11px;border-radius:100px;
  z-index:1;background:rgba(0,0,0,.62);border:1px solid var(--line);color:var(--yellow);
  font-family:var(--font-d);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* --- figure caption on the founder shot --- */
figure.shot{margin:0;position:relative}
figure.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 22px;
  font-size:13px;color:#c9c9cf;font-style:italic;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}

/* --- service detail: problem + metric --- */
.problem-row{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.problem{padding:40px}
.problem h2{font-size:clamp(24px,3vw,34px);margin:8px 0 18px}
.problem p{color:var(--grey);line-height:1.75}
.metric-note{padding:40px;background:linear-gradient(160deg,rgba(255,208,40,.07),rgba(255,255,255,.012))}
.metric-note p{color:#e4e4e8;line-height:1.75;font-size:16px}

/* --- case study detail --- */
.case-detail{display:grid;grid-template-columns:1.6fr .9fr;gap:22px;align-items:start}
.cd-main{padding:46px}
.cd-main h2{font-size:30px;margin:8px 0 18px}
.cd-main p{color:var(--grey);line-height:1.8;margin-bottom:16px}
.cd-main .nda{color:#5a5a60;font-size:13px;border-top:1px solid var(--line);padding-top:20px;margin-top:28px}
.cd-side{padding:34px;position:sticky;top:120px}
.cd-side dl{margin-bottom:26px}
.cd-side dt{font-family:var(--font-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);margin-bottom:6px}
.cd-side dd{margin-bottom:18px;font-size:15px;color:#e4e4e8}
.btn.full{width:100%;justify-content:center}

/* --- long-form prose (blog posts, legal) --- */
.prose{max-width:760px}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{color:#b8b8bf;line-height:1.85;font-size:17px;margin-bottom:18px}
.prose a{color:var(--sky)}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0 22px}
.prose .byline{color:#5a5a60;font-size:14px}
.post .excerpt{color:var(--grey);font-size:14px;line-height:1.7;margin-bottom:14px}

/* --- contact --- */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
.contact-form{padding:44px}
.contact-form h2{font-size:30px;margin-bottom:10px}
.contact-side{display:grid;gap:16px}
.cinfo{padding:28px}
.cinfo h5{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:10px}
.cinfo p{color:#e4e4e8;font-size:15px;line-height:1.7}
.cinfo a{color:#e4e4e8;text-decoration:none}
.cinfo a:hover{color:var(--sky)}

/* --- CTA band extras --- */
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-fine{color:#5a5a60;font-size:14px;margin-top:26px}
.cta-fine a{color:var(--sky)}

/* --- floating WhatsApp button --- */
.wa-float{position:fixed;left:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;border-radius:100px;text-decoration:none;font-family:var(--font-d);font-weight:600;
  font-size:14px;color:#000;background:var(--yellow);box-shadow:0 14px 40px rgba(255,208,40,.25);
  transition:transform var(--r-move) var(--spring),box-shadow var(--r-move) var(--spring)}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(255,208,40,.35)}
.wa-float::before{content:"";width:9px;height:9px;border-radius:50%;background:#000;opacity:.8}

/* --- responsive --- */
@media(max-width:1024px){
  .situations,.svc-grid,.work-grid,.reels,.problem-row,
  .case-detail,.contact-grid,.process{grid-template-columns:1fr 1fr}
  .mega-2{grid-template-columns:1fr}
  .mega-side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px}
  .cd-side{position:static}
  .phero{padding-top:96px}
}
@media(max-width:640px){
  .situations,.svc-grid,.work-grid,.problem-row,.case-detail,
  .contact-grid,.process{grid-template-columns:1fr}
  .reels{grid-template-columns:1fr 1fr}
  .cd-main,.contact-form,.bigquote,.problem,.metric-note{padding:28px}
  .wa-float{left:16px;bottom:16px;padding:12px 16px;font-size:13px}
  .wa-float span{display:none}
  .wa-float::before{width:11px;height:11px}
  .top{right:16px;bottom:16px}
  #work .work-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,320px);
    gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;padding:2px 2px 16px;-webkit-overflow-scrolling:touch}
  #work .work{scroll-snap-align:start;scroll-snap-stop:always}
  .slider-controls{gap:12px}
  .slide-toggle{padding:6px 9px}
}

.shot-wide{border-radius:24px;aspect-ratio:1296/594;border:1px solid var(--line);overflow:hidden}

/* --- homepage Academy band --- */
.academy{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:48px;align-items:center}
.ac-copy h2{font-size:clamp(30px,3.6vw,44px);margin:4px 0 16px}
.ac-copy h2 em{font-style:normal;background:linear-gradient(100deg,var(--sky-2),var(--sky) 42%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ac-copy > p{color:var(--grey);line-height:1.8;margin-bottom:28px}
.ac-stats{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:30px;
  padding-top:24px;border-top:1px solid var(--line)}
.ac-stats b{font-family:var(--font-d);font-size:26px;display:block;line-height:1;
  background:linear-gradient(120deg,#fff,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-stats small{color:var(--grey);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  display:block;margin-top:8px}

.ac-shots{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.ac-shot{border-radius:18px;border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;
  transition:transform var(--r-move) var(--spring)}
.ac-shot:hover{transform:translateY(-4px)}
.ac-shot.tall{grid-row:span 2;aspect-ratio:360/540}
.ac-shot.wide{grid-column:2;aspect-ratio:851/315}

@media(max-width:1024px){
  .academy{grid-template-columns:1fr;gap:34px;padding:34px}
}
@media(max-width:640px){
  .academy{padding:26px}
  .ac-shots{grid-template-columns:1fr 1fr}
  .ac-shot.tall{grid-row:span 1;aspect-ratio:1/1}
  .ac-shot.wide{grid-column:span 2}
  .ac-stats{gap:22px}
  .ac-stats b{font-size:22px}
}

/* ============================================================
   DECORATIVE GRAPHICS
   Inline SVG ornaments — sparkles, outlined geometry, dotted grids,
   arcs. Drawn from scratch in our palette; no third-party asset is
   copied. All are pointer-events:none and aria-hidden, so they never
   intercept a click or reach a screen reader.
   ============================================================ */
.deco{position:absolute;z-index:1;pointer-events:none;display:block;line-height:0;
  color:rgba(255,255,255,.16)}
.deco svg{width:100%;height:100%;display:block}
.deco.y{color:rgba(255,208,40,.42)}
.deco.faint{color:rgba(255,255,255,.08)}

/* sizes */
.deco-plus,.deco-cross{width:46px;height:46px}
.deco-tri{width:74px;height:64px}
.deco-arc{width:120px;height:62px}
.deco-ring{width:190px;height:190px}
.deco-dots{width:96px;height:96px}
.deco-wave{width:150px;height:44px}
.deco-burst{width:96px;height:96px}

/* the four-point sparkle — the signature mark of this style */
.spark{width:20px;height:20px;color:var(--yellow);opacity:.9}
.spark.sm{width:13px;height:13px}
.spark.lg{width:32px;height:32px}
.spark.w{color:rgba(255,255,255,.5)}

/* motion: slow, low-amplitude, well clear of the vestibular band */
@keyframes deco-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(6deg)}}
@keyframes deco-spin{to{transform:rotate(360deg)}}
@keyframes deco-twinkle{0%,100%{opacity:.25;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.deco.drift{animation:deco-drift 17s ease-in-out infinite}
.deco.spin{animation:deco-spin 46s linear infinite}
.spark.twinkle{animation:deco-twinkle 4.5s ease-in-out infinite}
.spark.twinkle.t2{animation-delay:1.4s}
.spark.twinkle.t3{animation-delay:2.7s}

/* sections need a positioning context and must clip their own ornaments */
section{overflow:clip}

@media(prefers-reduced-motion:reduce){
  .deco,.spark{animation:none!important}
}
/* ornaments are decoration — drop them where space is tight */
@media(max-width:900px){
  .deco{display:none}
  .spark{display:none}
}

/* ============================================================
   YOUTUBE SHORTS — facade embeds
   Thumbnail first, iframe only on click. A cold YouTube player costs
   roughly 1.5MB and a few hundred ms of main-thread work each; four
   of them eagerly loaded would dominate the page's budget. This costs
   four images until someone actually presses play.
   ============================================================ */
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.short{
  position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:var(--black-2);padding:0;display:block;width:100%;
  transition:transform var(--r-move) var(--spring),border-color var(--r-move) var(--spring);
}
.short:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.32)}
.short img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--spring),opacity .3s var(--ease-out)}
.short:hover img{transform:scale(1.05)}
.short::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 45%)}
.short .play-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,208,40,.94);color:#000;font-size:17px;padding-left:3px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform var(--r-move) var(--spring)}
.short:hover .play-dot{transform:translate(-50%,-50%) scale(1.12)}
.short .short-label{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;text-align:left;
  color:#fff;font-family:var(--font-b);font-size:13px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.short iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.short.playing .play-dot,.short.playing .short-label,.short.playing::after{display:none}

/* The card is now a wrapper, so the clickable face is its own button and the
   "open on Instagram" link sits outside it — a button cannot legally contain
   an anchor, and screen readers need the link reachable on its own. */
.short-face{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:pointer;display:block;z-index:2}
/* Fallback face while a real poster frame is missing: a quiet brand gradient
   rather than a grey box or, worse, a stock image pretending to be the reel. */
.short-glyph{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.34);z-index:1}
.short-glyph.hidden{display:none}
.short:has(.short-glyph:not(.hidden)){
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,208,40,.12),transparent 60%),var(--black-2)}
.short-out{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:10px 14px;text-align:center;text-decoration:none;
  font-family:var(--font-d);font-size:11.5px;letter-spacing:.04em;
  color:#cfd6e6;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  transition:color .2s var(--ease-out)}
.short-out:hover{color:var(--yellow)}
.short-out i{font-style:normal}
.short.playing .short-out{background:rgba(0,0,0,.75)}
.short .short-label{bottom:38px}

.shorts-empty{padding:34px;text-align:center}
.shorts-empty p{color:var(--grey);line-height:1.7;margin-bottom:18px}
.shorts-empty b{color:#fff}
.shorts-empty code{font-family:ui-monospace,Menlo,monospace;font-size:13px;
  background:rgba(255,255,255,.07);padding:2px 7px;border-radius:6px;color:var(--yellow)}

.head-btns{display:flex;gap:10px;flex-wrap:wrap}

/* --- wide team banner --- */
.team-banner{margin:0 0 22px;position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--line)}
.team-banner img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.team-banner figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;
  font-family:var(--font-d);font-size:14px;letter-spacing:.04em;color:#e4e4e8;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}

.reels-3{grid-template-columns:repeat(4,1fr)}

@media(max-width:1024px){.shorts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .shorts{grid-template-columns:repeat(2,1fr);gap:12px}
  .short .short-label{font-size:12px}
  .team-banner img{aspect-ratio:4/3}
  .team-banner figcaption{padding:18px 20px;font-size:13px}
}

/* view count badge — the proof, not decoration */
.short-views{position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--font-d);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  color:#000;background:var(--yellow);padding:5px 10px;border-radius:100px}


/* logo sizing per context */
header.stuck .logo-img{width:138px}
.drawer-top .logo-img{width:158px}
.f-about .logo-img{width:200px;margin-bottom:6px}
@media(max-width:640px){
  .logo-img{width:126px}
  header.stuck .logo-img{width:114px}
  .f-about .logo-img{width:170px}
}
/* These live here, after the 640px block, because they are the same specificity
   and would otherwise lose to it on source order — the nav sizing set earlier in
   the file had no effect at all until it moved down here. */
@media(max-width:520px){
  header .logo-img{width:118px}
  header.stuck .logo-img{width:110px}
}
@media(max-width:380px){
  header .logo-img{width:104px}
  header.stuck .logo-img{width:100px}
}
/* logo-white.png is white artwork on real transparency, so it needs no blend
   mode and composites correctly over any background.
   img/logo-black.png is the same mark in black for light surfaces — it shipped
   with the theme but nothing ever referenced it, so the white wordmark stayed
   white in light mode and disappeared into the header and the footer plate.
   `content:` swaps the painted image without a second <img>, so the alt text,
   the intrinsic size and next/image's srcset are all untouched. A filter would
   have been fewer bytes and would also have inverted the accent on the "i". */
html[data-theme="light"] .logo-img{content:url("/img/logo-black.webp")}


/* ============================================================
   BRAND NAME IN RUNNING TEXT
   Wherever "Digihandler" appears as a word rather than as the logo,
   it is set in the brand face so the identity stays consistent.
   Wrap it in <b class="brand"> to apply.
   ============================================================ */
.brand{font-family:var(--font-logo);font-optical-sizing:auto;font-weight:600;
  letter-spacing:.02em;font-style:normal}
/* the yellow half of the name, matching the logo's emphasis */
.brand em{font-style:normal;color:var(--yellow)}

/* the Academy band heading uses the brand face too */
.ac-copy h2{font-family:var(--font-logo);font-weight:600;letter-spacing:.01em}

/* ============================================================
   PLATFORM BUTTONS
   Each outbound link wears its platform's own colour, so a visitor can tell
   at a glance that it leaves the site — and where to. All open in a new tab
   with rel="noopener".
   ============================================================ */

/* --- WhatsApp: official brand green #25D366 --- */
.btn-wa{background:#25D366;color:#04210f;border-color:transparent;font-weight:600}
.btn-wa:hover{background:#1FBF5B;color:#04210f;transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(37,211,102,.32)}
.btn-wa .wa-ico{display:none}   /* colour only — an icon here changes button width */
:root{
  --wa-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2A9.9 9.9 0 0 0 2.13 11.9c0 1.75.46 3.45 1.32 4.95L2 22l5.3-1.39a9.86 9.86 0 0 0 4.74 1.21h.01a9.9 9.9 0 0 0 9.9-9.9A9.9 9.9 0 0 0 12.04 2Zm5.8 14.05c-.24.68-1.4 1.3-1.95 1.35-.5.05-1.13.07-1.82-.11-.42-.11-.96-.29-1.65-.59-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.19-1.58-1.19-3.02 0-1.43.75-2.14 1.02-2.43.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.07.66.5.24.58.83 2.01.9 2.16.07.14.12.31.02.5-.1.19-.15.31-.29.48-.15.17-.31.38-.44.51-.15.14-.3.3-.13.59.17.29.76 1.25 1.63 2.02 1.12.99 2.06 1.3 2.35 1.45.29.14.46.12.63-.07.17-.19.73-.85.92-1.14.19-.29.39-.24.65-.14.27.09 1.69.8 1.98.94.29.15.48.22.55.34.07.12.07.7-.17 1.37Z'/%3E%3C/svg%3E");
}

/* --- floating WhatsApp bubble --- */
.wa-float{background:#25D366;color:#04210f;box-shadow:0 14px 40px rgba(37,211,102,.34)}
.wa-float:hover{background:#1FBF5B;box-shadow:0 18px 48px rgba(37,211,102,.45)}
.wa-float::before{content:"";width:19px;height:19px;background:currentColor;opacity:1;border-radius:0;
  -webkit-mask:var(--wa-glyph) center/contain no-repeat;mask:var(--wa-glyph) center/contain no-repeat}

/* --- YouTube --- */
.btn-yt{background:#FF0033;color:#fff;border-color:transparent}
.btn-yt:hover{background:#e6002e;color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(255,0,51,.32)}

/* --- Instagram: the official gradient --- */
.btn-ig{color:#fff;border-color:transparent;
  background:linear-gradient(100deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%)}
.btn-ig:hover{color:#fff;transform:translateY(-2px);filter:saturate(1.15);
  box-shadow:0 12px 34px rgba(221,42,123,.34)}

/* --- footer social icons keep their platform colour on hover --- */
.socials a[aria-label="Instagram"]:hover{background:linear-gradient(100deg,#F58529,#DD2A7B 50%,#8134AF);
  border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(221,42,123,.3)}
.socials a[aria-label="Facebook"]:hover{background:#1877F2;border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(24,119,242,.3)}
.socials a[aria-label="X"]:hover{background:#fff;border-color:transparent;color:#000}
.socials a[aria-label="LinkedIn"]:hover{background:#0A66C2;border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(10,102,194,.3)}
.socials a[aria-label="YouTube"]:hover{background:#FF0033;border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(255,0,51,.3)}

@media(prefers-contrast:more){
  .btn-ig{background:#DD2A7B}
}

/* ============================================================
   CITY / LOCATION PAGES
   ============================================================ */
.city-hero .lead{max-width:760px}

.city-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:22px;align-items:start}
.city-main{padding:46px}
.city-main h2{font-size:clamp(24px,2.8vw,32px);margin:8px 0 18px}
.city-main p{color:var(--grey);line-height:1.85;margin-bottom:16px}
.city-side{padding:34px;position:sticky;top:120px}
.city-side dl{margin-bottom:24px}
.city-side dt{font-family:var(--font-d);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);margin-bottom:5px}
.city-side dd{margin-bottom:16px;font-size:15px;color:#e4e4e8}

/* sector / locality chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips .chip{font-size:13.5px;color:#dcdce0;border:1px solid var(--line);padding:8px 15px;
  border-radius:100px;background:rgba(255,255,255,.035);transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.chips .chip:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07)}
.chips .chip.area{color:var(--grey);font-size:13px}
.chips.areas{gap:10px}
.areas-note{color:#5a5a60;font-size:13.5px;line-height:1.7;margin-top:18px;max-width:720px}

/* nearby-city pills */
.city-pills{display:flex;flex-wrap:wrap;gap:10px}
.city-pill{text-decoration:none;font-family:var(--font-d);font-size:14px;font-weight:500;color:#dcdce0;
  border:1px solid var(--line);padding:11px 20px;border-radius:100px;background:rgba(255,255,255,.03);
  transition:transform var(--r-move) var(--spring),border-color .2s var(--ease-out),color .2s var(--ease-out)}
.city-pill:hover{color:var(--yellow);border-color:rgba(255,208,40,.4);transform:translateY(-2px)}

/* locations index cards */
.city-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.city-card{padding:30px;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.city-card .kicker{font-family:var(--font-d);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);margin-bottom:14px;display:block}
.city-card h3{font-size:26px;margin-bottom:10px}
.city-card p{color:var(--grey);font-size:14px;line-height:1.7;margin-bottom:20px;flex:1}
.city-card .more{color:var(--yellow);font-family:var(--font-d);font-weight:600;font-size:13px}
.city-card .more i{font-style:normal;display:inline-block;transition:transform var(--r-move) var(--spring)}
.city-card:hover .more i{transform:translateX(4px)}

@media(max-width:1024px){
  .city-grid{grid-template-columns:1fr}
  .city-side{position:static}
  .city-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .city-cards{grid-template-columns:1fr}
  .city-main,.city-side{padding:28px}
}

/* footer locations column runs long — tighten it */
.f-locs a{font-size:13px;line-height:1.4}

/* NAP block sits under the studio blurb. `address` italicises by default. */
.f-nap{font-style:normal;margin:18px 0 20px;display:grid;gap:2px}
.f-nap a{display:block;color:var(--grey);text-decoration:none;font-size:13.5px;
  line-height:1.5;padding:5px 0;transition:color .22s var(--ease-out)}
.f-nap a:hover{color:#fff}
.f-nap a:first-child{max-width:30ch}
/* The duplicate two-column rule that used to sit here was removed. It came
   after the max-width:640px rule below it, so on a phone it won the cascade
   and forced two columns into 375px: the first froze at its 260px min-content
   width and the second collapsed to 93px. */

/* ============================================================
   THREE-COLUMN MEGA MENU  (Services · Free tools · Studio)
   ============================================================ */
.mega-3{width:min(940px,94vw);grid-template-columns:1fr 1fr .9fr;gap:28px}
.mega-col{border-left:1px solid var(--line);padding-left:26px}
.mega-all{display:inline-flex;align-items:center;gap:7px;margin-top:12px;margin-left:9px;
  font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--yellow);text-decoration:none}
.mega-all i{font-style:normal;transition:transform var(--r-move) var(--spring)}
.mega-all:hover i{transform:translateX(4px)}

/* ============================================================
   TOOLS
   ============================================================ */
.tool-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool-card{padding:34px;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.tool-card .tico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:19px;
  background:rgba(255,208,40,.12);border:1px solid rgba(255,208,40,.28);color:var(--yellow);margin-bottom:18px}
.tool-card .kicker{font-family:var(--font-d);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);margin-bottom:10px;display:block}
.tool-card h3{font-size:24px;margin-bottom:10px}
.tool-card p{color:var(--grey);font-size:15px;line-height:1.7;margin-bottom:22px;flex:1}
.tool-card .more{color:var(--yellow);font-family:var(--font-d);font-weight:600;font-size:14px}
.tool-card .more i{font-style:normal;display:inline-block;transition:transform var(--r-move) var(--spring)}
.tool-card:hover .more i{transform:translateX(4px)}

.tool-wrap{display:grid;grid-template-columns:1.5fr .85fr;gap:22px;align-items:start}
.tool-panel{padding:40px}
.tool-panel h2{font-size:24px;margin-bottom:24px}
.tool-notes{padding:32px;position:sticky;top:120px}
.tool-notes p{color:var(--grey);font-size:14px;line-height:1.75;margin-bottom:14px}
.tool-notes b{color:#fff}
.tool-notes code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  background:rgba(255,255,255,.07);padding:2px 6px;border-radius:5px;color:var(--yellow)}
.tool-notes hr{border:0;border-top:1px solid var(--line);margin:22px 0 18px}
.tool-notes .privacy{color:#5a5a60;font-size:12.5px}

/* Generator pages: the fifty AI tools share one form, so the per-tool intro
   and the "usual mistake" note are the parts a reader can tell apart. They get
   real weight rather than the dim .privacy treatment used for legal fine print. */
.gen-intro{color:var(--grey);font-size:15px;line-height:1.8;max-width:70ch;
  margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.tool-notes .gen-mistake{color:var(--grey);font-size:13.5px;line-height:1.7}
.tool-notes .gen-mistake b{color:var(--yellow)}

/* Tool pages put the working interface in the first viewport and keep a
   contextual, logo-led route to the studio available while people calculate. */
.tool-page-hero{padding-bottom:22px}
.tool-page-hero h1{font-size:clamp(38px,4.8vw,62px);max-width:980px}
.tool-help-float{position:fixed;right:18px;top:56%;z-index:88;width:min(270px,calc(100vw - 36px));
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:start;padding:16px;
  border:1px solid rgba(255,208,40,.34);border-radius:18px;background:rgba(8,8,9,.92);
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 34px rgba(255,208,40,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tool-help-logo{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(0,0,0,.9));
  border:1px solid rgba(255,255,255,.16)}
.tool-help-logo img{width:32px;height:32px;object-fit:contain}
.tool-help-copy span{display:block;color:#8f8f96;font-family:var(--font-d);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.tool-help-copy strong{display:block;color:#fff;font-family:var(--font-d);font-size:15px;line-height:1.35}
.tool-help-copy button{border:0;background:none;color:var(--yellow);padding:9px 0 0;cursor:pointer;text-align:left;
  font-family:var(--font-d);font-size:12px;font-weight:700;line-height:1.35}
.tool-help-copy button i{display:inline-block;font-style:normal;transition:transform var(--r-move) var(--spring)}
.tool-help-copy button:hover i{transform:translateX(4px)}

@media(max-width:1680px){
  .tool-help-float{top:auto;right:72px;bottom:18px;width:min(360px,calc(100vw - 144px));
    grid-template-columns:42px minmax(0,1fr);padding:12px 14px;border-radius:15px}
  .tool-help-logo{width:42px;height:42px}.tool-help-logo img{width:28px;height:28px}
}

/* --- form fields --- */
.tfields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tfields label{display:block;font-family:var(--font-d);font-size:14px;font-weight:600;color:#fff}
.tfields label.full{grid-column:1/-1}
.tfields label span{display:block;font-family:var(--font-b);font-size:12.5px;font-weight:400;
  color:#5a5a60;margin-top:3px}
.tfields label em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  color:var(--sky);margin-left:6px;font-weight:400}
.tfields .inp{display:flex;align-items:center;gap:8px;margin-top:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:13px;padding:0 15px;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.tfields .inp:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.tfields .inp i{font-style:normal;color:#5a5a60;font-size:15px}
.tfields input,.tfields textarea{flex:1;background:none;border:0;outline:none;color:#fff;
  font-family:var(--font-b);font-size:15px;padding:14px 0;width:100%;resize:vertical}
.tfields textarea{line-height:1.6}

/* --- results --- */
.tout{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.tout .hint{color:#5a5a60;font-size:14px}
.big{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.big div{padding:20px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.big b{display:block;font-family:var(--font-d);font-size:32px;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.big small{display:block;color:var(--grey);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:9px;line-height:1.4}
.big.good div:first-child b{color:#3ddc84}
.big.ok   div:first-child b{color:var(--yellow)}
.big.bad  div:first-child b{color:#ff6b6b}
.verdict{font-size:15px;line-height:1.7;padding:15px 18px;border-radius:13px;margin-bottom:22px}
.verdict.good{color:#a9edc6;background:rgba(61,220,132,.09);border:1px solid rgba(61,220,132,.26)}
.verdict.ok  {color:#e8d79a;background:rgba(255,208,40,.08);border:1px solid rgba(255,208,40,.24)}
.verdict.bad {color:#f5b1b1;background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.26)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl td{padding:12px 0;border-bottom:1px solid var(--line-2);color:var(--grey)}
.tbl td:last-child{text-align:right;color:#fff;font-family:var(--font-d);font-variant-numeric:tabular-nums}
.tbl td.pos{color:#3ddc84}
.tbl td.neg{color:#ff6b6b}
.result{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.7;word-break:break-all;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:13px;
  padding:16px 18px;margin:12px 0 16px;color:var(--sky-2)}
.schema-output{max-height:430px;overflow:auto;white-space:pre-wrap;word-break:break-word;tab-size:2}
.warn{color:#e8d79a;font-size:13px;margin-top:12px}
.tool-lead{margin-top:28px;padding:22px;border:1px solid rgba(255,208,40,.24);border-radius:16px;background:rgba(255,208,40,.05)}
.tool-lead .eyebrow{margin-bottom:7px}.tool-lead>div p{color:var(--grey);font-size:14px;line-height:1.65;margin:0 0 16px}
.tool-lead-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.tool-lead-form label{display:block;color:#e5e5e8;font-family:var(--font-d);font-size:12px;font-weight:600}.tool-lead-form label:nth-of-type(3){grid-column:1/-1}
.tool-lead-form input{min-width:0;width:100%;margin-top:6px;border:1px solid var(--line);background:rgba(0,0,0,.22);border-radius:11px;color:#fff;padding:12px 13px;font:inherit}
.tool-lead-form input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.tool-lead-form .btn{grid-column:1/-1;justify-self:start}.tool-lead-form .fine{grid-column:1/-1;margin:1px 0 0;color:#777;font-size:12px;line-height:1.5}
.tool-lead-confirm{margin-top:28px;padding:18px;border:1px solid rgba(61,220,132,.3);border-radius:14px;background:rgba(61,220,132,.08);color:#bfeecf;font-size:14px;line-height:1.6}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.score-questions{display:grid;gap:9px}.score-questions label{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--line);border-radius:13px;cursor:pointer;color:var(--grey);font-size:14px;line-height:1.45;transition:border-color .18s var(--ease-out),background .18s var(--ease-out)}
.score-questions label.checked{border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.06);color:#e7f9ed}.score-questions input{accent-color:#3ddc84;width:16px;height:16px}.score-questions b{font-family:var(--font-d);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow)}.score-questions label.checked b{color:#3ddc84}

/* SERP preview + width meters */
.serp{background:#fff;border-radius:12px;padding:20px 22px;margin:12px 0 24px}
.serp-url{color:#4d5156;font-size:12.5px;margin-bottom:5px}
.serp-title{color:#1a0dab;font-size:20px;line-height:1.3;margin-bottom:4px;font-family:arial,sans-serif}
.serp-desc{color:#4d5156;font-size:13.5px;line-height:1.58;font-family:arial,sans-serif}
.meter{margin-bottom:16px}
.mrow{display:flex;justify-content:space-between;font-size:13px;color:var(--grey);margin-bottom:7px}
.mrow b{font-family:var(--font-d);font-variant-numeric:tabular-nums}
.mrow b.good{color:#3ddc84}.mrow b.ok{color:var(--yellow)}.mrow b.bad{color:#ff6b6b}
.meter-track{height:6px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden}
.meter-track i{display:block;height:100%;border-radius:6px;transition:width .3s var(--ease-out)}
.meter-track i.good{background:#3ddc84}.meter-track i.ok{background:var(--yellow)}.meter-track i.bad{background:#ff6b6b}

/* Generator long form: native disclosure sections.
   Deliberately <details>/<summary> rather than the .fq accordion above, which
   is a client component with a max-height transition. These pages are server
   rendered static output and the long copy has to be in the HTML whether the
   section is open or shut, so it stays indexable and readable with scripts
   off. The visual language is borrowed from .fq; the markup is not, so the
   rules are written out rather than piggybacked on the .fq selectors. */
.gen-long{padding-top:0}
.gen-disc{display:grid;gap:12px;max-width:940px}
.gen-det{padding:0;overflow:hidden}
.gen-det summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:baseline;
  justify-content:space-between;padding:22px 26px;color:#fff;
  font-family:var(--font-d);font-size:17px;font-weight:600;line-height:1.45}
.gen-det summary::-webkit-details-marker{display:none}
.gen-det summary::marker{content:""}
.gen-det summary i{font-style:normal;color:var(--sky);font-size:20px;flex:0 0 auto;
  transition:transform .3s var(--ease-out),color .3s var(--ease-out);line-height:1}
.gen-det[open] summary i{transform:rotate(45deg);color:var(--yellow)}
.gen-det summary:hover{color:var(--yellow)}
.gen-det summary:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px;border-radius:14px}
.gen-det-b{padding:0 26px 24px;max-width:76ch}
.gen-det-b p{color:var(--grey);font-size:15px;line-height:1.8;margin-bottom:14px}
.gen-det-b p:last-child{margin-bottom:0}
/* The disclosure arrow has no transition to animate open in any browser, so
   the body gets a short fade instead of the panel appearing instantly. */
@media(prefers-reduced-motion:no-preference){
  .gen-det[open] .gen-det-b{animation:gen-det-in .28s var(--ease-out) both}
}
@keyframes gen-det-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media print{.gen-det-b{display:block!important}}

@media(max-width:1024px){
  .mega-3{grid-template-columns:1fr 1fr}
  .mega-side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:20px;grid-column:1/-1}
  .tool-wrap{grid-template-columns:1fr}
  .tool-notes{position:static}
}
@media(max-width:640px){
  .tool-cards{grid-template-columns:1fr}
  .tfields{grid-template-columns:1fr}
  .big{grid-template-columns:1fr}
  .tool-panel,.tool-notes,.tool-card{padding:26px}
  .gen-det summary{padding:18px 20px;font-size:15.5px;gap:14px}
  .gen-det-b{padding:0 20px 20px}
  .tool-page-hero{padding-top:118px;padding-bottom:12px}
  .tool-help-float{left:62px;right:62px;bottom:12px;width:auto;grid-template-columns:36px minmax(0,1fr);
    gap:10px;padding:10px 12px}
  .tool-help-logo{width:36px;height:36px}.tool-help-logo img{width:24px;height:24px}
  .tool-help-copy span{display:none}.tool-help-copy strong{font-size:13px}
  .tool-help-copy button{font-size:11.5px;padding-top:4px}
  .seo-check-card{padding:28px}.seo-check-list label{padding:14px;grid-template-columns:18px minmax(0,1fr) 24px}.seo-score b{font-size:40px}
}

/* ============================================================
   TOOLS MEGA MENU — wide two-column list
   ============================================================ */
.mega-tools{width:min(620px,92vw);grid-template-columns:1fr;gap:0;padding:22px 24px 20px}
.tools-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.tools-head h5{margin:0}
.tools-head span{font-size:12.5px;color:#5a5a60}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}

.titem{display:flex;align-items:center;gap:13px;padding:10px 11px;border-radius:12px;
  text-decoration:none;transition:background .18s var(--ease-out)}
.titem:hover{background:rgba(255,255,255,.07)}
.titem .tico{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9px;color:var(--yellow);background:rgba(255,208,40,.10);
  border:1px solid rgba(255,208,40,.24);transition:.22s var(--ease-out)}
.titem .tico svg{width:17px;height:17px;display:block}
.titem:hover .tico{background:rgba(255,208,40,.2);color:var(--yellow)}
.titem .tlbl{font-family:var(--font-d);font-size:14.5px;font-weight:500;color:#e4e4e8;
  display:flex;align-items:center;gap:9px}
.titem:hover .tlbl{color:#fff}

/* not-yet-built items read as roadmap, not as broken links */
.titem.is-soon .tlbl{color:#7a7a80}
.titem.is-soon .tico{color:#6a6a70;background:rgba(255,255,255,.05);border-color:var(--line)}
.titem.is-soon:hover .tico{color:#9a9aa0;background:rgba(255,255,255,.08)}
.soon{font-style:normal;font-family:var(--font-d);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8a8a8f;
  border:1px solid var(--line);padding:2px 7px;border-radius:100px;line-height:1.5}

.mega-tools .mega-all{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  width:100%;margin-left:0}

/* tool cards: icon is now an SVG, and roadmap cards are visibly inert */
.tool-card .tico svg{width:21px;height:21px}
.tool-card.is-soon{opacity:.62;cursor:default}
.tool-card.is-soon:hover{transform:none;border-color:var(--line);box-shadow:none}
.tool-card.is-soon .tico{color:#8a8a8f;background:rgba(255,255,255,.05);border-color:var(--line)}
.tool-card h3 .soon{margin-left:8px;vertical-align:middle}
.tool-card .more.muted{color:#6a6a70}

@media(max-width:1024px){
  .mega-tools{width:min(560px,94vw)}
  .tools-grid{grid-template-columns:1fr}
}

/* ============================================================
   SERVICES MEGA MENU — 8 grouped columns
   ============================================================ */
.mega-svc{width:min(1180px,96vw);grid-template-columns:1fr;gap:0;padding:30px 32px 22px;
  max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain}
.svc-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px}
.sgroup h6{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-size:13.5px;
  font-weight:600;color:#fff;margin:0 0 12px;padding-bottom:11px;border-bottom:1px solid var(--line);
  letter-spacing:-.01em}
.gico{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;color:var(--yellow)}
.gico svg{width:17px;height:17px;display:block}
.sitems{display:flex;flex-direction:column;gap:1px}
.sitem{display:block;padding:6px 9px;margin-left:-9px;border-radius:9px;text-decoration:none;
  font-size:13.5px;line-height:1.45;color:#c8c8ce;transition:background .16s var(--ease-out),color .16s var(--ease-out)}
.sitem:hover{background:rgba(255,255,255,.07);color:#fff}
/* listed but not a page we sell yet — visibly secondary, never a dead link */
.sitem.is-soon{color:#76767c}
.sitem.is-soon:hover{color:#b4b4ba}

.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.mega-foot .mega-all{margin:0}
.mega-links{display:flex;gap:20px;flex-wrap:wrap}
.mega-links a{font-size:13px;color:#8a8a8f;text-decoration:none}
.mega-links a:hover{color:var(--yellow)}

/* drawer group headings */
.acc .panel-in h6{font-family:var(--font-d);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);margin:18px 0 6px;padding-left:14px}
.acc .panel-in h6:first-child{margin-top:4px}

@media(max-width:1180px){ .svc-groups{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1024px){ .mega-svc{width:min(720px,94vw)} .svc-groups{grid-template-columns:repeat(2,1fr)} }

/* Compact conversion menu: the full service catalogue stays on /services. */
.mega-svc.mega-compact{width:min(680px,92vw);padding:22px 24px 18px;max-height:none;overflow:visible}
.compact-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:15px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.compact-head h5{margin:0}.compact-head span{font-size:12.5px;color:#6d6d74}
.compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.compact-item{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;border-radius:12px;
  text-decoration:none;transition:background .18s var(--ease-out)}
.compact-txt{display:flex;flex-direction:column;gap:3px;min-width:0}

/* ---- animated service icons -------------------------------------------
   Everything below moves on hover only, stays under 400ms, and animates
   transform/opacity/stroke-dashoffset — never layout. transform-box:fill-box
   makes transform-origin behave inside the SVG viewBox rather than the page. */
.compact-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;
  place-items:center;color:var(--sky);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  transition:color .25s var(--ease-out),background .25s var(--ease-out),
             border-color .25s var(--ease-out)}
.compact-ico svg{width:19px;height:19px;overflow:visible}
.compact-ico svg *{transform-box:fill-box;transform-origin:center;
  transition:transform .38s var(--spring),opacity .3s var(--ease-out),
             stroke-dashoffset .5s var(--ease-out)}
.compact-item:hover .compact-ico{color:var(--yellow);background:rgba(255,208,40,.11);
  border-color:rgba(255,208,40,.3)}

/* reels — the play head steps forward */
.compact-item:hover .compact-ico svg .ic-b{transform:translateX(1.4px) scale(1.1)}

/* personal branding — broadcast arcs breathe outward, one after the other */
.compact-ico svg .ic-b,.compact-ico svg .ic-c{opacity:.45}
.compact-item:hover .compact-ico svg .ic-b{opacity:1}
.compact-item:hover .compact-ico svg .ic-c{opacity:1;transition-delay:.07s}

/* performance — bars rise from the baseline, staggered */
.compact-ico svg .ic-a,.compact-ico svg .ic-b,.compact-ico svg .ic-c{transform-origin:bottom}
.compact-item:hover .compact-ico svg .ic-a{transform:scaleY(1.18)}
.compact-item:hover .compact-ico svg .ic-c{transform:scaleY(1.1);transition-delay:.1s}
/* trend line draws itself */
.compact-ico svg .ic-d{stroke-dasharray:26;stroke-dashoffset:26}
.compact-item:hover .compact-ico svg .ic-d{stroke-dashoffset:0}

/* website — the content bar loads across */
.compact-ico svg .ic-b[d^="M6 14"]{stroke-dasharray:12;stroke-dashoffset:12}
.compact-item:hover .compact-ico svg .ic-b[d^="M6 14"]{stroke-dashoffset:0}

@media(prefers-reduced-motion:reduce){
  /* Colour still responds, so hover is not silent — only the movement goes. */
  .compact-ico svg *{transition:opacity .16s linear!important;transform:none!important;
    stroke-dashoffset:0!important;stroke-dasharray:none!important}
}
.compact-item:hover,.compact-item:focus-visible{background:rgba(255,255,255,.07)}
.compact-item strong{color:#f1f1f3;font-family:var(--font-d);font-size:14px;font-weight:600}
.compact-item small{color:#77777e;font-size:11.5px;line-height:1.4}
.compact-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.compact-foot .mega-all{margin:0;padding:5px 0}
.compact-more{display:flex;align-items:center;gap:18px}
.compact-more a{color:#8a8a8f;font-size:13px;text-decoration:none;padding:5px 0;
  transition:color .18s var(--ease-out)}
.compact-more a:hover{color:var(--yellow)}

/* ============================================================
   CITY PAGE — hero with inline lead form, quick facts, flow
   Same tokens as everywhere else; only the composition is new.
   ============================================================ */
.city-hero{position:relative;padding:150px 0 0;overflow:clip}
.ch-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;padding-bottom:52px}
.ch-copy h1{font-size:clamp(36px,4.6vw,62px);margin:18px 0 14px}
.ch-copy h1 em{font-style:normal;background:linear-gradient(100deg,var(--sky-2),var(--sky) 42%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ch-sub{font-family:var(--font-d);font-size:clamp(17px,2vw,21px);font-weight:600;color:var(--yellow);
  letter-spacing:-.01em;margin-bottom:20px}
.ch-reach{margin-top:20px;font-size:14px;color:var(--grey)}
.ch-reach b{color:#e4e4e8;font-weight:500}

/* --- inline lead form --- */
.lead-card{
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:24px;padding:30px;
  backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.6);
  position:sticky;top:110px;
}
.lead-head{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.lead-head h3{font-size:22px;margin-bottom:6px}
.lead-head span{font-size:12.5px;color:var(--yellow);letter-spacing:.04em}
.lead-card form{display:grid;gap:11px}.lead-card label{display:block;color:#dfe5f2;font-family:var(--font-d);font-size:12px;font-weight:600}
.lead-card input,.lead-card select{
  width:100%;padding:14px 16px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:#fff;font-family:var(--font-b);font-size:14.5px;outline:none;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out)}
.lead-card input::placeholder{color:#5d677f}
.lead-card label input,.lead-card label select{margin-top:6px}
.lead-card select{appearance:none;color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffd028' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.lead-card select option{background:#0a0a0a}
.lead-card input:focus,.lead-card select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,208,40,.14)}
.lead-card .err{border-color:#ff6b6b!important}
.lead-card .btn{width:100%;justify-content:center;margin-top:4px}
.lead-fine{color:#5a5a60;font-size:12px;line-height:1.6;margin-top:14px}

/* --- quick facts strip --- */
.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:10px}
.quick-cell{background:#050505;padding:22px 20px}
.quick-cell b{display:block;font-family:var(--font-d);font-size:26px;line-height:1;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.quick-cell span{display:block;font-family:var(--font-d);font-size:13px;color:#fff;margin-top:9px}
.quick-cell small{display:block;font-size:11.5px;color:#6a6a70;margin-top:5px;line-height:1.5}

/* --- centred narrow section --- */
.wrap.narrow{max-width:900px}
.title.center,.lead.center{text-align:center}
.lead.center{margin:0 auto 28px;max-width:720px}
.chips.center{justify-content:center}
.chip.win{border-color:rgba(255,208,40,.28);background:rgba(255,208,40,.06);color:#e8dcae}
.chip.chal-chip{border-color:rgba(255,107,107,.26);background:rgba(255,107,107,.06);color:#e9c4c4}

/* --- city-specific conversion plan --- */
.city-plan{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;padding:46px;align-items:start}
.city-plan .title{font-size:clamp(30px,3.6vw,46px);margin-top:12px}
.city-plan-copy p{color:var(--grey);font-size:15.5px;line-height:1.85;margin-bottom:18px}
.city-plan-copy .btn{margin-top:8px}

/* --- services dark band --- */
.svc-band{background:#050505;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-rows{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.svc-row{display:flex;align-items:center;gap:22px;padding:24px 28px;background:#000;text-decoration:none;
  transition:background .22s var(--ease-out)}
.svc-row:hover{background:#0d0d0d}
.svc-row .n{font-family:var(--font-d);font-size:13px;color:var(--yellow);flex:0 0 auto;letter-spacing:.1em}
.svc-row .body{flex:1;min-width:0}
.svc-row strong{display:block;font-family:var(--font-d);font-size:19px;font-weight:600;color:#fff;margin-bottom:5px}
.svc-row small{display:block;color:var(--grey);font-size:14px;line-height:1.6}
.svc-row .go{flex:0 0 auto;color:#4a4a50;font-size:19px;transition:transform var(--r-move) var(--spring),color .2s}
.svc-row:hover .go{color:var(--yellow);transform:translateX(5px)}

/* --- challenges --- */
.chal{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}

/* --- process flow --- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.flow-step{text-align:center;padding:0 6px;position:relative}
.flow-step .ring-n{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;
  font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--yellow);
  border:1px solid rgba(255,208,40,.32);background:rgba(255,208,40,.07)}
.flow-step h4{font-size:17px;margin-bottom:9px}
.flow-step p{color:var(--grey);font-size:13.5px;line-height:1.65}
/* connector between the circles */
.flow-step::before{content:"";position:absolute;top:30px;left:calc(-50% + 40px);width:calc(100% - 80px);
  height:1px;background:var(--line)}
.flow-step:first-child::before{display:none}

@media(max-width:1180px){ .quick{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1024px){
  .ch-grid{grid-template-columns:1fr;gap:34px}
  .lead-card{position:static}
  .city-plan{grid-template-columns:1fr;gap:24px}
  .chal{grid-template-columns:1fr;gap:30px}
  .flow{grid-template-columns:repeat(2,1fr);gap:32px 18px}
  .flow-step::before{display:none}
}
@media(max-width:640px){
  .city-hero{padding-top:120px}
  .quick{grid-template-columns:repeat(2,1fr)}
  .quick-cell{padding:18px 16px}
  .flow{grid-template-columns:1fr}
  .lead-card{padding:24px}
  .city-plan{padding:28px}
  .svc-row{padding:20px;gap:14px}
  .svc-row strong{font-size:17px}
}

/* ============================================================
   ROUTE BOUNDARIES — loading skeleton
   Shaped like the page it replaces, so the swap to real content reads as
   the page arriving rather than one thing being exchanged for another.
   ============================================================ */
.route-skeleton{padding:170px 0 80px}
.sk{border-radius:12px;background:linear-gradient(90deg,
  rgba(255,255,255,.05) 25%,rgba(255,255,255,.10) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:sk-sheen 1.4s ease-in-out infinite}
@keyframes sk-sheen{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-eyebrow{width:180px;height:30px;border-radius:100px;margin-bottom:26px}
.sk-h1{width:min(680px,90%);height:56px;margin-bottom:14px}
.sk-h1.short{width:min(420px,65%)}
.sk-lead{width:min(560px,80%);height:18px;margin-bottom:10px}
.sk-lead.short{width:min(380px,55%);margin-bottom:44px}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sk-card{height:190px;border-radius:22px}
@media(max-width:900px){.sk-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* visually hidden, still announced by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.team-banner img{width:100%;height:auto;display:block}
.short img{object-fit:cover}

/* City page → wider service catalogue. Chips rather than another card grid:
   this is a link block for crawlers and skimmers, not a second menu. */
.city-more-svc{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.city-more-svc>span{color:#7c7c85;font-size:12.5px;font-family:var(--font-d);
  letter-spacing:.04em;margin-right:4px}
.city-more-svc a{padding:7px 13px;border-radius:100px;border:1px solid var(--line);
  color:var(--grey);font-size:12.5px;text-decoration:none;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.city-more-svc a:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.city-more-svc a.all{color:var(--yellow);border-color:rgba(255,208,40,.36)}
.city-more-svc i{font-style:normal}

/* Two-up focus band on the homepage — the services the studio leads with.
   Wider type and a real argument, versus the one-line cards above it. */
.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.focus-card{padding:38px 36px;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;transition:border-color .3s var(--ease-out),transform .4s var(--spring)}
.focus-card:hover{border-color:rgba(255,208,40,.34);transform:translateY(-3px)}
.focus-card h3{font-size:clamp(21px,2.2vw,27px);line-height:1.28;margin:12px 0 14px;color:#fff}
.focus-card>p{color:var(--grey);font-size:14.5px;line-height:1.75}
.focus-card ul{list-style:none;margin:20px 0 24px;display:grid;gap:10px}
.focus-card li{color:#dfe5f2;font-size:13.5px;line-height:1.55;padding-left:22px;position:relative}
.focus-card li::before{content:"✓";position:absolute;left:0;color:var(--sky);font-weight:700}
.focus-card .more{margin-top:auto;color:var(--yellow);font-family:var(--font-d);
  font-weight:600;font-size:13.5px}
.focus-card .more i{font-style:normal;display:inline-block;transition:transform var(--r-move) var(--spring)}
.focus-card:hover .more i{transform:translateX(4px)}
@media(max-width:900px){.focus-grid{grid-template-columns:1fr}.focus-card{padding:28px 24px}}

/* ---- service cards with artwork ----------------------------------------
   The shot bleeds off the right edge and is masked back toward the copy, so
   the text sits on solid darkness and stays readable at any card width. Two
   gradients do the work: one horizontal to protect the column of text, one
   vertical to stop the image fighting the "Read more" line. */
.svc-card.has-shot{position:relative;overflow:hidden;isolation:isolate}
.svc-shot{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:0;pointer-events:none}
.svc-shot img{object-fit:cover;object-position:center;opacity:.62;
  transition:opacity var(--r-move) var(--ease-out),transform 1.1s var(--ease-out)}
.svc-shot::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,#08080a 2%,rgba(8,8,10,.92) 26%,rgba(8,8,10,.45) 62%,rgba(8,8,10,.18) 100%),
    linear-gradient(0deg,rgba(8,8,10,.72),transparent 42%)}
/* Lift the copy above the artwork without giving every child a z-index. */
.svc-card.has-shot > :not(.svc-shot){position:relative;z-index:1}
.svc-card.has-shot p{max-width:22ch}
.svc-card.has-shot:hover .svc-shot img{opacity:.8;transform:scale(1.045)}
/* Core-service pages use the same artwork at a larger scale. The copy stays
   in real HTML below; this band is visual context, not a screenshot of UI. */
.service-visual-section{padding:40px 0}
.service-visual{position:relative;min-height:clamp(330px,48vw,560px);overflow:hidden;margin:0}
.service-visual-shot{object-fit:cover;object-position:center}
.service-visual-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.2) 58%,rgba(0,0,0,.05)),
  linear-gradient(0deg,rgba(0,0,0,.54),transparent 45%)}
.service-visual-label{position:absolute;left:clamp(22px,4vw,52px);bottom:clamp(22px,4vw,46px);
  display:flex;align-items:center;gap:20px;max-width:80%}
.service-visual-label>img{width:clamp(76px,10vw,118px);height:clamp(68px,9vw,105px);object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.service-visual-label span{display:grid;gap:7px}
.service-visual-label small{font-family:var(--font-d);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow)}
.service-visual-label strong{font-family:var(--font-d);font-size:clamp(22px,3.2vw,42px);line-height:1.05;color:#fff}

@media(max-width:900px){
  /* Narrow cards leave no room for a 66% image beside the text. */
  .svc-shot{width:100%}
  .svc-shot::after{background:
    linear-gradient(90deg,#08080a 12%,rgba(8,8,10,.9) 46%,rgba(8,8,10,.55) 100%),
    linear-gradient(0deg,rgba(8,8,10,.8),transparent 46%)}
  .svc-card.has-shot p{max-width:30ch}
  .service-visual-section{padding:28px 0}
  .service-visual{min-height:380px}
  .service-visual-shot{object-position:62% center}
  .service-visual-shade{background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.08) 70%)}
  .service-visual-label{max-width:calc(100% - 40px)}
}
@media(prefers-reduced-motion:reduce){
  .svc-card.has-shot:hover .svc-shot img{transform:none}
}

/* ---- page hero: split layout + orbiting channels -----------------------
   Inner pages used to be a single column of copy with dead space to the right.
   Both variants below fill it, so every page below the homepage keeps the same
   shape and the set reads as one site. */
.phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.phero-copy{min-width:0}
.phero-aside{min-width:0;justify-self:end;width:100%;max-width:430px}
.phero-split{padding-bottom:60px}
.phero-split .phero-aside{max-width:400px}

/* Orbit — the homepage rings without the wordmark. Channels, not branding. */
.hero-orbit{position:relative;aspect-ratio:1/1;width:100%;max-width:360px;
  margin-left:auto;display:grid;place-items:center}
.ho-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09)}
.ho-r1{inset:0;animation:spin 38s linear infinite}
.ho-r2{inset:15%;border-color:rgba(255,255,255,.16);border-style:dashed;
  animation:spin 26s linear infinite reverse}
.ho-r3{inset:31%;border-color:rgba(255,208,40,.2);animation:spin 17s linear infinite}
.ho-r2::after,.ho-r3::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;
  border-radius:50%;transform:translateX(-50%)}
.ho-r2::after{background:var(--yellow);box-shadow:0 0 20px var(--yellow)}
.ho-r3::after{background:var(--sky-2);box-shadow:0 0 18px var(--sky-2)}

/* Icons ride a spinning track; the inner span counter-rotates at the same
   duration so each glyph stays upright instead of tumbling. */
.ho-icons{position:absolute;inset:0;list-style:none;margin:0;padding:0;
  animation:spin 30s linear infinite}
.ho-icons li{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;
  transform:rotate(calc(var(--n) * 90deg)) translateY(-50%) translateY(-118px)}
.ho-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(10,10,12,.9);border:1px solid rgba(255,255,255,.14);color:var(--grey);
  animation:spin-back 30s linear infinite}
.ho-icon svg{width:18px;height:18px}
@keyframes spin-back{to{transform:rotate(-360deg)}}

.ho-core{display:grid;place-items:center;gap:2px;text-align:center;z-index:1;
  width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),rgba(0,0,0,.6));
  border:1px solid rgba(255,255,255,.1)}
.ho-core b{font-family:var(--font-d);font-size:clamp(20px,2.4vw,28px);color:var(--yellow);
  line-height:1;font-variant-numeric:tabular-nums}
.ho-core small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7c7c85}

@media(max-width:1024px){
  .phero-grid{grid-template-columns:1fr;gap:36px}
  .phero-aside{justify-self:stretch;max-width:none}
  .phero-split .phero-aside{max-width:none}
  /* The orbit is decoration; on a phone it costs a screen of scrolling before
     the reader reaches anything useful. The form is not decoration, so it stays. */
  .phero-orbit .phero-aside{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ho-r1,.ho-r2,.ho-r3,.ho-icons,.ho-icon{animation:none!important}
}

/* ---- bloom: slow organic light form ------------------------------------
   Three blurred ellipses orbiting their own offset origins at different
   speeds. Where they overlap the density changes, which reads as a mass that
   churns rather than three shapes that spin — and it never loops visibly,
   because the periods are coprime.

   transform only, per the house rule. No border-radius or filter animation:
   both repaint, and these are large blurred surfaces. */
.bloom{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:paint}
.bloom-lobe{position:absolute;top:50%;left:50%;border-radius:50%;
  filter:blur(46px);opacity:.5;will-change:transform}
.bl-1{width:58%;height:44%;margin:-22% 0 0 -29%;
  animation:bloom-a 29s linear infinite}
.bl-2{width:46%;height:58%;margin:-29% 0 0 -23%;
  animation:bloom-b 41s linear infinite}
.bl-3{width:52%;height:38%;margin:-19% 0 0 -26%;
  animation:bloom-c 23s linear infinite reverse}
/* A tight bright centre stops the mass reading as fog. */
.bloom-core{position:absolute;top:50%;left:50%;width:26%;aspect-ratio:1;
  margin:-13% 0 0 -13%;border-radius:50%;filter:blur(30px);opacity:.55;
  animation:bloom-pulse 11s ease-in-out infinite}

.bloom-warm .bl-1{background:radial-gradient(circle,rgba(255,208,40,.55),transparent 68%)}
.bloom-warm .bl-2{background:radial-gradient(circle,rgba(255,140,30,.34),transparent 68%)}
.bloom-warm .bl-3{background:radial-gradient(circle,rgba(120,180,255,.30),transparent 68%)}
.bloom-warm .bloom-core{background:radial-gradient(circle,rgba(255,232,150,.62),transparent 70%)}

.bloom-cool .bl-1{background:radial-gradient(circle,rgba(120,180,255,.46),transparent 68%)}
.bloom-cool .bl-2{background:radial-gradient(circle,rgba(90,120,255,.32),transparent 68%)}
.bloom-cool .bl-3{background:radial-gradient(circle,rgba(255,208,40,.26),transparent 68%)}
.bloom-cool .bloom-core{background:radial-gradient(circle,rgba(190,220,255,.5),transparent 70%)}

/* Each lobe swings around a point away from its own centre, so the group
   kneads instead of pinwheeling. */
@keyframes bloom-a{
  from{transform:rotate(0deg) translateX(7%) scale(1)}
  50% {transform:rotate(180deg) translateX(11%) scale(1.1)}
  to  {transform:rotate(360deg) translateX(7%) scale(1)}
}
@keyframes bloom-b{
  from{transform:rotate(0deg) translateY(9%) scale(1.05)}
  50% {transform:rotate(-180deg) translateY(5%) scale(.94)}
  to  {transform:rotate(-360deg) translateY(9%) scale(1.05)}
}
@keyframes bloom-c{
  from{transform:rotate(0deg) translate(6%,-4%) scale(.98)}
  50% {transform:rotate(180deg) translate(-8%,6%) scale(1.12)}
  to  {transform:rotate(360deg) translate(6%,-4%) scale(.98)}
}
@keyframes bloom-pulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%    {transform:scale(1.16);opacity:.68}
}

/* Sits behind the orbit in the homepage hero and behind the aside elsewhere. */
.hero-visual .bloom,.phero-aside .bloom{inset:-18%}
.phero .bloom{opacity:.75}

@media(max-width:1024px){
  /* Large blurred surfaces are the most expensive thing on a phone GPU, and
     this is pure decoration. */
  .bloom{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bloom-lobe,.bloom-core{animation:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .bloom{display:none}
}

/* City hero form column needs a positioning context for the bloom behind it. */
.city-form-wrap{position:relative}
.city-form-wrap .bloom{inset:-22%}
.city-form-wrap .lead-card{position:relative;z-index:1}
.phero-aside{position:relative}
.phero-aside > *:not(.bloom){position:relative;z-index:1}

/* ============================================================
   HOMEPAGE 2.0 — Newsreader/Inter redesign
   Scoped under .dh2 so the existing page styles are untouched.
   ============================================================ */
@keyframes dh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes dh-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-26px,0)}}
@keyframes dh-float-slow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,20px,0)}}
@keyframes dh-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes dh-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes dh-sheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes dh-dash{to{stroke-dashoffset:-32}}

.dh2{--acc:var(--yellow);--ink:#f4f4f2;--panel:#0f0f0f;--panel-2:#0a0a0a;
  --ink-2:rgba(244,244,242,.75);--ink-3:rgba(244,244,242,.6);--ink-4:rgba(244,244,242,.45);
  --hair-1:rgba(255,255,255,.13);--hair-2:rgba(255,255,255,.08);--hair-3:rgba(255,255,255,.05);
  --acc-glow:rgba(255,212,41,.4);--scrim:0,0,0;
  background:var(--black);color:var(--ink);overflow-x:hidden;position:relative}
.dh2 ::selection{background:var(--acc);color:#000}
.dh2 .wrap2{max-width:1320px;margin:0 auto;padding:0 40px}
.dh2 .eyebrow2{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);text-shadow:0 0 22px rgba(255,212,41,.4);margin-bottom:14px}
.dh2 h2.t2{font-family:var(--font-d);font-weight:500;font-size:clamp(28px,3.6vw,42px);
  line-height:1.15;margin:0 0 20px;text-wrap:pretty}
.dh2 h2.t2 em,.dh2 h1.t1 em{color:var(--acc);font-style:italic;
  text-shadow:0 0 30px rgba(255,212,41,.35)}
.dh2 .lead2{font-size:15px;line-height:1.7;color:var(--ink-3);margin:0 0 30px;max-width:640px}
/* padding-block, not the shorthand. Most homepage sections are
   `<section className="sec wrap2">`, and `.sec` is declared after `.wrap2` at
   the same specificity, so `padding:20px 0 110px` was resetting the inline
   padding `.wrap2` had just set. Above 1320px the max-width and auto margins
   hid it; at any narrower viewport the gutter vanished and cards ran to the
   screen edge — on a phone the service cards were flush at 0px. */
.dh2 .sec{padding-block:20px 110px}

/* --- hero --- */
.dh2 .hero2{position:relative;min-height:92vh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden}
.dh2 .hero2-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hair-3) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair-3) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%)}
.dh2 .hero2-media{position:absolute;inset:0;overflow:hidden;background:#000}
.dh2 .hero2-media video,.dh2 .hero2-media img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}
/* Reel-first: the showreel is the point of the hero, so the scrims are only
   as heavy as legibility needs. The horizontal scrim keeps a readable plate
   under the left text column, then clears almost entirely across the right two
   thirds so the work plays uncovered. The vertical scrim is a light top/bottom
   feather to seat the badge, nav and rule — not a curtain. */
/* Poster and reel occupy the same box. The poster is the LCP paint and stays
   underneath permanently — if the reel is blocked from autoplaying, or the file
   is missing, the hero is still a finished image rather than a black rectangle. */
.dh2 .hero2-poster,.dh2 .hero2-reel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dh2 .hero2-poster{z-index:0}
.dh2 .hero2-reel{z-index:1;opacity:0;transition:opacity .6s var(--ease-out)}
.dh2 .hero2-reel.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.dh2 .hero2-reel{display:none}}

.dh2 .hero2-scrim-x{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(var(--scrim),.82) 0%,rgba(var(--scrim),.58) 26%,rgba(var(--scrim),.16) 52%,rgba(var(--scrim),0) 74%)}
.dh2 .hero2-scrim-y{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(var(--scrim),.55) 0%,rgba(var(--scrim),0) 32%,rgba(var(--scrim),0) 68%,rgba(var(--scrim),.6) 100%)}
.dh2 .hero2-rule{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc)}
/* Showreel badge + sound toggle. Both sit on the video plate, so they use the
   hero's own --ink ramp and stay correct in light mode (where the hero keeps a
   dark plate on purpose). */
.dh2 .hero2-badge{position:absolute;top:112px;right:44px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(244,244,242,.85);pointer-events:none}
.dh2 .hero2-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:dh-pulse 1.6s ease-in-out infinite}
.dh2 .hero2-sound{position:absolute;right:44px;bottom:34px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);color:rgba(244,244,242,.85);
  transition:background var(--r-press) var(--ease-out),color var(--r-press) var(--ease-out),
             border-color var(--r-press) var(--ease-out)}
.dh2 .hero2-sound:hover{background:rgba(0,0,0,.72);color:#f4f4f2;
  border-color:rgba(255,255,255,.28)}
.dh2 .hero2-sound:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .dh2 .hero2-badge .dot{animation:none}
}
.dh2 .hero2-inner{position:relative;z-index:2;width:100%}
.dh2 .hero2-col{position:relative;width:min(430px,100%);min-width:0}
/* A scrim shaped to the copy rather than to the viewport. The horizontal wash
   is down to ~0.16 by the time it reaches the right end of this column, which
   is fine over a dark frame and unreadable the moment the reel cuts to a bright
   one — the headline sat white-on-yellow. This ellipse travels with the text,
   so the reel keeps its uncovered two-thirds and the words stay legible
   whatever frame is behind them. */
.dh2 .hero2-col::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-56px -140px -48px -72px;
  background:radial-gradient(112% 96% at 22% 50%,
    rgba(var(--scrim),.80) 0%,rgba(var(--scrim),.52) 44%,rgba(var(--scrim),0) 76%)}
.dh2 h1.t1{font-family:var(--font-d);font-weight:500;font-size:clamp(32px,3vw,42px);
  line-height:1.1;letter-spacing:-.01em;margin:0 0 16px;text-wrap:pretty}
.dh2 .pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;
  border:1px solid var(--hair-1);border-radius:100px;background:rgba(0,0,0,.4);
  backdrop-filter:blur(6px);font-size:12px;color:var(--ink-2);margin-bottom:22px}
.dh2 .dot{width:7px;height:7px;border-radius:50%;animation:dh-pulse 2s ease-in-out infinite}
.dh2 .blob{position:absolute;border-radius:50%;pointer-events:none}
.dh2 .hero2-stats{display:flex;gap:26px;flex-wrap:wrap;padding-top:24px;
  border-top:1px solid var(--hair-1)}
.dh2 .hero2-stats b{display:block;font-family:var(--font-d);font-weight:500;font-size:24px;
  color:var(--acc);text-shadow:0 0 26px rgba(255,212,41,.27)}
.dh2 .hero2-stats small{display:block;font-size:11.5px;color:var(--ink-4);margin-top:3px}

/* --- buttons --- */
.dh2 .b-solid{position:relative;overflow:hidden;display:inline-block;font-size:14px;
  font-weight:600;padding:13px 24px;border-radius:100px;background:var(--acc);color:#000;
  box-shadow:0 14px 40px -12px rgba(255,212,41,.6)}
.dh2 .b-solid .sheen{position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:dh-sheen 3.4s ease-in-out infinite}
.dh2 .b-wa{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  padding:13px 22px;border-radius:100px;border:1px solid rgba(63,174,106,.5);color:#7fd39c}
.dh2 .b-wa:hover{background:rgba(63,174,106,.12);color:#9ee0b4}

/* --- ticker --- */
.dh2 .ticker{padding:22px 0;border-top:1px solid var(--hair-3);
  border-bottom:1px solid var(--hair-3);overflow:hidden;background:var(--panel-2)}
.dh2 .ticker-track{display:flex;width:max-content;animation:dh-marquee 34s linear infinite}
.dh2 .ticker-track span.i{display:flex;align-items:center;gap:22px;padding-right:22px;
  font-family:var(--font-d);font-size:19px;color:var(--ink-2);white-space:nowrap}
.dh2 .ticker-track span.i i{color:var(--acc);font-size:13px;font-style:normal}

/* --- generic card grid --- */
.dh2 .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dh2 .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dh2 .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dh2 .c2{background:var(--panel);border:1px solid var(--hair-2);border-radius:16px;
  padding:32px;transition:border-color .25s var(--ease-out),transform .25s var(--ease-out)}
.dh2 .c2:hover{border-color:rgba(255,212,41,.45);transform:translateY(-3px)}
.dh2 .c2 h3{font-family:var(--font-d);font-weight:500;font-style:italic;font-size:20px;
  margin:0 0 14px;line-height:1.35}
.dh2 .c2 p{font-size:14.5px;line-height:1.65;color:var(--ink-3);margin:0 0 18px}
/* ---- situations, compact ------------------------------------------------
   Four cards at 32px padding with a stacked 44px icon ran to most of a
   viewport for four short lines of copy. Icon beside the heading, tighter
   padding, and four across once there is room for it. */
/* `.sit` is a *card* in the legacy stylesheet (`.sit{padding:34px}`), but in
   dh2 it is the grid that holds the cards, so that padding was insetting the
   whole row by an extra 34px on top of the wrap gutter. Zeroed here rather than
   edited there, because the legacy rule still serves the old markup. */
.dh2 .sit{grid-template-columns:repeat(2,1fr);gap:18px;padding:0}
@media (min-width:1180px){ .dh2 .sit{grid-template-columns:repeat(4,1fr)} }
.dh2 .sit .c2{padding:22px}
.dh2 .sit-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dh2 .sit .ic{width:34px;height:34px;border-radius:10px;margin-bottom:0;flex-shrink:0}
.dh2 .sit .ic svg{width:17px;height:17px}
.dh2 .sit .c2 h3{font-size:16.5px;margin:0;line-height:1.3}
.dh2 .sit .c2 p{font-size:13.5px;line-height:1.6;margin:0 0 14px}

.dh2 .ic{width:44px;height:44px;border-radius:13px;background:var(--hair-3);
  border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;
  color:var(--acc);margin-bottom:20px}

/* --- testimonials --- */
.dh2 .tm2 .c2{display:flex;flex-direction:column;gap:16px}
.dh2 .tm2 blockquote{font-family:var(--font-d);font-weight:400;font-size:18px;
  line-height:1.5;color:var(--ink);margin:0;text-wrap:pretty}
.dh2 .tm2 blockquote::before{content:"\201C"}
.dh2 .tm2 blockquote::after{content:"\201D"}
.dh2 .tm2-result{align-self:flex-start;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--acc);border:1px solid rgba(255,212,41,.32);
  border-radius:100px;padding:5px 11px}
.dh2 .tm2 figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--hair-2)}
.dh2 .tm2-avatar{border-radius:50%;object-fit:cover;flex-shrink:0}
.dh2 .tm2 figcaption b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.dh2 .tm2 figcaption small{display:block;font-size:12.5px;color:var(--ink-4);margin-top:2px}

/* --- why --- */
.dh2 .why2{display:grid;grid-template-columns:1fr .85fr;gap:60px;align-items:start}
.dh2 .why2 figure{position:relative;border-radius:18px;overflow:hidden;height:460px;
  border:1px solid var(--hair-2);margin:0}
.dh2 .why2 figure img{width:100%;height:100%;object-fit:cover}
.dh2 .checks2{display:flex;flex-direction:column;gap:18px;margin:0 0 32px;list-style:none}
.dh2 .checks2 li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;
  line-height:1.6;color:var(--ink-2)}
.dh2 .checks2 em{color:var(--acc);font-style:normal;font-size:15px;line-height:1.5}

/* --- service cards --- */
.dh2 .svc2{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--hair-2);border-radius:18px;
  transition:background .25s var(--ease-out),border-color .25s var(--ease-out),
             transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.dh2 .svc2:hover{background:#181818;border-color:var(--acc);transform:translateY(-4px);
  box-shadow:0 18px 50px -18px rgba(255,212,41,.5)}
.dh2 .svc2-media{position:relative;height:158px;overflow:hidden;background:#000}
.dh2 .svc2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.88;transition:transform .5s var(--ease-out),opacity .35s var(--ease-out)}
.dh2 .svc2:hover .svc2-media img{opacity:1;transform:scale(1.07)}
.dh2 .svc2-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(var(--scrim),.85) 100%)}
.dh2 .svc2-tag{position:absolute;top:14px;left:14px;z-index:1;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:100px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  border:1px solid var(--hair-1);color:var(--ink-2)}
.dh2 .svc2-ic{position:absolute;top:135px;left:22px;width:46px;height:46px;border-radius:14px;
  background:var(--hair-3);border:1px solid var(--hair-1);display:flex;
  align-items:center;justify-content:center;color:var(--acc);z-index:2;
  transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.dh2 .svc2:hover .svc2-ic{background:var(--acc);color:#000}
.dh2 .svc2-body{padding:36px 24px 26px;display:flex;flex-direction:column;flex:1}
.dh2 .svc2-body h3{font-family:var(--font-d);font-weight:500;font-size:20px;margin:0 0 10px}
.dh2 .svc2-body p{font-size:13.5px;line-height:1.6;color:var(--ink-3);
  margin:0 0 18px;flex:1}
.dh2 .svc2-body .more2{font-size:13px;font-weight:600;color:var(--ink-3)}
.dh2 .svc2:hover .more2{color:var(--acc)}

/* --- work --- */
.dh2 .wk2{position:relative;display:block;border-radius:14px;overflow:hidden;height:280px;
  border:1px solid var(--hair-2);
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out),
             box-shadow .35s var(--ease-out)}
.dh2 .wk2:hover{transform:translateY(-6px);border-color:var(--acc);
  box-shadow:0 26px 60px -24px rgba(255,212,41,.4)}
.dh2 .wk2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out)}
.dh2 .wk2:hover img{transform:scale(1.08)}
.dh2 .wk2-fallback{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:#0d0d0d}
.dh2 .wk2-fallback img{position:static;width:88px;height:88px;object-fit:contain;opacity:.5}
.dh2 .wk2::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim),.1) 30%,rgba(0,0,0,.92) 100%)}
.dh2 .wk2 .n{position:absolute;left:16px;top:16px;z-index:1;font-family:var(--font-d);
  font-size:13px;color:var(--ink-4)}
.dh2 .wk2 .cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:1}
.dh2 .wk2 .cap b{display:block;font-size:11px;font-weight:400;color:var(--acc);margin-bottom:6px}
.dh2 .wk2 .cap h3{font-family:var(--font-d);font-weight:500;font-size:16.5px;
  line-height:1.25;margin:0}

/* --- process --- */
.dh2 .proc2{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.dh2 .proc2 svg.rail{position:absolute;top:23px;left:0;right:0;width:100%;height:2px}
.dh2 .proc2 .st{padding-right:24px;position:relative}
.dh2 .proc2 .st .ic{border-radius:14px;background:var(--panel);
  border:1px solid var(--hair-1);margin-bottom:22px;position:relative;z-index:1;
  box-shadow:0 0 0 6px #000,0 0 34px -6px rgba(255,212,41,.53)}
.dh2 .proc2 .when{font-size:12px;color:var(--ink-4);margin-bottom:8px}
.dh2 .proc2 .st h3{font-family:var(--font-d);font-weight:500;font-size:19px;margin:0 0 10px}
.dh2 .proc2 .st p{font-size:13.5px;line-height:1.65;color:var(--ink-3);margin:0}

/* --- team --- */
.dh2 .team2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px}
.dh2 .team2 .m{background:var(--panel);border:1px solid var(--hair-2);
  border-radius:16px;padding:26px;display:flex;gap:18px;align-items:flex-start;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.dh2 .team2 .m:hover{border-color:rgba(255,212,41,.4);
  box-shadow:0 22px 60px -30px rgba(255,212,41,.33)}
.dh2 .team2 .m img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(255,212,41,.33);box-shadow:0 0 24px -6px rgba(255,212,41,.4)}
.dh2 .team2 .m small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);margin-bottom:6px}
.dh2 .team2 .m h3{font-family:var(--font-d);font-weight:500;font-size:18px;margin:0 0 8px}
.dh2 .team2 .m p{font-size:13px;line-height:1.6;color:var(--ink-3);margin:0 0 10px}

/* --- brand strip --- */
/* The old 96px bottom padding and 96px bottom margin stacked into 192px of
   empty panel under the logos, which read as a broken section rather than as
   breathing room. The strip is a supporting band, not a section of its own. */
.dh2 .brands2{padding:20px 0 40px;border-top:1px solid var(--hair-3);
  border-bottom:1px solid var(--hair-3);margin-bottom:56px;background:var(--panel-2)}
.dh2 .brands2 .lab{max-width:1320px;margin:0 auto 18px;padding:18px 40px 0;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.dh2 .brands2 .strip{overflow:hidden;width:100%}
.dh2 .brands2 .row{display:flex;gap:64px;align-items:center;width:max-content;
  animation:dh-marquee 32s linear infinite}
.dh2 .brands2 img{height:26px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(2.2);opacity:.55;transition:filter .3s,opacity .3s}
.dh2 .brands2 img:hover{filter:none;opacity:1}

/* --- contact --- */
.dh2 .ct2{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
/* LeadForm renders its own .lead-card surface (gradient, border, radius 24,
   shadow). Giving this wrapper a second background, border and radius drew a
   box inside a box. It stays as a positioning wrapper only. */
.dh2 .ct2 .panel{background:none;border:0;border-radius:0;padding:0}
.dh2 .ct2 .panel h3{font-family:var(--font-d);font-weight:500;font-size:19px;margin:0 0 22px}
/* Studio map. A live Google embed is full colour and would be the brightest
   thing on a black page, so it is toned down to sit inside the palette and
   returns to full colour on hover, which also signals it is interactive. */
.dh2 .ct2-map{position:relative;border:1px solid var(--hair-2);border-radius:16px;
  overflow:hidden;margin-bottom:28px;background:var(--panel);
  aspect-ratio:16/10;line-height:0}
/* Placeholder while the map is not yet mounted — the slot keeps its size so
   nothing shifts when the iframe arrives. */
.dh2 .ct2-map-ph{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-d);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.dh2 .ct2-map iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(.6) contrast(1.05) brightness(.82);
  transition:filter .35s var(--ease-out)}
.dh2 .ct2-map:hover iframe{filter:none}
html[data-theme="light"] .dh2 .ct2-map iframe{filter:grayscale(.25)}
@media (prefers-reduced-motion:reduce){
  .dh2 .ct2-map iframe{transition:none}
}

.dh2 .ct2 .rows{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.dh2 .ct2 .rows dt{font-size:12px;color:var(--ink-4);margin-bottom:3px}
.dh2 .ct2 .rows dd{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.dh2 .ct2 .rows dd.addr{font-size:14px;font-weight:400;
  color:var(--ink-2);line-height:1.5}

/* --- motion & responsive --- */
@media (prefers-reduced-motion:reduce){
  .dh2 .ticker-track,.dh2 .brands2 .row,.dh2 .blob,.dh2 .b-solid .sheen,
  .dh2 .dot,.dh2 .proc2 svg.rail line{animation:none!important}
}
@media (max-width:1024px){
  .dh2 .g3,.dh2 .g4{grid-template-columns:repeat(2,1fr)}
  .dh2 .why2,.dh2 .ct2{grid-template-columns:1fr;gap:40px}
  .dh2 .why2 figure{height:340px}
  .dh2 .proc2{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .dh2 .proc2 svg.rail{display:none}
}
@media (max-width:640px){
  .dh2 .wrap2{padding:0 20px}
  .dh2 .sec{padding-block:12px 72px}
  /* Phone hero: copy first, reel underneath.
     Overlaying a headline, a paragraph, two buttons and a stat row on video
     only fits on a wide viewport; on a phone it collided with the footage.
     Putting the copy first also puts the H1 and the primary CTA in the first
     screen, which is what the page ranks on and what a visitor came for. The
     reel follows as proof rather than as decoration behind text. */
  .dh2 .hero2{min-height:auto;padding:96px 0 44px;display:flex;flex-direction:column;gap:26px}
  .dh2 .hero2-inner{order:1;padding-top:0}
  .dh2 .hero2-media{order:2;position:relative;inset:auto;height:auto;
    aspect-ratio:16/9;width:100%;border-radius:0}
  .dh2 .hero2-col{width:100%}

  /* No text sits on the reel now, so the scrims only dim the footage. The
     vertical one stays, faintly, to seat the badge and the sound button. */
  .dh2 .hero2-scrim-x{background:none}
  .dh2 .hero2-scrim-y{background:linear-gradient(180deg,
    rgba(var(--scrim),.34) 0%,rgba(var(--scrim),0) 30%,rgba(var(--scrim),.34) 100%)}
  .dh2 .hero2-badge{top:12px;left:14px;right:auto;bottom:auto;font-size:10px;padding:6px 11px}
  .dh2 .hero2-sound{right:14px;bottom:14px;width:32px;height:32px}
  .dh2 .hero2-rule{display:none}

  /* The blobs and the grid were sized for a full-height hero. Behind a short
     stacked one they are just large dark washes, which is where most of the
     empty black on this screen was coming from. */
  .dh2 .hero2-grid{display:none}
  .dh2 .hero2 .blob{display:none}

  /* Tighter vertical rhythm inside the copy block. */
  .dh2 .hero2 h1.t1{font-size:clamp(30px,8.4vw,38px);margin-bottom:12px}
  .dh2 .hero2-stats{padding-top:18px;gap:20px}
  .dh2 .g2,.dh2 .g3,.dh2 .g4,.dh2 .team2,.dh2 .proc2{grid-template-columns:1fr}
  .dh2 .sit{grid-template-columns:1fr;gap:14px}
  .dh2 .c2{padding:24px}
  /* ---- footer ----------------------------------------------------- */
  footer{padding:44px 0 26px}
  /* Grid children default to min-width:auto, so a 200px logo or a long link
     sets a floor the column cannot go below. That floor is what produced the
     260px column above. */
  .f-grid{grid-template-columns:1fr;gap:30px;margin-bottom:32px}
  .f-col,.f-about{min-width:0}
  .f-about p{max-width:none;margin:14px 0 18px}
  .f-about .logo-img{width:150px}
  .f-col h5{margin-bottom:12px}
  .f-nap{margin-bottom:16px}
  .seo-note{padding:20px 0 4px}
  .f-bot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:20px}
  .dh2 .brands2{padding:16px 0 30px;margin-bottom:40px}
  .dh2 .brands2 .lab{padding:14px 20px 0;margin-bottom:14px}
  .dh2 .wk2{height:240px}
}

/* ============================================================
   LIGHT MODE — blue gradient / white surfaces / black type.
   Opt-in via data-theme on <html>; dark stays the default.
   ============================================================ */
:root{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --black:#f6f9ff; --black-2:#ffffff; --black-3:#e9f0fd;
  --white:#0b1020; --grey:#5a6478;
  --yellow:#1d4ed8; --yellow-soft:#3b82f6;
  --sky:#0b1020; --sky-2:#000000; --sky-glow:rgba(29,78,216,.18);
  --line:rgba(11,16,32,.12); --line-2:rgba(11,16,32,.07);
}
html[data-theme="light"] body{
  color:var(--white);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(59,130,246,.20), transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(29,78,216,.16), transparent 60%),
    linear-gradient(180deg,#f6f9ff 0%,#eaf1fe 46%,#f8fbff 100%);
  background-attachment:fixed;
}
html[data-theme="light"] .dh2{
  --acc:#1d4ed8; --ink:#0b1020;
  --ink-2:rgba(11,16,32,.78); --ink-3:rgba(11,16,32,.62); --ink-4:rgba(11,16,32,.46);
  --hair-1:rgba(11,16,32,.16); --hair-2:rgba(11,16,32,.10); --hair-3:rgba(11,16,32,.06);
  --panel:#ffffff; --panel-2:#eef4fe;
  --acc-glow:rgba(29,78,216,.30); --scrim:255,255,255;
  background:transparent; color:var(--ink);
}
html[data-theme="light"] .dh2 h2.t2 em,
html[data-theme="light"] .dh2 h1.t1 em{
  background:linear-gradient(100deg,#1d4ed8 0%,#3b82f6 55%,#0ea5e9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none}
html[data-theme="light"] .dh2 .eyebrow2{text-shadow:none}
html[data-theme="light"] .dh2 .b-solid{
  background:linear-gradient(100deg,#1d4ed8,#3b82f6);color:#fff;
  box-shadow:0 14px 40px -12px rgba(29,78,216,.55)}
html[data-theme="light"] .dh2 .pill{background:rgba(255,255,255,.7);border-color:var(--hair-1)}
html[data-theme="light"] .dh2 .c2,
html[data-theme="light"] .dh2 .svc2,
html[data-theme="light"] .dh2 .team2 .m,
html[data-theme="light"] .dh2 .ct2 .lead-card{box-shadow:0 6px 24px -14px rgba(11,16,32,.28)}
html[data-theme="light"] .dh2 .c2:hover{border-color:rgba(29,78,216,.45)}
html[data-theme="light"] .dh2 .svc2:hover{background:#fff;border-color:var(--acc);
  box-shadow:0 18px 50px -18px rgba(29,78,216,.45)}
html[data-theme="light"] .dh2 .svc2:hover .svc2-ic{background:var(--acc);color:#fff}
html[data-theme="light"] .dh2 .wk2:hover{box-shadow:0 26px 60px -24px rgba(29,78,216,.4)}
html[data-theme="light"] .dh2 .proc2 .st .ic{box-shadow:0 0 0 6px var(--black),0 0 34px -6px rgba(29,78,216,.5)}
html[data-theme="light"] .dh2 .brands2 img{filter:grayscale(1) brightness(.35)}
html[data-theme="light"] .dh2 .brands2 img:hover{filter:none}
/* The video hero keeps a dark plate so the footage stays readable. */
html[data-theme="light"] .dh2 .hero2{--ink:#f4f4f2;
  --ink-2:rgba(244,244,242,.78);--ink-3:rgba(244,244,242,.66);--ink-4:rgba(244,244,242,.5);
  --scrim:0,0,0;--hair-1:rgba(255,255,255,.16);color:var(--ink)}
html[data-theme="light"] .dh2 .hero2 h1.t1 em{
  background:linear-gradient(100deg,#7cc0ff,#bfe0ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .dh2 .hero2 .pill{background:rgba(0,0,0,.4)}

/* --- theme toggle --- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--white);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out),
             background .2s var(--ease-out),transform .2s var(--ease-out)}
.theme-toggle:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ============================================================
   MOTION EXTENSION — scroll reveal, press feedback, accent glow
   Added after the light-mode block so the light overrides in here
   land at the same specificity as the ones above them.
   Everything below animates transform / opacity / box-shadow / filter only,
   and every piece of it is switched off under prefers-reduced-motion.
   ============================================================ */

/* ---- 1. accent glow tokens -------------------------------------------
   The glow has to follow the theme: --acc is yellow in dark and blue in
   light, so a hardcoded rgba(255,212,41,...) would read as a stray yellow
   halo on the light theme. Two strengths, matching the vocabulary already
   set by .dh2 .svc2:hover. */
:root{
  --glow-acc:rgba(255,212,41,.45);
  --glow-acc-soft:rgba(255,212,41,.20);
}
html[data-theme="light"]{
  --glow-acc:rgba(29,78,216,.34);
  --glow-acc-soft:rgba(29,78,216,.15);
}

/* The reveal itself. Driven by the element's own position in the scroller, so
   there is no observer, no per element DOM write, and nothing for React to
   disagree with at hydration. `.rv` carries no hidden state of its own: the
   animation only runs while html.rv-on is set, and it fills backwards, so the
   hidden state exists solely for the duration of the animation. */
@supports (animation-timeline: view()){
  html.rv-on .rv{
    /* `forwards`, not `both`. `backwards` applies the keyframe `from` state —
       opacity 0 — for the whole time before the range begins, and arming
       `rv-on` after hydration therefore *hid* everything above the fold until
       the reader scrolled. On /tools that cost 1.67s of LCP render delay on a
       paragraph that had already been painted. With `forwards` an element
       keeps its own styles until the range starts, and the range starts at
       `entry 0%` — the instant it has zero pixels on screen — so the reveal
       still plays in full and nothing is ever hidden while visible. */
    animation:rv-in .6s var(--ease-out) forwards;
    animation-timeline:view();
    animation-range:entry 0% cover 18%;
  }
  /* The d1..d4 classes were already sprinkled through the markup with nothing
     behind them. A timeline cannot take a delay, so the cascade is expressed
     as a slightly later range instead: a grid row arrives left to right. */
  html.rv-on .rv.d1{animation-range:entry 0% cover 23%}
  html.rv-on .rv.d2{animation-range:entry 0% cover 28%}
  html.rv-on .rv.d3{animation-range:entry 0% cover 33%}
  html.rv-on .rv.d4{animation-range:entry 0% cover 38%}
}
@keyframes rv-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Printing and page captures must never depend on an animation having run. */
@media print{
  html.rv-on .rv{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- 3. press feedback ----------------------------------------------
   Why: every card on these pages is a whole-card link, and none of them
   acknowledged a touch. Same scale(.97) and same near-instant response as
   the existing .btn:active rule, so the site has one press behaviour. */
.svc-card:active,.tool-card:active,.city-card:active,.work:active,
.post:active,.loc:active,.member:active,.sitem:active,.titem:active,
.fq button:active,.theme-toggle:active,.crumb a:active,
.svc-row:active,.socials a:active{
  transform:scale(.97);
  transition:transform var(--r-press) var(--ease-out);
}

/* ---- 4. accent glow on card hover -----------------------------------
   Why: the hover state was a pure-black drop shadow, which is invisible on
   the dark theme's black canvas and outright wrong on the light one. A
   restrained shadow plus a soft accent bloom reads as the card lifting
   toward the light, in both themes. Matches .dh2 .svc2:hover. */
.card:hover{
  box-shadow:0 22px 56px -20px rgba(0,0,0,.72),
             0 16px 46px -22px var(--glow-acc);
}
html[data-theme="light"] .card:hover{
  box-shadow:0 18px 44px -22px rgba(11,16,32,.28),
             0 16px 46px -22px var(--glow-acc);
}

/* Cards that lead somewhere get the accent edge as well, so a link card is
   visibly a link card and a static one is not. */
.svc-card:hover,.tool-card:hover,.city-card:hover,.work:hover,.post:hover{
  border-color:var(--glow-acc);
}

/* ---- 5. icon feedback ------------------------------------------------
   Why: the tool and group glyphs were static plates. Warming them to the
   accent on hover confirms which card the pointer owns. */
.tool-card .tico,.gico,.city-card .cico,.cinfo .cico,.step .sico{
  transition:transform var(--r-move) var(--spring),
             color .25s var(--ease-out),
             background .25s var(--ease-out),
             border-color .25s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
.tool-card:hover .tico{
  color:var(--yellow);transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 26px -12px var(--glow-acc);
}
.sgroup:hover .gico{transform:scale(1.1)}

/* ---- 6. glyph plates for the text-only pages ------------------------
   Contact details, city cards and Academy modules were the three places
   with no visual anchor at all. Shared plate style so the three read as
   one component, sized off the existing .gico / .tico plates. */
.cico{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;
  display:grid;place-items:center;
  color:var(--yellow);background:rgba(255,208,40,.09);
  border:1px solid rgba(255,208,40,.20);
}
.cico svg{width:18px;height:18px;display:block}
html[data-theme="light"] .cico{
  color:var(--yellow);background:rgba(29,78,216,.07);border-color:rgba(29,78,216,.18);
}

/* Contact side cards: glyph sits beside the label. */
.cinfo h5{display:flex;align-items:center;gap:11px}
.cinfo:hover .cico{transform:translateY(-2px);box-shadow:0 10px 26px -12px var(--glow-acc)}

/* City cards: a pin next to the state line, so the grid scans as places. */
.city-card .kicker{display:flex;align-items:center;gap:9px}
.city-card .cico{width:26px;height:26px;border-radius:9px}
.city-card .cico svg{width:15px;height:15px}
.city-card:hover .cico{transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 22px -10px var(--glow-acc)}

/* Academy modules: reuses the existing service-group glyph set rather than
   introducing a second icon family. */
.step .sico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--yellow);background:rgba(255,208,40,.09);
  border:1px solid rgba(255,208,40,.20);margin-bottom:20px;
}
.step .sico svg{width:21px;height:21px;display:block}
html[data-theme="light"] .step .sico{
  background:rgba(29,78,216,.07);border-color:rgba(29,78,216,.18);
}
.step:hover .sico{transform:translateY(-3px);
  box-shadow:0 12px 30px -14px var(--glow-acc)}

/* ---- 7. the expansion-service link list -----------------------------
   Why: 31 links in a flat four-column list with a background-only hover.
   A small slide plus the accent confirms the row under the pointer. */
.sitem{transition:background .2s var(--ease-out),color .2s var(--ease-out),
       transform .2s var(--ease-out)}
.sitem:hover{transform:translateX(3px)}
.sitem:not(.is-soon):hover{color:var(--yellow)}

/* ---- 8. reduced motion ----------------------------------------------
   Everything above becomes a no-op. The colour and border changes are kept:
   they carry meaning (which card is focused), and are not vestibular. */
@media(prefers-reduced-motion:reduce){
  html.rv-on .rv,html.rv-on .rv.in,html.rv-on .rv[data-rv]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .svc-card:active,.tool-card:active,.city-card:active,.work:active,
  .post:active,.loc:active,.member:active,.sitem:active,.titem:active,
  .fq button:active,.theme-toggle:active,.crumb a:active,
  .svc-row:active,.socials a:active,
  .sitem:hover,.sgroup:hover .gico,
  .tool-card:hover .tico,.cinfo:hover .cico,
  .city-card:hover .cico,.step:hover .sico{transform:none!important}
}