/* BuildSmart Agency: the plain briefing.
   Aligned to DESIGN.md: square corners, two-curve easing, no box-shadow. */

/* ---- self-hosted fonts (DESIGN.md §11: no third-party CDN, Latin subset) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400-normal-latin.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-700-normal-latin.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: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400-italic-latin.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.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;
}

/* ---- tokens ---- */
:root {
  --paper:       #faf8f3;
  --paper-tint:  #f1e7d6;
  --wash:        #f4ead9;
  --clay:        #d8bd97;
  --terracotta:  #a14a2d;
  --accent-deep: #7d3920;
  --oxblood:     #5c2419;
  --ink:         #1c1611;
  --ink-soft:    #574d42;
  --hairline:    #e3d6bf;
  --visited:     #6b5246;
  --sev-high:    #a14a2d;
  --sev-med:     #9a7d3e;

  --measure: 66ch;
  --wrap: 720px;
  --wrap-wide: 1040px;
  --apparatus: 200px;
  --gap: 48px;

  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  /* DESIGN.md §3: type scale - documented tiers, deliberate jumps.
     --t-display is the drama tier: any section may deploy one giant
     display word or number for energy, not just statistics. */
  --t-display: clamp(3.2rem, 1rem + 7vw, 6.4rem); /* giant figures / display words */
  --t-hero:    clamp(2.4rem, 1.6rem + 2.6vw, 4rem); /* page h1 */
  --t-title:   3.3125rem;   /* section headings, 53px */
  --t-h3:      1.625rem;    /* item / sub headings */
  --t-lead:    1.3125rem;   /* intro paragraph, 21px */
  --t-body:    1.1875rem;   /* body copy, 19px */
  --t-label:   0.8125rem;   /* mono labels, 13px */

  /* DESIGN.md §5: two named curves, no bare `ease` keyword */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);  /* entrances, settling */
  --ease-ui:     cubic-bezier(0.4, 0, 0.2, 1);   /* direct interaction */
  --quick: 150ms;

  /* DESIGN.md §7: square corners always, no exceptions */
  --radius: 0;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.1875rem; /* 19px - the measured peer body-copy average */
  line-height: 1.6;
  /* DESIGN.md §12.2 micro-typography */
  font-kerning: normal;
  hanging-punctuation: first;
  transition: background .4s var(--ease-reveal), color .4s var(--ease-reveal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---- type ---- */
/* §12.2: balance headings (kills widows/orphans), pretty body */
h1, h2, h3 { font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
p { max-width: var(--measure); text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: 600; }
a { color: var(--terracotta); text-decoration: none; transition: color var(--quick) var(--ease-ui); }
a:visited { color: var(--visited); }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}

.skip {
  position: absolute; left: -999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s3); z-index: 30;
}
.skip:focus { left: var(--s3); top: var(--s3); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* ---- layout: the apparatus grid ---- */
main { display: block; }
.section { display: grid; grid-template-columns: 1fr; padding: var(--s6) var(--s4); scroll-margin-top: var(--s6); }
.wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; }

.apparatus {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.05em; color: var(--ink-soft);
  max-width: var(--wrap); margin: 0 auto var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--clay);
  display: flex; gap: var(--s3); flex-wrap: wrap;
}
/* the side numbers read as one flowing index: inactive numbers recede to
   a pale clay, the active one warms to terracotta, gliding down on scroll. */
.apparatus .num { color: var(--clay); font-weight: 500; transition: color .55s var(--ease-reveal); }
.apparatus.active .num { color: var(--terracotta); }

/* tinted sections: a single continuous peak, no held band, and a near
   subliminal warmth. Begins and ends at paper, so seams are invisible
   and there is no perceptible gradient ramp. */
.tinted {
  background: linear-gradient(var(--paper), #f8f5ef, var(--paper));
}

/* ---- opening: subtle gradient wash, no objects.
   Fills the first screen so the problem section sits below the fold;
   content is centred on screen and the title scaled up to fill it. ---- */
.opening {
  min-height: 100svh; align-content: center;
  padding-top: var(--s7); padding-bottom: var(--s7);
  background: linear-gradient(168deg, var(--wash) 0%, var(--paper) 58%);
  text-align: center;
  position: relative; overflow: hidden;
}
.opening .wrap {
  grid-column: 1 / -1; margin-inline: auto; max-width: var(--wrap-wide);
  position: relative; z-index: 1;
}
.opening h1 {
  font-size: clamp(2.8rem, 1.4rem + 4.4vw, 5.4rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
  max-width: none; margin: 0 auto var(--s4);
}
.opening .what {
  font-size: 1.3125rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 46ch; margin-inline: auto;
}
.opening .cta-row { justify-content: center; }

/* the ambient wash: a tonal gradient that drifts slowly behind every
   hero, so no first screen is fully still. Tone and light only, no
   objects; transform-animated, so it stays on the compositor. */
.opening::before {
  content: ""; position: absolute; inset: -20% -12%; z-index: 0;
  background: linear-gradient(168deg, var(--wash) 0%, var(--paper) 66%);
}
.fonts-ready .opening::before {
  animation: hero-wash 34s var(--ease-reveal) infinite alternate;
  will-change: transform;
}
@keyframes hero-wash {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -3%, 0) scale(1.07); }
}

/* hero entrance: headline words rise in, staggered; the supporting line
   follows. Applies to every page. Held hidden by .js until the webfont
   has loaded (.fonts-ready), so the entrance plays once in the final
   font, with no swap-jank. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: none; }
}
.opening h1 .w { display: inline-block; }
.js .opening h1 .w { opacity: 0; }
.js .opening:not(.opening--split) .what { opacity: 0; }
.js .opening--split .opening-aside { opacity: 0; }
.fonts-ready .opening h1 .w {
  animation: hero-rise .7s var(--ease-reveal) both;
  animation-delay: calc(var(--i, 0) * 0.05s);
  will-change: transform, opacity;
}
.fonts-ready .opening:not(.opening--split) .what {
  animation: hero-rise .7s var(--ease-reveal) both;
  animation-delay: .55s;
  will-change: transform, opacity;
}
.fonts-ready .opening--split .opening-aside {
  animation: hero-rise .7s var(--ease-reveal) both;
  animation-delay: .66s;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .opening::before { animation: none; }
  .js .opening h1 .w,
  .js .opening:not(.opening--split) .what,
  .js .opening--split .opening-aside { opacity: 1; animation: none; }
}

/* ---- home hero: asymmetric. Headline holds the left, the supporting
   line and CTA hang at the lower right. (.opening--split, home only) ---- */
.opening--split { text-align: left; }
.opening--split .wrap { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
.opening--split h1 { margin: 0; max-width: none; }
.opening--split .what { margin: 0; max-width: 36ch; }
.opening--split .opening-aside { display: flex; flex-direction: column; gap: var(--s4); }
.opening--split .cta-row { justify-content: flex-start; }

@media (min-width: 860px) {
  .opening--split .wrap {
    grid-template-columns: 1.55fr 1fr;
    align-items: start; gap: var(--s5) var(--s7);
  }
}

/* the climbing line: a flat, stalled trend that draws across, breaks,
   and climbs, then loops. The hero's proof, shown not told. */
.hero-proof { margin: 0; }
.hp-line { display: block; width: 100%; max-width: 340px; height: auto; }
.hp-axis { stroke: var(--hairline); stroke-width: 1; }
.hp-path {
  stroke: var(--terracotta); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
}
.hp-dot { fill: var(--terracotta); transform-box: fill-box; transform-origin: center; }
.hero-proof figcaption {
  margin-top: var(--s4);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* held flat-and-hidden until fonts load, then the line loops */
.js .hp-path { stroke-dashoffset: 100; }
.js .hp-dot { opacity: 0; }
.fonts-ready .hp-path { animation: line-climb 6.5s linear infinite; }
.fonts-ready .hp-dot { animation: dot-land 6.5s var(--ease-reveal) infinite; }
@keyframes line-climb {
  0%   { stroke-dashoffset: 100; opacity: 1; }
  42%  { stroke-dashoffset: 0;   opacity: 1; }
  82%  { stroke-dashoffset: 0;   opacity: 1; }
  92%  { stroke-dashoffset: 0;   opacity: 0; }
  93%  { stroke-dashoffset: 100; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes dot-land {
  0%, 40%   { opacity: 0; transform: scale(0.4); }
  48%       { opacity: 1; transform: scale(1); }
  82%       { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .opening--split::before { animation: none; }
  .js .hp-path { stroke-dashoffset: 0; animation: none; }
  .js .hp-dot { opacity: 1; animation: none; }
}

/* ---- section heads ---- */
.sec-title { font-size: 3.3125rem; margin: var(--s2) 0 var(--s4); } /* 53px - the measured peer section-heading average */
.lead { font-size: 1.3125rem; line-height: 1.5; margin-bottom: var(--s4); }
.section p + p { margin-top: var(--s3); }

/* ---- giant figures ---- */
.figures { margin-top: var(--s6); }
.figure { border-top: 2px solid var(--terracotta); padding: var(--s5) 0 var(--s6); display: grid; gap: var(--s2); }
.figure:last-child { padding-bottom: 0; }
.figure .fig-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(3.2rem, 1rem + 7vw, 6.4rem);
  font-weight: 500; line-height: 0.92; letter-spacing: -0.04em; color: var(--terracotta);
  font-variant-numeric: tabular-nums lining-nums;
}
.figure .fig-cap { font-size: 1.25rem; line-height: 1.4; max-width: var(--measure); }
.figure .fig-src {
  display: block; margin-top: var(--s2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- numbered items ---- */
.items { list-style: none; margin-top: var(--s4); }
.items li {
  display: grid; grid-template-columns: 3.5ch 1fr; gap: var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--s8);
}
.items li:last-child { border-bottom: 1px solid var(--hairline); }
.items .idx {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--terracotta); padding-top: 0.4em;
}
.items h3 { font-size: 1.25rem; margin-bottom: var(--s2); }
.deliverable { color: var(--ink-soft); margin-top: var(--s2); font-size: 1rem; }

/* ---- founder block (About) ---- */
.founder { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s4); }
.founder figure { margin: 0; align-self: flex-start; }
.founder img {
  display: block; width: 360px; max-width: 100%; height: auto;
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.founder figcaption {
  margin-top: var(--s2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.founder-text p + p { margin-top: var(--s3); }
@media (min-width: 768px) {
  .founder { flex-direction: row-reverse; align-items: flex-start; gap: var(--s6); }
  .founder figure { flex: 0 0 auto; }
  .founder-text { flex: 1; }
}

/* ---- contact form ---- */
.form { margin-top: var(--s5); max-width: var(--measure); }
.field { margin-bottom: var(--s4); }
.field label {
  display: block; margin-bottom: var(--s2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s3);
  transition: border-color var(--quick) var(--ease-ui);
}
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23161513' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  background-size: 0.7rem; padding-right: 2.4rem; cursor: pointer;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink-soft); outline: none; }
.field-optional {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.04em; text-transform: none;
  color: var(--muted); margin-left: 0.5rem; font-weight: normal;
}
.contact-direct { margin-top: var(--s6); }

/* ---- CTA / buttons ---- */
.cta-row { margin-top: var(--s5); display: flex; gap: var(--s4); flex-wrap: wrap; align-items: baseline; }
.btn {
  display: inline-block; background: var(--terracotta); color: #faf8f3;
  padding: var(--s3) var(--s5); font-size: 0.95rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius);
  transition: background var(--quick) var(--ease-ui);
}
.btn:hover { background: var(--accent-deep); text-decoration: none; }
.btn:visited { color: #faf8f3; }
.text-link { font-size: 1rem; }

/* ---- handoff ---- */
.handoff { border-top: 1px solid var(--hairline); }
.next-page { display: block; max-width: var(--wrap); margin: 0 auto; }
.next-page .np-title { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: var(--s2) 0; }
.next-page:hover { text-decoration: none; }
.next-page:hover .arrow { transform: translateX(4px); }
.arrow { display: inline-block; transition: transform var(--quick) var(--ease-ui); }

/* ---- footer ---- */
.site-foot { background: var(--oxblood); color: #faf8f3; margin-top: var(--s9); }
.foot-grid {
  max-width: var(--wrap); margin: 0 auto; padding: var(--s7) var(--s4) var(--s5);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s5);
}
.site-foot a { color: #faf8f3; display: block; padding: 2px 0; font-size: 0.875rem; }
.site-foot a:visited { color: #faf8f3; }
.site-foot a:hover { text-decoration-color: var(--clay); }
.foot-name { font-size: 1.0625rem; }
.foot-addr { color: var(--clay); margin-top: var(--s2); font-size: 0.875rem; font-style: normal; line-height: 1.5; }
.foot-intent { color: var(--clay); margin-top: var(--s2); font-size: 0.875rem; }
.foot-cred { color: var(--clay); margin-top: var(--s2); font-size: 0.875rem; }
.field-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clay); display: block; margin-bottom: var(--s2);
}
.foot-base {
  max-width: var(--wrap); margin: 0 auto; padding: var(--s4);
  border-top: 1px solid rgba(250,248,243,0.18);
  display: flex; justify-content: space-between;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.05em; color: var(--clay);
}

/* ---- motion: precise, slightly slow, never bouncy (DESIGN.md §5) ---- */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .58s var(--ease-reveal), transform .58s var(--ease-reveal);
  transition-delay: var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .arrow, body { transition: none; }
}

/* ---- responsive ---- */
@media (min-width: 640px) {
  .section { padding: var(--s7) var(--s6); }
}
@media (min-width: 1024px) {
  .section {
    padding: var(--s7) 0;
    grid-template-columns: 1fr var(--apparatus) var(--gap) var(--wrap) 1fr;
    align-items: start;
  }
  .apparatus {
    grid-column: 2; max-width: none; margin: var(--s4) 0 0;
    flex-direction: column; gap: var(--s2);
    border-bottom: 0; padding-bottom: 0;
    position: sticky; top: calc(var(--s8) + var(--s1));
  }
  .apparatus .num { font-size: 2.75rem; line-height: 0.85; }
  .wrap { grid-column: 4; margin: 0; }
  .foot-grid, .foot-base { max-width: 968px; }
}

/* ===== lower-half pacing (three-brief competition: consensus fix) ===== */

/* weighted engagement rows: varies the section unit, carries weight */
.eng-list { margin-top: var(--s5); list-style: none; border-top: 1px solid var(--hairline); }
.eng-list li {
  display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--hairline);
}
.eng-list .eng-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--terracotta); padding-top: 0.5em;
  white-space: nowrap;
}
.eng-list--dated li { grid-template-columns: 7ch 1fr; }
.eng-list .eng-name {
  display: block;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
.eng-list p { margin-top: var(--s2); color: var(--ink-soft); }

/* section 04: the four engagement stages drawn as a carousel that glides
   the cards across the screen on a continuous loop. The track holds two
   identical sets; translating it by half its width returns to an identical
   frame, so the loop is seamless. Square cards, hairline border, no shadow. */
.stage-carousel {
  grid-column: 1 / -1; /* full-bleed row under the title; the .section is a 5-col grid */
  margin-top: var(--s5); overflow: hidden;
  min-width: 0; /* grid item: let overflow clip the wide track, never stretch to it */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.stage-track {
  display: flex; width: max-content;
  animation: stage-scroll 40s linear infinite;
}
.stage-carousel:hover .stage-track { animation-play-state: paused; }
.stage-card {
  flex: 0 0 304px; margin-right: var(--s4);
  border: 1px solid var(--clay); background: var(--paper);
  padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.stage-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05em;
  color: var(--terracotta);
}
.stage-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.stage-card p { font-size: 1rem; color: var(--ink-soft); }

@keyframes stage-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-carousel { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .stage-track { animation: none; width: auto; flex-wrap: wrap; gap: var(--s4); }
  .stage-card { margin-right: 0; }
  .stage-card--dup { display: none; }
}

/* breather: one weighted statement in deliberate space (the "ma" reset).
   Spans the full section row and centres on screen, wider than the
   apparatus-offset content column the other sections sit in. */
.statement .wrap { grid-column: 1 / -1; max-width: none; }
.statement blockquote {
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.8rem);
  font-style: italic; font-weight: 400; line-height: 1.28;
  letter-spacing: -0.02em; max-width: 32ch; margin-inline: auto; color: var(--ink);
}
.statement cite {
  display: block; margin-top: var(--s4); font-style: normal;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* manifesto strip: the point of view as large statements, hairline-separated.
   Size carries the presence, not weight, the elegant large-text register. */
.manifesto { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--hairline); }
.manifesto li {
  padding: var(--s4) 0; border-bottom: 1px solid var(--hairline);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.3;
  max-width: 32ch;
}

/* ===== sticky top navigation =====
   Persistent header. DESIGN.md compliant: square corners, no box-shadow,
   hairline border carries separation, named easing curves only. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s var(--ease-ui), background .3s var(--ease-ui);
}
.site-head.scrolled { border-bottom-color: var(--clay); }
.head-inner {
  max-width: var(--wrap-wide); margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap;
}
.head-mark {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
  color: var(--ink);
}
.head-mark:visited { color: var(--ink); }
.head-mark:hover { color: var(--terracotta); text-decoration: none; }
.head-nav { display: flex; gap: var(--s4); flex-wrap: wrap; margin-left: auto; }
.head-nav a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.head-nav a:visited { color: var(--ink-soft); }
.head-nav a:hover { color: var(--terracotta); text-decoration: none; }
.head-nav a[aria-current="page"] { color: var(--terracotta); }
.head-cta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--terracotta); color: #faf8f3;
  padding: var(--s2) var(--s4); border-radius: var(--radius);
  transition: background var(--quick) var(--ease-ui);
}
.head-cta:visited { color: #faf8f3; }
.head-cta:hover { background: var(--accent-deep); text-decoration: none; }
.head-cta[aria-current="page"] { background: var(--accent-deep); }
@media (max-width: 600px) {
  .head-inner { padding: var(--s2) var(--s3); gap: var(--s2) var(--s3); }
  .head-mark { order: 1; font-size: 0.95rem; }
  .head-cta {
    order: 2; margin-left: auto;
    font-size: 0.6875rem; padding: var(--s2) var(--s3);
  }
  .head-nav {
    order: 3; width: 100%; margin-left: 0;
    justify-content: flex-start; gap: var(--s3);
    font-size: 0.75rem;
  }
  .head-nav a { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-head { transition: none; }
}

/* ---- use-case selector (section 03, the deliverable) ----
   Panels are static content; JS injects the chip rail and adds .uc-js.
   With JS off, all panels stack as a complete document. */
.uc { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }

/* the chip rail (JS-injected): square corners per DESIGN.md, wraps on mobile */
.uc-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.uc-chip {
  position: relative; overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.95rem; font-weight: 500; line-height: 1.2;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: var(--s2) var(--s3); cursor: pointer;
  transition: background var(--quick) var(--ease-ui),
              border-color var(--quick) var(--ease-ui),
              color var(--quick) var(--ease-ui);
}
.uc-chip:hover { border-color: var(--ink-soft); }
.uc-chip[aria-selected="true"] {
  background: var(--terracotta); color: var(--paper); border-color: var(--terracotta);
}
.uc-chip:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
/* the chip label sits above the auto-advance progress fill */
.uc-chip-label { position: relative; z-index: 1; }
.uc-chip-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent-deep); z-index: 0;
}
/* the slow left-to-right fill on the active chip; linear, calm, behind the text */
.uc-chip-bar.uc-run { animation: uc-progress var(--uc-dwell, 7s) linear forwards; }
@keyframes uc-progress { from { width: 0; } to { width: 100%; } }
/* a click on the brief panel toggles this class; the bar freezes in place
   and resumes from the same point on the next click */
.uc.uc-paused .uc-chip-bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .uc-chip-bar { display: none; } }

.uc-panels { flex: 1; min-width: 0; }
.uc-panel {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper); padding: var(--s5);
}
.uc-panel + .uc-panel { margin-top: var(--s4); }
.uc-panel:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* JS-enhanced: all panels share one grid cell, so the frame is sized to the
   tallest and never jumps height on swap. The active panel cross-dissolves
   in; its rows rise with a soft stagger (the Linear / Vercel / Granola feel)
   instead of arriving as one slab. */
.uc.uc-js .uc-panels { display: grid; }
.uc.uc-js .uc-panel {
  grid-area: 1 / 1; margin-top: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-reveal), visibility .3s var(--ease-reveal);
}
.uc.uc-js .uc-panel.uc-show { opacity: 1; visibility: visible; }
.uc.uc-js .uc-panel.uc-show > * {
  animation: uc-rise .5s var(--ease-reveal) backwards;
}
.uc.uc-js .uc-panel.uc-show > *:nth-child(1) { animation-delay: .05s; }
.uc.uc-js .uc-panel.uc-show > *:nth-child(2) { animation-delay: .11s; }
.uc.uc-js .uc-panel.uc-show > *:nth-child(3) { animation-delay: .17s; }
.uc.uc-js .uc-panel.uc-show > *:nth-child(4) { animation-delay: .23s; }
.uc.uc-js .uc-panel.uc-show > *:nth-child(5) { animation-delay: .29s; }
.uc.uc-js .uc-panel.uc-show > *:nth-child(6) { animation-delay: .35s; }
@keyframes uc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* the specimen header: a mono label, in the apparatus register */
.uc-spec {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--clay);
  margin-bottom: var(--s4);
}
.uc-title { font-size: 1.5rem; }
.uc-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: var(--s1);
}

.uc-group { margin-top: var(--s4); }
.uc-group-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: var(--s3);
}
.uc-metric {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--s3);
  align-items: baseline; padding: var(--s2) 0; font-size: 1.0625rem;
}
.uc-metric::before {
  content: ""; width: 6px; height: 6px; align-self: center;
}
.uc-reported .uc-metric { color: var(--ink-soft); }
.uc-reported .uc-metric::before { background: var(--clay); }
.uc-real .uc-metric { color: var(--ink); }
.uc-real .uc-metric::before { background: var(--terracotta); }

.uc-caveat {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft);
}

/* desktop: chip rail beside the panel (only when JS has enhanced it) */
@media (min-width: 768px) {
  .uc.uc-js { flex-direction: row; align-items: flex-start; gap: var(--s5); }
  .uc.uc-js .uc-chips { flex: 0 0 188px; flex-direction: column; flex-wrap: nowrap; }
  .uc.uc-js .uc-chip { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-chip { transition: none; }
  .uc.uc-js .uc-panel { transition: none; }
  .uc.uc-js .uc-panel.uc-show > * { animation: none; }
}

/* ===== before/after: the method as a comparison (how-it-works §02) =====
   A two-lane comparison. The old method runs down a recessed tinted lane,
   the new method down the clean lane beside it. Each lane is named once,
   in the header, so the labels never repeat per row. On mobile the lanes
   stack and a small per-row label stands in for the header. Tokens only. */
.bna { margin-top: var(--s5); }

/* the lane columns, shared by the header and every row */
.bna-head,
.bna-row {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 0.82fr) minmax(0, 1.6fr);
  column-gap: var(--s4);
}

/* the header names each lane a single time */
.bna-head { padding-bottom: var(--s2); border-bottom: 1px solid var(--clay); }
.bna-h {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.bna-h-old { grid-column: 2; color: var(--ink-soft); padding-left: var(--s4); }
.bna-h-new { grid-column: 3; color: var(--terracotta); }

.bna-list { list-style: none; }
.bna-row { border-bottom: 1px solid var(--hairline); align-items: stretch; }

.bna-idx {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--terracotta); padding-top: var(--s4);
}

/* the old lane: a continuous recessed tint band */
.bna-old { background: var(--paper-tint); padding: var(--s4) var(--s4) var(--s5); }
.bna-was {
  font-size: 1.0625rem; line-height: 1.4; color: var(--ink-soft);
}

/* the new lane: clean ground, lands large and bold */
.bna-new { padding: var(--s4) 0 var(--s5); }
.bna-now {
  font-size: 1.375rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--s2);
}
.bna-note { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* the per-row label is a mobile stand-in for the header; hidden on desktop */
.bna-mlabel { display: none; }

@media (max-width: 767px) {
  .bna-head { display: none; }
  .bna-row { grid-template-columns: 1fr; column-gap: 0; }
  .bna-idx { padding: var(--s5) 0 0; }
  .bna-old { margin-top: var(--s3); padding-bottom: var(--s4); }
  .bna-new { padding: var(--s4) 0 var(--s5); }
  .bna-mlabel {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: var(--s1);
  }
  .bna-old .bna-mlabel { color: var(--ink-soft); }
  .bna-new .bna-mlabel { color: var(--terracotta); }
}

/* ---- the crossed-out anti-pattern (How It Works, section 03) ----
   each row strikes through what the category does, beside what we do.
   The struck phrase recedes; the plain statement leads. */
.antipattern { list-style: none; margin-top: var(--s5); }
.antipattern li {
  display: grid; gap: var(--s2);
  padding: var(--s4) 0; border-top: 1px solid var(--hairline);
}
.antipattern li:last-child { border-bottom: 1px solid var(--hairline); }
.ap-not {
  font-size: 1.0625rem; color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
}
.ap-is { font-size: 1.1875rem; color: var(--ink); }
@media (min-width: 768px) {
  /* extend the table right of the content column so each statement holds one line */
  .antipattern { grid-column: 4 / -1; }
  .antipattern li {
    grid-template-columns: minmax(min-content, 332px) 1fr;
    align-items: baseline; gap: var(--s3);
  }
}

/* ---- the method list (How It Works, section 02) ----
   small old method, an arrow, the new method, the one-liner below.
   No strikethrough here - that device belongs to section 03. */
.method-list { list-style: none; margin-top: var(--s5); }
.method {
  display: grid; grid-template-columns: 3.5ch 1fr; gap: var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--hairline);
}
.method:last-child { border-bottom: 1px solid var(--hairline); }
.method-idx {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--terracotta); padding-top: 0.55em;
}
.method-shift {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--s2) var(--s3); margin-bottom: var(--s2);
}
.method-was {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--ink-soft);
}
.method-arrow { color: var(--terracotta); font-weight: 700; }
.method-now {
  font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink);
}
.method-note { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); }
/* desktop: old method, arrow and new method always hold one line */
@media (min-width: 768px) {
  .method-shift { flex-wrap: nowrap; }
  .method-was, .method-now { white-space: nowrap; }
}

/* ---- engagement stages (How It Works, section 01) ----
   four compact stages that build up into one view: as the section enters,
   each reveals in turn (staggered by --rd) so the engagement assembles
   itself, one stage adding onto the last. */
.eng-stages { list-style: none; margin-top: var(--s5); }
.eng-stage {
  padding: var(--s4) 0; border-top: 1px solid var(--hairline);
}
.eng-stage:last-child { border-bottom: 1px solid var(--hairline); }
.eng-stage-mark {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: var(--s2);
}
.eng-stage-name {
  font-size: 1.625rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: var(--s2);
}
.eng-stage-desc {
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft);
}
.eng-stage-list {
  list-style: none; padding: 0; margin: var(--s3) 0 0;
  display: grid; gap: var(--s2);
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft);
}
.eng-stage-list li {
  position: relative; padding-left: var(--s4);
}
.eng-stage-list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 12px; height: 1px; background: var(--terracotta);
}

/* ---- the focal block: the one dark mass per page (DESIGN.md §7.12) ----
   a full-bleed oxblood band, the single highest-contrast moment on a page.
   No shadow, no card - the depth is the value jump itself. Use at most
   once per page, for the moment that should land hardest. Add `focal` to
   a `.section`. */
.section.focal { background: var(--oxblood); }
.section.focal,
.section.focal .sec-title,
.section.focal h2,
.section.focal h3,
.section.focal .lead,
.section.focal p,
.section.focal blockquote { color: var(--paper); }
.section.focal .apparatus {
  color: var(--clay);
  border-bottom-color: rgba(250, 248, 243, 0.22);
}
.section.focal .apparatus .num { color: rgba(216, 189, 151, 0.55); }
.section.focal .apparatus.active .num { color: var(--paper); }
.section.focal cite { color: var(--clay); }
.section.focal .cta-row { justify-content: center; }
.section.focal a { color: var(--paper); }
.section.focal a:hover { text-decoration-color: var(--clay); }
.section.focal .btn { background: var(--paper); color: var(--oxblood); }
.section.focal .btn:hover { background: var(--clay); }
/* a giant display word/number - the drama tier, usable in any section */
.display {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-display); font-weight: 500;
  line-height: 0.92; letter-spacing: -0.04em;
}

/* ---- giant figures sit cleanly below their terracotta rule ---- */

/* ---- Contact: two-path booking grid (Calendly + form) ---- */
.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
@media (max-width: 48rem) {
  .booking-grid { grid-template-columns: 1fr; }
}
.booking-option {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.booking-option--primary {
  background: var(--bg-inset, #f3efe7);
  border-color: var(--ink-soft, #2a2a2a);
}
.booking-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  margin: 0 0 var(--s2, 0.5rem);
}
.booking-title {
  font-size: 1.25rem;
  margin: 0 0 var(--s2, 0.5rem);
  color: var(--ink, #161616);
}
.booking-desc {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft, #2a2a2a);
  margin: 0 0 var(--s4, 1.25rem);
}
.booking-option .btn { align-self: flex-start; }