/* ==========================================================================
   vdvalkproductions — studio system
   A typography-first identity for the studio's own demo.
   No third-party requests, no gradients clipped into glyphs, no frameworks.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-var.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+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 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.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+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0a0b0d;
  --ink-2: #1a1515;
  --paper: #f3f0e9;
  --paper-2: #e8e2d8;
  --white: #fffdf8;
  --brand: #e33b16;
  --brand-deep: #a5311c;
  --ember: #f38b57;
  --rose: #eebbb2;
  --plum: #2b1717;
  --line: #cbc5ba;
  --line-dark: #382b2b;
  --ink-soft: #545052;
  --muted-on-dark: #c8bdb5;
  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 58px);
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: linear(0, .03, .1069, .2131, .3344, .4596, .5805, .6914,
    .7888, .8709, .9374, .9888, 1.0264, 1.052, 1.0674, 1.0747, 1.0757,
    1.0721, 1.0654, 1.0568, 1.0475, 1.0381, 1.0293, 1.0214, 1.0146,
    1.009, 1.0045, 1.0009, .9982, .9963, .995, .9942, .9939, .9942,
    .9947, .9953, .9959, .9966, .9972, .9978, .9983, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.012em;
  font-synthesis: none;
  -webkit-font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body::selection { color: var(--paper); background: var(--brand); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, li, dd, dt, h1, h2, h3, h4 { min-width: 0; overflow-wrap: anywhere; }

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

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.skip {
  position: absolute;
  z-index: 200;
  top: 12px;
  left: -9999px;
  padding: 12px 16px;
  color: var(--white);
  background: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  padding: 20px 0;
  transition: padding .35s var(--ease), background .35s var(--ease),
    box-shadow .35s var(--ease);
}
.site-header.scrolled {
  padding: 11px 0;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgb(10 11 13 / .12);
}
.nav { display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand img { width: auto; height: 27px; }
.brand img.mark { display: none; height: 31px; }
.nav-links { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 34px); }
.nav-link {
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
  text-decoration: none;
}
.nav-link::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 27px;
  color: var(--white);
  background: linear-gradient(145deg, #252426, var(--ink));
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 8px 20px -14px #000;
  cursor: pointer;
  font: 650 15px/1 var(--display);
  letter-spacing: -.018em;
  text-decoration: none;
  transition: color .3s var(--ease), background .3s var(--ease),
    border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover {
  color: var(--white);
  background: linear-gradient(145deg, var(--brand), #b82d12);
  border-color: var(--brand);
  box-shadow: 0 14px 28px -16px rgb(227 59 22 / .8);
  transform: translateY(-3px);
}
.btn .arw { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translate(4px, -4px); }
.btn-sm { min-height: 43px; padding: 11px 20px; font-size: 13px; }
.btn-ghost {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.btn-invert { color: var(--ink); background: var(--white); border-color: var(--white); }
.btn-invert:hover { color: var(--white); background: var(--brand); border-color: var(--brand); }
.btn-outline-invert { color: var(--white); background: transparent; border-color: rgb(255 253 248 / .42); box-shadow: none; }
.btn-outline-invert:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }

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

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
h2 { font-size: clamp(2.6rem, 5.8vw, 5.4rem); line-height: .98; }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.05; }
p { margin: 0; }
.display {
  font-size: clamp(4.25rem, 10vw, 9.6rem);
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: -.058em;
  text-transform: lowercase;
}
.display .l1, .display .l2, .display .l3 { display: block; line-height: inherit; }
.display .line-ink { display: block; line-height: inherit; }
.display .l2 { padding-left: clamp(0px, 7vw, 132px); }
.display .l3 { padding-left: clamp(0px, 3.5vw, 64px); }
.display em { color: var(--brand); font-style: normal; font-weight: 630; }
.word-good { color: var(--ink-2); }
.word-work { color: var(--brand-deep); }
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  font: 650 11px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.label::before { width: 27px; height: 2px; content: ""; flex: none; background: var(--brand); }
.label-plain::before { display: none; }
.lede { max-width: 49ch; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.52; letter-spacing: -.018em; }
.fine { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); font-size: 13px; line-height: 1.45; }
.dim { color: color-mix(in srgb, currentColor 48%, transparent); }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------- motion layer */

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .78s var(--ease), transform .78s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Above-the-fold content is never gated on an observer or a transition: both are
   suspended in a background tab, so a lead who opens the link in a new tab and
   switches to it later would meet a blank hero. index.html was fixed for this;
   contact.html and approach.html use .subhero and had been left exposed. */
.js .hero [data-reveal],
.js .subhero [data-reveal] { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-reveal].in, .js .hero [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .btn:hover .arw { transform: none; }
}

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 980px);
  padding: clamp(112px, 14vh, 168px) 0 clamp(70px, 8vw, 112px);
  overflow: clip;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(103deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 96%, transparent) 36%, color-mix(in srgb, var(--paper) 58%, transparent) 68%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 9.9vw, rgb(10 11 13 / .035) 10vw calc(10vw + 1px));
}
.hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 23%;
  content: "";
  background: linear-gradient(to bottom, transparent, var(--paper));
}
.hero-field {
  position: absolute;
  z-index: -2;
  inset: -18% -12% -24% 31%;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(80% 58% at 84% 14%, color-mix(in srgb, var(--brand) 33%, transparent), transparent 70%),
    radial-gradient(72% 56% at 66% 73%, color-mix(in srgb, var(--ember) 26%, transparent), transparent 73%),
    radial-gradient(58% 64% at 106% 48%, color-mix(in srgb, #a967cc 22%, transparent), transparent 74%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
}
.hero-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image: linear-gradient(rgb(10 11 13 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(10 11 13 / .08) 1px, transparent 1px);
  background-position: 0 0, 0 0;
  background-size: 10vw 10vw;
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 72%);
  mask-image: linear-gradient(100deg, #000, transparent 72%);
}
.hero-top { margin-bottom: clamp(28px, 4vw, 48px); }
.hero h1 { max-width: 12ch; margin-bottom: clamp(34px, 5vw, 62px); }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(28px, 6vw, 110px); }
.hero-foot .actions { justify-content: flex-end; }
.hero-foot .fine { grid-column: 1 / -1; margin-top: -4px; }

@media (prefers-reduced-motion: no-preference) {
  .intro .hero-field { animation: fieldIn 1.6s var(--ease) both; }
  .intro .hero-grid { animation: gridIn 1.8s var(--ease) .05s both; }
  .intro .hero-top { animation: riseIn .72s var(--ease) .08s both; }
  .intro .hero-top::before { animation: ruleIn .72s var(--ease) both; }
  .intro .display .l1 > .line-ink,
  .intro .display .l2 > .line-ink,
  .intro .display .l3 > .line-ink { animation: lineIn .9s var(--ease) both; }
  .intro .display .l1 > .line-ink { animation-delay: .12s; }
  .intro .display .l2 > .line-ink { animation-delay: .24s; }
  .intro .display .l3 > .line-ink { animation-delay: .36s; }
  .intro .display .line-ink { will-change: transform, opacity, filter; }
  .intro .hero-foot .lede { animation: riseIn .78s var(--ease) .9s both; }
  .intro .hero-foot .actions { animation: riseIn .78s var(--ease) 1.02s both; }
  .intro .hero-foot .fine { animation: riseIn .78s var(--ease) 1.14s both; }
  .intro .proof-strip { animation: riseIn .78s var(--ease) 1.26s both; }
  @keyframes fieldIn {
    from { opacity: 0; transform: scale(.76) translate3d(5vw, -2vh, 0); }
    to { opacity: .9; transform: none; }
  }
  @keyframes gridIn {
    from { opacity: 0; transform: translate3d(3vw, -1vh, 0) scale(1.06); }
    to { opacity: .36; transform: none; }
  }
  @keyframes ruleIn { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
  @keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes lineIn {
    from {
      opacity: 0;
      transform: translate3d(0, .7em, 0) scale(.97);
      filter: blur(7px);
    }
    to { opacity: 1; transform: none; filter: none; }
  }
}

/* Keep the full three-line statement in the opening frame on short desktop
   viewports without reducing the line box that protects the g descender. */
@media (min-width: 701px) and (max-height: 600px) {
  .hero { padding-top: 76px; padding-bottom: 54px; }
  .hero-top { margin-bottom: 8px; }
  .display { font-size: clamp(4.25rem, 9vw, 7rem); }
}

/* --------------------------------------------------------- proof / marquee */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(54px, 7vw, 96px);
  border-top: 2px solid var(--ink);
}
.proof-strip > div { min-width: 0; padding: 17px 20px 4px 0; }
.proof-strip > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.proof-strip dt { margin-bottom: 7px; color: var(--brand-deep); font: 700 11px/1 var(--mono); letter-spacing: .12em; }
.proof-strip dt, .metric dt, .process-list .n, .path-step .n { font-variant-numeric: tabular-nums; }
.proof-strip dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.marq { position: relative; z-index: 2; overflow: hidden; color: var(--paper); background: var(--ink); }
.marq ul { display: flex; gap: 54px; width: max-content; margin: 0; padding: 16px 0; list-style: none; animation: marq 35s linear infinite; }
.marq li { white-space: nowrap; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@keyframes marq { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- sections */

.section { position: relative; padding: clamp(88px, 11vw, 168px) 0; }
.section-head { max-width: 900px; margin-bottom: clamp(42px, 5vw, 72px); }
.section-head .label { margin-bottom: 23px; }
.section-head h2 { max-width: 15ch; }
.section-head p { max-width: 54ch; margin-top: 24px; color: var(--ink-soft); font-size: 1.05rem; }
.dark-band { position: relative; isolation: isolate; overflow: clip; color: var(--paper); background: var(--ink); }
.dark-band::after { position: absolute; z-index: -1; top: -35%; right: -10%; width: 60vw; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 32%, transparent), transparent 68%); opacity: .7; }
.dark-band .label { color: var(--paper); }
.dark-band .lede, .dark-band .section-head p { color: var(--muted-on-dark); }
.dark-band .dim { color: color-mix(in srgb, var(--paper) 48%, transparent); }
.dark-band::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .12; background-image: linear-gradient(rgb(255 255 255 / .14) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .14) 1px, transparent 1px); background-size: 14vw 14vw; -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.metric { min-width: 0; padding: clamp(26px, 3.4vw, 46px) clamp(18px, 2.5vw, 34px); background: var(--ink); }
.metric dt { color: var(--paper); font: 760 clamp(3.7rem, 6.8vw, 6.6rem)/.82 var(--display); letter-spacing: -.065em; }
.metric dd { max-width: 19ch; margin: 20px 0 0; color: var(--muted-on-dark); font-size: 14px; line-height: 1.45; }
.metric-note { max-width: 62ch; margin-top: 34px; color: var(--muted-on-dark); font-size: 15px; }

/* ----------------------------------------------------------- proof compare */

.compare-frame { margin: 0; border-top: 2px solid var(--ink); }
.compare-heading { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; color: var(--ink-soft); font: 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.compare-heading span:last-child { color: var(--brand-deep); }
.compare-shell { position: relative; overflow: clip; border: 1px solid var(--line); background: var(--paper-2); box-shadow: 0 34px 80px -56px rgb(10 11 13 / .75); }
.compare { position: relative; aspect-ratio: 16 / 10; overflow: clip; cursor: ew-resize; touch-action: none; user-select: none; }
.compare-pane { position: absolute; inset: 0; }
.compare-pane img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pane-before { z-index: 1; }
.pane-after { z-index: 2; clip-path: inset(0 0 0 var(--split, 50%)); }
.compare-handle { position: absolute; z-index: 3; inset-block: 0; left: var(--split, 50%); width: 1px; background: var(--white); transform: translateX(-.5px); box-shadow: 0 0 0 1px rgb(10 11 13 / .25); }
.compare-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; min-width: 58px; height: 40px; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 3px; box-shadow: 0 8px 22px -12px rgb(10 11 13 / .8); cursor: grab; transform: translate(-50%, -50%); font: 700 13px/1 var(--mono); }
.compare-knob:active { cursor: grabbing; }
.compare-tag { position: absolute; top: 16px; padding: 6px 9px; color: var(--white); background: rgb(27 23 23 / .86); font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tag-before { left: 16px; }
.tag-after { right: 16px; color: var(--ink); background: var(--ember); }
.compare-frame figcaption { padding-top: 15px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.compare-frame figcaption strong { color: var(--ink); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-card { position: relative; min-height: 300px; padding: clamp(24px, 3vw, 40px); background: var(--paper); transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.feature-card:hover { z-index: 1; color: var(--paper); background: var(--plum); transform: translateY(-6px); }
.feature-card .n { display: block; margin-bottom: clamp(54px, 7vw, 100px); color: var(--brand-deep); font: 700 11px/1 var(--mono); letter-spacing: .12em; }
.feature-card:hover .n { color: var(--ember); }
.feature-card h3 { max-width: 11ch; margin-bottom: 13px; }
.feature-card p { max-width: 28ch; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.feature-card:hover p { color: var(--muted-on-dark); }

.process-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid currentColor; }
.process-list li { display: grid; grid-template-columns: clamp(64px, 9vw, 140px) minmax(180px, .8fr) minmax(0, 1.1fr); gap: clamp(16px, 4vw, 56px); align-items: baseline; padding: 27px 0; border-bottom: 1px solid var(--line); }
.dark-band .process-list li { border-color: rgb(255 255 255 / .17); }
.process-list .n { color: var(--brand-deep); font: 760 clamp(2.3rem, 4vw, 4rem)/.85 var(--display); letter-spacing: -.06em; }
.dark-band .process-list .n { color: var(--ember); }
.process-list h3 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); }
.process-list p { max-width: 42ch; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.dark-band .process-list p { color: var(--muted-on-dark); }

/* ------------------------------------------------------------ sub-pages */

.subhero { position: relative; isolation: isolate; padding: clamp(150px, 20vh, 225px) 0 clamp(74px, 9vw, 126px); overflow: clip; }
.subhero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(112deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 55%, color-mix(in srgb, var(--rose) 32%, var(--paper)) 100%); }
.subhero::after { position: absolute; z-index: -1; right: -8%; bottom: -35%; width: 54vw; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%); }
.subhero .label { margin-bottom: 28px; }
.subhero h1 { max-width: 12ch; font-size: clamp(4rem, 10.7vw, 10rem); line-height: .94; }
.subhero .lede { margin-top: 34px; }
.page-kicker { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.work-lab { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(34px, 8vw, 120px); align-items: start; }
.work-lab > .section-head { position: sticky; top: 120px; margin: 0; }
.lab-stack { display: grid; gap: 14px; }
.lab-card { position: relative; min-height: 220px; padding: clamp(25px, 3vw, 42px); overflow: clip; border: 1px solid var(--line); background: var(--paper-2); }
.lab-card::after { position: absolute; right: -15%; bottom: -50%; width: 65%; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%); }
.lab-card:nth-child(2) { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.lab-card:nth-child(2) p { color: var(--muted-on-dark); }
.lab-card:nth-child(3) { background: #e5d4cf; }
.lab-card .label { position: relative; z-index: 1; margin-bottom: 43px; }
.lab-card h3, .lab-card p { position: relative; z-index: 1; }
.lab-card h3 { max-width: 12ch; margin-bottom: 12px; }
.lab-card p { max-width: 34ch; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.audit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); }
.audit-list div { min-height: 160px; padding: 24px; background: var(--paper); }
.audit-list strong { display: block; color: var(--brand-deep); font: 700 12px var(--mono); letter-spacing: .1em; }
.audit-list span { display: block; margin-top: 34px; font-weight: 650; }

.path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.path-step { min-height: 340px; padding: 25px; background: var(--paper); }
.path-step:nth-child(2) { background: #eaded7; }
.path-step:nth-child(3) { color: var(--paper); background: var(--ink); }
.path-step:nth-child(4) { background: var(--brand); }
.path-step .n { display: block; color: var(--brand-deep); font: 760 4.5rem/.8 var(--display); letter-spacing: -.08em; }
.path-step:nth-child(3) .n, .path-step:nth-child(4) .n { color: var(--paper); }
.path-step h3 { margin-top: 96px; font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
.path-step p { margin-top: 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.path-step:nth-child(3) p { color: var(--muted-on-dark); }
.path-step:nth-child(4) p { color: var(--ink); }

.ownership { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 8vw, 120px); align-items: end; }
.ownership h2 { max-width: 10ch; }
.ownership-copy { max-width: 43ch; color: var(--muted-on-dark); }
.ownership-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 34px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.ownership-list div { padding: 22px; background: var(--ink); }
.ownership-list strong { display: block; color: var(--paper); font: 650 15px var(--display); }
.ownership-list span { display: block; margin-top: 8px; color: var(--muted-on-dark); font-size: 13px; }

/* -------------------------------------------------------------- contact */

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .65fr); gap: clamp(48px, 9vw, 140px); align-items: start; }
.contact-form { max-width: 660px; border-top: 2px solid var(--ink); }
.field { padding: 19px 0 20px; border-bottom: 1px solid var(--line); }
.field label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 650; }
.field label span { color: var(--ink-soft); font-weight: 400; }
.field input, .field textarea { display: block; width: 100%; min-height: 48px; padding: 8px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; outline: 0; font: inherit; font-size: 16px; transition: border-color .25s var(--ease); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--brand); }
.field textarea { min-height: 145px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 86%, transparent); }
/* `.field input` outranks the global :focus-visible rule, so the form controls
   lost their focus ring entirely. Re-assert it at the same specificity. */
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-bottom-color: var(--brand);
}
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-form .btn { margin-top: 28px; }
.hint { max-width: 55ch; margin-top: 17px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.contact-aside { border-top: 2px solid var(--ink); }
.aside-block { padding: 25px 0 28px; border-bottom: 1px solid var(--line); }
.aside-block .label { margin-bottom: 15px; }
.aside-block h3 { margin-bottom: 9px; }
.aside-block p { max-width: 35ch; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.email-link { display: inline-block; margin-top: 15px; color: var(--brand-deep); font-weight: 700; overflow-wrap: anywhere; }
.copy-feedback { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
.next-list { margin: 0; padding-left: 1.2em; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.next-list li { margin-bottom: 8px; }

/* --------------------------------------------------------------- footer */

.site-footer { padding: clamp(54px, 7vw, 90px) 0 48px; color: var(--ink-soft); font-size: 14px; border-top: 1px solid var(--line); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 42px; }
.foot-grid p { margin-bottom: 7px; }
.footer-name { color: var(--ink); font: 700 17px var(--display); letter-spacing: -.025em; }
.footer-note { max-width: 44ch; margin-top: 22px !important; font-size: 13px; }
.legal { margin-top: 13px !important; font-size: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; }
.foot-links a { font-weight: 650; text-decoration: none; }
.foot-links a:hover { color: var(--brand-deep); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .header-cta { display: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .work-lab { grid-template-columns: 1fr; gap: 44px; }
  .work-lab > .section-head { position: static; }
  .path { grid-template-columns: 1fr 1fr; }
  .ownership { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .site-header { padding: 15px 0; }
  .brand img.full { display: none; }
  .brand img.mark { display: block; }
  .nav { gap: 15px; }
  .nav-links { gap: 14px; }
  .nav-link { font-size: 12px; }
  .hero { min-height: auto; padding-top: 145px; }
  .hero::before { background: linear-gradient(175deg, var(--paper) 0%, var(--paper) 44%, color-mix(in srgb, var(--paper) 78%, transparent) 75%, transparent 100%); }
  .hero-field { inset: 52% -40% -18% -20%; opacity: .56; }
  .hero-grid { opacity: .22; background-size: 24vw 24vw; }
  .display { font-size: clamp(3.35rem, 15.3vw, 6.3rem); line-height: 1.28; letter-spacing: -.06em; }
  .display .l2, .display .l3 { padding-left: 0; }
  .hero h1 { margin-bottom: 36px; }
  .hero-foot { grid-template-columns: 1fr; gap: 25px; }
  .hero-foot .actions { align-items: stretch; justify-content: stretch; }
  .hero-foot .actions .btn { width: 100%; }
  .hero-foot .fine { grid-column: auto; margin-top: 0; }
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-strip > div { padding: 15px 13px 16px 0; }
  .proof-strip > div + div { padding-left: 13px; }
  .proof-strip > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof-strip > div:nth-child(4) { border-top: 1px solid var(--line); }
  .marq ul { gap: 36px; }
  .compare-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .compare { aspect-ratio: 3 / 4; }
  .compare-tag { top: 12px; font-size: 9px; }
  .tag-before { left: 12px; }
  .tag-after { right: 12px; }
  .compare-knob { width: 54px; min-width: 54px; }
  .section { padding: 82px 0; }
  h2 { font-size: clamp(2.5rem, 11vw, 4.3rem); }
  .metric-grid, .feature-grid, .path, .audit-list, .ownership-list { grid-template-columns: 1fr; }
  .metric { min-height: 180px; }
  .feature-card { min-height: 255px; }
  .feature-card .n { margin-bottom: 55px; }
  .process-list li { grid-template-columns: 55px 1fr; gap: 14px; padding: 25px 0; }
  .process-list p { grid-column: 2; }
  .subhero { padding-top: 140px; }
  .subhero h1 { font-size: clamp(3.7rem, 14vw, 6.5rem); }
  .page-kicker { display: block; line-height: 1.8; }
  .page-kicker span { display: block; }
  .contact-layout { grid-template-columns: 1fr; gap: 62px; }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .footer-note { max-width: 37ch; }
}

@media (max-width: 420px) {
  .nav-links { gap: 9px; }
  .nav-link { font-size: 11px; }
  .display { font-size: clamp(3.05rem, 15.3vw, 4.5rem); }
}

@view-transition { navigation: auto; }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: 360ms; animation-timing-function: var(--ease); object-fit: cover; }

/* ==========================================================================
   AUDIT FIX — the subhero glow never rendered on phones
   --------------------------------------------------------------------------
   `.subhero::after` is sized 54vw with `bottom: -35%`. On a 390px viewport
   that computes to a 210px circle whose top lands at ~804px inside a 752px
   section — and .subhero is `overflow: clip`, so it was clipped away entirely.
   Desktop showed the glow, phones showed none: the contact and approach heroes
   rendered differently on the device a lead is most likely to open them on.

   Sized and offset so it always overlaps the section it belongs to.
   ========================================================================== */
@media (max-width: 700px) {
  .subhero::after {
    width: 96vw;
    right: -26%;
    bottom: -14%;
  }
}

/* ==========================================================================
   FIX — the before/after study was unreadable and un-zoomable on phones
   --------------------------------------------------------------------------
   The artwork is a 1600-unit-wide SVG rendering into ~350px on a 390px phone,
   a 0.22 scale. font-size="11.5" therefore paints at ~2.5px and the largest
   body text at ~5.9px. `touch-action: none` — needed so the browser does not
   steal the horizontal drag — also blocked pinch-zoom, so the reader could
   neither read it nor magnify it.

   `pan-y pinch-zoom` keeps horizontal gestures for the slider while handing
   vertical scroll and pinch back to the browser. The case study is the most
   persuasive thing on the page; it has to survive a phone.
   ========================================================================== */
.compare { touch-action: pan-y pinch-zoom; }

@media (max-width: 700px) {
  /* more height per unit of width, so the artwork renders larger */
  .compare { aspect-ratio: 4 / 5; }
  .compare img, .compare svg { object-fit: cover; object-position: left top; }
}