/* ============================================================================
   STARINTEK — site.css
   Component & section styles for the website. Uses design-system.css tokens
   ONLY (var(--token)) — no hardcoded colours, spacing, radii, shadows, fonts.
   Loaded AFTER design-system.css.
   ========================================================================== */

/* ===========================================================================
   0. SHARED HELPERS
   ========================================================================== */
/* Contain the off-canvas drawer's transform without breaking sticky header.
   Clip on BOTH html and body: the drawer is position:fixed, so it escapes a
   body-only clip on real mobile browsers and lets the page shift sideways.
   `clip` (not `hidden`) does not create a scroll container, so sticky survives. */
html, body { overflow-x: clip; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-inverse);
  border-radius: var(--radius-md);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

/* Unconfirmed data — visible TODO flag (never publish invented numbers) */
.todo-flag {
  color: var(--color-warning-on-white);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-size: 0.9em;
  font-weight: var(--weight-semibold);
}
.todo-flag--inverse { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }

/* Scroll reveal — progressive enhancement: only hidden when JS is present,
   so no-JS visitors and crawlers always see the content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Inline "arrow" link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
}
.link-arrow svg { transition: transform var(--transition-fast); }
.link-arrow:hover svg { transform: translateX(3px); }

/* Section header block */
.section-head { margin-bottom: var(--space-10); }
.section-head h2 { margin-top: var(--space-2); }
.section-head .lead { margin-top: var(--space-3); }
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-heading); }
.brand__word {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark__hex { stroke: var(--color-primary); }
.brand-mark__star { fill: var(--color-accent); }

/* capability icons: brand hexagon frame + per-card glyph */
.cap-icon__glyph { stroke: var(--color-accent); fill: none; }
.cap-icon__solid { fill: var(--color-accent); stroke: none; }

/* ===========================================================================
   1. HEADER + NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-color: transparent; }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 72px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__link:hover { color: var(--color-primary); background: var(--color-bg-muted); }
.nav__chevron { transition: transform var(--transition-fast); }

/* Dropdown (CSS hover + keyboard focus-within) */
.nav__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 280px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
/* Mouse convenience via :hover; keyboard/touch/AT via JS .is-open (honest aria-expanded). */
.nav__item--menu:hover .nav__menu,
.nav__item--menu.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__item--menu:hover .nav__chevron,
.nav__item--menu.is-open .nav__chevron { transform: rotate(180deg); }
.nav__menu-list { list-style: none; margin: 0; padding: 0; }
.nav__menu-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav__menu-link:hover { background: var(--color-primary-50); color: var(--color-primary); }
.nav__menu-link--accent { color: var(--color-primary); font-weight: var(--weight-semibold); }
/* Divider above the specialized item — border on the list item (no invalid separator <li>) */
.nav__menu-divide { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }

.nav__cta { flex: none; }
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border: none; background: none;
  color: var(--color-heading);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav__burger:hover { background: var(--color-bg-muted); color: var(--color-primary); }

/* ---- Mobile drawer ---- */
.drawer__backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-heading) 45%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.drawer__backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 70;
  display: flex; flex-direction: column;
  width: min(88vw, 360px); height: 100dvh;
  padding: var(--space-5);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: none;
  color: var(--color-heading); border-radius: var(--radius-md); cursor: pointer;
}
.drawer__close:hover { background: var(--color-bg-muted); color: var(--color-primary); }
.drawer__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.drawer__group-trigger,
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-lg); font-weight: var(--weight-medium);
  color: var(--color-heading); background: none; border: none;
  text-align: left; cursor: pointer;
}
.drawer__link:hover, .drawer__group-trigger:hover { background: var(--color-bg-muted); color: var(--color-primary); }
.drawer__group-trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.drawer__sublist { list-style: none; margin: 0 0 var(--space-2); padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.drawer__sublist li { margin: 0; }
.drawer__sublist a {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-body); font-size: var(--text-base);
}
.drawer__sublist a:hover { background: var(--color-primary-50); color: var(--color-primary); }
.drawer__sublink--accent { color: var(--color-primary); font-weight: var(--weight-semibold); }
.drawer__cta { margin-top: var(--space-5); width: 100%; }

html.is-locked { overflow: hidden; }

/* ===========================================================================
   2. HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-20) var(--space-24);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--color-primary-50) 0%, transparent 60%),
    var(--color-bg);
}
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: 640px; }
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__title { max-width: 16ch; }
.hero__sub { margin-top: var(--space-6); font-size: var(--text-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* Hero composition — the single brand-gradient accent on the home screen */
.hero__visual { display: none; }
.hero__visual svg { width: 100%; max-width: 460px; height: auto; }
@media (min-width: 1024px) {
  .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }
  .hero__copy { max-width: none; }
  .hero__visual { display: grid; place-items: center; }
}
@media (max-width: 767px) {
  .hero { padding-block: var(--space-16) var(--space-20); }
  .hero__actions .btn { width: 100%; }
}

/* Hero composition — animate the individual pieces (transform/opacity only) */
.hero-viz { overflow: visible; }
.hero-viz .hv-core,
.hero-viz .hv-sat,
.hero-viz .hv-lattice { transform-box: fill-box; transform-origin: center; will-change: transform; }
.hv-core       { animation: hv-core-float    6s   ease-in-out infinite; }
.hv-sat--code  { animation: hv-sat-up        5s   ease-in-out infinite; }
.hv-sat--media { animation: hv-sat-down      5.6s ease-in-out infinite; }
.hv-lattice    { animation: hv-lattice-spin  60s  linear      infinite; }
.hv-connectors { animation: hv-connectors-pulse 4.5s ease-in-out infinite; }

@keyframes hv-core-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.015); }
}
@keyframes hv-sat-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes hv-sat-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes hv-lattice-spin {
  to { transform: rotate(360deg); }
}
@keyframes hv-connectors-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.18; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-core, .hv-sat, .hv-lattice, .hv-connectors { animation: none; }
}

/* ===========================================================================
   3. WHAT WE DO — capability cards
   ========================================================================== */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 600px)  { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
/* 5 capabilities: 3-up then a centred 2-up last row (no orphan cell) */
@media (min-width: 1024px) {
  .cap-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .cap-grid > li { flex: 0 1 calc((100% - 2 * var(--space-6)) / 3); }
}
.cap-card { display: flex; flex-direction: column; height: 100%; gap: var(--space-3); }
.cap-card__mark { width: 40px; height: 40px; margin-bottom: var(--space-2); }
.cap-card__mark .brand-mark { width: 40px; height: 40px; }
.cap-card__title { font-size: var(--text-xl); }
.cap-card__text { flex: 1; }
.cap-card__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.cap-card__more svg { transition: transform var(--transition-fast); }
.cap-card:hover .cap-card__more svg { transform: translateX(3px); }

/* ===========================================================================
   4. WHY STARINTEK
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8) var(--space-12); }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-item { position: relative; padding-left: var(--space-5); border-left: 2px solid var(--color-primary-100); }
.why-item h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }

/* ===========================================================================
   5. FEATURED WORK
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.work-card__media { aspect-ratio: 16 / 10; }

/* Differentiated card media — light brand panels + line-art motif.
   The full brand gradient is reserved for the hero and CTA button (1 accent / screen). */
.card-media { position: relative; display: grid; place-items: center; overflow: hidden; }
.card-viz { width: 62%; height: auto; }
.card-media--1 { background: var(--color-primary-50);  color: var(--color-primary); }
.card-media--2 { background: var(--color-bg-subtle);   color: var(--color-navy); }
.card-media--3 { background: var(--color-primary-100); color: var(--color-primary-hover); }
.card-media--4 { background: var(--color-primary-50);  color: var(--color-accent); }
.work-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.work-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); }
.work-card__title { font-size: var(--text-lg); }
.work-card__metric { margin-top: var(--space-1); font-weight: var(--weight-semibold); color: var(--color-heading); }

/* ===========================================================================
   6. STATS ROW (navy band)
   ========================================================================== */
.stats-eyebrow { color: var(--color-accent); }
.stats-title { margin-top: var(--space-2); margin-bottom: var(--space-10); }
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
@media (min-width: 768px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat__value { color: var(--color-inverse); }
.stat__label { color: var(--color-inverse-muted); margin-top: var(--space-1); }

/* ===========================================================================
   7. TESTIMONIAL
   ========================================================================== */
.quote {
  position: relative; max-width: 760px; margin-inline: auto; text-align: center;
  padding: var(--space-12) var(--space-10) var(--space-10);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.quote__mark {
  position: absolute; top: var(--space-4); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 5rem; /* decorative glyph, intentionally above the type scale */
  line-height: 1;
  color: var(--color-primary-100);
}
.quote__text {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  color: var(--color-heading);
}
.quote__avatar {
  width: 56px; height: 56px; margin: var(--space-8) auto var(--space-3);
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary);
}
.quote__avatar .brand-mark { width: 28px; height: 28px; }
.quote__avatar .brand-mark__hex { stroke: var(--color-primary); }
.quote__avatar .brand-mark__star { fill: var(--color-primary); }
.quote__cite { font-size: var(--text-sm); color: var(--color-muted); }

/* ===========================================================================
   8. HOW WE WORK — steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-8); list-style: none; padding: 0; margin: 0; counter-reset: step; }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--color-primary-100); }
/* connecting "process track": brand fill drawn over the faint baseline, with a
   milestone node at each stage — animates left→right so 01→04 reads as one flow */
.step::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto 0;
  height: 2px;
  background: var(--color-primary);
  transform-origin: left center;
}
.step::after {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg-subtle); /* lift the node off the line */
}
/* progressive enhancement: collapsed until the row scrolls into view */
.js .step::before {
  transform: scaleX(0);
  transition: transform var(--transition-slow);
  transition-delay: calc(var(--i, 0) * 160ms + 90ms);
}
.js .step::after {
  transform: scale(0);
  transition: transform var(--transition-base);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.js .step.is-revealed::before { transform: scaleX(1); }
.js .step.is-revealed::after  { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .step::before { transform: scaleX(1); transition: none; }
  .js .step::after  { transform: scale(1);  transition: none; }
}
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------------------
   8b. PROCESS TIMELINE (service pages) — vertical, card per stage.
   Each card reveals on its own as it scrolls into view; the brand spine
   draws down node→node, so the stages read as one continuous timeline.
   --------------------------------------------------------------------------- */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; max-width: 720px; }
/* faint continuous rail from first node to last */
.timeline::before {
  content: "";
  position: absolute;
  left: 19px; top: 20px; bottom: 20px;
  width: 2px;
  background: var(--color-primary-100);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}
.tl-item:last-child { padding-bottom: 0; }
/* brand fill segment connecting this node to the next */
.tl-item::after {
  content: "";
  position: absolute;
  left: 19px; top: 20px;
  width: 2px; height: 100%;
  background: var(--color-primary);
  transform-origin: top center;
}
.tl-item:last-child::after { display: none; }
/* numbered node sitting on the rail */
.tl-marker {
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: var(--color-inverse);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.tl-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* --- gradient fill + a distinct geometric pattern per stage -----------------
   Subtle by design: a gentle tint wash (NOT the loud brand gradient — §7.2
   keeps that to one big accent per screen) plus a faint brand-geometry texture
   masked to the right so copy always sits on a clean surface (AA preserved).
   Tints/patterns are token-based (color-mix over --color-surface) so they adapt
   to light/dark. nth-child(5n+x) cycles, so any number of stages is covered. */
.tl-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --tl-tint: var(--color-primary);
  --tl-pattern: color-mix(in srgb, var(--tl-tint) 22%, transparent);
  background: linear-gradient(135deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--tl-tint) 9%, var(--color-surface)) 100%);
}
.tl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 55%);
          mask-image: linear-gradient(to left, #000, transparent 55%);
  pointer-events: none;
}
.tl-card > * { position: relative; z-index: 1; }

/* 1 — Understand: dot grid */
.tl-item:nth-child(5n+1) .tl-card { --tl-tint: var(--color-primary); }
.tl-item:nth-child(5n+1) .tl-card::before {
  background-image: radial-gradient(var(--tl-pattern) 1.5px, transparent 1.6px);
  background-size: 16px 16px;
}
/* 2 — Plan: diagonal blueprint lines */
.tl-item:nth-child(5n+2) .tl-card { --tl-tint: var(--color-accent); }
.tl-item:nth-child(5n+2) .tl-card::before {
  background-image: repeating-linear-gradient(45deg,
    var(--tl-pattern) 0 1px, transparent 1px 12px);
}
/* 3 — Build: graph grid */
.tl-item:nth-child(5n+3) .tl-card { --tl-tint: var(--color-primary); }
.tl-item:nth-child(5n+3) .tl-card::before {
  background-image:
    repeating-linear-gradient(0deg,  var(--tl-pattern) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, var(--tl-pattern) 0 1px, transparent 1px 18px);
}
/* 4 — Test: cross-hatch */
.tl-item:nth-child(5n+4) .tl-card { --tl-tint: var(--color-accent); }
.tl-item:nth-child(5n+4) .tl-card::before {
  background-image:
    repeating-linear-gradient(45deg,  var(--tl-pattern) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, var(--tl-pattern) 0 1px, transparent 1px 14px);
}
/* 5 — Launch & support: radiating rings */
.tl-item:nth-child(5n+5) .tl-card { --tl-tint: var(--color-primary); }
.tl-item:nth-child(5n+5) .tl-card::before {
  background-image: repeating-radial-gradient(circle at 100% 50%,
    var(--tl-pattern) 0 1px, transparent 1px 16px);
}

/* progressive enhancement: each stage animates in on scroll (per-card) */
.js .tl-item[data-reveal] { opacity: 1; transform: none; } /* container holds; pieces animate */
.js .tl-card {
  opacity: 0; transform: translateX(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js .tl-item.is-revealed .tl-card { opacity: 1; transform: none; }
.js .tl-marker {
  opacity: 0; transform: scale(0.5);
  background: var(--color-surface);
  border-color: var(--color-primary-100);
  color: var(--color-muted);
  transition: opacity var(--transition-base), transform var(--transition-base),
              background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.js .tl-item.is-revealed .tl-marker {
  opacity: 1; transform: none;
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-inverse);
}
.js .tl-item::after { transform: scaleY(0); transition: transform var(--transition-slow); }
.js .tl-item.is-revealed::after { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .js .tl-card { opacity: 1; transform: none; transition: none; }
  .js .tl-marker {
    opacity: 1; transform: none; transition: none;
    background: var(--color-accent); border-color: var(--color-accent); color: var(--color-inverse);
  }
  .js .tl-item::after { transform: scaleY(1); transition: none; }
}

/* ===========================================================================
   9. CTA BAND
   ========================================================================== */
.cta-band { background: var(--color-navy); color: var(--color-inverse-muted); padding-block: var(--space-20); position: relative; overflow: hidden; }
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; }
.cta-band__motif {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 360px; color: var(--color-inverse); opacity: 0.05; z-index: 0; pointer-events: none;
}
.cta-band__motif .brand-mark { width: 100%; height: auto; }
.cta-band__motif .brand-mark__hex { stroke: var(--color-inverse); }
.cta-band__motif .brand-mark__star { fill: var(--color-inverse); }
.cta-band__text {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  color: var(--color-inverse);
  margin-bottom: var(--space-8);
}
.cta-band__btn { box-shadow: var(--shadow-md); }

/* ===========================================================================
   10. FOOTER
   ========================================================================== */
/* Deeper navy + accent hairline so the footer reads as its own zone, not a continuation of the CTA band */
.site-footer { background: var(--color-navy-deep); color: var(--color-inverse-muted); border-top: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); }
.site-footer__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--space-12);
  padding-block: var(--space-20) var(--space-16);
}
@media (min-width: 768px)  { .site-footer__inner { grid-template-columns: 1.4fr 2.6fr; } }
.site-footer__brand .brand, .site-footer__brand .brand__word { color: var(--color-inverse); }
.site-footer__brand .brand-mark__hex { stroke: var(--color-accent); }
.site-footer__brand .brand-mark__star { fill: var(--color-inverse); }
.site-footer__tagline { margin-top: var(--space-4); max-width: 32ch; color: var(--color-inverse-muted); }
.site-footer__geo { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-inverse-muted); }
.site-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); list-style: none; padding: 0; }
.site-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-inverse-muted);
  background: color-mix(in srgb, var(--color-inverse) 8%, transparent);
  transition: color var(--transition-base), background var(--transition-base);
}
/* the "f" smoothly shifts to brand accent blue on hover/focus.
   Scoped under .site-footer__social to out-specify `.site-footer__col a:hover`. */
.site-footer__social .site-footer__social-link:hover,
.site-footer__social .site-footer__social-link:focus-visible {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-inverse) 14%, transparent);
}
.site-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer__heading {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-inverse); margin-bottom: var(--space-4);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col a { color: var(--color-inverse-muted); font-size: var(--text-sm); transition: color var(--transition-fast); }
.site-footer__col a:hover { color: var(--color-inverse); }
.site-footer__bar { border-top: 1px solid color-mix(in srgb, var(--color-inverse) 10%, transparent); }
.site-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between;
  padding-block: var(--space-6);
  font-size: var(--text-sm); color: var(--color-inverse-muted);
}
.site-footer__legal { color: var(--color-inverse-muted); opacity: 0.8; }

/* ===========================================================================
   12. SERVICE PAGES (shared template)
   ========================================================================== */
.service-hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-16) var(--space-20);
  background:
    radial-gradient(110% 90% at 100% 0%, var(--color-primary-50) 0%, transparent 58%),
    var(--color-bg);
}
.service-hero__inner { position: relative; z-index: 1; }
.service-hero__title { max-width: 18ch; margin-top: var(--space-5); }
.service-hero__lead { margin-top: var(--space-5); font-size: var(--text-xl); }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.service-hero__motif {
  position: absolute; top: 50%; right: -5%; transform: translateY(-50%);
  width: clamp(300px, 38vw, 540px); color: var(--color-primary); opacity: 0.08; z-index: 0; pointer-events: none;
}
.service-hero__motif .brand-mark { width: 100%; height: auto; }
.service-hero__motif .brand-mark__hex { stroke: var(--color-primary); }
.service-hero__motif .brand-mark__star { fill: var(--color-primary); }
@media (max-width: 767px) {
  .service-hero { padding-block: var(--space-12) var(--space-16); }
  .service-hero__motif { opacity: 0.05; right: -25%; }
  .service-hero__actions .btn { width: 100%; }
}

/* Bleed hero (Case Studies) — the brand motif flows past the hero and continues
   into the next section instead of being hard-clipped. Its upper part sits behind
   the opaque sticky header; the lower part drifts down over the section below.
   body{overflow-x:clip} still contains any horizontal spill. */
.service-hero--bleed { overflow: visible; }
.service-hero--bleed .service-hero__motif {
  top: auto; bottom: -90px; transform: none; opacity: 0.07;
}
@media (max-width: 767px) {
  .service-hero--bleed .service-hero__motif { bottom: -56px; opacity: 0.05; }
}
@media (prefers-reduced-motion: no-preference) {
  .service-hero--bleed .service-hero__motif { animation: hero-motif-drift-bleed 18s ease-in-out infinite; }
}
@keyframes hero-motif-drift-bleed {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Hero background motion — ambient and brand-led: the compass star turns slowly
   like a needle, the motif drifts, and an accent aura breathes behind the copy.
   transform/opacity only; fully suppressed under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .service-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(45% 55% at 88% 6%, var(--color-accent) 0%, transparent 60%);
    opacity: 0.05;
    will-change: opacity, transform;
    animation: hero-aura-breathe 12s ease-in-out infinite;
  }
  .service-hero__motif {
    will-change: transform;
    animation: hero-motif-drift 18s ease-in-out infinite;
  }
  .service-hero__motif .brand-mark__star {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    animation: hero-star-turn 60s linear infinite;
  }
}

@keyframes hero-aura-breathe {
  0%, 100% { opacity: 0.04; transform: scale(1); }
  50%      { opacity: 0.10; transform: scale(1.07); }
}
@keyframes hero-motif-drift {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 16px)); }
}
@keyframes hero-star-turn {
  to { transform: rotate(360deg); }
}

/* features grid */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit so 4-item grids fill the row (2×2 / 4-up) instead of a 3+1 orphan */
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.feature-item { display: flex; flex-direction: column; gap: var(--space-2); }
.feature-item__mark { width: 36px; height: 36px; margin-bottom: var(--space-2); }
.feature-item__mark .brand-mark { width: 36px; height: 36px; }
.feature-item__title { font-size: var(--text-lg); }

/* check list */
.check-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-body); }
.check-list__icon { flex: none; margin-top: 2px; color: var(--color-primary); }

/* models (two-up) */
.models-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }
.models-card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.models-card__best { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-body); }
.models-card__best-label { display: inline-block; font-weight: var(--weight-semibold); color: var(--color-primary); margin-right: var(--space-1); }

/* Two model cards: a gentle full-card gradient fill (no pattern) plus a small,
   crisp brand glyph in the corner. Tint per card so the pair reads distinct;
   token-based color-mix over --color-surface adapts to light/dark. The glyph
   inherits the card tint and sits behind the copy in an isolated context. */
.models-card--art {
  position: relative; overflow: hidden; isolation: isolate;
  --mc-tint: var(--color-primary);
  background: linear-gradient(135deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--mc-tint) 13%, var(--color-surface)) 100%);
}
.models-card--team { --mc-tint: var(--color-primary); }
.models-card--solo { --mc-tint: var(--color-accent); }
.models-card__art {
  position: absolute; top: var(--space-5); right: var(--space-5); z-index: -1;
  width: 40px; height: 40px;
  color: var(--mc-tint); opacity: 0.6;
  pointer-events: none;
}
.models-card__art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { .models-card__art { width: 34px; height: 34px; } }

/* phases */
.phases { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase-card { position: relative; padding-top: var(--space-8); }
.phase-card__label {
  position: absolute; top: var(--space-5); left: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-primary);
}
.phase-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* Grid content cards animate on hover — same treatment as .card--interactive
   (≤2px lift, deeper shadow, accent border) plus a subtle icon lift where a
   card has one. These cards aren't links, so this is decorative polish. */
.feature-item,
.models-card,
.phase-card,
.pricing-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.feature-item:hover,
.models-card:hover,
.phase-card:hover,
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-100);
}
.feature-item__mark .brand-mark { transition: transform var(--transition-base); }
.feature-item:hover .feature-item__mark .brand-mark { transform: scale(1.08) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  .feature-item,
  .models-card,
  .phase-card,
  .pricing-card,
  .feature-item__mark .brand-mark { transition: box-shadow var(--transition-base), border-color var(--transition-base); }
  .feature-item:hover,
  .models-card:hover,
  .phase-card:hover,
  .pricing-card:hover,
  .feature-item:hover .feature-item__mark .brand-mark { transform: none; }
}

/* tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.tag-tech--lg { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* tech logo wall — official brand logos, greyscale at rest, full colour on
   hover/focus. Equal cells keep mixed logo aspect ratios visually aligned. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 480px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .logo-wall { grid-template-columns: repeat(5, 1fr); } }
.logo-wall__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 104px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}
.logo-wall__item:hover,
.logo-wall__item:focus-within { background: var(--color-bg-muted); }
.logo-wall__img {
  height: 40px; width: auto; max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
}
.logo-wall__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-align: center;
  transition: color var(--transition-base);
}
.logo-wall__item:hover .logo-wall__img,
.logo-wall__item:focus-within .logo-wall__img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}
.logo-wall__item:hover .logo-wall__label,
.logo-wall__item:focus-within .logo-wall__label { color: var(--color-heading); }
@media (prefers-reduced-motion: reduce) {
  .logo-wall__img { transition: filter var(--transition-base), opacity var(--transition-base); }
  .logo-wall__item:hover .logo-wall__img,
  .logo-wall__item:focus-within .logo-wall__img { transform: none; }
}

/* section note + prose */
.section-note { margin-top: var(--space-6); }
.prose p + p { margin-top: var(--space-4); }

/* Prose + side illustration (e.g. "Your IP and data, protected") */
.prose-split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .prose-split { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.prose-split__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.prose-split__title { margin: 0; }
.section-art { display: grid; place-items: center; }
.section-art__svg { width: 100%; max-width: 420px; height: auto; }
@media (max-width: 559px) { .section-art__svg { max-width: 300px; } }

/* IP & data shield — ambient motion: the shield gently breathes while the doc and
   NDA badges drift like guarded satellites on opposite phases. transform/opacity
   only; fully still under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .sa-shield, .sa-badge { transform-box: fill-box; transform-origin: center; will-change: transform; }
  .sa-shield { animation: sa-shield-breathe 7s ease-in-out infinite; }
  .sa-badge--doc { animation: sa-badge-drift-a 6s ease-in-out infinite; }
  .sa-badge--check { animation: sa-badge-drift-b 6.6s ease-in-out infinite; }
}
@keyframes sa-shield-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}
@keyframes sa-badge-drift-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes sa-badge-drift-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ===========================================================================
   13. CONTENT PAGES (About / Case Studies / Pricing)
   ========================================================================== */
/* Geo badges (About global delivery) */
.geo-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); list-style: none; padding: 0; }

/* Global coverage — copy + badges on the left, rotating globe art on the right */
.coverage { position: relative; overflow: hidden; }
.coverage__inner { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) {
  .coverage__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); }
}
.coverage__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.coverage__copy .section-head { margin-bottom: 0; }
.coverage__copy .geo-badges { margin-top: var(--space-1); }
.coverage__art { display: grid; place-items: center; }

/* Global-coverage globe — COBE (WebGL) canvas. The library renders the sphere,
   the dotted landmasses, the atmospheric glow and the country markers; CSS only
   sizes the box and fades the canvas in. */
.globe {
  position: relative;
  width: 100%; max-width: 400px; aspect-ratio: 1 / 1;
  margin-inline: auto;
}
@media (max-width: 559px) { .globe { max-width: 300px; } }
.globe__canvas {
  width: 100%; height: 100%; aspect-ratio: 1 / 1;
  opacity: 0; transition: opacity 1s ease;
  contain: layout paint size;
}

/* Notice / disclaimer block (dark text on warning per brand rule) */
.notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
}
.notice__icon { flex: none; margin-top: 2px; color: var(--color-warning-on-white); }
.notice p { margin: 0; }

/* Case-study cards */
.case-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); list-style: none; padding: 0; margin: var(--space-10) 0 0; align-items: start; }
@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
.case-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.case-card__media { aspect-ratio: 16 / 9; }
.case-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.case-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.case-card__title { font-size: var(--text-xl); }
.case-card__result { color: var(--color-heading); font-weight: var(--weight-semibold); }
.case-card__result-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); margin-bottom: var(--space-1); }
/* Stack/deliverables sit directly under the result — no auto gap. The tags read as
   small "bricks" the project is built from. */
.case-card__stack { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.tag-brick {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-navy);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

/* Pricing model cards */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px)  { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card { display: flex; flex-direction: column; gap: var(--space-2); }
.pricing-card__title { font-size: var(--text-xl); }
.pricing-card__best { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-sm); color: var(--color-body); }
.pricing-card__best-label { display: inline-block; font-weight: var(--weight-semibold); color: var(--color-primary); margin-right: var(--space-1); }

/* Estimate selector (guided model recommendation — no published prices) */
.estimator { padding: var(--space-8); }
@media (max-width: 640px) { .estimator { padding: var(--space-6); } }
.estimator__step + .estimator__step { margin-top: var(--space-8); }
.estimator__q { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-heading); }
.estimator__step-num { color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-sm); margin-right: var(--space-2); }
.estimator__options { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.estimator__opt {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), transform 120ms var(--ease-out-quart);
}
.estimator__opt:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-50); }
/* Tactile press — the choice registers under the finger/cursor. */
.estimator__opt:active { transform: scale(0.97); }
.estimator__opt[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-inverse); }
@media (prefers-reduced-motion: reduce) {
  .estimator__opt { transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
  .estimator__opt:active { transform: none; }
}
.estimator__result {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-lg);
}
.estimator__result[hidden] { display: none; }
.estimator__result-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-primary); }
.estimator__result-model { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: var(--color-heading); margin: var(--space-2) 0; }
.estimator__result-why { color: var(--color-body); margin-bottom: var(--space-5); }

/* ===========================================================================
   14. CONTACT PAGE
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-16); align-items: start; } }

.contact-form { padding: var(--space-8); }
@media (max-width: 640px) { .contact-form { padding: var(--space-6); } }
.contact-form .field + .field { margin-top: var(--space-5); }
.req { color: var(--color-error); }
.contact-form__submit { margin-top: var(--space-6); width: 100%; }
.contact-form__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }

/* visually-hidden honeypot */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.form-success {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--color-success-bg); color: var(--color-success-text);
  border-radius: var(--radius-md); border-left: 3px solid var(--color-success);
}
.form-success[hidden] { display: none; }
.form-success svg { flex: none; margin-top: 2px; color: var(--color-success); }
.form-success p { margin: 0; }

.contact-aside__title { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.contact-next { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.contact-next li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-next__num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary);
  font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-sm);
}
.contact-next__title { font-size: var(--text-base); margin-bottom: 2px; }

.contact-channels { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.contact-channels__title { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); font-family: var(--font-body); margin-bottom: var(--space-4); }
.contact-channel { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--color-muted); }
.contact-channel svg { flex: none; color: var(--color-primary); }

/* ===========================================================================
   11. RESPONSIVE NAV SWITCH (drawer below desktop)
   ========================================================================== */
@media (max-width: 1023px) {
  .nav, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .drawer, .drawer__backdrop { display: none; }
}

/* ── 404 page ──────────────────────────────────────────────────────────────── */
.error-404 { text-align: center; }
.error-404__inner { max-width: 40rem; margin-inline: auto; }
.error-404__code {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.error-404__lead { color: var(--color-muted); margin-bottom: var(--space-8); }
.error-404__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }