/* ============================================================
   True North by Mark Welke
   Brand law: CLAUDE.md. Radius 0 everywhere. Two fonts only.
   Colour from tokens only. Bronze under 3%. Sixty per cent silence.
   ============================================================ */

:root {
  /* Ground — leather */
  --tn-leather:        #13100C;
  --tn-leather-warm:   #1A1108;
  --tn-leather-deep:   #0E0B08;
  --tn-leather-spine:  #3A2A1C;

  /* Ground — stone */
  --tn-stone:          #E3D3BE;
  --tn-stone-deep:     #D8C6AD;

  /* Bronze */
  --tn-bronze:         #A9764A;
  --tn-bronze-lit:     #C08E5C;
  --tn-bronze-ink:     #8A5F38;

  /* Type on dark */
  --tn-bone:           #E7DECF;
  --tn-bone-bright:    #F0E7D9;
  --tn-bone-soft:      #E0D6C6;
  --tn-text:           #9E9184;
  --tn-text-quiet:     #8B7F71;
  --tn-text-warm:      #A99C8E;
  --tn-text-warmer:    #C9BEB0;
  --tn-numeral:        #7C6A57;
  --tn-numeral-dim:    #BDB0A0;

  /* Type on stone */
  --tn-ink:            #241A12;
  --tn-ink-body:       #3A2C1E;
  --tn-ink-body-2:     #4A3826;
  --tn-ink-quiet:      #5C4830;
  --tn-ink-eyebrow:    #6B5236;

  /* Hairlines */
  --tn-rule-bone-07:   rgba(231,222,207,.07);
  --tn-rule-bone-11:   rgba(231,222,207,.11);
  --tn-rule-bronze-24: rgba(169,118,74,.24);
  --tn-rule-bronze-30: rgba(169,118,74,.30);
  --tn-rule-bronze-62: rgba(169,118,74,.62);
  --tn-rule-ink-36:    rgba(138,95,56,.36);
  --tn-hover-wash:     rgba(231,222,207,.03);

  /* Type */
  --tn-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --tn-body:    'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --tn-eyebrow-size:  clamp(9px, 0.74vw, 10.5px);
  --tn-eyebrow-track: 0.32em;
  --tn-body-size:     clamp(13px, 0.98vw, 15px);
  --tn-body-leading:  2.05;

  /* Space */
  --tn-section-y: clamp(78px, 12vh, 158px);
  --tn-section-x: clamp(26px, 6vw, 110px);
  --tn-gutter:    clamp(40px, 5.5vw, 96px);

  /* Everything else */
  --tn-radius: 0;
  --tn-press:  .1s ease;

  /* Motion — material and slow. Nothing under 400ms. */
  --tn-settle:  900ms cubic-bezier(.16,.62,.24,1);
  --tn-arrive:  800ms cubic-bezier(.16,.62,.24,1);
  --tn-weight:  620ms cubic-bezier(.22,.61,.20,1);
  --tn-tone:    .4s ease;

  --tn-shadow-spine:    18px 0 46px -12px rgba(0,0,0,.85);
  --tn-shadow-portrait: 0 24px 52px -20px rgba(36,26,18,.42);
  --tn-shadow-press:    inset 0 2px 6px rgba(0,0,0,.55);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

body {
  background: var(--tn-leather);
  color: var(--tn-text);
  font-family: var(--tn-body);
  font-size: var(--tn-body-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--tn-bronze); text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--tn-bronze-lit);
  outline-offset: 4px;
}

/* ---------- shared type ---------- */
.eyebrow {
  font-size: var(--tn-eyebrow-size);
  letter-spacing: var(--tn-eyebrow-track);
  text-transform: uppercase;
  color: var(--tn-bronze);
}
.eyebrow-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px 26px; margin-bottom: clamp(30px, 4.4vh, 52px);
}
.eyebrow-row .rule { flex: 1 1 120px; height: 1px; background: var(--tn-rule-bronze-30); }

.display { font-family: var(--tn-display); font-weight: 400; text-wrap: pretty; }
.lede {
  margin: 0; max-width: 28ch; font-family: var(--tn-display);
  font-size: clamp(1.4rem, 2.5vw, 2.15rem); line-height: 1.3;
  color: var(--tn-bone); text-wrap: pretty;
}
.body { line-height: var(--tn-body-leading); text-wrap: pretty; }

section { padding: var(--tn-section-y) var(--tn-section-x); }

/* ============================================================
   01 — THE MOMENT (LOCKED)
   ============================================================ */
.hero {
  position: relative; display: flex; align-items: stretch;
  min-height: 100dvh; padding: 0;
}

.spine {
  position: relative; flex: 0 0 auto;
  width: clamp(64px, 17vw, 260px);
  background: var(--tn-leather-spine) url(assets/tn-leather-spine.jpg) top center/100% auto repeat-y;
  box-shadow: var(--tn-shadow-spine), inset -1px 0 0 rgba(0,0,0,.45);
}
/* Light travelling across the leather, following the pointer. */
.spine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 26% at var(--lx, 50%) var(--ly, 30%),
    rgba(224,196,158,.16), rgba(224,196,158,.05) 42%, rgba(0,0,0,0) 72%);
  opacity: var(--lit, 0); transition: opacity 900ms ease;
}
.spine-inner {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}

/* The deboss — six masked layers, offsets ≈1.2px. Do not simplify. */
.monogram { position: relative; width: clamp(48px, 11.5vw, 178px); aspect-ratio: 0.9118; }
.monogram > i {
  position: absolute; inset: 0; display: block;
  -webkit-mask-image: url(assets/tn-monogram-mask.png);
  mask-image: url(assets/tn-monogram-mask.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.mg-1 { background: #000; opacity: .6; filter: blur(3.4px); }
.mg-2 { background: rgba(216,186,146,.44); transform: translate(1.3px,1.4px); filter: blur(.9px); }
.mg-3 { background: #000; opacity: .8; transform: translate(-1.1px,-1.2px); filter: blur(.7px); }
.mg-4 { background: #18100A; }
/* Light shifts across the foil as the page moves. Single top-left source. */
.mg-5 {
  background: linear-gradient(var(--tn-foil-angle, 142deg),
    #42301D 0%, #715433 18%, #A67F51 38%, #C09A6B 48%,
    #8A6742 62%, #503A23 80%, #33220F 100%);
  opacity: .93;
}
.mg-6 {
  background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.08) 40%,
    rgba(0,0,0,0) 60%, rgba(0,0,0,.2) 100%);
}

.hero-field {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(32px,5vh,60px) clamp(26px,5.5vw,110px) clamp(26px,4vh,46px);
}
.hero-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(120% 88% at 18% 4%, rgba(196,156,116,.048), rgba(0,0,0,0) 60%);
}

.hero-head {
  position: relative; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px clamp(14px,2vw,30px);
  font-size: clamp(8.5px,0.72vw,10.5px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-text);
}
.hero-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 9px clamp(11px,1.3vw,18px); }
.dot { color: var(--tn-bronze); }

.enquiries {
  letter-spacing: 0.34em; color: var(--tn-text);
  border-bottom: 1px solid rgba(169,118,74,.4); padding-bottom: 4px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.enquiries:hover { color: #E0CDB4; border-bottom-color: rgba(169,118,74,.9); }

.hero-centre { position: relative; padding: clamp(34px,5vh,58px) 0; }
.wordmark { width: min(300px, 54%); }
.byline {
  margin-top: clamp(13px,1.8vh,20px);
  font-size: clamp(9px,0.76vw,11px); letter-spacing: 0.44em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.hero-rule {
  width: clamp(52px,5.5vw,80px); height: 1px;
  background: var(--tn-rule-bronze-62); margin: clamp(32px,4.4vh,50px) 0;
}
.hero h1 {
  margin: 0; max-width: 26ch; font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.75rem,3.5vw,3.15rem); line-height: 1.2;
  color: var(--tn-bone); text-wrap: pretty;
}
.standfirst {
  margin: clamp(26px,3.4vh,38px) 0 0; max-width: 52ch;
  font-size: clamp(13px,1vw,15px); line-height: 1.95; color: var(--tn-text);
}
.hero-foot {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px,1.2vw,18px);
  border-top: 1px solid var(--tn-rule-bronze-24);
  padding-top: clamp(18px,2.4vh,26px);
  font-size: clamp(8.5px,0.74vw,10.5px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-text);
}

/* ============================================================
   THE LIFTED QUOTE — Silence composition. One element, alone.
   ============================================================ */
/* Full-screen chapter. The Silence composition: one element, alone. */
.silence {
  background: var(--tn-leather-warm);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding: clamp(92px,16vh,190px) var(--tn-section-x);
  min-height: 78dvh;
  display: flex; justify-content: center; align-items: center;
}
.silence-inner { max-width: 34ch; text-align: left; }
.silence blockquote {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.35rem,2.7vw,2.25rem); line-height: 1.34;
  color: var(--tn-bone-bright); text-wrap: pretty;
}
.attrib {
  margin-top: clamp(28px,4vh,44px);
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.attrib .tick { width: 26px; height: 1px; background: var(--tn-rule-bronze-62); flex: 0 0 auto; }

/* ============================================================
   RECOGNITIONS — accordion
   ============================================================ */
.recognitions { background: var(--tn-leather); border-top: 1px solid var(--tn-rule-bone-07); }
.intro-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
  gap: clamp(24px,4vw,80px); align-items: end; margin-bottom: clamp(40px,5.5vh,68px);
}
.intro-grid .note {
  margin: 0; max-width: 44ch; font-size: clamp(12.5px,0.94vw,14.5px);
  line-height: 2.05; color: var(--tn-text-quiet);
}

.rows { display: flex; flex-direction: column; border-top: 1px solid var(--tn-rule-bone-11); }
.row { border-bottom: 1px solid var(--tn-rule-bone-11); }
.row-head {
  display: flex; align-items: flex-start; gap: clamp(15px,2.4vw,40px);
  width: 100%; padding: clamp(21px,2.8vh,31px) clamp(6px,1vw,14px);
  background: none; border: 0; text-align: left; font: inherit;
  cursor: pointer; user-select: none; color: inherit;
  transition: background-color var(--tn-tone), transform var(--tn-press), box-shadow var(--tn-press);
}
.row-head:hover { background-color: var(--tn-hover-wash); }
.row-head:active { transform: translateY(1px); box-shadow: var(--tn-shadow-press); }

.row-num {
  flex: 0 0 auto; padding-top: clamp(6px,0.8vw,9px);
  font-size: clamp(8.5px,0.7vw,10px); letter-spacing: 0.28em; color: var(--tn-numeral);
}
.row-line {
  flex: 1 1 auto; min-width: 0; font-family: var(--tn-display);
  font-size: clamp(1.08rem,1.8vw,1.58rem); line-height: 1.35;
  color: var(--tn-bone-soft); text-wrap: pretty; transition: color var(--tn-tone);
}
.row.is-open .row-line { color: var(--tn-bone-bright); }
.row.is-last .row-line { color: var(--tn-numeral-dim); }
.row.is-last.is-open .row-line { color: var(--tn-bone-bright); }

/* plus / minus built from two 1px bronze bars */
.glyph { flex: 0 0 auto; position: relative; width: 13px; height: 13px; margin-top: clamp(8px,1vw,12px); }
.glyph::before, .glyph::after { content: ""; position: absolute; background: var(--tn-bronze); }
.glyph::before { top: 6px; left: 0; width: 13px; height: 1px; }
.glyph::after {
  top: 0; left: 6px; width: 1px; height: 13px;
  transition: opacity var(--tn-weight), transform var(--tn-weight);
}
.row.is-open .glyph::after { opacity: 0; transform: scaleY(.2); }

/* weighted open — the panel has mass */
.panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--tn-weight);
}
.row.is-open .panel { grid-template-rows: 1fr; }
.panel-inner { overflow: hidden; }
.panel-pad { padding: 0 clamp(6px,1vw,14px) clamp(28px,3.6vh,40px) clamp(36px,4.4vw,68px); }
.panel-pad p { margin: 0 0 18px; max-width: 56ch; line-height: 2.05; color: var(--tn-text-warm); }
.panel-push {
  margin: 0 !important; max-width: 52ch; font-family: var(--tn-display);
  font-size: clamp(1rem,1.35vw,1.22rem); line-height: 1.62; color: var(--tn-bone-soft) !important;
}

/* ============================================================
   THE BELIEF
   ============================================================ */
.belief { background: var(--tn-leather-warm); border-top: 1px solid var(--tn-rule-bone-07); }
.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--tn-gutter); align-items: start;
}
.belief .statement {
  margin: 0; max-width: 25ch; font-family: var(--tn-display);
  font-size: clamp(1.5rem,2.8vw,2.4rem); line-height: 1.28; color: var(--tn-bone);
}
.belief .eyebrow { display: block; margin-bottom: clamp(26px,3.4vh,38px); }
.belief-copy { max-width: 58ch; }
.belief-copy p { line-height: 2.05; text-wrap: pretty; }
.belief-copy p:nth-of-type(1) { margin: 0 0 26px; font-size: clamp(13.5px,1vw,15.5px); color: var(--tn-text-warmer); }
.belief-copy p:nth-of-type(2) { margin: 0 0 30px; color: var(--tn-text); }
.belief-copy .break {
  margin: 0 0 30px; font-family: var(--tn-display);
  font-size: clamp(1.12rem,1.6vw,1.42rem); line-height: 1.58; color: var(--tn-bone);
}
.belief-copy p:last-child { margin: 0; color: var(--tn-text); }

/* ============================================================
   THE WORK — stated, not hidden. Editorial run, no accordion.
   ============================================================ */
.work { background: var(--tn-leather); border-top: 1px solid var(--tn-rule-bone-07); }
.work .lede { max-width: 38ch; margin-bottom: clamp(44px,6vh,76px); }
.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: clamp(46px,5.4vw,86px) 1fr;
  gap: clamp(18px,3vw,52px);
  padding: clamp(30px,4vh,48px) clamp(8px,1.2vw,18px);
  border-top: 1px solid rgba(231,222,207,.1);
}
.step:last-child { border-bottom: 1px solid rgba(231,222,207,.1); }
.step-num {
  font-family: var(--tn-display); font-size: clamp(1.9rem,3.4vw,3rem);
  line-height: .9; color: var(--tn-bronze-lit);
}
.step-name {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.5rem,2.7vw,2.3rem); line-height: 1.14; color: var(--tn-bone);
}
.step-q {
  margin: clamp(10px,1.2vh,14px) 0 0; max-width: 44ch; font-family: var(--tn-display);
  font-size: clamp(1rem,1.35vw,1.22rem); line-height: 1.5; color: var(--tn-text-warmer);
}
.step-body { margin: clamp(20px,2.6vh,30px) 0 18px; max-width: 58ch; line-height: 2.05; color: var(--tn-text-warm); }
.step-out { display: flex; align-items: baseline; gap: 12px; max-width: 56ch; }
.step-out .tick { flex: 0 0 auto; width: 20px; height: 1px; background: rgba(169,118,74,.7); transform: translateY(-5px); }
.step-out p { margin: 0; font-size: clamp(12px,0.9vw,13.5px); line-height: 1.9; color: #8B7A64; }

/* ============================================================
   ON AI
   ============================================================ */
.ai {
  position: relative; background: var(--tn-leather-warm) url(assets/mat-compass-leather.jpg) center/cover;
  border-top: 1px solid var(--tn-rule-bone-07);
}
.ai::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,16,12,.9), rgba(19,16,12,.76) 45%, rgba(19,16,12,.94));
}
.ai > * { position: relative; }
.ai .eyebrow { color: var(--tn-bronze-lit); }
.ai .eyebrow-row .rule { background: rgba(192,142,92,.34); }
.ai .lede {
  max-width: 22ch; font-size: clamp(1.85rem,3.7vw,3.1rem);
  line-height: 1.22; color: var(--tn-bone-bright); margin-bottom: clamp(38px,5vh,62px);
}
.ai-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr));
  gap: clamp(30px,4vw,72px); max-width: 1180px;
}
.ai-cols p { margin: 0; line-height: 2.05; }
.ai-cols p:first-child { font-size: clamp(13.5px,1vw,15.5px); color: #CFC4B5; }
.ai-cols p:last-child { color: var(--tn-text-warm); }

/* ============================================================
   THE INFLECTION BAND — leather into stone
   ============================================================ */
.band {
  height: clamp(90px,13vh,170px); padding: 0;
  background: linear-gradient(180deg, #13100C 0%, #2A1E14 34%, #7A6549 68%, #C9B69C 88%, #E3D3BE 100%);
}

/* ============================================================
   STONE HALF
   ============================================================ */
.founder { background: var(--tn-stone); padding-top: clamp(70px,10vh,140px); }
.founder .eyebrow, .proof .eyebrow, .ways .eyebrow { color: var(--tn-bronze-ink); }
.founder .eyebrow-row .rule,
.proof .eyebrow-row .rule,
.ways .eyebrow-row .rule { background: var(--tn-rule-ink-36); }

.founder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px,1fr));
  gap: clamp(38px,5.5vw,86px); align-items: start;
}
.portrait { width: 100%; max-width: 520px; box-shadow: var(--tn-shadow-portrait); }
.portrait-cap { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.portrait-cap .tick { width: 26px; height: 1px; background: rgba(138,95,56,.75); }
.portrait-cap span:last-child {
  font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--tn-ink-eyebrow);
}
.founder-copy { max-width: 60ch; }
.founder-copy p { line-height: 2.05; text-wrap: pretty; }
.founder-copy p:nth-of-type(1) { margin: 0 0 24px; font-size: clamp(13.5px,1.02vw,15.5px); color: var(--tn-ink-body); }
.founder-copy p:nth-of-type(2) { margin: 0 0 24px; color: var(--tn-ink-body-2); }
.founder-copy .break {
  margin: 0 0 26px; font-family: var(--tn-display);
  font-size: clamp(1.1rem,1.55vw,1.38rem); line-height: 1.6; color: var(--tn-ink);
}
.founder-copy p:nth-of-type(3),
.founder-copy p:nth-of-type(4) { margin: 0 0 24px; color: var(--tn-ink-body-2); }
.founder-copy p:last-child { margin: 0; color: var(--tn-ink-body-2); }

/* ---------- PROOF — type only. No cards, no photos, no logos, no stars. ---------- */
.proof { background: var(--tn-stone); padding-top: clamp(60px,9vh,120px); }
.proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: clamp(44px,6vw,96px) clamp(40px,5.5vw,90px);
}
.quote { max-width: 46ch; }
.quote p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.05rem,1.55vw,1.42rem); line-height: 1.62;
  color: var(--tn-ink); text-wrap: pretty;
}
.quote .attrib { color: var(--tn-ink-eyebrow); margin-top: clamp(18px,2.4vh,26px); }
.quote .attrib .tick { background: rgba(138,95,56,.75); }
.proof-foot {
  margin-top: clamp(52px,7vh,96px); padding-top: clamp(22px,3vh,32px);
  border-top: 1px solid var(--tn-rule-ink-36);
  font-size: clamp(12.5px,0.94vw,14.5px); line-height: 2; color: var(--tn-ink-quiet); max-width: 52ch;
}

/* ---------- WAYS IN — three rungs, set as type ---------- */
.ways { background: var(--tn-stone); padding-top: clamp(60px,9vh,120px); }
.ways .lede { color: var(--tn-ink); max-width: 34ch; margin-bottom: clamp(40px,5.5vh,70px); }
.rungs { display: flex; flex-direction: column; }
.rung {
  display: grid; grid-template-columns: clamp(40px,4.6vw,72px) 1fr;
  gap: clamp(18px,3vw,52px);
  padding: clamp(28px,3.8vh,44px) clamp(6px,1vw,14px);
  border-top: 1px solid var(--tn-rule-ink-36);
}
.rung:last-of-type { border-bottom: 1px solid var(--tn-rule-ink-36); }
.rung-num {
  font-family: var(--tn-display); font-size: clamp(1.4rem,2.4vw,2.1rem);
  line-height: .95; color: var(--tn-bronze-ink);
}
.rung-name {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.35rem,2.4vw,2rem); line-height: 1.16; color: var(--tn-ink);
}
.rung-meta {
  display: flex; flex-wrap: wrap; gap: 8px clamp(12px,1.4vw,20px);
  margin-top: clamp(12px,1.6vh,18px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-ink-eyebrow);
}
.rung-meta .dot { color: var(--tn-bronze-ink); }
.rung-body { margin: clamp(16px,2.2vh,24px) 0 0; max-width: 54ch; line-height: 2.05; color: var(--tn-ink-body-2); }

/* ---------- START (LOCKED) ---------- */
.start {
  position: relative; background: var(--tn-stone-deep) url(assets/mat-north-stone.jpg) center/cover;
  border-top: 1px solid rgba(138,95,56,.22);
}
.start-grid {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px,1fr));
  gap: clamp(40px,5.5vw,90px); align-items: start;
}
.start .kicker {
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-ink-eyebrow); margin-bottom: clamp(20px,2.6vh,28px);
}
.start .title {
  font-family: var(--tn-display); font-size: clamp(1.8rem,3.2vw,2.7rem);
  line-height: 1.2; color: var(--tn-ink); margin-bottom: clamp(20px,2.6vh,28px);
}
.start .meta {
  display: flex; flex-wrap: wrap; gap: 10px clamp(14px,1.6vw,22px);
  margin-bottom: clamp(24px,3vh,32px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-ink-eyebrow);
}
.start .meta .dot { color: var(--tn-bronze-ink); }
.start .blurb { margin: 0 0 clamp(28px,3.4vh,38px); max-width: 46ch; line-height: 2.05; color: var(--tn-ink-body-2); }

.cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(9px,0.76vw,11px); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tn-ink); background-color: rgba(255,252,246,.16);
  border: 1px solid rgba(36,26,18,.42);
  padding: clamp(14px,1.5vw,17px) clamp(20px,2.2vw,28px);
  box-shadow: 0 2px 0 rgba(36,26,18,.16);
  transition: background-color var(--tn-tone), color var(--tn-tone),
              transform var(--tn-press), box-shadow var(--tn-press);
}
.cta:hover { background-color: var(--tn-ink); color: #F3EDE1; }
.cta:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(36,26,18,0); }

.write-direct { font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em; text-transform: uppercase; color: var(--tn-ink-eyebrow); margin-bottom: clamp(16px,2vh,22px); }
.address {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--tn-display); font-size: clamp(1.05rem,1.6vw,1.45rem); line-height: 1.5;
  color: var(--tn-ink); border-bottom: 1px solid rgba(138,95,56,.6); padding-bottom: 5px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.address:hover { color: var(--tn-bronze-ink); border-bottom-color: rgba(138,95,56,1); }
.start .note { margin: clamp(26px,3.2vh,36px) 0 0; max-width: 40ch; font-size: clamp(12.5px,0.94vw,14.5px); line-height: 2; color: var(--tn-ink-quiet); }
.lockup { margin-top: clamp(44px,6vh,84px); width: min(152px,44%); }

/* ============================================================
   MOTION — material and slow. Ink settles. Sections arrive.
   ============================================================ */
.js .settle { opacity: 0; transform: translateY(6px); }
.is-settled .settle {
  opacity: 1; transform: none;
  transition: opacity var(--tn-settle), transform var(--tn-settle);
}
.is-settled .settle:nth-child(2) { transition-delay: 120ms; }
.is-settled .settle:nth-child(3) { transition-delay: 200ms; }
.is-settled .settle:nth-child(4) { transition-delay: 280ms; }
.is-settled .settle:nth-child(5) { transition-delay: 380ms; }

/* Base: nothing moves by default. Each chapter is directed separately.
   Scoped to .js so a failed script leaves the page fully readable. */
.js .arrive { opacity: 0; }
.arrive.is-in {
  opacity: 1;
  transition: opacity var(--tn-arrive), transform var(--tn-arrive),
              color var(--tn-arrive), letter-spacing var(--tn-arrive);
}

/* THE LIFTED QUOTE — resolves from low contrast into clarity. */
.silence .arrive { color: var(--tn-text-quiet); }
.silence .arrive blockquote { color: inherit; transition: color 1100ms cubic-bezier(.16,.62,.24,1); }
.silence .arrive.is-in blockquote { color: var(--tn-bone-bright); }

/* RECOGNITIONS — material panel entering from the spine edge. */
.recognitions .arrive { transform: translateX(-14px); }
.recognitions .arrive.is-in { transform: none; }

/* THE BELIEF and THE WORK — quiet. Type settles, nothing travels. */
.belief .arrive, .work .arrive { transform: translateY(6px); }
.belief .arrive.is-in, .work .arrive.is-in { transform: none; }

/* ON AI — the scrim lifts rather than the content moving. */
.ai::before { opacity: 1; transition: opacity 1200ms cubic-bezier(.16,.62,.24,1); }
.ai.is-lit::before { opacity: .88; }
.ai .arrive { transform: none; }

/* THE STONE HALF — arrives as light, not as movement. */
.founder .arrive, .proof .arrive, .ways .arrive, .start .arrive {
  transform: none; filter: brightness(1.06) saturate(.92);
}
.founder .arrive.is-in, .proof .arrive.is-in,
.ways .arrive.is-in, .start .arrive.is-in {
  filter: none; transition: opacity var(--tn-arrive), filter 1000ms cubic-bezier(.16,.62,.24,1);
}

/* ============================================================
   THE INFLECTION BAND — leather dissolving into stone
   --p is scroll progress through the band, 0 to 1, set in JS.
   ============================================================ */
.band { position: relative; overflow: hidden; }
.band > div { position: absolute; inset: 0; }
.band-stone {
  background: var(--tn-stone) url(assets/mat-north-stone.jpg) center/cover;
}
.band-leather {
  background: var(--tn-leather) url(assets/tn-leather-band.jpg) center/cover;
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 calc(var(--p, 0) * 62%), transparent calc(var(--p, 0) * 100% + 14%));
  mask-image: linear-gradient(180deg,
    #000 0%, #000 calc(var(--p, 0) * 62%), transparent calc(var(--p, 0) * 100% + 14%));
}
.band-light {
  background: linear-gradient(180deg,
    rgba(19,16,12,.92) 0%, rgba(42,30,20,.55) 34%,
    rgba(122,101,73,.28) 68%, rgba(201,182,156,.10) 88%, rgba(227,211,190,0) 100%);
  mix-blend-mode: normal;
}
.band-light::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34%;
  top: calc(var(--p, 0) * 100% - 17%);
  background: linear-gradient(180deg, rgba(231,222,207,0), rgba(231,222,207,.09), rgba(231,222,207,0));
  pointer-events: none;
}

/* ============================================================
   BESPOKE HOVER STATES
   ============================================================ */
.enquiries { position: relative; }
.enquiries::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px;
  background: var(--tn-bronze-lit); transition: right 520ms cubic-bezier(.16,.62,.24,1);
}
.enquiries:hover::after, .enquiries:focus-visible::after { right: 0; }

.address { position: relative; }
.address::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px;
  background: var(--tn-ink); transition: right 520ms cubic-bezier(.16,.62,.24,1);
}
.address:hover::after { right: 0; }

.cta { position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0; background: var(--tn-ink);
  transform: translateY(101%); transition: transform 480ms cubic-bezier(.16,.62,.24,1);
}
.cta:hover { background-color: rgba(255,252,246,.16); }
.cta:hover::before { transform: none; }
.cta > * , .cta { position: relative; }
.cta span, .cta { z-index: 1; }
.cta:hover { color: #F3EDE1; }
.cta:active::before { transform: none; }

.row-head .row-line { transition: color var(--tn-tone), letter-spacing 640ms cubic-bezier(.16,.62,.24,1); }
.row-head:hover .row-line { letter-spacing: .004em; }

/* ============================================================
   CUSTOM CURSOR — square, bronze. Fine pointers only.
   ============================================================ */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none; }
  html.has-cursor input, html.has-cursor textarea { cursor: text; }

  .cursor {
    display: block; position: fixed; top: 0; left: 0;
    width: 0; height: 0; z-index: 9999; pointer-events: none;
    transform: translate3d(var(--x, -100px), var(--y, -100px), 0);
    will-change: transform;
  }
  .cursor i { position: absolute; display: block; }
  .cursor-ring {
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 1px solid rgba(169,118,74,.7);
    transition: width 380ms cubic-bezier(.16,.62,.24,1),
                height 380ms cubic-bezier(.16,.62,.24,1),
                margin 380ms cubic-bezier(.16,.62,.24,1),
                border-color 380ms ease, opacity 380ms ease;
  }
  .cursor-dot {
    width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    background: var(--tn-bronze-lit);
    transition: opacity 380ms ease, background-color 380ms ease;
  }
  /* Over anything you can act on, the mark opens up. */
  .cursor.is-live .cursor-ring {
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-color: rgba(192,142,92,.95);
  }
  .cursor.is-live .cursor-dot { opacity: 0; }
  .cursor.is-press .cursor-ring { width: 16px; height: 16px; margin: -8px 0 0 -8px; }

  /* On stone the mark inverts, or it disappears. */
  .cursor.on-stone .cursor-ring { border-color: rgba(138,95,56,.75); }
  .cursor.on-stone .cursor-dot  { background: var(--tn-bronze-ink); }
  .cursor.on-stone.is-live .cursor-ring { border-color: rgba(36,26,18,.85); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .settle, .arrive {
    opacity: 1 !important; transform: none !important;
    filter: none !important; color: inherit !important;
  }
  .silence .arrive blockquote { color: var(--tn-bone-bright) !important; }
  .panel { transition: none; }
  .band-leather { -webkit-mask-image: none; mask-image: none; opacity: .5; }
  .band-light::after { display: none; }
  .spine::after { display: none; }
  .cursor { display: none !important; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }
}

/* ============================================================
   RESPONSIVE — fluid, not breakpointed. Stacking only.
   ============================================================ */
@media (max-width: 700px) {
  .hero { min-height: 100svh; }
  .step, .rung { grid-template-columns: 1fr; gap: clamp(10px,2vh,16px); }
  .step-num, .rung-num { font-size: clamp(1.3rem,6vw,1.8rem); }
}

/* ============================================================
   v2 — restructure. Business-led, founder forward, tighter.
   ============================================================ */

/* Gaps: the dark half felt endless because of padding, not length. */
:root {
  --tn-section-y: clamp(54px, 7.5vh, 100px);
  --tn-body-leading: 1.9;
}
.silence { min-height: auto; padding: clamp(64px,10vh,120px) var(--tn-section-x); }

/* ---------- 02 FOUNDER — now high on the page, on warm leather ---------- */
.founder {
  background: var(--tn-leather-warm);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding-top: var(--tn-section-y);
}
.founder .eyebrow { color: var(--tn-bronze); }
.founder .eyebrow-row .rule { background: var(--tn-rule-bronze-30); }
.founder .arrive { filter: none; }
.founder .arrive.is-in { filter: none; }

.founder-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(300px, 1.15fr);
  gap: clamp(32px,4.5vw,72px);
  align-items: start;
}
@media (max-width: 820px) { .founder-grid { grid-template-columns: 1fr; } }

.founder-portrait { position: relative; }
.portrait {
  max-width: none; width: 100%;
  box-shadow: 0 28px 64px -24px rgba(0,0,0,.8);
  filter: contrast(1.02);
}
.portrait-cap .tick { background: var(--tn-rule-bronze-62); }
.portrait-cap span:last-child { color: var(--tn-text-quiet); font-size: clamp(9px,0.74vw,10.5px); }

.founder-copy { max-width: 62ch; }
.founder-lede {
  margin: 0 0 clamp(20px,2.6vh,28px); font-family: var(--tn-display);
  font-size: clamp(1.25rem,2.2vw,1.85rem); line-height: 1.32;
  color: var(--tn-bone); text-wrap: pretty;
}
.founder-copy p:not(.founder-lede):not(.break) { margin: 0 0 18px; color: var(--tn-text); line-height: 1.95; }
.founder-copy .break {
  margin: 0 0 18px; font-family: var(--tn-display);
  font-size: clamp(1.05rem,1.5vw,1.3rem); line-height: 1.55; color: var(--tn-bone);
}
.creds {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(10px,1.2vw,16px);
  margin-top: clamp(22px,3vh,32px); padding-top: clamp(16px,2.2vh,22px);
  border-top: 1px solid var(--tn-rule-bronze-24);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}

/* ---------- 03 BRANDS — quiet band, deepest ground ---------- */
.brands {
  background: var(--tn-leather-deep);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding: clamp(40px,5.5vh,68px) var(--tn-section-x);
  text-align: center;
}
.brands-label {
  margin: 0 0 clamp(22px,3vh,30px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-numeral);
}
.brand-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(18px,3vw,54px);
}
.brand-row span {
  font-family: var(--tn-display);
  font-size: clamp(0.95rem,1.5vw,1.3rem); line-height: 1.3;
  color: var(--tn-text-quiet); text-wrap: balance;
  transition: color var(--tn-tone);
}
.brand-row:hover span { color: var(--tn-numeral); }
.brand-row span:hover { color: var(--tn-bone-soft); }

/* ---------- 04 THE WORK — three stages, audit leading ---------- */
.stages { display: flex; flex-direction: column; }
.stage {
  display: grid; grid-template-columns: clamp(46px,5.4vw,86px) 1fr;
  gap: clamp(18px,3vw,52px);
  padding: clamp(26px,3.4vh,42px) clamp(8px,1.2vw,18px);
  border-top: 1px solid rgba(231,222,207,.1);
}
.stage:last-child { border-bottom: 1px solid rgba(231,222,207,.1); }
.stage-num {
  font-family: var(--tn-display); font-size: clamp(1.9rem,3.4vw,3rem);
  line-height: .9; color: var(--tn-numeral);
}
.stage-lead { background: rgba(231,222,207,.022); }
.stage-lead .stage-num { color: var(--tn-bronze-lit); }
.stage-name {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.4rem,2.5vw,2.15rem); line-height: 1.14; color: var(--tn-bone);
}
.stage-lead .stage-name { font-size: clamp(1.6rem,3vw,2.6rem); }
.stage-meta {
  display: flex; flex-wrap: wrap; gap: 8px clamp(12px,1.4vw,20px);
  margin-top: clamp(10px,1.4vh,16px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.stage-meta .dot { color: var(--tn-bronze); }
.stage-body { margin: clamp(16px,2.2vh,22px) 0 0; max-width: 60ch; line-height: 1.95; color: var(--tn-text-warm); }
.stage-out { display: flex; align-items: baseline; gap: 12px; max-width: 58ch; margin-top: clamp(16px,2.2vh,22px); }
.stage-out .tick { flex: 0 0 auto; width: 20px; height: 1px; background: rgba(169,118,74,.7); transform: translateY(-5px); }
.stage-out p { margin: 0; font-size: clamp(12px,0.9vw,13.5px); line-height: 1.85; color: #8B7A64; }

.stage-cta {
  display: inline-flex; align-items: center; margin-top: clamp(20px,2.8vh,28px);
  font-size: clamp(9px,0.74vw,10.5px); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tn-bone-soft); border: 1px solid var(--tn-rule-bronze-30);
  padding: clamp(12px,1.3vw,15px) clamp(18px,2vw,26px);
  transition: background-color var(--tn-tone), color var(--tn-tone), border-color var(--tn-tone),
              transform var(--tn-press);
}
.stage-cta:hover { background: rgba(169,118,74,.14); color: var(--tn-bone-bright); border-color: rgba(169,118,74,.7); }
.stage-cta:active { transform: translateY(1px); }

/* ---------- 07 PROOF — the names now carry ---------- */
.proof-grid { gap: clamp(36px,5vw,72px) clamp(36px,5vw,80px); }
.quote p { font-size: clamp(1rem,1.42vw,1.3rem); line-height: 1.56; }
.quote-lead { grid-column: 1 / -1; max-width: 62ch; }
.quote-lead p { font-size: clamp(1.3rem,2.3vw,1.95rem); line-height: 1.4; }

.quote .attrib {
  display: block; margin-top: clamp(14px,2vh,20px);
  padding-top: clamp(12px,1.6vh,16px);
  border-top: 1px solid var(--tn-rule-ink-36);
}
.quote .attrib strong {
  display: block; font-family: var(--tn-body); font-weight: 500;
  font-size: clamp(12px,0.95vw,14px); letter-spacing: 0.06em;
  text-transform: none; color: var(--tn-ink);
}
.quote .attrib span {
  display: block; margin-top: 4px;
  font-size: clamp(9px,0.74vw,10.5px); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tn-bronze-ink);
}

/* ---------- 08 IN THE ROOM — speaking ---------- */
.room {
  background: var(--tn-stone);
  border-top: 1px solid var(--tn-rule-ink-36);
  padding-top: clamp(52px,7vh,92px);
}
.room .eyebrow { color: var(--tn-bronze-ink); }
.room .eyebrow-row .rule { background: var(--tn-rule-ink-36); }
.room .arrive, .room .arrive.is-in { filter: none; }
.room-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(34px,5vw,80px); align-items: start;
}
.room .lede { color: var(--tn-ink); max-width: 26ch; margin-bottom: clamp(20px,2.6vh,28px); }
.room-body { margin: 0 0 18px; max-width: 52ch; line-height: 1.95; color: var(--tn-ink-body-2); }
.cta-ink { margin-top: clamp(10px,1.6vh,18px); }

.topics-label {
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-ink-eyebrow);
  padding-bottom: clamp(14px,1.8vh,18px);
  border-bottom: 1px solid var(--tn-rule-ink-36);
}
.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  padding: clamp(11px,1.5vh,15px) 0;
  border-bottom: 1px solid rgba(138,95,56,.18);
  font-size: clamp(13px,0.98vw,15px); line-height: 1.6; color: var(--tn-ink-body);
}

/* ---------- start ---------- */
.start { background: var(--tn-stone-deep) url(assets/mat-north-stone.jpg) center/cover; }

@media (max-width: 700px) {
  .stage { grid-template-columns: 1fr; gap: clamp(8px,1.6vh,14px); }
  .stage-num { font-size: clamp(1.3rem,6vw,1.8rem); }
  .brand-row { gap: 14px 26px; }
  .brand-row span { font-size: clamp(0.88rem,3.6vw,1.05rem); }
}

/* ---------- v2.1 — stage labels and execution modes ---------- */
.stage-stage {
  display: block; margin-bottom: clamp(8px,1.1vh,12px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-bronze);
}
.stage-lead .stage-stage { color: var(--tn-bronze-lit); }

.modes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: clamp(20px,2.6vw,40px);
  margin: clamp(24px,3.2vh,34px) 0 clamp(8px,1.2vh,14px);
  padding: clamp(22px,3vh,30px) 0;
  border-top: 1px solid var(--tn-rule-bone-11);
  border-bottom: 1px solid var(--tn-rule-bone-11);
}
.mode-name {
  display: block; margin-bottom: 10px; font-family: var(--tn-display);
  font-size: clamp(1rem,1.35vw,1.22rem); line-height: 1.3; color: var(--tn-bone-soft);
}
.mode p {
  margin: 0; max-width: 34ch;
  font-size: clamp(12.5px,0.92vw,14px); line-height: 1.8; color: var(--tn-text);
}

/* ============================================================
   v3 — the pivot section. Why identity comes first.
   Founder's leather, Level 2 material. The philosophy lives
   here and nowhere else, so the contrast does the work.
   ============================================================ */
.identity {
  position: relative;
  background: var(--tn-leather-warm) url(assets/mat-founders-leather.jpg) center/cover;
  border-top: 1px solid var(--tn-rule-bone-07);
}
.identity::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,16,12,.93), rgba(19,16,12,.82) 45%, rgba(19,16,12,.95));
}
.identity > * { position: relative; }

.identity-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--tn-gutter); align-items: start;
}
.identity .lede { max-width: 24ch; color: var(--tn-bone-bright); }
.identity-copy { max-width: 58ch; }
.identity-copy p { margin: 0 0 20px; line-height: 1.95; color: var(--tn-text-warm); text-wrap: pretty; }
.identity-copy p:last-child { margin: 0; }
.identity-copy .break {
  font-family: var(--tn-display);
  font-size: clamp(1.12rem,1.65vw,1.48rem); line-height: 1.5;
  color: var(--tn-bone); margin: 0 0 20px;
}

/* The four pillars, finally carrying meaning rather than decorating a footer. */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: clamp(24px,3vw,48px);
  margin-top: clamp(44px,6vh,80px);
  padding-top: clamp(30px,4vh,44px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.pillar-num {
  display: block; font-size: clamp(8.5px,0.7vw,10px);
  letter-spacing: 0.28em; color: var(--tn-numeral); margin-bottom: 10px;
}
.pillar-name {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.15rem,1.7vw,1.5rem); line-height: 1.2;
  color: var(--tn-bone); margin-bottom: 10px;
}
.pillar p {
  margin: 0; max-width: 26ch;
  font-size: clamp(12.5px,0.92vw,14px); line-height: 1.75; color: var(--tn-text-quiet);
}

/* Who the work is for — states it plainly for the senior hire. */
.work-for {
  margin: clamp(14px,2vh,20px) 0 0; max-width: 60ch;
  font-size: clamp(12.5px,0.92vw,14px); letter-spacing: 0.02em;
  line-height: 1.8; color: var(--tn-text-quiet);
}

/* Recognitions intro now carries two sentences, so give it room. */
.recognitions .intro-grid .lede { max-width: 34ch; }

/* ---------- v3.1 — aspiration. The positive mirror of the constraint. ---------- */
.aspiration {
  margin-top: clamp(46px,6.5vh,86px);
  padding-top: clamp(34px,4.6vh,52px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.aspiration .eyebrow-row { margin-bottom: clamp(24px,3.4vh,38px); }
.aspiration-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--tn-gutter); align-items: start;
}
.aspiration .lede { max-width: 24ch; color: var(--tn-bone-bright); }
.aspiration-copy { max-width: 58ch; }
.aspiration-copy p { margin: 0 0 20px; line-height: 1.95; color: var(--tn-text-warm); text-wrap: pretty; }
.aspiration-copy p:last-child { margin: 0; }
.aspiration-copy .break {
  font-family: var(--tn-display);
  font-size: clamp(1.12rem,1.65vw,1.48rem); line-height: 1.5;
  color: var(--tn-bone-bright); margin: 0 0 20px;
}

/* Hero: who it is for, sitting quietly under the standfirst. */
.standfirst-for {
  margin: clamp(14px,1.8vh,20px) 0 0; max-width: 52ch;
  font-size: clamp(11px,0.82vw,12.5px); letter-spacing: 0.06em;
  line-height: 1.85; color: var(--tn-text-quiet);
}

/* ---------- v3.2 — the record: numbers, then the names ---------- */
.brands { text-align: left; padding: clamp(46px,6.5vh,84px) var(--tn-section-x); }

.record {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: clamp(24px,3.4vw,52px);
  padding-bottom: clamp(36px,5vh,62px);
  margin-bottom: clamp(32px,4.4vh,54px);
  border-bottom: 1px solid var(--tn-rule-bronze-24);
}
.stat-num {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.9rem,3.6vw,3.1rem); line-height: 1;
  color: var(--tn-bronze-lit); letter-spacing: -0.01em;
}
.stat-num em { font-style: normal; font-size: .58em; vertical-align: 0.42em; }
.stat-label {
  display: block; margin-top: clamp(10px,1.4vh,15px); max-width: 22ch;
  font-size: clamp(9px,0.74vw,10.5px); letter-spacing: 0.2em;
  line-height: 1.75; text-transform: uppercase; color: var(--tn-text-quiet);
}

.brands-label {
  margin: 0 0 clamp(20px,2.8vh,28px);
  font-size: clamp(8.5px,0.72vw,10px); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--tn-numeral);
}
.brand-row { justify-content: flex-start; gap: clamp(16px,2.6vw,44px); }
.brand-row span { color: var(--tn-bronze-lit); }
.brand-row:hover span { color: var(--tn-bronze); }
.brand-row span:hover { color: var(--tn-bone-bright); }

/* ---------- paired calls to action ---------- */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px,2vw,26px); }
.cta-quiet {
  font-size: clamp(9px,0.74vw,10.5px); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--tn-ink-quiet);
  border-bottom: 1px solid rgba(138,95,56,.4); padding-bottom: 3px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.cta-quiet:hover { color: var(--tn-ink); border-bottom-color: rgba(138,95,56,.9); }

/* ============================================================
   v3.3 — legibility and scale fixes
   ============================================================ */

/* BUG: old stone-ground rules were beating the new dark-ground ones,
   rendering the founder lead paragraphs dark brown on dark leather.
   Higher specificity, explicit, no more inheritance games. */
.founder .founder-copy p { color: var(--tn-text-warm); }
.founder .founder-copy p.founder-lede { color: var(--tn-bone-bright); }
.founder .founder-copy p.break { color: var(--tn-bone); }
.founder .portrait-cap span:last-child { color: var(--tn-text-warm); }

/* Hero: everything up a notch. */
.wordmark { width: min(360px, 62%); }
.byline { font-size: clamp(10px,0.9vw,13px); letter-spacing: 0.42em; }
.hero-head { font-size: clamp(9.5px,0.82vw,12px); }
.enquiries { font-size: clamp(9.5px,0.82vw,12px); }
.hero-foot { font-size: clamp(9.5px,0.84vw,12px); }

/* Standfirst was too quiet to read comfortably on leather. */
.standfirst { color: var(--tn-text-warmer); font-size: clamp(13.5px,1.05vw,16px); }
.standfirst-for { color: var(--tn-text); font-size: clamp(11.5px,0.86vw,13px); }

/* ============================================================
   v3.4 — the lockup, and the story
   ============================================================ */

/* Wordmark up again, and the byline set as a perfume lockup:
   centred beneath the mark, not left-aligned to artwork that
   carries its own transparent padding. */
.wordmark { width: min(420px, 68%); }
.byline {
  width: min(420px, 68%);
  text-align: center;
  margin-top: clamp(14px,2vh,20px);
  font-size: clamp(10px,0.92vw,13px);
  letter-spacing: 0.46em;
  text-indent: 0.46em;          /* optical centring: kill the trailing track */
  color: var(--tn-text-quiet);
}

/* Two-paragraph standfirst now that it tells the whole arc. */
.standfirst { max-width: 58ch; }
.standfirst + .standfirst { margin-top: clamp(14px,1.8vh,20px); }
.hero-centre { padding: clamp(28px,4vh,48px) 0; }

/* ---------- v3.5 — back off a notch. The third line tipped the balance. ---------- */
.hero h1 { font-size: clamp(1.62rem, 3.08vw, 2.82rem); }
.wordmark, .byline { width: min(384px, 63%); }
.standfirst-for { max-width: 45ch; text-wrap: pretty; }
.hero h1 { font-size: clamp(1.52rem, 2.82vw, 2.58rem); }

/* ---------- v3.6 — hierarchy. The lockup identifies, the headline leads. ---------- */
.wordmark, .byline { width: min(322px, 54%); }
.byline { font-size: clamp(9.5px,0.84vw,11.5px); letter-spacing: 0.44em; text-indent: 0.44em; }
.hero-rule { margin: clamp(38px,5vh,58px) 0 clamp(34px,4.4vh,50px); }

/* ============================================================
   v4 — the wordmark leads. Hierarchy: lockup, headline, copy.
   ============================================================ */
.wordmark, .byline { width: min(452px, 66%); }
.byline { font-size: clamp(10px,0.9vw,12.5px); letter-spacing: 0.44em; text-indent: 0.44em; }

/* Hero is no longer one screen — the copy earns its length. */
.hero { min-height: auto; }
.hero-field { padding: clamp(38px,6vh,72px) clamp(26px,5.5vw,110px) clamp(34px,5vh,58px); }
.hero-centre { padding: clamp(46px,7vh,86px) 0 clamp(40px,6vh,72px); }
.hero-rule { margin: clamp(34px,4.4vh,52px) 0 clamp(30px,4vh,46px); }

/* Body copy: generous measure and leading, it is being read now. */
.standfirst {
  max-width: 62ch;
  font-size: clamp(13.5px,1.02vw,15.5px);
  line-height: 1.95;
  color: var(--tn-text-warmer);
}
.standfirst + .standfirst { margin-top: clamp(16px,2vh,22px); }

/* The closing line is a statement, not a paragraph. Set it as one. */
.standfirst-close {
  margin: clamp(28px,3.6vh,42px) 0 0; max-width: 44ch;
  font-family: var(--tn-display);
  font-size: clamp(1.12rem,1.62vw,1.45rem); line-height: 1.5;
  color: var(--tn-bone-bright); text-wrap: pretty;
}
.standfirst-for {
  margin-top: clamp(26px,3.4vh,38px);
  padding-top: clamp(16px,2.2vh,22px);
  border-top: 1px solid var(--tn-rule-bronze-24);
  max-width: 45ch;
}

/* ---------- v4.1 — wrapping fixes found in full-page review ---------- */

/* Credentials now span the section, so the list never breaks mid-line
   and leaves a separator stranded at the end of a row. */
.creds {
  max-width: none;
  margin-top: clamp(34px,4.6vh,56px);
  padding-top: clamp(18px,2.4vh,26px);
  justify-content: flex-start;
}

/* Stat labels: wider columns so nothing runs to five lines. */
.record { grid-template-columns: repeat(auto-fit, minmax(178px,1fr)); }
.stat-label { max-width: 24ch; }

/* Seven brand names: tighter setting so the row holds together. */
.brand-row { gap: clamp(14px,2.1vw,34px); }
.brand-row span { font-size: clamp(0.88rem,1.28vw,1.12rem); }

/* Explicit columns. auto-fit was orphaning the sixth stat onto its own row;
   six, three or two, never five-plus-one. */
.record { grid-template-columns: repeat(2, 1fr); gap: clamp(28px,3.4vh,42px) clamp(20px,2.6vw,40px); }
@media (min-width: 620px)  { .record { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .record { grid-template-columns: repeat(6, 1fr); } }
.stat-label { max-width: 20ch; }

/* Six quotes now sit 3 x 2 with no orphan; Deloitte closes the block,
   given its own frame because the name earns it. */
.quote-close {
  max-width: 34ch; margin: clamp(40px,5.4vh,72px) 0 0;
  padding-top: clamp(28px,3.6vh,42px);
  border-top: 1px solid var(--tn-rule-ink-36);
}
.quote-close p { font-size: clamp(1.45rem,2.5vw,2.1rem); line-height: 1.34; }
.quote-close .attrib { border-top: 0; padding-top: 0; margin-top: clamp(16px,2.2vh,22px); }

/* ============================================================
   THE ANCHOR — Silence composition, stone, before the close.
   The philosophy returns in the light half, where it is otherwise
   absent, as the last idea before the ask.
   ============================================================ */
.anchor {
  background: var(--tn-stone);
  border-top: 1px solid var(--tn-rule-ink-36);
  padding: clamp(88px,14vh,190px) var(--tn-section-x);
  display: flex; justify-content: center;
}
.anchor-statement {
  margin: 0; max-width: 40ch;
  font-family: var(--tn-display);
  font-size: clamp(1.28rem,2.15vw,1.92rem); line-height: 1.46;
  color: var(--tn-ink); text-wrap: pretty;
}
.anchor .arrive, .anchor .arrive.is-in { filter: none; }

/* ============================================================
   v4.4 — the hero must frame the pillars at its foot.
   Copy spreads across the available field instead of sitting in
   a narrow column, which lifts everything and shortens the block.
   ============================================================ */
.hero { min-height: 100dvh; }
.hero-centre { padding: clamp(30px,4vh,54px) 0 clamp(26px,3.4vh,44px); }
.hero-rule { margin: clamp(26px,3.2vh,38px) 0 clamp(24px,3vh,34px); }

.standfirst {
  max-width: 88ch;
  line-height: 1.78;
  font-size: clamp(13px,0.98vw,15px);
}
.standfirst + .standfirst { margin-top: clamp(11px,1.3vh,15px); }

.standfirst-close {
  margin-top: clamp(20px,2.4vh,28px);
  max-width: 62ch;
  font-size: clamp(1.05rem,1.42vw,1.28rem);
}
.standfirst-for {
  margin-top: clamp(18px,2.2vh,24px);
  padding-top: clamp(12px,1.5vh,16px);
  max-width: 72ch;
}