/* ============================================================
   THE VISITOR — frankenstein of verteal / dash / armory / harry
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --bg: #060606;            /* armory page canvas */
  --panel: #0d0d0d;         /* armory raised panel */
  --text: #ffffff;
  --text-body: #e0e0e0;     /* verteal body-on-dark */
  --text-muted: #9a9a9a;    /* verteal muted-on-dark */
  --accent: #ff4d2e;        /* verteal vermilion */
  --accent-deep: #ff2d00;   /* verteal deep vermilion */
  --line: rgba(255, 255, 255, 0.07);        /* armory hairline */
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.04);       /* dash glass */
  --footer-ink: #1c0801;

  --font-sans: 'General Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'General Sans', ui-sans-serif, system-ui, sans-serif; /* was Geist Mono — dropped, read too template-y */

  --gutter: clamp(1rem, 3vw, 2.5rem);
  --ease-css: cubic-bezier(0.165, 0.84, 0.44, 1);   /* dash easeOutQuart */
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);     /* verteal 'osmo' */
  --ease-roll: cubic-bezier(0.76, 0, 0.24, 1);      /* dash char roll */
}

/* ---------- Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg);
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: #222 var(--bg);
}

body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
sup { font-size: 0.55em; }

::selection { background: var(--accent); color: var(--bg); }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 99px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 10000;
  background: var(--accent); color: #0a0a0a; padding: 0.6rem 1rem;
  border-radius: 999px; font-weight: 500; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Italic serif accent words — the dash "h1 em" move */
.hero-title em, .section-title em, .cta-title em, .footer-tagline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.05em;
}

/* ---------- Utilities ---------- */
.container { padding-inline: var(--gutter); }
.mono { font-family: var(--font-mono); }

.section { padding-block: clamp(3.25rem, 5.5vw, 6rem); position: relative; }
.hairline-top { border-top: 1px solid var(--line); }
.hairline-bottom { border-bottom: 1px solid var(--line); }

/* ---------- Subpage hero visuals (breathing gradient glow + optional dither) ---------- */
.page-hero { position: relative; overflow: hidden; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-glow::before {
  content: ''; position: absolute; width: 65%; aspect-ratio: 1; border-radius: 50%;
  right: -8%; top: -34%;
  background: radial-gradient(circle, rgba(255,125,60,0.30), rgba(255,60,20,0.09) 44%, transparent 70%);
  filter: blur(64px); animation: hero-breathe 9s ease-in-out infinite;
}
.page-hero-glow::after {
  content: ''; position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%;
  left: -14%; bottom: -46%;
  background: radial-gradient(circle, rgba(255,95,45,0.22), transparent 64%);
  filter: blur(72px); animation: hero-breathe 9s ease-in-out infinite; animation-delay: -4.5s;
}
@keyframes hero-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.09); } }
.page-hero[data-dither] { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; }
.page-hero[data-dither] > .container { z-index: 2; }

.mono-label {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mono-label::before { content: '✺'; color: var(--accent); font-size: 0.75em; }

.section-head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.section-title {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 1.25rem;
}
.section-note {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-align: right;
}
.section-note.mono { font-size: 0.75rem; letter-spacing: 0.08em; }

/* ---------- Buttons (verteal pill + chip, harry 3D tilt) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  height: 48px;
  padding: 0 0.5rem 0 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease-css), border-color 0.3s var(--ease-css), color 0.3s var(--ease-css);
  will-change: transform;
}
/* .btn--primary now uses the edge-glow treatment (see .btn--primary,.btn--edge below) */
.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding-right: 1.5rem;
  background: #151110;
}
.btn--ghost:hover { background: #221b18; border-color: rgba(255, 255, 255, 0.3); }
.btn--sm { height: 40px; font-size: 0.875rem; padding-left: 1.15rem; gap: 0.6rem; }
.btn--lg { height: 58px; font-size: 1.0625rem; padding-left: 1.75rem; }
.btn--block { width: 100%; justify-content: space-between; }

.btn-chip {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  color: var(--accent);
  border-radius: 50%; /* circle to match the pill button's round corners */
  overflow: hidden;
}
.btn--sm .btn-chip { width: 28px; height: 28px; }
.btn--lg .btn-chip { width: 42px; height: 42px; }
.btn-chip svg { width: 14px; height: 14px; }

@keyframes arrow-swap {
  0%   { transform: translateX(0); }
  49%  { transform: translateX(170%); }
  50%  { transform: translateX(-170%); }
  100% { transform: translateX(0); }
}
.btn:hover .btn-chip svg { animation: arrow-swap 0.45s var(--ease-roll); }

/* main button — FILLED orange, cursor-tracking surface sheen, glowing edge (no mask, no artifacts) */
.btn--primary,
.btn--edge {
  position: relative;
  overflow: hidden;
  color: #180400;
  background: linear-gradient(180deg, #ff6a3d, var(--accent-deep));
  box-shadow: none; /* no idle glow — the glow only blooms on hover */
  transition: box-shadow 0.35s var(--ease-css);
}
.btn--primary:hover,
.btn--edge:hover {
  box-shadow: 0 0 0 1px rgba(255, 185, 130, 0.75), 0 10px 34px -6px rgba(255, 60, 20, 0.8), 0 0 60px -8px rgba(255, 95, 40, 0.95);
}
.btn--primary::before,
.btn--edge::before { /* bright sheen that tracks the cursor across the surface */
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 222, 0.7), rgba(255, 200, 160, 0.16) 46%, transparent 68%);
  opacity: 0; transform: scale(0.9); transform-origin: var(--mx, 50%) var(--my, 50%);
  transition: opacity 0.35s var(--ease-css), transform 0.35s var(--ease-css);
}
.btn--primary:hover::before,
.btn--edge:hover::before { opacity: 1; transform: scale(1.25); }
.btn--primary .btn-label, .btn--edge .btn-label,
.btn--primary .btn-chip, .btn--edge .btn-chip { position: relative; z-index: 1; }
.btn--primary .btn-chip,
.btn--edge .btn-chip { background: #180400; color: #ffb38f; }

/* ---------- Preloader (harry fill-wipe choreography) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  /* failsafe: if JS never runs, get out of the way */
  animation: preloader-failsafe 0.6s ease 5s forwards;
}
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }

.pre-logo {
  position: relative;
  font-size: clamp(2rem, 6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pre-logo-base { color: #2b2b2b; }
.pre-logo-fill {
  position: absolute;
  inset: 0;
  color: #f1f1f1;
  clip-path: inset(0 100% 0 0);
}
.pre-meta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ---------- Nav ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.4s var(--ease-css), border-color 0.4s var(--ease-css), backdrop-filter 0.4s var(--ease-css);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(6, 6, 6, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 4.5rem;
  padding-inline: var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* padded, pill-shaped hit area — negative margin keeps the wordmark visually
     flush left while the rounded background extends around it on hover/focus */
  padding: 0.55rem 0.85rem;
  margin-left: -0.85rem;
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.3s var(--ease-css);
}
.brand:hover,
.brand:focus-visible { background: rgba(255, 255, 255, 0.07); }
.brand-wordmark {
  height: 1rem;
  width: auto;
  flex: none;
  display: block;
}
/* eyebrow mono-labels removed site-wide — read too template-y */
.mono-label { display: none; }
.nav-links { display: flex; gap: 2.25rem; }
.nav-link {
  display: inline-block;
  overflow: hidden;
  font-size: 0.9375rem;
  color: var(--text-body);
  text-decoration: none;
  line-height: 1.25;
}
/* dash char-roll: duplicate glyph below, rolls up on hover */
.nav-link .ch {
  position: relative;
  display: inline-block;
  white-space: pre; /* keep the space char in "Our Work" from collapsing inside the inline-block */
  transition: transform 0.55s var(--ease-roll);
  transition-delay: calc(var(--i) * 0.025s);
}
.nav-link .ch::after {
  content: attr(data-ch);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--accent);
}
.nav-link:hover .ch, .nav-link:focus-visible .ch { transform: translateY(-100%); }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease-osmo);
}
.nav-burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu — "portal" editorial reveal */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #08070a;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  /* visibility keeps the closed menu's links out of the keyboard tab order
     (clip-path alone hides them visually but leaves them focusable) */
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-roll), visibility 0s 0.6s;
  pointer-events: none;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; visibility: visible; transition: clip-path 0.6s var(--ease-roll), visibility 0s; }
/* breathing vermilion portal glow behind the links */
.mm-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;
  width: 135%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 46, 0.20), rgba(255, 45, 0, 0.05) 44%, transparent 66%);
  filter: blur(26px);
  opacity: 0;
  transition: opacity 0.9s var(--ease-css) 0.1s;
  animation: hero-breathe 9s ease-in-out infinite;
  pointer-events: none;
}
.mobile-menu.is-open .mm-glow { opacity: 1; }
.mm-nav {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.mm-list { list-style: none; margin: 0 0 auto; padding: 0; }
.mm-item { border-top: 1px solid var(--line); }
.mm-item:last-child { border-bottom: 1px solid var(--line); }
.mobile-link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.15rem 0;
  text-decoration: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.mm-num {
  flex: none;
  width: 2ch;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  transform: translateY(-0.35em);
  transition: color 0.3s var(--ease-css);
}
.mm-mask { display: block; overflow: hidden; padding: 0.04em 0.06em 0.16em; }
.mm-word {
  display: block;
  font-size: clamp(2.3rem, 11vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: inherit;
  transform: translateY(115%);
  transition: transform 0.72s var(--ease-roll);
  transition-delay: calc(0.18s + var(--i, 0) * 0.08s);
}
.mobile-menu.is-open .mm-word { transform: translateY(0); }
.mm-word em { font-family: inherit; font-style: normal; font-weight: inherit; } /* no serif on the links (email keeps it) */
.mobile-link:active .mm-word, .mobile-link:active .mm-num { color: var(--accent); }
.mobile-link--cta .mm-word, .mobile-link--cta .mm-word em { color: var(--accent); }
.mobile-link--cta:active .mm-word, .mobile-link--cta:active .mm-word em { color: var(--accent-deep); }
.mm-meta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease-css) 0.55s, transform 0.6s var(--ease-css) 0.55s;
}
.mobile-menu.is-open .mm-meta { opacity: 1; transform: none; }
.mm-email {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.55rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
}
.mm-coords { font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-muted); }

/* ---------- Site main / footer layering (verteal fixed footer) ---------- */
.site-main {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0901; /* dark backdrop behind the now-transparent dither */
}
/* dither backdrop (WebGL ASCII field) sits at the very back */
#dither-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.dither-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 90, 80, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 90, 80, 0.09) 1px, transparent 1px);
  background-size: var(--grid-w, 80px) var(--grid-h, 80px);
}
.dither-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(140, 100, 90, 0.22) 1.5px, transparent 1.5px);
  background-size: var(--grid-w, 80px) var(--grid-h, 80px);
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(38% 44% at 66% 40%, rgba(255, 45, 0, 0.2), transparent 66%);
  animation: hero-glow-breathe 7s ease-in-out infinite;
}
@keyframes hero-glow-breathe {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.hero-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
}
.hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--text-body);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); /* legible over the dither */
}
.hero-eyebrow .dot { color: var(--accent); margin: 0 0.4rem; font-size: 0.8em; }
.hero-title {
  margin-top: 2rem;
  font-size: clamp(2.1rem, 6.4vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
/* Pre-hide the hero entrance elements from the very first paint so they never
   flash visible-then-hidden before the JS reveal. Gated on .js (set synchronously
   in <head>) so that with JS off / a failed CDN they stay visible. main.js removes
   .js if GSAP/Lenis fail to load, which reveals these again. */
.js .hero-title,
.js [data-hero-fade] { opacity: 0; }
.hero-sub {
  margin-top: 2.25rem;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-body);
}
.hero-ctas {
  margin-top: 2.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-foot {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 1.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.hero-foot-center { letter-spacing: 0.06em; font-weight: 300; }
.hero-foot-right { text-align: right; letter-spacing: 0.08em; font-weight: 300; }
/* legible over the dither (same treatment as the eyebrow) */
.hero-foot-left { color: var(--text-body); font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }

/* ---------- Marquees ---------- */
.marquee { overflow: hidden; padding-block: 1.15rem; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding-right: 2.75rem;
  flex: none;
}
.marquee-item {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-body);
  white-space: nowrap;
}
.marquee-star { color: var(--accent); font-size: 0.8rem; }

/* client logo strip — white marks on transparent, every source on the same 520x390 canvas,
   so one box size scales them all consistently. width/height are also set on each <img> so
   the marquee can measure the group before the images load (it only waits on fonts). */
.marquee--logos { padding-block: 1.6rem; }
.marquee--logos .marquee-group { gap: 3.25rem; padding-right: 3.25rem; }
.marquee-logo { flex: none; width: 120px; height: 90px; object-fit: contain; opacity: 0.7; }

.marquee--pills { padding-block: 1.4rem; }
.pill {
  background: var(--pill, var(--accent));
  color: #0a0a0a;
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- Manifesto (verteal #whyus) ---------- */
.manifesto-text {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: min(92%, 60rem);
}
.benefits { margin-top: clamp(2rem, 3.5vw, 3.25rem); }
.benefit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit > span:first-child {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.benefit-note { color: var(--text-muted); font-size: 0.9375rem; text-align: right; }

/* ---------- Services (rounded panels over a sunrise) ---------- */
.services { position: relative; overflow: hidden; } /* clip the sunrise — hard cut at the section edges, no bleed */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
/* SUNRISE — warm light crests the horizon at the base of the section and domes upward */
.services-beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 92, 40, 0.13), rgba(255, 60, 24, 0.035) 34%, transparent 62%);
}
.services-beam::before { /* the sun's dome rising from the horizon */
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -14%;
  height: 124%;
  transform-origin: 50% 100%;
  background: radial-gradient(56% 88% at 50% 100%,
    rgba(255, 205, 135, 0.42) 0%,
    rgba(255, 138, 66, 0.34) 24%,
    rgba(255, 82, 36, 0.20) 46%,
    rgba(255, 50, 16, 0.07) 66%,
    transparent 80%);
  filter: blur(52px);
  animation: sunrise-breathe 8s ease-in-out infinite;
}
.services-beam::after { /* the bright sunrise core right at the horizon line */
  content: '';
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: -5%;
  height: 42%;
  transform-origin: 50% 100%;
  background: radial-gradient(58% 100% at 50% 100%,
    rgba(255, 232, 178, 0.5) 0%,
    rgba(255, 150, 80, 0.32) 38%,
    rgba(255, 96, 44, 0.10) 66%,
    transparent 80%);
  filter: blur(30px);
  animation: sunrise-breathe 8s ease-in-out infinite;
  animation-delay: -2.5s;
}
@keyframes sunrise-breathe {
  0%, 100% { opacity: 0.62; transform: scale(0.99); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* rounded raised panels floating over the sunrise (Option 4) */
.service {
  position: relative;
  background: rgba(12, 9, 7, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 1.9rem 1.8rem 2rem;
  min-height: 232px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.4s var(--ease-css), background-color 0.4s var(--ease-css), border-color 0.4s var(--ease-css);
}
@media (hover: hover) {
  .service:hover {
    transform: translateY(-4px);
    background: rgba(24, 15, 10, 0.68);
    border-color: rgba(255, 150, 90, 0.32);
  }
}
.service.is-open {
  transform: none;
  background: rgba(20, 13, 9, 0.74);
  border-color: rgba(255, 150, 90, 0.3);
}

/* expandable body (height animated by GSAP — robust inside the flex column) */
.service-more { height: 0; overflow: hidden; }
.service-more-inner {
  padding-top: 1.2rem;
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
}
/* Option 4 split: what-you-get list beside a visual panel + CTA */
.service-more-inner { container-type: inline-size; }
.service-split {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 1.1rem;
  align-items: stretch;
}
/* when the card is too narrow for the two-column split, the CTA pill ("Start with brand")
   is wider than the visual panel and gets clipped by its overflow:hidden — stack instead */
@container (max-width: 440px) {
  .service-split { grid-template-columns: 1fr; }
  .service-vis { min-height: 96px; }
}
.service-list {
  margin: 0;
  display: grid;
  gap: 0.55rem;
  align-content: center;
}
.service-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-body);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s var(--ease-css), transform 0.5s var(--ease-css);
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.service.is-open .service-list li { opacity: 1; transform: none; }
.service.is-open .service-list li:nth-child(1) { transition-delay: 0.12s; }
.service.is-open .service-list li:nth-child(2) { transition-delay: 0.19s; }
.service.is-open .service-list li:nth-child(3) { transition-delay: 0.26s; }
.service.is-open .service-list li:nth-child(4) { transition-delay: 0.33s; }
/* the visual panel — brand ring motif + CTA, wipes up on open */
.service-vis {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 116px;
  background: linear-gradient(150deg, rgba(46, 25, 16, 0.55), rgba(9, 7, 6, 0.5));
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 0.85rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-css) 0.1s;
}
.service.is-open .service-vis { clip-path: inset(0 0 0 0); }
.service-vis::before {
  content: '';
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 120, 60, 0.7);
  border-radius: 50%;
  right: -12%;
  top: -26%;
  box-shadow: 0 0 66px -16px var(--accent);
}
.service-vis-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.service-cta {
  position: relative;
  z-index: 2;
  margin-left: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--accent);
  color: #180400;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.3s var(--ease-css);
}
.service-cta:hover { box-shadow: 0 0 24px -6px rgba(255, 90, 40, 0.9); }
.service-cta svg { width: 12px; height: 12px; }
.service-tag {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: auto;
}
.service-title {
  margin-top: 2.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.service-desc {
  margin-top: 0.7rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 36ch;
}
.service-arrow {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s var(--ease-css), transform 0.25s var(--ease-css);
}
.service-arrow svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease-css); }
.service:hover .service-arrow { opacity: 1; transform: scale(1); }
.service.is-open .service-arrow { opacity: 1; transform: scale(1); }
.service.is-open .service-arrow svg { transform: rotate(45deg); } /* plus morphs to an x on open */
/* touch / no-hover devices: keep the plus visible so the card reads as tappable */
@media (hover: none), (pointer: coarse) {
  .service-arrow { opacity: 1; transform: scale(1); }
  /* Touch devices open the card in one clean motion: the staggered list, the
     clip-path wipe and the video scale used to all animate at once on top of the
     GSAP height reflow, which made the expand feel sluggish on phones. Drop those
     so the only thing animating during open is the height. */
  .service-list li { opacity: 1; transform: none; transition: none; }
  .service.is-open .service-list li { transition-delay: 0s; }
  .service-vis { clip-path: none; transition: none; }
  .service .cv { transform: none; transition: opacity 0.3s linear; }
  .service.is-open .cv { transform: none; }
}
.service--cta .service-tag { color: var(--accent); line-height: inherit; }

/* ---------- Card video — hover-peek teaser (embers bloom behind the card) ----------
   At rest each card is dark and still; on hover (desktop) or open (touch) the ember
   clip fades in behind the text as an ambient full-card background. The <video class="cv">
   and <span class="c-veil"> are the first children of each .service, parked behind all
   text at negative z-index inside the card's own (isolated) stacking context. */
.service { isolation: isolate; }
.service .cv {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 15px;
  z-index: -2; opacity: 0; transform: scale(1.06); transform-origin: 50% 45%;
  filter: saturate(1.14) contrast(1.04) brightness(0.68); pointer-events: none;
  transition: opacity 0.55s var(--ease-css), transform 0.75s var(--ease-css);
}
.service .c-veil {
  position: absolute; inset: 0; z-index: -1; border-radius: 15px; pointer-events: none;
  background:
    radial-gradient(150% 120% at 6% 30%, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0.30) 42%, transparent 68%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.52) 0%, rgba(6, 6, 6, 0.60) 44%, rgba(6, 6, 6, 0.86) 100%);
  transition: background 0.55s var(--ease-css);
}
.service .c-veil::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 85% at 84% -14%, rgba(255, 90, 45, 0.16), transparent 55%);
  opacity: 0.7; transition: opacity 0.55s var(--ease-css);
}
.service .c-veil::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 120, 70, 0); transition: box-shadow 0.5s var(--ease-css);
}
/* revealed when the card is OPEN (tap-to-expand on touch) — the only trigger on a
   touchscreen, so brushing a card to scroll never lights it up. Hover is added
   only for real pointer devices below. */
.service.is-open .cv { opacity: 1; transform: scale(1); }
.service.is-open .c-veil {
  background:
    radial-gradient(150% 120% at 6% 30%, rgba(6, 6, 6, 0.50) 0%, rgba(6, 6, 6, 0.26) 44%, transparent 70%),
    linear-gradient(180deg, rgba(6, 6, 6, 0.44) 0%, rgba(6, 6, 6, 0.58) 46%, rgba(6, 6, 6, 0.88) 100%);
}
.service.is-open .c-veil::before { opacity: 1; }
.service.is-open .c-veil::after {
  box-shadow: inset 0 0 0 1px rgba(255, 120, 70, 0.28), inset 0 -46px 64px -34px rgba(255, 77, 46, 0.28);
}
@media (hover: hover) {
  .service:hover .cv { opacity: 1; transform: scale(1); }
  .service:hover .c-veil {
    background:
      radial-gradient(150% 120% at 6% 30%, rgba(6, 6, 6, 0.50) 0%, rgba(6, 6, 6, 0.26) 44%, transparent 70%),
      linear-gradient(180deg, rgba(6, 6, 6, 0.44) 0%, rgba(6, 6, 6, 0.58) 46%, rgba(6, 6, 6, 0.88) 100%);
  }
  .service:hover .c-veil::before { opacity: 1; }
  .service:hover .c-veil::after {
    box-shadow: inset 0 0 0 1px rgba(255, 120, 70, 0.28), inset 0 -46px 64px -34px rgba(255, 77, 46, 0.28);
  }
}
/* belt-and-suspenders legibility over the brightest ember frames */
.service .service-title, .service .service-desc { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.service .service-vis-label { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
@media (prefers-reduced-motion: reduce) {
  .service .cv { transform: none !important; transition: opacity 0.3s linear; }
}
/* No card video/poster backdrop on touch or narrow screens (the mp4 src is also dropped in JS so it never fetches) */
@media (hover: none), (pointer: coarse), (max-width: 640px) {
  .service .cv { display: none; }
}

/* ---------- Work (dash grid + verteal hover) ---------- */
#work > .container { padding-inline: clamp(0.75rem, 1.4vw, 1.25rem); }
.work-grid {
  display: flex;
  flex-wrap: wrap;
  --colgap: clamp(1rem, 2vw, 1.5rem);
  gap: clamp(1.75rem, 3vw, 2.5rem) var(--colgap);
}
.work-card { text-decoration: none; color: inherit; display: block; min-width: 0; }
.work-card--w7 { flex: 0 0 calc((100% - var(--colgap)) * 7 / 12); }
.work-card--w5 { flex: 0 0 calc((100% - var(--colgap)) * 5 / 12); }
.work-card--w12 { flex: 0 0 100%; }

.work-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: clamp(340px, 34vw, 560px);
  background: var(--panel);
}
.work-card--w5 .work-media { aspect-ratio: 1 / 1; }
.work-card--w12 .work-media { aspect-ratio: 21 / 9; }

.cover {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 90% at 78% 10%, color-mix(in srgb, var(--ca) 24%, transparent), transparent 62%),
    linear-gradient(155deg, #141414, #070707 65%);
  transform: scale(1.001);
  transition: transform 0.45s var(--ease-css);
}
/* each cover carries the visitor ring in its accent */
.cover::before {
  content: '';
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--ca) 75%, transparent);
  border-radius: 50%;
  right: -14%;
  top: -20%;
  box-shadow: 0 0 90px -24px var(--ca);
}
.cover-letter {
  position: absolute;
  left: 3%;
  bottom: -14%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14vw;
  line-height: 0.75;
  color: rgba(255, 255, 255, 0.92);
}
@supports (font-size: 1cqh) {
  .cover-letter { font-size: 82cqh; }
}
.cover--halyard    { --ca: #FF4D2E; }
.cover--marrow     { --ca: #FFB703; }
.cover--sundog     { --ca: #3B82F6; }
.cover--fieldnote  { --ca: #06D6A0; }
.cover--wintergreen{ --ca: #8338EC; }
/* real photographic cover (used by case studies with imagery) */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 0.45s var(--ease-css); }
.work-card:hover .cover-img { transform: scale(1.03); }

.work-card:hover .cover { transform: scale(1.03); }
.work-chip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s var(--ease-css), transform 0.25s var(--ease-css);
  z-index: 2;
}
.work-chip svg { width: 13px; height: 13px; }
.work-card:hover .work-chip { opacity: 1; transform: scale(1); }

.work-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.35rem;
}
.work-name { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.work-tags { font-size: 0.75rem; font-weight: 300; letter-spacing: 0.08em; color: var(--text-muted); }
.work-desc {
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 52ch;
}

/* ---------- Stats (armory light numerals) ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.stat {
  padding: 2rem var(--gutter) 2.25rem;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat-value {
  font-size: clamp(3.25rem, 6.5vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-label {
  margin-top: 1.4rem;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  max-width: 26ch;
  line-height: 1.6;
}

/* ---------- Process (verteal numbered cards + checkerboard) ---------- */
/* ---------- Process: hover-expand chapter accordion ---------- */
.ps-track { display: flex; gap: 12px; height: clamp(300px, 40vh, 360px); }
.ps-item { flex: 1 1 0; min-width: 0; display: flex; }
.ps-track.js .ps-item { transition: flex-grow 0.6s var(--ease-css); }
.ps-panel {
  position: relative; flex: 1 1 auto; width: 100%; min-width: 0; overflow: hidden;
  text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  cursor: pointer; color: inherit; font: inherit; -webkit-appearance: none; appearance: none;
  transition: background 0.5s var(--ease-css), border-color 0.5s var(--ease-css), box-shadow 0.6s var(--ease-css);
}
.ps-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* big ghost numeral fills the panel */
.ps-ghost {
  position: absolute; right: -0.06em; bottom: -0.22em; z-index: 0; pointer-events: none;
  font-size: clamp(10rem, 30vh, 17rem); font-weight: 600; line-height: 0.78; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.05);
  transition: color 0.55s var(--ease-css), transform 0.7s var(--ease-css), opacity 0.55s var(--ease-css);
}
/* warm accent bloom on the open panel */
.ps-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 12% 108%, rgba(255, 77, 46, 0.22), transparent 60%);
  opacity: 0; transition: opacity 0.6s var(--ease-css);
}
.ps-rail {
  position: absolute; top: 0; left: 0; z-index: 3; height: 3px; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform 0.6s var(--ease-css), opacity 0.4s var(--ease-css);
}
.ps-num {
  position: absolute; top: 22px; left: 26px; z-index: 2; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--accent); transition: color 0.4s var(--ease-css);
}
.ps-vert {
  position: absolute; left: 26px; bottom: 26px; z-index: 2; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 1.1rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-body); white-space: nowrap;
  transition: opacity 0.35s var(--ease-css);
}
.ps-body {
  position: absolute; top: 58px; left: 26px; right: 26px; z-index: 2; display: flex; flex-direction: column;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.5s var(--ease-css) 0.05s, transform 0.5s var(--ease-css) 0.05s;
}
.ps-title { font-size: clamp(1.4rem, 1.9vw, 1.85rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--text); }
.ps-title::after { content: ''; display: block; width: 34px; height: 1px; background: var(--accent); margin: 1rem 0 1.15rem; }
.ps-desc { font-size: 1.02rem; line-height: 1.55; color: var(--text-body); max-width: 34ch; }
/* JS-enhanced accordion states */
.ps-track.js .ps-panel .ps-body { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ps-track.js .ps-panel:not(.is-open) .ps-vert { opacity: 1; }
.ps-track.js .ps-item:has(.is-open) { flex-grow: 3.6; }
.ps-track.js .ps-panel.is-open { background: #100f0e; border-color: rgba(255, 120, 70, 0.28); box-shadow: 0 0 70px -40px var(--accent-deep); }
.ps-track.js .ps-panel.is-open .ps-glow { opacity: 1; }
.ps-track.js .ps-panel.is-open .ps-ghost { color: rgba(255, 77, 46, 0.13); transform: translateY(-4%); }
.ps-track.js .ps-panel.is-open .ps-vert { opacity: 0; }
.ps-track.js .ps-panel.is-open .ps-body { opacity: 1; transform: none; pointer-events: auto; }
.ps-track.js .ps-panel.is-open .ps-rail { transform: scaleX(1); opacity: 1; }
.ps-track.js .ps-panel.is-open .ps-num { color: var(--accent); }
@supports not (selector(:has(*))) { .ps-track.js .ps-item:first-child { flex-grow: 3.6; } }
/* touch / no-hover: stack every step open and legible */
@media (hover: none), (pointer: coarse) {
  .ps-track, .ps-track.js { flex-direction: column; height: auto; gap: 12px; }
  .ps-item, .ps-track.js .ps-item, .ps-track.js .ps-item:has(.is-open) { flex: 1 1 auto; }
  /* Smooth on touch: only cheap/composited things animate. No box-shadow blur
     (per-frame repaint) and no max-height (overshoots + reflows) — the height
     uses grid-template-rows 0fr->1fr and the glow is a composited opacity layer. */
  .ps-panel { min-height: 0; contain: layout; transition: border-color 0.4s var(--ease-css); }
  .ps-vert { display: none; }
  .ps-num { font-size: 0.95rem; }
  .ps-ghost { font-size: clamp(5.5rem, 26vw, 9rem); will-change: transform; transition: transform 0.5s var(--ease-css); }
  .ps-title::after { display: none; }
  /* number (top-left) + title always show; the description collapses. Tap a step
     to open it — it expands and lights up while the others close. */
  .ps-body, .ps-track.js .ps-panel .ps-body {
    position: relative; top: auto; left: auto; right: auto; opacity: 1; transform: none; pointer-events: auto;
    padding: 3.2rem 1.6rem 1.4rem;
    display: grid; grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.5s var(--ease-css);
  }
  .ps-desc {
    overflow: hidden; min-height: 0; opacity: 0; padding-top: 0.95rem;
    transition: opacity 0.4s var(--ease-css);
  }
  .ps-track.js .ps-panel .ps-rail { transform: scaleX(0); opacity: 0; }
  .ps-panel:not(.is-open) .ps-num { color: var(--text-muted); }
  .ps-track.js .ps-panel.is-open { box-shadow: none; }
  .ps-track.js .ps-panel.is-open .ps-body { grid-template-rows: auto 1fr; }
  .ps-track.js .ps-panel.is-open .ps-desc { opacity: 1; }
  .ps-track.js .ps-panel.is-open .ps-rail { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-panel, .ps-item, .ps-body, .ps-vert, .ps-ghost, .ps-rail, .ps-glow { transition: none !important; }
}

/* ---------- Ambient glows — vermilion light bleeding across seams ---------- */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  animation: glow-breathe var(--breathe, 8s) ease-in-out infinite;
  will-change: opacity, transform;
}
.section > .container { position: relative; }

/* slow inhale/exhale: the light swells and recedes */
@keyframes glow-breathe {
  0%   { opacity: 0.4;  transform: translate3d(0, 0, 0) scale(0.82); }
  50%  { opacity: 1;    transform: translate3d(2%, -2.5%, 0) scale(1.18); }
  100% { opacity: 0.4;  transform: translate3d(0, 0, 0) scale(0.82); }
}

.glow--services {
  top: -7rem;
  left: 32%;
  width: 58rem;
  height: 40rem;
  background: radial-gradient(closest-side, rgba(255, 77, 46, 0.2), transparent 70%);
  --breathe: 12s;
  animation-delay: -2s;
}
.glow--manifesto {
  top: -12rem;
  left: -16rem;
  width: 60rem;
  height: 48rem;
  background: radial-gradient(closest-side, rgba(255, 45, 0, 0.26), transparent 70%);
  --breathe: 9s;
}
.glow--work {
  top: -10rem;
  right: -18rem;
  width: 66rem;
  height: 52rem;
  background: radial-gradient(closest-side, rgba(255, 77, 46, 0.22), transparent 70%);
  --breathe: 11s;
  animation-delay: -4s;
}
.glow--process {
  top: -5rem;
  left: -16rem;
  width: 56rem;
  height: 50rem;
  background: radial-gradient(closest-side, rgba(255, 123, 0, 0.18), transparent 70%);
  --breathe: 10s;
  animation-delay: -6s;
}
.glow--plans {
  top: 18%;
  right: -14rem;
  width: 56rem;
  height: 64rem;
  background: radial-gradient(closest-side, rgba(255, 45, 0, 0.26), transparent 70%);
  --breathe: 10.5s;
  animation-delay: -3s;
}
.glow--cta {
  bottom: -13rem;
  left: 50%;
  margin-left: -42rem;
  width: 84rem;
  height: 50rem;
  background: radial-gradient(closest-side, rgba(255, 45, 0, 0.36), transparent 72%);
  --breathe: 8.5s;
  animation-delay: -1s;
}

/* the ambient field behind the glass cards — strongest, most alive */
.glow--ambient-a {
  top: -10rem;
  left: 4%;
  width: 52rem;
  height: 44rem;
  background: radial-gradient(closest-side, rgba(255, 45, 0, 0.44), transparent 70%);
  --breathe: 7s;
}
.glow--ambient-b {
  bottom: -9rem;
  right: 0%;
  width: 60rem;
  height: 48rem;
  background: radial-gradient(closest-side, rgba(255, 123, 0, 0.34), transparent 70%);
  --breathe: 9.5s;
  animation-delay: -4s;
}
.glow--ambient-c {
  top: 28%;
  left: 36%;
  width: 38rem;
  height: 34rem;
  background: radial-gradient(closest-side, rgba(255, 77, 46, 0.32), transparent 70%);
  --breathe: 8s;
  animation-delay: -6s;
}

/* ---------- Testimonials (dash glass over ambient light) ---------- */
.testis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.testi {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  transition: background-color 0.3s var(--ease-css);
}
.testi:hover { background: rgba(255, 255, 255, 0.07); }
.testi-quote {
  font-size: 1.25rem;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.testi-who {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---------- Pricing (verteal sticky intro + glow card) ---------- */
.pricing-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pricing-intro { position: sticky; top: 7rem; }
.pricing-sub {
  margin-top: 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 38ch;
}
.plans { display: flex; flex-direction: column; gap: 1rem; }
.plan {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2.5rem;
}
.plan--featured {
  border-color: rgba(255, 77, 46, 0.3);
  box-shadow: inset 0 0 100px rgba(255, 45, 0, 0.35);
}
.plan-badge {
  position: absolute;
  top: 2.7rem;
  right: 2.5rem;
  color: var(--accent);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}
.plan-name {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.12em;
}
.plan-price {
  margin-top: 1.1rem;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-per {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.3em;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-left: 0.6em;
}
/* no-price reformat: an editorial phrase instead of a dollar amount */
.plan-price--phrase {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  color: var(--text);
}
.plan-desc {
  margin-top: 1.1rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 46ch;
}
.plan-features { margin: 2rem 0 2.5rem; }
.plan-features li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--text-body);
}
.plan-features li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- FAQ ---------- */
.faq-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq-note {
  margin-top: 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 32ch;
}
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq-icon { position: relative; width: 15px; height: 15px; flex: none; }
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: transform 0.35s var(--ease-osmo);
}
.faq-icon::before { left: 0; right: 0; top: 6.5px; height: 2px; }
.faq-icon::after { top: 0; bottom: 0; left: 6.5px; width: 2px; }
.faq-item.is-open .faq-icon::after { transform: scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-osmo);
}
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a p {
  padding-bottom: 1.6rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 56ch;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(5rem, 9vw, 8.5rem); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-scarcity {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.12em;
}
.cta-title {
  margin-top: 2rem;
  font-size: clamp(3.4rem, 10vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cta-sub {
  margin-top: 2rem;
  color: var(--text-muted);
  max-width: 44ch;
  line-height: 1.6;
}
.cta-actions { margin-top: 3rem; }

/* ---------- Footer (verteal fixed vermilion reveal) ---------- */
.footer-spacer { height: 86vh; }

.the-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86vh;
  z-index: 0;
  background: var(--accent-deep);
  color: var(--footer-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.footer-veil {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
}
.footer-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(2.5rem, 6vh, 4.5rem);
  padding-top: 8vh;
  padding-bottom: 2.5rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
}
.footer-nav { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.footer-nav a {
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9375rem;
}
.footer-email {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  text-decoration: none;
  line-height: 1.1;
}
.footer-email:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-meta .mono { font-size: 0.75rem; letter-spacing: 0.08em; opacity: 0.75; }
.footer-mid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.footer-tagline { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.02em; }
.footer-legal { font-size: 0.6875rem; letter-spacing: 0.08em; opacity: 0.75; white-space: nowrap; }
.footer-mark {
  position: relative;
  z-index: 2;
  display: block;
  width: 94%;
  margin-inline: auto;
  transform: translateY(4%);
}

/* ---------- Grain (armory noise film) ---------- */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(5) infinite;
}
@keyframes grain-shift {
  0%   { background-position: 0 0; }
  20%  { background-position: -18px 12px; }
  40%  { background-position: 12px -16px; }
  60%  { background-position: -8px -8px; }
  80%  { background-position: 16px 8px; }
  100% { background-position: 0 0; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
  .pricing-wrap, .faq-wrap { grid-template-columns: 1fr; }
  .pricing-intro { position: static; margin-bottom: 1rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-right .btn { display: none; }

  .hero-foot { grid-template-columns: 1fr; gap: 0.5rem; }
  .hero-foot-center, .hero-foot-right { text-align: left; }

  .work-card--w7, .work-card--w5, .work-card--w12 { flex-basis: 100%; }
  .work-card--w5 .work-media, .work-card--w12 .work-media { aspect-ratio: 4 / 3; }

  .testis-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }  /* 3 tiles stack cleanly; 2-col left a ragged orphan */
  .stat { border-left: 0; border-top: 1px solid var(--line); }  /* stacked: every tile divided from the one above */
  .stat:first-child { border-top: 0; }         /* the section's own border-block draws this edge */

  .section-head--split { flex-direction: column; align-items: flex-start; }
  .section-note { text-align: left; }

  .footer-top { flex-direction: column; }
  .footer-meta { text-align: left; }
  .footer-mid { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .the-footer, .footer-spacer { height: 92vh; }
}

@media (max-width: 640px) {
  .glow { opacity: 0.75; }
  .hero-title { white-space: normal; font-size: clamp(2.6rem, 12vw, 4rem); }
  .services-grid { grid-template-columns: 1fr; }
  .service { min-height: 0; padding: 1.9rem 1.5rem 2rem; }
  .service-arrow { opacity: 1; transform: scale(1); }
  .service-title { margin-top: 2rem; }
  .service-split { grid-template-columns: 1fr; }
  .plan { padding: 1.75rem 1.5rem; }
  .plan-badge { top: 1.85rem; right: 1.5rem; }
  .benefit { flex-direction: column; gap: 0.3rem; }
  .benefit-note { text-align: left; }
  .footer-legal { white-space: normal; }
  /* subpage heroes: trim the tall top gap so content sits higher on a phone */
  .section.page-hero { padding-top: 7.5rem; padding-bottom: 2rem; }
  .cover-letter { font-size: 30vw; }
  @supports (font-size: 1cqh) {
    .cover-letter { font-size: 82cqh; }
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .glow, .hero-glow { animation: none; opacity: 0.85; }
  .services-beam::before, .services-beam::after { animation: none; }
  .nav-link .ch { transition: none; }
  .mobile-menu, .mobile-link, .faq-a, .faq-icon::before, .faq-icon::after, .service-arrow svg { transition-duration: 0.01s; }
  .btn:hover .btn-chip svg { animation: none; }
  .cover, .work-chip, .service-arrow { transition-duration: 0.01s; }
}