/* ============================================================
   THE LAST RULE — stylesheet
   Palette: #080808 · #111111 · #1A1A1A · #F4F1EB · #8A8A8A · #FF2E93 · amber #F2B84B
   Type: Anton (display) · Space Grotesk (body) · Space Mono (labels)
         Caveat (annotations, sparingly)
   ============================================================ */

:root {
  /* ---- absolutes: text/panels that sit on an accent fill, never re-themed ---- */
  --ink-abs: #111111;   /* dark ink for text on pink / amber / bone fills */
  --bone-abs: #f8f6f2;  /* warm white panel revealed under pink buttons */

  /* ---- dark surface (default, cinematic) ---- */
  --ink: #101010;       /* matte black canvas */
  --ink-2: #161616;
  --ink-3: #1e1e1e;
  --bone: #f8f6f2;      /* warm white */
  --grey: #8f8880;
  --amber: #f2b84b;
  --bone-dim: rgba(248, 246, 242, 0.64);
  --bone-faint: rgba(248, 246, 242, 0.4);
  --pink: #ff4f9a;      /* hot pink — used sparingly */
  --pink-deep: #ff2e86;
  --pink-soft: rgba(255, 79, 154, 0.14);
  --line: rgba(248, 246, 242, 0.13);
  --line-strong: rgba(248, 246, 242, 0.3);
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Consolas", monospace;
  --font-note: "Caveat", cursive;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 4.25rem;
  /* editorial rhythm — generous, magazine-like vertical space */
  --section-y: clamp(5rem, 10vw, 9.5rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.8s ease;
}
body[data-division="web"]    { background: #06080c; }
body[data-division="growth"] { background: #09060b; }
body[data-division="social"] { background: #0b0606; }

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--pink); color: var(--ink-abs); }

/* ============================================================
   SURFACE SYSTEM — editorial section rhythm
   Each surface re-scopes the core tokens, so every component
   (cards, rules, text, buttons, forms) re-themes automatically.
   Sections alternate dark → warm white → beige → stone down the
   page so scrolling always feels fresh, like turning magazine pages.
   ============================================================ */
.surface-dark {
  --ink: #101010; --ink-2: #161616; --ink-3: #1e1e1e;
  --bone: #f8f6f2; --grey: #8f8880;
  --bone-dim: rgba(248, 246, 242, 0.64); --bone-faint: rgba(248, 246, 242, 0.4);
  --line: rgba(248, 246, 242, 0.13); --line-strong: rgba(248, 246, 242, 0.3);
}
.surface-light {
  --ink: #f8f6f2; --ink-2: #f1ede4; --ink-3: #eae3d8;
  --bone: #141210; --grey: #6d665d;
  --bone-dim: rgba(20, 18, 16, 0.72); --bone-faint: rgba(20, 18, 16, 0.52);
  --line: rgba(20, 18, 16, 0.14); --line-strong: rgba(20, 18, 16, 0.27);
}
.surface-beige {
  --ink: #efe7dc; --ink-2: #e9e0d3; --ink-3: #e2d8c9;
  --bone: #181310; --grey: #6f665b;
  --bone-dim: rgba(24, 19, 16, 0.74); --bone-faint: rgba(24, 19, 16, 0.54);
  --line: rgba(24, 19, 16, 0.15); --line-strong: rgba(24, 19, 16, 0.28);
}
.surface-stone {
  --ink: #e6ddd1; --ink-2: #ded4c6; --ink-3: #d6ccbc;
  --bone: #181310; --grey: #6b6257;
  --bone-dim: rgba(24, 19, 16, 0.74); --bone-faint: rgba(24, 19, 16, 0.54);
  --line: rgba(24, 19, 16, 0.15); --line-strong: rgba(24, 19, 16, 0.28);
}
/* paint the surface from its own re-scoped tokens */
.surface-dark, .surface-light, .surface-beige, .surface-stone {
  background-color: var(--ink);
  color: var(--bone);
  position: relative;
}
/* two adjacent warm surfaces get a hairline seam so they don't blur together */
:is(.surface-light, .surface-beige, .surface-stone) + :is(.surface-light, .surface-beige, .surface-stone) {
  border-top: 1px solid var(--line);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* skip link */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 4000;
  background: var(--pink);
  color: var(--ink-abs);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.9rem 1.3rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- type utilities ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--pink);
}
/* editorial kicker — a short rule leads every eyebrow like a magazine dek */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.75rem;
  transform: translateY(-0.12em);
  opacity: 0.75;
}

.lede {
  color: var(--bone-dim);
  max-width: 34em;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.note {
  font-family: var(--font-note);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: var(--grey);
  transform: rotate(-1.5deg);
  display: inline-block;
}

.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: 100rem;
  margin: 0 auto;
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* big display headings rise further and slower for a cinematic, editorial feel
   (no clip-path on the observed element — it breaks IntersectionObserver) */
.display.reveal {
  transform: translateY(3.2rem);
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.display.reveal.in { transform: none; }
/* cinematic image reveal — project visuals unmask left-to-right (clip is on the
   child, not the observed .project-card, so the observer still fires reliably) */
.project-card .project-visual { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.project-card.in .project-visual { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .project-card .project-visual { clip-path: none !important; }
}

/* ============================================================
   BROKEN-RULE LINE — the signature system.
   A hairline that fractures: its centre fragment kicks out of
   the structure in hot pink when the section enters view.
   ============================================================ */

.rule-break {
  position: relative;
  height: 1.6rem;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.rule-break::before,
.rule-break::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--line-strong);
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1), width 0.7s ease;
}
.rule-break::before { left: 0; width: 50%; }
.rule-break::after { right: 0; width: 50%; }
.rule-break .frag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(3rem, 8vw, 7rem);
  height: 3px;
  margin-left: calc(clamp(3rem, 8vw, 7rem) / -2);
  background: var(--pink);
  transform: translateY(-1px);
  transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.4, 1) 0.15s;
}
.rule-break.in::before { transform: translateX(calc(clamp(3rem, 8vw, 7rem) / -2)); }
.rule-break.in::after { transform: translateX(calc(clamp(3rem, 8vw, 7rem) / 2)); }
.rule-break.in .frag {
  transform: translateY(-0.65rem) rotate(-8deg);
}

/* ============================================================
   CURSOR DOT (fine pointers only)
   ============================================================ */

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  pointer-events: none;
  z-index: 3000;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, opacity 0.4s ease;
}
@media (pointer: fine) {
  body.cursor-ready .cursor-dot { opacity: 0.85; }
  /* over a link it opens into a hollow pink ring that frames the target */
  .cursor-dot.on-link {
    width: 34px; height: 34px;
    opacity: 1;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pink);
  }
}

/* ============================================================
   PAGE TRANSITION VEIL
   ============================================================ */

.veil {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 2500;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.veil img { width: 3.4rem; opacity: 0.9; }
.veil.on { opacity: 1; pointer-events: auto; }

/* ==========================================
   STREETLIGHT INTRO
   ==========================================
   Fixed overlay, once per session: a real photographic streetlight (far right)
   flickers off→on, then the lit frame + brand hold before the overlay fades to
   the landing page. Two aligned images (streetlight-off/on.jpg) drive the
   flicker; the ON frame doubles as the landing-hero background for continuity.
   -------------------------------------------------------------------------- */

:root {
  --intro-black: #050505;
  --intro-pink: #ff2e93;
  --intro-white: #f4f1eb;
  --intro-light: #f4dde8;         /* pale, faintly-pink streetlight tint */
  --intro-exit-duration: 680ms;
}

.intro-reveal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  opacity: 1;
  background:
    radial-gradient(120% 90% at 100% 0%, #0a0a0b 0%, #060606 48%, #030303 100%);
  transition: opacity var(--intro-exit-duration) ease;
}
/* shown only while armed (or fading out); never blocks the page without JS */
html.intro-armed .intro-reveal,
.intro-reveal.intro-exiting { display: block; }
.intro-reveal.intro-exiting { opacity: 0; pointer-events: none; }

/* lock scrolling for the duration, released the instant the class is removed */
html.intro-armed { overflow: hidden; }

/* safety net: if main.js never runs, the overlay still clears itself */
html.intro-armed .intro-reveal { animation: introBackstop 1ms linear 7s forwards; }
@keyframes introBackstop { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.intro-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- brand reveal: logo-only loader, centred on black --- */
.intro-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  text-align: center;
  padding: 0 var(--gutter);
  max-width: min(90vw, 40rem);
}
/* soft pool of light that catches the brand as the lamp settles on */
.intro-brand::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 150%; height: 280%;
  max-width: 48rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(244, 221, 232, 0.11),
    rgba(244, 221, 232, 0.035) 44%,
    transparent 72%);
}
.intro-logo { width: clamp(3rem, 7vw, 4.6rem); height: auto; opacity: 0; }
.intro-word {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: clamp(0.28em, 1.4vw, 0.5em);
  font-size: clamp(1.05rem, 3.4vw, 2rem);
  color: var(--intro-white);
  text-shadow: 0 0 22px rgba(255, 46, 147, 0.12);
  padding-left: clamp(0.28em, 1.4vw, 0.5em);   /* optical balance for tracking */
  opacity: 0;
}
/* --- skip control (bottom-left) --- */
.intro-skip {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
  background: transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.2rem;
  transition: color 0.25s ease;
}
.intro-skip:hover { color: var(--intro-white); }
.intro-skip:focus-visible { outline: 2px solid var(--intro-pink); outline-offset: 4px; }

/* --- timeline (starts on first paint via .intro-armed) ---
   Logo-only loader: the mark + wordmark fade up on black, hold, then main.js
   fades the overlay to reveal the streetlight hero. */
html.intro-armed .intro-brand::before { animation: slSettle 900ms ease 200ms both; }
html.intro-armed .intro-logo { animation: slBrandIn 640ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms both; }
html.intro-armed .intro-word { animation: slBrandIn 720ms cubic-bezier(0.2, 0.7, 0.2, 1) 340ms both; }

@keyframes slSettle {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slBrandIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* --- reduced motion: brand appears without motion, quick exit --- */
html.intro-reduced .intro-brand::before { animation: none; opacity: 1; }
html.intro-reduced .intro-logo,
html.intro-reduced .intro-word { animation: none; opacity: 1; }

/* --- repeat visit within a session: skip the intro, ease the page in --- */
html.intro-seen body { animation: introSeenFade 260ms ease both; }
@keyframes introSeenFade { from { opacity: 0.35; } to { opacity: 1; } }

/* ==========================================
   CINEMATIC HERO — night street · one streetlight · one ordinary storefront
   ==========================================
   Static art-directed composition (no animation/interaction yet). A layered
   CSS + inline-SVG scene sits on the right; editorial copy sits on the left
   over a left-to-right scrim. Most of the frame is intentionally empty. */

.hero-film {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  padding: calc(var(--nav-h) + clamp(2rem, 7vw, 5rem)) var(--gutter) clamp(3rem, 7vw, 5rem);
}

/* --- the scene (branded photo + scrim; grain is the global body overlay) --- */
.film-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.film-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(8, 8, 8, 0.94) 20%, rgba(8, 8, 8, 0.55) 44%, rgba(8, 8, 8, 0.08) 70%, rgba(8, 8, 8, 0) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0) 34%);
}

/* --- editorial copy (left) --- */
.film-copy { position: relative; z-index: 3; max-width: 40rem; }
.film-title {
  font-family: var(--font-display);   /* Anton — the site's display face */
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bone);
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  max-width: 15ch;
}
.film-cta { margin-top: clamp(1.8rem, 4vw, 2.6rem); }

/* --- mobile: whole frame as a film-still on top, copy below --- */
@media (max-width: 860px) {
  .hero-film {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100svh;
    padding: var(--nav-h) 0 0;
  }
  .film-scene { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .film-scrim {
    background: linear-gradient(0deg, var(--ink) 0%, rgba(8, 8, 8, 0) 46%);
  }
  .film-copy {
    max-width: none;
    padding: clamp(1.8rem, 6vw, 2.6rem) var(--gutter) clamp(3rem, 10vw, 4rem);
  }
  .film-title { max-width: 20ch; font-size: clamp(2rem, 8.5vw, 3.4rem); }
}

/* ==========================================
   STATIC HERO — branded storefront + copy
   ========================================== */

.film-after { position: absolute; inset: 0; z-index: 0; display: block; }
.film-after img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }

.film-brand {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 1.1rem;
}
.film-brand-line { display: block; width: clamp(2.5rem, 6vw, 5rem); height: 2px; background: var(--pink); }
.film-services {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  font-family: var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1vw, 0.84rem);
  color: var(--bone-dim);
}
.film-index {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 4vw, 2.2rem);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

@media (max-width: 860px) {
  .film-after img { object-position: 72% center; }
}

/* ==========================================
   HERO VISUAL — icon panel + residual glow
   ==========================================
   Fills the empty right side of the inner-page heroes (and the homepage intro
   line) with a muted line-icon panel themed to each page, plus a faint pink
   light falloff echoing the streetlight. */

.has-visual { position: relative; overflow: hidden; }
.has-visual > :not(.hero-glow) { position: relative; z-index: 1; }

.hero-glow {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(52%, 40rem);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 50% at 100% 42%,
    rgba(244, 221, 232, 0.05) 0%,
    rgba(255, 46, 147, 0.05) 34%,
    transparent 72%);
}

.hero-visual { margin-top: clamp(2rem, 5vw, 3rem); }

.hero-icons {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hero-icons.cols-2 { grid-template-columns: 1fr 1fr; }
.hero-icons.cols-1 { grid-template-columns: 1fr; }
.hero-icons li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  background: var(--ink);
  transition: background 0.3s ease;
}
.hero-icons li:hover { background: color-mix(in srgb, var(--bone) 3%, transparent); }

.hi-ic { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; color: rgba(244, 241, 235, 0.82); }
.hi-ic svg { width: 100%; height: 100%; display: block; }
.hi-ic .acc { stroke: var(--pink); }
.hi-ic .acc[fill] { fill: var(--pink); stroke: none; }

.hi-lb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 1.35;
}
.hi-lb b { display: block; color: var(--pink); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.22em; }

/* single centred graphic (homepage "one connected system") */
.hero-figure { display: grid; place-items: center; padding: 0.5rem 0; }
.hero-figure svg { width: min(58%, 13rem); height: auto; color: rgba(244, 241, 235, 0.7); }
.hero-figure .acc { stroke: var(--pink); }
.hero-figure .acc[fill] { fill: var(--pink); stroke: none; }

@media (min-width: 901px) {
  .has-visual {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.92fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: stretch;   /* both columns share the heading's height */
  }
  .has-visual .hero-head { grid-column: 1; align-self: center; }
  .has-visual .hero-visual {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: 25rem;
    margin-top: 0;
    display: flex;          /* let the rail stretch to full height */
  }
  /* the icon panel fills the heading's height as a vertical rail */
  .has-visual .hero-icons { flex: 1 1 auto; grid-auto-rows: 1fr; }
  .intro-line.has-visual { max-width: 84rem; }
}
@media (max-width: 900px) {
  .hero-glow { width: 78%; }
  .hero-visual { max-width: 26rem; }
}
@media (max-width: 460px) {
  .hero-icons li { padding: 0.85rem 1rem; gap: 0.8rem; }
  .hi-ic { width: 2rem; height: 2rem; }
}

/* ============================================================
   NAV
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* solidify into charcoal once the hero is scrolled past */
.site-nav.scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ink-2) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* hide on scroll-down, reveal on scroll-up (JS toggles .nav-hidden) */
.site-nav.nav-hidden { transform: translateY(-100%); }

/* thin scroll-progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1200;
  pointer-events: none;
}

.nav-brand { display: flex; align-items: center; gap: 0.8rem; min-height: 44px; }
.nav-brand img { height: 2.1rem; width: auto; }
.nav-brand span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2.1rem);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.25s ease;
  padding: 0.6rem 0;
  display: inline-block;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.3rem;
  height: 1px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--pink); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-abs);
  background: var(--pink);
  padding: 0.7rem 1.2rem;
  transition: background 0.25s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--pink-deep); color: var(--ink-abs); }

.nav-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  min-height: 44px;
  padding: 0.5rem 0.8rem;
}

@media (max-width: 960px) {
  .nav-links, .site-nav .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
}

/* full-screen mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--ink);
  display: none;
  flex-direction: column;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu-close {
  position: fixed;
  top: 0.85rem;
  right: var(--gutter);
  z-index: 1600;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: 0.6rem 1.1rem;
  min-height: 44px;
}
.mobile-menu ul { list-style: none; display: grid; gap: 0.2rem; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 4.5rem);
  text-transform: uppercase;
  line-height: 1.05;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  color: var(--bone);
  transition: color 0.25s ease;
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--pink); }
.mobile-menu a .idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
}
.mobile-menu .menu-foot {
  margin-top: auto;
  padding-top: 3rem;
  display: grid;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.mobile-menu .menu-foot a { font: inherit; color: var(--bone-dim); display: inline; padding: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--line-strong);
  padding: 1rem 1.6rem;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.12s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pink);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: -1;
}
.btn:hover { color: var(--ink-abs); border-color: var(--pink); }
.btn:hover::before { transform: translateX(0); }
.btn .arrow { transition: transform 0.3s ease; }
.btn:hover .arrow { transform: translateX(5px); }

.btn-pink { background: var(--pink); border-color: var(--pink); color: var(--ink-abs); }
.btn-pink::before { background: var(--bone-abs); }

/* press feedback — subtle scale-down on click */
.btn:active { transform: scale(0.965); }
.nav-cta { transition: background 0.25s ease, transform 0.12s ease; }
.nav-cta:active { transform: scale(0.965); }
.rail-btn { transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, opacity 0.25s ease, transform 0.12s ease; }
.rail-btn:active { transform: scale(0.94); }
.whatsapp-chip:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .nav-cta:active, .rail-btn:active, .whatsapp-chip:active { transform: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 3rem;
  position: relative;
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(3.2rem, 10.5vw, 9.5rem);
  max-width: 12ch;
  position: relative;
  z-index: 2;
}
.hero h1 .accent { color: var(--pink); }
.hero-sub {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; position: relative; z-index: 2; }
.hero-crewline {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-faint);
  position: relative;
  z-index: 2;
}
.hero-crewline b { color: var(--pink); font-weight: 400; }

/* ============================================================
   TRUST STRIP
   ============================================================ */

.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
  overflow: hidden;
}
.trust-copy {
  padding: 0 var(--gutter) 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.trust-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee 30s linear infinite;
  padding-left: var(--gutter);
}
.trust:hover .trust-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.trust-track span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4rem;
}
.trust-track span::after { content: "·"; color: var(--pink); }

/* ============================================================
   SECTION SHELL
   ============================================================ */

.section {
  padding: var(--section-y) var(--gutter);
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.section-head h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); margin-top: 0.9rem; }
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; } }

/* ============================================================
   SELECTED WORK
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } }

.project-card {
  display: block;
  border: 1px solid var(--line);
  padding: 1.6rem;
  position: relative;
  transition: border-color 0.3s ease, background 0.3s ease;
  overflow: hidden;
}
.project-card:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--bone) 3%, transparent); }

.project-visual {
  aspect-ratio: 16 / 10;
  background: var(--ink-2);
  border: 1px solid var(--line);
  margin-bottom: 1.4rem;
  overflow: hidden;
  position: relative;
}
.project-visual svg { width: 100%; height: 100%; transition: transform 0.6s ease; }
.project-visual .project-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease;
}
.project-card:hover .project-visual svg,
.project-card:hover .project-visual .project-shot { transform: scale(1.04); }

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.project-meta h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.project-meta .cat {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.project-challenge { color: var(--bone-dim); font-size: 0.95rem; margin-top: 0.7rem; max-width: 42em; }
.project-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin-top: 0.9rem;
}
.project-service-tag {
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.project-outcome {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: 0.92rem;
  color: var(--bone-dim);
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.project-outcome::before {
  content: "→";
  color: var(--pink);
  font-family: var(--font-mono);
}
.project-cta {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
}
/* broken-rule detail on hover */
.project-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 30%;
  background: var(--pink);
  transform: translateX(-110%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.project-card:hover::after { transform: translateX(40%) rotate(-1.2deg); }

/* ============================================================
   TRANSFORMATION STATEMENT
   ============================================================ */

.transform-list { list-style: none; display: grid; gap: 0.4rem; margin-top: 1rem; }
.transform-list li {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.5vw, 4.6rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--bone-faint);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease, color 0.7s ease;
  transition-delay: var(--d, 0s);
}
.transform-list.in li { opacity: 1; transform: none; color: var(--bone); }
.transform-list li b {
  font-weight: 400;
  color: var(--pink);
  position: relative;
}

/* ============================================================
   SERVICES TAKEOVER (division system)
   ============================================================ */

.wwd-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .wwd-shell { grid-template-columns: 1fr; } }

.wwd-index {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 900px) {
  .wwd-index { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
}
.wwd-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.6rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--bone-faint);
  transition: color 0.3s ease, background 0.3s ease;
  min-height: 44px;
}
.wwd-tab:last-of-type { border-bottom: 0; }
@media (max-width: 900px) {
  .wwd-tab { border-bottom: 0; border-right: 1px solid var(--line); padding: 1.1rem 1.2rem; min-width: 9rem; }
}
.wwd-tab .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.3em; }
.wwd-tab .name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  text-transform: uppercase;
  line-height: 1;
}
.wwd-tab[aria-selected="true"] { color: var(--bone); background: color-mix(in srgb, var(--bone) 4%, transparent); }
.wwd-tab[aria-selected="true"] .num { color: var(--pink); }
.wwd-tab:hover { color: var(--bone); }

.wwd-rail {
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 25%;
  background: var(--pink);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
@media (max-width: 900px) { .wwd-rail { width: 25%; height: 3px; bottom: 0; top: auto; } }

.wwd-stage { position: relative; overflow: hidden; }
.wwd-panel {
  display: none;
  padding: clamp(2rem, 4vw, 4rem);
  position: relative;
  min-height: 100%;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 1.6rem 3rem;
}
.wwd-panel.active { display: grid; }
@media (max-width: 1100px) { .wwd-panel { grid-template-columns: 1fr; grid-template-rows: none; } }

.wwd-panel .watermark {
  position: absolute;
  top: -0.05em;
  right: -0.06em;
  font-family: var(--font-display);
  font-size: clamp(11rem, 26vw, 24rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
  user-select: none;
}
.wwd-panel h3 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); position: relative; z-index: 2; grid-column: 1; }
.wwd-panel.active h3 { animation: panelIn 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.wwd-outcome { grid-column: 1; color: var(--bone-dim); max-width: 40em; position: relative; z-index: 2; }

.wwd-figure { grid-column: 2; grid-row: 1 / span 3; align-self: center; z-index: 1; }
.wwd-figure svg { width: 100%; height: auto; max-height: 22rem; }
@media (max-width: 1100px) { .wwd-figure { grid-column: 1; grid-row: auto; max-width: 28rem; } }

.wwd-services { grid-column: 1; list-style: none; align-self: start; z-index: 2; }
.wwd-services li { border-top: 1px solid var(--line); }
.wwd-services li:last-child { border-bottom: 1px solid var(--line); }
.svc-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.95rem 0.2rem;
  text-align: left;
  transition: padding-left 0.3s ease;
  min-height: 44px;
}
.svc-row .idx { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--bone-faint); }
.svc-row .label {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.svc-row .plus { margin-left: auto; font-family: var(--font-mono); color: var(--bone-faint); transition: transform 0.3s ease, color 0.3s ease; }
.svc-row:hover .label, .svc-row[aria-expanded="true"] .label { color: var(--pink); }
.svc-row[aria-expanded="true"] .plus { transform: rotate(45deg); color: var(--pink); }
.svc-row:hover { padding-left: 0.6rem; }

.svc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.svc-body > div { overflow: hidden; }
.svc-body p { color: var(--bone-dim); font-size: 0.98rem; max-width: 46em; padding: 0 0.2rem 1.2rem; }
.svc-body.open { grid-template-rows: 1fr; }

.wwd-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  z-index: 2;
}
.wwd-related {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.wwd-related a { color: var(--bone); border-bottom: 1px solid var(--pink); padding-bottom: 2px; }
.wwd-related a:hover { color: var(--pink); }

.wwd-hint {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding: 0.8rem var(--gutter);
}
@media (max-width: 900px) and (pointer: coarse) { .wwd-hint { display: block; } }

/* division figures */
.fig-brand .frag, .fig-social .tile { transform-box: fill-box; transform-origin: center; }
.fig-brand .frag {
  transition: transform 0.9s cubic-bezier(0.3, 0.9, 0.2, 1), opacity 0.9s ease;
  transition-delay: var(--d, 0s);
}
.fig-brand:not(.play) .frag { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)); }
.fig-brand.play .frag { opacity: 1; transform: none; }

.fig-web .rule { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.1s ease; }
.fig-web.play .rule { stroke-dashoffset: 0; }
.fig-web .block { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--d, 0.5s); }
.fig-web.play .block { opacity: 1; transform: none; }

.fig-growth .node { fill: var(--bone-faint); }
.fig-growth .edge { stroke: var(--line); }
.fig-growth .stage-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; fill: var(--bone-faint); text-transform: uppercase; }
.fig-growth .signal-path { stroke: var(--pink); stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.2s ease; }
.fig-growth.play .signal-path { stroke-dashoffset: 0; }
.fig-growth .hot { transition: fill 0.4s ease; transition-delay: var(--d, 0s); }
.fig-growth.play .hot { fill: var(--pink); }

.fig-social .tile { transition: transform 0.9s cubic-bezier(0.3, 0.9, 0.2, 1); transition-delay: var(--d, 0s); }
.fig-social:not(.play) .tile { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)); }
.fig-social.play .tile { transform: none; }
.fig-social .thread { stroke: var(--pink); stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 1.4s ease 0.7s; }
.fig-social.play .thread { stroke-dashoffset: 0; }

/* ============================================================
   AUDIENCE
   ============================================================ */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.audience-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.8rem 1.5rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  transition: background 0.3s ease;
}
.audience-cell:hover { background: color-mix(in srgb, var(--bone) 3%, transparent); }
.audience-cell .idx { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em; color: var(--pink); }
.audience-cell h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; }
.audience-cell p { color: var(--bone-dim); font-size: 0.92rem; }

/* ============================================================
   BRAND STORY
   ============================================================ */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem 5rem;
  align-items: center;
}
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.story-copy { display: grid; gap: 1.2rem; color: var(--bone-dim); max-width: 40em; }
.story-copy strong { color: var(--bone); font-weight: 500; }
.story-fig svg { width: 100%; height: auto; }
.story-fig .strand { stroke: var(--line-strong); stroke-dasharray: 620; stroke-dashoffset: 620; transition: stroke-dashoffset 1.6s ease; transition-delay: var(--d, 0s); }
.story-fig.in .strand { stroke-dashoffset: 0; }
.story-fig .mark-frag { opacity: 0; transition: opacity 0.6s ease 1.4s; }
.story-fig.in .mark-frag { opacity: 1; }

/* ============================================================
   PROCESS
   ============================================================ */

.process-list { list-style: none; position: relative; max-width: 56rem; }
.process-list::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line-strong);
}
.process-step {
  position: relative;
  padding: 0 0 2.4rem 3.4rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.process-step.in { opacity: 1; transform: none; }
.process-step:last-child { padding-bottom: 0.5rem; }
.process-step::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.55rem;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--ink);
  border: 2px solid var(--line-strong);
  transform: rotate(45deg);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.process-step.in::before { border-color: var(--pink); background: var(--pink); }
.process-step .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--pink); }
.process-step h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; margin: 0.2rem 0 0.4rem; }
.process-step p { color: var(--bone-dim); max-width: 38em; }
.process-note {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 2.1;
  max-width: 46em;
}
.process-note b { color: var(--pink); font-weight: 400; }

/* ============================================================
   TESTIMONIALS + METRICS
   ============================================================ */

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; }
.testimonial-card { border: 1px solid var(--line); padding: 1.8rem; display: grid; gap: 1rem; align-content: start; }
.testimonial-card blockquote { font-size: 1.05rem; color: var(--bone); }
.testimonial-card cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  line-height: 2;
}
.testimonial-empty {
  border: 1px dashed var(--line-strong);
  padding: 2.2rem;
  display: grid;
  gap: 0.7rem;
  max-width: 40rem;
}
.testimonial-empty p { color: var(--bone-dim); }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.metric-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.8rem 1.5rem;
}
.metric-cell .value { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; color: var(--bone); }
.metric-cell .value b { color: var(--pink); font-weight: 400; }
.metric-cell .label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-faint); margin-top: 0.6rem; }

/* ============================================================
   CONTACT / FORM
   ============================================================ */

.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--bone);
  font: inherit;
  padding: 0.75rem 0.1rem;
  border-radius: 0;
  transition: border-color 0.25s ease;
  min-height: 44px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--pink); }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field option { background: var(--ink-2); color: var(--bone); }
.field .error-msg { color: var(--pink); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; display: none; }
.field.invalid input, .field.invalid textarea { border-bottom-color: var(--pink); }
.field.invalid .error-msg { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

.form-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 1.4em;
  line-height: 1.9;
}
.form-status.ok { color: #3ddc84; }
.form-status.err { color: var(--pink); }
.form-status.busy { color: var(--bone-dim); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  padding: calc(var(--nav-h) + clamp(4rem, 9vw, 7rem)) var(--gutter) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(3rem, 8.5vw, 8rem); max-width: 14ch; margin-top: 1rem; }
.page-hero .lede { margin-top: 1.8rem; }

/* ============================================================
   WORK LISTING
   ============================================================ */

.work-list-page { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 7vw, 6rem); display: grid; gap: 2.5rem; }

/* Editorial coda after the case-study grid — plain text, no cards/images,
   a thin rule ties it to the grid above so it reads as a continuation of
   the same section rather than a new block. Uses the existing .eyebrow
   label pattern and the site's body/mono type scale only. */
.work-more {
  max-width: 40em;
  padding-top: clamp(1.6rem, 3.6vw, 2.4rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.9rem;
}
.work-more-statement {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  line-height: 1.4;
  color: var(--bone);
  max-width: 32ch;
}
.work-more-statement strong { font-weight: 500; color: var(--pink); }
.work-more-industries {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: var(--bone-faint);
  max-width: 46em;
}

/* ============================================================
   SERVICES PAGE — chapters
   ============================================================ */

.chapter {
  border-bottom: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  position: relative;
  overflow: hidden;
}
.chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.chapter-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--pink);
  opacity: 0.85;
}
.chapter-title h2 { font-size: clamp(2.2rem, 5.5vw, 4.6rem); }
.chapter-title .eyebrow { display: block; margin-bottom: 0.6rem; }
.chapter-title .lede { margin-top: 1.2rem; }
.chapter-outcome {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  line-height: 2;
  max-width: 46em;
}
@media (max-width: 700px) { .chapter-head { grid-template-columns: 1fr; } }

.svc-detail { border-top: 1px solid var(--line); }
.svc-detail:last-of-type { border-bottom: 1px solid var(--line); }
.svc-detail-toggle {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.5rem 0.2rem;
  text-align: left;
  transition: padding-left 0.3s ease;
  min-height: 44px;
}
.svc-detail-toggle:hover { padding-left: 0.8rem; }
.svc-detail-toggle .idx { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--bone-faint); }
.svc-detail-toggle .label { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); text-transform: uppercase; transition: color 0.25s ease; }
.svc-detail-toggle .plus { margin-left: auto; font-family: var(--font-mono); font-size: 1.2rem; color: var(--bone-faint); transition: transform 0.3s ease, color 0.3s ease; }
.svc-detail-toggle:hover .label, .svc-detail-toggle[aria-expanded="true"] .label { color: var(--pink); }
.svc-detail-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); color: var(--pink); }

.svc-detail-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.svc-detail-body > div { overflow: hidden; }
.svc-detail-body.open { grid-template-rows: 1fr; }

.svc-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.8rem 2.5rem;
  padding: 0.5rem 0.2rem 1.5rem;
}
.svc-facets h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.5rem;
  font-weight: 400;
}
.svc-facets p { color: var(--bone-dim); font-size: 0.95rem; }

.svc-detail-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0.2rem 1.8rem;
  border-top: 1px dashed var(--line);
}

.chapter-note {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  max-width: 52em;
  line-height: 2;
}

/* ============================================================
   ABOUT page blocks
   ============================================================ */

.about-block {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2rem 5rem;
}
.about-block h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.about-block .body { color: var(--bone-dim); max-width: 40em; display: grid; gap: 1.2rem; align-content: start; }
.about-block .body strong { color: var(--bone); font-weight: 500; }
@media (max-width: 800px) { .about-block { grid-template-columns: 1fr; } }

.principles { list-style: none; display: grid; max-width: 46rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.principles li {
  border-top: 1px solid var(--line);
  padding: 1.8rem 0.2rem;
  display: flex;
  gap: 1.8rem;
  align-items: baseline;
}
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles li .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; color: var(--pink); }
.principles b { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: 0.02em; display: block; }
.principles span { color: var(--bone-dim); font-size: 0.95rem; }

.values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.values-strip span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--bone-dim);
  padding: 0.5rem 0.9rem;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  max-width: 52rem;
}
.legal h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.6rem; margin: 2.2rem 0 0.7rem; }
.legal p, .legal li { color: var(--bone-dim); }
.legal ul { padding-left: 1.2rem; margin: 0.6rem 0; }
.legal .updated { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-faint); }

/* ============================================================
   HOMEPAGE INDEXES — divisions + selected work (minimal rows)
   ============================================================ */

.division-index,
.work-index { list-style: none; border-top: 1px solid var(--line); }
.division-index li,
.work-index li { border-bottom: 1px solid var(--line); }
.division-index a,
.work-index a {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.3rem 0.2rem;
  transition: padding-left 0.3s ease;
}
.division-index a:hover,
.work-index a:hover { padding-left: 0.8rem; }

.division-index .num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--pink);
}
.division-index .name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.25s ease;
}
.division-index .out {
  margin-left: auto;
  color: var(--bone-faint);
  font-size: 0.92rem;
  text-align: right;
  max-width: 18em;
}
.division-index .go {
  font-family: var(--font-mono);
  color: var(--bone-faint);
  transition: transform 0.3s ease, color 0.3s ease;
}
.division-index a:hover .name { color: var(--pink); }
.division-index a:hover .go { color: var(--pink); transform: translateX(5px); }
@media (max-width: 640px) { .division-index .out { display: none; } }

.work-index .idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
}
.work-index .name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.work-index .cat {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  text-align: right;
}
.work-index a:hover .name { color: var(--pink); }

/* ---------- horizontal work rail (homepage) ---------- */

.work-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.8rem;
}
.rail-nav { display: flex; gap: 0.6rem; flex-shrink: 0; }
.rail-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  color: var(--bone);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.rail-btn:hover { border-color: var(--pink); color: var(--pink); }
.rail-btn:disabled { opacity: 0.25; cursor: default; }
.rail-btn:disabled:hover { border-color: var(--line-strong); color: var(--bone); }
@media (max-width: 600px) { .rail-nav { display: none; } }

.work-rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--gutter);
  /* bleed to the screen edges so cards can peek off-screen */
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.4rem var(--gutter) 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.work-rail::-webkit-scrollbar { height: 5px; }
.work-rail::-webkit-scrollbar-track { background: var(--line); }
.work-rail::-webkit-scrollbar-thumb { background: var(--line-strong); }
.work-rail::-webkit-scrollbar-thumb:hover { background: var(--pink); }

.rail-card {
  flex: 0 0 clamp(15.5rem, 80vw, 21rem);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.rail-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }

.rail-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink-3);
}
.rail-visual .project-shot,
.rail-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}
.rail-visual svg { width: 100%; height: 100%; }
.rail-card:hover .rail-visual .project-shot,
.rail-card:hover .rail-visual img { transform: scale(1.05); }

.rail-info { padding: 1.05rem 1.1rem 1.25rem; }
.rail-idx {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
}
.rail-info h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0.35rem 0 0.6rem;
}
.rail-line { color: var(--bone-dim); font-size: 0.9rem; margin: 0.5rem 0 0.7rem; max-width: 30ch; }
.rail-info .project-service-tags { margin: 0.85rem 0 1rem; }
.rail-go {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
  transition: color 0.25s ease;
}
.rail-card:hover .rail-go { color: var(--pink); }

/* ============================================================
   MINIMAL HOMEPAGE SECTIONS (redesign)
   ============================================================ */

/* 2 · one-line introduction */
.intro-line { max-width: 60rem; }
.intro-line h2 { font-size: clamp(2.2rem, 5.5vw, 4.6rem); margin: 0.8rem 0 1.2rem; max-width: 18ch; }
.intro-line .lede { color: var(--bone-dim); }

/* 3 · services — heading, intro and editorial capability cards */
.svc-intro { margin: 1.3rem 0 clamp(2.6rem, 5vw, 3.6rem); }

/* Binoculars illustration — floats in the whitespace to the right of the
   heading/intro copy, above the services list. #services already has
   position:relative via the shared .section rule. The WRAPPER (not the
   .reveal element) carries the absolute position: the site's scroll-reveal
   system sets `.reveal.in { transform: none }` on reveal, which would wipe
   a static positioning transform declared on the same element, so the
   transform lives on this plain wrapper instead. The image itself keeps
   its ordinary .reveal fade + float animation, same as every other
   illustration on the site. */
.svc-illo-binoculars-wrap {
  position: absolute;
  top: clamp(0.5rem, 3vw, 2rem);
  right: var(--gutter);
  width: clamp(220px, 22vw, 400px);
  max-width: 32%;
  z-index: 1;
  pointer-events: none;
}

.svc-illo-binoculars {
  width: 100%;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.35));
  animation: illoFloatTiny 4.5s ease-in-out infinite;
}

@media (max-width: 900px) {
  .svc-illo-binoculars-wrap {
    position: static;
    top: auto;
    right: auto;
    width: clamp(200px, 40vw, 260px);
    max-width: 70%;
    margin: clamp(1.5rem, 5vw, 2.5rem) auto;
  }
}

@media (max-width: 600px) {
  .svc-illo-binoculars-wrap {
    width: clamp(150px, 46vw, 220px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-illo-binoculars { animation: none; }
}

.svc-home { border-top: 1px solid var(--line); }

.svc-card {
  display: block;
  padding: clamp(1.7rem, 3vw, 2.2rem) 0.2rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              border-color 0.4s ease;
}
.svc-card:hover,
.svc-card:focus-visible {
  padding-left: 0.9rem;
  background: color-mix(in srgb, var(--bone) 3%, transparent);
  border-bottom-color: var(--line-strong);
}

.svc-card-top {
  display: grid;
  grid-template-columns: auto minmax(8rem, 13rem) minmax(0, 1fr) auto;
  grid-template-areas: "num name desc arrow";
  align-items: baseline;
  gap: 1rem 2rem;
}
.svc-card-num { grid-area: num; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.28em; color: var(--pink); }
.svc-card-name {
  grid-area: name;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.35s ease, letter-spacing 0.35s ease;
}
.svc-card:hover .svc-card-name,
.svc-card:focus-visible .svc-card-name { color: var(--pink); letter-spacing: 0.015em; }
.svc-card-desc { grid-area: desc; color: var(--bone); font-size: 1.02rem; max-width: 34em; }
.svc-card-arrow {
  grid-area: arrow;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--bone-faint);
  justify-self: end;
  transition: color 0.35s ease, transform 0.35s ease;
}
.svc-card:hover .svc-card-arrow,
.svc-card:focus-visible .svc-card-arrow { color: var(--pink); transform: translateX(4px); }

/* capabilities — integrated reveal, not a dropdown */
.svc-card-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  margin-top: 0;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              transform 0.4s ease,
              margin-top 0.4s ease;
}
.svc-card:hover .svc-card-reveal,
.svc-card:focus-visible .svc-card-reveal,
.svc-card:focus-within .svc-card-reveal {
  max-height: 9rem;
  opacity: 1;
  transform: none;
  margin-top: 1.1rem;
}
.svc-card-caps-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 0.6rem;
}
.svc-card-caps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.svc-card-caps li {
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.svc-card:hover .svc-card-caps li,
.svc-card:focus-visible .svc-card-caps li { border-color: var(--line-strong); }

@media (max-width: 900px) {
  .svc-card-top {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num name arrow"
      "desc desc desc";
    gap: 0.5rem 1rem;
  }
}

/* 5 · belief statement */
.belief { text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
.belief .rule-break { width: min(100%, 34rem); margin-bottom: 1.5rem; }
.belief h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 0.98; max-width: 20ch; }
.belief .lede { color: var(--bone-dim); max-width: 40ch; }

/* 6 · final CTA — framed editorial close */
.final-cta {
  border-top: 1px solid var(--line);
  position: relative;
}

/* Plain final CTA (About page: headline + button + mail, no illustration
   frame) — centred and given real breathing room. Scoped away from
   .final-cta-editorial (Home/Work's richer version) so that one, which
   already defines its own padding/layout, is completely unaffected. */
.final-cta:not(.final-cta-editorial) {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3.4vw, 2.2rem);
}
.final-cta:not(.final-cta-editorial) h2 {
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  max-width: 18ch;
}

.final-cta-editorial {
  min-height: clamp(38rem, 82svh, 54rem);
  padding: clamp(2.25rem, 4.8vw, 5rem) var(--gutter);
  display: grid;
  place-items: center;
  text-align: left;
}

.final-cta-frame {
  position: relative;
  width: min(100%, 82rem);
  min-height: clamp(29rem, 62svh, 42rem);
  border: 1px solid var(--line-strong);
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  align-items: center;
  column-gap: clamp(3rem, 8vw, 9rem);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle paper depth — keeps the warm surface from feeling flat. */
.final-cta-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 84% 20%, color-mix(in srgb, var(--pink) 4%, transparent), transparent 68%),
    linear-gradient(115deg, color-mix(in srgb, var(--bone) 2%, transparent), transparent 50%);
}

.final-cta-copy {
  grid-column: 1;
  align-self: center;
  width: min(100%, 58rem);
}

/* Pointing character — stands in the whitespace between the headline and
   the CTA button, guiding the eye toward "Start a Project". The WRAPPER
   (not the .reveal image) carries the static positioning transform: the
   site's scroll-reveal system sets `.reveal.in { transform: none }` once
   an element is revealed, which would erase a static transform placed on
   the same element. Keeping it on this plain wrapper avoids that, while
   the image inside keeps its normal .reveal fade plus its own dedicated
   float animation — the same split already used for the site's other
   illustrations.

   The transform below is not a generic center offset — it anchors the
   illustration's own fingertip (measured at 98.8% across / 24% down the
   source artwork) to the wrapper's left/top coordinate. Because percentage
   transforms are relative to the element's own box, this keeps the finger
   aimed at the same fixed point regardless of the responsive width the
   image renders at, so it reliably points at the button instead of just
   approximately centering the character near it. */
.final-cta-pointer-wrap {
  position: absolute;
  left: 63%;
  top: 50%;
  transform: translate(-98.8%, -24%);
  width: clamp(90px, 12vw, 170px);
  max-width: 18%;
  z-index: 2;
  pointer-events: none;
}

.final-cta-pointer {
  width: 100%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.2));
  animation: ctaPointerFloat 5s ease-in-out infinite;
}

@keyframes ctaPointerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-pointer { animation: none; }
}

/* Mobile pointing character — points straight down at the button
   (Illustration B). Sits in normal document flow (not absolute) between
   the copy block and the actions block, matching its DOM position, so it
   naturally stacks below the headline/lede and above the CTA once the
   frame itself switches to a single column at the 767px swap point. */
.final-cta-pointer-down-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.final-cta-pointer-down {
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2));
  animation: ctaPointerFloat 5s ease-in-out infinite;
}

/* Higher-specificity selector: the base .illo utility class (defined later
   in this file) sets width:100% unconditionally, which would otherwise win
   over an equal-specificity .final-cta-pointer-down rule regardless of
   media query, since source order breaks ties between rules of equal
   specificity. Qualifying with the wrapper gives this enough specificity
   to reliably override .illo. */
.final-cta-pointer-down-wrap .final-cta-pointer-down {
  width: clamp(120px, 35vw, 150px);
  max-width: 150px;
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-pointer-down { animation: none; }
}

/* Desktop/Laptop/Tablet vs. Mobile illustration swap — Illustration A
   (pointing toward the button) shows above the mobile breakpoint;
   Illustration B (pointing straight down) takes over below it. The
   cutover is pinned to 760px rather than the requested 768px: 760px is
   this section's own existing breakpoint where .final-cta-frame already
   collapses from its 2-column grid to a single stacked column (an
   existing, unchanged part of the layout). Above 760px the frame is still
   2-column, so an in-flow "static" illustration placed between the copy
   and actions blocks would land in a new implicit row below BOTH columns
   instead of between the text and the button. Matching the swap to the
   frame's real stacking point keeps the illustration correctly positioned
   at every width without altering the section's existing structure. Pure
   CSS, no JS. */
.mobile-illustration { display: none; }
.desktop-illustration { display: block; }

@media (max-width: 760px) {
  .desktop-illustration { display: none; }
  .mobile-illustration { display: flex; }
}

.final-cta-editorial .eyebrow {
  margin-bottom: clamp(1.15rem, 2.4vw, 2rem);
}

.final-cta-editorial h2 {
  max-width: 11.2ch;
  font-size: clamp(3rem, 6.1vw, 7rem);
  line-height: 0.89;
  text-wrap: balance;
}

.final-cta-editorial h2 > span {
  display: block;
}

.final-cta-editorial h2 em {
  color: var(--pink);
  font-style: normal;
}

.final-cta-principles {
  margin-top: clamp(1.7rem, 3.2vw, 2.7rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem clamp(0.65rem, 1.4vw, 1.15rem);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.75vw, 0.7rem);
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.final-cta-principles i {
  color: var(--pink);
  font-style: normal;
  opacity: 0.75;
}

.final-cta-principles strong {
  color: var(--pink);
  font-weight: 400;
}

.final-cta-actions {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  width: min(100%, 22rem);
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.35rem, 2vw, 2rem);
}

.final-cta-actions .btn {
  flex: 0 0 auto;
  min-width: min(100%, 18rem);
  justify-content: space-between;
}

.final-cta .cta-mail {
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.final-cta .cta-mail a {
  color: var(--bone-dim);
  border-bottom: 1px solid var(--pink);
  padding-bottom: 3px;
  transition: color 0.25s ease;
}

.final-cta .cta-mail a:hover { color: var(--bone); }

/* Four tiny registration marks make the frame feel art-directed, not boxed-in. */
.final-cta-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid var(--pink);
  background: var(--ink);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.final-cta-corner.corner-tl { top: 0; left: 0; }
.final-cta-corner.corner-tr { top: 0; left: 100%; }
.final-cta-corner.corner-bl { top: 100%; left: 0; }
.final-cta-corner.corner-br { top: 100%; left: 100%; }


@media (max-width: 1040px) and (min-width: 761px) {
  .final-cta-frame {
    grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.65fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .final-cta-editorial h2 {
    font-size: clamp(3rem, 6.2vw, 5.3rem);
  }
  .final-cta-pointer-wrap {
    left: 65%;
    top: 50%;
    width: clamp(75px, 10vw, 120px);
  }
}

@media (max-width: 760px) {
  .final-cta-editorial {
    min-height: auto;
    padding-block: clamp(2rem, 8vw, 3rem);
  }
  .final-cta-frame {
    min-height: auto;
    padding: clamp(1.5rem, 7vw, 2.5rem);
    grid-template-columns: 1fr;
    row-gap: clamp(2.2rem, 8vw, 3.5rem);
  }
  .final-cta-editorial h2 {
    max-width: 10.5ch;
    font-size: clamp(2.65rem, 13vw, 4.7rem);
    line-height: 0.91;
  }
  .final-cta-principles {
    gap: 0.35rem 0.7rem;
    letter-spacing: 0.12em;
  }
  .final-cta-actions {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    padding-top: clamp(1.2rem, 4vw, 1.7rem);
    border-top: 1px solid var(--line);
  }
  .final-cta-actions .btn {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .final-cta-editorial h2 { font-size: clamp(2.35rem, 12.5vw, 3.45rem); }
  .final-cta-principles i:nth-of-type(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-frame::before { display: none; }
}

/* ============================================================
   SERVICES PAGE — compact divisions (redesign)
   ============================================================ */

.svc-div {
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.svc-div-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  max-width: 60rem;
}
.svc-div .chapter-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1px var(--pink);
  opacity: 0.8;
}
.svc-div .eyebrow { display: block; margin-bottom: 0.5rem; }
.svc-div h2 { font-size: clamp(1.9rem, 4.5vw, 3.4rem); }
.svc-div .lede { margin: 1rem 0 1.4rem; color: var(--bone-dim); }
.svc-div-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.svc-div-list li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border: 1px solid var(--line-strong);
  padding: 0.5rem 0.9rem;
}
@media (max-width: 700px) { .svc-div-head { grid-template-columns: 1fr; } }

/* ============================================================
   MINIMAL FOOTER (redesign)
   ============================================================ */

.footer-min {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  padding: 2.2rem 0 1.2rem;
}
.footer-logo { display: inline-flex; }
.footer-logo img { height: 2.4rem; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center; }
.footer-nav a, .footer-social a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 0.4rem 0;
}
.footer-nav a:hover, .footer-social a:hover { color: var(--pink); }
.footer-social { display: inline-flex; gap: 1.6rem; }
.footer-legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.footer-legal a:hover { color: var(--pink); }
@media (max-width: 600px) { .footer-legal { margin-left: 0; width: 100%; } }

/* ============================================================
   BRAND INTRODUCTION — editorial statement with a rule line
   ============================================================ */

.intro-statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem 5rem;
  align-items: start;
}
@media (max-width: 860px) { .intro-statement { grid-template-columns: 1fr; gap: 1.4rem; } }
.intro-statement h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.intro-statement .body { color: var(--bone-dim); max-width: 42em; font-size: clamp(1rem, 1.4vw, 1.18rem); display: grid; gap: 1rem; }
.intro-statement .body strong { color: var(--bone); font-weight: 500; }

/* the rule that follows a straight path, then kicks off it in pink */
.intro-rule { grid-column: 1 / -1; margin-top: 1rem; }
.intro-rule svg { width: 100%; height: auto; overflow: visible; }
.intro-rule .track {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  transition: stroke-dashoffset 1.4s ease;
}
.intro-rule .kick {
  stroke: var(--pink);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  transition: stroke-dashoffset 0.55s ease 1.2s;
}
.intro-rule.in .track,
.intro-rule.in .kick { stroke-dashoffset: 0; }

/* ============================================================
   DIFFERENTIATION — "we build the whole machine"
   ============================================================ */

.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.diff-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.9rem 1.6rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  transition: background 0.3s ease;
}
.diff-cell:hover { background: color-mix(in srgb, var(--bone) 3%, transparent); }
.diff-cell .k {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--amber);
}
.diff-cell h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  text-transform: uppercase;
  line-height: 1.05;
}
.diff-cell p { color: var(--bone-dim); font-size: 0.94rem; }

/* ============================================================
   MANIFESTO — closing statement
   ============================================================ */

.manifesto {
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 2.4rem;
}
.manifesto p {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  line-height: 0.98;
  max-width: 18ch;
}
.manifesto p .break { color: var(--pink); display: block; }
.manifesto .sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-faint);
  max-width: none;
}

/* ============================================================
   CTA STRIP
   ============================================================ */

.cta-strip {
  border-top: 1px solid var(--line);
}

.cta-strip-top {
  padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 5rem);
}
.cta-strip-top h2 { font-size: clamp(2.8rem, 8vw, 7.5rem); max-width: 13ch; flex: 1 1 24rem; }
.cta-strip-top h2 span { color: var(--pink); }

/* Character pointing at the viewer — replaces the old fist-bump image in
   the exact same slot/role in the .cta-strip-top flex row. Sized by
   HEIGHT (not width, unlike the old fist-bump) since this illustration is
   a tall standing figure; width follows automatically from its aspect
   ratio. The compound selector below is needed for specificity: the base
   .illo utility class (defined later in this file) sets width:100% and
   height:auto unconditionally, which would otherwise win over an
   equal-specificity single-class override regardless of source order. */
.cta-strip-top .cta-strip-pointer {
  flex: 0 0 auto;
  height: clamp(220px, calc(8.3vw + 180px), 340px);
  width: auto;
  margin-left: auto;
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.3));
  animation: ctaPointerFloat 5s ease-in-out infinite;
}

.cta-strip-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: var(--pink);
  color: var(--ink-abs);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: clamp(1.3rem, 2.6vw, 1.7rem) clamp(1.4rem, 4vw, 3rem);
  min-height: 44px;
  transition: background 0.25s ease;
}
.cta-strip-bar:hover { background: var(--pink-deep); }
.cta-strip-bar .arrow { transition: transform 0.3s ease; }
.cta-strip-bar:hover .arrow { transform: translateX(5px); }

@media (max-width: 700px) {
  .cta-strip-top { flex-direction: column; align-items: stretch; text-align: left; }
  .cta-strip-top .cta-strip-pointer {
    height: auto;
    width: clamp(140px, 38vw, 170px);
    margin: 1rem auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-strip-pointer { animation: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer { padding: 0 var(--gutter) 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) repeat(3, minmax(9rem, 1fr));
  gap: 2.5rem 3rem;
  padding: 3rem 0;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: grid; gap: 1.1rem; align-content: start; }
.footer-brand img { height: 3rem; width: auto; }
.footer-brand p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); line-height: 2; }

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-faint);
  font-weight: 400;
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.15rem; }
.footer-col a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-block;
  padding: 0.35rem 0;
}
.footer-col a:hover { color: var(--pink); }
.footer-col .soon { color: var(--bone-faint); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0; display: inline-block; }

.footer-base {
  border-top: 0;
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.footer-base a:hover { color: var(--pink); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .transform-list li, .process-step { opacity: 1 !important; transform: none !important; }
  .rule-break::before, .rule-break::after { transform: none !important; }
  .rule-break .frag { transform: translateY(-0.65rem) rotate(-8deg) !important; }
  .fig-brand .frag, .fig-social .tile { opacity: 1 !important; transform: none !important; }
  .fig-web .rule, .fig-growth .signal-path, .fig-social .thread { stroke-dashoffset: 0 !important; }
  .fig-web .block { opacity: 1 !important; transform: none !important; }
  .fig-growth .hot { fill: var(--pink) !important; }
  .story-fig .strand { stroke-dashoffset: 0 !important; }
  .story-fig .mark-frag { opacity: 1 !important; }
  .intro-rule .track, .intro-rule .kick { stroke-dashoffset: 0 !important; }
  .scroll-progress { display: none !important; }
  .trust-track { animation: none !important; }
  .cursor-dot { display: none !important; }
}


/* ==========================================
   SERVICES PAGE (72mg-inspired editorial rebuild)
   ========================================== */

/* hero */
.svc-hero { padding: calc(var(--nav-h) + clamp(3rem, 9vw, 7rem)) var(--gutter) clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.svc-hero-rule { height: 1px; background: var(--line-strong); width: min(100%, 42rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); position: relative; transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1); }
.svc-hero-rule.in { transform: scaleX(1); }
.svc-hero-rule span { position: absolute; right: 0; top: -2px; width: 2.4rem; height: 4px; background: var(--pink); transform: rotate(-7deg); transform-origin: right; }
.svc-hero-title { font-size: clamp(2.6rem, 8vw, 7rem); max-width: 15ch; margin: 0.6rem 0 1.6rem; }
.svc-hero-title .pink { color: var(--pink); }
.svc-hero .lede { max-width: 42em; }
.svc-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.svc-jump { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone-dim); transition: color 0.25s ease; }
.svc-jump:hover { color: var(--bone); }

/* manifesto — active line brightens on reveal */
.svc-manifesto { padding: clamp(4rem, 12vw, 9rem) var(--gutter); max-width: 60rem; }
/* manifesto as the page lead (hero removed) — clear the fixed nav */
.svc-manifesto-lead { padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vw, 6.5rem)); padding-bottom: clamp(3.5rem, 8vw, 6rem); max-width: 64rem; }
.svc-manifesto-lead .eyebrow { display: block; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.svc-line { font-family: var(--font-display); text-transform: uppercase; line-height: 1.02; color: var(--bone-faint); font-size: clamp(1.8rem, 5vw, 3.6rem); margin-bottom: 0.45em; letter-spacing: 0.01em; }
.svc-line.in { color: var(--bone); }
.svc-line .pink { color: var(--pink); }
.svc-line-sm { font-family: var(--font-body); text-transform: none; font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--bone-dim); max-width: 30ch; letter-spacing: 0; }
.svc-line-sm.in { color: var(--bone-dim); }
.svc-line-big { font-size: clamp(2.6rem, 8.5vw, 6rem); color: var(--bone); margin-top: 0.35em; }
.svc-manifesto .rule-break { margin-top: 2.2rem; }

/* four connected divisions */
.svc-chapter { border-top: 1px solid var(--line); padding: clamp(3rem, 7vw, 6.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(8rem, 0.62fr) minmax(0, 0.95fr); gap: 2.5rem 3rem; align-items: start; }
.svc-chapter-illo { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: center; justify-self: center; width: clamp(8rem, 13vw, 12rem); }
.svc-chapter-left { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
.svc-chapter-num { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 9rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--line-strong); display: block; margin-bottom: 0.5rem; }
.svc-chapter-left .eyebrow { margin-bottom: 0.4rem; }
.svc-chapter-left h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: 1rem; max-width: 16ch; }
.svc-chapter-left .lede { margin-bottom: 1.6rem; }
.svc-caps { list-style: none; border-top: 1px solid var(--line); }
.svc-caps li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: 1.05rem 0.2rem; transition: padding-left 0.3s ease, background 0.3s ease; }
.svc-caps li:hover { padding-left: 0.7rem; background: color-mix(in srgb, var(--bone) 3%, transparent); }
.svc-cap-t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.55rem); letter-spacing: 0.02em; transition: color 0.25s ease; }
.svc-caps li:hover .svc-cap-t { color: var(--pink); }
.svc-cap-go { font-family: var(--font-mono); color: var(--bone-faint); transition: transform 0.3s ease, color 0.3s ease; }
.svc-caps li:hover .svc-cap-go { color: var(--pink); transform: translateX(6px); }

/* service capability accordion enhancement
   The original list remains intact as a no-JS fallback. */
.svc-caps.is-accordion li {
  display: block;
  padding: 0;
  background: transparent;
}
.svc-caps.is-accordion li:hover {
  padding-left: 0;
  background: transparent;
}
.svc-cap-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0.2rem;
  text-align: left;
  transition: padding-left 0.3s ease, background 0.3s ease;
}
.svc-cap-toggle:hover {
  padding-left: 0.7rem;
  background: color-mix(in srgb, var(--bone) 3%, transparent);
}
.svc-cap-toggle:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}
.svc-cap-toggle:hover .svc-cap-t,
.svc-caps li.is-open .svc-cap-t {
  color: var(--pink);
}
.svc-cap-toggle:hover .svc-cap-go {
  color: var(--pink);
  transform: translateX(6px);
}
.svc-caps li.is-open .svc-cap-go {
  color: var(--pink);
  transform: rotate(90deg);
}
.svc-caps li.is-open .svc-cap-toggle:hover .svc-cap-go {
  transform: rotate(90deg);
}
.svc-cap-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease;
}
.svc-cap-desc > p {
  min-height: 0;
  overflow: hidden;
  padding: 0 3.5rem 0 0.2rem;
  color: var(--bone-dim);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  max-width: 46rem;
  transition: padding-bottom 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-cap-desc.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.svc-cap-desc.open > p {
  padding-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .svc-cap-toggle { padding: 1rem 0; }
  .svc-cap-toggle:hover { padding-left: 0; }
  .svc-cap-desc > p { padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-cap-desc,
  .svc-cap-desc > p,
  .svc-cap-toggle,
  .svc-cap-go {
    transition: none;
  }
}

.svc-result { margin-top: 2rem; border-left: 2px solid var(--pink); padding-left: 1.3rem; }
.svc-result-k { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.5rem; }
.svc-result p:last-child { color: var(--bone-dim); max-width: 40em; }
.svc-honest { margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; line-height: 1.95; color: var(--bone-faint); max-width: 44em; }
@media (max-width: 900px) {
  .svc-chapter { grid-template-columns: 1fr; gap: 1.6rem; }
  .svc-chapter-left { position: static; }
  .svc-chapter-illo { position: static; width: clamp(10rem, 46vw, 15rem); margin: 0.5rem auto; }
}

/* process */
.svc-process {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.svc-process-text { flex: 1 1 30rem; min-width: 0; max-width: 42rem; }
.svc-process-h { font-size: clamp(2.2rem, 5.5vw, 4.6rem); margin: 0.8rem 0 2.5rem; }

.svc-process-collage {
  flex: 1 1 18rem;
  width: clamp(15rem, 40vw, 30rem);
  max-width: 43%;
  height: auto;
  object-fit: contain;
  margin-left: auto;
  align-self: center;
}
@media (min-width: 1440px) {
  .svc-process { padding-right: max(var(--gutter), 100px); }
}
@media (max-width: 1024px) {
  .svc-process-collage { width: clamp(12rem, 34vw, 22rem); }
  .svc-process { gap: clamp(2.5rem, 7vw, 4rem); }
}
@media (max-width: 767px) {
  .svc-process { flex-direction: column; align-items: stretch; }
  .svc-process-text { max-width: none; }
  .svc-process-collage {
    max-width: 320px;
    width: 80%;
    margin: 48px auto 0;
    align-self: center;
  }
}

/* no packages */
.svc-nopack { padding: clamp(4rem, 10vw, 8rem) var(--gutter); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.svc-nopack-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(3rem, 13vw, 11rem); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(244, 241, 235, 0.045); white-space: nowrap; pointer-events: none; z-index: 0; opacity: 0.9; }
.svc-nopack > :not(.svc-nopack-ghost) { position: relative; z-index: 1; }
.svc-nopack h2 { font-size: clamp(2.2rem, 6vw, 5rem); margin: 0.8rem 0 1.4rem; max-width: 18ch; }
.svc-nopack h2 .pink { color: var(--pink); }
.svc-nopack-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem 2rem; margin: 1.8rem 0; max-width: 62rem; }
.svc-nopack-list li { position: relative; padding-left: 1.4rem; color: var(--bone-dim); font-size: 0.98rem; }
.svc-nopack-list li::before { content: "—"; position: absolute; left: 0; color: var(--pink); }

/* ============================================================
   EDITORIAL LAYER (elevation pass)
   Section page-markers, graphic accents and cross-surface polish.
   Additive only — re-themes with the surface tokens above.
   ============================================================ */

/* --- section page-marker: an oversized, quiet index in the top margin --- */
.section-index {
  position: absolute;
  top: clamp(1.6rem, 4.5vw, 3rem);
  right: var(--gutter);
  z-index: 1;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--bone-faint);
}
.section-index::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--pink);
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-0.1em);
}
@media (max-width: 540px) { .section-index { display: none; } }

/* --- image frames are always dark plates ---
   Photos and the abstract preview graphics (light strokes) both read on dark,
   and a dark crop sitting in a light card looks intentional and editorial. */
.project-visual,
.rail-visual { background: #131313; }
.project-card .cat { color: var(--bone-faint); }

/* the intro statement reads as an oversized editorial opening line */
.intro-line.surface-light { padding-block: clamp(5.5rem, 12vw, 11rem); }
.intro-line.surface-light h2 { max-width: 20ch; letter-spacing: 0.005em; }

/* selected-work on beige: lift the cards a touch with a warm shadow */
.surface-beige .rail-card,
.surface-light .rail-card,
.surface-stone .rail-card { box-shadow: 0 1px 0 rgba(24, 19, 16, 0.04); }
.surface-beige .rail-card:hover,
.surface-light .rail-card:hover,
.surface-stone .rail-card:hover { box-shadow: 0 18px 40px -28px rgba(24, 19, 16, 0.5); }

/* pink underline links keep their weight on light paper */
.surface-light a[data-email], .surface-beige a[data-email], .surface-stone a[data-email] { color: var(--bone); }

/* legal pages: a full-width warm document with a centred reading column */
.legal.surface-light {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 58rem) / 2));
}
.legal.surface-light a { color: var(--bone); border-bottom: 1px solid var(--pink); }
.legal.surface-light a:hover { color: var(--pink); }

/* display headings breathe a hair more at the largest sizes */
.display { letter-spacing: 0.005em; }

/* reduced motion already covered globally; keep the cursor ring calm */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot { transition: none !important; }
}


/* ============================================================
   HERO — PREMIUM EDITORIAL FLORA (homepage only) · v41 FULL-SCREEN
   ----------------------------------------------------------------
   ART-DIRECTION CHANGES
   1. A full-height editorial grid replaces the loose centred stack.
   2. The original four text fragments form two deliberate headline rows.
   3. The flower remains a photographic layer, but no longer runs a permanent
      scale animation; the existing main.js parallax remains the only motion.
   4. Lighting is restrained to a soft tonal lift and a controlled vignette.
   5. Desktop, tablet and mobile are composed independently rather than merely
      shrinking the same layout.
   6. The desktop composition is true full-bleed: exactly one viewport high,
      edge-to-edge, with the previous inset cover frame removed.

   IMPORTANT: Existing JS hooks are intentionally retained:
   .hero-flora · .flora-stage · .flora-copy · .flora-spot · .flora-dust
   ============================================================ */

.hero-flora {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100vh;   /* fallback */
  height: 100svh;  /* stable viewport on modern browsers */
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: var(--bone);
  contain: paint;
}

/* FULL-SCREEN UPDATE:
   The previous inset editorial frame visually reduced the hero. The composition
   is now completely full-bleed; spacing is controlled by the internal grid only. */
.hero-flora::before,
.hero-flora::after {
  content: none;
  display: none;
}

/* --- photographic layer -------------------------------------------------- */
.flora-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.flora-img {
  display: block;
  width: 100%;
  height: 100%;
}
.flora-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  transform-origin: 76% 76%;
}

/* Existing pointer light retained, but reduced so it reads as illumination,
   not an effect. */
.flora-spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    24rem 24rem at var(--mx, 74%) var(--my, 48%),
    rgba(255, 244, 250, 0.045),
    rgba(255, 244, 250, 0) 64%
  );
  mix-blend-mode: soft-light;
  transition: opacity 0.65s ease;
}
.hero-flora.lit .flora-spot { opacity: 1; }

/* Multi-axis grading: protects the copy, grounds the image and keeps the
   photograph integrated with the black canvas. */
.flora-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.02) 78%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, transparent 30%),
    radial-gradient(115% 100% at 68% 43%, transparent 48%, rgba(0, 0, 0, 0.48) 100%);
}

/* Existing canvas remains available to main.js, with reduced visual weight. */
.flora-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.42;
}

/* --- editorial copy grid ------------------------------------------------- */
.flora-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding:
    calc(var(--nav-h) + clamp(2.3rem, 5vw, 4.8rem))
    var(--gutter)
    clamp(3.8rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.36fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: clamp(1.5rem, 3vw, 2.6rem);
}


/* Four existing spans are retained for compatibility, but composed as two
   editorial rows: “We plant ideas.” / “We grow brands.” */
.flora-title {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  column-gap: 0.18em;
  row-gap: 0.035em;
  max-width: min(12.5ch, 76vw);
  margin-left: clamp(0rem, 1.2vw, 1.2rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.6rem, 8.7vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}
.flora-title .ln { display: block; }
.flora-title .flora-gap { margin-top: 0; }
.flora-title .ln:nth-child(3),
.flora-title .ln:nth-child(4) {
  transform: translateX(clamp(1.25rem, 4.8vw, 5.5rem));
}
.flora-title em {
  font-family: var(--font-body);
  font-size: 0.67em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.055em;
  text-transform: lowercase;
  color: var(--bone-dim);
}
.flora-title .ln:nth-child(3) em { color: var(--pink); }

.flora-deck {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  gap: clamp(2rem, 5vw, 5rem);
}
.flora-lede {
  max-width: 31ch;
  color: var(--bone-dim);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 450;
  line-height: 1.6;
}
.flora-cta {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0 0.65rem;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
  transition: color 0.3s ease;
}
.flora-cta::after,
.flora-cta::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.flora-cta::after { background: var(--line-strong); }
.flora-cta::before {
  z-index: 1;
  background: var(--pink);
  transform: scaleX(0.14);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.flora-cta:hover::before,
.flora-cta:focus-visible::before { transform: scaleX(1); }
.flora-cta-arrow {
  color: var(--pink);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.flora-cta:hover .flora-cta-arrow,
.flora-cta:focus-visible .flora-cta-arrow { transform: translateX(0.42rem); }

.flora-disciplines {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  max-width: 23rem;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.68vw, 0.7rem);
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-align: right;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.flora-disciplines span { color: var(--pink); padding-inline: 0.25em; }

/* --- large laptops: preserve scale without crowding the photograph ------- */
@media (max-width: 1280px) {
  .flora-copy {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.32fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }
  .flora-title { font-size: clamp(4rem, 8.3vw, 7.2rem); }
  .flora-stage { transform: translateX(3%); }
}

/* --- tablet: image remains a full-height atmosphere, copy uses one column -- */
@media (max-width: 900px) {
  .flora-stage { transform: none; }
  .flora-img img {
    object-position: 67% bottom;
    opacity: 0.92;
  }
  .flora-vignette {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.62) 47%, rgba(0, 0, 0, 0.12) 82%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, transparent 38%),
      radial-gradient(135% 100% at 66% 36%, transparent 44%, rgba(0, 0, 0, 0.5) 100%);
  }
  .flora-copy {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    row-gap: clamp(1.25rem, 3.5vw, 2.2rem);
  }
  .flora-title {
    grid-column: 1;
    max-width: 94vw;
    font-size: clamp(3.7rem, 10.2vw, 6.3rem);
  }
  .flora-deck { grid-column: 1; grid-row: 2; }
  .flora-disciplines {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }
}

/* Exact viewport fit for short laptop screens: preserve the full composition
   without creating an internal crop or forcing the next section into view. */
@media (min-width: 901px) and (max-height: 760px) {
  .flora-copy {
    padding-top: calc(var(--nav-h) + 1.8rem);
    padding-bottom: 2.6rem;
    row-gap: 1.15rem;
  }
  .flora-title { font-size: clamp(3.9rem, 8vw, 6.7rem); }
  .flora-lede { font-size: clamp(1.15rem, 1.35vw, 1.3rem); }
}

/* --- mobile: purpose-built vertical cover; image becomes the lower act ---- */
@media (max-width: 600px) {
  .hero-flora {
    /* Mobile remains at least full-screen, but may grow when accessibility text
       sizing or a short device would otherwise crop the content. */
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .flora-copy {
    min-height: auto;
    flex: 0 0 auto;
    padding:
      calc(var(--nav-h) + clamp(2rem, 8vw, 3rem))
      var(--gutter)
      clamp(1.5rem, 6vw, 2.2rem);
    grid-template-rows: auto auto auto;
    row-gap: clamp(1.1rem, 4vw, 1.65rem);
  }
  .flora-title {
    grid-row: 1;
    grid-template-columns: max-content max-content;
    max-width: 100%;
    margin-left: 0;
    font-size: clamp(2.75rem, 13.4vw, 4.15rem);
    line-height: 0.86;
    column-gap: 0.14em;
  }
  .flora-title .ln:nth-child(3),
  .flora-title .ln:nth-child(4) {
    transform: translateX(clamp(0.65rem, 4vw, 1.3rem));
  }
  .flora-title em { font-size: 0.64em; }
  .flora-deck {
    grid-row: 2;
    display: grid;
    justify-items: start;
    gap: 1rem;
  }
  .flora-lede {
    max-width: 34ch;
    font-size: clamp(1.15rem, 4vw, 1.25rem);
    line-height: 1.58;
  }
  .flora-cta { padding-top: 0.35rem; }
  .flora-disciplines {
    grid-row: 3;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
  }

  /* In normal document flow so text can never collide with the artwork. */
  .flora-stage {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    min-height: 18rem;
    height: clamp(18rem, 42svh, 30rem);
    order: 2;
  }
  .flora-img img {
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
  }
  .flora-vignette {
    background:
      linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.18) 23%, rgba(0, 0, 0, 0.04) 62%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.58) 0%, transparent 34%);
  }
  .flora-dust { opacity: 0.28; }
}

@media (max-width: 380px) {
  .flora-title { font-size: clamp(2.45rem, 13vw, 3.3rem); }
  .flora-disciplines { max-width: 27ch; }
}

@media (prefers-reduced-motion: reduce) {
  .flora-spot { display: none; }
  .flora-cta,
  .flora-cta::before,
  .flora-cta-arrow { transition: none; }
}

/* ============================================================
   WORK PAGE — CINEMATIC DIAGONAL HERO (v46)
   ------------------------------------------------------------
   Exact desktop viewport, edge-to-edge. The diagonal plane uses
   a restrained, narrow glow instead of a broad blurred gradient.
   ============================================================ */

.work-cinematic-hero {
  --work-art-x: 0px;
  --work-art-y: 0px;
  --work-scroll-y: 0px;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding:
    calc(var(--nav-h) + clamp(2.2rem, 5.2vw, 4.8rem))
    clamp(1.4rem, 5vw, 5.5rem)
    clamp(5.6rem, 9vh, 7.2rem);
  color: var(--bone);
  background:
    linear-gradient(112deg, #050505 0%, #070607 48%, #0d070a 76%, #050505 100%);
  border: 0;
}

/* The old inset border made the hero look like a panel inside the page.
   It is intentionally removed so the composition fills the viewport. */
.work-cinematic-hero::after { display: none; }

.work-hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Controlled scrim only. No blurred radial gradients. */
.work-hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(4, 4, 4, 1) 0%,
      rgba(4, 4, 4, 0.96) 27%,
      rgba(4, 4, 4, 0.66) 45%,
      rgba(4, 4, 4, 0.13) 68%,
      transparent 88%),
    linear-gradient(0deg,
      rgba(4, 4, 4, 0.58) 0%,
      transparent 25%);
}

/* Growth illustration — see the HTML comment above the markup for why
   this is three nested layers. Each layer owns exactly one
   transform-driven effect so JS-driven parallax, the one-time entry
   animation, the continuous float, and the CSS hover-scale never
   overwrite one another (CSS animations/transitions fully replace the
   `transform` property rather than merging with it, so stacking several
   independent transform effects on one element silently breaks all but
   the last one — nesting lets them compose naturally instead).

   Position: anchored with top:50% + a -50% translateY so it centers on
   the section's vertical middle — which, since .work-hero-copy is also
   vertically centered by the hero's own flex layout, means the
   illustration centers against the text block rather than the top of the
   (100vh) section. A further +40px nudges it down slightly so the base
   of the plant reads closer to the paragraph. Shifted 100px further left
   (added to the existing 6% right-inset) and sized up ~10% versus the
   previous pass so it balances the headline better. */
.work-hero-growth-parallax {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(6% + 100px);
  width: clamp(462px, 35.2vw, 660px);
  max-width: none;
  transform: translate3d(var(--work-art-x), calc(-50% + 40px + var(--work-art-y) + var(--work-scroll-y, 0px)), 0);
  will-change: transform;
}

.work-hero-growth-entry {
  opacity: 0;
  animation: workGrowthEntry 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
  will-change: transform, opacity;
}

.work-hero-growth-float {
  animation: workGrowthFloat 7s ease-in-out infinite;
  animation-delay: 1.45s;
  will-change: transform;
}

.work-hero-growth {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-hero-growth-parallax:hover .work-hero-growth {
  transform: scale(1.03);
}

/* Haze elements are disabled in v46. The previous 34px blur was the
   main reason the diagonal area looked muddy on large displays. */
.work-hero-haze { display: none; }

.work-hero-copy {
  position: relative;
  z-index: 4;
  width: min(60vw, 63rem);
}

.work-hero-kicker {
  margin-bottom: clamp(1rem, 2.1vw, 1.8rem);
}

.work-hero-title {
  max-width: none;
  margin: 0;
  color: var(--bone);
  font-size: clamp(4.2rem, 6.2vw, 7.2rem);
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.work-hero-title span {
  display: block;
  white-space: nowrap;
}

.work-hero-lede {
  max-width: 48rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.6rem);
  font-size: clamp(0.96rem, 1.15vw, 1.16rem);
  line-height: 1.52;
  color: rgba(248, 246, 242, 0.72);
}

.work-hero-tags {
  position: absolute;
  z-index: 4;
  left: clamp(1.4rem, 5vw, 5.5rem);
  bottom: clamp(1.8rem, 4.8vh, 3.6rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem clamp(1rem, 2vw, 2rem);
  max-width: calc(100% - 14rem);
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.work-hero-tags i {
  font-style: normal;
  color: var(--pink);
}

.work-hero-index {
  position: absolute;
  z-index: 4;
  top: 23%;
  right: clamp(2rem, 4.5vw, 5rem);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(248, 246, 242, 0.55);
}

.work-hero-index i {
  position: relative;
  display: block;
  width: 1px;
  height: min(44vh, 24rem);
  background: rgba(248, 246, 242, 0.18);
}

.work-hero-index b {
  position: absolute;
  top: 31%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 12px rgba(255, 79, 154, 0.35);
  transform: translate(-50%, -50%);
  animation: workIndexFloat 4.6s ease-in-out 1.2s infinite alternate;
}

@keyframes workGrowthEntry {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes workGrowthFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes workIndexFloat {
  from { top: 28%; }
  to { top: 66%; }
}

/* Medium desktops and laptops */
@media (max-width: 1180px) {
  .work-hero-title {
    font-size: clamp(3.9rem, 7.45vw, 6.55rem);
  }

  .work-hero-growth-parallax {
    right: calc(3% + 80px);
    width: clamp(396px, 37.4vw, 550px);
  }

  .work-hero-copy {
    width: 66vw;
  }
}

/* Short desktop viewports remain exactly one screen high. */
@media (min-width: 901px) and (max-height: 760px) {
  .work-cinematic-hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: calc(var(--nav-h) + 1.7rem);
    padding-bottom: 4.7rem;
  }

  .work-hero-title {
    font-size: clamp(3.45rem, 5.9vw, 5.85rem);
  }

  .work-hero-lede {
    margin-top: 0.9rem;
  }

  .work-hero-tags {
    bottom: 1.35rem;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .work-cinematic-hero {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    /* Column flow so the illustration (a normal flex-flow sibling of
       .work-hero-copy below this breakpoint) stacks underneath the text
       instead of sitting beside it — the only structural layout change
       made here, needed to satisfy the explicit "stack below the text,
       centered" requirement for tablet/mobile. */
    flex-direction: column;
    align-items: flex-start;
    padding:
      calc(var(--nav-h) + clamp(3.4rem, 11vw, 5.5rem))
      var(--gutter)
      clamp(8.5rem, 22vw, 11rem);
  }

  .work-hero-copy {
    width: min(100%, 45rem);
    /* Reserve clearance on the right so the "01" index marker (still
       absolutely positioned near the top-right at this breakpoint,
       see .work-hero-index below) never sits under the headline text. */
    padding-right: clamp(3rem, 8vw, 4.5rem);
  }

  .work-hero-title {
    max-width: none;
    font-size: clamp(3.4rem, 9vw, 5.25rem);
    line-height: 0.92;
  }

  .work-hero-title span {
    white-space: normal;
  }

  /* Desktop pins this illustration with an absolute top:50% + a static
     translateY(-50% + 40px + …) so it centers on the hero's vertical
     middle. At this breakpoint the element switches to position:static
     and is centered in normal flow via margin:auto instead — but the
     desktop transform was never cleared, so that leftover translateY(-50%)
     was still shifting the (now in-flow) illustration upward by roughly
     half its own height, dragging it up into the text above it. Resetting
     the transform here is the actual mobile fix. */
  .work-hero-growth-parallax {
    position: static;
    top: auto;
    right: auto;
    align-self: center;
    width: clamp(330px, 46vw, 462px);
    margin: clamp(48px, 6vw, 64px) auto 0;
    transform: none;
  }

  .work-hero-atmosphere::after {
    background:
      linear-gradient(180deg,
        rgba(4, 4, 4, 0.99) 0%,
        rgba(4, 4, 4, 0.88) 35%,
        rgba(4, 4, 4, 0.25) 70%,
        rgba(4, 4, 4, 0.7) 100%);
  }

  .work-hero-index {
    top: calc(var(--nav-h) + 2rem);
    right: calc(var(--gutter) + 0.5rem);
  }

  .work-hero-index i {
    height: 8rem;
  }

  .work-hero-tags {
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(2.2rem, 6vw, 3.5rem);
    max-width: none;
  }
}

@media (max-width: 600px) {
  .work-cinematic-hero {
    padding-top: calc(var(--nav-h) + 3.1rem);
    padding-bottom: 9.5rem;
  }

  /* The index marker is hidden entirely below this width (see
     .work-hero-index below), so the clearance reserved for it at the
     tablet breakpoint is no longer needed here. */
  .work-hero-copy {
    padding-right: 0;
  }

  .work-hero-kicker {
    margin-bottom: 1rem;
  }

  .work-hero-title {
    max-width: none;
    font-size: clamp(3rem, 12vw, 4.25rem);
    line-height: 0.92;
  }

  .work-hero-lede {
    max-width: 31rem;
    font-size: 0.96rem;
  }

  .work-hero-lede br {
    display: none;
  }

  .work-hero-growth-parallax {
    width: 88vw;
    margin: clamp(28px, 6vw, 36px) auto 0;
  }

  .work-hero-index {
    display: none;
  }

  .work-hero-tags {
    gap: 0.45rem 0.8rem;
    font-size: 0.57rem;
    line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-hero-growth-entry,
  .work-hero-growth-float,
  .work-hero-growth,
  .work-hero-index b {
    animation: none !important;
    transition: none !important;
  }

  .work-hero-growth-entry {
    opacity: 1;
  }

  .work-hero-growth-parallax {
    transform: none;
  }
}

/* ============================================================
   SERVICES PAGE — MINIMAL EDITORIAL OPEN (v53)
   Replaces the manifesto/timeline overview. Typography and
   whitespace carry the section — no imagery, no icons. The
   headline sits left, the numbered list sits right, both visible
   together on larger screens; the list stacks below on narrow ones.
   ============================================================ */

.svc-open {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(7rem, 0.62fr) minmax(12rem, 0.56fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: calc(var(--nav-h) + clamp(4rem, 9vw, 7rem)) var(--gutter) clamp(4rem, 9vw, 7rem);
  border-bottom: 1px solid var(--line);
}

.svc-open-copy { min-width: 0; }

.svc-open-title {
  margin: 1rem 0 0;
  font-size: clamp(2.8rem, 5.6vw, 6.4rem);
  max-width: none;
}

.svc-open-title .ln { display: block; }

.svc-open-note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 32ch;
  color: var(--bone-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.illo-question {
  width: clamp(6.5rem, 11vw, 10.5rem);
  justify-self: center;
}

.svc-open-nav {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  min-width: 0;
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}

.svc-open-item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  padding-bottom: 0.6rem;
  color: var(--bone);
}

.svc-open-item::after,
.svc-open-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}

.svc-open-item::after { background: var(--line-strong); }

.svc-open-item::before {
  z-index: 1;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-open-item:hover::before,
.svc-open-item:focus-visible::before { transform: scaleX(1); }

.svc-open-item .num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--pink);
}

.svc-open-item .name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.35s ease, transform 0.35s ease;
}

.svc-open-item:hover .name,
.svc-open-item:focus-visible .name {
  color: var(--pink);
  transform: translateX(0.3rem);
}

@media (max-width: 900px) {
  .svc-open {
    grid-template-columns: 1fr;
  }

  .illo-question {
    width: clamp(9rem, 34vw, 13rem);
    margin: clamp(1.5rem, 5vw, 2.5rem) auto 0;
  }

  .svc-open-nav {
    margin-top: clamp(2.5rem, 6vw, 4rem);
  }
}

@media (max-width: 700px) {
  .svc-open-item { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-open-item::before,
  .svc-open-item .name {
    transition: none;
  }
}

/* ============================================================
   CONTACT PAGE — SIMPLIFIED PREMIUM FORM (v54)
   A clean, conversion-focused two-column layout: editorial heading
   on the left, a short 5-field form on the right. Scoped local
   tokens (--cf-*) point at the site's own Anton / Space Mono /
   Space Grotesk fonts (same as Home, Work, Services, About) plus
   the brand pink, so this page shares one typography system with
   the rest of the site instead of running its own.
   ============================================================ */
.contact-page {
  background: #080808;
}

.contact-simple {
  --cf-pink: #ff4fa3;
  --cf-ink: #141210;
  --cf-ink-dim: rgba(20, 18, 16, 0.68);
  --cf-ink-faint: rgba(20, 18, 16, 0.42);
  --cf-line: rgba(0, 0, 0, 0.12);
  --cf-heading-font: var(--font-display);
  --cf-mono-font: var(--font-mono);
  --cf-body-font: var(--font-body);
  position: relative;
  background: #f8f6f2;
  color: var(--cf-ink);
  padding: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem)) var(--gutter) clamp(4rem, 9vw, 7rem);
}

.contact-simple-inner {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(20rem, 0.88fr) minmax(26rem, 1.12fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

.contact-simple-copy { min-width: 0; }

/* decorative illustration — purely additive, sits above the existing
   eyebrow/heading and does not shift the form or change any spacing
   between the heading, lede and form beyond the space it occupies */
.contact-simple-illo {
  display: block;
  width: 280px;
  height: auto;
  margin: 0 0 1.75rem;
  transform-origin: 50% 60%;
  animation: contactIlloFloat 5.2s ease-in-out infinite;
}

@keyframes contactIlloFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

@media (max-width: 960px) {
  .contact-simple-illo { width: 220px; }
}

@media (max-width: 600px) {
  .contact-simple-illo { width: 160px; margin: 0 auto 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-simple-illo { animation: none; }
}

.contact-simple-eyebrow {
  font-family: var(--cf-mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cf-pink);
  margin: 0 0 1.3rem;
}

.contact-simple-title {
  font-family: var(--cf-heading-font);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.01em;
  font-size: clamp(3rem, 6.4vw, 5.8rem);
  color: var(--cf-ink);
  margin: 0;
}

.contact-simple-title span { display: block; }

.contact-simple-lede {
  max-width: 32em;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-family: var(--cf-body-font);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cf-ink-dim);
}

.contact-simple-form {
  min-width: 0;
  display: grid;
  gap: 1.5rem;
}

.csf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.contact-simple-form .field {
  display: grid;
  gap: 0.6rem;
}

.contact-simple-form .field label {
  font-family: var(--cf-mono-font);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cf-ink);
}

.contact-simple-form .field input,
.contact-simple-form .field textarea {
  width: 100%;
  height: 60px;
  padding: 18px;
  background: #fff;
  border: 1.5px solid var(--cf-line);
  border-radius: 12px;
  font-family: var(--cf-body-font);
  font-weight: 500;
  font-size: 17px;
  color: var(--cf-ink);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.contact-simple-form .field input::placeholder,
.contact-simple-form .field textarea::placeholder {
  color: var(--cf-ink-faint);
  font-weight: 500;
}

.contact-simple-form .field input:focus,
.contact-simple-form .field textarea:focus {
  outline: none;
  border-color: var(--cf-pink);
  box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.12);
}

.contact-simple-form .field.invalid input,
.contact-simple-form .field.invalid textarea {
  border-color: var(--cf-pink);
}

.contact-simple-form .csf-message textarea {
  height: 170px;
  resize: vertical;
}

.contact-simple-form .error-msg {
  display: none;
  margin: 0;
  font-family: var(--cf-mono-font);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--cf-pink);
}

.contact-simple-form .field.invalid .error-msg { display: block; }

.csf-submit {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: 12px;
  background: var(--cf-pink);
  color: var(--cf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--cf-mono-font);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

.csf-submit .arrow { transition: transform 0.3s ease; }

.csf-submit:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 40px rgba(255, 79, 163, 0.25);
}

.csf-submit:hover .arrow { transform: translateX(5px); }

.contact-simple-form .form-status {
  margin: 0;
  text-align: center;
  font-family: var(--cf-mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--cf-ink-faint);
}

.contact-simple-form .form-status.ok { color: #2f8f5b; }
.contact-simple-form .form-status.err { color: var(--cf-pink); }
.contact-simple-form .form-status.busy { color: var(--cf-ink-faint); }

/* The rest of the site shows a dark hero through the nav's transparent
   scrim until scroll triggers the solid .scrolled state. This page's
   hero is light, so there is nothing dark for that scrim to sit on —
   instead the nav is pinned to the same solid, opaque appearance it
   settles into everywhere else, from the first frame. Same component,
   same colours, same white text and pink underline/button; only the
   background is forced solid so it never turns transparent over the
   cream section beneath it. */
body.contact-page .site-nav {
  background: #0b0b0b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line);
}

@media (max-width: 960px) {
  .contact-simple-inner { grid-template-columns: 1fr; }
  .contact-simple-copy { max-width: 42rem; }
}

@media (max-width: 640px) {
  .csf-row { grid-template-columns: 1fr; }
  .contact-simple { padding-left: var(--gutter); padding-right: var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-simple-form .field input,
  .contact-simple-form .field textarea,
  .csf-submit {
    transition: none;
  }
}

/* ============================================================
   WORK HERO — CLEAN BLACK UPPER FIELD (v49)
   Keeps the navigation-to-headline area visually continuous and
   prevents the diagonal artwork tint from bleeding into the top.
   ============================================================ */
.work-cinematic-hero {
  background: #050505;
}

@media (min-width: 901px) {
  .work-cinematic-hero::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: clamp(10rem, 22vh, 14rem);
    pointer-events: none;
    background: linear-gradient(
      180deg,
      #050505 0%,
      #050505 74%,
      rgba(5, 5, 5, 0.985) 86%,
      rgba(5, 5, 5, 0) 100%
    );
  }
}

/* ============================================================
   ILLUSTRATIONS — editorial collage artwork
   Decorative PNG/WebP cutouts placed across the site (About hero,
   The Beginning, Our Approach, Services hero, and the four service
   chapters). Purely decorative: alt="" + aria-hidden="true" on every
   <img>. Sizing uses clamp() so each piece scales proportionally at
   every breakpoint; motion is a slow, looping transform so nothing
   ever shifts layout (keyframes only, no position/margin changes).
   The site-wide prefers-reduced-motion rule already freezes these.
   ============================================================ */

.illo {
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  will-change: transform;
}

/* ---- About hero: gummy bears ---- */
.about-hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
}
.page-hero-text { flex: 1 1 28rem; min-width: 0; }
.illo-gummy-bears {
  flex: 1 1 16rem;
  max-width: clamp(12rem, 26vw, 23rem);
  margin-left: auto;
  animation: illoFloatGentle 6.5s ease-in-out infinite;
}
@media (max-width: 800px) {
  .about-hero { flex-direction: column; align-items: stretch; }
  .illo-gummy-bears { max-width: 13rem; margin: 0 auto; order: -1; }
}

/* ---- The Beginning: cherry blossom flowers ---- */
.about-block-media {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.illo-flowers {
  align-self: flex-start;
  width: clamp(9rem, 17vw, 15rem);
  animation: illoDriftSlow 9s ease-in-out infinite;
}
@media (max-width: 800px) {
  .illo-flowers { align-self: center; width: clamp(8rem, 40vw, 12rem); }
}

/* ---- Our Approach: plant growth ---- */
.approach-block {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  flex-wrap: wrap;
}
.approach-text { flex: 1 1 28rem; min-width: 0; }
.illo-plant {
  flex: 1 1 14rem;
  max-width: clamp(11rem, 19vw, 17rem);
  margin-left: auto;
  animation: illoSwaySoft 7s ease-in-out infinite;
}
@media (max-width: 700px) {
  .approach-block { flex-direction: column; align-items: stretch; }
  .illo-plant { max-width: 11rem; margin: 0 auto; }
}

/* ============================================================
   ABOUT — "No fixed formula" (small editorial breathing space
   between Our Approach and the final CTA; text only, no cards,
   no images — replaces the old crew section)
   ============================================================ */
.about-formula {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 901px) {
  .about-formula { min-height: clamp(30rem, 58vh, 42rem); }
}

.formula-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.05fr);
  gap: 1.5rem clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.formula-head .eyebrow { margin-bottom: clamp(1rem, 2.5vw, 1.6rem); }
.formula-headline { font-size: clamp(3rem, 6.5vw, 6rem); max-width: 9ch; }
.formula-headline > span { display: block; }
.formula-headline em { color: var(--pink); font-style: normal; }
.formula-copy { font-size: clamp(1.05rem, 1.7vw, 1.3rem); margin-top: clamp(1.3rem, 2.6vw, 1.8rem); max-width: 32ch; }

/* Illustration — a plain non-.reveal-conflicting wrapper (the JS parallax
   sets an inline transform on mousemove, which always wins over any
   stylesheet rule regardless of .reveal.in, so no split-wrapper needed).
   A small negative margin lets it bleed slightly past the section's own
   gutter on wide screens, per "extend outside the grid" — capped well
   below the gutter width so it can never cause horizontal overflow. */
.formula-art-wrap {
  justify-self: end;
  width: min(100%, 30rem);
  margin-right: calc(var(--gutter) * -0.5);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.formula-art { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .formula-art-wrap { transition: none; } }

@media (max-width: 900px) {
  .formula-row { grid-template-columns: 1fr; gap: 2.2rem; }
  .formula-art-wrap { justify-self: center; width: min(78%, 20rem); margin-right: 0; }
}
@media (max-width: 480px) {
  .formula-art-wrap { width: min(88%, 16rem); }
}

/* ---- Services hero: question mark ---- */
.illo-question { animation: illoFloatTiny 4.5s ease-in-out infinite; }

/* ---- Service chapters: mirror / megaphone / laptop / rocket ---- */
.illo-mirror { animation: illoFloatVerySlow 10s ease-in-out infinite; }
.illo-megaphone { animation: illoIdleSmall 5.5s ease-in-out infinite, illoGlowPulse 3.2s ease-in-out infinite; }
.illo-laptop { animation: illoFloatGentle 6s ease-in-out infinite, illoGlowPulse 4s ease-in-out infinite; }
.illo-rocket { animation: illoHoverSmall 5s ease-in-out infinite; }

/* ---- shared illustration motion (subtle, elegant, never distracting) ---- */
@keyframes illoFloatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes illoDriftSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(5px, -9px) rotate(1.2deg); }
}
@keyframes illoSwaySoft {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
@keyframes illoFloatTiny {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes illoFloatVerySlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes illoIdleSmall {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.2deg); }
}
@keyframes illoHoverSmall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
/* soft pink glow-pulse — stands in for the megaphone's "lightning bolts"
   sparkle and the laptop's search-bar glow without extra markup/JS */
@keyframes illoGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 79, 154, 0)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 79, 154, 0.4)); }
}