/* ─────────────────────────────────────────────────────────────────────
   Grid Velocity — main.css
   Shared stylesheet for all pages.
   1440px design width, scale-to-viewport via JS.
───────────────────────────────────────────────────────────────────── */

/* ── FONTS ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Boldonse';
  src: url('../fonts/Boldonse-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── RESET + ROOT ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange:      #EF4823;
  --orange-dark: #b53a1a;
  --black:       #0D0D0D;
  --white:       #FFFFFF;
  --offwhite:    #F5F4F2;
  --gray:        #888888;
  /* ── GV full brand palette ── */
  --gv-yellow:   #f0c133;
  --gv-black:    #1c1a1d;
  --gv-orange:   #ef4823;
  --gv-purple:   #552d74;
  --gv-green:    #a4c443;
  --gv-blue:     #a2d0ce;
  /* ── Custom easing curves ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: #0D0D0D;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'Archivo', sans-serif;
}

/* Scale wrapper — JS sets transform: scale(vw/1440) on this */
#scaler { width: 1440px; transform-origin: top left; }

/* ── SCREEN-READER ONLY utility (visually hidden but accessible) ──── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── SKIP LINK (accessibility) ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 9999;
  background: var(--black);
  color: #fff;
  padding: 10px 18px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: top 200ms;
}
.skip-link:focus { top: 12px; }

/* ── Global keyboard focus ring ─────────────────────────────────────
   Only fires for keyboard / sequential navigation (not mouse clicks).
   Uses the brand orange so the ring always feels intentional.        */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Suppress the focus ring on elements that supply their own indicator */
.ct-field input:focus-visible,
.ct-field textarea:focus-visible,
.ct-field select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239,72,35,0.28);
}
/* Accordion rows are full-width — inset the ring so it stays inside */
.sv-prow:focus-visible { outline-offset: -3px; border-radius: 0; }

/* ─────────────────────────────────────────────────────────────────────
   CUSTOM CURSOR
   Two-element pattern: outer positions via JS transform, inner is the
   visible dot with CSS transitions for size and opacity.
   mix-blend-mode: difference = white on dark, black on light — no need
   to track background colour explicitly.
───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   NAV
   Transparent over hero, morphs to pill on scroll.
───────────────────────────────────────────────────────────────────── */
.gv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 0;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(.5,.1,.25,1);
}
.gv-nav.hidden { transform: translateY(-100%); }

.gv-nav-inner {
  pointer-events: all;
  /* Always centered; we animate max-width between two numeric values so the
     stretch/shrink eases both ways. (max-width:none and margin:auto are not
     animatable — that was the abrupt snap when scrolling back to top.) */
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 68px;
  border-radius: 9999px;
  padding: 0 28px;
  transition: background-color 450ms cubic-bezier(.5,.1,.25,1),
              box-shadow 450ms cubic-bezier(.5,.1,.25,1),
              max-width 550ms cubic-bezier(.5,.1,.25,1),
              padding 450ms cubic-bezier(.5,.1,.25,1),
              height 450ms cubic-bezier(.5,.1,.25,1);
  background: transparent;
  max-width: calc(100% - 56px);
  position: relative;
}
.gv-nav.scrolled .gv-nav-inner {
  max-width: 1200px;
  height: 60px;
  background: var(--orange-dark);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06);
}

.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 42px; object-fit: contain; display: block; transition: height 300ms; }
.gv-nav.scrolled .nav-logo img { height: 36px; }

.nav-links {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-links a {
  font-family: 'Archivo', sans-serif;
  font-size: 15px; font-weight: 700;
  color: #fff; text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color 200ms ease;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0;
  position: relative;
}
/* Animated underline — scaleX from left on hover (non-dropdown links only) */
.nav-links > li:not(.has-sub) > a::before {
  content: '';
  position: absolute;
  bottom: 4px; left: 0;
  width: 100%; height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.23,1,.32,1);
  pointer-events: none;
}
.nav-links > li:not(.has-sub) > a:hover::before { transform: scaleX(1); }
.nav-links a:hover { color: rgba(255,255,255,0.9); }
/* "Services" parent is a hover-only dropdown trigger — never navigates */
.nav-links .nav-svc-label { cursor: default; }
.nav-links li.current > a { text-decoration: none; }
.nav-links li.current:not(.has-sub) > a::before { transform: scaleX(1); opacity: 0.55; }

/* Dropdown caret */
.nav-links .has-sub > a::after {
  content: '';
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 200ms;
  margin-left: 4px;
}
.nav-links .has-sub:hover > a::after { transform: rotate(-135deg) translateY(2px); }

.nav-sub {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px) scale(0.96);
  transform-origin: top center;
  background: var(--orange-dark);
  border-radius: 14px;
  padding: 14px 6px;
  min-width: 180px;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  list-style: none;
}
.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub:focus-within .nav-sub {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.nav-sub li a {
  display: block;
  padding: 9px 22px;
  font-size: 13px; letter-spacing: .08em; font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  border-radius: 8px;
}
.nav-sub li a:hover { color: #fff; background: rgba(255,255,255,0.1); opacity: 1; }
.nav-sub li.current > a { color: var(--orange); background: rgba(239,72,35,0.12); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--black);
  border: none; cursor: pointer;
  border-radius: 0;
  padding: 14px 26px;
  text-decoration: none;
  transition: background 200ms, color 200ms;
}
.nav-cta:hover  { background: #fff; color: var(--black); }
.nav-cta:active { transform: scale(0.97); }


/* ─────────────────────────────────────────────────────────────────────
   HERO
   Scattered mega-type layout, 1440×820px.
   Letters fall in with a stagger; astronaut lands after.
───────────────────────────────────────────────────────────────────── */
.hero {
  width: 1440px; height: 820px;
  background: var(--orange);
  position: relative; overflow: hidden;
  isolation: isolate;
}

/* Scrolling ambient text rows behind everything */
.hero-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb-row {
  position: absolute; left: -15%; width: 130%;
  display: flex;
  font-family: 'Boldonse', sans-serif; text-transform: uppercase;
  letter-spacing: -.02em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.22);
}
.amb-row.r1 { top: 3%;  font-size: 170px; line-height: 1; transform: rotate(-3deg); }
.amb-row.r2 { top: 42%; font-size: 120px; line-height: 1; transform: rotate(1deg); opacity: .65; }
.amb-row.r3 { top: 78%; font-size: 140px; line-height: 1; transform: rotate(2deg); }
.amb-scroll { display: flex; width: max-content; will-change: transform; }
.amb-scroll > span { padding-right: 48px; }
.amb-row.r1 .amb-scroll { animation: amb-x 55s linear infinite; }
.amb-row.r2 .amb-scroll { animation: amb-x 80s linear infinite reverse; }
.amb-row.r3 .amb-scroll { animation: amb-x 65s linear infinite; }
@keyframes amb-x { to { transform: translateX(-50%); } }

/* Mouse-follow spotlight */
.hero-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle 380px at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.16), transparent 60%);
  mix-blend-mode: overlay; opacity: 0; transition: opacity 500ms;
}
.hero.lit .hero-spot { opacity: 1; }

/* Corner labels */
.hero-corner {
  position: absolute; z-index: 5;
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); line-height: 1.6;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 700ms 200ms, transform 700ms 200ms;
}
.hero.lit .hero-corner { opacity: 1; transform: translateY(0); }
.hero-corner.tl { top: 104px; left: 60px; }
.hero-corner.tr { top: 104px; right: 60px; text-align: right; justify-content: flex-end; }
.hero-corner .star {
  width: 11px; height: 11px; display: inline-block; background: #fff;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Main headline container */
.hero-inner {
  position: relative; z-index: 4;
  display: block;
  text-align: left;
  padding: 0;
  width: 100%;
  min-height: 820px;
}
.hero-h1 {
  position: relative;
  width: 1440px; height: 680px;
  margin: 0 auto;
  font-family: 'Boldonse', sans-serif;
  font-size: 60px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -.02em;
  line-height: .95;
  text-align: left;
  z-index: 4;
}
/* Screen shake on astronaut landing */
.hero.astro-landed .hero-h1 { animation: shake 480ms cubic-bezier(.36,0,.2,1); }
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  15%  { transform: translate(-4px, 3px); }
  30%  { transform: translate(3px, -2px); }
  50%  { transform: translate(-2px, 2px); }
  70%  { transform: translate(2px, -1px); }
  85%  { transform: translate(-1px, 0); }
}

/* Scattered glyph words */
.glyph-word {
  position: absolute;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-end;
}
.glyph-word.gw1 { top: 25%; left: 80px;   font-size: 108px; }
.glyph-word.gw2 { top: 47%; left: 380px;  font-size: 158px; }
.glyph-word.gw3 { top: 75%; left: 140px;  font-size: 108px; }

/* Caption / sub-headline (top-right) */
.glyph-cap {
  position: absolute;
  top: 22%; right: 96px;
  width: 240px;
  text-align: right;
  font-family: 'Archivo', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  line-height: 1.7;
  opacity: 0; transform: translateY(8px);
  transition: opacity 700ms 1300ms, transform 700ms 1300ms;
}
.glyph-cap::before {
  content: ''; display: block; width: 48px; height: 1px; background: rgba(255,255,255,0.6);
  margin-left: auto; margin-bottom: 14px;
}
.hero.lit .glyph-cap { opacity: 1; transform: translateY(0); }

/* Individual character spans (created by JS) */
.glyph {
  display: inline-block; cursor: default;
  transform: translateY(-180%) rotate(-14deg);
  opacity: 0;
  transition:
    transform 800ms cubic-bezier(.34,1.56,.64,1),
    opacity 500ms ease,
    text-shadow 220ms ease;
  transition-delay: calc(var(--i,0) * 36ms);
  will-change: transform;
  position: relative; z-index: 2;
}
.hero.lit .glyph { transform: translateY(0) rotate(0); opacity: 1; }
/* Pop-out is gated behind .hero-ready so a cursor resting on a letter
   during page load can't trigger it before the intro animation finishes. */
.hero.hero-ready .glyph:hover {
  transform: translateY(-14px) scale(1.08) rotate(-3deg) !important;
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), text-shadow 220ms ease;
  text-shadow:
    -4px 2px 0 #ff5e3a,
    4px -2px 0 #00d4ff,
    0 0 32px rgba(255,255,255,0.5);
  z-index: 10;
}
.glyph-space { display: inline-block; width: .34em; }

/* Radial halo behind headline */
.hero-halo {
  position: absolute;
  left: 42%; top: 34%;
  width: 580px; height: 280px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2), transparent 60%);
  filter: blur(20px);
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity 1000ms 800ms;
}
.hero.lit .hero-halo { opacity: 1; }

/* Astronaut Lottie — bottom-right corner */
.astro-slot {
  position: absolute;
  right: 40px; bottom: 40px;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 3;
}
.astro-lottie {
  width: 100%; height: 100%;
  opacity: 0;
  transform: translateY(-600px) rotate(-12deg);
  /* Gravity fall: accelerates downward (ease-in) so the astronaut SLAMS into
     the ground at the end of the 750ms transition — the exact moment the
     shake + dust fire (astro-landed @ 2350ms). Keeps drop/shake/dust in sync. */
  transition: transform 750ms cubic-bezier(0.5, 0, 0.75, 0), opacity 200ms ease;
}
.hero.astro-fall .astro-lottie { opacity: 1; transform: translateY(0) rotate(0); }
.hero.astro-landed .astro-lottie { animation: astro-idle 4s ease-in-out 0.4s infinite; }
@keyframes astro-idle {
  0%,100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(-1deg); }
}

/* Landing dust puff */
.dust {
  position: absolute;
  right: 60px; bottom: 40px;
  width: 240px; height: 42px;
  pointer-events: none; z-index: 2; opacity: 0;
}
.dust span {
  position: absolute; bottom: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  filter: blur(4px);
  transform: scale(0);
}
.dust span:nth-child(1) { left: 6px;   width: 24px; height: 24px; }
.dust span:nth-child(2) { left: 30px;  width: 30px; height: 30px; }
.dust span:nth-child(3) { left: 60px;  width: 28px; height: 28px; }
.dust span:nth-child(4) { left: 88px;  width: 26px; height: 26px; }
.dust span:nth-child(5) { left: 114px; width: 22px; height: 22px; }
.hero.astro-landed .dust { animation: dust-show 1.1s ease-out forwards; }
.hero.astro-landed .dust span { animation: puff 900ms ease-out forwards; }
.hero.astro-landed .dust span:nth-child(1) { animation-delay: 0ms; }
.hero.astro-landed .dust span:nth-child(2) { animation-delay: 60ms; }
.hero.astro-landed .dust span:nth-child(3) { animation-delay: 30ms; }
.hero.astro-landed .dust span:nth-child(4) { animation-delay: 100ms; }
.hero.astro-landed .dust span:nth-child(5) { animation-delay: 140ms; }
@keyframes dust-show { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes puff {
  0%   { transform: scale(0) translateY(0); }
  40%  { transform: scale(1.4) translateY(-8px); }
  100% { transform: scale(2.4) translateY(-32px); opacity: 0; }
}

/* Hero CTA buttons */
.hero-cta-row {
  position: absolute; left: 80px; bottom: 96px; z-index: 4;
  display: flex; gap: 14px; justify-content: flex-start; margin-top: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms 1500ms, transform 600ms 1500ms;
}
.hero.lit .hero-cta-row { opacity: 1; transform: translateY(0); }

.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 28px; border-radius: 0;
  text-decoration: none;
  border: 1.5px solid #fff;
  color: #fff; background: transparent;
  transition: transform 160ms ease-out, background 200ms, color 200ms, border-color 200ms;
}
.hero-pill.solid { background: var(--black); color: #fff; border-color: var(--black); }
.hero-pill:hover  { background: #fff; color: var(--black); }
.hero-pill:active { transform: scale(0.97); }
.hero-pill.solid:hover  { background: #fff; color: var(--black); border-color: #fff; }
.hero-pill.solid:active { transform: scale(0.97); }

/* Vertical scroll indicator */
.scroll-ind {
  position: absolute;
  right: 380px; bottom: 80px;
  z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  opacity: 0; transition: opacity 600ms 2400ms;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero.lit .scroll-ind { opacity: 1; }
.scroll-ind .bar {
  width: 1px; height: 42px;
  background: rgba(255,255,255,0.25);
  position: relative; overflow: hidden;
}
.scroll-ind .bar::after {
  content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: #fff;
  animation: scroll-flow 1.8s ease-in-out infinite;
}
@keyframes scroll-flow { 0% { top: -50%; } 100% { top: 100%; } }


/* ─────────────────────────────────────────────────────────────────────
   LOGO STRIP — infinite ticker, white background
───────────────────────────────────────────────────────────────────── */
.logo-strip {
  width: 1440px;
  background: var(--white);
  padding: 48px 0 20px;
  overflow: hidden;
  border: none;
}
.logo-strip-inner {
  display: flex;
  width: max-content;
  align-items: center;
  animation: scroll-logos 38s linear infinite;
}
@keyframes scroll-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item {
  flex-shrink: 0;
  padding: 0 56px;
  display: flex; align-items: center; justify-content: center;
  height: 64px;
}
.logo-item img {
  max-height: 48px; max-width: 160px;
  object-fit: contain;
  filter: grayscale(1); opacity: .7;
  transition: filter 250ms, opacity 250ms;
}
.logo-item img:hover { filter: none; opacity: 1; }


/* ─────────────────────────────────────────────────────────────────────
   SPECIALISTS
───────────────────────────────────────────────────────────────────── */
.specialists {
  width: 1440px;
  background: var(--white);
  padding: 80px 80px 180px;
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 80px;
  align-items: start;
}
.spec-left h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 54px; line-height: 1.4;
  color: var(--black);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.spec-left h2 .accent { color: var(--orange); }
.spec-right { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.spec-right p {
  font-family: 'Archivo', sans-serif;
  font-size: 22px; line-height: 1.65;
  color: #3a3a3a;
  text-wrap: pretty;
}
.spec-right p .muted { color: #bcbcbc; }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--black); border: none;
  padding: 14px 28px;
  cursor: pointer; text-decoration: none;
  transition: background 200ms, transform 160ms ease-out;
  margin-top: 14px;
  width: fit-content;
}
.btn-dark:hover  { background: var(--orange); }
.btn-dark:active { transform: scale(0.97); }


/* ─────────────────────────────────────────────────────────────────────
   SERVICES — orange background, 4-column grid, hover reveals white
───────────────────────────────────────────────────────────────────── */
.services {
  width: 1440px;
  background: var(--orange);
  padding: 120px 20px;
}
.services-head {
  text-align: center; margin-bottom: 64px;
  padding: 0 20px;
}
.services-head h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 52px; line-height: 1.4;
  color: #fff;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.services-head p {
  font-family: 'Archivo', sans-serif;
  font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.85);
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 20px;
}
.svc-card {
  position: relative;
  height: 486px;
  overflow: hidden;
  cursor: pointer;
}
.svc-orbg   { position: absolute; inset: 0; background: rgba(255,255,255,0.08); z-index: 0; }
.svc-whitebg {
  position: absolute; inset: 0; background: #fff; z-index: 1;
  transform: translateY(100%);
  transition: transform 500ms cubic-bezier(.76,0,.24,1);
}
.svc-card:hover .svc-whitebg { transform: translateY(0); }

.svc-num {
  position: absolute; left: 22px; top: 6px; z-index: 2;
  font-family: 'Boldonse', sans-serif; font-size: 110px; line-height: 1;
  color: #fff; mix-blend-mode: overlay;
  transition: color 300ms; pointer-events: none;
}
.svc-card:hover .svc-num { color: rgba(239,72,35,0.12); mix-blend-mode: normal; }

.svc-astro {
  position: absolute;
  left: 50%; top: 115px; transform: translate(-50%, 12px);
  width: 170px; height: 170px; object-fit: contain;
  z-index: 2;
  opacity: 0;
  transition: opacity 400ms 80ms, transform 400ms 80ms;
}
.svc-card:hover .svc-astro { opacity: 1; transform: translate(-50%, 0); }

.svc-name {
  position: absolute; left: 22px; bottom: 78px; z-index: 2;
  font-family: 'Boldonse', sans-serif; font-size: 30px; line-height: 1.15;
  color: #fff; letter-spacing: -.01em; text-transform: uppercase;
  transition: color 300ms;
}
.svc-card:hover .svc-name { color: var(--orange); }

.svc-desc {
  position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 2;
  font-family: 'Archivo', sans-serif; font-size: 14px; line-height: 1.45;
  color: #444;
  opacity: 0;
  transition: opacity 300ms 80ms;
}

.svc-btn {
  position: absolute; left: 22px; bottom: 24px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--black);
  padding: 11px 18px; text-decoration: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 280ms 150ms, transform 280ms 150ms, background 180ms;
}
.svc-card:hover .svc-btn { opacity: 1; transform: translateY(0); }
.svc-btn:hover { background: var(--orange); }
.svc-card:hover .svc-desc { bottom: 78px; }


/* ─────────────────────────────────────────────────────────────────────
   FEATURED WORK — white, 2-column grid, g-mask hover effect
───────────────────────────────────────────────────────────────────── */
.featured {
  width: 1440px;
  background: var(--white);
  padding: 140px 88px;
}
.featured-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 80px;
}
.featured-head h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 52px; line-height: 1.4;
  color: var(--black);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.featured-head h2 .accent { color: var(--orange); }
.featured-head p {
  font-family: 'Archivo', sans-serif;
  font-size: 18px; line-height: 1.55; color: var(--gray);
  padding-top: 12px;
}

.work-grid   { display: flex; flex-direction: column; gap: 48px; }
.work-row    { display: flex; gap: 32px; justify-content: space-between; }
.work-card   { width: 616px; cursor: pointer; text-decoration: none; }

.work-thumb {
  width: 100%; aspect-ratio: 16 / 11;
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
}
.work-thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition:
    transform 600ms cubic-bezier(.76,0,.24,1),
    -webkit-mask-size 600ms cubic-bezier(.76,0,.24,1),
    mask-size 600ms cubic-bezier(.76,0,.24,1),
    filter 500ms ease;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'><rect width='100' height='100' fill='black'/></svg>");
  mask-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'><rect width='100' height='100' fill='black'/></svg>");
  -webkit-mask-size: 200% 200%;
  mask-size:         200% 200%;
  -webkit-mask-position: center;
  mask-position:         center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
}
.work-card:hover .work-thumb-img {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><text x='50' y='100' text-anchor='middle' font-family='Archivo Black, Archivo, sans-serif' font-size='130' font-weight='900' fill='black'>g</text></svg>");
  mask-image:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><text x='50' y='100' text-anchor='middle' font-family='Archivo Black, Archivo, sans-serif' font-size='130' font-weight='900' fill='black'>g</text></svg>");
  -webkit-mask-size: 108% 108%;
  mask-size:         108% 108%;
  transform: scale(.98);
  filter: saturate(1.12) contrast(1.04);
}

.work-info   {
  padding-top: 22px;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
.work-card:hover .work-info { transform: translateY(-4px); }
.work-title  {
  font-family: 'Boldonse', sans-serif;
  font-size: 22px; color: var(--black); line-height: 1.2;
  letter-spacing: -.005em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.work-card:hover .work-title { color: var(--orange); }
.work-cat {
  font-family: 'Archivo', sans-serif;
  font-size: 15px; color: var(--gray);
  margin-top: 8px; line-height: 1.5;
}
.work-cta { text-align: center; margin-top: 60px; }
.work-cta a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--black); text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--black);
  transition: color 200ms, border-color 200ms;
}
.work-cta a:hover { color: var(--orange); border-color: var(--orange); }


/* ─────────────────────────────────────────────────────────────────────
   CTA SECTION — orange, two cards (white + black)
───────────────────────────────────────────────────────────────────── */
.cta-section { width: 1440px; background: var(--orange); padding: 120px 60px; }
.cta-head    { text-align: center; margin-bottom: 80px; }
.cta-head h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 52px; line-height: 1.4; color: #fff;
  letter-spacing: -.01em; text-transform: uppercase;
  margin-bottom: 18px;
}
.cta-head p {
  font-family: 'Archivo', sans-serif; font-size: 20px; line-height: 1.5; color: rgba(255,255,255,0.9);
}

.cta-cards  { display: flex; gap: 20px; justify-content: center; }
.cta-card   {
  flex: 1; max-width: 650px; height: 448px; position: relative; overflow: hidden;
  transition: transform 360ms cubic-bezier(.22,1,.36,1), box-shadow 360ms;
}
.cta-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px rgba(0,0,0,0.22); }
.cta-card-white { background: var(--white); }
.cta-card-black { background: var(--black); border: 1px solid rgba(112,112,112,0.34); }

.cta-inner  { position: absolute; left: 34px; top: 32px; right: 34px; }
.cta-label  {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
}
.cta-card-white .cta-label { color: #404040; }
.cta-card-black .cta-label { color: #aaa; }

.cta-title {
  font-family: 'Boldonse', sans-serif; font-size: 26px; line-height: 1.28;
  color: var(--orange); margin-top: 10px;
  letter-spacing: -.005em; text-transform: uppercase;
}

.cta-divider { position: absolute; left: 0; right: 0; top: 248px; height: 1px; }
.cta-card-white .cta-divider { background: rgba(0,0,0,0.1); }
.cta-card-black .cta-divider { background: rgba(255,255,255,0.1); }

.cta-desc {
  position: absolute; left: 34px; right: 34px; top: 280px;
  font-family: 'Archivo', sans-serif; font-size: 17px; line-height: 1.65;
}
.cta-card-white .cta-desc { color: #404040; }
.cta-card-black .cta-desc { color: #aaa; }

.cta-btn { position: absolute; left: 34px; bottom: 34px; }
.cta-lottie {
  position: absolute; right: 18px; top: 18px;
  width: 210px; height: 210px; object-fit: contain;
  pointer-events: none;
}

.btn-outline-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
  padding: 13px 28px;
  cursor: pointer; text-decoration: none;
  transition: background 200ms, border-color 200ms, color 200ms, transform 160ms ease-out;
}
.btn-outline-white:hover  { background: #fff; color: #000; border-color: #fff; }
.btn-outline-white:active { transform: scale(0.97); }


/* ─────────────────────────────────────────────────────────────────────
   FOOTER — black, GIF masked through logo, nav columns bottom-right
   Note: footer-anim.gif is ~17MB. Convert to <video> when optimising.
───────────────────────────────────────────────────────────────────── */
footer {
  width: 1440px;
  background: #0D0D0D;
  position: relative;
  min-height: 840px;
  overflow: hidden;
}

.footer-art {
  /* Container — holds the logo img + GIF overlay */
  position: absolute; left: 40px; top: 50px;
  width: 720px; height: 180px;
  pointer-events: none; user-select: none;
}
/* Always-visible white logo PNG */
.footer-art-logo {
  display: block;
  height: 72px; width: auto;
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  opacity: 0.55;
}
/* Animated GIF masked into logo shape (enhancement) */
.footer-art-gif {
  position: absolute; inset: 0;
  background-image: url('../assets/footer-anim.gif');
  background-size: auto 100%;
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-mask-image: url('../assets/logo-long-white.png');
  mask-image:         url('../assets/logo-long-white.png');
  -webkit-mask-size: auto 100%;
  mask-size:         auto 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
  -webkit-mask-position: left center;
  mask-position:         left center;
}

.footer-cols { position: absolute; right: 60px; top: 91px; display: flex; gap: 60px; }
.footer-col h4 {
  font-family: 'Boldonse', sans-serif; font-size: 14px;
  color: rgba(255,255,255,0.32); margin-bottom: 24px;
  text-transform: uppercase; letter-spacing: .05em;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col ul li a {
  font-family: 'Archivo', sans-serif; font-size: 15px;
  color: rgba(255,255,255,0.65); text-decoration: none;
  transition: color 200ms;
}
.footer-col ul li a:hover { color: #fff; }
.badge-hiring {
  font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700;
  background: var(--orange); color: #fff; padding: 2px 9px;
  border-radius: 20px; margin-left: 8px;
  vertical-align: middle; letter-spacing: .05em;
}

.footer-cta {
  position: absolute; left: 0; right: 0; top: 433px;
  border-top: 1px solid rgba(112,112,112,0.34);
  padding: 50px 60px 0;
}
.footer-cta-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer-cta-h {
  font-family: 'Boldonse', sans-serif; font-size: 32px; line-height: 1.55; color: #fff;
  letter-spacing: -.01em; text-transform: uppercase;
}
.footer-cta-right { width: 520px; }
.footer-cta-desc {
  font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.5); margin-bottom: 22px;
}

.footer-bottom {
  position: absolute; left: 0; right: 0; top: 645px;
  border-top: 1px solid rgba(112,112,112,0.2);
  padding: 14px 60px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom span,
.footer-bottom a {
  font-family: 'Archivo', sans-serif; font-size: 13px;
  color: rgba(255,255,255,0.35); text-decoration: none;
}
.footer-bottom a:hover { color: #fff; }


/* ─────────────────────────────────────────────────────────────────────
   SCROLL REVEAL — applied by IntersectionObserver
───────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.on { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 120ms; }
.reveal.d2 { transition-delay: 220ms; }
.reveal.d3 { transition-delay: 320ms; }
.reveal.d4 { transition-delay: 420ms; }


/* ─────────────────────────────────────────────────────────────────────
   SHOWREEL — edge-to-edge video section
───────────────────────────────────────────────────────────────────── */
.showreel {
  width: 1440px;
  background: var(--black);
  line-height: 0;
}
.showreel-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.showreel-vid {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.showreel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.28) 50%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms;
  cursor: pointer;
}
/* While playing, fade the overlay out but keep it pointer-interactive so clicking pauses */
.showreel-overlay.playing {
  opacity: 0;
}
/* Hover while playing reveals a subtle pause affordance */
.showreel-overlay.playing:hover {
  opacity: 1;
}
.showreel-play-btn {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.showreel-play-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: #fff;
  transform: scale(1.08);
}
/* Pause icon shown when playing */
.showreel-play-btn .pause-icon {
  display: none;
  gap: 5px;
  align-items: center;
}
.showreel-overlay.playing .showreel-play-btn .play-triangle { display: none; }
.showreel-overlay.playing .showreel-play-btn .pause-icon { display: flex; }
.pause-bar {
  width: 5px; height: 22px;
  background: #fff;
  border-radius: 2px;
}
.play-triangle {
  width: 0; height: 0;
  border-style: solid;
  border-width: 13px 0 13px 24px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.showreel-label {
  position: absolute;
  left: 56px; bottom: 48px;
  display: flex; flex-direction: column; gap: 4px;
  line-height: 1;
}
.showreel-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.showreel-title {
  font-family: 'Boldonse', sans-serif; font-size: 28px;
  color: #fff; letter-spacing: -.01em; text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────────────
   NAV TOGGLE + MOBILE DRAWER
───────────────────────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: none; border: none;
  padding: 10px 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
/* 2-line hamburger → × on open (span 1 down + rotate, span 2 up + rotate) */
.gv-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.gv-nav.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 990;
  display: flex; flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  padding: 96px 36px 56px;
  opacity: 0; visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 300ms cubic-bezier(.4,0,.2,1),
              visibility 300ms,
              transform 300ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-drawer.open {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}
.drawer-links {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 44px;
}
.drawer-links li a {
  font-family: 'Boldonse', sans-serif;
  font-size: clamp(36px, 11.5vw, 48px);
  line-height: 1.3;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  letter-spacing: -.02em; text-transform: uppercase;
  transition: color 200ms, letter-spacing 200ms;
  display: block;
}
.drawer-links li a:hover { color: var(--orange); letter-spacing: -.01em; }

/* Hamburger: Services accordion toggle + collapsible sub-links */
.drawer-svc { display: block; }
.drawer-svc-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Boldonse', sans-serif;
  font-size: clamp(36px, 11.5vw, 48px);
  line-height: 1.3;
  color: rgba(255,255,255,0.88);
  text-transform: uppercase; letter-spacing: -.02em;
  transition: color 200ms, letter-spacing 200ms;
  text-align: left;
}
.drawer-svc-toggle:hover { color: var(--orange); letter-spacing: -.01em; }
.drawer-svc-chevron {
  font-size: 0.5em;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
  margin-left: 12px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}
.drawer-svc.open .drawer-svc-chevron { transform: rotate(180deg); }

.drawer-sub {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
  margin: 0; padding: 0 0 0 18px;
  border-left: 1px solid rgba(255,255,255,0.15);
  max-height: 0; overflow: hidden;
  transition: max-height 380ms cubic-bezier(.4,0,.2,1),
              opacity 280ms ease;
  opacity: 0;
}
.drawer-svc.open .drawer-sub { max-height: 320px; opacity: 1; }

.drawer-sub li a {
  font-family: 'Boldonse', sans-serif;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.3;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  letter-spacing: -0.02em; text-transform: uppercase;
  transition: color 180ms;
  display: block;
  padding: 4px 0;
}
.drawer-sub li a:hover,
.drawer-sub li a:active { color: var(--orange); }

/* Eyekiller-style CTA pill in mobile drawer */
.drawer-cta-pill {
  display: inline-flex; align-items: center;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: .02em;
  color: #fff; background: var(--orange);
  padding: 18px 36px;
  border-radius: 9999px;
  text-decoration: none;
  width: fit-content;
  transition: background 220ms, transform 160ms ease-out;
  margin-bottom: 32px;
}
.drawer-cta-pill:hover  { background: var(--orange-dark); }
.drawer-cta-pill:active { transform: scale(0.96); }

/* "Say Hello" contact block */
.drawer-contact {
  display: flex; flex-direction: column; gap: 5px;
}
.drawer-contact-label {
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.drawer-contact a {
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 200ms;
}
.drawer-contact a:hover { color: rgba(255,255,255,0.9); }


/* ─────────────────────────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────────────────────────── */

/* ── Shared util for about page ── */
.ab-orange { color: var(--orange); }

/* ── About Hero ──────────────────────────────────────────────────── */
.ab-hero {
  width: 1440px;
  height: 820px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--orange);
}

/* ── Painted galaxy — the dark space the astronaut sprays into (right side) ── */
.ab-galaxy {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 104% at 90% 50%,
      #0B0B12 0%, #0B0B12 24%,
      rgba(11,11,18,0.94) 40%,
      rgba(34,12,6,0.55) 58%,
      transparent 76%),
    radial-gradient(ellipse 42% 70% at 82% 38%,
      rgba(120,40,170,0.22) 0%,
      rgba(60,20,110,0.10) 45%,
      transparent 72%);
  /* Reveal the painted galaxy as it's "sprayed" on */
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms ease 200ms, transform 1400ms cubic-bezier(.16,1,.3,1) 200ms;
}
.ab-hero.lit .ab-galaxy { opacity: 1; transform: scale(1); }

/* ── Ambient scrolling type — same language as homepage ── */
.ab-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ab-amb-row {
  position: absolute; left: -15%; width: 130%;
  display: flex;
  font-family: 'Boldonse', sans-serif; text-transform: uppercase;
  letter-spacing: -.02em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.16);
}
.ab-amb-row.ar1 { top: 5%;  font-size: 150px; line-height: 1; transform: rotate(-3deg); }
.ab-amb-row.ar2 { top: 70%; font-size: 130px; line-height: 1; transform: rotate(2deg); opacity: .7; }
.ab-amb-scroll { display: flex; width: max-content; will-change: transform; }
.ab-amb-scroll > span { padding-right: 48px; }
.ab-amb-row.ar1 .ab-amb-scroll { animation: ab-amb-x 58s linear infinite; }
.ab-amb-row.ar2 .ab-amb-scroll { animation: ab-amb-x 72s linear infinite reverse; }
@keyframes ab-amb-x { to { transform: translateX(-50%); } }

/* ── Mouse-follow spotlight ── */
.ab-spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 360px at var(--mx,70%) var(--my,50%), rgba(255,255,255,0.14), transparent 60%);
  mix-blend-mode: overlay; opacity: 0; transition: opacity 500ms;
}
.ab-hero.lit .ab-spot { opacity: 1; }

/* ── Corner labels ── */
.ab-corner {
  position: absolute; z-index: 6;
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78); line-height: 1.6;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 700ms 200ms, transform 700ms 200ms;
}
.ab-hero.lit .ab-corner { opacity: 1; transform: translateY(0); }
.ab-corner.tl { top: 104px; left: 60px; }
.ab-corner.tr { top: 104px; right: 60px; justify-content: flex-end; }
.ab-cstar {
  width: 11px; height: 11px; display: inline-block; background: #fff;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: spin 7s linear infinite;
}

/* Coloured floating dots */
.ab-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  animation: ab-bob var(--dur, 5s) ease-in-out var(--del, 0s) infinite;
}
@keyframes ab-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-10px) scale(1.08); }
}

/* Coloured floating dots */
.ab-dot {
  position: absolute;
  border-radius: 50%;
  animation: ab-bob var(--dur, 5s) ease-in-out var(--del, 0s) infinite;
}
@keyframes ab-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-10px) scale(1.08); }
}

/* 4-pointed sparkle stars */
.ab-sparkle {
  position: absolute;
  background: rgba(215,215,215,0.92);
  clip-path: polygon(50% 0%, 55% 44%, 100% 50%, 55% 56%, 50% 100%, 45% 56%, 0% 50%, 45% 44%);
  animation: ab-sparkle-pulse 3.4s ease-in-out var(--del, 0s) infinite;
}
@keyframes ab-sparkle-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.2) rotate(12deg); }
}

/* Saturn-like planet */
.ab-saturn {
  position: absolute;
  top: 10%; right: 9%;
  width: 92px;
  animation: ab-float 10s ease-in-out 0s infinite;
}
.ab-saturn-body {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f8d060, #e89a10 52%, #7a4800 86%);
  box-shadow: inset -14px -10px 0 rgba(0,0,0,0.28), 0 0 32px rgba(232,154,16,0.35);
  position: relative;
  z-index: 2;
}
.ab-saturn-ring-back,
.ab-saturn-ring-front {
  position: absolute;
  width: 152px; height: 52px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotateX(72deg);
  border: 7px solid rgba(248,200,60,0.52);
  border-radius: 50%;
  pointer-events: none;
}
.ab-saturn-ring-back  { z-index: 1; }
.ab-saturn-ring-front {
  z-index: 3;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

@keyframes ab-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(-16px) rotate(3deg); }
  70%       { transform: translateY(9px) rotate(-2deg); }
}

/* Nebula depth cloud — sits behind the astronaut on the painted side */
.ab-nebula {
  position: absolute;
  width: 760px; height: 620px;
  top: 50%; left: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(239,72,35,0.16) 0%,
    rgba(150,50,180,0.12) 40%,
    rgba(40,20,90,0.06)  66%,
    transparent 80%
  );
  filter: blur(54px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms ease 400ms;
}
.ab-hero.lit .ab-nebula { opacity: 1; }

/* Spray streaks toward the galaxy */
.ab-streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Astronaut painter — floats up & down spray-painting the galaxy ── */
.ab-painter {
  position: absolute;
  width: 330px; height: 330px;
  top: 56%; right: 200px;
  transform: translateY(-50%);
  z-index: 3;
  translate: var(--par-x, 0px) var(--par-y, 0px);
  transition: translate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ab-astro-glow {
  position: absolute;
  width: 300px; height: 300px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,72,35,0.30) 0%, rgba(239,72,35,0.10) 52%, transparent 72%);
  filter: blur(30px);
  animation: ab-glow-pulse 4.2s ease-in-out 0s infinite;
  pointer-events: none;
}
@keyframes ab-glow-pulse {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.14); }
}
/* Inner element does the entrance fall, then the spray-paint bob */
.ab-astro-inner {
  position: relative;
  width: 100%; height: 100%;
  opacity: 0;
  transform: translateY(-560px) rotate(-10deg);
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}
.ab-hero.lit .ab-astro-inner { opacity: 1; transform: translateY(0) rotate(0); }
.ab-hero.painted .ab-astro-inner { animation: ab-paint-bob 3.4s ease-in-out 0s infinite; }
@keyframes ab-paint-bob {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%       { transform: translateY(-30px) rotate(2.5deg); }
}
.ab-astro-img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 28px 60px rgba(239,72,35,0.22)) drop-shadow(0 0 100px rgba(180,90,50,0.12));
  pointer-events: none;
}

/* Spray mist emitting from the can (tune left/top to match final art) */
.ab-spray {
  position: absolute;
  top: 52%; left: 80%;
  width: 8px; height: 8px;
  z-index: 2;
  pointer-events: none;
}
.ab-spray span {
  position: absolute; left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(170,90,230,0.55) 60%, transparent 75%);
  opacity: 0;
}
.ab-hero.painted .ab-spray span { animation: ab-spray-puff 2.4s ease-out infinite; }
@keyframes ab-spray-puff {
  0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
  18%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--sx,-130px), var(--sy,-70px)) scale(1.7); }
}

/* ── Hero content (headline column, left) ── */
.ab-hero-inner {
  position: absolute;
  z-index: 4;
  left: 80px; top: 0;
  width: 820px; height: 820px;
  box-sizing: border-box;
  padding-top: 134px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 30px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 700ms 200ms, transform 700ms 200ms;
}
.ab-hero.lit .ab-eyebrow { opacity: 1; transform: translateY(0); }

.ab-star-shape {
  width: 14px; height: 14px;
  background: #fff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  flex-shrink: 0;
  animation: spin 7s linear infinite;
}

.ab-h1 {
  font-family: 'Boldonse', sans-serif;
  font-size: 108px;
  line-height: 1.36;
  letter-spacing: -1.2px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
}
.ab-glyph-line { display: block; white-space: nowrap; }

/* Per-letter glyph fall — same language as the homepage hero */
.ab-glyph {
  display: inline-block;
  transform: translateY(-130%) rotate(-12deg);
  opacity: 0;
  transition:
    transform 760ms cubic-bezier(.34,1.56,.64,1),
    opacity 480ms ease;
  transition-delay: calc(var(--i,0) * 32ms);
  will-change: transform;
}
.ab-hero.lit .ab-glyph { transform: translateY(0) rotate(0); opacity: 1; }
.ab-glyph-space { display: inline-block; width: .32em; }

.ab-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  max-width: 430px;
  margin: 0 0 40px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms 900ms, transform 600ms 900ms;
}
.ab-hero.lit .ab-sub { opacity: 1; transform: translateY(0); }

.ab-cta-row {
  display: flex;
  gap: 14px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 600ms 1100ms, transform 600ms 1100ms;
}
.ab-hero.lit .ab-cta-row { opacity: 1; transform: translateY(0); }

/* ── Numbers ──────────────────────────────────────────────────────── */
.ab-numbers {
  width: 1440px;
  background: #1c1a1d;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}
/* Faint orange warmth behind the independent stat */
.ab-numbers::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(ellipse at 80% 50%, rgba(239,72,35,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.ab-numbers-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 80px 88px;
}

/* Individual stat — natural width, no flex stretch */
.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 60px;
  position: relative;
}
.ab-stat:first-child { padding-left: 0; }
.ab-stat.ab-stat-indep { padding-right: 0; }

/* The enormous typographic number */
.ab-stat-num {
  font-family: 'Boldonse', sans-serif;
  font-size: 140px;
  line-height: 0.9;
  color: rgba(255,255,255,0.92);
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
/* 100% gets the orange — it's the standout claim */
.ab-stat.ab-stat-indep .ab-stat-num {
  color: var(--orange);
}

.ab-stat-sup {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.01em;
}

/* Thin rule separating number from label */
.ab-stat-rule {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.ab-stat.ab-stat-indep .ab-stat-rule {
  background: rgba(239,72,35,0.35);
}

.ab-stat-label {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
}

/* No operator separators — stats separated by spacing only */

/* ── The Reality ──────────────────────────────────────────────────── */
.ab-reality {
  width: 1440px;
  background: #1c1a1d;
  padding: 140px 88px;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

.ab-reality::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.ab-reality-left {
  position: relative;
  z-index: 2;
}

.ab-reality-left h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 80px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
  position: sticky;
  top: 100px;
}

.ab-reality-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}

.ab-reality-right p {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
}
.ab-reality-right p:first-child { color: rgba(255,255,255,0.75); font-weight: 500; }

/* ── Crew ─────────────────────────────────────────────────────────── */
.ab-crew {
  width: 1440px;
  background: #fff;
  padding: 140px 88px 160px;
}

.ab-crew-head {
  text-align: center;
  margin-bottom: 80px;
}

.ab-crew-head h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 72px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.ab-crew-cap {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(0,0,0,0.45);
  max-width: 560px;
  margin: 0 auto;
}

.ab-pill-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 20px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.ab-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Boldonse', sans-serif;
  font-size: 21px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: 14px 32px 14px 14px;
  border-radius: 9999px;
  cursor: default;
  user-select: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  will-change: transform;
}
/* Sliding sheen that sweeps across on hover */
.ab-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.ab-pill:hover::before { transform: translateX(130%); }

/* Override reveal defaults so rotation persists through the entrance animation */
.ab-pill.reveal {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) translateY(calc(var(--ty, 0px) + 28px));
  transition: opacity 700ms ease, transform 700ms ease;
}
.ab-pill.reveal.on {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
}
.ab-pill:hover {
  transform: rotate(0deg) translateY(-7px) scale(1.06) !important;
  box-shadow: 0 22px 46px rgba(0,0,0,0.20);
  transition: transform 240ms cubic-bezier(.34,1.3,.64,1), box-shadow 240ms;
}
.ab-pill:hover .ab-pill-icon { transform: rotate(-14deg) scale(1.14); }

.ab-pill-orange {
  background: linear-gradient(135deg, #FF5A2E 0%, var(--orange) 60%);
  color: #fff;
}
.ab-pill-dark {
  background: linear-gradient(135deg, #2A2A2A 0%, var(--black) 65%);
  color: #fff;
}
.ab-pill-ghost {
  background: #fff;
  color: var(--black);
  border: 1.5px solid rgba(0,0,0,0.14);
}
.ab-pill-ghost .ab-pill-icon { background: rgba(0,0,0,0.06); }

.ab-pill-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  background: rgba(255,255,255,0.18);
  transition: transform 320ms cubic-bezier(.34,1.5,.64,1);
}
.ab-pill-label {
  position: relative;
  z-index: 1;
}

/* ── Team ─────────────────────────────────────────────────────────── */
.ab-team {
  width: 1440px;
  background: var(--offwhite);
  padding: 140px 88px 160px;
}

.ab-team-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}

.ab-team-top-left h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 72px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--black);
  text-transform: uppercase;
}

.ab-team-top-right {
  padding-bottom: 8px;
}
.ab-team-top-right p {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(0,0,0,0.5);
  max-width: 440px;
}

.ab-team-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ab-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.ab-member:hover { transform: translateY(-10px); }

.ab-member-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #2a2a2a, #0d0d0d);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  transition: box-shadow 420ms ease;
}
.ab-member:hover .ab-member-photo { box-shadow: 0 28px 60px rgba(239,72,35,0.30); }

/* Orange wash that fades in on hover, sitting under the photo */
.ab-member-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 38%, rgba(239,72,35,0.30) 78%, rgba(239,72,35,0.55) 100%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.ab-member:hover .ab-member-photo::before { opacity: 1; }

.ab-member-photo img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.02);
  transition: filter 500ms ease, transform 600ms cubic-bezier(.22,1,.36,1);
}
.ab-member:hover .ab-member-photo img {
  filter: grayscale(0%);
  transform: scale(1.09);
}

.ab-member-init {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Boldonse', sans-serif;
  font-size: 40px;
  color: rgba(255,255,255,0.30);
  background: linear-gradient(160deg, #333, #111);
}

/* Info slides up from the bottom on hover */
.ab-member-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 20px 22px 22px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 460ms cubic-bezier(.22,1,.36,1), opacity 300ms ease;
}
.ab-member:hover .ab-member-info {
  transform: translateY(0);
  opacity: 1;
}

.ab-member-name {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  margin-bottom: 4px;
}

.ab-member-role {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* ── Partners ─────────────────────────────────────────────────────── */
.ab-partners {
  width: 1440px;
  background: #fff;
  padding: 140px 88px 160px;
  text-align: center;
}

.ab-partners-head {
  margin-bottom: 80px;
}
.ab-partners-head h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 64px;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ab-partners-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(0,0,0,0.45);
  max-width: 520px;
  margin: 0 auto;
}

/* Official partner seal cards */
.ab-seal-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 96px;
}
.ab-seal {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--offwhite);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 24px 40px 24px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms, border-color 320ms;
}
.ab-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(239,72,35,0.10) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 800ms cubic-bezier(.22,1,.36,1);
}
.ab-seal:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 54px rgba(0,0,0,0.13);
  border-color: rgba(239,72,35,0.45);
}
.ab-seal:hover::after { transform: translateX(130%); }
.ab-seal-check {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(239,72,35,0.42);
  flex-shrink: 0;
}
.ab-seal-text { display: flex; flex-direction: column; text-align: left; }
.ab-seal-name {
  font-family: 'Boldonse', sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--black);
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: 8px;
}
.ab-seal-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Tools wordmark marquee */
.ab-tools-label {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.34);
  margin-bottom: 36px;
}
.ab-tools-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ab-tools-track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: ab-tools-x 34s linear infinite;
}
.ab-tools-marquee:hover .ab-tools-track { animation-play-state: paused; }
.ab-tools-track span {
  font-family: 'Boldonse', sans-serif;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(0,0,0,0.20);
  cursor: default;
  transition: color 240ms, -webkit-text-stroke 240ms;
}
.ab-tools-track span:hover {
  color: var(--orange);
  -webkit-text-stroke: 1.4px var(--orange);
}
@keyframes ab-tools-x { to { transform: translateX(-50%); } }


/* ── Our Network (full-bleed photo band) ──────────────────────────── */
.ab-network {
  position: relative;
  width: 1440px;
  height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: #0B0B0F;
}
/* Photo layer — slow ken-burns drift. JS adds extra scroll parallax. */
.ab-net-bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center 40%;
  filter: grayscale(100%) contrast(1.05) brightness(0.62);
  transform: scale(1.05);
  animation: ab-net-kb 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ab-net-kb {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.14) translateY(-2%); }
}
/* Orange duotone wash + legibility gradient */
.ab-net-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, rgba(239,72,35,0.34) 0%, transparent 62%),
    linear-gradient(180deg, rgba(11,11,15,0.72) 0%, rgba(11,11,15,0.40) 38%, rgba(11,11,15,0.78) 100%);
  mix-blend-mode: normal;
}
.ab-net-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Drifting sparkle accents */
.ab-net-stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ab-net-spark {
  position: absolute;
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.9);
  clip-path: polygon(50% 0%, 55% 44%, 100% 50%, 55% 56%, 50% 100%, 45% 56%, 0% 50%, 45% 44%);
  opacity: .5;
  animation: ab-sparkle-pulse 3.6s ease-in-out var(--d, 0s) infinite;
}
/* Content */
.ab-net-inner {
  position: relative;
  z-index: 4;
  max-width: 1160px;
  padding: 0 40px;
  text-align: center;
}
.ab-net-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 26px;
}
.ab-net-h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 72px;
  line-height: 1.22;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 28px;
}
.ab-net-line { display: block; overflow: hidden; white-space: nowrap; }
.ab-net-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 800ms cubic-bezier(.16,1,.3,1);
}
.ab-network.in .ab-net-line:nth-child(1) > span { transition-delay: 60ms; }
.ab-network.in .ab-net-line:nth-child(2) > span { transition-delay: 200ms; }
.ab-network.in .ab-net-line > span { transform: translateY(0); }
.ab-net-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 18px; font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,0.82);
  max-width: 620px; margin: 0 auto 38px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms 420ms, transform 700ms 420ms;
}
.ab-network.in .ab-net-sub { opacity: 1; transform: translateY(0); }
.ab-net-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 40px; border-radius: 9999px;
  text-decoration: none;
  background: #fff; color: var(--black);
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms 560ms, transform 700ms 560ms, background 220ms, color 220ms, box-shadow 220ms;
}
.ab-network.in .ab-net-cta { opacity: 1; transform: translateY(0); }
.ab-net-cta:hover {
  background: var(--orange); color: #fff;
  box-shadow: 0 16px 40px rgba(239,72,35,0.42);
}
.ab-net-cta:active { transform: scale(0.97); box-shadow: none; }
.ab-net-cta span { transition: transform 220ms; }
.ab-net-cta:hover span { transform: translateX(5px); }


/* ═══════════════════════════════════════════════════════════════════════
   SERVICE PAGES  (.sv-*)  — shared system for Branding / Video / Websites
═══════════════════════════════════════════════════════════════════════ */

/* ── Service hero ── */
.sv-hero {
  position: relative;
  width: 1440px;
  height: 780px;
  background: #0D0D0D;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.sv-hero-glow {
  position: absolute;
  z-index: 0;
  width: 1100px; height: 1100px;
  top: -260px; right: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,72,35,0.42) 0%, rgba(239,72,35,0.10) 42%, transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  animation: sv-glow-in 1200ms ease 150ms forwards;
}
@keyframes sv-glow-in { to { opacity: 1; } }
/* Floating colour swatches (branding theme) */
.sv-swatches { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sv-swatch {
  position: absolute;
  width: var(--s, 90px); height: var(--s, 90px);
  background: var(--c, #fff);
  border-radius: 18px;
  opacity: 0.92;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  transform: rotate(var(--r, 0deg));
  animation: sv-float var(--dur, 9s) ease-in-out var(--del, 0s) infinite;
}
@keyframes sv-float {
  0%, 100% { transform: rotate(var(--r,0deg)) translateY(0); }
  50%       { transform: rotate(var(--r,0deg)) translateY(-26px); }
}
/* Video hero: play emblem + drifting rings */
.sv-play {
  position: absolute; z-index: 2;
  width: var(--s,150px); height: var(--s,150px); border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  box-shadow: 0 30px 80px rgba(239,72,35,0.5);
  animation: sv-pulse 3.2s ease-in-out infinite;
}
.sv-play::before {
  content: ''; width: 0; height: 0;
  border-style: solid; border-width: 24px 0 24px 40px;
  border-color: transparent transparent transparent #fff;
  margin-left: 10px;
}
@keyframes sv-pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.07); } }
.sv-ring {
  position: absolute; z-index: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.14);
  width: var(--s,200px); height: var(--s,200px);
  animation: sv-float var(--dur,9s) ease-in-out var(--del,0s) infinite;
}
/* Web hero: floating browser window */
.sv-window {
  position: absolute; z-index: 2;
  width: var(--w,340px); border-radius: 14px; overflow: hidden;
  background: #161616; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 34px 80px rgba(0,0,0,0.55);
  transform: rotate(var(--r,0deg));
  animation: sv-float var(--dur,10s) ease-in-out var(--del,0s) infinite;
}
.sv-window-bar { display: flex; height: 36px; background: #0d0d0d; align-items: center; gap: 7px; padding: 0 15px; }
.sv-window-bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.sv-window-bar i:first-child { background: var(--orange); }
.sv-window-body { display: block; height: var(--h,160px); background: linear-gradient(135deg,#1f1f1f,#121212); position: relative; }
.sv-window-body::before { content:''; position:absolute; left:20px; top:22px; width:48%; height:16px; border-radius:6px; background: rgba(239,72,35,0.65); }
.sv-window-body::after { content:''; position:absolute; left:20px; top:52px; right:20px; height:9px; border-radius:5px; background: rgba(255,255,255,0.14); box-shadow: 0 20px 0 rgba(255,255,255,0.11), 0 40px 0 rgba(255,255,255,0.08); }
.sv-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 88px;
  max-width: 1080px;
}
.sv-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 30px;
}
.sv-eyebrow::before {
  content: ''; width: 40px; height: 2px; background: var(--orange);
}
.sv-hero h1 {
  font-family: 'Boldonse', sans-serif;
  font-size: 92px;
  line-height: .95;
  letter-spacing: -1.4px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 30px;
  max-width: 14ch;
}
.sv-hero h1 .ab-orange { color: var(--orange); }
.sv-hero-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 20px; line-height: 1.7; font-weight: 400;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 0 0 40px;
}
.sv-hero-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 18px 40px; border-radius: 0;
  text-decoration: none;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: background 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.sv-hero-cta:hover  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.75); }
.sv-hero-cta:active { transform: scale(0.97); }
.sv-hero-cta span   { color: var(--orange); transition: transform 200ms var(--ease-out); }
.sv-hero-cta:hover span { transform: translateX(5px); }
/* Hero entrance — transform-only so content stays visible even if anim is throttled */
.sv-hero-inner > * { animation: sv-hero-in 850ms cubic-bezier(.22,1,.36,1) both; }
.sv-hero-inner > *:nth-child(1) { animation-delay: 60ms; }
.sv-hero-inner > *:nth-child(2) { animation-delay: 150ms; }
.sv-hero-inner > *:nth-child(3) { animation-delay: 280ms; }
.sv-hero-inner > *:nth-child(4) { animation-delay: 400ms; }
@keyframes sv-hero-in { from { transform: translateY(28px); } to { transform: none; } }

/* ── Section shells ── */
.sv-section { width: 1440px; padding: 140px 88px; }
.sv-section.dark  { background: #0D0D0D; }
.sv-section.light { background: #fff; }
.sv-section.off   { background: var(--offwhite); }

.sv-kicker {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 20px;
}
.sv-h2 {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 60px; line-height: 1.3; letter-spacing: -.02em;
  text-transform: uppercase; margin: 0 0 28px;
}
.sv-section.dark .sv-h2 { color: #fff; }
.sv-section.light .sv-h2, .sv-section.off .sv-h2 { color: var(--black); }
.sv-lead {
  font-family: 'Archivo', sans-serif; font-size: 18px; line-height: 1.75; font-weight: 400;
  max-width: 560px;
}
.sv-section.dark .sv-lead { color: rgba(255,255,255,0.62); }
.sv-section.light .sv-lead, .sv-section.off .sv-lead { color: rgba(0,0,0,0.55); }

/* ── About service: split + capability grid ── */
.sv-about-grid { display: grid; grid-template-columns: 460px 1fr; gap: 90px; align-items: start; }
.sv-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sv-cap {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--black);
  overflow: hidden;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms, border-color 280ms, color 280ms;
}
.sv-section.dark .sv-cap { background: #161616; border-color: rgba(255,255,255,0.10); color: #fff; }
.sv-cap-num {
  font-family: 'Boldonse', sans-serif; font-size: 13px;
  color: var(--orange); flex-shrink: 0;
}
.sv-cap::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
  background: var(--orange); transform: scaleY(0); transform-origin: bottom;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.sv-cap:hover { transform: translateX(6px); box-shadow: 0 16px 38px rgba(0,0,0,0.10); border-color: rgba(239,72,35,0.4); color: var(--orange); }
.sv-cap:hover::after { transform: scaleY(1); }

/* ── Process: big numbered steps ── */
.sv-steps { display: flex; flex-direction: column; gap: 0; margin-top: 70px; }
.sv-step {
  display: grid; grid-template-columns: 200px 1fr; gap: 60px;
  padding: 50px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: start;
}
.sv-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.sv-section.light .sv-step, .sv-section.off .sv-step { border-color: rgba(0,0,0,0.12); }
.sv-step-num {
  font-family: 'Boldonse', sans-serif; font-size: 84px; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--orange);
  transition: color 400ms, -webkit-text-stroke 400ms;
}
.sv-step:hover .sv-step-num { color: var(--orange); }
.sv-step-title {
  font-family: 'Boldonse', sans-serif; font-size: 28px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 16px;
}
.sv-section.dark .sv-step-title { color: #fff; }
.sv-section.light .sv-step-title, .sv-section.off .sv-step-title { color: var(--black); }
.sv-step-desc {
  font-family: 'Archivo', sans-serif; font-size: 17px; line-height: 1.7; font-weight: 400; max-width: 620px;
}
.sv-section.dark .sv-step-desc { color: rgba(255,255,255,0.6); }
.sv-section.light .sv-step-desc, .sv-section.off .sv-step-desc { color: rgba(0,0,0,0.55); }

/* ── Process timeline v2 (scroll-driven) ──────────────────────────── */
.sv-proc-head { max-width: 680px; margin-bottom: 80px; }

.sv-proc-track {
  position: relative;
  padding-left: 80px;
}

/* Faint background rail */
.sv-proc-track::before {
  content: '';
  position: absolute;
  left: 22px; top: 40px; bottom: 40px;
  width: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  pointer-events: none;
}

/* Orange fill — JS sets height */
.sv-proc-fill {
  position: absolute;
  left: 22px; top: 40px;
  width: 2px; height: 0;
  background: var(--orange);
  border-radius: 2px;
  pointer-events: none;
  transition: height 500ms var(--ease-out);
  z-index: 1;
}

.sv-proc-step {
  position: relative;
  padding: 60px 0 60px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sv-proc-step:last-child { border-bottom: none; }

/* Node dot on the rail — center at 22px from track left */
.sv-proc-node {
  position: absolute;
  left: -72px; top: 70px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  background: #0D0D0D;
  transition:
    border-color 400ms ease,
    background   400ms ease,
    box-shadow   400ms ease;
  z-index: 2;
}
.sv-proc-step.proc-in .sv-proc-node {
  border-color: var(--orange);
  background:   var(--orange);
  box-shadow: 0 0 0 6px rgba(239,72,35,0.18), 0 0 0 12px rgba(239,72,35,0.07);
}

/* Large decorative background number */
.sv-proc-num {
  font-family: 'Boldonse', sans-serif;
  font-size: 130px;
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: -16px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
  transition:
    opacity   600ms var(--ease-out),
    transform 600ms var(--ease-out),
    -webkit-text-stroke 400ms ease;
}
.sv-proc-step.proc-in .sv-proc-num {
  opacity: 1;
  transform: translateY(0);
  -webkit-text-stroke: 1.5px rgba(239,72,35,0.3);
}

/* Title — clip-path wipe from left */
.sv-proc-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 44px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: #fff;
  display: block;
  margin: 0 0 18px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 680ms var(--ease-out) 80ms;
  will-change: clip-path;
}
.sv-proc-step.proc-in .sv-proc-title {
  clip-path: inset(0 0% 0 0);
}

/* Description — fade + rise */
.sv-proc-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,0.55);
  max-width: 680px;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   580ms ease 260ms,
    transform 580ms var(--ease-out) 260ms;
}
.sv-proc-step.proc-in .sv-proc-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sv-proc-fill { transition: none; }
  .sv-proc-num  { transition: opacity 300ms ease; transform: none; }
  .sv-proc-title { clip-path: none; transition: opacity 300ms ease; opacity: 0; }
  .sv-proc-step.proc-in .sv-proc-title { opacity: 1; }
  .sv-proc-desc { transform: none; transition: opacity 300ms ease; }
}

/* ── Deliverables: cards ── */
.sv-deliver-head { text-align: center; max-width: 620px; margin: 0 auto 70px; }
.sv-deliver-head .sv-lead { margin: 0 auto; }
.sv-deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.sv-deliver-card {
  position: relative;
  padding: 44px 36px;
  border-radius: 18px;
  background: linear-gradient(160deg, #161616, #0D0D0D);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 300ms;
}
.sv-deliver-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
.sv-deliver-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; font-size: 26px;
  background: rgba(239,72,35,0.16); margin-bottom: 26px;
}
.sv-deliver-card h3 {
  font-family: 'Boldonse', sans-serif; font-size: 22px; text-transform: uppercase;
  color: #fff; margin: 0 0 12px; letter-spacing: -.01em;
}
.sv-deliver-card p {
  font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.58); margin: 0;
}

/* ── Clients logo wall (marquee) ── */
.sv-clients-head { text-align: center; margin-bottom: 60px; }
.sv-marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sv-marquee + .sv-marquee { margin-top: 28px; }
.sv-mq-track { display: flex; align-items: center; gap: 70px; width: max-content; animation: sv-mq 38s linear infinite; }
.sv-marquee.rev .sv-mq-track { animation-direction: reverse; animation-duration: 46s; }
.sv-marquee:hover .sv-mq-track { animation-play-state: paused; }
.sv-mq-track img { height: 34px; width: auto; object-fit: contain; opacity: .5; filter: grayscale(100%); transition: opacity 240ms, filter 240ms; }
.sv-mq-track a:hover img { opacity: 1; filter: grayscale(0%); }
@keyframes sv-mq { to { transform: translateX(-50%); } }

/* ── Process redesign: bold full-width rows (v3) ─────────────────── */
.sv-prow-head { max-width: 680px; margin-bottom: 100px; }
.sv-prow-list { border-bottom: 1px solid rgba(255,255,255,0.08); }

.sv-prow {
  position: relative;
  padding: 60px 0;
  cursor: pointer;
  background: transparent;
  transition: background 200ms ease;
}
.sv-prow:hover { background: rgba(255,255,255,0.025); }

/* Top divider — scaleX draws left to right on scroll */
.sv-prow-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.10);
  transform-origin: left; transform: scaleX(0);
  transition: transform 800ms var(--ease-out);
}
.sv-prow.prow-in .sv-prow-line { transform: scaleX(1); }

/* Step meta: number badge + phase tag */
.sv-prow-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 400ms ease 150ms, transform 400ms var(--ease-out) 150ms;
}
.sv-prow.prow-in .sv-prow-meta { opacity: 1; transform: translateY(0); }

.sv-prow-badge {
  font-family: 'Archivo', sans-serif;
  font-size: 20px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange);
}
.sv-prow-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px; padding: 7px 20px;
}

/* Big title — clip-path wipe */
.sv-prow-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 80px; line-height: 1;
  text-transform: uppercase; letter-spacing: -.02em;
  color: #fff; display: block; margin: 0; flex: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-out) 220ms;
  will-change: clip-path;
}
.sv-prow.prow-in .sv-prow-title { clip-path: inset(0 0% 0 0); }

/* Heading row: title + collapse arrow */
.sv-prow-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Plus/cross toggle — CSS-drawn circle with + that rotates to × */
.sv-prow-arrow {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  position: relative;
  background: transparent;
  transition: transform 400ms var(--ease-out), border-color 250ms ease, background 250ms ease;
}
.sv-prow-arrow::before,
.sv-prow-arrow::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  transition: background 250ms ease;
}
.sv-prow-arrow::before { width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.sv-prow-arrow::after  { width: 1.5px; height: 14px; transform: translate(-50%,-50%); }

.sv-prow[aria-expanded="true"] .sv-prow-arrow {
  transform: rotate(45deg);
  border-color: var(--orange);
  background: var(--orange);
}
.sv-prow[aria-expanded="true"] .sv-prow-arrow::before,
.sv-prow[aria-expanded="true"] .sv-prow-arrow::after { background: #fff; }

/* Orange top line when expanded */
.sv-prow[aria-expanded="true"] .sv-prow-line { background: var(--orange); }

/* Collapsible body — grid trick animates to height: auto */
.sv-prow-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 480ms var(--ease-out), opacity 320ms ease;
}
.sv-prow-body-inner { overflow: hidden; }
.sv-prow[aria-expanded="true"] .sv-prow-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Description — lives inside .sv-prow-body; accordion handles show/hide */
.sv-prow-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 18px; line-height: 1.75;
  color: rgba(255,255,255,0.5); max-width: 620px;
  padding: 20px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sv-prow-line  { transition: none; transform: scaleX(1); }
  .sv-prow-meta  { transition: opacity 200ms ease; transform: none; }
  .sv-prow-title { clip-path: none; transition: opacity 200ms ease; opacity: 0; }
  .sv-prow.prow-in .sv-prow-title { opacity: 1; }
  .sv-prow-body  { transition: none; }
  .sv-prow-arrow { transition: none; }
}

/* ── FLOWER PROCESS (Litebox-style scroll section) ───────────────── */
.sv-proc-flower-section {
  width: 1440px;
  background: var(--offwhite);
  position: relative;
}
.sv-proc-flower-header {
  display: flex;
  flex-direction: column;
  padding: 120px 88px 60px;
}
.sv-proc-kicker {
  font-family: 'Boldonse', sans-serif;
  font-size: 80px;
  line-height: 1.155;
  letter-spacing: -0.03em;
  color: var(--black);
  text-transform: uppercase;
  margin-bottom: 40px;
}
.sv-proc-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
}
.sv-proc-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.sv-proc-intro {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(0,0,0,0.5);
  max-width: 480px;
  text-align: right;
}
/* scroll container — height set by JS */
.sv-proc-flower-scroll {
  position: relative;
}
/* manually-positioned sticky container — translateY driven by JS */
.sv-proc-flower-sticky {
  position: absolute;
  top: 0; left: 0; width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-proc-flower-shape {
  position: relative;
  width: 560px;
  height: 560px;
}
.sv-proc-flower-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sv-proc-stroke {
  /* stroke-dashoffset animated via JS scroll */
}
.sv-proc-flower-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-proc-flower-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  pointer-events: none;
  padding: 48px;
  text-align: center;
}
.sv-proc-flower-step.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sv-proc-flower-num {
  width: 44px; height: 44px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
}
.sv-proc-flower-title {
  font-family: 'Archivo', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.274;
  letter-spacing: -0.025em;
}
.sv-proc-flower-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(0,0,0,0.58);
  max-width: 300px;
}
/* Mobile fallback: show process as plain vertical list */
.sv-proc-mobile-list { display: none; }

/* ── WHAT YOU GET (Litebox-style hover list) ─────────────────────── */
.sv-wyg-section {
  width: 1440px;
  background: #fff;
  padding: 120px 88px 140px;
}
.sv-wyg-heading {
  font-family: 'Archivo', sans-serif;
  font-size: 80px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 40px;
}
.sv-wyg-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  margin-bottom: 0;
}
.sv-wyg-kicker {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.sv-wyg-intro {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(0,0,0,0.5);
  max-width: 480px;
  text-align: right;
}
.sv-wyg-layout {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.sv-wyg-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-wyg-item {
  border-bottom: 1px solid rgba(0,0,0,0.09);
  padding: 36px 0;
  cursor: pointer;
  transition: opacity 280ms ease;
}
.sv-wyg-item:first-child { border-top: 1px solid rgba(0,0,0,0.09); }
/* dim non-active items when list is being hovered */
.sv-wyg-list:hover .sv-wyg-item:not(.wyg-active) { opacity: 0.28; }
.sv-wyg-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sv-wyg-bullet {
  width: 14px; height: 14px;
  background: var(--orange);
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-spring);
}
.sv-wyg-item.wyg-active .sv-wyg-bullet {
  opacity: 1;
  transform: scale(1);
}
.sv-wyg-name {
  font-family: 'Archivo', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.05;
  transition: transform 300ms var(--ease-out);
}
.sv-wyg-item.wyg-active .sv-wyg-name { transform: translateX(8px); }
.sv-wyg-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(0,0,0,0.58);
  max-width: 520px;
  padding-left: 32px;
  /* accordion reveal */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 360ms var(--ease-out), opacity 280ms ease 60ms;
}
.sv-wyg-desc-inner { overflow: hidden; padding-top: 14px; }
.sv-wyg-item.wyg-active .sv-wyg-desc {
  grid-template-rows: 1fr;
  opacity: 1;
}
.sv-wyg-panel {
  flex: 0 0 500px;
  position: sticky;
  top: 120px;
}
.sv-wyg-panel-inner {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #F0EFE8;
  position: relative;
}
.sv-wyg-panel-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.13) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  background-position: 13px 13px;
}
.sv-wyg-panel-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.sv-wyg-panel-img.wyg-img-active {
  opacity: 1;
  transform: scale(1);
}
/* placeholder icon when no real image exists yet */
.sv-wyg-panel-img::after {
  content: '';
  display: block;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(239,72,35,0.12);
  border: 2px solid rgba(239,72,35,0.25);
}

/* ── Clients: interactive hover list with image panel ────────────── */
.sv-cl-layout {
  display: flex; align-items: flex-start; gap: 80px;
}
.sv-cl-left  { flex: 0 0 440px; }
.sv-cl-right { flex: 1; min-width: 0; }

.sv-cl-stage {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden; background: #111;
}
.sv-cl-img {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.sv-cl-img.cl-vis { opacity: 1; }
.sv-cl-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.05);
  transition: transform 600ms var(--ease-out);
}
.sv-cl-img.cl-vis img { transform: scale(1); }

/* Client names list */
.sv-cl-list {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: flex; flex-direction: column;
}
.sv-cl-item a {
  display: inline-block;
  font-family: 'Boldonse', sans-serif;
  font-size: 34px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--black); text-decoration: none;
  padding: 8px 20px; margin-left: -20px;
  border: 2px solid transparent; border-radius: 100px;
  transition: border-color 180ms ease, opacity 250ms ease;
}
.sv-cl-item.cl-active a { border-color: var(--black); }
/* Dim non-active items while hovering */
.sv-cl-list.cl-live .sv-cl-item:not(.cl-active) a { opacity: 0.2; }

/* See-all work link below the client list */
.sv-cl-see-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); text-decoration: none;
  margin-top: 36px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--black);
  transition: color 180ms ease, border-color 180ms ease;
}
.sv-cl-see-all:hover { color: var(--orange); border-color: var(--orange); }
.sv-cl-see-all span { transition: transform 200ms ease; }
.sv-cl-see-all:hover span { transform: translateX(4px); }

/* ── Testimonial ── */
.sv-quote { width: 1440px; background: var(--orange); padding: 130px 88px; text-align: center; position: relative; overflow: hidden; }
.sv-quote::before {
  content: '“'; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-family: 'Boldonse', sans-serif; font-size: 280px; line-height: 1; color: rgba(255,255,255,0.14);
}
.sv-quote-text {
  position: relative; z-index: 1;
  font-family: 'Boldonse', sans-serif; font-size: 40px; line-height: 1.5; letter-spacing: -.01em;
  color: #fff; max-width: 980px; margin: 0 auto 40px; text-transform: none;
}
.sv-quote-by { position: relative; z-index: 1; font-family: 'Archivo', sans-serif; }
.sv-quote-name { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.sv-quote-role { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 6px; }


/* ═══════════════════════════════════════════════════════════════════════
   WORK PAGE  (.wk-*)
═══════════════════════════════════════════════════════════════════════ */
.wk-page { background: #0D0D0D; }
.wk-hero {
  width: 1440px; background: #0D0D0D;
  padding: 210px 88px 56px; position: relative; overflow: hidden;
}
.wk-hero-eyebrow {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 22px;
}
.wk-hero h1 {
  font-family: 'Boldonse', sans-serif; font-size: 116px; line-height: 1.36;
  letter-spacing: -2px; text-transform: uppercase; color: #fff; margin: 0 0 26px;
}
.wk-hero h1 .ab-orange { color: var(--orange); }
.wk-hero-sub {
  font-family: 'Archivo', sans-serif; font-size: 20px; line-height: 1.7;
  color: rgba(255,255,255,0.62); max-width: 560px; margin: 0;
}
/* Hero entrance — transform-only (reliable above the fold) */
.wk-hero > * { animation: sv-hero-in 850ms cubic-bezier(.22,1,.36,1) both; }
.wk-hero-eyebrow { animation-delay: 60ms; }
.wk-hero h1 { animation-delay: 150ms; }
.wk-hero-sub { animation-delay: 300ms; }

/* Filter bar */
.wk-filters {
  width: 1440px; background: #0D0D0D; padding: 18px 88px 46px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.wk-filter {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 28px; border-radius: 9999px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.22); background: transparent;
  color: rgba(255,255,255,0.7);
  transition: color 220ms, background 220ms, border-color 220ms, transform 220ms;
}
.wk-filter:hover { color: #fff; border-color: #fff; transform: translateY(-2px); }
.wk-filter.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* Grid */
.wk-grid {
  width: 1440px; background: #0D0D0D; padding: 0 88px 140px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.wk-card {
  position: relative; display: block; text-decoration: none;
  border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11;
  background: #1a1a1a;
  transition: opacity 400ms ease, transform 400ms ease;
}
.wk-card.hide { display: none; }
.wk-card.enter { animation: wk-in 500ms cubic-bezier(.22,1,.36,1) both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.wk-card-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 750ms cubic-bezier(.22,1,.36,1), filter 500ms;
  filter: saturate(1.05);
}
.wk-card:hover .wk-card-img { transform: scale(1.07); }
.wk-card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,13,0) 40%, rgba(13,13,13,0.55) 70%, rgba(13,13,13,0.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 36px;
  transition: background 400ms;
}
.wk-card:hover .wk-card-overlay { background: linear-gradient(180deg, rgba(13,13,13,0.15) 0%, rgba(13,13,13,0.55) 55%, rgba(13,13,13,0.95) 100%); }
.wk-card-cat {
  font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
}
.wk-card-title {
  font-family: 'Boldonse', sans-serif; font-size: 30px; line-height: 1.15;
  text-transform: uppercase; color: #fff; letter-spacing: -.01em; margin: 0;
}
.wk-card-view {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 400ms ease, opacity 300ms ease, margin-top 400ms ease;
}
.wk-card:hover .wk-card-view { max-height: 40px; opacity: 1; margin-top: 16px; }
.wk-card-view span { transition: transform 220ms; }
.wk-card:hover .wk-card-view span { transform: translateX(5px); }
.wk-badge {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--orange); padding: 7px 14px; border-radius: 9999px;
}


/* ═══════════════════════════════════════════════════════════════════════
   CASE STUDY / WORK DETAIL  (.cs-*)
═══════════════════════════════════════════════════════════════════════ */
.cs-hero { width: 1440px; background: #0D0D0D; padding: 170px 88px 0; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  text-decoration: none; margin-bottom: 40px; transition: color 200ms;
}
.cs-back:hover { color: var(--orange); }
.cs-cat {
  font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px;
}
.cs-title {
  font-family: 'Boldonse', sans-serif; font-size: 92px; line-height: 1.36;
  letter-spacing: -1.5px; text-transform: uppercase; color: #fff; margin: 0 0 44px; max-width: 16ch;
}
.cs-meta { display: flex; flex-wrap: wrap; gap: 60px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.cs-meta-item { display: flex; flex-direction: column; gap: 8px; }
.cs-meta-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.cs-meta-val { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 600; color: #fff; }
.cs-hero-img {
  width: 1440px; height: 660px; margin-top: 0;
  background-size: cover; background-position: center;
}

/* Overview */
.cs-overview { width: 1440px; background: #0D0D0D; padding: 120px 88px; display: grid; grid-template-columns: 380px 1fr; gap: 90px; align-items: start; }
.cs-overview h2 { font-family: 'Boldonse', sans-serif; font-size: 40px; line-height: 1.25; text-transform: uppercase; color: #fff; margin: 0; letter-spacing: -.01em; }
.cs-overview-body p { font-family: 'Archivo', sans-serif; font-size: 19px; line-height: 1.8; color: rgba(255,255,255,0.66); margin: 0 0 26px; }
.cs-overview-body p:first-child { color: rgba(255,255,255,0.85); font-weight: 500; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.cs-tag { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; border: 1.5px solid rgba(255,255,255,0.2); padding: 9px 18px; border-radius: 9999px; }

/* Gallery */
.cs-gallery { width: 1440px; background: #0D0D0D; padding: 0 88px 40px; display: flex; flex-direction: column; gap: 28px; }
.cs-shot { width: 100%; border-radius: 16px; background-size: cover; background-position: center; }
.cs-shot.tall { height: 720px; }
.cs-shot.wide { height: 520px; }
.cs-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cs-shot-row .cs-shot { height: 460px; }

/* Results */
.cs-results { width: 1440px; background: var(--orange); padding: 110px 88px; }
.cs-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cs-result-num { font-family: 'Boldonse', sans-serif; font-size: 78px; line-height: 1; color: #fff; letter-spacing: -.02em; }
.cs-result-label { font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 14px; }

/* Next project */
.cs-next { width: 1440px; background: #0D0D0D; padding: 120px 88px; text-align: center; position: relative; overflow: hidden; }
.cs-next-label { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
.cs-next-link { font-family: 'Boldonse', sans-serif; font-size: 76px; line-height: 1.1; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: -1px; display: inline-flex; align-items: center; gap: 28px; transition: color 240ms; }
.cs-next-link:hover { color: var(--orange); }
.cs-next-link .cs-arrow { transition: transform 280ms; }
.cs-next-link:hover .cs-arrow { transform: translateX(16px); }


/* ═══════════════════════════════════════════════════════════════════════
   CONTACT PAGE  (.ct-*)
═══════════════════════════════════════════════════════════════════════ */
.ct-main { width: 1440px; background: #0D0D0D; padding: 180px 88px 140px; position: relative; overflow: hidden; }
.ct-glow { position: absolute; z-index: 0; width: 1000px; height: 1000px; bottom: -360px; left: -240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,72,35,0.30) 0%, rgba(239,72,35,0.08) 44%, transparent 68%); filter: blur(20px); pointer-events: none; }
.ct-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.ct-eyebrow { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
.ct-title { font-family: 'Boldonse', sans-serif; font-size: 80px; line-height: 1.36; letter-spacing: -1.4px; text-transform: uppercase; color: #fff; margin: 0 0 30px; }
.ct-title .ab-orange { color: var(--orange); }
.ct-lead { font-family: 'Archivo', sans-serif; font-size: 19px; line-height: 1.75; color: rgba(255,255,255,0.66); max-width: 440px; margin: 0 0 48px; }
.ct-detail { margin-bottom: 26px; }
.ct-detail-label { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.ct-detail a, .ct-detail span { font-family: 'Archivo', sans-serif; font-size: 20px; font-weight: 600; color: #fff; text-decoration: none; transition: color 200ms; }
.ct-detail a:hover { color: var(--orange); }

/* Form */
.ct-form { background: #161616; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 44px; }
.ct-field { margin-bottom: 22px; }
.ct-field label { display: block; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.ct-field input, .ct-field textarea, .ct-field select {
  width: 100%; box-sizing: border-box;
  font-family: 'Archivo', sans-serif; font-size: 16px; color: #fff;
  background: #0d0d0d; border: 1.5px solid rgba(255,255,255,0.14); border-radius: 12px;
  padding: 15px 18px; transition: border-color 220ms, background 220ms;
}
.ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(255,255,255,0.45); }
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus { outline: none; border-color: var(--orange); background: #111; }
/* Keyboard-only focus: add glow on top of the border change */
.ct-field input:focus-visible, .ct-field textarea:focus-visible, .ct-field select:focus-visible { box-shadow: 0 0 0 3px rgba(239,72,35,0.25); }
.ct-field textarea { resize: vertical; min-height: 130px; }
.ct-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chip { cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chip span {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(255,255,255,0.18); padding: 11px 20px; border-radius: 9999px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.ct-chip input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; }
.ct-chip:hover span { border-color: #fff; color: #fff; }
.ct-submit {
  width: 100%; cursor: pointer; margin-top: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--orange); border: none; border-radius: 9999px; padding: 18px 28px;
  transition: transform 220ms, box-shadow 220ms;
}
.ct-submit:hover  { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(239,72,35,0.45); }
.ct-submit:active { transform: scale(0.97); box-shadow: none; }
.ct-note { font-family: 'Archivo', sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 16px; text-align: center; }
/* Entrance — transform-only (reliable above the fold) */
.ct-intro > *, .ct-form { animation: sv-hero-in 800ms cubic-bezier(.22,1,.36,1) both; }
.ct-intro > *:nth-child(1) { animation-delay: 60ms; }
.ct-intro > *:nth-child(2) { animation-delay: 150ms; }
.ct-intro > *:nth-child(3) { animation-delay: 260ms; }
.ct-intro > *:nth-child(4) { animation-delay: 340ms; }
.ct-intro > *:nth-child(5) { animation-delay: 420ms; }
.ct-intro > *:nth-child(6) { animation-delay: 500ms; }
.ct-form { animation-delay: 240ms; }

/* Paid Ads hero motif: rising bar chart */
.sv-bars { position: absolute; z-index: 2; display: flex; align-items: flex-end; gap: 16px; }
.sv-bar {
  width: 44px; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #FF5A2E, #8B1C06);
  transform-origin: bottom;
  animation: sv-bar 2.6s ease-in-out var(--del, 0s) infinite alternate;
}
@keyframes sv-bar { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ═══════════════════════════════════════════════════════════════════════
   LEGAL PAGES  (.lg-*)
═══════════════════════════════════════════════════════════════════════ */
.lg-hero { width: 1440px; background: #0D0D0D; padding: 180px 88px 76px; }
.lg-hero h1 { font-family: 'Boldonse', sans-serif; font-size: 68px; line-height: 1.36; letter-spacing: -1px; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.lg-hero p { font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0; }
.lg-body { width: 1440px; background: #fff; padding: 90px 88px 140px; }
.lg-prose { max-width: 760px; }
.lg-prose h2 { font-family: 'Boldonse', sans-serif; font-size: 24px; line-height: 1.3; text-transform: uppercase; color: var(--black); letter-spacing: -.01em; margin: 48px 0 16px; }
.lg-prose h2:first-child { margin-top: 0; }
.lg-prose p { font-family: 'Archivo', sans-serif; font-size: 17px; line-height: 1.8; color: rgba(0,0,0,0.6); margin: 0 0 18px; }
.lg-prose a { color: var(--orange); text-decoration: none; }
.lg-prose a:hover { text-decoration: underline; }
.lg-note { font-family: 'Archivo', sans-serif; font-size: 13px; color: rgba(0,0,0,0.55); background: rgba(239,72,35,0.06); padding: 16px 20px; border-radius: 8px; margin-bottom: 40px; }


/* ─────────────────────────────────────────────────────────────────────
   MOBILE + TABLET RESPONSIVE  — breakpoint: 1024px
   Below this width: disable the scale transform, use real CSS layout.
───────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* ── Global overrides ── */
  #scaler { width: 100% !important; }
  .hero, .logo-strip, .specialists, .showreel,
  .services, .featured, .cta-section, footer,
  .ab-hero, .ab-numbers, .ab-reality, .ab-crew, .ab-team, .ab-partners,
  .ab-network, .ab-signal, .ab-net-roles,
  .sv-hero, .sv-section, .sv-quote,
  .sv-proc-flower-section, .sv-wyg-section,
  .wk-hero, .wk-filters, .wk-grid,
  .cs-hero, .cs-hero-img, .cs-overview, .cs-gallery, .cs-results, .cs-next,
  .ct-main,
  .a11y-hero, .a11y-controls, .a11y-commit, .a11y-contact,
  .lg-hero, .lg-body {
    width: 100% !important;
  }

  /* ── Nav ── */
  .nav-links { display: none; }
  .nav-cta { display: none; }     /* hide Let's Talk pill from bar — it lives in the drawer */
  .nav-right { display: flex; gap: 6px; align-items: center; }  /* keep a11y icon visible */
  .nav-toggle { display: flex; margin-left: 8px; }
  .gv-nav { padding: 0; }
  /* At rest: transparent pill — matches desktop behaviour */
  .gv-nav-inner {
    margin: 10px 14px;
    max-width: none;
    padding: 0 6px 0 16px;
    height: 50px;
    border-radius: 9999px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Scrolled: swap to brand orange pill */
  .gv-nav.scrolled .gv-nav-inner {
    margin: 10px 14px;
    max-width: none;
    height: 50px;
    padding: 0 6px 0 16px;
    background: var(--orange-dark);
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  }
  /* Keep a11y icon white on both states */
  .gv-nav.scrolled .nav-a11y { border-color: rgba(255,255,255,0.5); color: #fff; }
  /* Override HTML width="168" attribute so logo scales with height */
  .nav-logo img { height: 26px; width: auto; }
  .gv-nav.scrolled .nav-logo img { height: 24px; width: auto; }

  /* ── Hero — mobile creative layout ── */
  .hero { height: 100svh; min-height: 100svh; overflow: hidden; }
  .hero-inner { height: 100svh; min-height: 100svh; padding: 0; position: relative; overflow: hidden; }

  /* Hero h1: tight text block — starts in the upper-centre zone
     padding-top clears the nav; text fills from ~18svh downward */
  .hero-h1 {
    position: absolute !important;
    inset: 0 !important;
    padding: clamp(58px, 12.9svh, 107px) 20px 0;
    box-sizing: border-box; overflow: visible;
    display: flex; flex-direction: column; justify-content: flex-start;
  }

  /* Kill per-glyph entrance on mobile — word-level animations replace it */
  .glyph { transform: none !important; transition: none !important; }
  .glyph-cap { display: none; }
  .hero-corner.tl { display: none; }
  .hero-corner.tr { display: none; }

  /* Pill badges — mobile only, hidden on desktop */
  .m-hero-pills {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 15.2svh;
    width: 100vw; margin-left: -20px; padding: 0 20px; box-sizing: border-box;
    opacity: 0; transform: translateY(-12px);
    transition: opacity 500ms ease 0ms, transform 500ms ease 0ms;
  }
  .hero.lit .m-hero-pills { opacity: 1; transform: none; }
  .m-hero-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Archivo', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 9999px; padding: 7px 14px;
    white-space: nowrap;
  }

  /* Words flow in the flex column — position: relative clears absolute scatter */
  .glyph-word {
    position: relative !important;
    top: auto; left: auto; right: auto; bottom: auto;
    white-space: nowrap; display: block;
  }

  /* gw1 "Production," — top, left-aligned */
  .glyph-word.gw1 {
    top: auto; left: auto; right: auto; bottom: auto;
    font-size: clamp(31px, 8.25vw, 42px); line-height: 1.65;
    margin-left: 0; text-align: left; padding: 0;
    transform: translateX(-110%) rotate(-4deg); opacity: 0;
    transition: transform 750ms cubic-bezier(.34,1.15,.64,1) 80ms,
                opacity 400ms ease 80ms;
  }

  /* gw2 "Design" — dominant word, viewport-width block so text-align:center works */
  .glyph-word.gw2 {
    top: auto; left: auto; right: auto; bottom: auto;
    font-size: clamp(64px, 17.5vw, 82px); line-height: 1.55;
    width: 100vw; margin-left: -20px; text-align: center; padding: 0;
    transform: translateX(100px) skewX(-8deg); opacity: 0;
    transition: transform 800ms cubic-bezier(.34,1.08,.64,1) 300ms,
                opacity 480ms ease 300ms;
  }

  /* gw3 "& Web Studio" — bottom, left-aligned */
  .glyph-word.gw3 {
    top: auto; left: auto; right: auto; bottom: auto;
    font-size: clamp(33px, 8.8vw, 46px); line-height: 1.65;
    margin-left: 0; text-align: left; padding: 0;
    transform: translateY(60px); opacity: 0;
    transition: transform 700ms cubic-bezier(.34,1.2,.64,1) 540ms,
                opacity 440ms ease 540ms;
  }

  /* .hero.lit — triggers all word entrances */
  .hero.lit .glyph-word.gw1,
  .hero.lit .glyph-word.gw2,
  .hero.lit .glyph-word.gw3 { transform: none; opacity: 1; }

  /* ── Post-landing float — organic drift after astronaut touches down ── */
  @keyframes m-float-word {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
  }
  .hero.astro-landed .glyph-word.gw1 { animation: m-float-word 5s   ease-in-out 0.2s infinite; }
  .hero.astro-landed .glyph-word.gw2 { animation: m-float-word 6.5s ease-in-out 0.9s infinite; }
  .hero.astro-landed .glyph-word.gw3 { animation: m-float-word 4.5s ease-in-out 1.5s infinite; }

  /* ── Shimmer wave through DESIGN letters (replaces hover on touch) ── */
  @keyframes m-glyph-shine {
    0%, 72%, 100% { text-shadow: none; }
    78%  { text-shadow:  3px -2px 0 rgba(255,255,255,.22); }
    86%  { text-shadow: -2px  3px 0 rgba(0,0,0,.09); }
  }
  .hero.astro-landed .glyph-word.gw2 .glyph {
    animation: m-glyph-shine 3.8s ease-in-out calc(var(--i, 0) * 95ms) infinite;
  }

  /* Touch-press feedback */
  .glyph-word:active { filter: brightness(0.78); transition: filter 70ms ease; }

  /* Astronaut — floats in the lower-right, well below the text block */
  .astro-slot { width: 230px; height: 230px; right: -10px; bottom: 13%; }
  .dust { right: 6px; bottom: 13%; width: 186px; }

  /* CTA row */
  .hero-cta-row { left: 20px; right: 20px; bottom: 22px; gap: 10px; }
  .hero-pill { font-size: 11px; padding: 12px 18px; }
  .scroll-ind { display: none; }

  /* Ambient background text — redistributed to fill the lower zone */
  .amb-row.r1 { font-size: 88px; }
  .amb-row.r2 { top: 38%; font-size: 70px; }
  .amb-row.r3 { top: 65%; font-size: 80px; }

  /* ── Logo strip ── */
  .logo-strip { padding: 28px 0 12px; }
  .logo-item { padding: 0 24px; }
  .logo-item img { max-height: 32px; max-width: 88px; }

  /* ── Specialists ── */
  .specialists {
    padding: 60px 24px 72px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .spec-left h2 { font-size: clamp(30px, 9vw, 40px); }
  .spec-right p { font-size: 16px; line-height: 1.6; }

  /* ── Showreel ── */
  .showreel-label { left: 20px; bottom: 20px; }
  .showreel-title { font-size: 20px; }
  .showreel-play-btn { width: 64px; height: 64px; }
  .play-triangle { border-width: 10px 0 10px 18px; }

  /* ── Services ── */
  .services { padding: 60px 16px 72px; }
  .services-head { margin-bottom: 40px; }
  .services-head h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .services-head p { font-size: 15px; }
  .services-cards { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
  .svc-card { height: 260px; }
  .svc-num { font-size: 64px; top: 4px; }
  .svc-name { font-size: 18px; bottom: 48px; left: 16px; }
  .svc-desc { font-size: 11px; left: 16px; right: 16px; bottom: 20px; }
  .svc-btn { font-size: 10px; padding: 8px 14px; left: 16px; bottom: 16px; }
  .svc-astro { width: 90px; height: 90px; top: 70px; }

  /* ── Featured Work ── */
  .featured { padding: 60px 20px 72px; }
  .featured-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .featured-head h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .featured-head p { font-size: 15px; padding-top: 0; }
  .work-row { flex-direction: column; gap: 28px; }
  .work-card { width: 100%; }
  .work-thumb { width: 100%; height: auto; aspect-ratio: 16 / 11; }
  .work-title { font-size: 18px; }
  .work-cat { font-size: 13px; }
  .work-grid { gap: 0; }
  .work-row + .work-row { margin-top: 28px; }
  /* Show 3 rows (6 projects) max on mobile — keeps scroll length sane */
  .work-row:nth-child(n+4) { display: none; }

  /* ── CTA Section ── */
  .cta-section { padding: 60px 20px 72px; }
  .cta-head { margin-bottom: 40px; }
  .cta-head h2 { font-size: clamp(28px, 8.5vw, 38px); }
  .cta-head p { font-size: 16px; }
  .cta-cards { flex-direction: column; align-items: stretch; }
  .cta-card {
    max-width: 100%;
    height: auto;
    position: relative;
    padding: 28px 28px 28px;
    display: flex; flex-direction: column;
  }
  .cta-inner { position: static; margin-bottom: 20px; }
  .cta-title { font-size: 22px; }
  .cta-divider { position: static; margin: 20px 0; }
  .cta-desc { position: static; font-size: 15px; margin-bottom: 24px; flex: 1; }
  .cta-btn { position: static; }
  .cta-lottie { position: absolute; right: 16px; top: 16px; width: 80px; height: 80px; }

  /* ── Footer ── */
  footer {
    position: relative;
    min-height: 0;
    padding: 48px 24px 36px;
    overflow: hidden;
  }
  .footer-art {
    position: static;
    width: 260px; height: 66px;
    margin-bottom: 36px;
  }
  .footer-art-logo { height: 40px; opacity: 0.7; }
  .footer-art-gif  { background-size: auto 100%; }
  .footer-cols {
    position: static;
    margin-bottom: 48px;
    gap: 40px;
  }
  .footer-cta {
    position: static;
    padding: 40px 0 0;
  }
  .footer-cta-inner { flex-direction: column; gap: 20px; }
  .footer-cta-h { font-size: clamp(22px, 6.5vw, 30px); }
  .footer-cta-right { width: 100%; }
  .footer-bottom {
    position: static;
    margin-top: 32px;
    padding: 16px 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── About Hero — mobile ── */
  .ab-hero {
    height: auto; min-height: auto;
    background: var(--orange);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding-bottom: 48px;
  }
  .ab-ambient, .ab-spot, .ab-corner { display: none; }
  .ab-galaxy {
    position: absolute; inset: 0;
    opacity: 1; transform: none;
    background: radial-gradient(ellipse 96% 52% at 50% 88%,
      #0B0B12 0%, rgba(11,11,18,0.82) 42%, transparent 74%);
  }
  .ab-hero-inner {
    order: 1;
    position: relative;
    width: 100%; height: auto;
    left: 0; top: 0;
    padding: 56px 24px 0;
    display: block;
  }
  .ab-eyebrow { margin-bottom: 20px; opacity: 1; transform: none; }
  .ab-h1 { font-size: clamp(40px, 12vw, 64px); line-height: 1.36; margin-bottom: 22px; }
  .ab-glyph { transform: none !important; opacity: 1 !important; transition: none; }
  .ab-sub { font-size: 15px; margin: 0 0 28px; max-width: 100%; opacity: 1; transform: none; }
  .ab-cta-row { flex-direction: column; gap: 12px; opacity: 1; transform: none; }
  .ab-painter {
    order: 2;
    position: relative;
    width: 260px; height: 260px;
    right: auto; top: auto;
    transform: none;
    margin: 20px auto 0;
  }
  .ab-astro-inner { opacity: 1; transform: none; }
  .ab-astro-glow { width: 230px; height: 230px; }

  /* ── Numbers — mobile (2×2 grid with divider background trick) ── */
  .ab-numbers-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    background: rgba(255,255,255,0.05); /* gap color — acts as divider lines */
  }
  .ab-stat {
    padding: 36px 22px;
    background: #0C0C0C; /* fills each cell, gap shows as cross-divider */
    border: none;
  }
  .ab-stat:first-child { padding-left: 22px; }
  .ab-stat.ab-stat-indep { padding-right: 22px; }
  .ab-stat-num { font-size: 64px; }
  .ab-stat-sup { font-size: 36px; }

  /* ── Reality — mobile ── */
  .ab-reality {
    padding: 72px 24px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ab-reality-left h2 { font-size: clamp(42px, 12vw, 56px); position: static; }
  .ab-reality-right p { font-size: 15px; }

  /* ── Crew — mobile ── */
  .ab-crew { padding: 72px 20px 88px; }
  .ab-crew-head h2 { font-size: clamp(30px, 9vw, 42px); }
  .ab-crew-head { margin-bottom: 52px; }
  .ab-pill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 100%; }
  .ab-pill { font-size: 13px; padding: 8px 18px 8px 8px; gap: 9px; }
  .ab-pill.reveal, .ab-pill.reveal.on { transform: none; }   /* no scatter on mobile */
  .ab-pill:hover { transform: translateY(-4px) scale(1.04) !important; }
  .ab-pill-icon { width: 30px; height: 30px; font-size: 14px; }

  /* ── Team — mobile (info shown statically; no hover on touch) ── */
  .ab-team { padding: 72px 20px 88px; }
  .ab-team-top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .ab-team-top-left h2 { font-size: clamp(30px, 9vw, 42px); }
  .ab-team-top-right p { font-size: 15px; }
  .ab-team-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ab-member { display: block; transform: none !important; }
  .ab-member-photo { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 12px; }
  .ab-member-photo::before { opacity: 1; }            /* keep orange wash for legibility */
  .ab-member-photo img { filter: grayscale(0%); transform: none; }
  .ab-member-init { font-size: 30px; }
  .ab-member-info { position: absolute; left: 0; right: 0; bottom: 0; transform: none; opacity: 1; padding: 16px 14px 14px; }
  .ab-member-name { font-size: 15px; color: #fff; }
  .ab-member-role { font-size: 10px; color: rgba(255,255,255,0.9); }

  /* ── Partners — mobile ── */
  .ab-partners { padding: 72px 20px 88px; }
  .ab-partners-head h2 { font-size: clamp(28px, 8.5vw, 40px); }
  .ab-seal-row { flex-direction: column; align-items: center; gap: 14px; margin-bottom: 56px; }
  .ab-seal { width: 100%; max-width: 320px; padding: 20px 28px; }
  .ab-seal-name { font-size: 22px; }
  .ab-tools-label { margin-bottom: 24px; }
  .ab-tools-track { gap: 38px; }
  .ab-tools-track span { font-size: 30px; }

  /* ── Network roles — mobile ── */
  .anr-left h2 { font-size: clamp(32px, 8vw, 48px) !important; position: static !important; }
  .anr-word { font-size: clamp(24px, 6vw, 38px) !important; }
  .anr-body { font-size: 15px !important; margin-top: 40px !important; }
  .anr-hover-img { display: none !important; }

  /* ── Team swiper side arrows — mobile ── */
  .ab-swiper-prev { left: -16px; width: 42px; height: 42px; font-size: 16px; }
  .ab-swiper-next { right: -16px; width: 42px; height: 42px; font-size: 16px; }
  .ab-net-eyebrow { margin-bottom: 18px; }
  .ab-net-h2 { font-size: clamp(30px, 8.5vw, 46px); line-height: 1.2; margin-bottom: 22px; }
  .ab-net-line { white-space: normal; overflow: visible; }
  .ab-net-line > span { transform: none; }
  .ab-net-sub { font-size: 15px; margin-bottom: 30px; opacity: 1; transform: none; }
  .ab-net-cta { padding: 15px 32px; font-size: 13px; opacity: 1; transform: none; }

  /* ── Service pages — mobile ── */
  .sv-hero { height: auto; min-height: 580px; padding: 110px 0 70px; }
  .sv-hero-inner { padding: 0 24px; }
  .sv-hero h1 { font-size: clamp(36px, 11vw, 56px); line-height: 1.16; }
  .sv-hero-sub { font-size: 16px; }
  .sv-swatch, .sv-play, .sv-ring, .sv-window, .sv-bars { display: none; }
  .sv-section { padding: 72px 22px; }
  .sv-h2 { font-size: clamp(30px, 9vw, 42px); line-height: 1.25; }
  .sv-lead { font-size: 16px; }
  .sv-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .sv-caps { grid-template-columns: 1fr; }
  .sv-step { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .sv-step-num { font-size: 56px; }
  .sv-step-title { font-size: 22px; }
  .sv-deliver-grid { grid-template-columns: 1fr; }
  .sv-quote { padding: 80px 24px; }
  .sv-quote-text { font-size: 24px; line-height: 1.5; }
  .sv-quote::before { font-size: 180px; top: 6px; }
  .sv-mq-track { gap: 44px; }
  .sv-mq-track img { height: 26px; }

  /* ── Process timeline — mobile ── */
  .sv-proc-track { padding-left: 48px; }
  .sv-proc-track::before { left: 14px; }
  .sv-proc-fill { left: 14px; }
  .sv-proc-node { left: -44px; top: 40px; width: 20px; height: 20px; }
  .sv-proc-step { padding: 36px 0; }
  .sv-proc-num { font-size: 72px; margin-bottom: -10px; }
  .sv-proc-title { font-size: clamp(22px, 6.5vw, 30px); }
  .sv-proc-desc { font-size: 15px; }

  /* ── Process redesign mobile ── */
  .sv-prow-head { margin-bottom: 60px; }
  .sv-prow { padding: 40px 0; }
  .sv-prow-title { font-size: clamp(28px, 9vw, 44px); margin-bottom: 16px; }
  .sv-prow-desc { font-size: 15px; max-width: 100%; }

  /* ── Flower process — mobile: hide SVG, show plain step list ── */
  .sv-proc-flower-section { padding: 72px 22px 80px; }
  .sv-proc-flower-header { padding: 0 0 40px; }
  .sv-proc-kicker { font-size: clamp(32px, 8vw, 44px); line-height: 1.1; margin-bottom: 24px; }
  .sv-proc-sub-row { flex-direction: column; gap: 12px; padding-bottom: 32px; }
  .sv-proc-flower-title { line-height: 1.1; }
  .sv-proc-intro { text-align: left; max-width: 100%; }
  .sv-proc-flower-scroll { display: none; }
  .sv-proc-mobile-list { display: flex; flex-direction: column; gap: 0; }
  .sv-proc-mobile-item {
    border-top: 1px solid rgba(0,0,0,0.09);
    padding: 28px 0;
    display: flex; gap: 20px; align-items: flex-start;
  }
  .sv-proc-mobile-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.09); }
  .sv-proc-mobile-num {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1.5px solid var(--orange); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; color: var(--orange);
  }
  .sv-proc-mobile-body { flex: 1; }
  .sv-proc-mobile-title {
    font-family: 'Archivo', sans-serif; font-size: clamp(22px, 6vw, 32px); font-weight: 700;
    color: var(--black); margin-bottom: 10px;
  }
  .sv-proc-mobile-desc {
    font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(0,0,0,0.55);
  }

  /* ── What You Get — mobile ── */
  .sv-wyg-section { padding: 72px 22px 80px; }
  .sv-wyg-heading { font-size: clamp(40px, 12vw, 64px) !important; margin-bottom: 28px; }
  .sv-wyg-header-row { flex-direction: column; gap: 12px; padding-bottom: 32px; }
  .sv-wyg-intro { text-align: left; max-width: 100%; }
  .sv-wyg-layout { flex-direction: column; gap: 0; }
  /* Hide side panel, show an orange accent block above the list instead */
  .sv-wyg-panel { display: none !important; }
  .sv-wyg-section::after {
    content: '';
    display: block;
    width: 48px; height: 4px;
    background: var(--orange);
    margin: 0 0 32px;
  }
  .sv-wyg-name { font-size: clamp(24px, 7vw, 36px) !important; }
  /* Override the late-added padding-left: 84px from the brand-upgrade block */
  .sv-wyg-item { padding: 28px 0 28px 44px !important; }
  .sv-wyg-item::before { top: 36px !important; }

  /* ── Clients hover list mobile ── */
  .sv-cl-layout { flex-direction: column; gap: 32px; }
  .sv-cl-left { width: 100%; }
  .sv-cl-right { width: 100%; order: -1; }
  .sv-cl-stage { aspect-ratio: 16 / 9; border-radius: 10px; }
  .sv-cl-list { margin-top: 32px; }
  .sv-cl-item a { font-size: 22px; padding: 6px 14px; margin-left: -14px; }

  /* ── Work page — mobile ── */
  .wk-hero { padding: 130px 22px 36px; }
  .wk-hero h1 { font-size: clamp(44px, 15vw, 72px); line-height: 1.36; }
  .wk-hero-sub { font-size: 16px; }
  .wk-filters { padding: 12px 22px 32px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .wk-filter { padding: 11px 20px; font-size: 12px; white-space: nowrap; }
  .wk-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 22px 90px; }
  .wk-card-title { font-size: 24px; }
  .wk-card-overlay { padding: 24px; }

  /* ── Case study — mobile ── */
  .cs-hero { padding: 120px 22px 0; }
  .cs-title { font-size: clamp(34px, 11vw, 56px); margin-bottom: 32px; }
  .cs-meta { gap: 28px 40px; padding-bottom: 36px; }
  .cs-hero-img { width: 100%; height: 280px; }
  .cs-overview { grid-template-columns: 1fr; gap: 28px; padding: 64px 22px; }
  .cs-overview h2 { font-size: 30px; }
  .cs-overview-body p { font-size: 16px; }
  .cs-gallery { padding: 0 22px 24px; gap: 16px; }
  .cs-shot.tall { height: 340px; }
  .cs-shot.wide { height: 240px; }
  .cs-shot-row { grid-template-columns: 1fr; gap: 16px; }
  .cs-shot-row .cs-shot { height: 240px; }
  .cs-results { padding: 64px 22px; }
  .cs-results-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-result-num { font-size: 56px; }
  .cs-next { padding: 72px 22px; }
  .cs-next-link { font-size: clamp(32px, 10vw, 48px); gap: 16px; }

  /* ── Contact — mobile ── */
  .ct-main { padding: 120px 22px 90px; }
  .ct-grid { grid-template-columns: 1fr; gap: 48px; }
  .ct-title { font-size: clamp(40px, 13vw, 60px); }
  .ct-lead { font-size: 16px; }
  .ct-form { padding: 28px 22px; }
  .ct-field-row { grid-template-columns: 1fr; gap: 0; }

  /* ── Legal — mobile ── */
  .lg-hero { padding: 120px 22px 48px; }
  .lg-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .lg-body { padding: 56px 22px 90px; }
  .lg-prose h2 { font-size: 20px; }
  .lg-prose p { font-size: 15px; }

  /* ── Cookie banner — mobile ── */
  .gv-cookie { flex-direction: column; align-items: flex-start; padding: 20px 22px; gap: 16px; }
  .gv-cookie-btns { width: 100%; }
  .gv-cookie-btn { flex: 1; text-align: center; padding: 14px 16px; }

  /* ── Careers — mobile ── */
  .cr-hero { padding: 110px 22px 64px; }
  .cr-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .cr-roles { padding: 64px 22px 80px; }
  .cr-role { padding: 28px 0; }
  .cr-role-title { font-size: 20px; }
  .cr-role-meta { flex-direction: column; gap: 6px; }
  .cr-intro-block { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cr-intro-text p { font-size: 15px; }

  /* ── Blog — mobile ── */
  .bl-hero { padding: 120px 22px 64px; }
  .bl-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .bl-body { padding: 64px 22px 80px; }

  /* ── Accessibility — mobile ── */
  .a11y-hero { padding: 128px 22px 64px; }
  .a11y-h1 { font-size: clamp(46px, 15vw, 72px); line-height: 1.12; }
  .a11y-lead { font-size: 16px; line-height: 1.85; max-width: none; }
  .a11y-controls { padding: 70px 22px 80px; }
  .a11y-controls-head { margin-bottom: 36px; }
  .a11y-h2 { font-size: clamp(32px, 9vw, 46px); line-height: 1.15; }
  .a11y-sub { font-size: 15px; }
  .a11y-grid { grid-template-columns: 1fr; gap: 16px; }
  .a11y-tile { padding: 28px 24px; }
  .a11y-tile-icon { width: 52px; height: 52px; margin-bottom: 18px; }
  .a11y-tile-title { font-size: 19px; }
  .a11y-tile-desc { font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
  .a11y-reset-row { margin-top: 28px; text-align: left; }
  .a11y-stmt-ref { text-align: left; }
  .a11y-commit { padding: 70px 22px 80px; grid-template-columns: 1fr; gap: 28px; }
  .a11y-contact { padding: 70px 22px 80px; }
  .a11y-contact-inner { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .a11y-contact-right p { font-size: 16px; line-height: 1.85; }

}

/* ─────────────────────────────────────────────────────────────────────
   TABLET  — 768px–1023px
   Inherits all the mobile layout above. These overrides add breathing
   room, re-enable some two-column layouts, and scale up type/padding.
───────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ── Nav ── */
  /* Tablet: wider pill with more breathing room */
  .gv-nav-inner { margin: 12px 20px; padding: 0 10px 0 20px; height: 52px; }
  .gv-nav.scrolled .gv-nav-inner { margin: 12px 20px; }
  .nav-logo img { height: 28px; }

  /* ── Hero ── */
  /* Tablet: hero-h1 uses wider padding, words still flow as a block */
  .hero-h1 { padding: 80px 48px 0; }
  .glyph-word.gw1 { top: auto; left: auto; right: auto; bottom: auto; font-size: clamp(48px, 6.5vw, 66px); text-align: left; }
  .glyph-word.gw2 { top: auto; left: auto; right: auto; bottom: auto; font-size: clamp(90px, 14vw, 120px); width: 100vw; margin-left: -48px; text-align: center; }
  .glyph-word.gw3 { top: auto; left: auto; right: auto; bottom: auto; font-size: clamp(50px, 7vw, 70px); text-align: left; }
  .hero-cta-row   { left: 48px; right: 48px; }
  .astro-slot     { width: 300px; height: 300px; right: -8px; bottom: 13%; }
  .dust           { right: 18px; bottom: 13%; }

  /* ── Specialists ── */
  .specialists { padding: 80px 48px; }
  .spec-left h2 { font-size: clamp(34px, 5vw, 46px); }

  /* ── Showreel ── */
  .showreel-label { left: 32px; bottom: 28px; }

  /* ── Services ── */
  .services { padding: 72px 48px; }
  .services-head h2 { font-size: clamp(32px, 5vw, 44px); }
  .services-cards { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; }
  .svc-card { height: 300px; }

  /* ── Featured Work ── */
  .featured { padding: 72px 48px; }
  .featured-head h2 { font-size: clamp(32px, 5vw, 44px); }
  .work-row { flex-direction: row; gap: 24px; align-items: stretch; }
  .work-card { width: calc(50% - 12px); flex-shrink: 0; }
  .work-thumb { width: 100%; height: auto; aspect-ratio: 16 / 11; }
  .work-row:nth-child(n+4) { display: flex; }

  /* ── CTA Section ── */
  .cta-section { padding: 80px 48px; }
  .cta-cards   { flex-direction: row; align-items: stretch; gap: 16px; }
  .cta-card    { height: 420px; max-width: none; }
  .cta-inner   { left: 28px; top: 26px; right: 28px; }
  .cta-divider { top: 232px; }
  .cta-desc    { left: 28px; right: 28px; top: 264px; font-size: 15px; }
  .cta-btn     { left: 28px; bottom: 28px; }
  .cta-lottie  { width: 160px; height: 160px; right: 14px; top: 14px; }
  .cta-head h2 { font-size: clamp(34px, 5vw, 46px); }

  /* ── Footer ── */
  footer { padding: 64px 48px 40px; }

  /* ── About ── */
  .ab-hero-inner { padding: 64px 48px 0; }
  .ab-h1 { font-size: clamp(46px, 8.5vw, 72px); }
  /* Tablet: restore flex row, show separators, shrink numbers slightly */
  .ab-numbers-inner {
    display: flex;
    align-items: center;
    padding: 64px 48px;
    gap: 0;
  }
  .ab-stat { padding: 0 36px; border: none; border-bottom: none; }
  .ab-stat:nth-child(odd) { border-right: none; }
  .ab-stat:first-child { padding-left: 0; }
  .ab-stat.ab-stat-indep { padding-right: 0; }
  /* no stat separators */
  .ab-stat-num { font-size: 88px; }
  .ab-stat-sup { font-size: 48px; }
  .ab-reality { padding: 80px 48px; }
  .ab-reality-left h2 { font-size: clamp(46px, 7.5vw, 62px); }
  .ab-crew { padding: 80px 48px 96px; }
  .ab-crew-head h2 { font-size: clamp(34px, 5.5vw, 50px); }
  .ab-team { padding: 80px 48px 96px; }
  .ab-team-top-left h2 { font-size: clamp(34px, 5.5vw, 50px); }
  .ab-partners { padding: 80px 48px 96px; }
  .ab-partners-head h2 { font-size: clamp(32px, 5vw, 46px); }
  .ab-network  { min-height: 560px; }
  .ab-net-inner { padding: 0 48px; }
  .ab-net-h2  { font-size: clamp(36px, 7vw, 56px); }

  /* ── Service pages ── */
  .sv-hero-inner { padding: 0 48px; }
  .sv-hero h1    { font-size: clamp(42px, 7.5vw, 66px); }
  .sv-section    { padding: 80px 48px; }
  .sv-h2         { font-size: clamp(34px, 5.5vw, 48px); }

  /* ── Process rows ── */
  .sv-prow-title { font-size: clamp(36px, 6.5vw, 56px); }
  .sv-proc-title { font-size: clamp(26px, 4.5vw, 38px); }

  /* ── Flower process — tablet ── */
  .sv-proc-flower-section { padding: 0; }
  .sv-proc-flower-header { padding: 80px 48px 48px; }
  .sv-proc-mobile-title { font-size: clamp(28px, 4.5vw, 40px); }

  /* ── WYG — tablet ── */
  .sv-wyg-section { padding: 80px 48px 100px; }
  .sv-wyg-heading { font-size: clamp(52px, 8vw, 72px); }
  .sv-wyg-name { font-size: clamp(32px, 5vw, 44px); }
  .sv-wyg-panel { flex: 0 0 380px; }

  /* ── Client list ── */
  .sv-cl-item a  { font-size: clamp(24px, 4vw, 32px); }

  /* ── Work page ── */
  .wk-hero    { padding: 140px 48px 40px; }
  .wk-hero h1 { font-size: clamp(52px, 8.5vw, 80px); }
  .wk-filters { padding: 12px 48px 36px; }
  .wk-grid    { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 48px 100px; }

  /* ── Case study ── */
  .cs-hero    { padding: 140px 48px 0; }
  .cs-title   { font-size: clamp(42px, 7vw, 64px); }
  .cs-overview { padding: 80px 48px; }
  .cs-gallery  { padding: 0 48px 32px; }
  .cs-results  { padding: 80px 48px; }
  .cs-results-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-result-num { font-size: 64px; }
  .cs-next     { padding: 80px 48px; }
  .cs-next-link { font-size: clamp(38px, 6vw, 54px); }

  /* ── Contact ── */
  .ct-main    { padding: 130px 48px 100px; }
  .ct-title   { font-size: clamp(46px, 7vw, 68px); }
  .ct-grid    { grid-template-columns: 1fr; gap: 52px; }

  /* ── Legal ── */
  .lg-hero    { padding: 130px 48px 56px; }
  .lg-hero h1 { font-size: clamp(40px, 6vw, 56px); }
  .lg-body    { padding: 64px 48px 100px; }

  /* ── Careers ── */
  .cr-hero    { padding: 130px 48px 72px; }
  .cr-roles   { padding: 80px 48px; }

  /* ── Blog ── */
  .bl-hero    { padding: 130px 48px 80px; }
  .bl-body    { padding: 72px 48px 96px; }

  /* ── Accessibility — tablet ── */
  .a11y-hero    { padding: 150px 48px 80px; }
  .a11y-h1      { font-size: clamp(64px, 10vw, 88px); }
  .a11y-lead    { font-size: 18px; }
  .a11y-controls { padding: 90px 48px 100px; }
  .a11y-h2      { font-size: clamp(44px, 7vw, 56px); }
  .a11y-grid    { grid-template-columns: 1fr 1fr; gap: 20px; }
  .a11y-commit  { padding: 90px 48px; gap: 48px; }
  .a11y-contact { padding: 90px 48px; }

  /* ── Cookie banner ── */
  .gv-cookie  { padding: 22px 40px; }
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE LANDSCAPE  — short viewport (rotated phones)
   Phones in landscape mode have ~360-428px height. Keep content
   accessible without forcing excessive vertical scroll.
───────────────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {

  /* Hero: let it grow naturally rather than locking to 100svh */
  .hero, .hero-inner { height: auto; min-height: 100svh; }

  /* Reduce astro slot so it doesn't dominate small landscape viewport */
  .astro-slot { width: 180px; height: 180px; bottom: 60px; right: -10px; }
  .dust       { width: 140px; }

  /* Tighten hero word positions for landscape */
  .glyph-word.gw1 { top: 56px; font-size: clamp(26px, 5.5vw, 36px); }
  .glyph-word.gw2 { top: 30%; font-size: clamp(54px, 13vw, 72px); }
  .glyph-word.gw3 { bottom: 72px; font-size: clamp(22px, 4.5vw, 30px); }
  .hero-cta-row   { bottom: 18px; }

  /* Service hero: collapse min-height */
  .sv-hero { min-height: auto; padding: 90px 0 60px; }

  /* About hero: already auto-height on mobile, just reduce padding */
  .ab-hero-inner { padding-top: 48px; }
  .ab-h1 { font-size: clamp(32px, 8vw, 50px); }

  /* Nav drawer: scrollable in landscape */
  .nav-drawer { max-height: 80svh; overflow-y: auto; }

  /* Scroll indicator off in landscape (height too tight) */
  .scroll-ind { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   COOKIE CONSENT BANNER
   Fixed to bottom, slides up on first visit.
   Dismissed state stored in localStorage (key: gv_cookie_consent).
───────────────────────────────────────────────────────────────────── */
.gv-cookie {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: #111111;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transform: translateY(100%);
  transition: transform 420ms var(--ease-out);
}
.gv-cookie.gv-cookie--visible { transform: translateY(0); }
.gv-cookie-text {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
  flex: 1;
}
.gv-cookie-text a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gv-cookie-text a:hover { color: #fff; }
.gv-cookie-btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.gv-cookie-btn {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.gv-cookie-btn:active { transform: scale(0.97); }
.gv-cookie-btn--essential {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(255,255,255,0.2);
}
.gv-cookie-btn--essential:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.gv-cookie-btn--accept {
  background: var(--orange);
  color: #fff;
  border: 1.5px solid var(--orange);
}
.gv-cookie-btn--accept:hover { opacity: 0.88; }

/* ─────────────────────────────────────────────────────────────────────
   CAREERS PAGE
───────────────────────────────────────────────────────────────────── */
.cr-hero {
  background: var(--black);
  padding: 160px 120px 100px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cr-hero-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}
.cr-hero h1 {
  font-family: 'Boldonse', serif;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.cr-hero-lead {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 640px;
}
.cr-roles {
  background: var(--offwhite);
  padding: 100px 120px;
}
.cr-roles-head {
  margin-bottom: 64px;
}
.cr-roles-head h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 3.5vw, 52px);
  color: var(--black);
  margin-bottom: 16px;
}
.cr-roles-head p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  color: rgba(13,13,13,0.55);
  max-width: 560px;
}
.cr-role-list { border-top: 1px solid rgba(13,13,13,0.1); }
.cr-role {
  border-bottom: 1px solid rgba(13,13,13,0.1);
  padding: 36px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.cr-role-info { flex: 1; }
.cr-role-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--black);
  margin-bottom: 10px;
}
.cr-role-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}
.cr-role-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13,13,13,0.45);
}
.cr-role-tag + .cr-role-tag::before {
  content: '·';
  margin-right: 16px;
  color: rgba(13,13,13,0.25);
}
.cr-role-link {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 200ms var(--ease-out);
}
.cr-role-link:hover { gap: 14px; }

/* "Introduce yourself" state — shown when no roles are listed */
.cr-intro-block {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  padding-top: 48px;
  border-top: 1px solid rgba(13,13,13,0.1);
}
.cr-intro-text {
  flex: 1;
  max-width: 600px;
}
.cr-intro-text p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(13,13,13,0.58);
  margin: 0 0 18px;
}
.cr-intro-text p:last-child { margin-bottom: 0; }
.cr-intro-cta { flex-shrink: 0; }

.cr-no-roles {
  padding: 80px 0;
  text-align: center;
}
.cr-no-roles p {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  color: rgba(13,13,13,0.45);
  margin-bottom: 32px;
}

/* ─────────────────────────────────────────────────────────────────────
   BLOG INDEX PAGE  (coming soon)
───────────────────────────────────────────────────────────────────── */
.bl-hero {
  background: var(--black);
  padding: 160px 120px 120px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bl-hero-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}
.bl-hero h1 {
  font-family: 'Boldonse', serif;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.bl-hero-lead {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 620px;
  margin-bottom: 48px;
}
.bl-body {
  background: var(--offwhite);
  padding: 80px 120px 120px;
}
.bl-coming {
  text-align: center;
  padding: 80px 0;
}
.bl-coming-label {
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13,13,13,0.35);
  margin-bottom: 20px;
}
.bl-coming h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--black);
  margin-bottom: 20px;
}
.bl-coming p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  color: rgba(13,13,13,0.5);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────────
   UNIFIED RICH HERO — extensions for service, blog & careers heroes
   Reuses .ab-hero (about hero) DNA — see lines 1089+.
───────────────────────────────────────────────────────────────────── */

/* Service heroes are a touch shorter and use slightly tighter type so
   longer titles ("Make First Impressions Count.") fit two lines */
.ab-hero.gv-hero-svc { height: 760px; min-height: 760px; }
.ab-hero.gv-hero-svc .ab-h1 { font-size: 96px; }
.ab-hero.gv-hero-svc .ab-painter { width: 320px; height: 320px; }
.ab-hero.gv-hero-svc .ab-astro-glow { width: 280px; height: 280px; }

/* Eyebrow variant for non-about heroes — small orange star + label,
   right above the H1. Same DNA as .ab-net-eyebrow. */
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 22px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 700ms 150ms, transform 700ms 150ms;
}
.ab-eyebrow::before {
  content: ''; width: 14px; height: 14px;
  background:
    radial-gradient(circle, var(--orange) 22%, transparent 24%),
    conic-gradient(from 0deg,
      var(--orange) 0 12.5%, transparent 12.5% 25%,
      var(--orange) 25% 37.5%, transparent 37.5% 50%,
      var(--orange) 50% 62.5%, transparent 62.5% 75%,
      var(--orange) 75% 87.5%, transparent 87.5% 100%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 72%);
          mask: radial-gradient(circle, #000 0 70%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(239,72,35,0.5));
}
.ab-hero.lit .ab-eyebrow { opacity: 1; transform: translateY(0); }

/* Per-page motif chips — small decorative shapes that sit inside .ab-galaxy
   to communicate the service without resorting to icons in the headline.
   Use inline styles for position so they're tweakable per page. */
.gv-chip {
  position: absolute;
  z-index: 1;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 1100ms 350ms ease, filter 1100ms 350ms ease, transform 9s linear infinite;
}
.ab-hero.lit .gv-chip { opacity: 1; filter: blur(0); }
.gv-chip-float { animation: gv-chip-float var(--dur, 8s) ease-in-out infinite; animation-delay: var(--del, 0s); }
@keyframes gv-chip-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 4deg)); }
}

/* Paint can (Branding) */
.gv-chip-paint {
  width: 84px; height: 96px;
  background:
    /* lid */
    linear-gradient(180deg, rgba(255,255,255,0.16) 0 6px, transparent 6px) top/100% no-repeat,
    /* body */
    linear-gradient(180deg, var(--orange) 0%, #B83518 100%);
  border-radius: 6px 6px 8px 8px;
  box-shadow: inset 0 -16px 0 rgba(0,0,0,0.18), 0 24px 40px rgba(239,72,35,0.25);
}
.gv-chip-paint::before {
  /* handle */
  content: ''; position: absolute; left: 50%; top: -10px;
  width: 64px; height: 12px; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.45);
  border-bottom: none; border-radius: 999px 999px 0 0;
}
.gv-chip-paint::after {
  /* drip */
  content: ''; position: absolute; left: 14px; top: 28px;
  width: 12px; height: 38px; border-radius: 0 0 50% 50%;
  background: var(--orange);
}

/* Play emblem (Video) */
.gv-chip-play {
  width: 110px; height: 110px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(239,72,35,0.10),
    0 0 60px rgba(239,72,35,0.35);
  display: grid; place-items: center;
}
.gv-chip-play::after {
  content: ''; width: 0; height: 0;
  margin-left: 6px;
  border-style: solid; border-width: 22px 0 22px 32px;
  border-color: transparent transparent transparent var(--orange);
}

/* Browser window (Websites) */
.gv-chip-window {
  width: 220px; height: 138px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.gv-chip-window::before {
  content: ''; display: block; height: 22px;
  background: #F5F4F2;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background-image:
    radial-gradient(circle, #E05A52 4px, transparent 5px),
    radial-gradient(circle, #E8C42A 4px, transparent 5px),
    radial-gradient(circle, #8BAB28 4px, transparent 5px);
  background-position: 10px 11px, 26px 11px, 42px 11px;
  background-repeat: no-repeat;
}
.gv-chip-window::after {
  content: ''; position: absolute;
  inset: 22px 0 0;
  background:
    linear-gradient(180deg, var(--orange) 0 28px, transparent 28px),
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(0,0,0,0.06) 38px 39px);
}

/* Rising bars (Paid Ads) */
.gv-chip-bars {
  width: 140px; height: 110px;
  display: flex; align-items: flex-end; gap: 10px;
}
.gv-chip-bars span {
  flex: 1;
  background: linear-gradient(180deg, var(--orange), #B83518);
  border-radius: 4px 4px 0 0;
  animation: gv-bar-grow 2.6s ease-in-out infinite;
  transform-origin: bottom;
}
.gv-chip-bars span:nth-child(1) { height: 36%; animation-delay: 0s; }
.gv-chip-bars span:nth-child(2) { height: 62%; animation-delay: .3s; }
.gv-chip-bars span:nth-child(3) { height: 48%; animation-delay: .6s; }
.gv-chip-bars span:nth-child(4) { height: 86%; animation-delay: .9s; background: linear-gradient(180deg, #fff, var(--orange)); }
.gv-chip-bars span:nth-child(5) { height: 100%; animation-delay: 1.2s; }
@keyframes gv-bar-grow {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.08); }
}
.gv-chip-bars::after {
  /* trend arrow */
  content: ''; position: absolute; right: -22px; top: -12px;
  width: 56px; height: 4px; background: var(--orange); border-radius: 999px;
  transform: rotate(-26deg); transform-origin: left center;
  box-shadow: 36px 0 0 -1px var(--orange);
}
.gv-chip-bars::before {
  content: ''; position: absolute; right: -34px; top: -28px;
  border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--orange);
  transform: rotate(-26deg);
}

/* Speech / quote bubble (Blog) */
.gv-chip-quote {
  width: 130px; height: 130px;
  background: var(--orange);
  border-radius: 24px 24px 24px 4px;
  display: grid; place-items: center;
  box-shadow: 0 24px 50px rgba(239,72,35,0.35);
  font-family: 'Boldonse', sans-serif;
  font-size: 88px; color: #fff;
  padding-bottom: 14px;
}
.gv-chip-quote::before { content: '\201C'; }
.gv-chip-quote::after {
  content: ''; position: absolute;
  left: 8px; bottom: -16px;
  width: 24px; height: 24px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Planet + flag (Careers) */
.gv-chip-planet {
  width: 150px; height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #FFB48A 0%, var(--orange) 35%, #6F1F0B 100%);
  box-shadow: inset -22px -28px 50px rgba(0,0,0,0.45), 0 30px 60px rgba(239,72,35,0.3);
}
.gv-chip-planet::before {
  /* ring */
  content: ''; position: absolute;
  left: -36px; right: -36px;
  top: 50%; height: 28px;
  border: 4px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  transform: translateY(-50%) rotate(-22deg);
  border-left-color: transparent; border-right-color: transparent;
}
.gv-chip-planet::after {
  /* flag */
  content: 'HIRING';
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--orange); color: #fff;
  font-family: 'Boldonse', sans-serif;
  font-size: 11px; letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 2px;
  box-shadow: 0 -38px 0 -2px rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER LOGO + GIF — fix sizing & alignment so they overlap properly
───────────────────────────────────────────────────────────────────── */
.footer-art {
  position: absolute; left: 60px; top: 60px;
  /* 949:525 aspect ratio of logo-long-white.png at ~80px tall */
  width: 320px; height: 80px;
  pointer-events: none; user-select: none;
}
.footer-art-logo {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.5;
  transform: none;
}
.footer-art-gif {
  position: absolute; inset: 0;
  background-image: url('../assets/footer-anim.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: url('../assets/logo-long-white.png');
          mask-image: url('../assets/logo-long-white.png');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
}

@media (max-width: 768px) {
  .footer-art {
    position: static;
    width: 240px; height: 60px;
    margin-bottom: 36px;
  }
  .footer-art-logo { opacity: 0.55; }
}

/* ─────────────────────────────────────────────────────────────────────
   HOW WE DO IT — brand-style upgrade for .sv-proc-flower
   Keeps scroll behavior + SVG intact; refreshes type, colors, decoration.
───────────────────────────────────────────────────────────────────── */
.sv-proc-flower-section {
  background: var(--black);
  color: #fff;
  overflow: hidden;
}

/* Ambient logo-pattern texture behind everything */
.sv-proc-flower-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/grid-pattern.svg');
  background-size: 180px 180px;
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Glow behind the flower */
.sv-proc-flower-section::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -10%);
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(239,72,35,0.25), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.sv-proc-flower-header { position: relative; z-index: 2; padding: 130px 88px 60px; }
.sv-proc-kicker { color: #fff; }
.sv-proc-eyebrow { color: rgba(255,255,255,0.55); }
.sv-proc-sub-row { border-bottom-color: rgba(255,255,255,0.1); }
.sv-proc-intro { color: rgba(255,255,255,0.6); }

/* Soften the SVG ring strokes for the dark backdrop */
.sv-proc-flower-section .sv-proc-flower-shape { position: relative; z-index: 2; }
.sv-proc-flower-section .sv-proc-flower-svg path[stroke^='rgba(239'] { stroke: rgba(255,255,255,0.10); }
/* Orange dashed orbit ring around the flower for personality */
.sv-proc-flower-shape::before {
  content: ''; position: absolute; inset: -40px;
  border: 1.5px dashed rgba(239,72,35,0.45);
  border-radius: 50%;
  animation: gv-orbit 60s linear infinite;
}
.sv-proc-flower-shape::after {
  content: ''; position: absolute; inset: -90px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}
@keyframes gv-orbit { to { transform: rotate(360deg); } }

/* Step content — repaint for dark bg */
.sv-proc-flower-num {
  width: 56px; height: 56px;
  border: 2px solid var(--orange);
  background: rgba(239,72,35,0.10);
  color: #fff;
  font-family: 'Boldonse', sans-serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 8px rgba(239,72,35,0.06), 0 0 32px rgba(239,72,35,0.35);
}
.sv-proc-flower-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: #fff;
  text-transform: uppercase;
}
.sv-proc-flower-desc {
  color: rgba(255,255,255,0.65);
  font-size: 16px;
}

/* Floating stars sprinkled in the section background */
.sv-proc-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sv-proc-star {
  position: absolute;
  width: var(--s, 18px); height: var(--s, 18px);
  background:
    linear-gradient(transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(90deg, transparent 47%, #fff 47% 53%, transparent 53%);
  opacity: 0.5;
  animation: gv-twinkle 4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes gv-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50%      { opacity: 0.9; transform: scale(1); }
}

/* Mobile list — repaint for dark bg */
@media (max-width: 768px) {
  .sv-proc-flower-section::after { display: none; }
  .sv-proc-mobile-item {
    border-top-color: rgba(255,255,255,0.10) !important;
  }
  .sv-proc-mobile-num {
    border-color: var(--orange) !important;
    color: #fff !important;
  }
  .sv-proc-mobile-title { color: #fff !important; }
  .sv-proc-mobile-desc { color: rgba(255,255,255,0.6) !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   WHAT YOU GET — brand-style upgrade for .sv-wyg
   Keeps hover-list functionality; refreshes type, panel & numbering.
───────────────────────────────────────────────────────────────────── */
.sv-wyg-section {
  background: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.sv-wyg-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/grid-pattern.svg');
  background-size: 220px 220px;
  opacity: 0.06;
  pointer-events: none;
}
.sv-wyg-heading {
  font-family: 'Boldonse', sans-serif;
  font-size: 96px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.36;
  position: relative; z-index: 2;
}
.sv-wyg-heading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin: 0 0 18px 14px;
  background: var(--orange);
  border-radius: 3px;
  vertical-align: middle;
}
.sv-wyg-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative; z-index: 2;
}
.sv-wyg-kicker::before {
  content: ''; width: 12px; height: 12px;
  background:
    radial-gradient(circle, var(--orange) 22%, transparent 24%),
    conic-gradient(from 0deg,
      var(--orange) 0 12.5%, transparent 12.5% 25%,
      var(--orange) 25% 37.5%, transparent 37.5% 50%,
      var(--orange) 50% 62.5%, transparent 62.5% 75%,
      var(--orange) 75% 87.5%, transparent 87.5% 100%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 72%);
          mask: radial-gradient(circle, #000 0 70%, transparent 72%);
}
.sv-wyg-header-row, .sv-wyg-layout { position: relative; z-index: 2; }

/* Item rows — Boldonse names, ordinal numbers, orange hairline on active */
.sv-wyg-item { position: relative; padding-left: 84px; }
.sv-wyg-item::before {
  /* numbering tag */
  content: '0' counter(wyg-i);
  counter-increment: wyg-i;
  position: absolute; left: 0; top: 44px;
  font-family: 'Boldonse', sans-serif;
  font-size: 14px;
  color: rgba(13,13,13,0.4);
  letter-spacing: 0.05em;
  transition: color 280ms ease;
}
.sv-wyg-list { counter-reset: wyg-i; }
.sv-wyg-item.wyg-active::before { color: var(--orange); }

.sv-wyg-item::after {
  /* active row underline accent */
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--ease-out);
}
.sv-wyg-item.wyg-active::after { transform: scaleX(1); }

.sv-wyg-name {
  font-family: 'Boldonse', sans-serif;
  font-size: 56px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.36;
}
.sv-wyg-bullet { background: var(--orange); border-radius: 50%; width: 12px; height: 12px; }
.sv-wyg-desc { color: rgba(13,13,13,0.6); padding-left: 30px; }

/* Sticky preview panel — orange textured backdrop with brand pattern */
.sv-wyg-panel-inner {
  background: var(--orange);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(239,72,35,0.25);
}
.sv-wyg-panel-bg {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.20) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 14px 14px;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.sv-wyg-panel-img::after {
  /* refreshed placeholder — orange star instead of orange circle */
  width: 80px; height: 80px;
  border-radius: 0;
  background: #fff;
  border: none;
  -webkit-mask:
    radial-gradient(circle, #000 22%, transparent 24%),
    conic-gradient(from 0deg,
      #000 0 12.5%, transparent 12.5% 25%,
      #000 25% 37.5%, transparent 37.5% 50%,
      #000 50% 62.5%, transparent 62.5% 75%,
      #000 75% 87.5%, transparent 87.5% 100%);
          mask:
    radial-gradient(circle, #000 22%, transparent 24%),
    conic-gradient(from 0deg,
      #000 0 12.5%, transparent 12.5% 25%,
      #000 25% 37.5%, transparent 37.5% 50%,
      #000 50% 62.5%, transparent 62.5% 75%,
      #000 75% 87.5%, transparent 87.5% 100%);
}

/* Mobile: tighten heading + spacing */
@media (max-width: 768px) {
  .sv-wyg-heading { font-size: clamp(40px, 12vw, 64px); letter-spacing: -0.01em; }
  .sv-wyg-item { padding-left: 36px; }
  .sv-wyg-item::before { top: 30px; }
  .sv-wyg-name { font-size: clamp(28px, 8vw, 40px); }
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER — figma-accurate lockup (massive grid./VELOCITY with GIF fill)
───────────────────────────────────────────────────────────────────── */
footer {
  position: relative;
  min-height: 820px;
  padding-top: 70px;
}
/* Thin orange top stripe */
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange);
  z-index: 3;
}

/* Reset earlier footer-art rules — repurpose container for the wordmark lockup */
.footer-art {
  position: absolute; left: 60px; top: 70px;
  width: auto; height: auto;
  pointer-events: none; user-select: none;
}
.footer-wordmark { position: relative; line-height: 0.82; }

/* "grid." set in Boldonse at hero-display scale, GIF clipped to the glyphs */
.footer-wm-g {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 196px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  /* Padding must contain the full Boldonse ink extent so background-clip:text
     fills every glyph. At 280px: baseline=311px from elem top, actual ink
     overflows 25px above (needs ≥0.16em top) and 23px below (needs ≥0.32em btm).
     Values here add 10px safety buffer on each side. */
  padding-top: 0.18em;
  padding-right: 0.12em;
  padding-bottom: 0.36em;
  /* Animated fill via background-clip text */
  color: transparent;
  background-image: url('../assets/footer-anim.gif');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  display: inline-block;
  position: relative;
}
.footer-wm-g > span { display: inline; }
/* Fallback (no background-clip support): show as white */
@supports not (background-clip: text) {
  .footer-wm-g { color: rgba(255,255,255,0.55); background-image: none; }
}

/* "VELOCITY" — italic Archivo, lower-right of "grid." like the wordmark */
.footer-wm-v {
  position: absolute;
  right: 6px; bottom: 22px;
  font-family: 'Archivo', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: transparent;
  background-image: url('../assets/footer-anim.gif');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
}
@supports not (background-clip: text) {
  .footer-wm-v { color: rgba(255,255,255,0.5); background-image: none; }
}

/* Hide any legacy .footer-art-logo / .footer-art-gif if a page still has them */
.footer-art-logo, .footer-art-gif { display: none; }

/* Right-side nav columns sit further right + a tad higher */
.footer-cols { position: absolute; right: 80px; top: 100px; gap: 80px; }
.footer-col h4 { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; }

/* CTA band — push below the wordmark lockup */
.footer-cta { top: 540px; padding: 50px 80px 0; }
.footer-cta-h {
  font-family: 'Boldonse', sans-serif;
  font-size: 44px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.footer-cta-h .orange { color: var(--orange); }
.footer-cta-right { width: 540px; align-self: flex-end; padding-bottom: 4px; }
.footer-cta-desc { font-size: 16px; line-height: 1.6; }

.footer-bottom { top: 740px; padding: 22px 80px; }
.footer-bottom span, .footer-bottom a { font-size: 12px; letter-spacing: 0.01em; }

@media (max-width: 768px) {
  footer { min-height: 0; padding: 64px 22px 30px; }
  footer::before { height: 3px; }
  .footer-art {
    position: static;
    margin-bottom: 30px;
  }
  .footer-wm-g { font-size: clamp(96px, 28vw, 160px); }
  .footer-wm-v { font-size: clamp(20px, 5vw, 28px); bottom: 12px; right: 4px; }
  .footer-cols { position: static; flex-wrap: wrap; gap: 36px; margin-bottom: 36px; }
  .footer-cta { position: static; padding: 32px 0 0; }
  .footer-cta-h { font-size: clamp(28px, 8vw, 40px); }
  .footer-cta-inner { flex-direction: column; gap: 24px; }
  .footer-cta-right { width: 100%; }
  .footer-bottom { position: static; padding: 24px 0 0; flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────
   NAV — accessibility icon button
───────────────────────────────────────────────────────────────────── */
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-a11y {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: transparent;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 200ms, color 200ms, border-color 200ms, transform 160ms ease-out;
  text-decoration: none;
}
.nav-a11y:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.nav-a11y:active { transform: scale(0.94); }
.nav-a11y svg { display: block; }
/* In scrolled / inverted nav: */
.gv-nav.scrolled .nav-a11y { border-color: rgba(13,13,13,0.45); color: var(--black); }
.gv-nav.scrolled .nav-a11y:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* nav-a11y is now visible at all breakpoints — shown next to hamburger on mobile/tablet */

/* ─────────────────────────────────────────────────────────────────────
   BRAND PATTERN BACKDROPS — use the curly-letters tile
───────────────────────────────────────────────────────────────────── */
.sv-proc-flower-section::before {
  background-image: url('../assets/logo-pattern-big.png');
  background-size: 480px auto;
  background-repeat: repeat;
  opacity: 0.07;
  mix-blend-mode: normal;
  filter: none;
}
.sv-wyg-section::before {
  background-image: url('../assets/logo-pattern-big.png');
  background-size: 380px auto;
  background-repeat: repeat;
  opacity: 0.06;
}

/* ─────────────────────────────────────────────────────────────────────
   SERVICE PAGE H2s — Boldonse, uppercase, tighter (sv-h2)
───────────────────────────────────────────────────────────────────── */
.sv-h2,
.cs-h2 {
  font-family: 'Boldonse', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.36;
  font-weight: 400;
}
/* On dark sections, .sv-h2 stays white; on light/off sections, black — already inherited */

/* The "Brands We've Got" client list — clients in Archivo (already are) */
.sv-cl-item a {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────────────
   HOW WE DO IT — replace inner circle with an orange star at the centre
   instead of the litebox-style flower. Keep outer dashed orbits.
───────────────────────────────────────────────────────────────────── */
/* Hide the original flower SVG curves */
.sv-proc-flower-svg path:not(.sv-proc-stroke) { display: none; }
.sv-proc-flower-svg .sv-proc-stroke { display: none; }

/* Replace with a stylised constellation: large orange star at centre,
   pulsing rings, plus tiny orbiting dots */
.sv-proc-flower-shape::before {
  /* outermost dashed orbit (was already set earlier) */
  inset: 0;
}
.sv-proc-flower-shape::after {
  /* second orbit, smaller */
  inset: 80px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 50%;
}
.sv-proc-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.sv-proc-star {
  width: 360px; height: 360px;
  background:
    radial-gradient(circle at 50% 50%, rgba(239,72,35,0.55) 0%, transparent 60%);
  filter: blur(20px);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sv-proc-glyph {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  /* 8-point starburst built from a single conic gradient + mask */
  background: conic-gradient(from 22.5deg,
    var(--orange) 0 6.25%, transparent 6.25% 18.75%,
    var(--orange) 18.75% 31.25%, transparent 31.25% 43.75%,
    var(--orange) 43.75% 56.25%, transparent 56.25% 68.75%,
    var(--orange) 68.75% 81.25%, transparent 81.25% 93.75%,
    var(--orange) 93.75% 100%);
  -webkit-mask: radial-gradient(circle, #000 0% 88%, transparent 92%);
          mask: radial-gradient(circle, #000 0% 88%, transparent 92%);
  filter: drop-shadow(0 0 18px rgba(239,72,35,0.45));
  animation: gv-orbit 32s linear infinite reverse;
}

/* Step pill (number + step label) sits between the orange star and orbit text */
.sv-proc-flower-step { padding: 0; }
.sv-proc-flower-num {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.sv-proc-flower-title { font-size: 36px; max-width: none; white-space: nowrap; }
.sv-proc-flower-desc { color: rgba(255,255,255,0.65); max-width: 340px; }

/* Three orbiting micro-dots — purely decorative */
.sv-proc-orbiter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: gv-orbit var(--dur, 24s) linear infinite;
}
.sv-proc-orbiter span {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 14px var(--c, #fff);
  top: var(--top, 0);
  left: var(--left, 50%);
  transform: translateX(-50%);
}

/* ─────────────────────────────────────────────────────────────────────
   CTA Cards — make Lottie slots visible by default (about + careers pages)
───────────────────────────────────────────────────────────────────── */
.cta-lottie {
  position: absolute;
  width: 140px; height: 140px;
  top: 22px; right: 22px;
  pointer-events: none;
  opacity: 0.95;
}

/* ─────────────────────────────────────────────────────────────────────
   ACCESSIBILITY PAGE
───────────────────────────────────────────────────────────────────── */
.a11y-hero {
  width: 1440px;
  background: var(--black);
  color: #fff;
  padding: 200px 88px 120px;
  position: relative;
  overflow: hidden;
}
.a11y-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/logo-pattern-big.png');
  background-size: 540px auto;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
}
.a11y-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.a11y-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 30px;
}
.a11y-eyebrow-star {
  width: 14px; height: 14px;
  background:
    radial-gradient(circle, var(--orange) 22%, transparent 24%),
    conic-gradient(from 0deg,
      var(--orange) 0 12.5%, transparent 12.5% 25%,
      var(--orange) 25% 37.5%, transparent 37.5% 50%,
      var(--orange) 50% 62.5%, transparent 62.5% 75%,
      var(--orange) 75% 87.5%, transparent 87.5% 100%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 72%);
          mask: radial-gradient(circle, #000 0 70%, transparent 72%);
}
.a11y-h1 {
  font-family: 'Boldonse', sans-serif;
  font-size: 108px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 30px;
}
.a11y-lead {
  font-family: 'Archivo', sans-serif;
  font-size: 19px; line-height: 2.09;
  color: rgba(255,255,255,0.72);
  max-width: 640px;
}

/* Controls */
.a11y-controls {
  width: 1440px;
  background: var(--offwhite);
  padding: 110px 88px 120px;
  position: relative;
  overflow: hidden;
}
.a11y-controls-head { margin-bottom: 60px; max-width: 720px; }
.a11y-kicker {
  font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  display: inline-block;
}
.a11y-kicker.light { color: var(--orange); }
.a11y-h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 64px;
  line-height: 1.36;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 18px;
}
.a11y-h2-light { color: #fff; }
.a11y-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 16px; line-height: 1.9; color: rgba(13,13,13,0.55);
}

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.a11y-tile {
  background: #fff;
  border: 1px solid rgba(13,13,13,0.08);
  border-radius: 16px;
  padding: 34px 32px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 200ms var(--ease-out), border-color 200ms;
}
.a11y-tile:hover { transform: translateY(-2px); border-color: rgba(239,72,35,0.4); }
.a11y-tile-icon {
  width: 60px; height: 60px;
  border-radius: 12px;
  background: rgba(239,72,35,0.08);
  color: var(--orange);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.a11y-tile-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  color: var(--black);
}
.a11y-tile-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  color: rgba(13,13,13,0.6);
  line-height: 1.97;
  margin-bottom: 24px;
  flex: 1;
}
.a11y-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  border: 0; background: transparent;
  padding: 0; cursor: pointer;
  font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--black);
}
.a11y-toggle-track {
  width: 50px; height: 28px;
  background: rgba(13,13,13,0.15);
  border-radius: 999px;
  position: relative;
  transition: background 200ms;
}
.a11y-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 220ms var(--ease-out);
}
.a11y-toggle.on .a11y-toggle-track { background: var(--orange); }
.a11y-toggle.on .a11y-toggle-knob { transform: translateX(22px); }
.a11y-toggle-label { min-width: 22px; text-align: left; }

.a11y-reset-row { margin-top: 36px; text-align: right; }

/* Commitment */
.a11y-commit {
  width: 1440px;
  background: #fff;
  padding: 120px 88px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.a11y-commit-right p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(13,13,13,0.72);
  margin-bottom: 22px;
}
.a11y-commit-right code {
  background: rgba(239,72,35,0.08);
  color: var(--orange);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Contact band */
.a11y-contact {
  width: 1440px;
  background: var(--black);
  color: #fff;
  padding: 100px 88px;
}
.a11y-contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.a11y-contact-right p {
  font-family: 'Archivo', sans-serif;
  font-size: 17px; line-height: 2.09;
  color: rgba(255,255,255,0.68);
  margin-bottom: 28px;
}
.a11y-stmt-ref {
  font-family: 'Archivo', sans-serif;
  font-size: 15px; color: rgba(13,13,13,0.45);
  margin-top: 20px; text-align: right;
}
.a11y-stmt-ref a {
  color: var(--orange); font-weight: 700;
  text-decoration: none;
}
.a11y-stmt-ref a:hover { text-decoration: underline; }

.btn-outline-dark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: 1.5px solid rgba(13,13,13,0.4);
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, transform 160ms ease-out;
}
.btn-outline-dark:hover { background: var(--black); color: #fff; border-color: var(--black); }
.btn-outline-dark:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .a11y-hero, .a11y-controls, .a11y-commit, .a11y-contact { width: 100%; padding-left: 22px; padding-right: 22px; }
  .a11y-hero { padding-top: 130px; padding-bottom: 70px; }
  .a11y-h1 { font-size: clamp(42px, 12vw, 64px); }
  .a11y-h2 { font-size: clamp(34px, 9vw, 48px); }
  .a11y-grid { grid-template-columns: 1fr; }
  .a11y-commit { grid-template-columns: 1fr; gap: 30px; padding: 70px 22px; }
  .a11y-contact-inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL A11Y PREFERENCE OVERRIDES — added to <html> when toggled on
───────────────────────────────────────────────────────────────────── */
html.a11y-large-text       { font-size: 18px; }
html.a11y-high-contrast body { background: #fff; }
html.a11y-high-contrast .ab-hero, html.a11y-high-contrast .hero,
html.a11y-high-contrast .sv-proc-flower-section, html.a11y-high-contrast .a11y-hero, html.a11y-high-contrast .a11y-contact,
html.a11y-high-contrast footer { background: #000 !important; color: #fff !important; }
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html.a11y-underline-links a:not(.btn-dark):not(.btn-outline-white):not(.btn-outline-dark):not(.nav-cta):not(.hero-pill):not(.nav-a11y):not(.cta-btn a) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────
   HERO FIXES — text/image overlap, per-page Lottie astronaut support
───────────────────────────────────────────────────────────────────── */
/* Tighten service/blog/careers hero text column + give the mascot more room */
.ab-hero.gv-hero-svc .ab-hero-inner {
  width: 880px;
  left: 80px;
  padding-top: 170px;
}
.ab-hero.gv-hero-svc .ab-h1 {
  font-size: 64px;
  line-height: 1.36;
  letter-spacing: -0.01em;
}
.ab-hero.gv-hero-svc .ab-sub {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
}
.ab-hero.gv-hero-svc .ab-painter {
  right: 60px;
  width: 340px; height: 340px;
}

/* Lottie astronaut slot (replaces static .ab-astro-img when present) */
.ab-astro-lottie {
  width: 100%; height: 100%;
  position: relative;
  pointer-events: none;
}
.ab-astro-lottie svg { width: 100% !important; height: 100% !important; }
.ab-painter .ab-astro-img { transition: opacity 240ms ease; }
.ab-painter.has-lottie .ab-astro-img { opacity: 0; }

/* Per-page subtle layout variations so heroes don't all look identical */
.ab-hero.gv-hero-svc[data-svc="branding"] .ab-painter { top: 52%; right: 130px; }
.ab-hero.gv-hero-svc[data-svc="video"]    .ab-painter { top: 56%; right: 100px; width: 380px; height: 380px; }
.ab-hero.gv-hero-svc[data-svc="websites"] .ab-painter { top: 58%; right: 140px; }
.ab-hero.gv-hero-svc[data-svc="paid-ads"] .ab-painter { top: 50%; right: 90px; }
.ab-hero.gv-hero-svc[data-svc="blog"]     .ab-painter { top: 54%; right: 120px; }
.ab-hero.gv-hero-svc[data-svc="careers"]  .ab-painter { top: 56%; right: 110px; }

/* Heading orange accent for the last word of each h1 (per-page) */
.ab-h1 .ab-orange { color: var(--orange); }

/* When using a Lottie astro: brighten the glow + give it a bouncier idle */
.ab-painter.has-lottie .ab-astro-glow {
  background: radial-gradient(circle,
    rgba(239,72,35,0.36) 0%, rgba(239,72,35,0.10) 55%, transparent 75%);
}

/* Make sure CTAs sit above the floating chip so they're clickable */
.ab-hero.gv-hero-svc .ab-cta-row { z-index: 5; position: relative; }

/* The "Brands We've Got" client list — heading in Boldonse (was Archivo) */
.sv-cl-left .sv-h2 { font-family: 'Boldonse', sans-serif !important; }
.sv-cl-item, .sv-cl-item a { font-family: 'Archivo', sans-serif !important; font-weight: 700; }


/* ═════════════════════════════════════════════════════════════════════
   ROUND-4 REBUILD — fix broken pinwheel, footer proportions, shrink
   patterns, and give every service hero its own concept
   (overrides earlier rules — placed at end of file).
═════════════════════════════════════════════════════════════════════ */

/* ─── FOOTER REBALANCE ────────────────────────────────────────────── */
/* Round-4 footer override removed — original footer wordmark values restored */

/* ─── PATTERN BACKGROUND TUNING ──────────────────────────────────── */
.sv-proc-flower-section::before {
  background-size: 180px auto;
  opacity: 0.05;
}
.sv-wyg-section::before {
  background-size: 160px auto;
  opacity: 0.04;
}

/* ─── HOW WE DO IT — kill the broken pinwheel, clean inner ───────── */
.sv-proc-star, .sv-proc-glyph { display: none !important; }
.sv-proc-center { z-index: 0; }
.sv-proc-flower-content { z-index: 3; position: absolute; inset: 0; }
.sv-proc-flower-shape::before {
  inset: -20px;
  border: 1.5px dashed rgba(239,72,35,0.45);
}
.sv-proc-flower-shape::after {
  inset: -90px;
  border: 1px solid rgba(255,255,255,0.06);
}
/* Add a soft orange glow behind the step content instead of the pinwheel */
.sv-proc-flower-step::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(239,72,35,0.45) 0%, rgba(239,72,35,0.12) 38%, transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
.sv-proc-flower-num {
  width: 64px; height: 64px;
  font-size: 20px;
  box-shadow: 0 0 0 8px rgba(239,72,35,0.08), 0 0 40px rgba(239,72,35,0.4);
}
.sv-proc-flower-title { font-size: 44px; max-width: 10ch; }
.sv-proc-flower-desc { max-width: 360px; }

/* ─── WHAT YOU GET — tidy panel placeholder ───────────────────────── */
.sv-wyg-panel-img::after {
  width: 48px; height: 48px;
  -webkit-mask: none;  mask: none;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.4);
}

/* ═════════════════════════════════════════════════════════════════════
   PER-PAGE HERO CONCEPTS — visually distinct per service
═════════════════════════════════════════════════════════════════════ */

/* Shared service-hero reset: tighter h1, more room for the mascot */
.ab-hero.gv-hero-svc { height: 760px; min-height: 760px; }
.ab-hero.gv-hero-svc .ab-hero-inner {
  width: 900px;
  left: 88px;
  padding-top: 200px;
}
.ab-hero.gv-hero-svc .ab-h1 {
  font-size: 60px;
  line-height: 1.36;
  letter-spacing: -0.008em;
  margin-bottom: 26px;
}
.ab-hero.gv-hero-svc .ab-sub { max-width: 520px; font-size: 17px; }
.ab-hero.gv-hero-svc .ab-painter {
  width: 380px; height: 380px;
  right: 60px; top: 54%;
}
.ab-hero.gv-hero-svc .ab-astro-glow { width: 320px; height: 320px; }

/* ─── BRANDING — orange CANVAS with paint splatters everywhere ───── */
.ab-hero[data-svc="branding"] {
  background: linear-gradient(135deg, var(--orange) 0%, #C7331A 100%);
}
.ab-hero[data-svc="branding"] .ab-galaxy {
  background:
    radial-gradient(ellipse 700px 600px at 80% 60%, rgba(0,0,0,0.45), transparent 65%),
    radial-gradient(ellipse 500px 400px at 30% 30%, rgba(255,255,255,0.10), transparent 60%);
}
.ab-hero[data-svc="branding"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(0,0,0,0.22); }
.ab-hero[data-svc="branding"] .ab-nebula { display: none; }
/* Splat dots — replace generic dots with paint-like blobs */
.ab-hero[data-svc="branding"] .ab-dot {
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
  filter: blur(0.3px);
}

/* ─── VIDEO — full BLACK cinema, film grain + concentric play rings ── */
.ab-hero[data-svc="video"] {
  background: #050505;
}
.ab-hero[data-svc="video"] .ab-galaxy {
  background:
    radial-gradient(ellipse 520px 480px at 77% 50%, rgba(239,72,35,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 700px 600px at 77% 50%, rgba(239,72,35,0.07) 0%, transparent 70%);
}
.ab-hero[data-svc="video"] .ab-galaxy::before {
  /* Grain texture */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Concentric play rings expanding behind the mascot */
.ab-hero[data-svc="video"] .ab-painter::before,
.ab-hero[data-svc="video"] .ab-painter::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  border: 2px solid rgba(239,72,35,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: gv-video-ring 4s ease-out infinite;
  pointer-events: none;
}
.ab-hero[data-svc="video"] .ab-painter::before { width: 380px; height: 380px; animation-delay: 0s; }
.ab-hero[data-svc="video"] .ab-painter::after  { width: 380px; height: 380px; animation-delay: 1.3s; }
@keyframes gv-video-ring {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
.ab-hero[data-svc="video"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(255,255,255,0.10); }
.ab-hero[data-svc="video"] .ab-amb-row.ar2 .ab-amb-scroll { animation-direction: reverse; }

/* ─── WEBSITES — slate / navy with stacked browser windows ─────────── */
.ab-hero[data-svc="websites"] {
  background: linear-gradient(180deg, #0F1422 0%, #050810 100%);
}
.ab-hero[data-svc="websites"] .ab-galaxy {
  background:
    /* subtle grid */
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px,
    radial-gradient(ellipse 600px 500px at 80% 40%, rgba(239,72,35,0.22), transparent 65%);
}
.ab-hero[data-svc="websites"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(255,255,255,0.08); }
.ab-hero[data-svc="websites"] .ab-nebula { display: none; }
/* Stack 3 browser windows behind the mascot, perspective-tilted */
.ab-hero[data-svc="websites"] .ab-painter { right: 100px; }
.gv-window-stack {
  position: absolute;
  right: 60px; top: 28%;
  width: 360px; height: 240px;
  z-index: 1;
  pointer-events: none;
  perspective: 1200px;
}
.gv-window-stack .gv-win {
  position: absolute;
  inset: 0;
  background: #14182A;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}
.gv-window-stack .gv-win::before {
  content: ''; display: block; height: 22px;
  background: #1B2038;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px 12px 0 0;
}
.gv-window-stack .gv-win::after {
  content: ''; position: absolute; left: 16px; top: 8px;
  width: 38px; height: 7px; border-radius: 999px;
  background: rgba(239,72,35,0.6);
  box-shadow: 14px 0 0 -1px rgba(255,255,255,0.18), 28px 0 0 -1px rgba(255,255,255,0.10);
}
.gv-window-stack .gv-win:nth-child(1) { transform: translate(-44px, 44px) rotate(-6deg); opacity: 0.55; }
.gv-window-stack .gv-win:nth-child(2) { transform: translate(-22px, 22px) rotate(-3deg); opacity: 0.78; }
.gv-window-stack .gv-win:nth-child(3) { transform: rotate(0); opacity: 1; }
.gv-window-stack .gv-win-body {
  position: absolute;
  left: 14px; right: 14px; top: 36px; bottom: 14px;
  background: linear-gradient(180deg, rgba(239,72,35,0.18) 0 22px, transparent 22px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px);
  border-radius: 6px;
}

/* ─── PAID ADS — orange gradient + giant chart bars rising up ─────── */
.ab-hero[data-svc="paid-ads"] {
  background: linear-gradient(180deg, var(--orange) 0%, #8C2A12 100%);
}
.ab-hero[data-svc="paid-ads"] .ab-galaxy {
  background: radial-gradient(ellipse 700px 500px at 80% 70%, rgba(0,0,0,0.4), transparent 65%);
}
.ab-hero[data-svc="paid-ads"] .ab-nebula { display: none; }
.ab-hero[data-svc="paid-ads"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(0,0,0,0.18); }
.gv-paid-bars {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 280px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 60px;
  z-index: 1;
  pointer-events: none;
}
.gv-paid-bars span {
  flex: 1;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.0) 100%);
  border-radius: 4px 4px 0 0;
  opacity: 0.16;
  transform-origin: bottom;
  animation: gv-paid-grow 4s ease-out infinite;
}
.gv-paid-bars span:nth-child(1)  { height: 30%;  animation-delay: 0s; }
.gv-paid-bars span:nth-child(2)  { height: 52%;  animation-delay: 0.2s; }
.gv-paid-bars span:nth-child(3)  { height: 38%;  animation-delay: 0.4s; }
.gv-paid-bars span:nth-child(4)  { height: 66%;  animation-delay: 0.6s; }
.gv-paid-bars span:nth-child(5)  { height: 80%;  animation-delay: 0.8s; opacity: 0.26; background: linear-gradient(180deg, #fff, var(--orange)); }
.gv-paid-bars span:nth-child(6)  { height: 70%;  animation-delay: 1.0s; }
.gv-paid-bars span:nth-child(7)  { height: 88%;  animation-delay: 1.2s; opacity: 0.28; }
.gv-paid-bars span:nth-child(8)  { height: 100%; animation-delay: 1.4s; opacity: 0.32; background: linear-gradient(180deg, #fff, var(--orange)); }
.gv-paid-bars span:nth-child(9)  { height: 92%;  animation-delay: 1.6s; opacity: 0.26; }
.gv-paid-bars span:nth-child(10) { height: 78%;  animation-delay: 1.8s; }
.gv-paid-bars span:nth-child(11) { height: 60%;  animation-delay: 2.0s; }
.gv-paid-bars span:nth-child(12) { height: 44%;  animation-delay: 2.2s; }
@keyframes gv-paid-grow {
  0%   { transform: scaleY(0.7); }
  50%  { transform: scaleY(1.05); }
  100% { transform: scaleY(0.7); }
}

/* ─── BLOG — cream editorial spread with dark type ─────────────────── */
.ab-hero[data-svc="blog"] {
  background: #F2EEE3;
}
.ab-hero[data-svc="blog"] .ab-galaxy {
  background: radial-gradient(ellipse 600px 480px at 78% 50%, rgba(239,72,35,0.20), transparent 60%);
}
.ab-hero[data-svc="blog"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(13,13,13,0.10); color: transparent; }
.ab-hero[data-svc="blog"] .ab-nebula { display: none; }
.ab-hero[data-svc="blog"] .ab-h1 { color: var(--black); }
.ab-hero[data-svc="blog"] .ab-eyebrow { color: rgba(13,13,13,0.65); }
.ab-hero[data-svc="blog"] .ab-sub { color: rgba(13,13,13,0.65); }
.ab-hero[data-svc="blog"] .hero-pill { color: var(--black); border-color: rgba(13,13,13,0.4); }
.ab-hero[data-svc="blog"] .hero-pill:hover { background: var(--black); color: #fff; border-color: var(--black); }
.ab-hero[data-svc="blog"] .hero-pill.solid { background: var(--black); color: #fff; border-color: var(--black); }
.ab-hero[data-svc="blog"] .ab-dot { mix-blend-mode: multiply; opacity: 0.45; }
.ab-hero[data-svc="blog"] .ab-sparkle { filter: invert(1) brightness(0.4); opacity: 0.3; }
/* Floating article card thumbnails */
.gv-blog-cards {
  position: absolute;
  right: 60px; top: 22%;
  width: 360px; height: 460px;
  z-index: 1;
  pointer-events: none;
}
.gv-blog-cards .gv-bc {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 18px 20px;
  font-family: 'Archivo', sans-serif;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gv-blog-cards .gv-bc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange);
}
.gv-blog-cards .gv-bc-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 16px;
  line-height: 1.15;
  color: var(--black);
  text-transform: uppercase;
}
.gv-blog-cards .gv-bc:nth-child(1) { width: 220px; top: 0;   left: 100px; transform: rotate(4deg); }
.gv-blog-cards .gv-bc:nth-child(2) { width: 220px; top: 140px; left: 0;   transform: rotate(-3deg); }
.gv-blog-cards .gv-bc:nth-child(3) { width: 220px; top: 290px; left: 130px; transform: rotate(2deg); }

/* ─── CAREERS — deep black with constellation of role pills ──────── */
.ab-hero[data-svc="careers"] {
  background: #050308;
}
.ab-hero[data-svc="careers"] .ab-galaxy {
  background:
    radial-gradient(ellipse 600px 500px at 78% 60%, rgba(239,72,35,0.25), transparent 65%),
    radial-gradient(ellipse 800px 500px at 30% 80%, rgba(127,55,206,0.10), transparent 65%);
}
.ab-hero[data-svc="careers"] .ab-amb-row { -webkit-text-stroke: 1.5px rgba(255,255,255,0.08); }
/* Floating role pills */
.gv-role-cloud {
  position: absolute;
  right: 60px; top: 22%;
  width: 460px; height: 440px;
  z-index: 1;
  pointer-events: none;
}
.gv-role-cloud .gv-role {
  position: absolute;
  font-family: 'Archivo', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 10px 18px;
  backdrop-filter: blur(8px);
  animation: gv-role-bob 5s ease-in-out infinite;
}
.gv-role-cloud .gv-role.is-orange {
  background: var(--orange);
  border-color: var(--orange);
}
.gv-role-cloud .gv-role:nth-child(1) { top: 0;   left: 80px; animation-delay: 0s; }
.gv-role-cloud .gv-role:nth-child(2) { top: 60px; right: 0;  animation-delay: 0.6s; }
.gv-role-cloud .gv-role:nth-child(3) { top: 140px; left: 0;  animation-delay: 1.2s; }
.gv-role-cloud .gv-role:nth-child(4) { top: 220px; right: 60px; animation-delay: 1.8s; }
.gv-role-cloud .gv-role:nth-child(5) { top: 310px; left: 80px; animation-delay: 2.4s; }
.gv-role-cloud .gv-role:nth-child(6) { top: 380px; right: 30px; animation-delay: 3s; }
@keyframes gv-role-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ─── Drop the redundant in-galaxy gv-chip on pages that now have richer motifs ── */
.ab-hero[data-svc="video"] .gv-chip-play,
.ab-hero[data-svc="websites"] .gv-chip-window,
.ab-hero[data-svc="paid-ads"] .gv-chip-bars,
.ab-hero[data-svc="blog"] .gv-chip-quote,
.ab-hero[data-svc="careers"] .gv-chip-planet { display: none; }

/* Keep branding's paint can floating — but reposition higher so it doesn't clash */
.ab-hero[data-svc="branding"] .gv-chip-paint { top: 18%; left: 56%; }

/* ─── MOBILE — keep heroes readable, hide decorative extras ───────── */
@media (max-width: 768px) {
  .ab-hero[data-svc] { background: var(--orange); }
  .ab-hero[data-svc="video"], .ab-hero[data-svc="websites"], .ab-hero[data-svc="careers"] { background: #050505; }
  .ab-hero[data-svc="blog"] { background: #F2EEE3; }
  .ab-hero[data-svc="blog"] .ab-h1, .ab-hero[data-svc="blog"] .ab-sub { color: var(--black); }
  .gv-window-stack, .gv-blog-cards, .gv-role-cloud, .gv-paid-bars { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════
   ROUND-5 — ASTRONAUTS OUT, ANIMATED SERVICE-METAPHORS IN
   Each hero has its own concept-driven visual stage on the right.
═════════════════════════════════════════════════════════════════════ */

/* Eyebrow with brand star */
.ab-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.ab-eb-star {
  width: 12px; height: 12px;
  background:
    radial-gradient(circle, currentColor 22%, transparent 24%),
    conic-gradient(from 0deg,
      currentColor 0 12.5%, transparent 12.5% 25%,
      currentColor 25% 37.5%, transparent 37.5% 50%,
      currentColor 50% 62.5%, transparent 62.5% 75%,
      currentColor 75% 87.5%, transparent 87.5% 100%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 72%);
          mask: radial-gradient(circle, #000 0 70%, transparent 72%);
  color: var(--orange);
}

/* The visual stages all sit on the right half of the 1440 hero */
.gv-color-wall, .gv-film-stage, .gv-web-stage,
.gv-paid-stage, .gv-blog-stage, .gv-role-cloud {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* ─── BRANDING — colour-system tile wall ─────────────────────────── */
.gv-color-wall {
  right: 80px; top: 16%;
  width: 460px; height: 460px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.gv-cw-tile {
  background: var(--c, var(--orange));
  border-radius: 14px;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.04);
  display: grid; place-items: end start;
  padding: 14px;
  color: rgba(255,255,255,0.7);
  font-family: 'Boldonse', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  will-change: transform, opacity;
}

/* ─── VIDEO — full-height cinema stage: three filmstrips + projector emblem ─ */
.gv-film-stage {
  right: 0; top: 0;
  width: 560px; height: 100%;
  overflow: visible;
}

/* Projector-beam cone — warm light from top-center of stage */
.gv-proj-beam {
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: conic-gradient(
    from -14deg at 38% 0%,
    transparent 0deg,
    rgba(239,72,35,0.07) 10deg,
    rgba(239,72,35,0.04) 24deg,
    transparent 34deg
  );
  pointer-events: none;
  z-index: 1;
}

/* Base filmstrip — all three strips share this */
.gv-film-strip {
  position: absolute;
  top: 0; bottom: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Ghost strips — atmospheric depth layers, no sprockets */
.gv-fs-ghost {
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.gv-fs-a {
  left: 24px; width: 110px;
  gap: 12px;
  opacity: 0.2;
  filter: blur(0.5px);
  z-index: 3;
}
.gv-fs-b {
  right: 8px; width: 70px;
  gap: 10px;
  opacity: 0.13;
  filter: blur(1px);
  z-index: 3;
}

/* Main strip — numbered frames, sprocket holes */
.gv-fs-main {
  right: 88px; width: 196px;
  gap: 16px;
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  z-index: 4;
}
.gv-fs-main::before, .gv-fs-main::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 16px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.85) 3.5px, transparent 4.5px);
  background-size: 16px 22px;
  background-repeat: repeat-y;
  background-color: rgba(255,255,255,0.07);
  z-index: 2;
}
.gv-fs-main::before { left: 0; }
.gv-fs-main::after  { right: 0; }
.gv-fs-main > div   { display: none; } /* JS populates clones */

/* Main strip frames */
.gv-frame {
  flex-shrink: 0;
  height: 128px;
  margin: 0 24px;
  background: linear-gradient(135deg, #1C1C1C 0%, #080808 100%);
  border: 1px solid rgba(239,72,35,0.14);
  border-radius: 6px;
  position: relative;
  display: grid; place-items: center;
  color: rgba(239,72,35,0.32);
  font-family: 'Boldonse', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gv-frame.is-active {
  border-color: rgba(239,72,35,0.65);
  background: linear-gradient(135deg, rgba(239,72,35,0.16) 0%, #0A0A0A 100%);
  color: rgba(255,255,255,0.9);
  box-shadow: 0 0 24px rgba(239,72,35,0.3), inset 0 0 12px rgba(239,72,35,0.07);
}

/* Ghost strip frames — simple colored blocks, no numbers */
.gv-frame-ghost {
  flex-shrink: 0;
  background: linear-gradient(135deg, #161616 0%, #060606 100%);
  border: 1px solid rgba(239,72,35,0.07);
  border-radius: 4px;
}
.gv-fs-a .gv-frame-ghost { height: 86px; margin: 0 12px; }
.gv-fs-b .gv-frame-ghost { height: 68px; margin: 0 8px; }

/* Fine scanline overlay across the whole stage */
.gv-scan-lines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 3px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 10;
}

/* ── Play emblem — projector glow ─────────────────────────────────── */
.gv-play-emblem {
  position: absolute;
  left: 220px; top: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  z-index: 6;
}

/* Expanding pulse rings — staggered via --ri */
.gv-play-ring {
  position: absolute;
  left: 50%; top: 50%;
  width:  calc(160px + var(--ri, 0) * 80px);
  height: calc(160px + var(--ri, 0) * 80px);
  border-radius: 50%;
  border: 1px solid rgba(239,72,35, 0.38);
  animation: gv-ring-pulse 3.6s calc(var(--ri, 0) * 1.2s) ease-out infinite;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
}
@keyframes gv-ring-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.7);  opacity: 0.65; }
  100% { transform: translate(-50%,-50%) scale(1.85); opacity: 0; }
}

/* Slow-orbit arc with glowing dot */
.gv-play-orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(239,72,35,0.2);
  animation: gv-orbit-spin 22s linear infinite;
}
.gv-play-orbit::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  background: var(--orange);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 14px 4px rgba(239,72,35,0.75);
}
@keyframes gv-orbit-spin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Inner core circle with play icon */
.gv-play-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 156px; height: 156px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(239,72,35,0.24) 0%,
    rgba(239,72,35,0.06) 62%,
    transparent 100%);
  border: 1.5px solid rgba(239,72,35,0.5);
  display: grid; place-items: center;
  box-shadow:
    0 0 50px rgba(239,72,35,0.26),
    0 0 110px rgba(239,72,35,0.09),
    inset 0 0 26px rgba(239,72,35,0.07);
}
.gv-play-core svg {
  width: 60px; height: 60px;
  color: var(--orange);
  filter: drop-shadow(0 0 16px rgba(239,72,35,0.8));
  transform: translateX(6px);
}

/* Now Playing bar */
.gv-np-bar {
  position: absolute;
  bottom: 50px; left: 22px;
  display: flex; align-items: center; gap: 9px;
  font-family: 'Archivo', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  z-index: 8;
}
.gv-rec-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(239,72,35,0.9);
  animation: gv-blink 1.6s ease-in-out infinite;
}
@keyframes gv-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.12; }
}
.gv-np-sep { opacity: 0.22; }
.gv-np-type { color: rgba(255,255,255,0.68); }

/* Reel counter */
.gv-reel-id {
  position: absolute;
  top: 42px; right: 20px;
  font-family: 'Boldonse', sans-serif;
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.16);
  z-index: 8;
}
.gv-reel-id span { color: rgba(239,72,35,0.6); }

/* Cinematic letterbox bars */
.gv-cinebar {
  position: absolute; left: 0; right: 0;
  height: 22px;
  background: rgba(0,0,0,0.8);
  z-index: 30;
  pointer-events: none;
}
.gv-cinebar-t { top: 0; }
.gv-cinebar-b { bottom: 0; }

/* ─── WEBSITES — stacked browser windows with live scroll ────────── */
.gv-web-stage {
  right: 80px; top: 18%;
  width: 460px; height: 380px;
  transform-style: preserve-3d;
  perspective: 1400px;
}
.gv-w-card {
  position: absolute;
  inset: 0;
  background: #11162A;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
.gv-w-card-3 { transform: translate(-56px, 36px) rotate(-7deg); opacity: 0.36; }
.gv-w-card-2 { transform: translate(-28px, 18px) rotate(-3.5deg); opacity: 0.66; background: #141A30; }
.gv-w-card-1 { background: #161D38; }
.gv-w-bar {
  height: 32px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gv-w-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c, rgba(255,255,255,0.3));
}
.gv-w-url {
  margin-left: 12px;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}
.gv-w-scroll {
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  height: calc(100% - 32px);
  /* JS animates translateY for infinite scroll */
}
.gv-w-row {
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}
.gv-w-hero { height: 64px; background: linear-gradient(135deg, var(--orange) 0%, rgba(239,72,35,0.3) 100%); }
.gv-w-body { height: 12px; background: rgba(255,255,255,0.10); width: 86%; }
.gv-w-cta { height: 32px; width: 120px; background: var(--orange); }
.gv-w-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: transparent; }
.gv-w-grid span { height: 56px; background: rgba(255,255,255,0.06); border-radius: 6px; }

/* ─── PAID ADS — stage with grid + bars + KPI ticker ────────────── */
.gv-paid-stage {
  right: 0; bottom: 0; top: 0;
  width: 720px;
  z-index: 1;
}
.gv-paid-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 1px) 0 0 / 60px 60px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 80% 80%, #000 0%, transparent 75%);
}
.gv-paid-stage .gv-paid-bars {
  position: absolute;
  left: 40px; right: 40px; bottom: 0;
  height: 360px;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 0;
}
.gv-paid-stage .gv-paid-bars span {
  flex: 1;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.0) 100%);
  border-radius: 6px 6px 0 0;
  opacity: 0.18;
  transform-origin: bottom;
  transform: scaleY(0.05);
  /* GSAP will animate scaleY to final height */
}
.gv-paid-stage .gv-paid-bars span:nth-child(5),
.gv-paid-stage .gv-paid-bars span:nth-child(8),
.gv-paid-stage .gv-paid-bars span:nth-child(11) {
  opacity: 0.4;
  background: linear-gradient(180deg, #fff, var(--orange));
}
.gv-paid-kpis {
  position: absolute;
  right: 40px; top: 30%;
  display: flex; flex-direction: column; gap: 14px;
  z-index: 2;
}
.gv-kpi {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 14px 18px;
  backdrop-filter: blur(12px);
  min-width: 130px;
}
.gv-kpi-label {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gv-kpi-val {
  font-family: 'Boldonse', sans-serif;
  font-size: 28px;
  color: #fff;
  display: flex; align-items: baseline; gap: 2px;
}
.gv-kpi-val em {
  font-style: normal;
  font-size: 16px;
  color: var(--orange);
}

/* ─── BLOG — magazine card spread with hover stagger ─────────────── */
.gv-blog-stage {
  right: 80px; top: 14%;
  width: 460px; height: 500px;
}
.gv-blog-card {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  width: 280px; min-height: 200px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  justify-content: space-between;
  font-family: 'Archivo', sans-serif;
  opacity: 0;
  transform: translateY(40px);
}
.gv-blog-meta {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange);
}
.gv-blog-h {
  font-family: 'Boldonse', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--black);
  margin: 18px 0;
}
.gv-blog-foot {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black);
}
.gv-blog-foot::after { content: '  →'; color: var(--orange); }
.gv-blog-card-1 { top: 0;    right: 0;   transform: translateY(40px) rotate(4deg); }
.gv-blog-card-2 { top: 160px; left: 0;   transform: translateY(40px) rotate(-3deg); }
.gv-blog-card-3 { top: 310px; right: 30px; transform: translateY(40px) rotate(2deg); }

/* ─── CAREERS — role cloud with connection lines ─────────────────── */
.gv-role-cloud { right: 80px; top: 12%; width: 480px; height: 480px; }
.gv-role-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.gv-role-lines path {
  stroke-dasharray: 4 8;
  animation: gv-role-dash 8s linear infinite;
}
@keyframes gv-role-dash { to { stroke-dashoffset: -100; } }
.gv-role-cloud .gv-role {
  position: absolute;
  font-family: 'Archivo', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 11px 22px;
  backdrop-filter: blur(8px);
  will-change: transform;
  opacity: 0;
}
.gv-role-cloud .gv-role.is-orange {
  background: var(--orange);
  border-color: var(--orange);
  font-size: 15px;
  padding: 13px 26px;
  box-shadow: 0 0 28px rgba(239,72,35,0.55);
}
.gv-role-cloud .gv-role:nth-child(2) { top: 30px;  left: 80px; }
.gv-role-cloud .gv-role:nth-child(3) { top: 80px;  right: 20px; }
.gv-role-cloud .gv-role:nth-child(4) { top: 170px; left: 20px; }
.gv-role-cloud .gv-role:nth-child(5) { top: 220px; right: 50px; }
.gv-role-cloud .gv-role:nth-child(6) { top: 320px; left: 80px; }
.gv-role-cloud .gv-role:nth-child(7) { top: 370px; right: 20px; }

/* ─── Reduce intensity of ambient elements when a service hero has its
       own bold visual (don't compete) ─────────────────────────────── */
.ab-hero[data-svc] .ab-dot { opacity: 0.4; }
.ab-hero[data-svc] .ab-sparkle { opacity: 0.4; }
.ab-hero[data-svc] .ab-streak { display: none; }
.ab-hero[data-svc] .gv-chip { display: none; }
.ab-hero[data-svc="paid-ads"] .ab-dot,
.ab-hero[data-svc="paid-ads"] .ab-sparkle,
.ab-hero[data-svc="paid-ads"] .ab-galaxy { display: none; }
.ab-hero[data-svc="websites"] .ab-dot { opacity: 0.5; }
.ab-hero[data-svc="blog"] .ab-galaxy { display: none; }

/* On blog, since bg is light, text contrast adjustments */
.ab-hero[data-svc="blog"] .ab-glyph { color: var(--black); }
.ab-hero[data-svc="blog"] .ab-eb-star { color: var(--orange); }
.ab-hero[data-svc="blog"] .ab-amb-row { color: transparent; -webkit-text-stroke: 1.5px rgba(0,0,0,0.08); }

/* Branding page — stars invisible on orange bg, make them dark */
.ab-hero[data-svc="branding"] .ab-eb-star { color: #1c1a1d; }
.ab-hero[data-svc="branding"] .ab-eyebrow::before {
  background:
    radial-gradient(circle, #1c1a1d 22%, transparent 24%),
    conic-gradient(from 0deg,
      #1c1a1d 0 12.5%, transparent 12.5% 25%,
      #1c1a1d 25% 37.5%, transparent 37.5% 50%,
      #1c1a1d 50% 62.5%, transparent 62.5% 75%,
      #1c1a1d 75% 87.5%, transparent 87.5% 100%);
  filter: none;
}

/* Branding tile game — enable pointer events + interactivity */
.ab-hero[data-svc="branding"] .gv-color-wall { pointer-events: all; }
.ab-hero[data-svc="branding"] .gv-cw-tile {
  cursor: pointer;
  transition: box-shadow 0.2s ease-out;
}
.gv-cw-tile.brd-selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,255,255,0.3), 0 18px 40px rgba(0,0,0,0.45);
  z-index: 10;
}
.gv-cw-tile.brd-match {
  box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255,255,255,0.6), 0 18px 40px rgba(0,0,0,0.35);
}
/* Hint label — sits below the grid */
.brd-hint {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.brd-hint.brd-hint-hide { opacity: 0; }

@media (max-width: 768px) {
  .gv-color-wall, .gv-film-stage, .gv-web-stage,
  .gv-paid-stage, .gv-blog-stage, .gv-role-cloud { display: none; }
  .gv-cinebar { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   ABOUT PAGE — SIGNAL NETWORK SECTION (marquee edition)
   3 GSAP-powered scrolling tracks + editorial header
═════════════════════════════════════════════════════════════════════ */

/* ─── NETWORK ROLES — litebox-style stacked type ────────────────────── */
/* ─── NETWORK IS OUR SUPERPOWER — two-column layout ─────────────────── */
.ab-net-roles {
  background: #1c1a1d;
  width: 1440px;
  position: relative;
  overflow: hidden;
  padding: 160px 88px;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 80px;
  align-items: start;
}

/* Grain overlay */
.ab-net-roles::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Left column — sticky heading */
.anr-left {
  position: sticky;
  top: 100px;
  z-index: 2;
}

.anr-left h2 {
  font-family: 'Boldonse', sans-serif;
  font-size: 58px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
}

/* Right column */
.anr-right {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Word stack container */
.anr-words {
  position: relative;
}

/* Each row of role words */
.anr-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

/* Individual role word */
.anr-word {
  font-family: 'Boldonse', sans-serif;
  font-size: 38px;
  line-height: 1.582;
  color: rgba(255,255,255,0.22);
  cursor: default;
  transition: color 0.35s cubic-bezier(0.23,1,0.32,1);
  user-select: none;
  white-space: nowrap;
}
.anr-word + .anr-word {
  margin-left: 0.25em;
}
.anr-word:hover {
  color: rgba(255,255,255,0.8);
}

/* Floating astronaut image — JS-injected, fixed so it escapes overflow:hidden */
.anr-hover-img {
  position: fixed;
  width: 160px;
  height: 160px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
  transform: translateX(-50%) translateY(calc(-100% - 8px)) scale(0.88);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23,1,0.32,1),
              transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.anr-hover-img.anr-img-show {
  transform: translateX(-50%) translateY(calc(-100% - 24px)) scale(1);
  opacity: 1;
}

/* Body copy */
.anr-body {
  position: relative;
  z-index: 2;
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.45);
  max-width: 560px;
  margin: 48px auto 0;
  text-align: center;
}

/* Screen-reader only list */
.ab-signal-sronly {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── TEAM SWIPER ────────────────────────────────────────────────────── */

/* ─── TEAM SWIPER — side arrows ──────────────────────────────────────── */
.ab-team-swiper-wrap {
  position: relative;
  padding: 0 44px; /* gives arrows 44px clearance before first/last slide */
}
.ab-team-swiper {
  overflow: hidden;
}
.ab-team-swiper .ab-member {
  width: 100%;
}
/* Arrow buttons — positioned at left and right edges of swiper */
.ab-swiper-prev,
.ab-swiper-next {
  position: absolute;
  top: 38%; /* aligned to photo area, not full card height */
  transform: translateY(-50%);
  z-index: 10;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(13,13,13,0.18);
  background: #0D0D0D;
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.23,1,0.32,1);
  line-height: 1;
  pointer-events: all;
}
.ab-swiper-prev { left: -26px; }
.ab-swiper-next { right: -26px; }
.ab-swiper-prev:hover,
.ab-swiper-next:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-50%) scale(1.1);
}
.ab-swiper-prev:active,
.ab-swiper-next:active {
  transform: translateY(-50%) scale(0.95);
}

/* ─── FOOTER FIX ─────────────────────────────────────────────────────── */
footer { overflow: visible !important; }

/* ─── FOOTER TEXT LINE HEIGHT ────────────────────────────────────────── */
.footer-col ul li a   { line-height: 1.6 !important; }
.footer-col h4        { line-height: 1.6 !important; }
.footer-bottom        { line-height: 1.65 !important; }
.footer-cta-desc      { line-height: 1.7 !important; }

/* ═════════════════════════════════════════════════════════════════════
   SUPPLEMENTARY MOBILE — max-width: 1023px
   These rules close the 769px–1023px gap left by late-added sections
   that only shipped with @media (max-width: 768px) guards.
   Because this block is the LAST in the file it wins the cascade.
═════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* ── Force new sections into 100% width (supplements the global list) ── */
  .ab-net-roles { width: 100% !important; }

  /* ── Footer — new wordmark lockup (overwrites the absolute layout) ── */
  footer {
    min-height: 0 !important;
    padding: 56px 22px 32px !important;
  }
  .footer-art {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 36px;
  }
  .footer-wm-g { font-size: clamp(100px, 26vw, 180px) !important; }
  .footer-wm-v {
    font-size: clamp(20px, 5vw, 32px) !important;
    bottom: clamp(8px, 2vw, 18px) !important;
    right: 4px !important;
  }
  .footer-cols {
    position: static !important;
    flex-wrap: wrap;
    gap: 36px 48px;
    margin-bottom: 40px;
    top: auto !important; right: auto !important;
  }
  .footer-cta {
    position: static !important;
    padding: 36px 0 0 !important;
    top: auto !important;
  }
  .footer-cta-h { font-size: clamp(24px, 7vw, 38px) !important; }
  .footer-cta-inner { flex-direction: column; gap: 20px; }
  .footer-cta-right { width: 100% !important; }
  .footer-bottom {
    position: static !important;
    top: auto !important;
    padding: 20px 0 0 !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ── Network Roles section — mobile ── */
  .ab-net-roles { padding: 80px 22px 64px !important; grid-template-columns: 1fr !important; gap: 40px !important; }
  .anr-left h2 { font-size: clamp(32px, 8vw, 48px) !important; position: static !important; }
  .anr-word { font-size: clamp(26px, 6.5vw, 40px) !important; }
  .anr-body { font-size: 15px !important; margin-top: 36px !important; max-width: 100% !important; }

  /* ── Service hero visual stages — hide on tablet (too cramped) ── */
  .gv-color-wall, .gv-film-stage, .gv-web-stage,
  .gv-paid-stage, .gv-blog-stage, .gv-role-cloud { display: none; }

  /* ── Accessibility page — apply single-column layout ── */
  .a11y-hero, .a11y-controls, .a11y-commit, .a11y-contact {
    width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .a11y-hero { padding-top: 130px !important; padding-bottom: 70px !important; }
  .a11y-h1 { font-size: clamp(42px, 12vw, 64px) !important; }
  .a11y-h2 { font-size: clamp(34px, 9vw, 48px) !important; }
  .a11y-grid { grid-template-columns: 1fr !important; }
  .a11y-commit {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 70px 22px !important;
  }
  .a11y-contact-inner { grid-template-columns: 1fr !important; gap: 30px !important; }

  /* ── Service page hero backgrounds ── */
  .ab-hero[data-svc="video"],
  .ab-hero[data-svc="websites"],
  .ab-hero[data-svc="careers"] { background: #050505; }
  .ab-hero[data-svc="blog"]    { background: #F2EEE3; }
  .ab-hero[data-svc="blog"] .ab-h1,
  .ab-hero[data-svc="blog"] .ab-sub { color: var(--black); }

  /* ── Flower section — dark theme colors for mobile step list ── */
  .sv-proc-flower-section::after { display: none; }
  .sv-proc-mobile-item { border-top-color: rgba(255,255,255,0.10) !important; }
  .sv-proc-mobile-num { border-color: var(--orange) !important; color: #fff !important; }
  .sv-proc-mobile-title { color: #fff !important; }
  .sv-proc-mobile-desc { color: rgba(255,255,255,0.6) !important; }

  /* ── WYG section mobile adjustments ── */
  .sv-wyg-heading { font-size: clamp(40px, 12vw, 64px) !important; letter-spacing: -0.01em; }
  .sv-wyg-item { padding-left: 36px; }
  .sv-wyg-name { font-size: clamp(28px, 8vw, 40px) !important; }

  /* ── Blog body + Careers roles + Flower header ──
     All have unconditional large side paddings that override the
     main mobile block's 22px values. ── */
  .bl-body  { padding: 64px 22px 80px !important; }
  .cr-roles { padding: 64px 22px 80px !important; }
  .sv-proc-flower-header { padding: 0 0 40px !important; flex-direction: column !important; gap: 16px !important; }

  /* ── Careers intro block — unconditional row layout overrides mobile column ── */
  .cr-intro-block {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 32px !important;
  }
  .cr-intro-text p { font-size: 15px !important; }

  /* ── Service / blog / careers hero (gv-hero-svc) ──────────────────
     Round-4 rebuild added unconditional 760px height + 900px inner
     width — both have higher specificity than the generic .ab-hero
     mobile rules and overflow at phone/tablet widths. Fix them here. */
  .ab-hero.gv-hero-svc {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 60px !important;
  }
  .ab-hero.gv-hero-svc .ab-hero-inner {
    width: 100% !important;
    left: 0 !important;
    padding: 96px 24px 0 !important;
  }
  /* Scale heading down; keep each design-line intact (glyphs are inline-block,
     so 'normal' would break mid-word between letters) */
  .ab-hero.gv-hero-svc .ab-h1 {
    font-size: clamp(22px, 7.2vw, 50px) !important;
    line-height: 1.3 !important;
  }
  .ab-hero.gv-hero-svc .ab-glyph-line { white-space: nowrap !important; }
  .ab-hero.gv-hero-svc .ab-sub {
    max-width: 100% !important;
    font-size: 16px !important;
  }
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────────────── */
/* Fine-pointer devices only (mouse/trackpad). Touch screens keep default. */
@media (pointer: fine) {
  /* Position-only wrapper — JS sets transform: translate(x,y) via spring  */
  .gv-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
  }

  /* The visible circle — centered on position via individual translate,   */
  /* scaled in/out independently. No conflict with JS transform on parent. */
  .gv-cursor-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f0c133;
    border-radius: 50%;
    translate: -50% -50%;
    scale: 0;
    transition:
      scale  350ms cubic-bezier(.76, 0, .24, 1),
      width  350ms cubic-bezier(.76, 0, .24, 1),
      height 350ms cubic-bezier(.76, 0, .24, 1);
  }

  /* Show: circle springs in with overshoot */
  .gv-cursor.gv-show .gv-cursor-dot {
    scale: 1;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }

  /* None: circle scales out (form inputs / mouse leave window) */
  .gv-cursor.gv-none .gv-cursor-dot {
    scale: 0;
    transition-timing-function: cubic-bezier(.76, 0, .24, 1);
  }

  /* Hover over interactive elements: circle grows */
  .gv-cursor.gv-hov .gv-cursor-dot {
    width: 44px;
    height: 44px;
  }
}

/* ── FLOATING "LET'S TALK" BUBBLE ───────────────────────────────────────
   Eyekiller-style quarter-circle — GV Green anchored to bottom-right.
   Injected by main.js (outside #scaler) on every page except contact.html.
─────────────────────────────────────────────────────────────────────── */
@keyframes gv-bubble-in {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.2); }
  70%  { transform: scale(0.9); }
  90%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes gv-bubble-out {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(0); }
}

/* Container — mostly off-screen, only top-left quadrant visible */
.gv-cta-bubble {
  position: fixed;
  bottom: -95px; right: -95px;
  width: 200px; height: 182px;
  transform: scale(0);
  will-change: transform;
  z-index: 9999;
  pointer-events: none;
  display: block;
}
.gv-cta-bubble.is-visible {
  animation: gv-bubble-in 0.5s ease-in-out forwards;
  pointer-events: auto;
}
.gv-cta-bubble.is-hidden {
  animation: gv-bubble-out 0.5s ease-in-out forwards;
  pointer-events: none;
}

/* The green circle */
.gv-cta-bubble > a {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--gv-green);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px 42px;
  text-decoration: none;
}

/* Speech-bubble smiley icon */
.gv-cta-icon {
  position: absolute;
  left: -5px; top: 26px;
  width: 40px; height: 40px;
  transform: translateZ(0);
  transform-origin: right bottom;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.3s ease-out;
}
@media (min-width: 768px) {
  .gv-cta-bubble > a:hover .gv-cta-icon { transform: rotate(10deg); }
}

/* Text lines — overflow:hidden + slide-up reveal */
/* font-size and height are set in px (not rem) to match eyekiller exactly */
.gv-bubble-text {
  color: var(--gv-black);
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-variation-settings: 'wght' 800, 'wdth' 80;
  letter-spacing: -0.01em;
  font-size: 22px;
  line-height: 1;
  height: 22px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}
.gv-bubble-text span {
  display: block;
  opacity: 0;
  position: relative;
  transform: translateY(100%);
  white-space: nowrap;
}
.gv-bubble-text.text-line1 span {
  transition: transform 0.4s ease-in 0.3s, opacity 0.4s ease-out 0.3s;
}
.gv-bubble-text.text-line2 span {
  transition: transform 0.4s ease-in 0.5s, opacity 0.4s ease-out 0.5s;
}
.gv-cta-bubble.is-visible .gv-bubble-text span {
  opacity: 1;
  transform: translateY(0);
}
.gv-cta-bubble.is-hidden .gv-bubble-text span {
  opacity: 0;
  transform: translateY(100%);
}

/* Entrance dot */
.gv-bubble-dot {
  position: fixed;
  bottom: -10px; right: -10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gv-green);
  transform: translate(50%, 50%);
  z-index: 9998;
  pointer-events: none;
}

/* Responsive — pixel-accurate match to eyekiller */
@media (min-width: 768px) {
  .gv-cta-bubble { bottom: -111px; right: -155px; width: 270px; height: 222px; }
  .gv-cta-bubble > a { padding: 40px 45px; }
  .gv-cta-icon { width: 45px; height: 45px; left: -10px; top: 30px; }
  .gv-bubble-text { font-size: 30px; height: 30px; }
}
@media (min-width: 1024px) {
  .m-hero-pills { display: none; }
  .gv-cta-bubble { bottom: -118px; right: -158px; width: 287px; height: 236px; }
  .gv-cta-bubble > a { padding: 41px 50px; }
  .gv-cta-icon { width: 50px; height: 50px; left: -10px; top: 33px; }
  .gv-bubble-text { font-size: 33px; height: 33px; }
}
@media (min-width: 1440px) {
  .gv-cta-bubble { bottom: -125px; right: -162px; width: 305px; height: 251px; }
  .gv-cta-bubble > a { padding: 42px 55px; }
  .gv-cta-icon { width: 55px; height: 55px; left: -10px; top: 36px; }
  .gv-bubble-text { font-size: 37px; height: 37px; }
}

/* ── ACCESSIBILITY STATEMENT SECTION ────────────────────────────────
   Editorial statement block on accessibility.html.
   White background, narrow column, bold uppercase headings.
─────────────────────────────────────────────────────────────────────── */
.a11y-stmt {
  background: #fff;
  padding: 100px 0 120px;
}
.a11y-stmt-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 80px;
}
.a11y-stmt-title {
  font-family: 'Boldonse', sans-serif;
  font-size: 64px;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  margin: 0 0 20px;
}
.a11y-stmt-date {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  color: rgba(13,13,13,0.5);
  text-align: center;
  margin-bottom: 56px;
}
.a11y-stmt-rule {
  border: 0;
  border-top: 1px solid rgba(13,13,13,0.14);
  margin: 0 0 56px;
}
.a11y-stmt-section {
  margin-bottom: 56px;
}
.a11y-stmt-h {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
  margin: 0 0 20px;
}
.a11y-stmt-body {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(13,13,13,0.75);
  max-width: 640px;
}
.a11y-stmt-body p { margin: 0 0 18px; }
.a11y-stmt-body p:last-child { margin-bottom: 0; }
.a11y-stmt-body ul {
  margin: 0 0 18px 0;
  padding-left: 22px;
}
.a11y-stmt-body li {
  margin-bottom: 8px;
}
.a11y-stmt-body a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a11y-stmt-body a:hover { color: var(--orange); }
.a11y-stmt-body strong { color: var(--black); }
.a11y-stmt-badge {
  display: inline-block;
  background: var(--offwhite);
  border: 1.5px solid rgba(13,13,13,0.1);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 20px;
}

@media (max-width: 1023px) {
  .a11y-stmt { padding: 64px 0 80px; }
  .a11y-stmt-inner { padding: 0 24px; }
  .a11y-stmt-title { font-size: 36px; }
}

/* ─────────────────────────────────────────────────────────────────────
   ACCESSIBILITY PANEL OVERLAY
   Full-screen takeover triggered by .nav-a11y icon — same pattern as
   eyekiller.com. Injected into <body> by main.js on every page.
───────────────────────────────────────────────────────────────────── */
.gv-a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--orange);
  color: var(--black);
  overflow-y: auto;
  /* Closed state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.99);
  transition:
    opacity 300ms cubic-bezier(0.23,1,0.32,1),
    transform 300ms cubic-bezier(0.23,1,0.32,1),
    visibility 300ms;
  pointer-events: none;
}
.gv-a11y-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Close button — top-right corner */
.gv-a11y-close {
  position: fixed;
  top: 40px;
  right: 52px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--black);
  transition: background 180ms, transform 180ms var(--ease-out);
  z-index: 1;
}
.gv-a11y-close:hover { background: rgba(0,0,0,0.24); transform: scale(1.07); }
.gv-a11y-close:active { transform: scale(0.95); }

/* Inner layout */
.gv-a11y-panel-inner {
  max-width: 600px;
  padding: 120px 88px 100px;
}

/* Heading */
.gv-a11y-panel-h {
  font-family: 'Boldonse', sans-serif;
  font-size: 80px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 30px;
}

/* Sub-text */
.gv-a11y-panel-sub {
  font-family: 'Archivo', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(13,13,13,0.72);
  max-width: 480px;
  margin-bottom: 48px;
}

/* Toggle rows */
.gv-a11y-panel-controls {
  display: flex;
  flex-direction: column;
  margin-bottom: 44px;
  border-top: 1.5px solid rgba(0,0,0,0.16);
}
.gv-a11y-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1.5px solid rgba(0,0,0,0.16);
}
.gv-a11y-panel-row-label {
  font-family: 'Archivo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.01em;
}
.gv-a11y-panel-row-desc {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  color: rgba(13,13,13,0.58);
  margin-top: 3px;
}

/* Override toggle track colors for orange BG context */
.gv-a11y-panel .a11y-toggle-track    { background: rgba(0,0,0,0.22); }
.gv-a11y-panel .a11y-toggle.on .a11y-toggle-track { background: var(--black); }
.gv-a11y-panel .a11y-toggle-knob     { background: #fff; }
.gv-a11y-panel .a11y-toggle          { color: var(--black); }

/* Reset link */
.gv-a11y-panel-reset {
  background: none;
  border: 0;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13,13,13,0.58);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 52px;
  transition: color 160ms;
}
.gv-a11y-panel-reset:hover { color: var(--black); }

/* Bottom links */
.gv-a11y-panel-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.gv-a11y-panel-links a {
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 160ms;
}
.gv-a11y-panel-links a:hover { opacity: 0.55; }

/* Mobile */
@media (max-width: 768px) {
  .gv-a11y-panel-inner { padding: 110px 24px 80px; }
  .gv-a11y-panel-h { font-size: 48px; }
  .gv-a11y-close { top: 24px; right: 24px; }
}