/* ==========================================================================
   Super Vision — Ad Landing Page
   Design tokens per brief §3 (color), §4 (type), §5 (layout/motion)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface
   Satoshi (Indian Type Foundry, via Fontshare — free for commercial use),
   self-hosted as one variable file covering 300–900. It replaced Sora + Inter:
   closer to the reference mockups, tighter and more editorial, and at 42KB
   lighter than the two Google families it stands in for, with no third-party
   connection on first paint.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core gradient — the signature "shiny" gradient (§3.1) */
  --gradient-brand: linear-gradient(135deg, #30CFEA 0%, #1A8DBF 45%, #0C4878 100%);
  --gradient-brand-rev: linear-gradient(315deg, #30CFEA 0%, #1A8DBF 45%, #0C4878 100%);
  --gradient-text: linear-gradient(100deg, #0C4878 0%, #0679B8 55%, #1B9ACB 100%);
  --gradient-bright: linear-gradient(135deg, #5FDFF3 0%, #22A0CF 55%, #1A8DBF 100%);

  /* Gradient stops */
  --cyan: #30CFEA;
  --azure: #1A8DBF;
  --deep-navy: #0C4878;

  /* Solid brand colors (§3.2) */
  --electric-blue: #0679B8;
  --ink: #0B1220;
  --slate: #475467;
  --cloud: #F7F9FC;
  --white: #FFFFFF;
  --amber: #FFB020;

  /* Derived neutrals */
  --line: #E4EAF2;
  --line-dark: rgba(255, 255, 255, 0.14);
  --slate-light: #667085;

  /* Type (§4) */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2rem, 6vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 2.5vw, 1.5rem);
  --fs-body: clamp(1rem, 1.2vw, 1.1875rem);
  --fs-small: 0.875rem;

  /* Layout (§5.1).
     The brief's 1200-1280 content ceiling left large monitors mostly empty
     margin, so the ceilings are raised and the gutter is fluid instead of a
     flat vw (6vw at 2000px was 120px of dead space per side). */
  --maxw: 1440px;        /* content sections */
  --maxw-wide: 1720px;   /* nav, hero and the full-bleed sections */
  --pad-x: clamp(20px, 4.2vw, 80px);
  --section-y: clamp(48px, 7vw, 132px);
  --radius: 18px;
  --radius-sm: 12px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 12px 32px rgba(11, 18, 32, 0.07);
  --shadow-cta: 0 8px 24px rgba(26, 141, 191, 0.28);
  --shadow-cta-hover: 0 12px 32px rgba(26, 141, 191, 0.36);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* approximates power2.out */
  --dur-micro: 0.24s;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* clip, where supported: unlike hidden it does not turn body into a scroll
     container, which would unstick the header while scroll is locked. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* figure and blockquote ship with a 40px side margin in every browser, which
   silently widened the testimonial carousel's scroll width. */
figure, blockquote, figcaption { margin: 0; }

/* A display value in a component rule beats the hidden attribute's UA default,
   so carousel controls stayed on screen when hidden. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Let the <img> inside a <picture> lay out as if the wrapper were not there,
   so the existing `.frame img { width:100%; height:100% }` rules still apply. */
picture { display: contents; }

a { color: var(--electric-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; list-style: none; }

/* Focus states (§10) — Electric Blue ring, never the gradient */
:focus-visible {
  outline: 3px solid var(--electric-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--cyan); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  border-radius: 0 0 8px 8px;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* The hero and nav run on a wider canvas than the content sections — at 1240
   the hero's CTA row wraps, which the reference layout does not do. */
.container--wide { max-width: var(--maxw-wide); }

.section { padding-block: var(--section-y); }
.section--cloud { background: var(--cloud); }

.section__head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}
/* Cyan text is only ~2.9:1 over the light end of the brand gradient, so on
   dark sections the eyebrow goes near-white and the cyan stays in the rule. */
.on-dark .eyebrow { color: rgba(255, 255, 255, 0.9); }
.on-dark .eyebrow::before { background: var(--cyan); }

.lede { font-size: clamp(1rem, 1.6vw, 1.3125rem); color: var(--slate); }
.on-dark .lede { color: rgba(255, 255, 255, 0.82); }

/* Gradient text — short elements only (§3.3) */
.grad-text {
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.on-dark .grad-text {
  background: linear-gradient(120deg, #7FE6FF 0%, #3FC0E6 50%, #A9E4F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gradient-brand);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease),
              filter var(--dur-micro) var(--ease);
  will-change: transform;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.985); }

/* Primary — gradient fill + 1px white inner highlight + azure drop shadow */
.btn--primary {
  color: var(--white);
  background-image: var(--gradient-brand);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover {
  filter: brightness(1.07);
  transform: scale(1.025);
  box-shadow: var(--shadow-cta-hover), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* On a dark section the gradient's navy end sinks into the background, so the
   primary CTA uses the bright variant to stay the most prominent thing in the
   fold. Still one gradient surface per fold — the hero wash is behind it. */
.on-dark .btn--primary {
  background-image: var(--gradient-bright);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.on-dark .btn--primary:hover {
  box-shadow: 0 14px 38px rgba(11, 18, 32, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

/* Secondary — WhatsApp / low-friction path */
.btn--ghost {
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.05);
}
.btn--ghost:hover {
  transform: scale(1.025);
  border-color: rgba(6, 121, 184, 0.4);
  box-shadow: 0 8px 22px rgba(11, 18, 32, 0.1);
}
.on-dark .btn--ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}
.on-dark .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--block { width: 100%; }
.btn__icon { width: 20px; height: 20px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
}
@media (max-width: 479px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   4b. Feature glyphs (inc/glyphs.php)
   Three layers — tint, stroke, accent — coloured by the container through
   `color`, `--glyph-accent` and `--glyph-ring`.
   -------------------------------------------------------------------------- */
.glyph { display: block; overflow: visible; }
.glyph .t  { fill: currentColor; opacity: 0.15; }
.glyph .s  { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph .f  { fill: currentColor; }
.glyph .a  { fill: var(--glyph-accent, #14B8E6); }
.glyph .as { fill: none; stroke: var(--glyph-accent, #14B8E6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph .ar { fill: var(--glyph-accent, #14B8E6); stroke: var(--glyph-ring, #FFFFFF); stroke-width: 1.8; stroke-linejoin: round; }

/* Focus-frame tile. Four viewfinder corners sit inside the tile and pull in
   toward the subject on hover, like a camera finding focus. Transform only. */
.gtile {
  --frame: rgba(6, 121, 184, 0.42);
  --frame-len: 7px;
  --frame-w: 1.5px;
  position: relative;
  isolation: isolate;
}
.gtile::after {
  content: "";
  position: absolute;
  inset: var(--frame-inset, 7px);
  pointer-events: none;
  background:
    linear-gradient(var(--frame) 0 0) top left     / var(--frame-len) var(--frame-w) no-repeat,
    linear-gradient(var(--frame) 0 0) top left     / var(--frame-w) var(--frame-len) no-repeat,
    linear-gradient(var(--frame) 0 0) top right    / var(--frame-len) var(--frame-w) no-repeat,
    linear-gradient(var(--frame) 0 0) top right    / var(--frame-w) var(--frame-len) no-repeat,
    linear-gradient(var(--frame) 0 0) bottom left  / var(--frame-len) var(--frame-w) no-repeat,
    linear-gradient(var(--frame) 0 0) bottom left  / var(--frame-w) var(--frame-len) no-repeat,
    linear-gradient(var(--frame) 0 0) bottom right / var(--frame-len) var(--frame-w) no-repeat,
    linear-gradient(var(--frame) 0 0) bottom right / var(--frame-w) var(--frame-len) no-repeat;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.gtile .glyph { transition: transform 0.35s var(--ease); }

/* Hover is taken from the whole card, not just the tile. */
.svc-card:hover .gtile::after,
.pillar:hover .gtile::after,
.numcard:hover .gtile::after,
.talk__row:hover .gtile::after,
.gtile:hover::after { transform: scale(0.82); }
.svc-card:hover .gtile .glyph,
.pillar:hover .gtile .glyph,
.numcard:hover .gtile .glyph,
.talk__row:hover .gtile .glyph,
.gtile:hover .glyph { transform: scale(1.06); }

/* Light tile surface, shared by the card icons. Doubled class so it outranks
   each section's own icon rule, which comes later in the file. */
.gtile.gtile--light {
  background: linear-gradient(150deg, #FFFFFF 0%, #EDF6FB 100%);
  box-shadow: 0 8px 22px rgba(11, 18, 32, 0.12), inset 0 0 0 1px rgba(6, 121, 184, 0.1);
}

/* Dark tile surface, for the showreel chips and the contact card */
.gtile.gtile--dark {
  --frame: rgba(120, 215, 240, 0.55);
  --glyph-accent: #3EE0FF;
  --glyph-ring: #0B2350;
  color: #CBE6F2;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---- Glyph placement, per container -------------------------------------- */

/* Service and "why" cards: large light tiles */
.svc-card__icon.gtile,
.pillar__icon.gtile { width: 68px; height: 68px; border-radius: 19px; }
.svc-card__icon .glyph,
.pillar__icon .glyph { width: 34px; height: 34px; }
.svc-card[data-accent="orange"] { --glyph-accent: #F43F5E; }
.svc-card[data-accent="orange"] .gtile { --frame: rgba(242, 104, 31, 0.45); }

/* Results cards keep their hue: tint surface, hue-coloured frame and ink,
   and an analogous accent so each card's glyph still reads as its own. */
.numcard__icon.gtile {
  width: 58px; height: 58px;
  border-radius: 16px;
  --frame-inset: 6px;
  --frame-len: 6px;
  --frame: color-mix(in srgb, var(--num-ink) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--num-ink) 14%, transparent);
}
.numcard__icon .glyph { width: 30px; height: 30px; }
.numcard[data-hue="violet"] { --glyph-accent: #22C3EE; }
.numcard[data-hue="mint"]   { --glyph-accent: #0679B8; }
.numcard[data-hue="peach"]  { --glyph-accent: #F43F5E; }
.numcard[data-hue="pink"]   { --glyph-accent: #6366F1; }

/* Showreel chips: small dark tiles need a tighter frame */
.chip__icon.gtile {
  width: 38px; height: 38px;
  border-radius: 11px;
  --frame-inset: 4px;
  --frame-len: 5px;
  --frame-w: 1.2px;
}
.chip__icon .glyph { width: 22px; height: 22px; }

/* Contact card rows */
.talk__ico.gtile {
  border: 0;
  width: 50px; height: 50px;
  border-radius: 14px;
  --frame-inset: 5px;
  --frame-len: 6px;
}
.talk__ico .glyph { width: 26px; height: 26px; }

/* Hero floating stat: glyph on its own, no tile */
.float-card__icon .glyph { width: 32px; height: 32px; }

/* Process tag chips: glyph inline with the label */
.pstep__tag .glyph { width: 20px; height: 20px; flex: none; color: var(--electric-blue); }

/* Closing-panel perks on the dark photo */
.lead__perks .glyph {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: 12px;
  color: #D4EAF4;
  --glyph-accent: #3EE0FF;
  --glyph-ring: #071429;
}

/* --------------------------------------------------------------------------
   5a. Site header / nav
   Sticky at every width. On phones it stays short (68px) so it and the
   bottom CTA bar together still leave most of the screen to the page.
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-head[data-stuck="true"] {
  border-bottom-color: rgba(228, 234, 242, 0.8);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 6px 24px rgba(11, 18, 32, 0.06);
}
/* Brand hairline that fades in under the stuck header */
.site-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48, 207, 234, 0.55) 30%, rgba(26, 141, 191, 0.55) 70%, transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.site-head[data-stuck="true"]::after { opacity: 1; }
html { scroll-padding-top: 76px; }
@media (min-width: 1000px) { html { scroll-padding-top: 92px; } }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}
@media (min-width: 1000px) { .nav { min-height: 84px; } }

.nav__logo { flex: none; margin-right: auto; }
.nav__logo img { height: clamp(40px, 4.4vw, 58px); width: auto; }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
@media (min-width: 1000px) { .nav__links { display: flex; } }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease);
}
.nav__link:hover { color: var(--electric-blue); text-decoration: none; }
.nav__link svg { width: 15px; height: 15px; transition: transform var(--dur-micro) var(--ease); }
.nav__item--open > .nav__link svg { transform: rotate(180deg); }

/* Services dropdown */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 292px;
  padding: 10px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(11, 18, 32, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease),
              visibility var(--dur-micro);
}
.nav__item--open > .nav__menu,
.nav__item--has-menu:hover > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.nav__menu a:hover { background: var(--cloud); color: var(--ink); text-decoration: none; }

.nav__cta { display: none; flex: none; }
@media (min-width: 1000px) { .nav__cta { display: inline-flex; } }
.nav__cta.btn { min-height: 50px; padding: 13px 24px; font-size: 0.9375rem; }

/* Burger — a soft tile with three brand-gradient bars of staggered length
   that settle into a cross while the menu is open. */
.nav__burger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, rgba(48, 207, 234, 0.55), rgba(26, 141, 191, 0.25) 50%, rgba(12, 72, 120, 0.35)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 18px rgba(26, 141, 191, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.nav__burger:active { transform: scale(0.94); }
.nav__burger-lines {
  position: relative;
  display: block;
  width: 20px; height: 14px;
}
.nav__burger-lines i {
  position: absolute;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #30CFEA, #1A8DBF 60%, #0C4878);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
}
.nav__burger-lines i:nth-child(1) { top: 0;    width: 20px; }
.nav__burger-lines i:nth-child(2) { top: 6px;  width: 14px; }
.nav__burger-lines i:nth-child(3) { top: 12px; width: 9px; }
@media (hover: hover) {
  .nav__burger:hover .nav__burger-lines i { width: 20px; }
}
.nav__burger[aria-expanded="true"] .nav__burger-lines i:nth-child(1) { top: 6px; width: 20px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-lines i:nth-child(2) { opacity: 0; width: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-lines i:nth-child(3) { top: 6px; width: 20px; transform: rotate(-45deg); }
@media (min-width: 1000px) { .nav__burger { display: none; } }

/* ---- Mobile menu: dark glass side sheet ------------------------------- */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.42s;
}
.mnav[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
@media (min-width: 1000px) { .mnav { display: none; } }

.mnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 16, 30, 0.62);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mnav[data-open="true"] .mnav__scrim { opacity: 1; }

.mnav__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  padding: 12px clamp(20px, 6vw, 32px) calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #E3F1F8;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(26, 141, 191, 0.38), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(48, 207, 234, 0.16), transparent 60%),
    linear-gradient(180deg, #0B3A60 0%, #072A48 55%, #041A2E 100%);
  box-shadow: -30px 0 80px rgba(2, 16, 30, 0.5);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  touch-action: pan-y;
}
/* Glowing leading edge */
.mnav__panel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(48, 207, 234, 0.2), #30CFEA 30%, #1A8DBF 70%, rgba(26, 141, 191, 0.15));
  box-shadow: 0 0 14px 1px rgba(48, 207, 234, 0.55);
}
.mnav[data-open="true"] .mnav__panel { transform: none; }
.mnav[data-dragging="true"] .mnav__panel,
.mnav[data-dragging="true"] .mnav__scrim { transition: none; }

.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin-bottom: clamp(10px, 3vh, 26px);
}
.mnav__caption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(227, 241, 248, 0.45);
}
.mnav__close {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-right: -8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease), background 0.2s var(--ease);
}
.mnav__close svg { width: 22px; height: 22px; }
.mnav__close:active { transform: rotate(90deg) scale(0.92); background: rgba(255, 255, 255, 0.12); }

.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__list > li,
.mnav__foot {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.mnav[data-open="true"] .mnav__list > li,
.mnav[data-open="true"] .mnav__foot {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease) calc(0.08s + var(--i) * 0.035s),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(0.08s + var(--i) * 0.035s);
}

.mnav__link {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(11px, 1.9vh, 16px) 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: left;
  color: #E3F1F8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease);
}
.mnav__link:hover { color: var(--white); text-decoration: none; }
.mnav__link:active { color: var(--cyan); }
/* Current section: cyan text plus a glowing dot */
.mnav__link[aria-current="true"] { color: var(--cyan); }
.mnav__link[aria-current="true"]::after {
  content: "";
  width: 7px; height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px 2px rgba(48, 207, 234, 0.7);
}
.mnav__toggle[aria-current="true"]::after { display: none; }
.mnav__chev {
  width: 20px; height: 20px;
  color: rgba(227, 241, 248, 0.7);
  transition: transform 0.35s var(--ease);
}
.mnav__toggle[aria-expanded="true"] .mnav__chev { transform: rotate(180deg); }

/* Services sub-list: grid-rows trick animates height without measuring */
.mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mnav__toggle[aria-expanded="true"] + .mnav__sub { grid-template-rows: 1fr; }
.mnav__sub > ul {
  min-height: 0;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(48, 207, 234, 0.28);
}
.mnav__sub li:first-child { padding-top: 2px; }
.mnav__sub li:last-child { padding-bottom: 8px; }
.mnav__sub a {
  display: block;
  padding: 8px 0;
  font-size: 0.9875rem;
  color: rgba(227, 241, 248, 0.72);
}
.mnav__sub a:hover { color: var(--white); text-decoration: none; }

.mnav__foot {
  margin-top: auto;
  padding-top: clamp(18px, 3.4vh, 30px);
}
.mnav__foot::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(18px, 3.4vh, 30px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}
.mnav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 18px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(140, 220, 255, 0.55);
  background: linear-gradient(135deg, #22A0CF 0%, #1A8DBF 45%, #0F6A9A 100%);
  box-shadow: 0 0 0 4px rgba(26, 141, 191, 0.12), 0 12px 34px rgba(26, 141, 191, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 4vw, 1rem);
  font-weight: 600;
  color: var(--white);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.mnav__cta:hover { text-decoration: none; box-shadow: 0 0 0 5px rgba(26, 141, 191, 0.18), 0 14px 38px rgba(26, 141, 191, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.mnav__cta:active { transform: scale(0.97); }
.mnav__cta span { flex: 1; }
.mnav__cta-ico { width: 22px; height: 22px; flex: none; }
.mnav__cta-go  { width: 20px; height: 20px; flex: none; transition: transform 0.25s var(--ease); }
.mnav__cta:hover .mnav__cta-go { transform: translateX(3px); }

.mnav__follow {
  margin: clamp(20px, 4vh, 34px) 0 12px;
  font-size: 0.8125rem;
  color: rgba(227, 241, 248, 0.5);
}
.mnav__socials { display: flex; gap: 10px; }
.mnav__socials a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(227, 241, 248, 0.82);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mnav__socials a:hover { color: var(--white); background: rgba(48, 207, 234, 0.14); border-color: rgba(48, 207, 234, 0.4); }
.mnav__socials svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .mnav__panel, .mnav__scrim, .mnav__list > li, .mnav__foot, .mnav__sub { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* --------------------------------------------------------------------------
   5b. Hero — light surface. The gradient lives on the CTA and accents only,
   which keeps §3.3's "one dominant gradient surface per fold" satisfied.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(24px, 2.6vw, 40px) clamp(40px, 4.5vw, 60px);
}

/* Soft brand wash behind the media side */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -12%;
  right: -8%;
  width: 64%;
  height: 124%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(48, 207, 234, 0.16), rgba(6, 121, 184, 0.07) 62%, transparent 100%);
  pointer-events: none;
}

.hero__blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.blob--1 {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  top: -18%; right: 4%;
  background: radial-gradient(circle at 40% 40%, rgba(48, 207, 234, 0.3), transparent 70%);
}
.blob--2 {
  width: 32vw; height: 32vw;
  min-width: 220px; min-height: 220px;
  bottom: -20%; left: -10%;
  background: radial-gradient(circle at 60% 40%, rgba(6, 121, 184, 0.16), transparent 70%);
}
.blob--3 {
  width: 24vw; height: 24vw;
  min-width: 180px; min-height: 180px;
  top: 46%; right: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(26, 141, 191, 0.16), transparent 70%);
}

.hero__grid {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr 1.06fr; gap: clamp(28px, 3vw, 44px); }
}

/* Eyebrow pill — shared by the hero and the brands section */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  border-radius: 999px;
  white-space: nowrap;
  background: #E8F4FA;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--electric-blue);
}
.pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--electric-blue);
}

.hero h1 {
  font-size: clamp(2.4rem, 4.9vw, 5.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: clamp(20px, 2.4vw, 28px);
  max-width: 13ch;
  text-wrap: balance;
}
.hero h1 .sell { color: var(--electric-blue); display: block; }

.hero__sub {
  font-size: clamp(1rem, 1.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 42ch;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }

@media (min-width: 1000px) {
  .hero .btn-row { flex-wrap: nowrap; }
  .hero .btn-row .btn { white-space: nowrap; }
}

/* Higher ROAS · Lower CPA · More Sales */
.hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 40px);
  margin-top: clamp(26px, 3vw, 38px);
}
.hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.hero__checks svg { width: 21px; height: 21px; flex: none; color: var(--electric-blue); }

/* ---- Media side ---------------------------------------------------------- */
.hero__media { position: relative; }

.shot {
  position: relative;
  aspect-ratio: 4 / 3.32;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(140deg, #DCE8F7 0%, #C6D8EE 55%, #B8CDE6 100%);
  /* Angled left edge, as in the reference. Intersecting with border-radius
     keeps the right-hand corners rounded and the slanted edge crisp. */
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 999px) {
  /* The slant costs too much image at narrow widths. */
  .shot { clip-path: none; aspect-ratio: 16 / 11; }
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown until a real production photo is dropped at the path in index.php. */
.shot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  color: #5B7597;
  background:
    radial-gradient(70% 60% at 60% 30%, rgba(255, 255, 255, 0.75), transparent 70%),
    linear-gradient(140deg, #DCE8F7 0%, #C2D6EF 55%, #AFC7E4 100%);
}
.shot__placeholder svg { width: 52px; height: 52px; opacity: 0.6; }
.shot__placeholder p {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 24ch;
  margin: 0;
}

/* Floating cards */
.float-card {
  position: absolute;
  z-index: 3;
  padding: 18px 22px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(11, 18, 32, 0.05), 0 20px 48px rgba(11, 18, 32, 0.14);
}

.float-card--stat {
  top: 16%;
  right: -2%;
  min-width: 196px;
}
.float-card--stat .float-card__icon { color: var(--electric-blue); margin-bottom: 8px; }
.float-card--stat .float-card__icon svg { width: 28px; height: 28px; }
.float-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--electric-blue);
  margin: 0 0 6px;
}
.float-card__label {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--slate);
}

@media (max-width: 599px) {
  .float-card--stat { top: 8px; right: 8px; min-width: 0; padding: 13px 16px; }
  .float-card--stat .float-card__icon { display: none; }
  .float-card__num { font-size: 1.625rem; }
  .float-card__label { font-size: 0.75rem; max-width: 11ch; }
}

/* Dot-grid decoration */
.hero__dots {
  position: absolute;
  z-index: 0;
  top: -8px;
  right: -10px;
  width: 132px;
  height: 92px;
  background-image: radial-gradient(var(--deep-navy) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  opacity: 0.32;
  pointer-events: none;
}
@media (max-width: 999px) { .hero__dots { display: none; } }

/* --------------------------------------------------------------------------
   5c. Brands section ("Brands That Trust Creative With Results")
   Static logo row with column rules, per the reference — replaces the
   earlier scrolling marquee.
   -------------------------------------------------------------------------- */
.brands {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 104px);
  text-align: center;
}
/* Faint brand wash in the corners, as in the reference */
.brands::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 2% 4%, rgba(6, 121, 184, 0.045), transparent 70%),
    radial-gradient(50% 60% at 99% 2%, rgba(48, 207, 234, 0.06), transparent 70%),
    radial-gradient(64% 54% at 50% 106%, rgba(26, 141, 191, 0.035), transparent 70%);
}

.brands__head { max-width: 1000px; margin: 0 auto clamp(40px, 5.5vw, 72px); }

.brands h2 {
  /* Deliberately larger than the --fs-h2 token: the reference treats this as
     a display heading, not a standard section header. */
  font-size: clamp(1.875rem, 3.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  max-width: 18ch;
  margin-inline: auto;
}
.brands h2 .accent { color: var(--electric-blue); }

.brands__lede {
  font-size: clamp(1rem, 1.3vw, 1.3125rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 54ch;
  margin-inline: auto;
}

/* Logo row. Column rules sit on every item that is not first in its row, so
   the formula changes with the column count at each breakpoint. */
.brands__logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  row-gap: clamp(28px, 4vw, 40px);
}
.brand {
  display: grid;
  place-items: center;
  padding-inline: clamp(12px, 2vw, 28px);
  min-height: 56px;
}
.brand:not(:nth-child(2n + 1)) { border-inline-start: 1px solid var(--line); }

@media (min-width: 640px) {
  .brands__logos { grid-template-columns: repeat(3, 1fr); }
  .brand:not(:nth-child(2n + 1)) { border-inline-start: 0; }
  .brand:not(:nth-child(3n + 1)) { border-inline-start: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .brands__logos { grid-template-columns: repeat(6, 1fr); row-gap: 0; }
  .brand:not(:nth-child(3n + 1)) { border-inline-start: 0; }
  .brand:not(:nth-child(6n + 1)) { border-inline-start: 1px solid var(--line); }
}

.brand img {
  width: auto;
  height: clamp(26px, 2.4vw, 34px);
  max-width: 100%;
  opacity: 0.86;
  /* Harmless on the monochrome placeholders; keeps real colour logos in
     line once they are dropped in. */
  filter: grayscale(1);
  transition: opacity var(--dur-micro) var(--ease), filter var(--dur-micro) var(--ease);
}
.brand:hover img { opacity: 1; filter: grayscale(0); }

/* Ruled footnote: "— TRUSTED BY 100+ GROWTH-DRIVEN BRANDS —" */
.brands__note {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin: clamp(40px, 5vw, 68px) auto 0;
  max-width: 1000px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.brands__note::before,
.brands__note::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* --------------------------------------------------------------------------
   5d. Why Super Vision — split intro + three feature cards
   -------------------------------------------------------------------------- */
.why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 104px);
}
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 100% 8%, rgba(48, 207, 234, 0.07), transparent 70%),
    radial-gradient(54% 50% at 0% 92%, rgba(6, 121, 184, 0.05), transparent 70%);
}

.why__grid {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
}
@media (min-width: 1000px) {
  .why__grid { grid-template-columns: 1fr 2.05fr; align-items: start; }
}

/* ---- Left column -------------------------------------------------------- */
.why__intro { position: relative; }

.why h2 {
  /* Sized to hold "Performance Is Just" on one line in the left column —
     the reference breaks this heading over three lines, not five. */
  font-size: clamp(1.75rem, 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.why h2 .dot { color: var(--electric-blue); }

.why__lede {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.65;
  color: var(--slate);
  max-width: 34ch;
  margin-bottom: clamp(24px, 3vw, 34px);
}

/* Text link with a sliding arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--electric-blue);
}
.text-link:hover { text-decoration: none; }
.text-link svg {
  width: 20px; height: 20px;
  transition: transform var(--dur-micro) var(--ease);
}
.text-link:hover svg { transform: translateX(4px); }

.why__dots {
  position: absolute;
  z-index: -1;
  left: -6px;
  bottom: clamp(-96px, -6vw, -40px);
  width: 148px;
  height: 104px;
  background-image: radial-gradient(var(--electric-blue) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  opacity: 0.22;
  pointer-events: none;
}
@media (max-width: 999px) { .why__dots { display: none; } }

/* ---- Cards -------------------------------------------------------------- */
.why__cards {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .why__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why__cards { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 14px 40px rgba(11, 18, 32, 0.08);
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  will-change: transform;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 56px rgba(11, 18, 32, 0.14);
}

.pillar__media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 22px 22px 14px 14px;
  overflow: visible;
}
.pillar__frame {
  position: absolute;
  inset: 0;
  border-radius: 22px 22px 14px 14px;
  overflow: hidden;
}
.pillar__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder art — a distinct wash per card until real stills are supplied. */
.pillar__ph { position: absolute; inset: 0; }
.pillar:nth-child(1) .pillar__ph {
  background:
    radial-gradient(75% 65% at 30% 20%, rgba(56, 189, 230, 0.4), transparent 65%),
    linear-gradient(150deg, #0E4A78 0%, #082E4E 100%);
}
.pillar:nth-child(2) .pillar__ph {
  background:
    radial-gradient(70% 70% at 72% 28%, rgba(196, 132, 252, 0.42), transparent 65%),
    linear-gradient(150deg, #4B2A6B 0%, #1B1338 100%);
}
.pillar:nth-child(3) .pillar__ph {
  background:
    radial-gradient(80% 70% at 70% 76%, rgba(56, 189, 248, 0.38), transparent 65%),
    linear-gradient(150deg, #0C3A60 0%, #061C33 100%);
}
.pillar__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(75% 70% at 50% 50%, #000 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 15%, transparent 80%);
}

/* Icon tile straddling the bottom edge of the image */
.pillar__icon {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: -26px;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--white);
  color: var(--electric-blue);
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.14);
}
.pillar__icon svg { width: 29px; height: 29px; stroke-width: 2; }

.pillar__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 48px clamp(20px, 1.6vw, 26px) clamp(20px, 1.6vw, 26px);
}
.pillar h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.pillar p {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

/* Footer row pinned to the bottom so all three cards line up */
.pillar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: clamp(22px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--electric-blue);
}
.pillar__foot:hover { text-decoration: none; }
.pillar__arrow {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--electric-blue);
  color: var(--electric-blue);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.pillar__arrow svg { width: 19px; height: 19px; }
.pillar__foot:hover .pillar__arrow {
  background: var(--electric-blue);
  color: var(--white);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   7c. Reels — vertical client work, previews play while on screen
   -------------------------------------------------------------------------- */
.reels {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: #070B14;
  padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 100px);
}
/* Continues the showreel section above: same ground, a softer glow. */
.reels::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 40%, rgba(6, 121, 184, 0.14), transparent 70%),
    radial-gradient(44% 56% at 90% 70%, rgba(26, 141, 191, 0.16), transparent 70%);
}

.reels__head {
  max-width: 820px;
  margin: 0 auto clamp(30px, 4vw, 52px);
  text-align: center;
}
.reels h2 {
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.reels h2 .accent { color: #4FD0EE; }
.reels__lede {
  font-size: clamp(0.9375rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  margin: 0 auto;
}

/* Desktop: four across. Below 1000px: a swipeable row, like stories. */
.reels__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
@media (max-width: 999px) {
  .reels__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    /* Bleed to the screen edge so the next card peeks in, inviting a swipe. */
    margin-inline: calc(var(--pad-x) * -1);
    padding: 4px var(--pad-x) 16px;
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .reels__track::-webkit-scrollbar { display: none; }
  .reels__item { flex: 0 0 min(68vw, 300px); scroll-snap-align: start; }
}

.reel-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: clamp(18px, 1.8vw, 24px);
  overflow: hidden;
  cursor: pointer;
  background: #0B1220;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  will-change: transform;
  text-align: left;
  font: inherit;
  color: var(--white);
}
.reel-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.reel-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.reel-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Legibility for the chips and title over any frame */
.reel-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(4, 8, 18, 0.55) 0%, transparent 22%),
    linear-gradient(to top, rgba(4, 8, 18, 0.88) 0%, rgba(4, 8, 18, 0.35) 30%, transparent 52%);
  pointer-events: none;
}

.reel-card__top {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.reel-card__chip {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.reel-card__chip--time { font-variant-numeric: tabular-nums; }

.reel-card__bottom {
  position: absolute;
  left: 16px; right: 14px; bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.reel-card__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reel-card__meta strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.reel-card__meta span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }

.reel-card__play {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease);
}
.reel-card__play svg { width: 16px; height: 16px; margin-left: 3px; }
.reel-card:hover .reel-card__play { transform: scale(1.1); }

.reels__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(30px, 4vw, 52px);
  text-align: center;
}
.reels__foot p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Reel player ---------------------------------------------------------- */
.reel-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.reel-modal[open] { display: grid; place-items: center; }
.reel-modal::backdrop { background: transparent; }

.reel-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, 0.9);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.reel-modal__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    "prev frame next"
    ".    info  .";
  align-items: center;
  column-gap: clamp(12px, 2.4vw, 32px);
  row-gap: 16px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s var(--ease), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.reel-modal[data-state="open"] .reel-modal__scrim { opacity: 1; }
.reel-modal[data-state="open"] .reel-modal__stage { opacity: 1; transform: none; }

.reel-modal__frame {
  grid-area: frame;
  height: min(80vh, 820px);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.reel-modal__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

.reel-modal__nav,
.reel-modal__close {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.reel-modal__nav:hover,
.reel-modal__close:hover { background: rgba(255, 255, 255, 0.22); }
.reel-modal__nav svg,
.reel-modal__close svg { width: 20px; height: 20px; }
.reel-modal__nav--prev { grid-area: prev; }
.reel-modal__nav--next { grid-area: next; }
.reel-modal__close { position: fixed; top: 18px; right: 18px; z-index: 2; }
.reel-modal__close:hover { transform: rotate(90deg); }

.reel-modal__info {
  grid-area: info;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  text-align: center;
}
.reel-modal__info strong { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }
.reel-modal__info span:last-child { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); }
.reel-modal__chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Phones: the video fills the height; arrows sit on either side of the caption. */
@media (max-width: 639px) {
  .reel-modal__stage {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "frame frame frame"
      "prev  info  next";
    column-gap: 10px;
    width: 100%;
    padding-inline: 16px;
  }
  /* The frame has a fixed ratio, so centre it in the full-width row rather
     than letting it sit at the start of the grid area. */
  .reel-modal__frame {
    justify-self: center;
    height: min(76vh, calc((100vw - 32px) * 16 / 9));
    border-radius: 16px;
  }
  .reel-modal__nav { width: 44px; height: 44px; justify-self: center; }
  .reel-modal__close { top: 10px; right: 10px; width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   6. Results — "Numbers Speak Louder Than Promises."
   Each card carries its own hue. These pastels sit outside the brief's
   palette (§3.2 keeps Amber for star ratings and nothing else) and come
   straight from the reference — see README.
   -------------------------------------------------------------------------- */
.nums {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 104px);
}
.nums::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 56% at 4% 46%, rgba(48, 207, 234, 0.09), transparent 70%),
    radial-gradient(46% 54% at 97% 30%, rgba(56, 189, 230, 0.09), transparent 70%);
}

.nums__head {
  max-width: 1150px;
  margin: 0 auto clamp(36px, 4.5vw, 58px);
  text-align: center;
}
.nums h2 {
  font-size: clamp(1.875rem, 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.nums h2 .accent { color: var(--electric-blue); }
.nums__lede {
  font-size: clamp(1rem, 1.3vw, 1.3125rem);
  color: var(--slate);
  margin: 0;
}

.nums__grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .nums__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .nums__grid { grid-template-columns: repeat(4, 1fr); } }

.numcard {
  --num-tint: rgba(6, 121, 184, 0.12);
  --num-ink: var(--electric-blue);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 12px 34px rgba(11, 18, 32, 0.06);
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  will-change: transform;
}
.numcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 20px 48px rgba(11, 18, 32, 0.11);
}

.numcard[data-hue="violet"] { --num-tint: rgba(99, 102, 241, 0.13); --num-ink: #4F46E5; }
.numcard[data-hue="mint"]   { --num-tint: rgba(20, 184, 166, 0.14); --num-ink: #0E9384; }
.numcard[data-hue="peach"]  { --num-tint: rgba(249, 115, 22, 0.14); --num-ink: #EA6A15; }
.numcard[data-hue="pink"]   { --num-tint: rgba(217, 70, 239, 0.13); --num-ink: #C026D3; }

.numcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.numcard__icon {
  width: 54px; height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--num-tint);
  color: var(--num-ink);
}
.numcard__icon svg { width: 26px; height: 26px; stroke-width: 2; }

/* Delta badge — green when the number going DOWN is the win */
.numcard__delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--num-tint);
  color: var(--num-ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numcard__delta[data-dir="down"] {
  background: rgba(18, 183, 106, 0.12);
  color: #047857;
}
.numcard__delta svg { width: 14px; height: 14px; stroke-width: 2.4; }

.numcard__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0 0 8px;
}
.numcard__label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.numcard__copy {
  font-size: clamp(0.9375rem, 1vw, 1rem);
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}

.nums__note {
  margin: clamp(26px, 3vw, 38px) auto 0;
  max-width: 900px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--slate-light);
}

/* --------------------------------------------------------------------------
   6b. Proof — real dashboard screenshots under the results cards
   -------------------------------------------------------------------------- */
.proof { margin-top: clamp(48px, 6vw, 88px); }

.proof__head { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
.proof__head h3 {
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.proof__head p { margin: 0; color: var(--slate); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); }

.proof__grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
@media (min-width: 1000px) {
  .proof__grid { grid-template-columns: 1.45fr 1fr; }
}
.proof__stack { display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start; }

.proof-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 12px 34px rgba(11, 18, 32, 0.07);
  overflow: hidden;
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  will-change: transform;
}
.proof-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 20px 46px rgba(11, 18, 32, 0.12);
}

/* A slim "window bar" so each screenshot reads as a real dashboard capture */
.proof-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cloud);
  border-bottom: 1px solid var(--line);
}
.proof-card__src {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.proof-card__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.proof-card__dot--meta { background: #0866FF; }
.proof-card__dot--ig { background: linear-gradient(135deg, #FEDA75, #D62976 55%, #4F5BD5); }
.proof-card__tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #047857;
  background: rgba(18, 183, 106, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.proof-card__shot { background: var(--white); }
.proof-card__shot img { width: 100%; height: auto; display: block; }
.proof-card--main .proof-card__shot { flex: 1 1 auto; display: flex; align-items: center; }

.proof-card__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}
.proof-card__cap strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.proof-card__cap span { font-size: 0.8125rem; color: var(--slate); }

.proof__cta { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }

/* --------------------------------------------------------------------------
   7. Services — "Everything You Need To Scale Creative."
   -------------------------------------------------------------------------- */
.svc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 104px);
}
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 54% at 3% 10%, rgba(6, 121, 184, 0.05), transparent 70%),
    radial-gradient(46% 52% at 98% 88%, rgba(48, 207, 234, 0.07), transparent 70%);
}

.svc__head {
  max-width: 1200px;
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  text-align: center;
}
.svc h2 {
  /* Sized so the full sentence holds one line on desktop, as in the
     reference — at 3vw it broke after "Need". */
  font-size: clamp(1.75rem, 2.6vw, 3.375rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.svc h2 .dot { color: var(--electric-blue); }
.svc__lede {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: var(--slate);
  /* Full head width: one line on wide screens, two at 1440 and below. */
  max-width: 960px;
  margin-inline: auto;
}

/* Hand-drawn "Ideas / Visuals / Results" margin note */
.scribble {
  position: absolute;
  z-index: 1;
  /* Clear of the sticky header, level with the heading. */
  top: clamp(48px, 5vw, 86px);
  right: clamp(8px, 1.5vw, 32px);
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9FB4D8;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
  text-align: center;
}
.scribble svg {
  width: 100%;
  height: 14px;
  margin-top: 2px;
  color: #B9C9E6;
  overflow: visible;
}
/* Purely decorative, and it collides with the heading on narrow screens. */
@media (max-width: 1199px) { .scribble { display: none; } }

/* ---- Cards -------------------------------------------------------------- */
.svc-grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
  grid-template-columns: 1fr;
}
/* The grid runs on double the visible column count, with every card spanning
   two tracks. That leaves room to shift a short final row into the centre —
   keyed off card count, so it keeps working if services are added or removed.
   Card widths are identical to a plain 2- or 3-column grid. */
@media (min-width: 680px) {
  .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-card { grid-column: span 2; }
  /* One card left over on its own row: centre it. */
  .svc-card:last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-card:last-child:nth-child(2n + 1) { grid-column: span 2; }
  /* Two cards on the last row: start the first one track in. */
  .svc-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  /* One card on the last row: centre it. */
  .svc-card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
}

.svc-card {
  --svc-accent: var(--electric-blue);
  --svc-accent-soft: rgba(6, 121, 184, 0.1);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 14px 40px rgba(11, 18, 32, 0.08);
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  will-change: transform;
}
/* One card carries a warm accent in the reference — see README. */
.svc-card[data-accent="orange"] {
  --svc-accent: #F2681F;
  --svc-accent-soft: rgba(242, 104, 31, 0.12);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 24px 56px rgba(11, 18, 32, 0.14);
}

.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 9.4;
  border-radius: 22px 22px 14px 14px;
}
.svc-card__frame {
  position: absolute;
  inset: 0;
  border-radius: 22px 22px 14px 14px;
  overflow: hidden;
}
.svc-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder wash per card until real stills land */
.svc-card__ph { position: absolute; inset: 0; }
.svc-card:nth-child(1) .svc-card__ph {
  background: radial-gradient(72% 66% at 32% 26%, rgba(48, 207, 234, 0.45), transparent 66%),
              linear-gradient(150deg, #0E4A78 0%, #081F38 100%);
}
.svc-card:nth-child(2) .svc-card__ph {
  background: radial-gradient(72% 66% at 62% 30%, rgba(251, 191, 136, 0.42), transparent 66%),
              linear-gradient(150deg, #5A4030 0%, #24160F 100%);
}
.svc-card:nth-child(3) .svc-card__ph {
  background: radial-gradient(74% 68% at 66% 70%, rgba(56, 189, 248, 0.4), transparent 66%),
              linear-gradient(150deg, #0C3A60 0%, #061C33 100%);
}
.svc-card:nth-child(4) .svc-card__ph {
  background: radial-gradient(72% 66% at 36% 70%, rgba(94, 234, 212, 0.34), transparent 66%),
              linear-gradient(150deg, #123F4F 0%, #08202B 100%);
}
.svc-card:nth-child(5) .svc-card__ph {
  background: radial-gradient(72% 66% at 68% 26%, rgba(244, 114, 182, 0.36), transparent 66%),
              linear-gradient(150deg, #4A2450 0%, #1C0F27 100%);
}
.svc-card__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(75% 70% at 50% 50%, #000 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 15%, transparent 80%);
}

.svc-card__icon {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: -26px;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--white);
  color: var(--svc-accent);
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.14);
}
.svc-card__icon svg { width: 29px; height: 29px; stroke-width: 2; }

.svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 46px clamp(20px, 1.6vw, 26px) clamp(22px, 1.8vw, 28px);
}

/* Title sits opposite the circled arrow */
.svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.svc-card h3 {
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.svc-card__arrow {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--svc-accent);
  color: var(--svc-accent);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.svc-card__arrow svg { width: 18px; height: 18px; }
.svc-card:hover .svc-card__arrow {
  background: var(--svc-accent);
  color: var(--white);
  transform: translateX(3px);
}

.svc-card__blurb {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--slate);
  margin: 0 0 clamp(18px, 2vw, 24px);
}

.svc-card__list { display: grid; gap: 11px; margin-bottom: clamp(20px, 2.2vw, 28px); }
.svc-card__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(0.9375rem, 1vw, 1rem);
  font-weight: 500;
  color: var(--ink);
}
.svc-card__list svg {
  width: 19px; height: 19px;
  flex: none;
  color: var(--svc-accent);
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--svc-accent);
}
.svc-card__more:hover { text-decoration: none; }
.svc-card__more svg {
  width: 19px; height: 19px;
  transition: transform var(--dur-micro) var(--ease);
}
.svc-card__more:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7b. Featured showreel — dark surface, video player with custom chrome
   -------------------------------------------------------------------------- */
.reelsec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #070B14;
  color: var(--white);
  padding-block: clamp(56px, 7vw, 100px);
}
.reelsec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 78% 24%, rgba(26, 141, 191, 0.22), transparent 70%),
    radial-gradient(42% 50% at 8% 78%, rgba(6, 121, 184, 0.14), transparent 70%);
}

.reelsec__grid {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .reelsec__grid { grid-template-columns: 0.86fr 2fr; }
}

/* ---- Left column -------------------------------------------------------- */
.reelsec__intro { position: relative; }

.pill--dark {
  background: rgba(6, 121, 184, 0.22);
  border: 1px solid rgba(95, 200, 235, 0.34);
  color: #DDEFF7;
}
.pill--dark::before { background: #7FDDF2; }

.reelsec h2 {
  font-size: clamp(1.875rem, 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}
.reelsec h2 .accent { color: #4FD0EE; display: block; }

.reelsec__lede {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 32ch;
  margin-bottom: clamp(22px, 2.6vw, 30px);
}

/* Oversized ghost wordmark, purely decorative */
.reelsec__ghost {
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 999px) { .reelsec__ghost { display: none; } }

/* ---- Player ------------------------------------------------------------- */
.player {
  position: relative;
  aspect-ratio: 16 / 9.6;
  border-radius: clamp(18px, 1.8vw, 26px);
  overflow: hidden;
  background: #0B1220;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.player__media { position: absolute; inset: 0; }
.player__media video,
.player__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stand-in until a poster or clip is supplied */
.player__ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 62% 44%, rgba(56, 189, 230, 0.34), transparent 66%),
    radial-gradient(50% 60% at 18% 70%, rgba(15, 106, 154, 0.22), transparent 66%),
    linear-gradient(150deg, #101E3C 0%, #060B16 100%);
}
.player__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(70% 66% at 50% 48%, #000 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 66% at 50% 48%, #000 15%, transparent 80%);
}

/* Big centre play button */
.player__play {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(66px, 6.4vw, 92px);
  height: clamp(66px, 6.4vw, 92px);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-micro) var(--ease);
}
.player__play svg { width: 26px; height: 26px; margin-left: 4px; }
.player__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.player[data-playing="true"] .player__play { opacity: 0; pointer-events: none; }

/* Stat chips down the right edge */
.player__stats {
  position: absolute;
  z-index: 3;
  top: clamp(14px, 2vw, 30px);
  right: clamp(12px, 1.6vw, 24px);
  display: grid;
  gap: clamp(8px, 1vw, 14px);
  width: min(42%, 244px);
}
@media (max-width: 679px) { .player__stats { display: none; } }

.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.1vw, 15px) clamp(12px, 1.2vw, 18px);
  border-radius: 14px;
  background: rgba(10, 21, 46, 0.72);
  border: 1px solid rgba(95, 200, 235, 0.28);
  backdrop-filter: blur(10px);
}
.chip__icon {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(6, 121, 184, 0.24);
  color: #7FDDF2;
}
.chip__icon svg { width: 18px; height: 18px; }
.chip__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.chip__label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

/* Control bar */
.player__bar {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(26px, 3vw, 40px) clamp(14px, 1.6vw, 24px) clamp(12px, 1.2vw, 18px);
  background: linear-gradient(transparent, rgba(4, 8, 18, 0.82) 55%);
}
.player__btn {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease);
}
.player__btn:hover { opacity: 0.75; }
.player__btn svg { width: 18px; height: 18px; }

.player__time {
  flex: none;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 479px) { .player__time { display: none; } }

.player__track {
  flex: 1 1 auto;
  height: 4px;
  min-width: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.player__fill {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 999px;
  background: var(--white);
  transform-origin: left center;
}

/* When there is no local clip, the bar is decoration only. */
.player[data-static="true"] .player__bar { pointer-events: none; }

/* Once the embed is in, YouTube brings its own chrome and the overlays would
   sit on top of the picture. */
.player[data-playing="true"] .player__bar,
.player[data-playing="true"] .player__stats { display: none; }

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mirror of .scribble--left, for a note on the right edge. */
.scribble--right {
  right: clamp(8px, 1.5vw, 28px);
  left: auto;
  transform: rotate(7deg);
}

.scribble--light { color: rgba(255, 255, 255, 0.34); }
.scribble--light svg { color: rgba(255, 255, 255, 0.28); }

/* --------------------------------------------------------------------------
   8. Process — numbered timeline of six steps
   -------------------------------------------------------------------------- */
.proc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 100px);
}
.proc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 2% 22%, rgba(48, 207, 234, 0.07), transparent 70%),
    radial-gradient(44% 52% at 99% 16%, rgba(56, 189, 230, 0.08), transparent 70%);
}

.proc__head {
  max-width: 1180px;
  margin: 0 auto clamp(34px, 4vw, 54px);
  text-align: center;
}
.proc h2 {
  font-size: clamp(1.75rem, 2.9vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.proc h2 .accent { color: var(--electric-blue); }
.proc__lede {
  font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
  color: var(--slate);
  margin: 0;
}

/* Soft panel behind the whole row */
.proc__track {
  position: relative;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(228, 234, 242, 0.8);
}

.proc__steps {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px)  { .proc__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .proc__steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .proc__steps { grid-template-columns: repeat(6, 1fr); } }

.pstep {
  position: relative;
  padding-top: 58px;
  display: flex;
  flex-direction: column;
}

/* The rail only reads as a timeline when the six steps sit on one row. */
.proc__steps::before {
  content: "";
  display: none;
  position: absolute;
  top: 22px;
  left: 6%;
  right: 6%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(6, 121, 184, 0.28) 6%,
    rgba(6, 121, 184, 0.28) 94%,
    transparent);
}
@media (min-width: 1300px) { .proc__steps::before { display: block; } }

.pstep__n {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: var(--electric-blue);
  box-shadow: 0 0 0 7px rgba(6, 121, 184, 0.12), 0 6px 16px rgba(6, 121, 184, 0.28);
}

.pstep__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(12px, 1vw, 16px);
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 10px 26px rgba(11, 18, 32, 0.05);
  transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  will-change: transform;
}
.pstep__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 18px 40px rgba(11, 18, 32, 0.1);
}

.pstep__shot {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: clamp(12px, 1.2vw, 18px);
  background: #101A2E;
}
.pstep__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pstep__ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 66% at 40% 30%, rgba(56, 189, 230, 0.32), transparent 66%),
    linear-gradient(150deg, #1A2A4E 0%, #0A1223 100%);
}
.pstep__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(72% 68% at 50% 50%, #000 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(72% 68% at 50% 50%, #000 15%, transparent 80%);
}

.pstep h3 {
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.pstep p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 clamp(14px, 1.4vw, 20px);
}

.pstep__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(6, 121, 184, 0.08);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}
.pstep__tag svg {
  width: 16px; height: 16px;
  flex: none;
  color: var(--electric-blue);
}

/* --------------------------------------------------------------------------
   9. Case studies — horizontal carousel
   Tag hues are per-card and sit outside the brief's palette, like the
   results cards — see README.
   -------------------------------------------------------------------------- */
.cs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 100px);
}
.cs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 52% at 2% 12%, rgba(48, 207, 234, 0.08), transparent 70%),
    radial-gradient(46% 56% at 99% 62%, rgba(56, 189, 230, 0.09), transparent 70%);
}

/* Margin note sits on the left in this section */
.scribble--left {
  left: clamp(8px, 1.5vw, 28px);
  right: auto;
  transform: rotate(-8deg);
}

.cs__head {
  display: grid;
  gap: 16px;
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 52px);
}
@media (min-width: 1000px) {
  .cs__head { grid-template-columns: 1fr auto; align-items: center; }
}
.cs__headtext { text-align: center; max-width: 1150px; margin-inline: auto; }
.cs h2 {
  font-size: clamp(1.75rem, 3.1vw, 3.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.cs h2 .accent { color: var(--electric-blue); }
.cs__lede {
  font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
  color: var(--slate);
  margin: 0;
}
.cs__viewall { justify-self: center; }
@media (min-width: 1000px) { .cs__viewall { justify-self: end; } }

/* ---- Carousel ----------------------------------------------------------- */
.cs__viewport {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  /* Room for the cards' drop shadows, which a clipped overflow would cut. */
  padding: 6px 6px 18px;
  margin: -6px -6px -18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.cs__viewport::-webkit-scrollbar { display: none; }

.cs-card {
  flex: 0 0 86%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 14px 40px rgba(11, 18, 32, 0.07);
}
@media (min-width: 680px)  { .cs-card { flex-basis: 58%; } }
@media (min-width: 1000px) { .cs-card { flex-basis: 40%; } }

/* Text left, image bleeding to the card's top-right corner */
.cs-card__top {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 420px) {
  .cs-card__top { grid-template-columns: 1fr 0.84fr; }
}
.cs-card__copy { padding: clamp(20px, 1.8vw, 26px); }

.cs-card__shot { position: relative; min-height: 170px; }
.cs-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card__ph { position: absolute; inset: 0; }
.cs-card:nth-child(1) .cs-card__ph {
  background: radial-gradient(70% 66% at 40% 30%, rgba(255, 255, 255, 0.5), transparent 68%),
              linear-gradient(150deg, #E8DCCF 0%, #C9B6A2 100%);
}
.cs-card:nth-child(2) .cs-card__ph {
  background: radial-gradient(70% 66% at 60% 28%, rgba(148, 163, 184, 0.5), transparent 68%),
              linear-gradient(150deg, #3C4756 0%, #171C25 100%);
}
.cs-card:nth-child(3) .cs-card__ph {
  background: radial-gradient(70% 66% at 44% 32%, rgba(167, 209, 178, 0.55), transparent 68%),
              linear-gradient(150deg, #6E8A73 0%, #2F4136 100%);
}

.cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  border-radius: 999px;
  background: var(--cs-tint, rgba(6, 121, 184, 0.12));
  color: var(--cs-ink, var(--electric-blue));
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.cs-card[data-hue="violet"] { --cs-tint: rgba(99, 102, 241, 0.13); --cs-ink: #4F46E5; }
.cs-card[data-hue="mint"]   { --cs-tint: rgba(20, 184, 166, 0.14); --cs-ink: #0E9384; }
.cs-card[data-hue="peach"]  { --cs-tint: rgba(249, 115, 22, 0.14); --cs-ink: #C2540B; }

.cs-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.cs-card__blurb {
  font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

/* Challenge · Creative · Result */
.cs-card__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 clamp(20px, 1.8vw, 26px);
  padding: clamp(16px, 1.6vw, 22px) 0;
  border-top: 1px solid var(--line);
}
.cs-card__facts > div { padding-inline: clamp(8px, 0.9vw, 14px); }
.cs-card__facts > div:first-child { padding-left: 0; }
.cs-card__facts > div:last-child { padding-right: 0; }
.cs-card__facts > div + div { border-left: 1px solid var(--line); }

.cs-card__facts dt {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.cs-card__facts dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--slate);
}
.cs-card__facts .is-result dd { font-weight: 700; color: var(--ink); }

/* Three columns in ~280px turns every value into a four-line stack. */
@media (max-width: 479px) {
  .cs-card__facts { grid-template-columns: 1fr; gap: 14px; }
  .cs-card__facts > div { padding-inline: 0; }
  .cs-card__facts > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
}

.cs-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: auto clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 26px);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--electric-blue);
}
.cs-card__more:hover { text-decoration: none; }
.cs-card__more svg {
  width: 18px; height: 18px;
  transition: transform var(--dur-micro) var(--ease);
}
.cs-card__more:hover svg { transform: translateX(4px); }

/* ---- Carousel controls -------------------------------------------------- */
.cs__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(22px, 2.6vw, 32px);
}

.cs__dots { display: flex; gap: 8px; margin-inline: auto; }
.cs__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #CBD5E1;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.cs__dot[aria-current="true"] { background: var(--electric-blue); transform: scale(1.15); }

.cs__arrows { display: flex; gap: 10px; }
.cs__arrow {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.06);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              opacity var(--dur-micro) var(--ease);
}
.cs__arrow svg { width: 19px; height: 19px; }
.cs__arrow:hover:not(:disabled) {
  background: var(--electric-blue);
  border-color: var(--electric-blue);
  color: var(--white);
}
.cs__arrow:disabled { opacity: 0.38; cursor: default; }

/* --------------------------------------------------------------------------
   10. Testimonials — carousel, centre card highlighted
   -------------------------------------------------------------------------- */
.tst {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 100px);
}
.tst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 54% at 3% 30%, rgba(48, 207, 234, 0.08), transparent 70%),
    radial-gradient(46% 54% at 98% 70%, rgba(56, 189, 230, 0.09), transparent 70%);
}

.tst__head {
  max-width: 1150px;
  margin: 0 auto clamp(32px, 4vw, 52px);
  text-align: center;
}
.tst h2 {
  font-size: clamp(1.75rem, 3.1vw, 3.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.tst h2 .accent { color: var(--electric-blue); }
.tst__lede {
  font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
  color: var(--slate);
  margin: 0;
}

/* Stage holds the scroller plus the two floating arrows */
.tst__stage { position: relative; }

.tst__viewport {
  display: flex;
  gap: clamp(16px, 1.8vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 6px 18px;
  margin: -6px -6px -18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.tst__viewport::-webkit-scrollbar { display: none; }

.tst-card {
  flex: 0 0 86%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 22px;
  background: #F6F8FD;
  border: 1px solid transparent;
  transition: background var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
@media (min-width: 680px)  { .tst-card { flex-basis: 56%; } }
@media (min-width: 1000px) { .tst-card { flex-basis: 31.5%; } }

/* The card nearest the viewport centre takes the warm treatment. */
.tst-card[data-active="true"] {
  background: linear-gradient(160deg, #FFF8F0 0%, #FDF3E7 100%);
  border-color: rgba(242, 104, 31, 0.16);
  box-shadow: 0 2px 6px rgba(11, 18, 32, 0.04), 0 18px 46px rgba(11, 18, 32, 0.09);
}

.tst-card__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 0.6;
  height: 0.62em;
  color: var(--electric-blue);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  user-select: none;
}
.tst-card[data-active="true"] .tst-card__mark { color: #F2681F; }

.tst-card blockquote {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.tst-card__who {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
  margin-top: auto;
}
.tst-card__avatar {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--white);
  background-image: var(--gradient-brand);
}
.tst-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tst-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.tst-card__role { display: block; font-size: 0.875rem; color: var(--slate); }

.tst-card__brand {
  margin-left: auto;
  padding-left: clamp(12px, 1.2vw, 18px);
  border-left: 1px solid rgba(11, 18, 32, 0.12);
}
.tst-card__brand img {
  height: 24px;
  width: auto;
  opacity: 0.8;
  filter: grayscale(1);
}
@media (max-width: 419px) { .tst-card__brand { display: none; } }

/* Arrows float over the stage edges, and clear of the cards on wide screens */
.tst__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.1);
  transition: background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease),
              opacity var(--dur-micro) var(--ease);
}
.tst__arrow svg { width: 19px; height: 19px; }
.tst__arrow:hover:not(:disabled) {
  background: var(--electric-blue);
  border-color: var(--electric-blue);
  color: var(--white);
}
.tst__arrow:disabled { opacity: 0.35; cursor: default; }
.tst__arrow--prev { left: 4px; }
.tst__arrow--next { right: 4px; }
/* Enough side gutter to sit outside the cards entirely. */
@media (min-width: 1300px) {
  .tst__arrow--prev { left: -62px; }
  .tst__arrow--next { right: -62px; }
}

.tst__controls {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.tst__dots { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   11. Lead capture — split panel, form left, dark pitch right
   -------------------------------------------------------------------------- */
.lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(48px, 6vw, 92px);
}
.lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 2% 18%, rgba(48, 207, 234, 0.07), transparent 70%),
    radial-gradient(44% 54% at 99% 82%, rgba(56, 189, 230, 0.08), transparent 70%);
}

.lead__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  background: linear-gradient(160deg, #FBFCFE 0%, #F2F6FC 100%);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.04), 0 28px 70px rgba(11, 18, 32, 0.1);
}
@media (min-width: 1000px) {
  .lead__panel { grid-template-columns: 1.28fr 1fr; }
}

/* ---- Left: the form ----------------------------------------------------- */
.lead__form-side {
  position: relative;
  padding: clamp(24px, 3vw, 52px);
}
.lead h2 {
  font-size: clamp(1.625rem, 2.7vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  max-width: 16ch;
}
.lead h2 .accent { color: var(--electric-blue); }
.lead__lede {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--slate);
  max-width: 44ch;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
}

/* Margin note sits inside the panel here, so it is positioned to it */
.lead__form-side .scribble {
  top: clamp(14px, 2vw, 30px);
  right: clamp(14px, 3vw, 60px);
}
@media (max-width: 1199px) { .lead__form-side .scribble { display: none; } }

/* Grid keeps the reference's zig-zag layout while the DOM stays in a sane
   tab order: name, email, phone, company, service, message, consent, submit. */
.lead__grid {
  display: grid;
  gap: clamp(12px, 1.2vw, 16px);
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "email"
    "phone"
    "company"
    "service"
    "message"
    "consent"
    "consenterr"
    "submit"
    "note";
}
@media (min-width: 720px) {
  /* Two even columns, every field before the call to action. The earlier
     four-column version squeezed "Company / Brand Name" into a quarter width
     where its placeholder was clipped, and left the submit button stranded
     beside a still-empty message box. */
  .lead__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name    email"
      "phone   company"
      "service service"
      "message message"
      "consent consent"
      "consenterr consenterr"
      "submit  submit"
      "note    note";
  }
}

[data-field="name"]    { grid-area: name; }
[data-field="email"]   { grid-area: email; }
[data-field="phone"]   { grid-area: phone; }
[data-field="company"] { grid-area: company; }
[data-field="service"] { grid-area: service; }
[data-field="message"] { grid-area: message; }
.lead__submit          { grid-area: submit; align-self: start; }
.lead__grid .consent   { grid-area: consent; margin: 4px 0 0; }
/* Its error sits directly under the checkbox — unplaced, it fell to the end
   of the grid below the privacy note. */
.lead__grid > [data-error="consent"] { grid-area: consenterr; margin-top: -4px; }
.lead__note            { grid-area: note; }

/* Icon-led controls */
.ctl { position: relative; display: flex; flex-direction: column; }
.ctl__icon {
  position: absolute;
  top: 17px;
  left: 16px;
  width: 19px; height: 19px;
  color: #8A97AC;
  pointer-events: none;
}
[data-field="message"] .ctl__icon { top: 17px; }

.ctl input,
.ctl select,
.ctl textarea {
  width: 100%;
  min-height: 54px;
  padding: 15px 16px 15px 46px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.ctl textarea { min-height: 124px; resize: vertical; line-height: 1.55; }

.ctl select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
  color: var(--ink);
}
.ctl select:invalid { color: #8A97AC; }
.ctl input::placeholder,
.ctl textarea::placeholder { color: #8A97AC; }

.ctl input:focus,
.ctl select:focus,
.ctl textarea:focus {
  outline: none;
  border-color: var(--electric-blue);
  box-shadow: 0 0 0 4px rgba(6, 121, 184, 0.13);
}
.ctl input:focus-visible,
.ctl select:focus-visible,
.ctl textarea:focus-visible { outline: none; }

[data-invalid="true"] .ctl input,
[data-invalid="true"] .ctl select,
[data-invalid="true"] .ctl textarea { border-color: #D92D20; }
[data-invalid="true"] .ctl__icon { color: #D92D20; }

.lead__submit.btn {
  width: 100%;
  min-height: 58px;
  white-space: nowrap;
}

.lead__note {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  color: var(--slate);
}
.lead__note svg { width: 16px; height: 16px; flex: none; color: var(--slate-light); }

/* ---- Right: the dark pitch panel ---------------------------------------- */
.lead__pitch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
  padding: clamp(28px, 3vw, 52px);
  color: var(--white);
  background: #071429;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1000px) {
  /* Angled leading edge, echoing the hero's image frame. The left padding
     clears the widest part of that cut (11% at the top) so no line of copy
     ever runs into the slant. */
  .lead__pitch {
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: calc(11% + clamp(24px, 2.6vw, 44px));
  }
}

/* Kicker sits at the top of the text column; the body is centred in the
   space that remains below it. */
.lead__pitch-body { margin-block: auto; }

.lead__pitch-bg { position: absolute; inset: 0; z-index: -2; }
.lead__pitch-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lead__pitch-ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 74% 32%, rgba(56, 189, 230, 0.4), transparent 66%),
    linear-gradient(150deg, #0E4A78 0%, #04121F 100%);
}
/* Scrim: white copy has to clear AA over whatever photo lands here. */
.lead__pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(4, 12, 28, 0.9) 0%, rgba(4, 12, 28, 0.72) 45%, rgba(4, 12, 28, 0.42) 100%);
}

.lead__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.lead__kicker span { white-space: nowrap; }
.lead__kicker span + span::before {
  content: "\00B7";
  margin: 0 0.7em;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 599px) { .lead__kicker { display: none; } }
/* Just above the two-column breakpoint the angled panel is too narrow to hold
   the line (it needs ~404px). Rather than break it with a stray separator,
   leave the purely decorative kicker out until there is room again. */
@media (min-width: 1000px) and (max-width: 1279px) { .lead__kicker { display: none; } }

.lead__pitch h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  max-width: 14ch;
}
.lead__pitch h3 .accent { color: #4FD0EE; display: block; }
/* Scoped to the body copy: an unscoped `.lead__pitch p` also caught the
   kicker (a <p>) and capped it at 34ch, forcing it onto two lines. */
.lead__pitch-body > p {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 34ch;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

/* Three equal columns; each divider sits on a column's leading edge with the
   same gap either side, so labels start at even intervals. */
.lead__perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 460px;
}
.lead__perks li {
  padding-inline: clamp(12px, 1.4vw, 20px);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}
.lead__perks li:first-child { padding-left: 0; }
.lead__perks li + li { border-left: 1px solid rgba(255, 255, 255, 0.22); }

/* Narrow phones: three columns can't hold "Opportunities", so the perks
   become a list — glyph beside each label, rules between rows. */
@media (max-width: 559px) {
  .lead__perks { grid-template-columns: 1fr; max-width: none; }
  .lead__perks li,
  .lead__perks li:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
  }
  .lead__perks li:first-child { padding-top: 0; }
  .lead__perks li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .lead__perks li br { display: none; }
  .lead__perks .glyph { width: 26px; height: 26px; margin-bottom: 0; flex: none; }
}
.lead__perks svg {
  display: block;
  width: 24px; height: 24px;
  margin-bottom: 12px;
  color: #4FD0EE;
}

/* ---- Shared form chrome: errors, consent, honeypot, states ------------- */
.field__error {
  font-size: 0.8125rem;
  color: #D92D20;
  margin: 6px 0 0;
}
.field__error:empty { display: none; }

/* Honeypot — hidden from humans and from assistive tech */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--slate);
}
.consent input[type="checkbox"] {
  width: 19px; height: 19px;
  min-height: 0;
  flex: none;
  margin-top: 1px;
  accent-color: var(--electric-blue);
  border-radius: 5px;
  cursor: pointer;
}
.consent label { margin: 0; font-weight: 400; font-size: 0.8125rem; color: var(--slate); }

/* Async submit states */
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 11px;
  font-size: 0.875rem;
  display: none;
}
.form-status[data-state="error"] {
  display: block;
  background: #FEF3F2;
  border: 1px solid #FDA29B;
  color: #B42318;
}

.btn[data-loading="true"] { pointer-events: none; opacity: 0.75; }
.btn__spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn[data-loading="true"] .btn__spinner { display: block; }
.btn[data-loading="true"] .btn__icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: none;
  text-align: center;
  padding: clamp(24px, 4vw, 44px) 10px;
}
.form-success[data-visible="true"] { display: block; }
.form-success__tick {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background-image: var(--gradient-brand);
  box-shadow: 0 10px 28px rgba(26, 141, 191, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.form-success__tick svg { width: 32px; height: 32px; }
.form-success h3 { margin-bottom: 10px; }

/* Success state replaces the form column only */
.lead .form-success,
.lead-modal .form-success { padding-block: clamp(20px, 3vw, 40px); }

/* --------------------------------------------------------------------------
   11b. Lead form popup
   A native <dialog> sized to the viewport; the scrim and panel inside it are
   what animate. Opening is a fade on the scrim plus a rise on the panel, both
   transform/opacity only. On phones the panel becomes a bottom sheet.
   -------------------------------------------------------------------------- */
html.modal-open { overflow: hidden; }

.lead-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
/* Only the open dialog lays out — setting display on the base rule would
   override the UA's display:none for a closed one. */
.lead-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}
.lead-modal::backdrop { background: transparent; }

.lead-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 34, 0.58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}

.lead-modal__panel {
  position: relative;
  width: min(540px, 100%);
  max-height: min(94vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 22px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F4F7FD 100%);
  box-shadow: 0 40px 100px rgba(6, 14, 34, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.34s var(--ease), transform 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Brand gradient hairline across the top edge */
.lead-modal__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 26px; right: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gradient-brand);
}

.lead-modal[data-state="open"] .lead-modal__scrim { opacity: 1; }
.lead-modal[data-state="open"] .lead-modal__panel { opacity: 1; transform: none; }

.lead-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.lead-modal__close svg { width: 18px; height: 18px; }
.lead-modal__close:hover {
  transform: rotate(90deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.lead-modal__head { padding-right: 44px; margin-bottom: 16px; }
/* Compact popup: the pill repeats what the heading says, so it goes. */
.lead-modal__head .pill { display: none; }
.lead-modal h2 {
  font-size: clamp(1.3rem, 2vw, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  outline: none;
}
.lead-modal h2 .accent { color: var(--electric-blue); }
.lead-modal__lede { font-size: 0.875rem; line-height: 1.5; color: var(--slate); margin: 0; }

/* Tighter controls inside the popup only — the inline form keeps its size. */
.lead-modal .lead__grid { gap: 10px; }
@media (min-width: 720px) { .lead-modal .lead__grid { column-gap: 10px; } }
.lead-modal .ctl input,
.lead-modal .ctl select,
.lead-modal .ctl textarea {
  min-height: 46px;
  padding: 11px 14px 11px 40px;
  font-size: 0.9063rem;
  border-radius: 11px;
}
.lead-modal .ctl select { padding-right: 38px; background-position: right 13px center; background-size: 16px; }
.lead-modal .ctl textarea { min-height: 74px; height: 74px; }
.lead-modal .ctl__icon { top: 14px; left: 13px; width: 17px; height: 17px; }
.lead-modal [data-field="message"] .ctl__icon { top: 14px; }
.lead-modal .lead__grid .consent { margin: 0; }
.lead-modal .consent label { font-size: 0.78rem; line-height: 1.45; }
.lead-modal .consent input[type="checkbox"] { width: 17px; height: 17px; }
.lead-modal .lead__submit.btn { min-height: 50px; padding-block: 12px; font-size: 0.9688rem; }
.lead-modal .lead__note { justify-content: center; font-size: 0.75rem; margin-top: -2px; }
.lead-modal .lead__note svg { width: 14px; height: 14px; }
.lead-modal .field__error { margin-top: 4px; font-size: 0.75rem; }
.lead-modal .form-status { margin-top: 10px; padding: 10px 12px; }

.lead-modal__alt {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--slate);
}
.lead-modal__alt a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-weight: 600;
  color: #128C4A;
}
.lead-modal__alt a svg { width: 17px; height: 17px; }
/* After a successful submit the success panel already offers WhatsApp. */
.lead-modal__body:has([data-success][data-visible="true"]) + .lead-modal__alt { display: none; }

/* Phones: a bottom sheet that slides up. Blur is dropped here — it is the
   most expensive part of the effect on mid-range Android. */
@media (max-width: 639px) {
  .lead-modal[open] { align-items: flex-end; padding: 0; }
  .lead-modal__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 14, 34, 0.62); }
  .lead-modal__panel {
    width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    padding: 24px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: opacity 0.2s var(--ease), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Grab handle */
  .lead-modal__panel::before {
    top: 9px; left: 50%; right: auto;
    width: 44px; height: 4px;
    margin-left: -22px;
    border-radius: 4px;
    background: #D0D8E6;
  }
}

/* --------------------------------------------------------------------------
   12. FAQ + "Let's Talk" contact card
   -------------------------------------------------------------------------- */
.faqsec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-block: clamp(56px, 7vw, 100px);
}
.faqsec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 3% 26%, rgba(48, 207, 234, 0.07), transparent 70%),
    radial-gradient(42% 52% at 99% 78%, rgba(56, 189, 230, 0.07), transparent 70%);
}

.faqsec__grid {
  display: grid;
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
@media (min-width: 1000px) {
  .faqsec__grid { grid-template-columns: 1.62fr 1fr; }
}

/* ---- Left: the accordion ------------------------------------------------ */
.faqsec__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(24px, 3vw, 38px);
}
.faqsec h2 {
  /* Sized to hold the full question on one line in the left column. */
  font-size: clamp(1.625rem, 2.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.faqsec h2 .accent { color: var(--electric-blue); }
.faqsec__lede {
  font-size: clamp(0.9375rem, 1.15vw, 1.1875rem);
  color: var(--slate);
  margin: 0;
}

.faq { display: grid; gap: clamp(10px, 1vw, 14px); }

/* <details> so the accordion still works with JavaScript disabled. */
.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 8px 24px rgba(11, 18, 32, 0.04);
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.faq__item[open] {
  border-color: rgba(6, 121, 184, 0.28);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 14px 36px rgba(11, 18, 32, 0.08);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(14px, 1.4vw, 19px) clamp(14px, 1.4vw, 20px);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }

.faq__n {
  flex: none;
  width: 38px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(6, 121, 184, 0.09);
  color: var(--electric-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.faq__item[open] .faq__n { background: var(--electric-blue); color: var(--white); }

.faq__chev {
  flex: none;
  margin-left: auto;
  width: 22px; height: 22px;
  color: var(--electric-blue);
  transition: transform var(--dur-micro) var(--ease);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }

.faq__a {
  padding: 0 clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
  /* Line the answer up under the question, past the number badge. */
  padding-left: calc(clamp(14px, 1.4vw, 20px) + 38px + clamp(12px, 1.2vw, 18px));
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.6;
  color: var(--slate);
}

/* ---- Right: the dark contact card --------------------------------------- */
.talk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: clamp(18px, 2vw, 26px);
  color: var(--white);
  background: linear-gradient(155deg, #1A8DBF 0%, #0C4E80 42%, #062A4A 100%);
  box-shadow: 0 20px 56px rgba(7, 28, 74, 0.32);
}
/* Decorative ribbons, bottom-right */
.talk::before,
.talk::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.talk::before {
  width: 62%;
  aspect-ratio: 1;
  right: -16%;
  bottom: -22%;
  background: radial-gradient(closest-side, rgba(80, 200, 235, 0.5), transparent 72%);
}
.talk::after {
  width: 44%;
  aspect-ratio: 1;
  right: -6%;
  bottom: -8%;
  background: radial-gradient(closest-side, rgba(130, 215, 240, 0.4), transparent 70%);
}

.talk .pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #E3F1F8;
}
.talk .pill::before { background: #7FDDF2; }

.talk h3 {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.talk__lede {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  max-width: 30ch;
}

.talk__list { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.talk__row {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
}
.talk__row:hover { text-decoration: none; }
.talk__row:hover .talk__value { text-decoration: underline; }
.talk__ico {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
}
.talk__ico svg { width: 21px; height: 21px; }
.talk__label {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}
.talk__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  word-break: break-word;
}
.talk__go {
  flex: none;
  margin-left: auto;
  width: 20px; height: 20px;
  color: rgba(255, 255, 255, 0.86);
  transition: transform var(--dur-micro) var(--ease);
}
.talk__row:hover .talk__go { transform: translateX(4px); }

.talk__foot {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  min-height: 56px;
}
.talk__sig {
  position: relative;
  display: inline-block;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transform: rotate(-5deg);
  user-select: none;
}
.talk__sig svg {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  overflow: visible;
}

/* --------------------------------------------------------------------------
   13. Closing CTA band + footer
   -------------------------------------------------------------------------- */
.closer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--white);
  background: linear-gradient(150deg, #147DAE 0%, #0C4E80 40%, #062A4A 100%);
  padding-block: clamp(52px, 6vw, 92px);
}
/* Soft ribbon shapes at both edges */
.closer::before,
.closer::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(280px, 26vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.closer::before {
  top: -30%;
  left: -8%;
  background: radial-gradient(closest-side, rgba(80, 200, 235, 0.45), transparent 72%);
}
.closer::after {
  bottom: -34%;
  right: -6%;
  background: radial-gradient(closest-side, rgba(56, 189, 230, 0.5), transparent 72%);
}

.closer__inner { position: relative; max-width: 1050px; margin-inline: auto; }

.closer .pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #E3F1F8;
}
.closer .pill::before { background: #7FDDF2; }

.closer h2 {
  font-size: clamp(1.75rem, 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.closer h2 .accent { color: #4FD0EE; }

.closer__lede {
  font-size: clamp(0.9375rem, 1.2vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin: 0 auto clamp(24px, 3vw, 36px);
}

.closer .btn-row { justify-content: center; margin-top: 0; }

/* No obligation · Tailored recommendations · Fast turnaround */
.closer__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px clamp(18px, 2.6vw, 40px);
  margin-top: clamp(24px, 3vw, 36px);
}
.closer__points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.875rem, 1vw, 1rem);
  color: rgba(255, 255, 255, 0.92);
}
.closer__points li + li { padding-left: clamp(18px, 2.6vw, 40px); border-left: 1px solid rgba(255, 255, 255, 0.24); }
@media (max-width: 719px) {
  .closer__points li + li { padding-left: 0; border-left: 0; }
}
.closer__points svg {
  width: 22px; height: 22px;
  flex: none;
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  padding: 3px;
}

/* The two margin notes flank the copy on wide screens only */
.closer .scribble { color: rgba(255, 255, 255, 0.5); }
.closer .scribble svg { color: rgba(255, 255, 255, 0.4); }
.closer .scribble--left { top: clamp(40px, 6vw, 96px); }
.closer .scribble--right { top: clamp(40px, 6vw, 96px); }
/* Below this the copy block leaves no clear margin for them. */
@media (max-width: 1439px) { .closer .scribble { display: none; } }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  background: var(--cloud);
  color: var(--slate);
  padding-block: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 30px);
  font-size: 0.9375rem;
}

.footer__top {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
}
/* Grid items default to min-width:auto — without this the map embed's
   intrinsic 600px width can push the whole page wider than a phone. */
.footer__top > * { min-width: 0; }
@media (min-width: 620px)  { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
@media (min-width: 1240px) { .footer__top { grid-template-columns: 1.35fr 0.85fr 0.85fr 0.85fr 1.9fr; } }

.footer__brand img { height: clamp(46px, 3.4vw, 58px); width: auto; }
.footer__blurb {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  max-width: 38ch;
  line-height: 1.6;
  color: var(--slate);
}

.footer h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(14px, 1.4vw, 18px);
}
.footer__list { display: grid; gap: 11px; }
.footer__list a { color: var(--slate); }
.footer__list a:hover { color: var(--electric-blue); text-decoration: none; }

.socials { display: flex; gap: 10px; margin-top: clamp(18px, 2vw, 24px); }
.socials a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.06);
  color: var(--slate);
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.socials a:hover { background: var(--electric-blue); color: var(--white); }
.socials svg { width: 19px; height: 19px; }

/* Map card — replaces the earlier newsletter signup */
.footer__map h4 { margin-bottom: clamp(12px, 1.2vw, 16px); }
.footer__map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #E6ECF5;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(11, 18, 32, 0.08);
}
.footer__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.footer__address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--slate);
}
.footer__address svg {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--electric-blue);
}
.footer__directions { margin-top: 10px; font-size: 0.9375rem; }
.footer__directions svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--slate-light);
}
.footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   14. Sticky mobile CTA bar (§7)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(11, 18, 32, 0.1);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.sticky-cta[data-visible="true"] { transform: translateY(0); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

.sticky-cta__icon {
  width: 50px;
  min-height: 50px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: var(--white);
}
.sticky-cta__icon svg { width: 21px; height: 21px; }
.sticky-cta .btn {
  min-width: 0;
  min-height: 50px;
  gap: 8px;
  padding-inline: 12px;
  font-size: clamp(0.8125rem, 3.9vw, 0.9375rem);
  white-space: nowrap;
  border-radius: 13px;
}
.sticky-cta .btn span { overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn .btn__icon { width: 17px; height: 17px; flex: none; }
/* Very narrow phones: the arrow gives way before the words do. */
@media (max-width: 350px) { .sticky-cta .btn .btn__icon { display: none; } }

/* leave room for the bar so the footer isn't covered */
@media (max-width: 899px) {
  body { padding-bottom: 72px; }
}

/* --------------------------------------------------------------------------
   15. Motion — GSAP hand-off + reduced motion (§5.2)
   -------------------------------------------------------------------------- */
/* Pre-animation state, only applied once JS confirms GSAP will run.
   Without this class nothing is hidden, so the page is fully readable
   with JS disabled or if the CDN fails. */
.js-anim [data-anim] { opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; }
  .reel__play::after { animation: none; }
  .js-anim [data-anim] { opacity: 1; }
}

/* Heading accents on light surfaces take the logo's own gradient — deep navy
   into its teal-blue — clipped to the text. Solid colour stays as fallback. */
.hero h1 .sell,
.brands h2 .accent, .nums h2 .accent, .proc h2 .accent, .cs h2 .accent,
.tst h2 .accent, .lead h2 .accent, .lead-modal h2 .accent, .faqsec h2 .accent {
  color: var(--electric-blue);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .sell,
  .brands h2 .accent, .nums h2 .accent, .proc h2 .accent, .cs h2 .accent,
  .tst h2 .accent, .lead h2 .accent, .lead-modal h2 .accent, .faqsec h2 .accent {
    background-image: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}