/* ==========================================================================
   Gotchaa Lab design system
   Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3
   Color pass (2026-08-05): the page read as near white, so the indigo family
   now also appears as surfaces: hero and page-head washes, solid eyebrow
   chips, deeper tints, footer gradient. Still one accent, no new hues.
   Premium pass (2026-08-05): larger display scale, wider section rhythm,
   lift on buttons and cards, edge fades on the logo rail, glass highlight
   on the hero media. Then to 7/6/3: hero media bleeds to the viewport edge,
   CTA band goes asymmetric, hero enters from the side with a slow photo
   drift, icon chips nudge on card hover.

   Locks (do not break these without updating this header):
   - ACCENT LOCK      one accent, indigo #4361EE. Violet #6355EA appears only as
                      the second stop of the brand gradient, never as a standalone
                      accent. No third accent anywhere on any page.
   - SHAPE LOCK       cards 16px, controls (buttons/inputs) 10px, pills 999px.
   - THEME LOCK       one theme per page render. Auto from prefers-color-scheme,
                      overridable by the toggle. No section inverts mid page.
   ========================================================================== */

/* ---------- Fonts (self hosted, no external font requests) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Indigo taken from the Gotchaa Lab brand, darkened one step from #4F6EF6.
     The original sits at 4.29:1 against white, which fails WCAG AA for the
     small text it is used on (eyebrows, category labels, price figures) and
     for white button labels. #4361EE clears 5.0:1 both ways. */
  --accent:        #4361EE;
  --accent-2:      #6355EA;
  --accent-soft:   #E4E9FD;
  --accent-ring:   rgba(67, 97, 238, 0.32);
  --on-accent:     #FFFFFF;

  /* Brand gradient surfaces (CTA band, feature tile, logo mark). These carry
     hardcoded white text, so they must NOT follow the accent when it lightens
     for dark mode. Held at the deep indigo in both themes: white on #4361EE is
     5.02:1, where white on the dark-mode accent #7D93FF is only 2.8:1. */
  --brand-1: #4361EE;
  --brand-2: #6355EA;

  /* Accent darkened toward text, for small accent text sitting on the tinted
     indigo surfaces below. Plain --accent lands at 4.2 to 4.4:1 there, under
     AA. The mix recomputes per theme, so dark mode gets a lighter ink. */
  --accent-ink: color-mix(in srgb, var(--accent) 82%, var(--text));

  --bg:            #FFFFFF;
  --bg-tint:       #F3F5FE;
  --surface:       #FFFFFF;
  --surface-2:     #F0F0FE;
  --border:        #E6E8F5;
  --border-strong: #D4D9F0;

  --text:          #0F172A;
  --text-muted:    #4B5563;
  /* Darkened from #6B7280 so small faint text keeps AA on the deeper tints. */
  --text-faint:    #5D6675;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(37, 52, 122, 0.18);
  --shadow-lg: 0 28px 64px -24px rgba(37, 52, 122, 0.28);

  --r-card: 16px;
  --r-ctl:  10px;
  --r-pill: 999px;

  --container: 1200px;
  --nav-h: 68px;
  /* VISUAL_DENSITY 3: gallery rhythm. Sections breathe, the page feels
     expensive because nothing crowds anything. */
  --section-y: clamp(5.5rem, 9vw, 8.75rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 0.3s var(--ease);

  --z-nav: 50;
  --z-menu: 60;
}

:root[data-theme="dark"] {
  --accent:        #7D93FF;
  --accent-2:      #9186FF;
  --accent-soft:   #1C2652;
  --accent-ring:   rgba(125, 147, 255, 0.38);
  --on-accent:     #0B1020;

  --bg:            #0B1020;
  --bg-tint:       #101736;
  --surface:       #131A2E;
  --surface-2:     #171E36;
  --border:        #242D4A;
  --border-strong: #33406A;

  --text:          #E9ECF7;
  --text-muted:    #AEB7D4;
  --text-faint:    #8A94B5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #7D93FF;
    --accent-2:      #9186FF;
    --accent-soft:   #1A2246;
    --accent-ring:   rgba(125, 147, 255, 0.38);
    --on-accent:     #0B1020;

    --bg:            #0B1020;
    --bg-tint:       #0E1428;
    --surface:       #131A2E;
    --surface-2:     #171E36;
    --border:        #242D4A;
    --border-strong: #33406A;

    --text:          #E9ECF7;
    --text-muted:    #AEB7D4;
    --text-faint:    #8A94B5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .wrap { padding-inline: 2rem; } }

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

.stack   { display: grid; gap: 1rem; }
.stack-2 { display: grid; gap: 1.5rem; }

/* ---------- Typography ---------- */
.display {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 620;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.28;
  letter-spacing: -0.018em;
  font-weight: 600;
}
.h4 { font-size: 1.03rem; line-height: 1.35; letter-spacing: -0.012em; font-weight: 600; }

.lead { font-size: clamp(1.03rem, 0.98rem + 0.28vw, 1.19rem); color: var(--text-muted); max-width: 60ch; line-height: 1.62; }
.body { color: var(--text-muted); max-width: 65ch; }
.small { font-size: 0.875rem; color: var(--text-faint); }

.mono { font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }

/* Eyebrow. Rationed: max 1 per 3 sections per page. Solid chip: white on the
   accent is 5.0:1, which holds on any surface the chip sits over. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Icons ---------- */
.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.ico-lg { width: 26px; height: 26px; }

/* ---------- Buttons (SHAPE LOCK: --r-ctl) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;          /* CTA labels never wrap */
  padding: 0.72rem 1.25rem;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform 0.12s var(--ease), box-shadow var(--t);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-2);
  box-shadow: 0 12px 26px -10px var(--accent-ring);
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--lg { padding: 0.9rem 1.6rem; font-size: 1rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 550;
  font-size: 0.94rem;
}
.link-arrow .ico { transition: transform var(--t); }
.link-arrow:hover .ico { transform: translateX(3px); }

/* ---------- Pills / badges (SHAPE LOCK: --r-pill, small elements only) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.005em;
}
.pill--quiet {
  background: transparent;
  color: var(--text-faint);
  border-color: var(--border);
}

/* ---------- Card (SHAPE LOCK: --r-card) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.6rem;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card--hover:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ==========================================================================
   Navigation. Single line at desktop, height capped at 68px.
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--bg); } }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 620; letter-spacing: -0.028em; font-size: 1.06rem; }
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center;
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  flex: none;
}

.nav__links { display: none; align-items: center; gap: 0.35rem; }
@media (min-width: 940px) { .nav__links { display: flex; } }

.nav__link {
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-ctl);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--t), background var(--t);
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 560; }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__cta { display: none; }
@media (min-width: 940px) { .nav__cta { display: inline-flex; } }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-ctl);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav__burger { display: grid; }
@media (min-width: 940px) { .nav__burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: var(--z-menu);
  background: var(--bg);
  padding: 1.5rem 1.25rem 2rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  overflow-y: auto;
}
.drawer[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
.drawer a {
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.06rem;
  font-weight: 500;
}
.drawer .btn { margin-top: 1.25rem; }

/* ==========================================================================
   Section headers
   ========================================================================== */
.sec-head { display: grid; gap: 0.9rem; margin-bottom: clamp(2.75rem, 5vw, 3.75rem); max-width: 62ch; }

/* ==========================================================================
   HERO. Asymmetric split, VARIANCE 5.
   ========================================================================== */
.hero {
  position: relative;
  /* isolate makes the z-index:-1 orbs paint above this gradient instead of
     disappearing behind it (negative z-index escapes a plain positioned box). */
  isolation: isolate;
  padding-top: clamp(3rem, 5vw, 5.5rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-soft), var(--bg) 72%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -12%;
  width: 62vw; height: 62vw;
  max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -35%; left: -14%;
  width: 50vw; height: 50vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 66%);
  pointer-events: none;
  z-index: -1;
}
.hero__grid { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 1.18fr 0.82fr; gap: 3.25rem; }
}

/* Hero headline is six words, so it sits a step below the global display
   scale. Sized against the copy column so it always lands on two lines. */
.hero .display { font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.5rem); }
/* No justify-items:start here. In a grid that sizes every child to its own
   max-content, which shrink wraps the headline and forces a third line. */
.hero__copy { display: grid; gap: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* VARIANCE 7: on wide screens the media breaks the container and bleeds to
   the viewport's right edge. The offset equals the container margin plus the
   wrap padding, so the left edge stays on grid. */
@media (min-width: 1240px) {
  .hero__media {
    /* The extra 24px overshoots past the scrollbar-width error in 100vw;
       the hero's overflow:hidden clips it flush to the viewport edge. */
    margin-right: calc((var(--container) - 100vw) / 2 - 2rem - 24px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/* Thin light edge along the top of the frame, the physical-material cue. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* ==========================================================================
   Logo rail. Marquee is used ONCE per page, here only.
   ========================================================================== */
.rail { position: relative; border-block: 1px solid var(--border); background: var(--bg-tint); padding-block: 1.9rem; overflow: hidden; }
/* Logos fade in and out at the edges instead of clipping mid glyph. */
.rail::before, .rail::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(48px, 9vw, 120px);
  z-index: 1;
  pointer-events: none;
}
.rail::before { left: 0; background: linear-gradient(90deg, var(--bg-tint), transparent); }
.rail::after  { right: 0; background: linear-gradient(270deg, var(--bg-tint), transparent); }
.rail__label { text-align: center; font-size: 0.82rem; color: var(--text-faint); margin-bottom: 1.35rem; }
.rail__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  align-items: center;
  animation: rail 38s linear infinite;
}
.rail:hover .rail__track { animation-play-state: paused; }
.rail__track svg { height: 26px; width: auto; fill: var(--text-muted); opacity: 0.8; transition: opacity var(--t), fill var(--t); }
.rail__track svg:hover { opacity: 1; fill: var(--text); }
@keyframes rail { to { transform: translateX(-50%); } }

/* ==========================================================================
   Bento grid. Cell count always matches item count.
   ========================================================================== */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(4, 1fr); } }

.bento .cell { display: grid; align-content: start; gap: 0.7rem; }

/* Plain cells carry a light indigo surface so the grid never reads as a
   field of white boxes. Brand and photo cells keep their own treatments. */
.bento .cell:not(.cell--brand):not(.cell--photo) {
  background: linear-gradient(160deg, var(--surface-2), var(--accent-soft));
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
}
.cell__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 0.35rem;
  transition: transform var(--t);
}
.card--hover:hover .cell__icon { transform: translateY(-3px); }
/* On the tinted bento cells the soft chip would blend in, so it goes solid. */
.bento .cell__icon { background: var(--accent); color: var(--on-accent); }

/* Feature cells: wide, with real visual variation (gradient + photo) */
@media (min-width: 1020px) {
  .cell--wide  { grid-column: span 2; }
  .cell--full  { grid-column: span 4; }
  .cell--tall  { grid-row: span 2; }
}
.cell--brand {
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
  color: #fff;
}
.cell--brand .body, .cell--brand .small { color: rgba(255, 255, 255, 0.86); }
.cell--brand .cell__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }

.cell--photo { position: relative; overflow: hidden; padding: 0; min-height: 250px; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell--photo .cell__body {
  position: relative;
  display: grid;
  gap: 0.45rem;
  align-content: end;
  height: 100%;
  padding: 1.6rem;
  color: #fff;
  background: linear-gradient(to top, rgba(9, 13, 28, 0.9) 12%, rgba(9, 13, 28, 0.15) 68%);
}
.cell--photo .cell__body .body { color: rgba(255, 255, 255, 0.86); }

/* ==========================================================================
   Page head. Compact editorial header for interior pages. Deliberately a
   different family from the home hero so the two never read as the same block.
   ========================================================================== */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(165deg, var(--accent-soft), var(--bg-tint) 62%);
}
.page-head::before {
  content: "";
  position: absolute;
  top: -55%; right: -8%;
  width: 46vw; height: 46vw;
  max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%);
  pointer-events: none;
  z-index: -1;
}
/* 760px, not ch units: ch resolves against the 16px root here, which caps the
   column near 370px and squeezes every interior headline onto three lines. */
.page-head__inner { display: grid; gap: 1.1rem; max-width: 760px; }
/* Interior headlines run longer than the hero's six words, so they sit a
   step under the global display scale to hold at two lines. */
.page-head .display { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem); }
.page-head .lead { max-width: 56ch; }

/* ==========================================================================
   Service directory. One section, three labelled groups.
   ========================================================================== */
.svc-group + .svc-group { margin-top: 3.5rem; }
.svc-group__label {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 0.9rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.svc-group__label h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; }
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 680px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .svc-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.svc { display: grid; gap: 0.65rem; align-content: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
.svc ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; margin-top: 0.35rem; }
.svc li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; font-size: 0.88rem; color: var(--text-muted); }
.svc li .ico { width: 14px; height: 14px; color: var(--accent); margin-top: 0.38rem; }

/* ==========================================================================
   Engagement tiers. Card per range, not a hairline spec table.
   ========================================================================== */
.tiers { display: grid; gap: 1rem; }
@media (min-width: 680px)  { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { display: grid; gap: 0.5rem; align-content: start; }
.tier__range {
  font-family: "Geist Mono", monospace;
  font-size: 1.32rem; font-weight: 500; letter-spacing: -0.03em;
  color: var(--accent); line-height: 1.2;
}

/* ==========================================================================
   Stat stack. Big mono numbers, hairlines instead of card boxes.
   ========================================================================== */
.stats { display: grid; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 1.75rem 0; border-bottom: 1px solid var(--border); display: grid; gap: 0.3rem; }
@media (min-width: 760px) {
  .stat { padding: 2rem 1.5rem; border-bottom: none; border-left: 1px solid var(--border); }
  .stat:first-child { border-left: none; padding-left: 0; }
}
.stat__n { font-family: "Geist Mono", monospace; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.stat__l { font-size: 0.9rem; color: var(--text-muted); }

/* Full bleed brand band variant. Same surface family as the CTA band, so it
   does not count as a theme inversion. Labels stay solid white: at 0.9rem an
   alpha white on this indigo drops under the 4.5:1 AA line. */
.stats-band {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.stats-band .stats { border-top: 0; }
.stats-band .stat { border-color: rgba(255, 255, 255, 0.28); }
.stats-band .stat__n { color: #fff; }
.stats-band .stat__l { color: #fff; }

/* ==========================================================================
   Value list. Two column grouped, not a 10 row hairline table.
   ========================================================================== */
.values { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 760px) { .values { grid-template-columns: 1fr 1fr; } }
.value { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.value__tick {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-top: 2px; flex: none;
}
.value__tick .ico { width: 15px; height: 15px; }

/* ==========================================================================
   Work grid. Offset composition, not equal thirds.
   ========================================================================== */
.work-grid { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .work-grid { grid-template-columns: repeat(6, 1fr); } }

.work {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.work:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.work__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.work:hover .work__img img { transform: scale(1.04); }
.work__body { padding: 1.35rem 1.4rem 1.5rem; display: grid; gap: 0.55rem; align-content: start; }
.work__cat { font-size: 0.78rem; font-weight: 550; color: var(--accent-ink); letter-spacing: 0.01em; }

@media (min-width: 820px) {
  .work--feat { grid-column: span 4; }
  .work--feat .work__img { aspect-ratio: 16 / 8.4; }
  .work--half { grid-column: span 2; }
  .work--third { grid-column: span 3; }
  .work--full { grid-column: span 6; }
}

/* Catalogue grid. Auto fill so filtering reflows without leaving holes. */
.work-index {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.work-index[data-empty="true"] { display: none; }

/* ==========================================================================
   Quote rail. Horizontal scroll snap, not a stack of big cards.
   ========================================================================== */
.quotes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 380px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.quotes > * { scroll-snap-align: start; }
.quote { display: grid; gap: 1.1rem; align-content: start; }
.quote__mark { color: var(--accent); opacity: 0.5; }
.quote__mark .ico { width: 26px; height: 26px; }
.quote__text { font-size: 1rem; line-height: 1.6; color: var(--text); }
.quote__by { display: grid; gap: 0.1rem; padding-top: 0.3rem; border-top: 1px solid var(--border); }
.quote__name { font-weight: 560; font-size: 0.93rem; }
.quote__role { font-size: 0.83rem; color: var(--text-faint); }

/* ==========================================================================
   Process flow. Verb labels, no "Step 1 / Step 2".
   ========================================================================== */
.flow { display: grid; gap: 1.75rem; counter-reset: none; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }
.flow__item { display: grid; gap: 0.7rem; align-content: start; padding-top: 1.5rem; border-top: 2px solid var(--accent); }
.flow__item:nth-child(2), .flow__item:nth-child(3) {
  border-top-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong));
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: var(--r-card);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  color: #fff;
  display: grid;
  gap: 1.5rem;
}
.cta-band .h2 { color: #fff; }
.cta-band .lead { color: rgba(255, 255, 255, 0.9); }
/* VARIANCE 7: asymmetric split at desktop. Copy left, stacked buttons right. */
@media (min-width: 900px) {
  .cta-band { grid-template-columns: 1.5fr auto; column-gap: 3.5rem; align-items: center; }
  .cta-band .hero__actions {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    min-width: 240px;
  }
}
.cta-band .btn--primary { background: #fff; color: #23306B; }
.cta-band .btn--primary:hover { background: rgba(255, 255, 255, 0.9); box-shadow: none; }
.cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  font-weight: 550;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--accent); transition: transform var(--t); }
.faq details[open] summary .ico { transform: rotate(90deg); }
.faq__a { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 72ch; }

/* ==========================================================================
   Forms. Label above input, helper below, error below that.
   ========================================================================== */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.88rem; font-weight: 550; color: var(--text); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  padding: 0.72rem 0.85rem;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.field__help { font-size: 0.8rem; color: var(--text-faint); }
.field__err { font-size: 0.82rem; color: #C2384B; display: none; }
:root[data-theme="dark"] .field__err { color: #FF9AA8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field__err { color: #FF9AA8; } }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: #C2384B; }
.field[data-invalid="true"] .field__err { display: block; }

.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__status { display: none; padding: 0.85rem 1rem; border-radius: var(--r-ctl); font-size: 0.9rem; }
.form__status[data-state="sending"] { display: block; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.form__status[data-state="ok"]      { display: block; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--border); }
.form__status[data-state="error"]   { display: block; background: #FDECEF; color: #98283A; border: 1px solid #F3C9D1; }
:root[data-theme="dark"] .form__status[data-state="error"] { background: #2A1620; color: #FF9AA8; border-color: #4A2230; }

/* Skeleton for the loading state of the form submit */
.btn[data-busy="true"] { pointer-events: none; opacity: 0.7; }

/* ==========================================================================
   Contact details list
   ========================================================================== */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.35fr 0.85fr; gap: 4rem; align-items: start; } }
.contact-list { display: grid; gap: 1.4rem; }
.contact-item { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.contact-item .cell__icon { width: 40px; height: 40px; margin: 0; }

/* ==========================================================================
   Team / people
   ========================================================================== */
.people { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .people { grid-template-columns: repeat(4, 1fr); } }
.person__img { aspect-ratio: 1 / 1; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); margin-bottom: 0.9rem; }
.person__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--t); }
.person:hover .person__img img { filter: grayscale(0); }

/* ==========================================================================
   Timeline (about)
   ========================================================================== */
.timeline { display: grid; gap: 0; }
.tl { display: grid; gap: 0.4rem; padding: 1.5rem 0 1.5rem 1.75rem; border-left: 2px solid var(--border); position: relative; }
.tl::before {
  content: ""; position: absolute; left: -6px; top: 1.95rem;
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--accent);
}
.tl__y { font-family: "Geist Mono", monospace; font-size: 0.85rem; color: var(--accent-ink); font-weight: 500; }

/* ==========================================================================
   Empty state (used on filtered work grid)
   ========================================================================== */
.empty { display: none; text-align: center; padding: 4rem 1rem; }
.empty .cell__icon { margin: 0 auto 1rem; }
[data-work-grid][data-empty="true"] ~ .empty { display: block; }

/* Filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.chip {
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-tint), var(--accent-soft));
  padding-block: 3.25rem 2rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }
.footer__col { display: grid; gap: 0.7rem; align-content: start; }
.footer__col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); font-weight: 600; }
.footer__col a { font-size: 0.92rem; color: var(--text-muted); transition: color var(--t); }
.footer__col a:hover { color: var(--accent); }
.footer__bar {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-faint);
}

/* ==========================================================================
   Motion. MOTION_INTENSITY 4: entry reveal + hover only. IntersectionObserver
   driven, never a scroll listener. Fully disabled under reduced motion.
   ========================================================================== */
/* Scoped to .js so that without JavaScript the content is simply visible.
   Never hide content behind a script that might not run. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* MOTION 6: the hero media arrives from the side while the copy rises,
     so the load-in reads as choreography rather than one uniform fade. */
  .js .hero__media.reveal { transform: translateX(40px); }
  .js .hero__media.reveal.is-in { transform: none; }

  /* Slow drift on the hero photo. Communicates "live", not decoration. */
  .hero__media img { animation: hero-drift 24s ease-in-out infinite alternate; }
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail__track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.75rem; top: -100px;
  z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 0.7rem 1.1rem; border-radius: var(--r-ctl);
  transition: top var(--t);
}
.skip:focus { top: 0.75rem; }