/* ==================================================================
   ADRIENNE WYLDER, v2
   Same palette as v1. The change is hierarchy: type and space carry
   the structure instead of cards. Rule of thumb for this file, if you
   are tempted to draw a box around something, set it in a larger size
   and give it more room instead.
   ================================================================== */

:root {
  /* Off-black and cobalt. Chosen against the AI-default warm beige plus brass
     family. The dark product captures sit as objects rather than glowing. */
  --bg:           #0a0a0b;
  --bg-2:         #101013;
  --card:         #141418;
  --ink:          #f2f0ed;
  --ink-soft:     #a9a7a3;
  --ink-faint:    #8e8c88;
  --accent:       #6d93ff;
  --accent-deep:  #3f68d6;
  --accent-lift:  #94b0ff;
  --accent-tint:  rgba(109, 147, 255, 0.08);
  --accent-edge:  rgba(109, 147, 255, 0.30);
  --line:         #1d1d22;
  --line-strong:  #2c2c33;
  --field-line:   #6f6f78;
  --ok:           #4fb07c;
  /* these two were hardcoded until the site had to work in two grounds */
  --nav-bg:       rgba(10, 10, 11, 0.86);
  --on-accent:    #0a0a0b;
  --ease:         cubic-bezier(0.25, 0.8, 0.35, 1);
  --nav-h:        68px;
  --serif:        'Newsreader', Georgia, serif;
  --sans:         'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:         var(--sans);
  --edge:         clamp(22px, 6vw, 96px);
  --measure:      62ch;
  --band:         clamp(150px, 23vh, 300px);
  /* DEPROGRAM inverts: on a dark site, violet on near-black shares a family
     with the cobalt accent and the section edge disappears. The one light
     band in a black site is the sharpest moment on the page. */
  --dp-bg:        #ece9f6;
  --dp-ink:       #1a1030;
  --dp-accent:    #4a2d9e;
  --dp-soft:      #4c4462;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
/* height:auto is load-bearing: with width/height attributes on the tag,
   max-width alone leaves the attribute height in place and stretches the image. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

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

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--edge); }
.wide { width: min(1420px, 100%); margin-inline: auto; padding-inline: var(--edge); }

/* ---------- small shared pieces ---------- */

.eyebrow {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint); display: block;
}
.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.55;
  color: var(--ink-soft); max-width: var(--measure); font-weight: 400;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--bg); padding: 14px 20px;
  font-family: var(--sans); font-size: 0.8rem;
}
.skip:focus { left: 12px; top: 12px; }

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

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.005em;
  text-decoration: none; padding: 15px 28px; min-height: 48px;
  border-radius: 2px; white-space: nowrap;
  /* never transition `all` here: it catches outline-width and makes the
     focus ring fade in instead of appearing */
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn-primary:hover { background: var(--accent-lift); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-lift); }
.btn .arrow { transition: transform 0.28s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.005em;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-edge); padding-bottom: 3px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tlink:hover { color: var(--accent-lift); border-color: var(--accent-lift); }
/* pointer target clears 44px without shifting the rule under the text.
   -8px gave 43.4px, which missed the bar it was written to hit. */
.tlink::after { content: ''; position: absolute; inset: -9px -6px; }
.tlink .arrow { transition: transform 0.25s var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }

/* Press feedback. Every pressable thing confirms it heard you, at a duration
   short enough to read as instant. Nothing on the site had an :active state. */
.btn:active, .cform-btn:active, .tlink:active { transform: scale(0.97); }
.btn, .cform-btn, .tlink { transition-duration: 0.16s; }

/* Hover effects that move things are gated behind a real pointer. On touch
   they latch after a tap and read as a stuck state. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .project-media a:hover img { transform: scale(1.012); }
}

/* ---------- nav ---------- */

nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner {
  height: 100%; width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand { font-family: var(--serif); font-size: 1.02rem; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; height: 100%; }
.nav-links { display: flex; align-items: stretch; gap: 30px; height: 100%; }
/* The link box was 23.9px tall, a tenth of a pixel under the 24px AA
   minimum and nowhere near the 44px this site sets for itself. Filling the
   nav height costs nothing visually. */
.nav-links a {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 450; letter-spacing: 0.005em;
  color: var(--ink-soft); text-decoration: none; transition: color 0.22s var(--ease);
  display: inline-flex; align-items: center; align-self: stretch;
}
.nav-links a.btn { align-self: center; }
.nav-links a:hover, .nav-links a.is-here { color: var(--accent); }
.nav-links .btn { padding: 10px 20px; min-height: 40px; font-size: 0.84rem; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; font: inherit; width: 44px; height: 44px; padding: 10px; margin-right: -10px; }
.nav-toggle-bar { display: block; height: 1.5px; background: var(--ink); margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px var(--edge) 28px; display: none; flex-direction: column;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 900px) { .nav-links { display: none; } .nav-toggle { display: block; } }
/* The legacy pages carried a min-width guard and these did not, so only half
   the site was safe against the menu showing on desktop. The JS resize handler
   closed it, but CSS should not depend on JS for this. */
@media (min-width: 901px) { .mobile-menu, .mobile-menu.is-open { display: none; } }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==================================================================
   01  HERO
   One statement, one sentence, two actions. Nothing else competes.
   ================================================================== */

.hero {
  min-height: min(96vh, 1000px);
  min-height: min(96dvh, 1000px);
  display: flex; flex-direction: column; justify-content: center;
  /* Trimmed so the hero clears a 768px-tall viewport. It used to end at
     786px against 768, an 18px overflow. */
  padding-block: calc(var(--nav-h) + clamp(44px, 6vh, 96px)) clamp(56px, 9vh, 150px);
}
.hero h1 {
  font-size: clamp(3.1rem, 11vw, 9.5rem); line-height: 1.04; font-weight: 300;
  letter-spacing: -0.035em; margin-bottom: clamp(34px, 5.5vh, 68px);
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.hero .lede { margin-bottom: clamp(30px, 4.5vh, 56px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }

/* ==================================================================
   02  THE STATEMENT
   The positioning line gets a band of its own. It is the whole pitch,
   so nothing shares the screen with it. The Premise section that used
   to sit above this one made the same argument in two paragraphs and
   was cut; this says it in one sentence.
   ================================================================== */

.statement { padding-block: calc(var(--band) * 1.15); border-top: 1px solid var(--line); }
.statement h2 {
  font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: 1.12; font-weight: 300;
  letter-spacing: -0.035em; max-width: 15ch;
}
.statement h2 em { font-style: italic; color: var(--accent); }
.statement p {
  margin-top: clamp(40px, 6vh, 70px); color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 54ch;
}

/* ==================================================================
   04  WORK
   The products are the artwork. Title, then a full-width capture of
   the real thing, then three facts on one line. No cards, no badges.
   ================================================================== */

.work { padding-block: var(--band) calc(var(--band) * 0.6); }
.section-head { margin-bottom: clamp(60px, 10vh, 130px); }
.section-head h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 300; margin-top: 18px; max-width: 20ch; }
.section-head > h2:first-child { margin-top: 0; }
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head .lede { margin-top: 20px; }
.section-head .lede a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-edge); }
.section-head .lede a:hover { color: var(--accent-lift); border-color: var(--accent-lift); }

.project { padding-block: clamp(90px, 16vh, 200px) 0; }
.project-head { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; }
.project h3 { font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.project-desc { color: var(--ink-soft); max-width: 54ch; margin-top: 22px; font-size: 1.08rem; }
.project-media { margin-top: clamp(38px, 6vh, 64px); }
.project-media img {
  width: 100%; border-radius: 4px; border: 1px solid #26262d;
  transition: transform 0.4s var(--ease);
}
.project-media a { display: block; overflow: hidden; border-radius: 4px; }

.project-foot {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 16px 30px;
  align-items: baseline; justify-content: space-between;
}
.project-facts { font-family: var(--sans); font-size: 0.92rem; letter-spacing: 0; color: var(--ink-faint); }
@media (max-width: 600px) { .project-facts { line-height: 2; } }

/* Two smaller projects share a row. Four identical full-width bands was one
   layout family four times running, and it gave a volunteer project the same
   weight as the flagship platforms. */
.project-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px);
  padding-block: clamp(90px, 16vh, 200px) 0;
}
.project-pair .project { padding-block: 0; }
.project-pair .project h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.project-pair .project-desc { font-size: 1rem; max-width: none; }
.project-pair .project-media { margin-top: clamp(26px, 4vh, 40px); }
.project-pair .project-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
@media (max-width: 820px) { .project-pair { grid-template-columns: 1fr; gap: clamp(50px, 9vh, 90px); } }

.casestudy {
  margin-top: var(--band); padding-block: clamp(60px, 9vh, 104px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center;
}
.casestudy h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; margin: 14px 0 12px; }
.casestudy p { color: var(--ink-soft); max-width: 60ch; font-size: 0.98rem; }
@media (max-width: 760px) { .casestudy { grid-template-columns: 1fr; gap: 22px; } }


/* ==================================================================
   06  DEMOS
   ================================================================== */

.demos { padding-block: var(--band); border-top: 1px solid var(--line); background: var(--bg-2); }
.demo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-strong); border-block: 1px solid var(--line-strong); }
.demo { background: var(--bg-2); padding: clamp(30px, 4vw, 52px) clamp(24px, 3vw, 42px); text-decoration: none; display: flex; flex-direction: column; min-height: 320px; transition: background 0.35s var(--ease); }
.demo:hover { background: var(--card); }
.demo h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 300; margin: 0 0 14px; line-height: 1.18; }
.demo p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.demo .tlink { margin-top: 26px; align-self: flex-start; }
.demo-note { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin-top: 30px; letter-spacing: 0.04em; }
@media (max-width: 900px) { .demo-list { grid-template-columns: 1fr; } .demo { min-height: 0; } }

/* ==================================================================
   07  CAPABILITIES
   One headline price each. The $95 kits are a footnote, not a peer.
   ================================================================== */

.caps { padding-block: var(--band); }
.cap-grid { display: block; }
/* Mobile first, deliberately. The desktop three-column layout and every
   grid-area that goes with it live in the min-width block below, so the
   small-screen stack never has to win a specificity fight to undo them.
   The rule this replaces was `minmax(0, .34fr) minmax(0, 1fr) auto`, and
   `auto` sizes to max-content before any fr track is fed, so the description
   took the whole row and columns one and two computed to 0px. The name, the
   diagnosis and the price collapsed on top of each other at every desktop
   width. */
.cap {
  display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start;
  padding-block: clamp(34px, 5vh, 60px); border-top: 1px solid var(--line);
}
.cap:last-child { border-bottom: 1px solid var(--line); }

.cap h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 300; margin: 0; letter-spacing: 0.02em; }
.cap h3 span { color: var(--accent); }
.cap p { color: var(--ink-soft); font-size: 0.98rem; }
/* the one-line diagnosis above each capability's detail */
.cap p.cap-when { color: var(--ink); font-size: 1.08rem; margin-bottom: 0; }

.cap-price {
  font-family: var(--sans); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500;
  color: var(--ink); margin: 0; white-space: nowrap;
}
.cap-fine { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); margin-top: 8px; }
.caps-foot { margin-top: clamp(56px, 9vh, 110px); padding-top: clamp(38px, 5vh, 60px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.caps-foot p { color: var(--ink-soft); max-width: 52ch; }
@media (min-width: 861px) {
  .cap {
    grid-template-columns: minmax(6rem, 0.3fr) minmax(0, 1fr) minmax(9rem, 14rem);
    grid-template-areas: "name when price"
                         "name body fine";
    column-gap: clamp(18px, 4vw, 56px); row-gap: 14px;
  }
  .cap h3         { grid-area: name; }
  .cap p.cap-when { grid-area: when; min-height: 3.4em; }
  .cap .cap-body  { grid-area: body; }
  .cap .cap-price { grid-area: price; text-align: right; }
  .cap .cap-fine  { grid-area: fine;  text-align: right; }
}

/* The one piece of third-party proof on the page, and it sits with the
   prices deliberately: a number and the reason to believe it should not
   be two scroll events apart. */
.cap-proof {
  margin-top: clamp(38px, 5vh, 62px);
  padding: clamp(24px, 3.2vh, 34px) clamp(22px, 3vw, 38px);
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--bg-2);
}
.cap-proof-label {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.cap-proof-body { color: var(--ink-soft); max-width: 70ch; margin: 0; }

/* ==================================================================
   08  THE RANGE
   ================================================================== */

.range { padding-block: var(--band); border-top: 1px solid var(--line); }
.range-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: clamp(34px, 6vw, 90px); align-items: start; }
.range-photo img { width: 100%; border-radius: 3px; filter: grayscale(0.2) saturate(0.92); }
.range h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; font-weight: 300; margin: 20px 0 30px; }
.range h2 em { font-style: italic; color: var(--accent); }
.range p { color: var(--ink-soft); max-width: var(--measure); }
.range p + p { margin-top: 1.3em; }
.range .tlink { margin-top: 36px; }
/* the industries, set as a list rather than a sentence of commas */
.range-list { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 300; color: var(--ink); line-height: 1.5; margin: 26px 0 30px; }
@media (max-width: 860px) { .range-grid { grid-template-columns: 1fr; gap: 34px; } .range-photo { max-width: 380px; } }

/* ==================================================================
   09  DEPROGRAM
   Deliberately not her client work: her own brand violet, near-black,
   and a different type treatment so the eye registers the change.
   ================================================================== */

.dp {
  padding-block: calc(var(--band) * 1.1);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(88, 33, 196, 0.10) 0%, rgba(88, 33, 196, 0) 62%),
    var(--dp-bg);
  border-block: 1px solid #d6cfe9;
}
.dp-inner { text-align: center; max-width: 780px; margin-inline: auto; }
.dp .eyebrow { color: #6a55a0; }
/* 38 characters of sentence. It was set as an 11px tracked-caps eyebrow,
   which is what all-caps-body is for. */
.dp-intro { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.01em; color: #6a55a0; margin: 0; }
.dp p.dp-hook {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.2; color: var(--dp-accent);
  margin-top: 30px;
}
.dp h2 {
  font-size: clamp(2.8rem, 8vw, 6rem); font-weight: 400; letter-spacing: 0.06em;
  margin: 26px 0 0; color: var(--dp-ink);
}
.dp h2 sup { font-size: 0.28em; letter-spacing: 0; vertical-align: super; opacity: 0.7; }
.dp p { color: var(--dp-soft); margin-top: 28px; font-size: 1.05rem; }
.dp .tlink { margin-top: 40px; color: var(--dp-accent); border-color: rgba(74, 45, 158, 0.35); }
.dp .tlink:hover { color: #2f1a72; border-color: #2f1a72; }

/* ==================================================================
   10  CONTACT
   ================================================================== */

.contact { padding-block: var(--band); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.contact h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.03em; }
.contact h2 em { font-style: italic; color: var(--accent); }
.contact-lead p { color: var(--ink-soft); margin-top: 28px; max-width: 42ch; }
.contact-alt { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.contact-status {
  margin-top: 22px; font-size: 0.85rem; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px;
}
.contact-kicker {
  margin-top: clamp(50px, 8vh, 90px); font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem); font-weight: 300; color: var(--accent);
}

form label { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
form input, form textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--field-line);
  color: var(--ink); font-family: var(--sans); font-size: 1rem; padding: 12px 0 14px;
  border-radius: 0; transition: border-color 0.25s var(--ease);
}
form input:focus, form textarea:focus { outline: none; border-bottom-color: var(--accent); }
form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
form .field + .field { margin-top: 32px; }
form .cform-btn {
  margin-top: 36px; background: var(--accent); color: var(--on-accent); border: 0;
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; font-weight: 500;
  padding: 16px 30px; min-height: 48px; border-radius: 2px; cursor: pointer;
  transition: background 0.25s var(--ease);
}
form .cform-btn:hover { background: var(--accent-lift); }
.cform-note { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); margin-top: 18px; line-height: 1.6; }
.cform-status { margin-top: 14px; font-size: 0.88rem; min-height: 1.2em; }
.cform-status.ok { color: var(--ok); }
.cform-status.err { color: var(--accent-lift); }
.cform-status a { color: var(--accent-lift); }
.hp { position: absolute; left: -9999px; }
input.invalid, textarea.invalid { border-bottom-color: var(--accent-lift); }
.cform-ok-box { border: 1px solid var(--accent-edge); border-radius: 3px; padding: 34px 30px; background: var(--accent-tint); }
.cform-ok-box h3 { font-size: 1.5rem; font-weight: 300; margin-bottom: 12px; }
.cform-ok-box p { color: var(--ink-soft); font-size: 0.96rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 50px; } }

/* ==================================================================
   FOOTER
   ================================================================== */

footer { border-top: 1px solid var(--line); padding-block: 44px 60px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: center; }
.footer-inner span, .footer-links a { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0; color: var(--ink-faint); text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px 26px; }
.footer-links a { padding-block: 11px; }   /* 45.1px tall, clears 44 */
.footer-links a:hover { color: var(--accent); }

/* ==================================================================
   SECONDARY PAGES
   Shared by /about/ and /lab/.
   ================================================================== */

.page-head { padding-block: calc(var(--nav-h) + clamp(54px, 9vh, 130px)) clamp(50px, 8vh, 100px); }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; font-weight: 300; letter-spacing: -0.035em; margin: 22px 0 34px; }
.page-head h1 em { font-style: italic; color: var(--accent); }

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose p + p { margin-top: 1.35em; }
.prose strong { color: var(--ink); font-weight: 500; }

.band { padding-block: clamp(80px, 12vh, 170px); border-top: 1px solid var(--line); }
.band > .section-head { margin-bottom: clamp(44px, 7vh, 90px); }
.band h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.12; font-weight: 300; }
.band h2 em { font-style: italic; color: var(--accent); }

/* Eleven rows with a hairline under each was the lazy default, and the
   190px year column in front of every one of them broadcast elapsed time
   more loudly than the phrase that was removed for the same reason. Three
   clusters, three hairlines, no dates. */
.tl { margin-top: 8px; }
.tl-group { border-top: 1px solid var(--line); padding-top: clamp(26px, 4vh, 40px); }
.tl-group + .tl-group { margin-top: clamp(50px, 7vh, 90px); }
.tl-group-head {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 400; letter-spacing: 0; color: var(--ink-faint);
  margin: 0 0 clamp(24px, 3.5vh, 40px);
}
.tl-item { display: block; max-width: 74ch; }
.tl-item + .tl-item { margin-top: clamp(30px, 4.5vh, 54px); }
.tl-role { font-family: var(--serif); font-size: clamp(1.25rem, 2.3vw, 1.65rem); font-weight: 400; line-height: 1.25; }
/* Not a link, so it must not wear the colour that means "link" everywhere
   else on the site. Eleven of these read as clickable and were not. */
.tl-org { font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0; color: var(--ink-soft); margin-top: 8px; display: block; }
.tl-item ul { margin: 18px 0 0; padding: 0; list-style: none; }
.tl-item li { color: var(--ink-soft); font-size: 0.96rem; padding-left: 20px; position: relative; }
.tl-item li + li { margin-top: 10px; }
.tl-item li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--accent-deep); }
.tl-item .tlink { margin-top: 18px; }
/* no timeline-specific mobile rule needed: .tl-item is a block now */

.kit-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(16px, 4vw, 54px); padding-block: 28px; border-top: 1px solid var(--line); align-items: baseline; }
.kit-row:last-child { border-bottom: 1px solid var(--line); }
.kit-row h3 { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.kit-items { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.9; }
.kit-foot { margin-top: 34px; }
@media (max-width: 760px) { .kit-row { grid-template-columns: 1fr; gap: 10px; } }

.tlink-sm { font-size: 0.74rem; }
.tlink-sm::after { inset: -13px -6px; }
.lab-cta { margin-top: 26px; }
.lab-note { font-family: var(--sans); font-size: 0.88rem; line-height: 1.8; color: var(--ink-faint); border-left: 1px solid var(--accent-deep); padding-left: 22px; max-width: 60ch; margin-top: 34px; }
.lab-item { padding-block: clamp(56px, 9vh, 120px); border-top: 1px solid var(--line); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
/* The alternating left-image / right-image zigzag ran five items deep.
   The cap is two. One feature board on top, the rest in a pair grid. */
.lab-feature .lab-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.lab-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); padding-block: clamp(56px, 9vh, 120px) 0; border-top: 1px solid var(--line); }
.lab-pairs .lab-item { padding-block: 0; border-top: 0; }
.lab-pairs .lab-grid { grid-template-columns: 1fr; gap: 22px; }
.lab-pairs .lab-item h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.lab-pairs .lab-item p { max-width: none; }
.lab-media img { width: 100%; border-radius: 3px; border: 1px solid var(--line); }
.lab-cat { font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.lab-item h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; margin: 14px 0 18px; line-height: 1.16; }
.lab-item p { color: var(--ink-soft); font-size: 0.98rem; max-width: 52ch; }
.lab-specs { margin-top: 26px; }
.lab-spec { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); }
.lab-spec:last-child { border-bottom: 1px solid var(--line); }
.lab-spec .k { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sw span { width: 22px; height: 22px; border-radius: 2px; border: 1px solid rgba(240,232,216,0.14); }
@media (max-width: 860px) {
  .lab-grid, .lab-feature .lab-grid { grid-template-columns: 1fr; gap: 26px; }
  .lab-pairs { grid-template-columns: 1fr; gap: clamp(50px, 9vh, 90px); }
  .lab-item:nth-child(even) .lab-media { order: 0; }
}

.endcta { padding-block: clamp(80px, 12vh, 170px); border-top: 1px solid var(--line); }
.endcta h2 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.06; font-weight: 300; letter-spacing: -0.03em; max-width: 16ch; }
.endcta h2 em { font-style: italic; color: var(--accent); }
.endcta .hero-actions { margin-top: 36px; }