/*
  PartForm — Shared Stylesheet
  Space Grotesk · JetBrains Mono · Inter (self-hosted)
  Dark editorial · warm amber accent · film grain
*/

/* ============================================================
   FONTS — self-hosted woff2 (see /fonts).
   Latin and Cyrillic subsets split via unicode-range so the
   browser only fetches what the page actually renders.
   font-display: swap — render the fallback immediately, then
   swap when the woff2 lands. No FOUT lock-in.
   ============================================================ */

/* ── Inter (body) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-300.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Space Grotesk (display) — Latin only on Google Fonts.
   Cyrillic copy falls through to the body stack (Inter)
   via the font-family fallback chain. ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── JetBrains Mono (labels) ── */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg:           #0c0c0d;
  --bg-2:         #141416;
  --fg:           #eeeae1;
  --fg-dim:       #9c958a;     /* bumped from #8a857c — passes WCAG AA on body-sized text */
  --cx:           -400px;
  --cy:           -400px;
  --line:         #2a2a2d;
  --accent:       oklch(0.74 0.17 55);
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter', -apple-system, sans-serif;
}

/* ============================================================
   LIGHT MODE TOKEN OVERRIDES
   Applied when <html data-theme="light">
   ============================================================ */
[data-theme="light"] {
  --bg:     #f3efe8;
  --bg-2:   #e9e4db;
  --fg:     #18160f;
  --fg-dim: #5a5347;       /* darker than before for WCAG AA contrast on cream */
  --line:   #ccc7be;
  --accent: oklch(0.58 0.18 48); /* slightly deeper amber — better contrast on cream */
}

/* Smooth colour transition on theme switch */
html, body,
.topnav, .mobile-menu,
.section, .section--alt,
.service-section, .page-hero, .contact-cta,
.growth-path, .custom-scrollbar .csb-track {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* -------- logo swap — handled by JS (setTheme) -------- */

/* -------- cursor grid: tone down on light background -------- */
[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(160, 90, 10, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 90, 10, 0.25) 1px, transparent 1px);
}

/* -------- scrollbar track: adapt to light bg -------- */
[data-theme="light"] .csb-track {
  background: rgba(24, 22, 15, 0.12);
}

/* -------- idx-row hover: lighter ghost on light bg -------- */
[data-theme="light"] .idx-row:hover {
  background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent 70%);
}

/* -------- stroke text: use dark fg on light -------- */
[data-theme="light"] .stroke {
  -webkit-text-stroke: 2px var(--fg);
}

/* ============================================================
   THEME TOGGLE — Apple-style pill switch
   Dark mode  → thumb LEFT  (moon icon)
   Light mode → thumb RIGHT (sun icon), track turns accent
   ============================================================ */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 6px;        /* expand hit area to ≥44px tall */
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}

/* The pill track */
.toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--line);
  border: 1.5px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}
.theme-toggle:hover .toggle-track {
  border-color: var(--fg-dim);
}
[data-theme="light"] .toggle-track {
  background: var(--accent);
  border-color: transparent;
}

/* The sliding thumb */
.toggle-thumb {
  position: absolute;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
[data-theme="light"] .toggle-thumb {
  transform: translateX(20px); /* 44 - 18 - 2 - 2 - 2 = 20px */
}

/* Icon inside the thumb */
.toggle-thumb svg {
  display: block;
  width: 10px;
  height: 10px;
  color: var(--bg);
  flex-shrink: 0;
}
.toggle-thumb .icon-moon { display: block; }
.toggle-thumb .icon-sun  { display: none;  }
[data-theme="light"] .toggle-thumb .icon-moon { display: none;  }
[data-theme="light"] .toggle-thumb .icon-sun  { display: block; }

/* Mobile menu variant — slightly bigger, centred in the menu */
.theme-toggle--mobile { padding: 10px; min-height: 48px; }
.theme-toggle--mobile .toggle-track {
  width: 52px;
  height: 28px;
  border-radius: 14px;
}
.theme-toggle--mobile .toggle-thumb {
  width: 22px;
  height: 22px;
}
[data-theme="light"] .theme-toggle--mobile .toggle-thumb {
  transform: translateX(22px); /* 52 - 22 - 2 - 2 - 4 = 22px */
}
.theme-toggle--mobile .toggle-thumb svg { width: 12px; height: 12px; }

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   SUBTLE CURSOR GLOW — ghost heat trail, normal cursor kept.
   Three blobs at different lerp speeds leave a faint orange
   smear behind the pointer. Grid faintly surfaces at cursor.
   Touch / mobile: hidden via media query + JS guard.
   ============================================================ */

/* Ghost grid — surfaces very faintly around the raw cursor position */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background-image:
    linear-gradient(rgba(190,120,30,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,120,30,0.35) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask: radial-gradient(circle 60px at var(--cx) var(--cy),
    black 0%, rgba(0,0,0,0.4) 55%, transparent 80%);
  mask: radial-gradient(circle 60px at var(--cx) var(--cy),
    black 0%, rgba(0,0,0,0.4) 55%, transparent 80%);
  opacity: calc(var(--aura-opacity, 0) * 0.55); /* JS drives this in sync with trail */
}

/* The three ghost blobs — opacity driven by JS in sync with trail.
   Use color-mix on var(--accent) so theme overrides flow through. */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Fastest — sharpest, closest to cursor */
.cursor-glow--0 {
  width: 160px; height: 160px;
  margin: -80px 0 0 -80px;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--accent) 4%, transparent) 0%,
    transparent 65%);
  filter: blur(6px);
  z-index: 8;
}
/* Mid — softer, lingers a bit */
.cursor-glow--1 {
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--accent) 2.5%, transparent) 0%,
    transparent 60%);
  filter: blur(12px);
  z-index: 7;
}
/* Slowest — wide, barely visible, trails the furthest */
.cursor-glow--2 {
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--accent) 1.5%, transparent) 0%,
    transparent 55%);
  filter: blur(24px);
  z-index: 6;
}

.cursor-trail { pointer-events: none; }

@media (hover: none) {
  body::before, .cursor-glow, .cursor-trail { display: none !important; }
}

/* Reduced-motion users: kill the cursor heat trail entirely.
   The page-enter and reveal animations are already collapsed elsewhere. */
@media (prefers-reduced-motion: reduce) {
  body::before, .cursor-glow, .cursor-trail { display: none !important; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* ============================================================
   FOCUS STYLES — keyboard-only, never on mouse click
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ============================================================
   PAGE ENTER — subtle fade on every page load
   NB: opacity only, never transform — a transformed body creates
   a containing block that breaks position:fixed children
   (mobile menu, modals, etc).
   ============================================================ */
body {
  animation: pageEnter 0.4s ease-out both;
}
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   SCROLL CONTAINER  (snap pages wrap content in .scroller)
   ============================================================ */
.scroller {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.scroller::-webkit-scrollbar { width: 0; height: 0; }
.scroller { scrollbar-width: none; }

/* Footer & growth-path placed INSIDE the snap scroller participate
   in the snap flow at their natural height (not 100vh). Without
   this rule the footer was rendered outside the snap container
   on portfolio.html, causing the window+scroller to scroll
   independently — the visible footer would then "stick" at the
   bottom of the viewport when wheel events targeted the snap
   container instead of the window. */
main.scroller > .footer,
main.scroller > .growth-path {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: auto;
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.section {
  position: relative;
  overflow: hidden;
  padding: 100px 72px 80px;
}

/* Snap-scroll sections (inside .scroller) */
.scroller .section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Free-scroll: hero-height sections */
.section--full  { min-height: 100vh; }
.section--auto  { min-height: auto; padding: 80px 72px; }

/* Film grain overlay — identical to portfolio */
.section::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.055;
  mix-blend-mode: overlay;
  z-index: 50;
}

/* Alternate dark tint */
.section--alt { background: var(--bg-2); }

/* ============================================================
   TOP NAV — identical structure to portfolio topnav
   ============================================================ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 18px 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-dim);
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.topnav.hidden { transform: translateY(-110%); }

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  transition: opacity 0.2s;
}
.topnav .brand:hover { opacity: 0.75; }

.topnav .right { display: flex; gap: 24px; }
.topnav a { transition: color 0.2s; }
.topnav a:hover { color: var(--fg); }
.topnav a.active { color: var(--fg); }

/* Mobile toggle (hidden by default) */
.topnav .nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  pointer-events: auto;
}
.topnav .nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--fg);
  transition: all 0.3s;
}

/* Mobile menu overlay
   z-index 200 — must be ABOVE the fixed topnav (z-index 100) so when
   the user opens it nothing peeks through.
   Uses 100dvh (dynamic viewport) so iOS Safari's address bar doesn't
   crop the bottom of the menu. Falls back to 100vh on older browsers. */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 80px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg-dim);
  transition: color 0.2s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--accent); }
.mobile-menu-close {
  position: absolute;
  top: 28px; right: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 8px 10px;
  transition: color 0.2s;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1;
  min-height: 28px;
}
.lang-btn.active { color: var(--accent); }
.lang-btn:hover:not(.active) { color: var(--fg); }
.lang-switch > span { color: var(--line); user-select: none; }

/* Mobile menu lang switch */
.mobile-menu .lang-switch {
  font-size: 13px;
  gap: 4px;
}
.mobile-menu .lang-btn { padding: 10px 14px; font-size: inherit; min-height: 44px; }

/* ============================================================
   SIDE DOT NAV (snap pages)
   ============================================================ */
.sidenav {
  position: fixed;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
}
.sidenav a {
  position: relative;
  width: 38px; height: 22px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sidenav a::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 1.5px;
  background: var(--fg-dim);
  transition: all 0.3s;
}
.sidenav a:hover::before, .sidenav a.active::before {
  width: 30px;
  background: var(--accent);
}
.sidenav a.active { color: var(--fg); }
.sidenav a .lbl {
  position: absolute;
  right: 40px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: all 0.3s;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.sidenav a:hover .lbl { opacity: 1; transform: translateX(0); }

/* ============================================================
   CUSTOM SCROLLBAR (free-scroll pages)
   ============================================================ */
.custom-scrollbar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  pointer-events: none;
}
.csb-track {
  position: relative;
  width: 1.5px;
  height: calc(100vh - 140px);
  margin-top: 80px;
  background: rgba(238,234,225,0.10);
  border-radius: 1px;
  pointer-events: auto;
  cursor: pointer;
}
.csb-thumb {
  position: absolute;
  top: 0;
  left: -10.5px;
  width: 22.5px;
  padding: 0 10px;
  background: var(--accent);
  background-clip: content-box;
  border-radius: 1px;
  pointer-events: auto;
  cursor: grab;
  transition: width 0.15s, left 0.15s;
}
.csb-thumb:hover, .csb-thumb:active {
  width: 25px;
  left: -11.75px;
  cursor: grab;
}
@media (max-width: 900px) {
  .custom-scrollbar { display: none; }
}

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section-head {
  position: absolute;
  top: 32px; left: 72px; right: 72px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  text-transform: uppercase;
  z-index: 10;
}
.section-foot {
  position: absolute;
  bottom: 32px; left: 72px; right: 72px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  text-transform: uppercase;
  z-index: 10;
}

/* ============================================================
   CROSSHAIR CORNERS
   ============================================================ */
.crosshair {
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  z-index: 20;
}
.crosshair.tl { top: 32px; left: 32px; border-right: 0; border-bottom: 0; }
.crosshair.tr { top: 32px; right: 32px; border-left: 0; border-bottom: 0; }
.crosshair.bl { bottom: 32px; left: 32px; border-right: 0; border-top: 0; }
.crosshair.br { bottom: 32px; right: 32px; border-left: 0; border-top: 0; }

/* Smaller corners (for feature image boxes) */
.corner {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 6;
}
/* Sit half-outside the hero-box so the L-corner reads as a frame marker
   around the image rather than a tag stuck on top of it. Requires the
   parent .hero-box to keep overflow visible. */
.corner.tl { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.corner.tr { top: -10px; right: -10px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: -10px; left: -10px; border-right: 0; border-top: 0; }
.corner.br { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--accent);
  flex-shrink: 0;
}

h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(60px, 9.5vw, 160px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg);
}
h2.title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 7.5vw, 110px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--fg);
}
h3.heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--fg);
}

/* Text variants */
.stroke {
  -webkit-text-stroke: 2px var(--fg);
  color: transparent;
  font-style: italic;
  font-weight: 400;
}
.accent,
.accent-text { color: var(--accent); }

.lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 300;
}
.lead--light { color: var(--fg); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Tagline (hero super text) */
.super {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

/* ============================================================
   REVEAL ANIMATIONS — identical to portfolio
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1),
              transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d-1 { transition-delay: 0.1s; }
.reveal.d-2 { transition-delay: 0.2s; }
.reveal.d-3 { transition-delay: 0.3s; }
.reveal.d-4 { transition-delay: 0.4s; }
.reveal.d-5 { transition-delay: 0.5s; }

/* ============================================================
   HERO LAYOUT
   Top-anchored stack (eyebrow → headline → CTAs), with the
   metaline pushed to the bottom edge via margin-top:auto so
   the previous yawning gap between CTAs and the stats bar is
   gone. The metaline still grounds the hero against the next
   section's hairline.
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero > .metaline { margin-top: auto; }

.hero .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hero .center-block { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }

.scroll-cue {
  position: absolute;
  /* Sit above the metaline (which lives in the bottom band of the hero).
     Earlier value (80px) collided with the OUTPUT cell at desktop widths. */
  bottom: 220px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0.55;
  z-index: 60;
  pointer-events: none;
}
.scroll-cue::before {
  content: "";
  width: 1px; height: 28px;
  background: var(--accent);
  animation: cue-tick 2s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes cue-tick {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; }
  50%       { transform: scaleY(1); }
}
/* Hide scroll cue on mobile — touch users intuitively scroll, no need for a hint that overlaps content */
@media (max-width: 900px) {
  .scroll-cue { display: none; }
}

/* While the user is dragging a before/after slider, lock the page scroll
   so the snap container doesn't grab the gesture. */
body.ba-dragging,
body.ba-dragging .scroller {
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
}

/* ============================================================
   METALINE (hero bottom stats bar)
   ============================================================ */
.metaline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 48px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.metaline .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.metaline .v {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 22px);
  color: var(--fg);
  font-weight: 500;
}

/* ============================================================
   INDEX / SERVICES LIST (idx-row style)
   ============================================================ */
.idx { display: grid; grid-template-rows: auto 1fr; gap: 60px; }
.idx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
}
.idx-head .lead { max-width: 440px; text-align: right; }
/* Master grid lives on .idx-list so every row inherits the same column
   tracks via subgrid. With per-row grids, the `auto` .yr column was
   sized from each row's own content, producing different remaining
   widths and shifting .cat to a different X on each row. */
.idx-list {
  display: grid;
  grid-template-columns: 60px minmax(0, 2fr) minmax(0, 1fr) auto;
  column-gap: 32px;
}

.idx-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
  cursor: pointer;
  transition: background 0.3s, padding 0.3s;
  text-decoration: none;
  color: inherit;
}
.idx-row:last-child { border-bottom: 1px solid var(--line); }
.idx-row:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--fg) 3%, transparent), transparent 70%);
}
.idx-row .n  { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.idx-row .name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.idx-row .cat  { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.idx-row .yr   { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); text-align: right; white-space: nowrap; }
.idx-row .arrow {
  display: inline-block;
  margin-left: 14px;
  transition: transform 0.3s;
  color: var(--accent);
  opacity: 0;
}
.idx-row:hover .arrow { opacity: 1; transform: translateX(6px); }

/* ============================================================
   FEATURE LAYOUT (2-col: meta left, image right)
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.feature.reverse { grid-template-columns: 1.2fr 1fr; }
.feature.reverse .meta-stack { order: 2; }
.feature.reverse .hero-box   { order: 1; }

.meta-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding-right: 24px;
}

.meta-stack h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  color: var(--fg);
}
.meta-stack .desc {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 300;
}
.meta-stack .specs {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.meta-stack .specs .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 4px;
}
.meta-stack .specs .v {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--fg);
  font-weight: 500;
}

/* Hero image box */
.hero-box {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  /* overflow:visible on purpose so the .corner brackets can sit slightly
     outside the box edge as decorative frame markers. Children that need
     to clip (e.g. .ba-stage) own their own overflow:hidden. */
}
.hero-box img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  will-change: transform;
}
.hero-box.photo img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: cover;
}
.hero-box .view-tag {
  position: absolute;
  top: 14px; right: 60px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  z-index: 2;
}

/* Compact hero-box — portrait 3:4 box centred in its grid column. The
   photos are 3:4 originals, so the box adopts the same aspect to show
   them at full size without cropping or letterboxing. Capped by
   max-height so the section fits in a 100vh snap viewport. */
.hero-box.compact {
  aspect-ratio: 3 / 4;
  max-height: 576px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
}
.hero-box.compact img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 12px;
}
.hero-box.compact.photo img {
  /* override the full-bleed cover modifier when compact is also applied */
  width: 100%;
  height: 100%;
}

/* Landscape variant — for 16:9 source photos. Keeps the same centring
   and capping behaviour as .compact, just a wider aspect. */
.hero-box.compact.wide {
  aspect-ratio: 16 / 9;
}

/* Standard 4:3 landscape variant — for technical renders that want
   their full canvas (exploded views, isometric drawings). */
.hero-box.compact.std {
  aspect-ratio: 4 / 3;
}

/* ------------------------------------------------------------------
   PLATE DIPTYCH — paired technical views stacked as two equal plates.
   Each plate is a self-framed 16:9 hero-box; the pair reads as the
   "ASSEMBLY → EXPLODED" sequence without needing connective copy.
   ------------------------------------------------------------------ */
.hero-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: 0 auto;
}
.hero-pair > .hero-box.plate {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  /* The .compact.wide aspect-ratio (16/9) drives the frame; max-height
     below clamps it on short laptops so the pair fits in 100vh snap. */
}

/* Pill background on the corner view-tag — improves contrast against
   busy photographic backgrounds (concrete, fabric). */
.hero-box .view-tag.pill {
  background: rgba(12, 12, 13, 0.78);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 5px 10px;
  letter-spacing: 0.14em;
}
[data-theme="light"] .hero-box .view-tag.pill {
  background: rgba(245, 242, 235, 0.90);
  color: var(--fg);
  border-color: rgba(0, 0, 0, 0.10);
}

/* Dual hero-box — two photos side-by-side inside a single hero-box,
   each with a caption underneath. Used in the services FDM section
   instead of a before/after slider. */
.hero-box.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px 16px 16px;
}
.hero-box.dual .dual-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
.hero-box.dual .dual-cell img {
  width: 100%;
  height: auto;
  aspect-ratio: 1792 / 2400;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  min-height: 0;
}
.hero-box.dual .dual-cell .dual-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  width: 100%;
}
@media (max-width: 700px) {
  .hero-box.dual {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .hero-box.dual .dual-cell img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   IMAGE PLACEHOLDER (dark — for pages before images are added)
   ============================================================ */
.img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 32px;
  min-height: 320px;
}
.img-placeholder svg {
  width: 36px; height: 36px;
  color: var(--line);
  margin-bottom: 4px;
}
.img-placeholder small {
  font-size: 10px;
  color: var(--line);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Grid background (for image boxes) */
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

/* ============================================================
   GRAPH PAPER — warm sepia grid (technical/sketch paper)
   ============================================================ */
.graph-bg {
  position: absolute; inset: 0;
  background-color: var(--bg-2);
  background-image:
    linear-gradient(rgba(190,140,55,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,140,55,0.13) 1px, transparent 1px),
    linear-gradient(rgba(190,140,55,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,140,55,0.045) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  pointer-events: none;
  z-index: 0;
}
/* Soften the warm grid on the light theme so it reads as drafting paper, not muddy. */
[data-theme="light"] .graph-bg {
  background-image:
    linear-gradient(rgba(150,90,20,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,90,20,0.10) 1px, transparent 1px),
    linear-gradient(rgba(150,90,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,90,20,0.04) 1px, transparent 1px);
}

/* ============================================================
   RULER STRIP — engineering drawing tick scale
   ============================================================ */
.ruler-strip {
  position: relative;
  width: 100%;
  height: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.ruler-strip::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; top: 0;
  border-top: 1px solid rgba(190,140,55,0.3);
  background:
    /* major ticks every 40px, full height */
    repeating-linear-gradient(90deg,
      rgba(190,140,55,0.6) 0, rgba(190,140,55,0.6) 1px,
      transparent 1px, transparent 40px
    ),
    /* minor ticks every 8px, half height */
    repeating-linear-gradient(90deg,
      rgba(190,140,55,0.25) 0, rgba(190,140,55,0.25) 0.75px,
      transparent 0.75px, transparent 8px
    );
  background-size: 40px 14px, 8px 7px;
  background-position: 0 bottom, 0 bottom;
  background-repeat: repeat-x;
}
.ruler-strip::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}

/* ============================================================
   CALIPER / DIMENSION ANNOTATIONS (on .hero-box)
   ============================================================ */
.dim-h, .dim-v {
  position: absolute;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.6;
  z-index: 5;
  pointer-events: none;
}
/* horizontal: bottom of box */
.dim-h {
  bottom: 14px; left: 20px; right: 48px;
  gap: 7px;
}
.dim-h .dl { flex: 1; height: 1px; background: currentColor; position: relative; }
.dim-h .dl::before, .dim-h .dl::after {
  content: ""; position: absolute; top: 50%;
  width: 1px; height: 8px;
  background: currentColor; transform: translateY(-50%);
}
.dim-h .dl::before { left: 0; }
.dim-h .dl::after  { right: 0; }

/* vertical: right side of box */
.dim-v {
  right: 14px; top: 48px; bottom: 32px;
  flex-direction: column;
  width: 18px;
  gap: 6px;
}
.dim-v .dl { flex: 1; width: 1px; background: currentColor; align-self: center; position: relative; }
.dim-v .dl::before, .dim-v .dl::after {
  content: ""; position: absolute; left: 50%;
  height: 1px; width: 8px;
  background: currentColor; transform: translateX(-50%);
}
.dim-v .dl::before { top: 0; }
.dim-v .dl::after  { bottom: 0; }
.dim-v span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.14em; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-section { display: grid; grid-template-rows: auto 1fr; gap: 48px; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.step {
  border-top: 1.5px solid var(--accent);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step .step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.step .step-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.05;
}
.step .step-desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.55;
  color: var(--fg-dim);
  font-weight: 300;
}

/* ============================================================
   CONTACT / CTA SECTION
   ============================================================ */
.contact-cta {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}
.contact-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 160px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-weight: 500;
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.contact-grid .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.contact-grid .v {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 22px);
  color: var(--fg);
  font-weight: 500;
}
.contact-grid .v a { color: var(--accent); transition: opacity 0.2s; }
.contact-grid .v a:hover { opacity: 0.75; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
}
.btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.btn--ghost {
  border-color: var(--line);
  color: var(--fg-dim);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn--filled {
  background: var(--accent);
  color: var(--bg);
}
.btn--filled:hover {
  background: transparent;
  color: var(--accent);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-group { margin-bottom: 64px; }
.faq-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq-group-label::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--accent);
}

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.2s;
}
.faq-q:hover {
  background: linear-gradient(90deg, color-mix(in oklch, var(--fg) 2%, transparent), transparent);
}
.faq-q .q-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  flex: 1;
}
.faq-q .q-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s;
  line-height: 1;
}
.faq-item.open .faq-q .q-icon { transform: rotate(45deg); }

.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(.2,.7,.2,1);
}
.faq-a-inner {
  padding: 0 0 28px 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--fg-dim);
  font-weight: 300;
  max-width: 700px;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: start;
}

.form-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-field { display: flex; flex-direction: column; gap: 10px; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.form-field label .opt {
  color: var(--line);
  margin-left: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--fg-dim); opacity: 0.5; }

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a857c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
[data-theme="light"] .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5347' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.form-field select option { background: var(--bg-2); color: var(--fg); }
.form-field textarea { resize: vertical; min-height: 160px; line-height: 1.65; }

.file-drop {
  border: 1px dashed var(--line);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.file-drop:hover { border-color: var(--accent); }
.file-drop .file-icon { font-size: 24px; color: var(--fg-dim); margin-bottom: 4px; }
.file-drop .file-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.file-drop .file-types {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--line);
}
.file-drop input[type=file] { display: none; }

.form-submit { display: flex; align-items: center; gap: 20px; }
.form-submit .btn { white-space: nowrap; }
.form-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0.65;
}

.form-success { display: none; text-align: center; padding: 60px 0; }
.form-success.visible { display: block; }
.form-success .s-icon {
  font-family: var(--font-mono);
  font-size: 40px;
  color: var(--accent);
  margin-bottom: 20px;
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 12px;
}
.form-success p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-dim);
  font-weight: 300;
}

/* Contact info sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 40px; }

.info-block { display: flex; flex-direction: column; gap: 16px; }
.info-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.info-row { display: flex; flex-direction: column; gap: 4px; }
.info-row .ik {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.info-row .iv {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.info-row .iv a { color: var(--accent); transition: opacity 0.2s; }
.info-row .iv a:hover { opacity: 0.75; }

/* ============================================================
   ABOUT — story section
   ============================================================ */
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.story-text p {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--fg-dim);
  font-weight: 300;
}
.story-text p.featured {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: -0.02em;
  color: var(--fg);
  font-weight: 500;
  line-height: 1.35;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.team-card { display: flex; flex-direction: column; }
.team-card__photo {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
  margin-bottom: 16px;
}
.team-card__photo .img-placeholder { min-height: 0; height: 100%; border: none; }
.team-card .tc-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 4px;
}
.team-card .tc-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.team-card .tc-bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 300;
}

/* Values grid (3 cols) */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.value-card {
  border-top: 1.5px solid var(--accent);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-card .vc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.value-card .vc-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.05;
}
.value-card .vc-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 300;
}

/* ============================================================
   SERVICES — individual service section (tall, free-scroll)
   ============================================================ */
.service-section {
  padding: 80px 72px;
  border-bottom: 1px solid var(--line);
}
.service-section:last-of-type { border-bottom: none; }

/* Material table */
.mat-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.mat-table th, .mat-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.mat-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg-2);
  padding: 10px 16px;
}
.mat-table td { font-family: var(--font-body); color: var(--fg-dim); font-weight: 300; }
.mat-table td:first-child {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
}
.mat-table tr:hover td { background: color-mix(in oklch, var(--fg) 1.5%, transparent); }

/* Plain dash-bulleted list — for sidebars and short prose lists */
.dash-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.dash-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-dim);
  font-weight: 300;
  line-height: 1.5;
}
.dash-list li::before {
  content: "—";
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dash-list li.muted {
  color: var(--line);
}
.dash-list li.muted::before {
  color: var(--line);
}

/* Suited-to list */
.suited-list {
  border: 1px solid var(--line);
  padding: 24px;
  background: var(--bg-2);
}
.suited-list .sl-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.suited-list ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.suited-list ul li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-dim);
  font-weight: 300;
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.suited-list ul li::before {
  content: "—";
  color: var(--accent);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 60px 72px 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .fb-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand .fb-name .mark {
  width: 12px; height: 12px;
  border: 1.5px solid var(--fg-dim);
  position: relative;
  flex-shrink: 0;
}
.footer-brand .fb-name .mark::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
}
.footer-brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
  font-weight: 300;
  max-width: 280px;
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-dim);
  font-weight: 300;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--fg); }

.footer-contact p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.9;
  color: var(--fg-dim);
  font-weight: 300;
}
.footer-contact a { color: var(--accent); transition: opacity 0.2s; }
.footer-contact a:hover { opacity: 0.75; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--line);
}

/* ============================================================
   PAGE HERO (non-snap pages — tall section at top)
   Anchor content to the top so short heroes (Contact, FAQ)
   don't float in the middle of a 100vh section with empty
   bands above and below the title.
   ============================================================ */
.page-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  padding-top: 140px;
  padding-bottom: 80px;
}
.page-hero .ph-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 60px;
  flex-wrap: wrap;
}
.page-hero .ph-desc {
  max-width: 400px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--fg-dim);
  font-weight: 300;
}
/* Legal/info pages place an .eyebrow inside .ph-head — at the same top-left
   region as the .crosshair.tl bracket. On mobile, .page-hero padding-top
   drops while the bracket stays at top:80px, so the eyebrow's leading dash
   lands on the bracket's vertical bar. Push the eyebrow below the bracket. */
@media (max-width: 900px) {
  .page-hero .ph-head .eyebrow {
    margin-top: 28px;
  }
}
@media (max-width: 420px) {
  .page-hero .ph-head .eyebrow {
    margin-top: 36px;
  }
}

/* ============================================================
   UTILITY
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.divider { height: 1px; background: var(--line); margin: 48px 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
/* When a BA stage fills a hero-box absolutely, its layers should also fill */
.ba-layer .img-placeholder { min-height: 100%; height: 100%; }

.ba-stage {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  border: 1px solid var(--line);
  user-select: none;
}
.ba-layer {
  position: absolute; inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
}
.ba-layer.after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--accent);
  cursor: ew-resize;
  z-index: 5;
}
.ba-handle::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.ba-handle::after {
  content: "◄ ►";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 2px;
  z-index: 2;
}
.ba-label {
  position: absolute;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  z-index: 4;
}
.ba-label.left { left: 16px; }
.ba-label.left .dot { color: var(--accent); }
.ba-label.right { right: 16px; }

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.soc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.soc-btn:hover {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.soc-btn svg {
  width: 16px;
  height: 16px;
}

/* Contact sidebar variant — touch-friendly, sits at the 44×44 floor */
.soc-btn--lg {
  width: 44px;
  height: 44px;
}
.soc-btn--lg svg { width: 18px; height: 18px; }

/* Home section variant */
.contact-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ============================================================
   BRAND LOGO (DXF-derived SVG logo)
   ============================================================ */
.brand-logo {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-logo {
  height: 40px;
  width: auto;
}

/* ============================================================
   GROWTH PATH — pre-footer strip shown across pages
   Hints at the customer journey: print → tool → produce
   ============================================================ */
.growth-path {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 80px 72px 64px;
  position: relative;
  overflow: hidden;
}
/* When growth-path is used as a full-screen .section (home, portfolio snap pages) */
.section.growth-path {
  border-top: 0;
  padding: 100px 72px 80px;
}
/* Centred only when used as a full-screen snap section (home / portfolio).
   In services (free-scroll, inside <main>) it should flush left like the service sections. */
.growth-path .gp-inner { max-width: 1480px; margin: 0 auto; width: 100%; }
.section.growth-path .gp-inner { margin: 0 auto; }   /* keep centred on home / portfolio */
main .growth-path .gp-inner { max-width: none; margin: 0; } /* flush left in services */
.section.growth-path .idx-head { margin-bottom: 48px; }
.section.growth-path .gp-track { margin-bottom: 40px; }
.section.growth-path .gp-cta  { margin-top: 0; }
/* Legacy two-col head (home page uses idx-head instead) */
.growth-path .gp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}
.growth-path .gp-head-left { max-width: 560px; }
.growth-path .gp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.growth-path .gp-eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.growth-path .gp-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
  margin: 0;
}
.growth-path .gp-aside {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: right;
}
.growth-path .gp-track {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.growth-path .gp-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  position: relative;
}
.growth-path .gp-stage::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 36px; height: 1px;
  background: var(--accent);
}
.growth-path .gp-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--fg-dim);
}
.growth-path .gp-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.growth-path .gp-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  font-weight: 300;
  max-width: 340px;
}
.growth-path .gp-cta {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.growth-path .gp-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.growth-path .gp-cta a:hover { opacity: 0.7; }

@media (max-width: 900px) {
  .growth-path { padding: 48px 28px 36px; }
  .section.growth-path { padding: 80px 28px 60px; }
  .section.growth-path .idx-head { flex-direction: column; align-items: flex-start; }
  .growth-path .gp-head { margin-bottom: 28px; flex-direction: column; align-items: flex-start; }
  .growth-path .gp-aside { display: none; }
  .growth-path .gp-track { grid-template-columns: 1fr; gap: 24px; }
  .growth-path .gp-cta { margin-top: 24px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .metaline { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .section, .page-hero { padding: 80px 28px 60px; }
  .section-head, .section-foot { left: 28px; right: 28px; }
  .crosshair.tr, .crosshair.br { right: 28px; }
  .crosshair.tl, .crosshair.bl { left: 28px; }
  /* Push top brackets clear of the fixed topnav so they're visible
     once the section is scrolled to. (Bottom brackets unaffected.) */
  .crosshair.tl, .crosshair.tr { top: 80px; }
  /* Section-top eyebrows otherwise sit at the section's content edge,
     which is the same Y as the .crosshair.tl/.tr above — the eyebrow's
     leading dash visually collides with the bracket. Nudge it below. */
  .eyebrow.reveal { margin-top: 16px; }
  .topnav { padding: 20px 28px; }
  .topnav .right { display: none; }
  .topnav .nav-toggle { display: flex; }
  .sidenav { display: none; }
  .feature { grid-template-columns: 1fr; }
  .feature.reverse .meta-stack { order: unset; }
  .feature.reverse .hero-box   { order: unset; }
  .meta-stack { padding-right: 0; }
  .idx .idx-head { flex-direction: column; align-items: flex-start; }
  .idx .idx-head .lead { text-align: left; }
  .idx-row { grid-template-columns: 40px 1fr; }
  .idx-row .cat, .idx-row .yr { display: none; }
  .ba-label.right { top: auto; bottom: 16px; }
  .eyebrow { font-size: 10px; letter-spacing: 0.14em; gap: 8px; }
  .eyebrow::before { width: 16px; }
  .story-layout { grid-template-columns: 1fr; gap: 48px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer { padding: 48px 28px 32px; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .page-hero { padding-top: 88px; padding-bottom: 48px; padding-left: 28px; padding-right: 28px; }
  .service-section { padding: 60px 28px; }
}

@media (max-width: 600px) {
  .brand-logo { height: 30px; }
  .metaline { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .form-row-2 { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Mobile footer compaction — collapse Services / Company / Legal into
     mono inline rows separated by middots. Each section keeps its label
     but the link list flows as a wrap-row instead of stacking. */
  .footer-brand p { max-width: none; font-size: 13px; }
  .footer-col h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .footer-col h5::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--line);
    flex-shrink: 0;
  }
  .footer-col h5::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
  }
  .footer-col ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    row-gap: 2px;
    align-items: baseline;
  }
  .footer-col ul li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .footer-col ul li:not(:last-child)::after {
    content: "·";
    color: var(--line);
    padding: 0 10px;
    font-size: 14px;
    user-select: none;
  }
  .footer-col ul a {
    font-size: 13px;
    padding: 4px 0;
  }

  /* Home hero — reduce top clutter on small screens */
  .hero { padding-top: 76px; }
  .hero-year-label { font-size: 10px !important; letter-spacing: 0.14em !important; line-height: 1.7; }
}

@media (max-width: 480px) {
  .section, .page-hero, .service-section { padding-left: 20px; padding-right: 20px; }
  .topnav { padding: 16px 20px; }
  .section-head, .section-foot { left: 20px; right: 20px; font-size: 11px; }
  .footer { padding-left: 20px; padding-right: 20px; }
  h1.display { font-size: clamp(48px, 12vw, 160px); }
  h2.title { font-size: clamp(38px, 11vw, 100px); }
  .scroller .hero .hero-year-label,
  .scroller .hero .metaline { left: 20px; right: 20px; }
}

/* ============================================================
   PHONE FLOOR — 375 / 390 / 412 viewports
   The 480 rule already tightens padding; this caps the very
   largest type so multi-line headlines don't overflow on small
   screens, and ensures section vertical rhythm stays sane.
   ============================================================ */
@media (max-width: 420px) {
  .section, .page-hero { padding: 64px 18px 48px; }
  .section--auto { padding: 56px 18px; }
  .service-section { padding: 48px 18px; }
  .footer { padding: 40px 18px 28px; }
  .topnav { padding: 14px 18px; }
  .section-head, .section-foot { left: 18px; right: 18px; font-size: 10px; }

  h1.display { font-size: clamp(40px, 11vw, 56px); line-height: 0.96; }
  h2.title   { font-size: clamp(32px, 10vw, 48px); line-height: 0.96; }
  h3.heading { font-size: clamp(26px, 8vw, 40px); }
  .contact-cta h2 { font-size: clamp(48px, 13vw, 64px); line-height: 0.92; }
  .meta-stack h2 { font-size: clamp(34px, 10vw, 56px); }

  .metaline { gap: 16px; padding-top: 18px; }
  .metaline .v { font-size: 14px; }
  .metaline .k { font-size: 11px; }

  .scroll-cue { display: none; }
  .crosshair { width: 14px; height: 14px; }
  .crosshair.tl, .crosshair.bl { left: 18px; }
  .crosshair.tr, .crosshair.br { right: 18px; }
  .scroller .hero .hero-year-label,
  .scroller .hero .metaline { left: 18px; right: 18px; }

  .hero-box { min-height: 320px; }
  .form-row-2 { gap: 16px; }
  .contact-grid { gap: 16px 12px; }
}

/* ============================================================
   MOBILE: DISABLE SCROLL-SNAP
   Snap on phones feels sluggish & hijacks momentum scroll —
   let touch users free-scroll naturally.
   ============================================================ */
@media (max-width: 900px) {
  .scroller {
    height: auto;
    overflow-y: visible;
    scroll-snap-type: none;
  }
  .scroller .section {
    min-height: auto;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  /* Heroes still take a full screen on entry — they set the tone */
  .scroller .hero,
  .scroller .page-hero {
    min-height: 100vh;
  }
  /* Phones — three-zone hero:
       eyebrow pinned under the topnav,
       heading + CTAs centered in the middle,
       metaline anchored at the bottom.
     Eyebrow and metaline are absolutely positioned so the flex container
     only centers heading + CTAs; left/right match the section padding so
     they align with normal content at each breakpoint. */
  .scroller .hero {
    justify-content: center;
    gap: 32px;
  }
  .scroller .hero .hero-year-label {
    position: absolute;
    top: 108px;        /* clears topnav (~66px) + crosshair tl (top:80 + height:14) */
    left: 28px;
    right: 28px;
    margin: 0;
  }
  .scroller .hero .metaline {
    position: absolute;
    bottom: 40px;
    left: 28px;
    right: 28px;
    margin-top: 0;
  }
  /* Sidenav (snap dot navigation) makes no sense without snap */
  .sidenav { display: none; }
}

/* ============================================================
   FORM ERROR STATE  (Formspree failure)
   ============================================================ */
.form-error {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid oklch(0.55 0.20 25);
  background: oklch(0.55 0.20 25 / 0.08);
  color: oklch(0.65 0.20 25);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.form-error.visible { display: block; }

/* ============================================================
   PROCESS STRIP — 4-thumbnail row used on home featured
   project and portfolio p01 to tell the broken→remade story
   without consuming the main hero box.
   ============================================================ */
.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 16px;
}
.process-strip .ps-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s;
}
.process-strip .ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.process-strip .ps-thumb:hover img {
  transform: scale(1.04);
}
.process-strip .ps-thumb .ps-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(12, 12, 13, 0.72);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}
[data-theme="light"] .process-strip .ps-thumb .ps-label {
  background: rgba(245, 242, 235, 0.86);
  color: var(--fg);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Hover overlay + CTA — makes the gallery navigation discoverable
   instead of relying on the user guessing the click target. */
.process-strip .ps-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 13, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  pointer-events: none;
}
.process-strip .ps-thumb:hover::before { opacity: 1; }
.process-strip .ps-thumb:hover .ps-label { opacity: 0; }
.process-strip .ps-thumb .ps-cta {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(12, 12, 13, 0.92);
  border: 1px solid var(--accent);
  padding: 8px 14px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.process-strip .ps-thumb:hover .ps-cta {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}
[data-theme="light"] .process-strip .ps-thumb::before {
  background: rgba(245, 242, 235, 0.55);
}
[data-theme="light"] .process-strip .ps-thumb .ps-cta {
  background: rgba(245, 242, 235, 0.95);
  color: var(--fg);
}

@media (max-width: 700px) {
  .process-strip { grid-template-columns: repeat(2, 1fr); }
}