/* ============================================================
   THE MAN BEHIND THE BRAND
   Editorial profile. Two photographs, each full bleed and alone.
   Measures vary by intent: full, two-thirds, one-third, narrow left,
   narrow right. Typographic range runs from 3.4rem down to 10px so
   the contrast between very large and very small carries the register.
   Every archival frame is graded to the hero portrait, measured at
   warmth +26.7 / saturation 0.256 and matched with sepia .7
   ============================================================ */

.p1, .p2 {
  background: var(--tn-leather);
  padding: clamp(49.2px,7.02vh,94.2px) var(--tn-section-x);
  border-top: 1px solid var(--tn-rule-bone-07);
}
.p1-alt, .p2-alt { background: var(--tn-leather-warm); }
.p2 { padding-top: clamp(42.6px,5.85vh,76px); }

/* ---------- chapter mark: heavier than a section eyebrow ---------- */
.p-mark { display: flex; align-items: baseline; gap: clamp(18px,2.4vw,34px); margin-bottom: clamp(32.8px,4.68vh,65.4px); }
.p-mark span {
  font-size: clamp(9.9px,min(0.9vw,1.49vh),12.2px); letter-spacing: 0.46em;
  text-transform: uppercase; color: var(--tn-bronze); white-space: nowrap;
}
.p-mark::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tn-rule-bronze-30); }

/* ---------- the top of the scale ---------- */
.p-open { max-width: min(780px, 100%); margin-bottom: clamp(42.6px,5.85vh,79px); }
.p-huge {
  margin: 0; font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.85rem,4.1vw,3.4rem); line-height: 1.16;
  letter-spacing: -0.008em; color: var(--tn-bone-bright); text-wrap: pretty;
}
.p-big {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.34rem,2.4vw,2.05rem); line-height: 1.32;
  color: var(--tn-bone-bright); text-wrap: pretty; max-width: 28ch;
}

/* ---------- the bottom of the scale: precise, small, generous leading ---------- */
.p-body p {
  margin: 0 0 clamp(16px,2vh,23px);
  font-size: clamp(15px,min(1.24vw,2.05vh),16.8px); line-height: 1.76;
  color: var(--tn-text-warm); text-wrap: pretty;
}
.p-body p:last-child { margin-bottom: 0; }

/* ---------- measures. Each one different on purpose. ---------- */
.p-split {
  display: grid; grid-template-columns: minmax(260px,0.72fr) minmax(320px,1fr);
  gap: clamp(36px,5vw,88px); align-items: start;
}
.p-third {
  display: grid; grid-template-columns: minmax(260px,1fr) minmax(300px,1.15fr);
  gap: clamp(36px,5vw,88px); align-items: start;
}
@media (min-width:901px){ .p-third-flip { grid-template-columns: minmax(300px,1.3fr) minmax(260px,1fr); } }
.p-third + .p-ledger, .p-split + .p-turn { margin-top: clamp(36.1px,5.07vh,66.9px); }

.p-narrow { max-width: min(640px, 100%); }
.p-narrow p { margin: 0 0 clamp(16px,2vh,23px); font-size: clamp(15px,min(1.24vw,2.05vh),16.8px); line-height: 1.76; color: var(--tn-text-warm); }
.p-narrow p:last-child { margin-bottom: 0; }
.p-narrow-right { margin-left: auto; margin-top: clamp(36.1px,5.07vh,66.9px); }

/* ---------- the portrait ---------- */
.p-portrait img {
  width: 100%; display: block;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.9);
}
.p-cap {
  display: flex; align-items: center; gap: 13px; margin-top: clamp(14px,1.9vh,19px);
  font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.p-cap i { width: 24px; height: 1px; background: var(--tn-rule-bronze-62); flex: 0 0 auto; }

/* ---------- the turn, and the pull ---------- */
.p-turn { max-width: min(620px, 100%); }
.p-turn p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.2rem,1.85vw,1.62rem); line-height: 1.44;
  color: var(--tn-bone); text-wrap: pretty;
}
.p-pull {
  margin-top: clamp(39.4px,5.46vh,73px); padding-top: clamp(24.6px,3.12vh,33.4px);
  border-top: 1px solid var(--tn-rule-bronze-24); max-width: min(660px, 100%);
}
.p-pull p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.16rem,1.78vw,1.55rem); line-height: 1.46;
  color: var(--tn-bone-soft); text-wrap: pretty;
}

/* ---------- lines that land in sequence ---------- */
.p-lines { margin: clamp(32.8px,4.29vh,57.8px) 0; max-width: min(640px, 100%); }
.p-lines-wide { max-width: min(860px, 100%); }
.p-lines p {
  margin: 0 0 clamp(11px,1.5vh,16px); font-family: var(--tn-display);
  font-size: clamp(1.05rem,1.48vw,1.3rem); line-height: 1.5; color: var(--tn-bone-soft);
}
.p-lines p:last-child { margin-bottom: 0; }

/* the four-part ledger, indented off a bronze hairline */
.p-ledger {
  margin: clamp(36.1px,5.07vh,66.9px) 0 0; padding-left: clamp(20px,2.4vw,32px);
  border-left: 1px solid var(--tn-rule-bronze-30); max-width: min(500px, 100%);
}
.p-ledger p {
  margin: 0 0 clamp(9px,1.2vh,13px); font-family: var(--tn-display);
  font-size: clamp(1.1rem,1.6vw,1.4rem); line-height: 1.38; color: var(--tn-bone-soft);
}
.p-ledger-turn { color: var(--tn-bronze-lit) !important; margin-top: clamp(16px,2.2vh,24px) !important; }

/* ============================================================
   THE PLATES. One photograph, edge to edge, nothing beside it.
   ============================================================ */
.p-plate { margin: 0; position: relative; background: var(--tn-leather-deep); }
.p-plate img {
  width: 100%; display: block;
  aspect-ratio: 21/9; object-fit: cover; object-position: 50% 34%;
  filter: grayscale(1) sepia(.7) contrast(1.06);
}
/* the plate darkens at its foot so the caption sits on the image */
.p-plate::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, rgba(14,11,8,0), rgba(14,11,8,.86));
  pointer-events: none;
}
.p-plate figcaption {
  position: absolute; left: var(--tn-section-x); right: var(--tn-section-x);
  bottom: clamp(19.7px,2.65vh,33.4px); z-index: 2;
  font-size: clamp(11px,min(1.03vw,1.7vh),13.9px); line-height: 1.65;
  letter-spacing: 0.02em; color: var(--tn-text-warmer); max-width: 54ch;
}
.p-plate figcaption span {
  display: inline-block; margin-right: 14px; padding-right: 14px;
  border-right: 1px solid var(--tn-rule-bronze-62);
  font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-bronze-lit);
}

/* ============================================================
   THE OBJECTIVE. The quietest screen on the site.
   ============================================================ */
.p-objective {
  background: var(--tn-leather);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding: clamp(90.2px,14.04vh,182.4px) var(--tn-section-x);
}
.p-objective-line {
  margin: 0; max-width: 24ch; font-family: var(--tn-display);
  font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.2;
  letter-spacing: -0.006em; color: var(--tn-bone-bright);
}
.p-objective-sub { margin-top: clamp(45.9px,6.24vh,88.2px); max-width: min(520px, 100%); }
.p-objective-sub p {
  margin: 0 0 8px; font-size: clamp(15px,min(1.2vw,1.98vh),16.2px);
  line-height: 1.76; color: var(--tn-text-quiet);
}

/* ---------- the thesis ---------- */
.thesis {
  background: var(--tn-leather) url(assets/mat-founders-leather.jpg) center/cover;
  position: relative; padding: clamp(57.4px,7.8vh,110.2px) var(--tn-section-x);
  border-top: 1px solid var(--tn-rule-bone-07);
}
.thesis::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,16,12,.95), rgba(19,16,12,.87) 45%, rgba(19,16,12,.97));
}
.thesis > * { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; max-width: 58ch; }
.steps li {
  display: grid; grid-template-columns: clamp(34px,3.8vw,52px) 1fr;
  gap: clamp(16px,2.4vw,34px); align-items: baseline;
  padding: clamp(19px,2.7vh,32px) 0;
  border-top: 1px solid var(--tn-rule-bone-07);
}
.steps li:last-child { border-bottom: 1px solid var(--tn-rule-bone-07); }
.steps .n { font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: 0.28em; color: var(--tn-numeral); }
.steps p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.14rem,1.9vw,1.62rem); line-height: 1.34;
  color: var(--tn-bone-soft); text-wrap: pretty;
}
.steps li:last-child p { color: var(--tn-bone-bright); }
.js .steps li { opacity: 0; transform: translateY(11px); }
.steps li.is-in {
  opacity: 1; transform: none;
  transition: opacity 800ms cubic-bezier(.16,.62,.24,1) var(--d,0ms),
              transform 800ms cubic-bezier(.16,.62,.24,1) var(--d,0ms);
}

.p2 .creds { margin-top: clamp(42.6px,5.85vh,76px); }

@media (prefers-reduced-motion: reduce) { .js .steps li { opacity:1!important; transform:none!important; } }

/* ---------- mobile: measures collapse, scale holds ---------- */
@media (max-width: 900px) {
  .p1, .p2, .thesis, .p-objective { padding-left: 26px; padding-right: 26px; }
  .p-split, .p-third, .p-third-flip { grid-template-columns: 1fr; gap: clamp(23px,3.12vh,30.4px); }
  .p-open, .p-turn, .p-narrow, .p-pull, .p-lines, .p-ledger { max-width: none; }
  .p-narrow-right { margin-left: 0; }
  .p-plate img { aspect-ratio: 4/3; }
  .p-plate figcaption { left: 26px; right: 26px; }
  .steps li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- plates: corrected ----------
   21:9 was too severe for these sources; it cropped heads and lost the
   document. 16:9 holds the frame. Exposure pulled back and contrast
   lifted so the window stops blowing out, and a deeper scrim so the
   caption sits on the image rather than fighting it. */
.p-plate img {
  aspect-ratio: 16/9; object-position: 50% 40%;
  filter: grayscale(1) sepia(.7) brightness(.88) contrast(1.16);
}
.p-plate::after { height: 58%; background: linear-gradient(180deg, rgba(14,11,8,0), rgba(14,11,8,.62) 46%, rgba(14,11,8,.94)); }
.p-plate figcaption { max-width: min(760px, 100%); }

/* the awards frame is a wide group shot; hold it higher and lift it a touch */
.p-plate.p-plate-team img { object-position: 50% 30%; filter: grayscale(1) sepia(.7) brightness(1.02) contrast(1.1); }

/* the ledger and the copy that answers it share one row */
.p-third-close { margin-top: clamp(36.1px,5.07vh,66.9px); align-items: start; }
.p-third-close .p-ledger { margin-top: 0; }

/* the awards frame: the certificate is the story, so the crop must hold it.
   3:2 keeps the lower third where the frame is being held. */
.p-plate.p-plate-team img { aspect-ratio: 3/2; object-position: 50% 46%; }

/* ============================================================
   CRAFT PASS
   The refinements that separate set type from typeset type.
   ============================================================ */

/* real ligatures and kerning, optical sizing where the face supports it */
.p1, .p2, .p-plate, .p-objective, .thesis {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
}

/* hanging punctuation, so a quote or bracket sits outside the measure
   and the left edge of a Caslon paragraph stays optically straight */
.p-huge, .p-big, .p-turn p, .p-pull p, .p-objective-line, .steps p, .p-lines p, .p-ledger p {
  hanging-punctuation: first last;
}

/* short display lines break evenly rather than leaving one word stranded */
.p-objective-line, .p-turn p, .p-lines p, .p-ledger p { text-wrap: balance; }

/* the largest type is set slightly tighter, as display faces should be */
.p-huge { letter-spacing: -0.012em; word-spacing: -0.01em; }
.p-big  { letter-spacing: -0.006em; }
.p-objective-line { letter-spacing: -0.01em; }

/* small caps eyebrows sit optically centred by killing the trailing track */
.p-mark span { text-indent: 0.46em; }

/* body copy: no widows left alone on a final line */
.p-body p, .p-narrow p { text-wrap: pretty; orphans: 2; widows: 2; }

/* ---------- measure discipline ----------
   Body lines were running to roughly 95 characters. Reading comfort sits
   at 55 to 75. Capped, and the space that remains becomes intentional
   margin rather than an over-long line. */
.p-body { max-width: min(540px, 100%); }
.p-split .p-body, .p-third .p-body { max-width: min(560px, 100%); }
.p-narrow { max-width: min(560px, 100%); }


/* ---------- measure discipline, applied after the mobile query so it must
             re-declare its own mobile behaviour ---------- */
@media (max-width: 900px) {
  .p-body, .p-split .p-body, .p-third .p-body, .p-narrow { max-width: 100%; }
  .p-split, .p-third, .p-third-flip, .p-third-close { grid-template-columns: 1fr !important; }
}

/* ============================================================
   GOLD
   A signal, not a decoration. One line per movement, never more.
   Its power is entirely scarcity: the Brand Evolution Study caps
   bronze at 3% of surface, and gold that appears five times stops
   meaning "this line matters" and starts meaning "this is the style".
   Solid lit bronze on the turns. The foil gradient, which already
   exists in the system on the monogram, on the single peak line.
   ============================================================ */
.gold { color: var(--tn-bronze-lit) !important; }

.gold-foil {
  background: linear-gradient(112deg,
    #8A6742 0%, #C09A6B 22%, #E4C79A 42%, #C09A6B 58%, #A67F51 74%, #7A5A38 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not (background-clip: text) { .gold-foil { color: var(--tn-bronze-lit); } }

/* ============================================================
   WHAT WE DO. The signpost, two screens in.
   ============================================================ */
.signpost {
  background: var(--tn-leather-warm);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding: clamp(47.6px,6.24vh,83.6px) var(--tn-section-x);
}
.sign-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 0; border-top: 1px solid var(--tn-rule-bronze-24);
}
.sign {
  display: block; padding: clamp(21.3px,2.81vh,33.4px) clamp(22px,2.6vw,42px) clamp(24.6px,3.12vh,36.5px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11);
  color: inherit; transition: background-color var(--tn-tone);
}
.sign + .sign { border-left: 1px solid var(--tn-rule-bone-11); padding-left: clamp(22px,2.6vw,42px); }
.sign:hover { background: rgba(231,222,207,.028); }
.sign-n { display: block; font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: .28em; color: var(--tn-numeral); }
.sign-name {
  display: block; margin-top: clamp(12px,1.6vh,18px); font-family: var(--tn-display);
  font-size: clamp(1.5rem,2.7vw,2.25rem); line-height: 1.1; color: var(--tn-bone-bright);
}
.sign-sub {
  display: block; margin-top: 9px; font-size: clamp(9.9px,min(0.9vw,1.49vh),12.2px);
  letter-spacing: .28em; text-transform: uppercase; color: var(--tn-bronze);
}
.sign p {
  margin: clamp(16px,2.2vh,24px) 0 0; max-width: min(38ch, 100%);
  font-size: clamp(15px,min(1.2vw,1.98vh),16.2px); line-height: 1.67; color: var(--tn-text-warm);
}
.sign-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px clamp(24px,4vw,60px); margin-top: clamp(24.6px,3.28vh,39.5px);
}
.sign-terms { margin: 0; font-size: clamp(15px,min(1.12vw,1.84vh),15.1px); line-height: 1.65; color: var(--tn-text-quiet); max-width: min(52ch,100%); }
.sign-cta {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: clamp(9.9px,min(0.95vw,1.56vh),12.8px); letter-spacing: .3em; text-transform: uppercase;
  color: var(--tn-bone-soft); border: 1px solid var(--tn-rule-bronze-30);
  padding: clamp(13px,1.4vw,17px) clamp(20px,2.2vw,30px);
  transition: background-color var(--tn-tone), color var(--tn-tone), border-color var(--tn-tone), transform var(--tn-press);
}
.sign-cta:hover { background: rgba(169,118,74,.15); color: var(--tn-bone-bright); border-color: rgba(169,118,74,.75); }
.sign-cta:active { transform: translateY(1px); }

/* ---------- early proof, inside the record band ---------- */
.record-quote {
  margin: clamp(27.9px,3.59vh,48.6px) 0 clamp(24.6px,3.12vh,38px);
  padding-top: clamp(21.3px,2.65vh,30.4px); border-top: 1px solid var(--tn-rule-bronze-24);
  max-width: min(760px, 100%);
}
.record-quote p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.18rem,2vw,1.68rem); line-height: 1.44;
  color: var(--tn-bone-soft); text-wrap: pretty;
}
.record-quote .attrib { display: block; margin-top: clamp(16px,2.2vh,22px); border: 0; padding: 0; }
.record-quote .attrib strong {
  display: block; font-family: var(--tn-body); font-weight: 500;
  font-size: clamp(15px,min(1.12vw,1.84vh),15.1px); letter-spacing: .05em; color: var(--tn-bone);
}
.record-quote .attrib span {
  display: block; margin-top: 4px; font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px);
  letter-spacing: .24em; text-transform: uppercase; color: var(--tn-bronze);
}

/* ---------- the awards plate, contained rather than full bleed ---------- */
.p-plate-inset {
  max-width: min(880px, calc(100% - (var(--tn-section-x) * 2)));
  margin: clamp(41px,5.46vh,73px) auto;
}
.p-plate-inset img { aspect-ratio: 16/9; object-position: 50% 42%; }
.p-plate-inset figcaption { left: clamp(20px,2.4vw,34px); right: clamp(20px,2.4vw,34px); }

/* ---------- hero: a route to the work ---------- */
.hero-nav { display: flex; align-items: center; gap: clamp(16px,2.4vw,34px); }

@media (max-width: 900px) {
  .signpost { padding-left: 26px; padding-right: 26px; }
  .sign { padding-right: 0; }
  .sign + .sign { border-left: 0; padding-left: 0; }
  .sign-foot { flex-direction: column; align-items: flex-start; }
  .p-plate-inset { max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* ============================================================
   THE CONSULTATION
   The front door. Paid, named, time-boxed, and credited against
   whatever follows, which is the convention across premium
   professional services: it filters, it signals that the hour is
   substantive rather than a sales call, and corporate buyers
   expect to pay from the first interaction.
   ============================================================ */
.consult {
  display: grid; grid-template-columns: minmax(260px,0.85fr) minmax(320px,1.15fr);
  gap: clamp(32px,4.4vw,76px); align-items: start;
  padding: clamp(24.6px,3.12vh,36.5px) 0 clamp(32.8px,4.29vh,53.2px);
  border-top: 1px solid var(--tn-rule-bronze-30);
  border-bottom: 1px solid var(--tn-rule-bone-11);
  margin-bottom: clamp(36.1px,4.68vh,63.8px);
}
.consult-eyebrow {
  display: block; font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: .34em;
  text-transform: uppercase; color: var(--tn-bronze-lit);
}
.consult-name {
  margin: clamp(14px,1.9vh,20px) 0 0; font-family: var(--tn-display);
  font-size: clamp(1.75rem,3.2vw,2.7rem); line-height: 1.1;
  letter-spacing: -0.008em; color: var(--tn-bone-bright);
}
.consult-meta {
  display: flex; flex-wrap: wrap; gap: 8px clamp(12px,1.4vw,18px);
  margin-top: clamp(16px,2.2vh,22px);
  font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: .26em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.consult-meta .dot { color: var(--tn-bronze); }
.consult-body p {
  margin: 0 0 clamp(15px,1.9vh,21px); max-width: min(58ch,100%);
  font-size: clamp(15px,min(1.29vw,2.12vh),17.4px); line-height: 1.69; color: var(--tn-text-warm);
}
.consult-body p.gold {
  font-family: var(--tn-display); font-size: clamp(1.05rem,1.45vw,1.26rem);
  line-height: 1.5; margin-top: clamp(20px,2.6vh,28px);
}
.consult-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px,2.4vw,32px); margin-top: clamp(21.3px,2.65vh,30.4px);
}
.consult-alt {
  font-size: clamp(9.9px,min(0.9vw,1.49vh),12.2px); letter-spacing: .28em; text-transform: uppercase;
  color: var(--tn-text-quiet); border-bottom: 1px solid rgba(169,118,74,.34); padding-bottom: 3px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.consult-alt:hover { color: var(--tn-bone-soft); border-bottom-color: rgba(169,118,74,.85); }

/* ============================================================
   WHO THIS IS FOR. Two audiences, two readings, one door.
   ============================================================ */
.fork {
  background: var(--tn-leather);
  border-top: 1px solid var(--tn-rule-bone-07);
  padding: clamp(45.9px,6.24vh,80.6px) var(--tn-section-x);
}
.fork-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 0; border-top: 1px solid var(--tn-rule-bronze-24);
}
.fork-col {
  padding: clamp(21.3px,2.81vh,33.4px) clamp(24px,3vw,52px) clamp(24.6px,3.12vh,36.5px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11);
}
.fork-col + .fork-col { border-left: 1px solid var(--tn-rule-bone-11); padding-left: clamp(24px,3vw,52px); }
.fork-n { display: block; font-size: clamp(9.4px,min(0.86vw,1.41vh),11.6px); letter-spacing: .28em; color: var(--tn-numeral); }
.fork-name {
  margin: clamp(13px,1.8vh,18px) 0 clamp(16px,2.2vh,22px); font-family: var(--tn-display);
  font-size: clamp(1.22rem,2vw,1.62rem); line-height: 1.26; color: var(--tn-bone-bright);
  max-width: min(24ch,100%);
}
.fork-col p:not(.fork-name) {
  margin: 0; max-width: min(46ch,100%);
  font-size: clamp(15px,min(1.22vw,2.01vh),16.5px); line-height: 1.67; color: var(--tn-text-warm);
}
.fork-foot {
  margin: clamp(21.3px,2.81vh,31.9px) 0 0; font-family: var(--tn-display);
  font-size: clamp(1.05rem,1.5vw,1.3rem); color: var(--tn-bronze-lit);
}

/* the turn sits with the argument it closes, not adrift beneath the portrait */
.p-turn-aligned { margin-top: clamp(24.6px,3.12vh,39.5px); margin-left: auto; max-width: min(620px,100%); }

@media (max-width: 900px) {
  .consult { grid-template-columns: 1fr; gap: clamp(24px,3.4vh,34px); }
  .fork, .signpost { padding-left: 26px; padding-right: 26px; }
  .fork-col { padding-right: 0; }
  .fork-col + .fork-col { border-left: 0; padding-left: 0; }
  .p-turn-aligned { margin-left: 0; max-width: 100%; }
}

/* Both plates contained. Full bleed made a phone photograph the loudest
   thing on the page, which is the wrong hierarchy when the portrait is
   the only frame shot with intent. */
.p-plate-inset { max-width: min(940px, calc(100% - (var(--tn-section-x) * 2))); }
.p-plate-inset img { aspect-ratio: 3/2; }
.p-plate-inset figcaption { font-size: clamp(10.5px,min(0.99vw,1.62vh),13.3px); line-height: 1.61; }

/* the recognitions now end where they should: at the door */
.rec-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px clamp(24px,4vw,60px);
  margin-top: clamp(31.2px,3.9vh,53.2px); padding-top: clamp(26px,3.4vh,38px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.rec-cta p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.08rem,1.6vw,1.4rem); line-height: 1.44;
  color: var(--tn-bone-soft); max-width: min(38ch,100%);
}
/* the line and the button fit side by side well below 900px; stacking early
   left the right half of the block empty on tablet for no reason */
@media (max-width: 640px) { .rec-cta { flex-direction: column; align-items: flex-start; } }

/* The two archive plates must not read as a matched pair. Different scale,
   different jobs: the signing closes an argument, the awards shot opens one. */
.p-plate-team.p-plate-inset { max-width: min(720px, calc(100% - (var(--tn-section-x) * 2))); }
.p-plate-team.p-plate-inset img { aspect-ratio: 4/3; }

/* ---------- Archive grading, solved against the portrait not guessed ----------
   The signing frame was shot into a bright window: raw mean luminance 146 with
   37% of pixels clipped, against the portrait's 113 and 6%. That, not its size,
   was why it shouted off a dark page. Each plate is graded to its own numbers,
   because one filter across two different exposures can only suit one of them.
   Signing, measured: mean 113.1, warmth 27.0, zero clipping. Portrait: 113.2, 26.7. */
.p-plate img { filter: grayscale(1) sepia(.7) brightness(.74) contrast(1.06); }
/* The awards frame is a night shot against a lit banner, so it cannot reach the
   signing plate's luminance without blowing the banner out. Matched on warmth
   instead, 26.9 against 27.0, which is what makes two frames read as one archive.
   Different light between a daylight boardroom and an awards night is truthful. */
.p-plate-team img { filter: grayscale(1) sepia(.9) brightness(1.04) contrast(1.04); }

/* flat scrim, separate layer so the caption gradient on ::after is untouched */
.p-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(14,11,8,.06);
}
.p-plate-team::before { background: rgba(14,11,8,.20); }
.p-plate figcaption { position: relative; z-index: 2; }

/* the last recognition already draws a rule; the call to action must not draw a second */
.rec-cta { border-top: 0; padding-top: 0; margin-top: clamp(24.6px,3.12vh,39.5px); }

/* Do not crop this one. The subject fills the frame top to bottom, Mark standing
   at the left edge and the signing at the bottom, so every letterbox crop loses
   either the heads or the hands. Print it smaller instead: 780px at its native
   3:2 gives the same reduction in presence with nothing cut off. */
.p-plate:not(.p-plate-team).p-plate-inset { max-width: min(780px, calc(100% - (var(--tn-section-x) * 2))); }
.p-plate:not(.p-plate-team) img { aspect-ratio: 3/2; object-position: 50% 42%; }

/* ---------- Captions sit under contained plates, not over them ----------
   The overlay caption belonged to the full-bleed treatment, where there was no
   page edge to hang it from. Contained, it overran the bottom of the photograph
   and printed the last line onto bare leather. Below the image it reads as a
   plate caption in a book, and the heavy bottom scrim that existed only to make
   white text legible over a photograph is no longer needed. */
.p-plate-inset::after { display: none; }
.p-plate-inset figcaption {
  position: static; padding: 0; margin-top: 15px;
  display: flex; gap: 15px; align-items: baseline;
  max-width: 62ch; background: none;
}
.p-plate-inset figcaption span {
  flex: none; color: var(--tn-bronze); letter-spacing: 0.26em; text-transform: uppercase;
  border-right: 1px solid var(--tn-rule-bronze-24); padding-right: 15px;
}

/* Run-in caption, not a flex row: a bare text node cannot be given a flex basis,
   so the text was wrapping at a third of the plate width. */
.p-plate-inset figcaption { display: block; max-width: none; }
.p-plate-inset figcaption span {
  display: inline-block; margin-right: 14px; padding-right: 14px;
  border-right: 1px solid var(--tn-rule-bronze-24);
}
/* No plate ground behind a contained figure, it printed a lighter box under the caption. */
.p-plate-inset { background: none; }
/* Hold the scrim to the photograph itself rather than the whole figure. */
.p-plate-inset::before { inset: 0 0 auto 0; height: auto; aspect-ratio: 3/2; }
.p-plate-team.p-plate-inset::before { aspect-ratio: 4/3; }

/* ---------- Why True North, moved up and carrying the thesis ---------- */
.chain { list-style: none; margin: 0 0 clamp(20px,2.6vh,30px); padding: 0; }
.chain li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--tn-rule-bronze-24);
  font-family: var(--tn-display); font-size: clamp(.98rem,1.25vw,1.18rem);
  line-height: 1.45; color: var(--tn-bone-soft);
}
.chain li:last-child { border-bottom: 0; }
.chain .n {
  flex: none; font-family: var(--tn-body); font-size: 11.5px;
  letter-spacing: .26em; color: var(--tn-bronze); transform: translateY(-2px);
}

/* ---------- In their words ----------
   Mark's correction, and he is right: nobody publishes revenue in a public
   reference. The proof is who is speaking and what they went on to build. So
   the attribution is given weight and the quotes are cut short, which sends the
   eye to the name rather than stranding it in the middle of a paragraph. */
.proof-lede {
  max-width: 62ch; margin: 0 0 clamp(31.2px,3.9vh,48.6px);
  font-family: var(--tn-display); font-size: clamp(1.05rem,1.5vw,1.34rem);
  line-height: 1.55; color: var(--tn-ink);
}
.proof .quote p { font-size: clamp(.96rem,1.16vw,1.1rem); line-height: 1.62; }
/* stone half: ink, not bone. */
.proof .attrib { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(138,95,56,.28); }
.proof .attrib strong {
  display: block; font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.02rem,1.28vw,1.2rem); letter-spacing: .01em;
  color: var(--tn-ink); margin-bottom: 5px;
}
.proof .attrib span {
  display: block; font-size: clamp(9.9px,min(0.9vw,1.49vh),12.2px); letter-spacing: .2em;
  text-transform: uppercase; line-height: 1.75; color: var(--tn-ink-eyebrow);
}

/* ---------- One route to Mark inside the founder run ---------- */
.mid-cta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px clamp(24px,4vw,56px);
  max-width: min(780px, calc(100% - (var(--tn-section-x) * 2)));
  /* the page is left aligned; auto margins floated this into the middle */
  margin: 0 var(--tn-section-x) clamp(49.2px,6.24vh,83.6px);
  padding-top: clamp(24px,3vh,34px); border-top: 1px solid var(--tn-rule-bronze-24);
}
.mid-cta p {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1rem,1.32vw,1.22rem); color: var(--tn-bone-soft);
}
/* the line and the button fit side by side well below 900px; stacking early
   left the right half of the block empty on tablet for no reason */
@media (max-width: 640px) { .mid-cta { flex-direction: column; align-items: flex-start; } }

/* The testimonials are the most persuasive point on the page. Ending them on a
   footnote and nothing else wasted it. */
.proof-close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px clamp(24px,4vw,56px);
  margin-top: clamp(32.8px,4.29vh,54.7px); padding-top: clamp(24px,3vh,34px);
  border-top: 1px solid rgba(138,95,56,.28);
}
.proof-close .proof-foot { margin: 0; max-width: 46ch; }
/* the line and the button fit side by side well below 900px; stacking early
   left the right half of the block empty on tablet for no reason */
@media (max-width: 640px) { .proof-close { flex-direction: column; align-items: flex-start; } }

/* Quotes vary in length, so the names landed at different heights and the block
   read as ragged. Each cell becomes a column with the attribution pushed to the
   floor, so every name in a row sits on one line and the eye can scan them. */
.proof-grid > .quote { display: flex; flex-direction: column; height: 100%; }
.proof-grid > .quote p { margin-bottom: clamp(20px,2.6vh,30px); }
.proof-grid > .quote .attrib { margin-top: auto; }

/* The fourth item wrapped, leaving a bullet stranded at the end of the line.
   It is a different kind of fact anyway: the first three are the terms, this is
   the reassurance. */
.consult-credit {
  margin: 10px 0 0; font-size: clamp(9.9px,min(0.9vw,1.49vh),12.2px);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.8;
  color: var(--tn-bronze);
}

/* ---------- The plates join the page ----------
   Every text block on this page begins at the section margin. Both photographs
   were centred, so they started at 330px and 360px, aligned to the copy above
   them, to the copy below them, and to each other: not at all. Centring is what
   made them read as objects dropped onto the page rather than part of it.
   Both now share the text column's left edge and the same width, and are told
   apart by aspect ratio rather than by size. Breathing raised from 57px to the
   section rhythm, so a photograph is not tighter to its neighbours than the
   sections are to theirs. */
.p-plate-inset,
.p-plate:not(.p-plate-team).p-plate-inset,
.p-plate-team.p-plate-inset {
  max-width: min(780px, calc(100% - (var(--tn-section-x) * 2)));
  margin-left: var(--tn-section-x);
  margin-right: auto;
  margin-top: clamp(57.4px,7.02vh,91.2px);
  margin-bottom: clamp(57.4px,7.02vh,91.2px);
}
.p-plate-team.p-plate-inset img { aspect-ratio: 4/3; }

/* ---------- Five offers in one block ----------
   Three of these are a sequence and two stand alone, so a plain five column row
   would have squeezed every card to 253px and set the wrong expectation anyway.
   A six column grid takes 2+2+2 on the first row and 3+3 on the second, which
   fills both rows edge to edge with no dangling gap and gives the standalone
   services more room to explain themselves. */
@media (min-width: 901px) {
  .sign-grid { grid-template-columns: repeat(6, 1fr); }
  .sign { grid-column: span 2; }
  .sign-wide { grid-column: span 3; }
  /* the divider belongs between cards in a row, never at the start of one */
  .sign:nth-child(1), .sign:nth-child(4) {
    border-left: 0; padding-left: 0;
  }
}
.sign-lead {
  margin: 0 0 clamp(16px,2.2vh,24px); max-width: 70ch;
  font-family: var(--tn-display); font-size: clamp(1rem,1.3vw,1.2rem);
  line-height: 1.55; color: var(--tn-bone-soft);
}
.sign-foot .sign-terms + .sign-terms { margin-top: 10px; }

/* Between phone and desktop the five cards fell into two or three columns and
   stranded the last one, leaving a 274px to 358px hole on the final row. Two
   columns with the fifth spanning both closes it at every width in that band. */
@media (max-width: 900px) and (min-width: 561px) {
  .sign-grid { grid-template-columns: repeat(2, 1fr); }
  .sign, .sign-wide { grid-column: span 1; }
  .sign:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sign-grid { grid-template-columns: 1fr; }
  .sign, .sign-wide { grid-column: 1 / -1; }
}

/* 28ch is the right measure for a display line on desktop, where it sits inside
   a two column composition and the silence around it is clearly deliberate. In
   the tablet band those compositions collapse to one column, so the same measure
   left the line using 40% of the block and the balance read as accidental rather
   than composed. Widened for that band only; desktop and phone are untouched. */
@media (max-width: 1024px) and (min-width: 641px) {
  .p-big { max-width: 34ch; }
}

/* ---------- Quotation marks, hung not decorated ----------
   The quotations carried no marks at all, so nothing said "a person said this"
   except the name underneath. The fix is punctuation, not ornament: a large
   bronze glyph on eleven quotations would read as a testimonial widget and would
   blow the bronze budget several times over, and scarcity is what gives the
   bronze its authority. Real marks, hung into the margin so the text edge stays
   optically flush, which is the craft the brand law asks for by name. */
.quote p, .record-quote p { text-indent: -0.44em; }
.quote .q, .record-quote .q { color: var(--tn-ink-eyebrow); }
/* the leather half needs the bronze that reads on leather */
.record-quote .q { color: var(--tn-bronze); }

/* Enough presence to register as speech from across the page, well short of the
   oversized glyph every testimonial widget uses. Sized as punctuation, not art. */
.quote .q, .record-quote .q { font-size: 1.55em; line-height: 0; vertical-align: -0.06em; }
.quote p, .record-quote p { text-indent: -0.62em; }

/* ---------- The sequence, stated where it is read ----------
   NN/g eye tracking puts 65% of viewing time in the top 40% of a page. The
   method sat at 69%, in the tail. The section is not moved; the proposition is
   summarised here at 26% and explained in full where it already lives. No
   numerals, because the chain below this is already numbered and two numbered
   runs in one section reads as one list broken in half. */
.sequence {
  max-width: min(820px, 100%);
  margin: clamp(36.1px,4.68vh,60.8px) 0 clamp(39.4px,5.07vh,66.9px);
}
.sequence-lead {
  margin: 0 0 clamp(21.3px,2.65vh,30.4px);
  font-family: var(--tn-display); font-size: clamp(1.24rem,2.1vw,1.82rem);
  line-height: 1.34; color: var(--tn-bone-bright); text-wrap: pretty;
  max-width: 30ch;
}
.sequence-steps p {
  margin: 0; padding: clamp(13px,1.7vh,17px) 0;
  border-top: 1px solid var(--tn-rule-bronze-24);
  font-family: var(--tn-display);
  font-size: clamp(1rem,1.28vw,1.16rem); line-height: 1.5;
  color: var(--tn-bone-soft); max-width: 62ch;
}
.sequence-steps p:last-child { border-bottom: 1px solid var(--tn-rule-bronze-24); }

/* ---------- The category line ----------
   The site named what it is not four times and what it is never once: zero uses
   of consultancy, consulting, advisory or agency anywhere, while "most firms",
   "most advisers" and "three months of consultants" all appear as things True
   North is unlike. You cannot differentiate inside a category you have not
   claimed, which is why the page read beautifully and finished as a question.
   The wording is lifted from the brand law's own first paragraph, which had
   never reached the site. Sits under the byline so the reader has the category
   before the argument, not after it. */
.hero-category {
  margin: clamp(17px,2.3vh,26px) 0 0;
  max-width: 44ch;
  font-family: var(--tn-display);
  font-size: clamp(1.02rem,1.42vw,1.28rem);
  line-height: 1.5;
  color: var(--tn-bone-soft);
  text-wrap: pretty;
}

/* The four word beat in the middle of the hero. It is the whole thesis, so it
   gets its own line and a touch more air rather than being buried mid paragraph. */
.standfirst-beat {
  font-family: var(--tn-display);
  font-size: clamp(1.16rem,1.66vw,1.5rem);
  line-height: 1.4; color: var(--tn-bone-bright); max-width: none;
  margin-top: clamp(24px,3.1vh,34px);
}

/* ---------- Flipping a section's ground ----------
   The palette is token driven, so a section can change ground by redefining the
   leather-side tokens to their ink equivalents. Everything inside inherits, which
   means no hunting for individual colour declarations and nothing gets missed.
   Measured before this change: the cream was 17% of the page and every pixel of
   it sat in the final 17%. Sixteen unbroken screens of dark before the first lift. */
.ground-stone {
  background: var(--tn-stone);
  --tn-text:         var(--tn-ink-body);
  --tn-text-quiet:   var(--tn-ink-quiet);
  --tn-text-warm:    var(--tn-ink-body-2);
  --tn-text-warmer:  var(--tn-ink-body);
  --tn-bone:         var(--tn-ink);
  --tn-bone-bright:  var(--tn-ink);
  --tn-bone-soft:    var(--tn-ink-body);
  /* bronze-ink measures 3.80:1 on stone, below AA for anything under 24px.
     ink-eyebrow carries the same warmth at 4.97:1. */
  --tn-bronze:       var(--tn-ink-eyebrow);
  --tn-bronze-lit:   var(--tn-ink-eyebrow);
  --tn-numeral:      var(--tn-ink-eyebrow);
  --tn-numeral-dim:  var(--tn-ink-quiet);
  --tn-rule-bone-07:   rgba(36,26,18,.08);
  --tn-rule-bone-11:   rgba(36,26,18,.14);
  --tn-rule-bronze-24: rgba(138,95,56,.30);
  --tn-rule-bronze-30: rgba(138,95,56,.36);
  --tn-leather-deep:   var(--tn-stone-deep);
}
/* a plate sitting on stone loses the dark scrim that only made sense on leather */
.ground-stone .p-plate::before { background: rgba(36,26,18,.05); }

/* ---------- Pre-existing AA failures on the stone half ----------
   Surfaced by checking every text node against its real background rather than
   the section I assumed it sat on. None of these were introduced by the ground
   change; they were live on the site already.
   The worst was the consultation button at the close of the testimonials, which
   inherited bone type built for leather and measured 1.02:1 on stone. It was the
   most persuasive moment on the page and the button was effectively invisible. */
.proof .sign-cta, .ways .sign-cta, .start .sign-cta, .ground-stone .sign-cta {
  color: var(--tn-ink); border-color: rgba(138,95,56,.42);
}
.proof .sign-cta:hover, .ways .sign-cta:hover, .start .sign-cta:hover, .ground-stone .sign-cta:hover {
  background: rgba(138,95,56,.12); color: var(--tn-ink); border-color: rgba(138,95,56,.75);
}
/* eyebrows and small labels on stone: bronze-ink is 3.80:1, below AA under 24px */
.founder .eyebrow, .proof .eyebrow, .ways .eyebrow, .room .eyebrow,
.start .eyebrow, .ground-stone .eyebrow { color: var(--tn-ink-eyebrow); }
.start .rung-name, .start .write-direct, .start .lbl,
.ways .rung-name { color: var(--tn-ink-quiet); }
/* the Start block sits on stone-deep, not stone, so the same ink loses contrast:
   4.37:1 against the 4.5 needed. One step darker clears it. */
.start .kicker, .start .meta span, .ways .kicker { color: var(--tn-ink-quiet); }

/* The record already draws a rule under the numbers; the quote drew a second one
   forty pixels below it at a different width. One rule, not two. */
.record-quote { border-top: 0; padding-top: 0; margin-top: clamp(30px,3.8vh,50px); }

/* This frame is 4:3 with the subjects low in it, so the standard crop kept the
   ceiling and pushed two people into the bottom third. Drop the crop. */
.p-plate.p-plate-room img { aspect-ratio: 2/1; object-position: 50% 100%; }

/* The new hero copy runs 91 words against the previous 73, which pushed the
   first screen 97px over. Font sizes and words are both fixed by instruction,
   so the space between paragraphs is the only lever, and it was generous. */
.hero .standfirst { margin-top: clamp(19px,2.4vh,26px); }
.hero .standfirst-beat { margin-top: clamp(21px,2.7vh,29px); }
.hero .standfirst-close { margin-top: clamp(23px,2.9vh,31px); }

/* Wrong lever, corrected. Trimming the hero's top air bought height by squashing
   the wordmark against the browser chrome, and the wordmark is the hero. The air
   above it is restored with more than it started with, and the height comes out
   of the gaps between the paragraphs instead. */
.hero .hero-field { padding-top: clamp(46px,5.6vh,82px); padding-bottom: clamp(22px,2.9vh,38px); }
.hero .hero-centre { padding: clamp(16px,2.1vh,28px) 0 clamp(12px,1.6vh,22px); }
.hero .hero-foot { margin-top: clamp(14px,1.8vh,24px); }

/* the copy closes up: this is where the height was always meant to come from */
.hero .standfirst { margin-top: clamp(13px,1.65vh,19px); }
.hero .standfirst-beat { margin-top: clamp(15px,1.9vh,22px); }
.hero .standfirst-close { margin-top: clamp(17px,2.1vh,24px); }
.hero .standfirst-for { margin-top: clamp(13px,1.6vh,18px); }
/* the mark is the hero and needs air; the body copy below the rule does not.
   Closing everything equally is what made the logo group feel bunched. */
/* the cascade already had four wordmark rules; 360 lost ground rather than
   gaining it. The mark is the hero, so it goes larger than it has ever been. */
.hero .wordmark { width: min(500px, 68%) !important; }
.hero .byline { margin-top: clamp(15px,2vh,22px); }
.hero .hero-category { margin-top: clamp(22px,2.8vh,32px); }
.hero .hero-rule { margin: clamp(26px,3.3vh,38px) 0; }

/* ---------- The mark sits lower, the copy pays for it ----------
   Mark's call twice over: bring True North down the page, close more gaps, and
   the headline may come down slightly. Air above the wordmark goes from 51px to
   88px. Every gap below the rule closes further, and the headline drops about
   8 per cent, which is worth more height than any single gap because it is three
   lines deep. */
.hero .hero-field { padding-top: clamp(72px,9.6vh,140px) !important; padding-bottom: clamp(18px,2.4vh,32px) !important; }
.hero .hero-centre { padding: clamp(12px,1.6vh,22px) 0 clamp(10px,1.3vh,18px) !important; }
.hero .hero-foot { margin-top: clamp(12px,1.5vh,20px) !important; }

.hero .standfirst { margin-top: clamp(10px,1.25vh,14px) !important; }
.hero .standfirst-beat { margin-top: clamp(12px,1.5vh,17px) !important; }
.hero .standfirst-close { margin-top: clamp(13px,1.6vh,18px) !important; }
.hero .standfirst-for { margin-top: clamp(11px,1.35vh,15px) !important; }

.hero .byline { margin-top: clamp(13px,1.7vh,19px) !important; }
.hero .hero-category { margin-top: clamp(19px,2.4vh,27px) !important; }
.hero .hero-rule { margin: clamp(22px,2.8vh,32px) 0 clamp(18px,2.3vh,26px) !important; }

.hero h1 { font-size: clamp(1.42rem, 2.62vw, 2.4rem) !important; line-height: 1.19; }

/* ---------- The category line runs on one line ----------
   44ch capped it at two lines even where the column had room. Uncapped it fits
   one line down to 1280px and wraps naturally below that, which is correct. */
.hero .hero-category { max-width: none !important; }

/* ---------- Height-aware type: keeping integrity in a short window ----------
   Every size on this page was fluid on viewport WIDTH alone. Open the browser at
   1920 wide but 613 tall and the type stayed at 16.8px and 38.4px while the
   vertical space halved: the hero became 925px in a 613px window and the page
   went from 20 screens to 33. The fix is to size off whichever dimension is
   scarcer, so a short window gets proportionally smaller type. */
:root {
  --tn-body-size:    clamp(14px,min(1.35vw,2.12vh),17.4px);
  --tn-eyebrow-size: clamp(9.6px,min(0.95vw,1.49vh),12.2px);
}
.hero h1 { font-size: clamp(1.3rem, min(2.62vw, 4.68vh), 2.4rem) !important; }
.hero .hero-category { font-size: clamp(0.95rem, min(1.42vw, 2.5vh), 1.28rem); }
.hero .standfirst { font-size: clamp(14px,min(1.29vw,2.12vh),17.4px); }
.hero .standfirst-beat { font-size: clamp(1.02rem, min(1.66vw, 2.93vh), 1.5rem) !important; }
.hero .standfirst-close { font-size: clamp(0.98rem, min(1.42vw, 2.5vh), 1.28rem) !important; }
.p-huge { font-size: clamp(1.6rem, min(4.1vw, 6.63vh), 3.4rem); }
.p-big  { font-size: clamp(1.2rem, min(2.4vw, 4vh), 2.05rem); }

/* ---------- Making the mark the hero, by area not by position ----------
   Measured: the statement block was 621x137px, three times the visual area of a
   500x56px wordmark. No amount of repositioning makes the smaller object the hero.
   The mark goes up, the statement comes down, until the ratio inverts. */
.hero .wordmark { width: min(660px, 72%) !important; }
.hero h1 { font-size: clamp(1.2rem, min(2.05vw, 3.66vh), 1.88rem) !important; line-height: 1.22; }
.hero .hero-field { padding-top: clamp(84px,11vh,160px) !important; }

/* ---------- Back to restraint ----------
   Three gold statements in one screen read as display rather than confidence.
   Mark's phrase was Dubai over old money, and he is right. The beats keep their
   scale and their Caslon; they lose the colour. Gold returns to two moments on
   the page, which is what makes it mean anything. */

/* ---------- The mark drops further into the frame ---------- */
.hero .hero-field { padding-top: clamp(112px,14.5vh,208px) !important; }

/* ---------- The brand names: scale and air, not colour ----------
   At 24px the warmer bronze clears AA for large text at 3.80:1, which it cannot
   do at 18px. So the scale increase is what buys the warmth, and the two work
   together rather than against each other. Left aligned to the text column and
   spaced as a list, so they read as a record rather than a run of words. */
.brands-label { margin-bottom: clamp(30px,4vh,44px) !important; }
.brand-row {
  justify-content: flex-start !important;
  /* seven names on one line at desktop; a lone orphan on a second line
     undoes the point of giving them scale */
  gap: clamp(18px,2vw,28px) clamp(22px,2.4vw,40px) !important;
  padding: clamp(6px,0.8vh,12px) 0 clamp(10px,1.4vh,18px);
}
.brand-row span {
  font-size: clamp(1.12rem, min(1.72vw, 2.44vh), 1.56rem) !important;
  /* the warmer bronze needs 24px+ to clear AA, and the height-aware sizing drops
     these to 22px on a shorter window. Scale is what gives them presence anyway;
     the colour has to be the one that passes at any size. */
  color: var(--tn-ink-eyebrow) !important;
  letter-spacing: 0.008em;
}
.brand-row:hover span { color: var(--tn-ink-quiet) !important; }
.brand-row span:hover { color: var(--tn-ink) !important; }

/* ---------- The statement runs two lines, not three ----------
   26ch forced a third line carrying only "and execution", which wasted a full
   line of vertical space and left an orphan. Widened to break in two, and the
   space it releases goes to the mark. */
.hero h1 { max-width: 42ch !important; text-wrap: balance; }

/* the brand names break evenly rather than stranding one on its own line */
.brand-row { max-width: min(900px, 100%) !important; }

/* ---------- The positioning line takes real weight ----------
   It is the line that says what this is, so it now carries display scale and sits
   on two lines rather than running as one long thin measure. Kept just under the
   aspiration headline so the hierarchy still reads: mark, what we are, what we
   believe. */
.hero .hero-category {
  font-size: clamp(1.16rem, min(1.94vw, 3.3vh), 1.66rem) !important;
  max-width: 62ch !important;
  line-height: 1.42;
  color: var(--tn-bone) !important;
}

/* Hierarchy after the mark: what we are, then what we believe. The two were
   within 3px of each other, which read as one muddled block. */
.hero .hero-category { font-size: clamp(1.2rem, min(2.06vw, 3.5vh), 1.78rem) !important; }
.hero h1 { font-size: clamp(1.12rem, min(1.78vw, 3.1vh), 1.6rem) !important; }
/* and the height that releases goes to the mark */
.hero .hero-field { padding-top: clamp(128px,16.5vh,240px) !important; }

/* ---------- The top bar rises, the mark keeps its place ----------
   The location line and Enquiries sat 38px above the wordmark, which read as one
   crowded stack. The bar now goes up near the top edge and the space it vacates
   becomes the gap beneath it, so the mark arrives after a long pause rather than
   immediately. Two levers working against each other: less air above the bar,
   much more between the bar and the mark. */
.hero .hero-field { padding-top: clamp(44px,5.6vh,84px) !important; }
.hero .hero-centre { padding-top: clamp(104px,14vh,200px) !important; }

/* ---------- The audience line ----------
   15px was too quiet for a line that names who this is for, and it sat 15px under
   the rule, which read as a footnote attached to the line above rather than a
   statement of its own. */
.hero .standfirst-for {
  font-size: clamp(15.5px, min(1.34vw, 2.2vh), 18.6px) !important;
  padding-top: clamp(26px,3.4vh,40px) !important;
  margin-top: clamp(18px,2.3vh,26px) !important;
  color: var(--tn-text) !important;
  letter-spacing: 0.045em;
}

/* ---------- The mark stands alone ----------
   Mark's note: it should read as a mark, not as copy. That needs space on BOTH
   sides, not just above. So the wordmark rises a little and the line beneath it
   is pushed down, which isolates it. The category line does not move up. */
.hero .hero-centre { padding-top: clamp(78px,10.4vh,150px) !important; }
.hero .hero-category { margin-top: clamp(52px,6.8vh,96px) !important; }

/* ---------- Vertical rhythm below the mark ----------
   Every gap in the body was 11 to 17px, which made display type, body copy and
   the two beats all read as one dense block. A hierarchy of gaps instead: display
   type gets the most air, the beats get air on both sides because they are
   punctuation rather than paragraphs, and the body copy sits closest to itself.
   Beat margins are set on both sides so the collapse leaves them symmetrical. */
.hero .hero-rule { margin: clamp(30px,3.9vh,44px) 0 clamp(26px,3.4vh,38px) !important; }
.hero .standfirst { margin-top: clamp(16px,2vh,23px) !important; }
.hero .standfirst-beat {
  margin-top: clamp(28px,3.6vh,40px) !important;
  margin-bottom: clamp(28px,3.6vh,40px) !important;
}
.hero h1 { margin-bottom: clamp(24px,3.1vh,34px) !important; }
.hero .standfirst-close { margin-top: clamp(30px,3.9vh,44px) !important; }

/* ---------- Everything comes up ----------
   The shortened positioning line freed a line; the rest comes from lifting the
   whole stack proportionally rather than crushing any one thing. The isolation
   directly below the mark is untouched, because that is what makes it a mark. */
.hero .hero-field { padding-top: clamp(30px,3.8vh,54px) !important; }
.hero .hero-centre { padding-top: clamp(66px,8.8vh,126px) !important; }
.hero .hero-rule { margin: clamp(24px,3.1vh,34px) 0 clamp(20px,2.7vh,30px) !important; }
.hero h1 { margin-bottom: clamp(19px,2.5vh,27px) !important; }
.hero .standfirst { margin-top: clamp(13px,1.7vh,19px) !important; }
.hero .standfirst-beat {
  margin-top: clamp(22px,2.9vh,32px) !important;
  margin-bottom: clamp(22px,2.9vh,32px) !important;
}
.hero .standfirst-close { margin-top: clamp(23px,3vh,33px) !important; }
.hero .standfirst-for { padding-top: clamp(20px,2.6vh,30px) !important; margin-top: clamp(14px,1.9vh,21px) !important; }
.hero .hero-foot { margin-top: clamp(16px,2.1vh,24px) !important; padding-top: clamp(16px,2.1vh,24px) !important; }
.hero .hero-field { padding-bottom: clamp(10px,1.4vh,18px) !important; }
/* the last of it: from the air above the mark and the closing furniture, never
   from the isolation directly beneath the mark */
.hero .hero-centre { padding-top: clamp(52px,6.9vh,100px) !important; }
.hero .standfirst-for { padding-top: clamp(17px,2.2vh,25px) !important; }
.hero .hero-foot { margin-top: clamp(13px,1.7vh,19px) !important; padding-top: clamp(13px,1.7vh,19px) !important; }
/* the four pillars up a touch: 31px above them, tightened to 20px */
.hero .hero-foot { margin-top: clamp(8px,1.05vh,12px) !important; padding-top: clamp(9px,1.15vh,13px) !important; }

/* ---------- The foot group lifts as a cluster ----------
   Measured: the audience line sat 22.7px under its rule while the pillars sat
   11.9px under theirs, with a 24px gap above that rule. So the pillars were both
   pushed down and cramped. The gaps above both rules close, and the pillars get
   the same breathing room under their rule that the line above them has. */
.hero .standfirst-for { margin-top: clamp(7px,0.95vh,11px) !important; padding-top: clamp(11px,1.5vh,16px) !important; }
.hero .hero-foot { margin-top: clamp(5px,0.7vh,8px) !important; padding-top: clamp(11px,1.5vh,16px) !important; }

/* ---------- Two flaws found on review, both of my own making ----------
   1. Three rules in the hero at three different widths: 80px, 892px and 1520px,
      all starting at the same left edge and ending in three arbitrary places. The
      short one after the positioning line is a deliberate dash and stays. The two
      lower ones do the same job as each other and must therefore agree, so the
      audience rule takes the full text column like the one below it.
   2. The gap above the audience rule was 10px, tightest thing in the hero by a
      factor of two, which made the gold line and the rule read as attached to
      each other rather than separated by one. */
.hero .standfirst-for { max-width: none !important; margin-top: clamp(16px,2.1vh,24px) !important; }

/* ---------- The pillars sit above the fold, with air beneath them ----------
   Lifting the gaps around them never worked, because they are the last element in
   a hero that ended exactly at the viewport edge. So they sat on the bottom line
   whatever the gaps did. The content above them shortens and real space opens
   below, so the line lands with room under it instead of against the edge. */
.hero .hero-centre { padding-top: clamp(38px,5vh,72px) !important; }
.hero .hero-category { margin-top: clamp(40px,5.2vh,74px) !important; }
.hero .hero-rule { margin: clamp(19px,2.5vh,27px) 0 clamp(16px,2.1vh,23px) !important; }
.hero h1 { margin-bottom: clamp(15px,2vh,21px) !important; }
.hero .standfirst { margin-top: clamp(11px,1.4vh,15px) !important; }
.hero .standfirst-beat { margin-top: clamp(18px,2.4vh,26px) !important; margin-bottom: clamp(18px,2.4vh,26px) !important; }
.hero .standfirst-close { margin-top: clamp(19px,2.5vh,27px) !important; }
/* the space beneath the pillars, which is the whole point */
.hero .hero-field { padding-bottom: clamp(42px,5.4vh,78px) !important; }

/* ---------- The four pillars move into the top bar ----------
   They could not sit above the fold on a short laptop while the hero also carried
   an isolated mark, two display statements, two paragraphs and two statements.
   In the top bar they are visible on every screen, and the hero loses the 120px
   the foot and its rule were costing. */
.hero-pillars {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px clamp(8px,0.9vw,14px);
  color: var(--tn-text-quiet);
}
.hero-pillars .dot { color: var(--tn-numeral); }
@media (max-width: 900px) {
  /* on a narrow screen the bar stacks; the pillars take their own line */
  .hero-pillars { order: 3; width: 100%; }
}

/* ---------- The four words, in the gap, nothing else touched ----------
   They sit in the 69px of empty space that was already below the audience line.
   The hero's bottom padding is reduced by exactly what they occupy, so the hero
   height is unchanged and no other element on the page moves by a single pixel. */
.hero .hero-pillars {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px clamp(10px,1.1vw,18px);
  margin: 26px 0 0;
  font-size: clamp(9.4px,min(0.9vw,1.49vh),12.2px);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--tn-text-quiet);
}
.hero .hero-pillars .dot { color: var(--tn-numeral); }
.hero .hero-field { padding-bottom: clamp(12px,1.5vh,22px) !important; }

/* ---------- Evidence and an action in the hero ----------
   The hero asserted "a commercial operator" and carried no number to support it,
   and offered one route to act: a mailto in the corner. Both fixed without moving
   the mark, the positioning line or the statement. */
.hero-proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px clamp(9px,1vw,15px);
  font-size: clamp(9.4px,min(0.9vw,1.49vh),12.2px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tn-text-quiet);
}
.hero-proof .dot { color: var(--tn-numeral); }
.hero-centre > .hero-proof { margin-top: clamp(15px,2vh,22px); }
.hero-book { margin-right: clamp(18px,2.2vw,38px); }
.hero-baseline {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px clamp(24px,3vw,54px); margin-top: 26px;
}
.hero-baseline .hero-pillars, .hero-baseline .hero-proof { margin: 0; }
.hero-book-end {
  font-size: clamp(9.4px,min(0.9vw,1.49vh),12.2px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--tn-bronze-lit);
  border-bottom: 1px solid var(--tn-rule-bronze-24); padding-bottom: 3px;
}
/* the hero's spare bottom padding absorbs the new line so nothing above moves */
.hero .hero-field { padding-bottom: clamp(8px,1vh,14px) !important; }
/* removing the second statement freed 56px while the proof line cost 30, so the
   centred block sat 28px low. The mark returns to exactly where it was locked and
   the surplus falls through the body as breathing room. */
.hero .hero-centre { padding-top: clamp(16px,2.2vh,32px) !important; }

/* ---------- The wordmark set in the brand's own typeface ----------
   It was a PNG in an unnamed face with no vector source, so it could not be
   scaled, recoloured, relockup'd or handed to a printer, and it was quietly a
   third typeface in a brand whose law permits two. Now live type in Libre Caslon
   Display: selectable, searchable, infinitely scalable, and it holds together at
   avatar size where the old hairlines dissolved. */
.hero .wordmark {
  width: auto !important; max-width: 100%;
  font-family: var(--tn-display);
  font-size: clamp(2.1rem, min(4.4vw, 7.4vh), 4.35rem);
  line-height: 1; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tn-bone-bright);
  text-indent: 0.2em;            /* optical: cancels the trailing letterspace */
  white-space: nowrap;
}
.hero .wordmark { display: inline-block; }
/* wordmark and byline as one lockup, so the byline centres on the mark itself
   rather than on a container that no longer has the mark's width */
.hero .lockup { display: inline-block; }
.hero .wordmark { font-size: clamp(2.3rem, min(4.85vw, 8.1vh), 4.8rem); }
.hero .lockup .byline {
  width: auto !important; max-width: none !important;
  display: block; text-align: center;
  margin-top: clamp(13px,1.7vh,19px);
}
/* an earlier rule still pinned the wordmark to a percentage width, which inside a
   shrink-to-fit lockup collapsed it to 152px. Width comes from the type now. */
.hero .lockup .wordmark { width: auto !important; max-width: none !important; }
/* the byline carried its own percentage width too, which left it sitting 248px
   left of the mark's centre inside the lockup */
.hero .lockup > .byline { width: 100% !important; max-width: none !important; min-width: 0 !important; text-align: center; }
.hero .lockup { width: fit-content !important; max-width: 100%; }

/* ================= MOBILE AUDIT FIXES, 21 Aug 2026 =================
   Measured at a true 390px viewport using an iframe, because headless Chrome
   clamps its own window to 500px and hid all of this. */

/* ---------- 1. The wordmark was clipped on every phone ----------
   The clamp floor was 2.3rem, so at 390px the mark rendered at 36.8px and ran to
   403px inside a 390px viewport: the brand name was cut off by the screen edge.
   The vw term now drives it below the old floor. Desktop is unchanged, because
   above about 1100px the value is already capped by the vh term or the maximum. */
.hero .wordmark { font-size: clamp(1.5rem, min(7vw, 8.1vh), 4.8rem) !important; }

/* ---------- 2. The leather spine took 17% of a phone screen ----------
   66px of 390, which squeezed the hero copy into a 272px measure while the offers
   section got 338px. The most important screen had the narrowest column on it.
   Thinned to a stitched edge on phones; desktop keeps the full spine. */
@media (max-width: 700px) {
  .hero .spine { width: 18px !important; flex: 0 0 18px !important; }
  .hero .spine .monogram { display: none; }
  .hero .hero-field { padding-left: clamp(20px,5vw,28px) !important; }
}

/* ---------- 3. Type floor raised ----------
   The smallest text was 9.4px and appeared eighty times. Apple's guidance is 11pt,
   about 15px. Eyebrows and labels stay small by design, but not unreadable. */
@media (max-width: 700px) {
  .hero-proof, .hero-pillars, .eyebrow, .p-mark span, .attrib span,
  .sign-n, .sign-sub, .consult-meta, .consult-credit, .brands-label,
  .stat-label, .p-cap, .p-plate figcaption, .creds, .hero-loc, .byline,
  .sign-terms, .sign-lead, .proof-foot, .fork-n, .pillar-num, .pillar-name {
    font-size: 12px !important;
    letter-spacing: 0.16em !important;
    line-height: 1.75 !important;
  }
  .hero .standfirst-for { font-size: 13.5px !important; }
}

/* ---------- 4. Tap targets to 44px ----------
   Thirteen were under Apple's minimum, several at 16px tall, which is a coin flip
   with a thumb. The links that matter most were the hardest to press. */
@media (max-width: 700px) {
  a.enquiries, a.consult-alt, a.cta-quiet, a.hero-book,
  .rec-cta a, .mid-cta a, .proof-close a, .start a, .room a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 2px;
  }
  a.sign-cta, a.cta, a.stage-cta {
    display: inline-block; min-height: 48px; line-height: 48px;
    padding: 0 22px !important;
  }
}

/* ---------- Type floor, second pass ----------
   The first pass missed fifty-one elements: bare spans inside the eyebrow rows,
   the accordion numerals, the offer numerals, the buttons themselves, and several
   one-off labels. Caught by measuring every node under 12px rather than guessing. */
@media (max-width: 700px) {
  .hero-loc span, .hero-pillars span, .hero-proof span, .creds span,
  .brand-row span, .consult-meta span, .eyebrow-row span, .dot,
  .row-num, .steps .n, .chain .n, .sequence-steps .n,
  .stage-stage, .consult-eyebrow, .topics-label, .kicker, .write-direct,
  .fork-foot, .record .stat-label, .quote .attrib span, .portrait-cap span {
    font-size: 12px !important;
  }
  a.sign-cta, a.cta, a.cta-ink, a.stage-cta, a.consult-alt, a.cta-quiet, a.enquiries {
    font-size: 12px !important;
  }
}
/* the last fourteen: the stage meta rows, the plate caption dates, the room meta */
@media (max-width: 700px) {
  .stage-meta, .stage-meta span, .meta, .meta span, figcaption span { font-size: 12px !important; }
}

/* ================= CRITICAL: the method section rendered near-black =================
   .identity was converted to the cream ground, which set background-color to stone
   and remapped the text tokens to ink. But the section's original ::before, a
   near-black gradient at 93 per cent built for when it was leather, was left in
   place and painted straight over the cream. Result: ink text on an almost black
   ground. Measured 1.07:1 on the ledes and the pillar names, where AA needs 4.5.
   An entire section carrying the method and the differentiator was invisible on
   every device. The comparison that proves it: .proof is also cream and has no
   ::before at all. */
.identity.ground-stone::before { display: none !important; }

/* ================= MULTI-PAGE ARCHITECTURE =================
   The one-page rule was the single biggest UX cost on this site: everything had
   to fit on one page, so everything did, and the page reached thirty screens on
   a phone. Eye-tracking puts 65% of attention in the top 40%, which made screens
   thirteen to thirty decoration. Mark lifted the rule. The homepage is now six
   blocks and the depth sits behind four short pages.
   Nothing here changes the type, the materials, the testimonial treatment or one
   word of the writing. Sections were moved, not rewritten. */

/* ---------- the bar on the deeper pages ---------- */
.pagebar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px clamp(20px,3vw,48px);
  padding: clamp(20px,3vh,32px) var(--tn-section-x);
  border-bottom: 1px solid var(--tn-rule-bronze-24);
}
.pagebar-mark {
  font-family: var(--tn-display); font-size: clamp(1rem,1.3vw,1.22rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tn-bone-bright);
  text-decoration: none;
}
.pagebar-nav { display: flex; flex-wrap: wrap; gap: 10px clamp(16px,2.2vw,34px); margin-right: auto; }
.pagebar-nav a, .pagebar-cta {
  font-size: clamp(10.5px,.86vw,12px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tn-text-quiet); text-decoration: none; padding-bottom: 2px;
}
.pagebar-nav a:hover { color: var(--tn-bone-soft); border-bottom: 1px solid var(--tn-rule-bronze-24); }
.pagebar-cta { color: var(--tn-bronze-lit); border-bottom: 1px solid var(--tn-rule-bronze-24); }
@media (max-width: 700px) {
  .pagebar { gap: 12px 18px; }
  .pagebar-nav { width: 100%; order: 3; }
  .pagebar-nav a, .pagebar-cta { font-size: 12px !important; min-height: 44px; line-height: 44px; }
}

/* ---------- three doors: the audience fork ----------
   Six offers and five audiences all previously got the identical thirty screens.
   A creator, a sole trader, a board chair and an event planner now choose first. */
.doors { padding-top: clamp(60px,9vh,120px); }
.doors-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.door {
  display: block; padding: clamp(26px,3.6vh,44px) clamp(22px,2.6vw,42px) clamp(30px,4vh,48px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11); color: inherit; text-decoration: none;
  transition: background-color var(--tn-tone);
}
.door + .door { border-left: 1px solid var(--tn-rule-bone-11); padding-left: clamp(22px,2.6vw,42px); }
.door:hover { background: rgba(231,222,207,.028); }
.door-n { display: none; }
.door-name {
  display: block; margin-top: 0; font-family: var(--tn-display);
  font-size: clamp(1.24rem,1.9vw,1.62rem); line-height: 1.28; color: var(--tn-bone-bright);
}
.door p { margin: 14px 0 0; max-width: 34ch; line-height: 1.7; color: var(--tn-text-warm); }
.door-go {
  display: inline-block; margin-top: 18px; font-size: clamp(9.5px,.74vw,11px);
  letter-spacing: .22em; text-transform: uppercase; color: var(--tn-bronze-lit);
  border-bottom: 1px solid var(--tn-rule-bronze-24); padding-bottom: 3px;
}
.doors-foot { margin: clamp(28px,3.6vh,44px) 0 0; font-family: var(--tn-display);
  font-size: clamp(1rem,1.3vw,1.2rem); color: var(--tn-bone-soft); }

/* ---------- the four deeper pages, as a quiet index ---------- */
.deeper { padding-top: clamp(50px,7vh,90px); padding-bottom: clamp(50px,7vh,90px); }
.deeper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 0;
  border-top: 1px solid var(--tn-rule-bronze-24); }
.deeper-grid a {
  display: block; padding: clamp(22px,3vh,34px) clamp(18px,2.2vw,34px) clamp(24px,3.2vh,38px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11);
  font-family: var(--tn-display); font-size: clamp(1.06rem,1.5vw,1.3rem);
  color: var(--tn-bone-soft); text-decoration: none;
}
.deeper-grid a + a { border-left: 1px solid var(--tn-rule-bone-11); padding-left: clamp(18px,2.2vw,34px); }
.deeper-grid a:hover { color: var(--tn-bone-bright); background: rgba(231,222,207,.028); }
.deeper-grid a span {
  display: block; margin-bottom: 9px; font-family: var(--tn-body);
  font-size: clamp(9.5px,.7vw,11px); letter-spacing: .28em; color: var(--tn-numeral);
}
@media (max-width: 700px) {
  .doors-grid, .deeper-grid { grid-template-columns: 1fr; }
  .door + .door, .deeper-grid a + a { border-left: 0; padding-left: 0; }
  .door-n, .door-go, .deeper-grid a span { font-size: 12px !important; }
  .deeper-grid a { min-height: 44px; }
}
@media (max-width: 700px) { .pagebar-mark { min-height: 44px; line-height: 44px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8 — THE FUNNEL
   Three doors became three pages. Products got names. One route to Mark, one
   label for it, and two conversion devices built in the brand's own materials
   rather than bolted on from a marketing plugin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- the bar now carries the funnel, not the reading list ----------
   The three doors are the path to purchase, so they are the thing that must be
   reachable from every page. Method, Mark and the words moved to the footer:
   they are depth, and depth does not belong in a navigation bar. */
.pagebar-nav a.is-here { color: var(--tn-bone-bright); border-bottom: 1px solid var(--tn-rule-bronze-62); }
.pagebar-cta { white-space: nowrap; }

/* ---------- door page head ---------- */
.doorhead { padding: clamp(52px,8vh,104px) var(--tn-section-x) clamp(30px,4vh,54px); }
.doorhead-h {
  margin: clamp(20px,3vh,34px) 0 0; max-width: 24ch;
  font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.78rem, min(4.6vw, 5.4vh), 3.5rem); line-height: 1.16;
  color: var(--tn-bone-bright); letter-spacing: -.005em;
}
.doorhead-b {
  margin: clamp(20px,2.6vh,30px) 0 0; max-width: 62ch;
  font-size: var(--tn-body-size); line-height: var(--tn-body-leading); color: var(--tn-text-warm);
}

/* ---------- high calibre, and accessible with it ----------
   Two sentences doing one job: nobody is too small for this, and nobody should
   read "accessible" as "cheaper thinking". It sits on every door page because
   it is the question every visitor silently asks before they enquire. */
.calibre {
  margin-top: clamp(30px,4.4vh,56px); padding-top: clamp(22px,3vh,32px);
  border-top: 1px solid var(--tn-rule-bronze-24); max-width: 58ch;
}
.calibre p { margin: 0; font-size: var(--tn-body-size); line-height: 1.75; color: var(--tn-text-warm); }
.calibre-turn { margin-top: 8px !important; color: var(--tn-bronze-lit) !important; }

/* ---------- the offers: named, defined, and buyable ---------- */
.offers { padding: clamp(46px,7vh,90px) var(--tn-section-x) clamp(52px,8vh,100px); }
.offers-lede {
  margin: clamp(18px,2.4vh,28px) 0 0; max-width: 56ch;
  font-family: var(--tn-display); font-size: clamp(1.12rem,1.7vw,1.44rem);
  line-height: 1.44; color: var(--tn-bone-soft);
}
.offers-list { margin-top: clamp(34px,5vh,64px); border-top: 1px solid var(--tn-rule-bronze-24); }
.offer {
  display: grid; grid-template-columns: clamp(52px,6vw,96px) 1fr;
  gap: 0 clamp(14px,2vw,30px);
  padding: clamp(30px,4.4vh,54px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11);
}
.o-num {
  font-family: var(--tn-display); font-size: clamp(.86rem,1vw,1rem);
  color: var(--tn-numeral-dim); letter-spacing: .12em; padding-top: .38em;
}
.o-name {
  margin: 0; font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.38rem,2.4vw,2.05rem); line-height: 1.2; color: var(--tn-bone-bright);
}
.o-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 12px; font-size: clamp(11px,.82vw,12.5px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tn-text-quiet);
}
.o-meta .dot { color: var(--tn-bronze); }
.o-body {
  margin: clamp(14px,1.9vh,20px) 0 0; max-width: 66ch;
  font-size: var(--tn-body-size); line-height: var(--tn-body-leading); color: var(--tn-text-warm);
}
.o-note {
  margin: clamp(14px,1.9vh,20px) 0 0; max-width: 62ch;
  font-size: calc(var(--tn-body-size) - .5px); line-height: 1.75;
  color: var(--tn-text-quiet); font-style: italic;
}
.o-end {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: clamp(18px,2.4vh,28px); padding-top: clamp(14px,1.9vh,20px);
  border-top: 1px solid var(--tn-rule-bronze-24); max-width: 64ch;
}
.o-end p { margin: 0; font-size: var(--tn-body-size); line-height: 1.72; color: var(--tn-bone-soft); }
.o-end .tick { flex: 0 0 14px; height: 1px; margin-top: .82em; background: var(--tn-bronze); }
.o-cta {
  display: inline-block; margin-top: clamp(18px,2.4vh,26px);
  font-size: clamp(11px,.82vw,12.5px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tn-bronze-lit); text-decoration: none;
  border-bottom: 1px solid var(--tn-rule-bronze-24); padding-bottom: 4px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.o-cta:hover { color: var(--tn-bone-bright); border-bottom-color: var(--tn-rule-bronze-62); }
.offers-foot {
  margin: clamp(30px,4vh,50px) 0 0; max-width: 64ch;
  font-size: var(--tn-body-size); line-height: 1.78; color: var(--tn-text-quiet);
}

/* ---------- topics ---------- */
.topics-block {
  margin-top: clamp(34px,5vh,60px); padding-top: clamp(24px,3.2vh,36px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.topics-foot { margin: 18px 0 0; font-size: var(--tn-body-size); line-height: 1.72; color: var(--tn-text-quiet); }

/* ---------- the sibling doors: nobody reaches a dead end ---------- */
.doorsibs { padding: clamp(40px,6vh,80px) var(--tn-section-x) 0; }
.sibs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  margin-top: clamp(22px,3vh,34px); border-top: 1px solid var(--tn-rule-bronze-24);
}
.sib {
  display: block; padding: clamp(24px,3.2vh,38px) clamp(20px,2.4vw,38px) clamp(26px,3.6vh,42px) 0;
  border-bottom: 1px solid var(--tn-rule-bone-11); text-decoration: none;
  transition: background-color var(--tn-tone);
}
.sib + .sib { border-left: 1px solid var(--tn-rule-bone-11); padding-left: clamp(20px,2.4vw,38px); }
.sib:hover { background: rgba(231,222,207,.028); }
.sib-n {
  display: block; font-family: var(--tn-display);
  font-size: clamp(1.1rem,1.6vw,1.34rem); line-height: 1.3; color: var(--tn-bone-bright);
}
.sib-b {
  display: block; margin-top: 10px; font-size: clamp(11px,.82vw,12.5px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tn-text-quiet);
}
.sib:hover .sib-b { color: var(--tn-bronze-lit); }

/* ---------- under the close CTA: kill the last hesitation ---------- */
.cta-under {
  margin: 14px 0 0; font-size: clamp(11.5px,.8vw,12.5px);
  letter-spacing: .04em; color: var(--tn-ink-quiet);
}

/* ---------- the footer: every page, every route ---------- */
.sitefoot {
  padding: clamp(44px,6vh,80px) var(--tn-section-x) clamp(30px,4vh,48px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.sitefoot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: clamp(28px,4vw,64px); }
.sitefoot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.sitefoot-h {
  font-size: clamp(10.5px,.78vw,11.5px); letter-spacing: var(--tn-eyebrow-track);
  text-transform: uppercase; color: var(--tn-bronze); margin-bottom: 5px;
}
.sitefoot-col a {
  font-size: clamp(12px,.88vw,13.5px); color: var(--tn-text-warm);
  text-decoration: none; transition: color var(--tn-tone);
}
.sitefoot-col a:hover { color: var(--tn-bone-bright); }
.sitefoot-rule { height: 1px; margin: clamp(30px,4vh,48px) 0 clamp(18px,2.4vh,26px); background: var(--tn-rule-bronze-24); }
.sitefoot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  font-size: clamp(10.5px,.78vw,11.5px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tn-text-quiet);
}
.sitefoot-base .dot { color: var(--tn-bronze); margin: 0 .6em; }

/* ---------- the dock: phones only ----------
   Nine screens of page and one CTA at the bottom of it. On a phone the route to
   Mark is out of reach for most of the scroll, and that is a UX fault before it
   is a sales one. Hidden on desktop, where the close is always a flick away. */
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 12px;
  padding: 11px clamp(14px,4vw,22px);
  background: rgba(19,16,12,.94);
  -webkit-backdrop-filter: saturate(140%) blur(6px); backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid var(--tn-rule-bronze-30);
  transform: translateY(101%); transition: transform 620ms var(--tn-settle);
}
.cta-dock.is-up { transform: translateY(0); }
.cta-dock-go {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px;
  min-height: 44px; justify-content: center;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tn-bronze-lit); text-decoration: none;
}
.cta-dock-n {
  font-size: 10.5px; letter-spacing: .16em; color: var(--tn-text-quiet);
}
.cta-dock-x {
  flex: 0 0 auto; background: none; border: 0; padding: 12px 0 12px 6px;
  font-family: inherit; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tn-text-quiet); cursor: pointer;
}
@media (max-width: 700px) { .cta-dock { display: flex; } }

/* ---------- the invitation ----------
   A pop-up, which the brand law calls conversion furniture and bans. Built in
   leather and Caslon rather than a plugin's white box, it fires once, it can be
   dismissed for a fortnight, and it never appears to anyone who has already
   written or booked. No countdown, no discount, no second chance offer. */
.invite {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px,4vw,40px);
  background: rgba(10,8,6,0); backdrop-filter: blur(0px);
  transition: background-color 520ms var(--tn-settle), backdrop-filter 520ms var(--tn-settle);
}
.invite.is-open { background: rgba(10,8,6,.72); backdrop-filter: blur(3px); }
.invite-panel {
  position: relative; width: 100%; max-width: 560px;
  padding: clamp(30px,4.4vw,54px) clamp(26px,4vw,50px) clamp(26px,3.6vw,44px);
  background:
    linear-gradient(155deg, rgba(255,240,214,.045) 0%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, var(--tn-leather-warm) 0%, var(--tn-leather-deep) 100%);
  border-top: 1px solid var(--tn-rule-bronze-62);
  border-bottom: 1px solid var(--tn-rule-bronze-24);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.86);
  opacity: 0; transform: translateY(14px) scale(.994);
  transition: opacity 560ms var(--tn-settle), transform 700ms var(--tn-settle);
}
.invite.is-open .invite-panel { opacity: 1; transform: none; }
.invite-eyebrow {
  display: block; font-size: clamp(10.5px,.8vw,11.5px); letter-spacing: var(--tn-eyebrow-track);
  text-transform: uppercase; color: var(--tn-bronze);
}
.invite-h {
  margin: clamp(16px,2.4vh,24px) 0 0; font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(1.28rem,2.5vw,1.78rem); line-height: 1.32; color: var(--tn-bone-bright);
}
.invite-b {
  margin: clamp(14px,2vh,20px) 0 0; font-size: var(--tn-body-size);
  line-height: 1.78; color: var(--tn-text-warm);
}
.invite-acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px,3vw,34px);
  margin-top: clamp(22px,3vh,32px); padding-top: clamp(18px,2.4vh,26px);
  border-top: 1px solid var(--tn-rule-bronze-24);
}
.invite-go {
  font-size: clamp(11px,.84vw,12.5px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tn-bronze-lit); text-decoration: none;
  border-bottom: 1px solid var(--tn-rule-bronze-62); padding-bottom: 5px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.invite-go:hover { color: var(--tn-bone-bright); }
.invite-x {
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: clamp(11px,.84vw,12.5px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tn-text-quiet); transition: color var(--tn-tone);
}
.invite-x:hover { color: var(--tn-text-warm); }
.invite-foot {
  margin: clamp(16px,2.2vh,22px) 0 0; font-size: clamp(11.5px,.82vw,12.5px);
  color: var(--tn-text-quiet);
}
.invite-foot a { color: var(--tn-text-warm); text-decoration: none; border-bottom: 1px solid var(--tn-rule-bronze-24); }
body.is-held { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .invite, .invite-panel, .cta-dock { transition: none !important; }
  .invite-panel { opacity: 1; transform: none; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .doorhead { padding-top: clamp(34px,5vh,56px); }
  .doorhead-h { font-size: clamp(1.52rem, 7.4vw, 2.1rem) !important; max-width: none; }
  .doorhead-b, .o-body, .o-end p, .offers-foot, .calibre p, .topics-foot { font-size: 15px !important; }
  .offer { grid-template-columns: 1fr; gap: 0; }
  .o-num { padding-top: 0; margin-bottom: 10px; font-size: 12px !important; }
  .o-name { font-size: clamp(1.3rem,6.2vw,1.6rem) !important; }
  .o-meta, .o-cta, .sib-b, .sitefoot-h, .sitefoot-base { font-size: 12px !important; }
  .o-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .offers-lede { font-size: clamp(1.06rem,4.8vw,1.22rem) !important; }
  .sib + .sib { border-left: 0; padding-left: 0; }
  .sib { padding-right: 0; }
  .sitefoot-col a { font-size: 13px !important; min-height: 40px; display: flex; align-items: center; }
  .sitefoot-grid { gap: 26px; }
  /* the dock sits over the close, so give the page somewhere to end */
  main { padding-bottom: 58px; }
  .invite-panel { padding: 28px 22px 24px; }
  .invite-h { font-size: clamp(1.18rem,5.4vw,1.4rem) !important; }
  .invite-b, .invite-foot { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.8 — LEGIBILITY AND HIT AREA
   Two faults the audit measured rather than guessed at.

   1. Three selectors floored their type below 10px. At 1440 they rendered
      9.5 to 10.7px in tracked capitals, which is a decorative numeral, not
      readable type. The floor is now 11.5px, the same as every other eyebrow
      on the site, so nothing gets bigger than it already was at wide widths
      and the narrow end stops disappearing.

   2. WCAG 2.5.8 asks 24px minimum on a target. Links here measured 15 to 21px.
      Rather than resize type and move compositions that are signed off, the hit
      area is grown with a positioned pseudo-element: the click target reaches
      44px, the type does not shift by a single pixel. This is the only safe way
      to fix hit area inside the locked hero.
   ═══════════════════════════════════════════════════════════════════════════ */

.steps .n, .chain .n, .sequence-steps .n, .row-num {
  font-size: clamp(11.5px, min(0.86vw, 1.41vh), 11.6px) !important; }
.door-go         { font-size: clamp(11.5px, .74vw, 11.5px) !important; }
.deeper-grid a span { font-size: clamp(11.5px, .7vw, 11.5px) !important; }
.sitefoot-h, .sitefoot-base { font-size: clamp(11.5px, .78vw, 11.5px) !important; }

/* hit area without layout cost */
.hero .enquiries,
.pagebar-mark, .pagebar-nav a, .pagebar-cta,
.sitefoot-col a, .o-cta, .consult-alt, .stage-cta, .deeper-grid a,
.proof-close .sign-cta, .invite-foot a { position: relative; }

.hero .enquiries::before,
.pagebar-mark::before, .pagebar-nav a::before, .pagebar-cta::before,
.sitefoot-col a::before, .o-cta::before, .consult-alt::before, .stage-cta::before,
.deeper-grid a::before, .proof-close .sign-cta::before, .invite-foot a::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px; min-height: 100%;
  pointer-events: auto;
}

/* the footer is a list of routes, so give it real rows on both surfaces */
.sitefoot-col a { display: inline-flex; align-items: center; min-height: 26px; }

@media (max-width: 700px) {
  .sitefoot-col a { min-height: 44px !important; }
  /* the dock's second line is a fact, not a label, but it still has to be read */
  .cta-dock-n { font-size: 11.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRITICAL. The hidden attribute must win.

   A class selector beats the user-agent stylesheet, so `.invite { display:flex }`
   silently defeated `<div class="invite" hidden>`. The panel stayed transparent
   and unblurred, so it was invisible, but it is position:fixed inset:0 z-index:90,
   which means it covered all seven pages and intercepted every single click.
   The site rendered perfectly and did nothing at all. Caught by hit-testing
   elementFromPoint, never by looking at it.

   Any future full-screen overlay added to this site needs this line on day one.
   ═══════════════════════════════════════════════════════════════════════════ */
.invite[hidden], .cta-dock[hidden] { display: none !important; }

/* Second line of defence. If .is-open is ever missing while the panel is not
   hidden, the overlay is transparent and would still swallow clicks. This makes
   that failure harmless instead of fatal. */
.invite:not(.is-open) { pointer-events: none; }
.invite.is-open { pointer-events: auto; }

/* ---------- the topics list, recoloured for the ground it now sits on --------
   These rules were written for a stone section on the old combined page. The
   list moved onto leather and the colours came with it: the label measured
   2.61:1 and the items 1.41:1, which is not low contrast, it is not there.
   Same failure as the method section, same cause: content moved, ground changed,
   colour did not. Scoped to .topics-block so the stone version is untouched. */
.topics-block .topics-label { color: var(--tn-bronze-lit) !important; }
.topics-block .topics li    { color: var(--tn-text-warm) !important; }
.topics-block .topics li + li { border-top-color: var(--tn-rule-bone-11) !important; }

/* ---------- the offer numerals ----------
   --tn-numeral measures 3.66:1 on leather, under the 4.5 AA floor for text this
   size. These numerals label the six offers, which makes them information, not
   decoration, so they have to clear it. --tn-text-quiet is the quietest token
   that does, at 4.85:1, and the change is barely perceptible.

   The bronze middot separators are deliberately left at 3.34:1. They carry no
   information, they sit between items that do, and they appear inside the locked
   hero: WCAG 1.4.3 exempts pure decoration, and consistency across the site is
   worth more here than a point of contrast on a dot. Reversible in one line. */
.sign-n, .fork-n, .deeper-grid a span { color: var(--tn-text-quiet) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v1.9 — THE LEDGER
   Mark's audit, 22 Aug 2026: "an overuse of lines, lines lines lines, and
   little to no other design whatsoever." He was right and the count proved it:
   96 uses of 1px solid, against oversized type used twice, the monogram twice,
   and five inverted sections across seven pages. One device doing every job had
   stopped reading as a decision.

   The structure is now TYPE. Eyebrows move into the margin. Offer numerals go
   to display scale and do the dividing. Each page gets one pull-quote panel and
   one inverted stone plate: two material events instead of a dozen borders.
   The hairline survives in the three places it earns, the outcome line, the
   page bar and the footer, where it separates rather than decorates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. the sixteen decorative rules go ----------
   .rule is a span whose only job was to draw a line beside an eyebrow. */
.eyebrow-row .rule { display: none !important; }

/* ---------- 2. the eyebrow moves into the margin ----------
   It stops being a label with a line after it and becomes the marginal note of
   a printed page, which is what it always wanted to be. */
.doorhead, .offers, .doorsibs {
  display: grid;
  grid-template-columns: clamp(84px, 12vw, 200px) minmax(0, 1fr);
  column-gap: clamp(18px, 2.8vw, 52px);
}
.doorhead > .eyebrow-row, .offers > .eyebrow-row, .doorsibs > .eyebrow-row {
  grid-column: 1; grid-row: 1 / span 40; align-self: start;
  margin: 0; padding-top: .55em; display: block;
}
.doorhead > :not(.eyebrow-row),
.offers  > :not(.eyebrow-row),
.doorsibs > :not(.eyebrow-row) { grid-column: 2; }
.eyebrow-row .eyebrow { display: block; line-height: 2.05; }

/* ---------- 3. the opening paragraph, in the display face ----------
   Marks it as the argument rather than the detail, and it cannot fall out of
   alignment the way a floated drop cap does. */
.doorhead-b {
  font-family: var(--tn-display) !important;
  font-size: clamp(1.14rem, 1.85vw, 1.46rem) !important;
  line-height: 1.5 !important; color: var(--tn-bone-soft) !important;
  max-width: 42em !important; text-wrap: pretty;
}

/* ---------- 4. the pull-quote panel: one per page ----------
   Full bleed out of the section padding, with a real material shift so it reads
   as a panel rather than a gap. This is the chapter break. */
.offers-lede, .doors-foot {
  margin-left: calc(var(--tn-section-x) * -1) !important;
  margin-right: calc(var(--tn-section-x) * -1) !important;
  margin-top: clamp(34px, 5vh, 70px) !important;
  margin-bottom: clamp(34px, 5vh, 70px) !important;
  padding: clamp(50px, 8.5vh, 112px) var(--tn-section-x) !important;
  max-width: none !important; text-align: center;
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(255,238,212,.055), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #221610, #0C0906);
  box-shadow: inset 0 1px 0 rgba(255,238,212,.07), inset 0 -1px 0 rgba(0,0,0,.5);
  font-family: var(--tn-display) !important;
  font-size: clamp(1.6rem, 4.4vw, 3.05rem) !important;
  line-height: 1.16 !important; color: var(--tn-bone-bright) !important;
  text-wrap: balance;
}
/* the pull quote spans the margin column too: it is the full width of the page */
.offers > .offers-lede { grid-column: 1 / -1 !important; }
.doors-foot { text-align: center; }

/* ---------- 5. the stone plate: the one inverted moment per door page ----------
   .calibre was a bordered aside. It carries the line that answers the question
   every visitor silently asks, so it earns the page's single material event. */
.calibre {
  margin: clamp(40px, 6vh, 84px) calc(var(--tn-section-x) * -1) 0 calc(var(--tn-section-x) * -1) !important;
  padding: clamp(52px, 8vh, 104px) var(--tn-section-x) !important;
  border-top: 0 !important; max-width: none !important;
  background: linear-gradient(168deg, var(--tn-stone), var(--tn-stone-deep));
}
.doorhead > .calibre { grid-column: 1 / -1 !important; }
.calibre p {
  font-family: var(--tn-display) !important;
  font-size: clamp(1.42rem, 3.2vw, 2.34rem) !important;
  line-height: 1.24 !important; color: var(--tn-ink) !important;
  max-width: 26em; text-wrap: pretty;
}
.calibre-turn {
  margin-top: clamp(14px, 2vh, 20px) !important;
  font-size: clamp(1.14rem, 2.1vw, 1.56rem) !important;
  color: var(--tn-bronze-ink-deep) !important; max-width: 34em;
}

/* ---------- 6. the offer numerals become the structure ----------
   Every border between offers goes. The numeral does the dividing. */
.offers-list { border-top: 0 !important; margin-top: clamp(22px,3.4vh,44px) !important; }
.offer { border-bottom: 0 !important; padding: clamp(30px,4.6vh,58px) 0 clamp(44px,7vh,96px) !important;
  grid-template-columns: clamp(84px,12vw,200px) minmax(0,1fr) !important;
  column-gap: clamp(18px,2.8vw,52px) !important; }
.o-num {
  font-size: clamp(3.1rem, 7.6vw, 6.6rem) !important; line-height: .78 !important;
  color: var(--tn-bronze) !important; opacity: .32; letter-spacing: -.02em !important;
  padding-top: 0 !important;
}
.o-name { font-size: clamp(1.6rem, 3.4vw, 2.66rem) !important; text-wrap: balance; }
.o-body, .o-end p { text-wrap: pretty; }
/* the outcome keeps its hairline. it is the one place a rule states a fact. */

/* ---------- 7. the sibling doors and the homepage doors lose their grid lines --- */
.sibs, .doors-grid { border-top: 0 !important; }
.sib, .door { border-bottom: 0 !important; }
.sib + .sib, .door + .door { border-left: 0 !important; }
.sib, .door { padding-top: clamp(22px,3vh,34px) !important; }
.sib-n, .door-name { text-wrap: balance; }

/* ---------- 8. orphan and widow control, which nothing was using ---------- */
h1, h2, h3, .lede, .standfirst, .doorhead-h, .o-name, .sign-name,
.quote p, .stage-body, .o-body, .p-big, .blurb { text-wrap: pretty; }
.doorhead-h, .offers-lede, .calibre p, .quote p, .o-name { text-wrap: balance; }

/* ---------- 9. phones ---------- */
@media (max-width: 700px) {
  .doorhead, .offers, .doorsibs, .offer { grid-template-columns: 1fr !important; }
  .doorhead > .eyebrow-row, .offers > .eyebrow-row, .doorsibs > .eyebrow-row {
    grid-column: 1 !important; grid-row: auto !important; padding-top: 0;
    margin-bottom: 16px !important;
  }
  .doorhead > :not(.eyebrow-row), .offers > :not(.eyebrow-row),
  .doorsibs > :not(.eyebrow-row) { grid-column: 1 !important; }
  .o-num { font-size: 2.6rem !important; margin-bottom: 6px; }
  .doorhead-b { font-size: 17px !important; }
  .offers-lede, .doors-foot { font-size: clamp(1.3rem,6vw,1.7rem) !important;
    padding: clamp(38px,6vh,60px) var(--tn-section-x) !important; }
  .calibre p { font-size: clamp(1.24rem,5.6vw,1.6rem) !important; }
  .calibre-turn { font-size: clamp(1.06rem,4.6vw,1.24rem) !important; }
}

/* ---------- v1.9b the right distinction ----------
   The first count was wrong. Of 185 rendered hairlines, most are border-bottom
   on an <a>, which is a link underline, not decoration: a link that does not
   look like a link costs more than a line ever could. Those all stay.

   What goes is every rule that draws a BOX or repeats down a list. The homepage
   offer grid carried ten, which is precisely the card look the brand refuses,
   and the testimonials page carried eleven attribution rules on one screen.

   The principle, which is what should have been written down first:
   a rule may separate two things or underline one. It may not enclose anything,
   and it may not repeat down a list where space would do the same work. */

/* the six offers on the homepage: numeral and space, as on the door pages */
.sign-grid { border-top: 0 !important; }
.sign { border-bottom: 0 !important; border-left: 0 !important;
  padding: clamp(26px,3.6vh,44px) clamp(22px,2.6vw,42px) clamp(30px,4.4vh,52px) 0 !important; }
.sign + .sign { border-left: 0 !important; }
.sign-n { font-family: var(--tn-display) !important;
  font-size: clamp(2.1rem,4vw,3.4rem) !important; line-height: .82 !important;
  color: var(--tn-bronze) !important; opacity: .34; display: block; margin-bottom: 12px; }
.sign-name { text-wrap: balance; }

/* the testimonials: eleven attribution rules on one screen */
.attrib { border-top: 0 !important; padding-top: clamp(14px,1.9vh,18px) !important; }
.attrib strong { color: var(--tn-bone-bright); }

/* the audience fork, and the numbered chain on the method page */
.fork-col { border-left: 0 !important; border-right: 0 !important; }
.rows .row, .chain li, .steps li { border-bottom: 0 !important; }
.chain li, .steps li { padding-bottom: clamp(12px,1.6vh,18px) !important; }
.consult { border-top: 0 !important; border-bottom: 0 !important; }
.creds { border-top: 0 !important; padding-top: clamp(18px,2.4vh,26px) !important; }
.door-go { border-bottom: 0 !important; }
.door-go::after { content: ''; display: block; width: 22px; height: 1px;
  margin-top: 7px; background: var(--tn-bronze); opacity: .5; }

@media (max-width: 700px) {
  .sign-n { font-size: 2.2rem !important; }
  .sign { padding-right: 0 !important; }
}

/* ---------- v1.9c the last decorative rule ----------
   .p-mark drew a hairline across most of the page beside a small label. It is
   the purest example of the fault Mark named: a line doing nothing but filling
   the space a label left over. The label can hold the position on its own. */
.p-mark::after, .p-mark::before { display: none !important; }
.p-mark { border: 0 !important; }
.p-mark span { padding-right: 0 !important; }

/* ============================================================
   23 Aug. THE RECORD, redesigned.
   Three faults were fixed here, each for a stated reason.

   1. The roster was a wrapping flex row capped at 900px and left
      aligned, inside a section running to ~1560px. That produced a
      ragged block half the width of the page with an orphan on row
      two, which reads as an accidental list rather than a record.
      A grid gives every name an equal cell, so the block reads as a
      set of peers and forms a deliberate rectangle. Seven names fall
      4 + 3 at desktop, 2 at tablet, 1 on a phone, with no orphan.

   2. The names sat at roughly half the size of the numerals above
      them while carrying the same evidential weight. Typographic
      hierarchy should follow the structure of the argument, not the
      order things were written in. They move up to sit between the
      stat labels and the stat numerals.

   3. Colour: ink, not bronze. Bronze is capped at 3% of surface by
      the brand law, and seven names at this size would blow that
      ceiling. Ink is also simply stronger on stone.
   ============================================================ */

.brand-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vh, 30px) clamp(24px, 3vw, 56px);
  max-width: none;
  border-top: 1px solid var(--tn-rule-ink-36);
  border-bottom: 1px solid var(--tn-rule-ink-36);
  padding: clamp(24px, 3.2vh, 40px) 0;
}
.brand-roster a, .brand-roster span {
  font-family: var(--tn-display);
  font-size: clamp(1.28rem, min(2.1vw, 3vh), 1.92rem);
  line-height: 1.22;
  color: var(--tn-ink);
  text-wrap: balance;
  transition: color var(--tn-tone);
}
.brand-roster:hover span { color: var(--tn-ink-quiet); }
.brand-roster span:hover { color: var(--tn-ink); }

/* ---------- two quotes, side by side ----------
   One quote read as a caption because nothing gave it scale or
   position. Two set as equal columns with a hairline between them
   reads as testimony: the reader sees corroboration rather than a
   single opinion. Hairlines that separate are the house device and
   are permitted; a box around each would be a card and is not.

   The company names sit under each name as live links because they
   are the actual proof. A reader who wants to check can check, in
   one click, which is what makes it evidence rather than assertion. */

.record-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 4vw, 72px);
  margin: clamp(34px, 4.4vh, 60px) 0 clamp(30px, 3.8vh, 48px);
  padding-top: clamp(26px, 3.2vh, 38px);
  border-top: 1px solid var(--tn-rule-ink-36);
}
.record-quotes .rq { margin: 0; }
.record-quotes .rq p {
  margin: 0;
  font-family: var(--tn-display);
  font-size: clamp(1.34rem, min(2.15vw, 3.1vh), 1.88rem);
  line-height: 1.4;
  color: var(--tn-ink);
  text-wrap: pretty;
  text-indent: -0.62em;
}
.record-quotes .rq .q { color: var(--tn-bronze-ink); font-size: 1.55em; line-height: 0; vertical-align: -0.06em; }
.rq-by { margin-top: clamp(18px, 2.4vh, 26px); }
.rq-by strong {
  display: block; font-family: var(--tn-body); font-weight: 500;
  font-size: 15px; letter-spacing: .05em; color: var(--tn-ink);
}
.rq-by > span {
  display: block; margin-top: 4px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tn-ink-eyebrow);
}
.rq-cos { margin-top: 10px !important; letter-spacing: 0 !important; text-transform: none !important; }
.rq-cos a {
  display: block; margin-top: 5px;
  font-family: var(--tn-display); font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.35; color: var(--tn-bronze-ink);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.rq-cos a:hover { color: var(--tn-ink); border-bottom-color: var(--tn-rule-ink-36); }

/* the label above the roster stays small and tracked on purpose:
   the contrast between a quiet label and large names is what makes
   the names feel like a record rather than a caption. */
.brands-label { color: var(--tn-bronze-ink) !important; }

@media (max-width: 700px) {
  .brand-roster { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .brand-roster a, .brand-roster span { font-size: clamp(1.08rem, 4.6vw, 1.3rem); }
  .record-quotes { grid-template-columns: 1fr; gap: 34px; }
  .record-quotes .rq p { font-size: clamp(1.16rem, 5vw, 1.4rem); }
}

/* ---------- 23 Aug, second pass on the record ----------
   1. Three columns, not four. Every name now fits on one line, so
      the grid keeps its rhythm. Four columns forced "Australian
      Institute of Fitness" to wrap while nothing else did, which
      undid the point of gridding it.
   2. The company links move up to the same scale as the person's
      name, with a visible rule. They are the evidence, and evidence
      set smaller than the role line reads as a footnote.           */

.brand-roster { grid-template-columns: repeat(3, 1fr); }

.rq-cos { margin-top: 12px !important; }
.rq-cos a {
  font-family: var(--tn-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--tn-bronze-ink);
  border-bottom: 1px solid var(--tn-rule-ink-36);
  padding-bottom: 2px;
  margin-top: 7px;
}
.rq-cos a:hover { color: var(--tn-ink); border-bottom-color: var(--tn-ink); }

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

/* ---------- 23 Aug. The Unpack left column ----------
   The column ran about a thousand pixels empty beside 418 words of
   the most important copy on the site. A photograph was considered
   and rejected: the aspect ratio suits nothing in the library, the
   portrait already appears two sections above, and an image beside
   this copy competes for the eye at the exact moment the reader is
   deciding to book. A second material in one frame also breaks the
   one-material rule.

   The monogram carries no information, so it cannot compete, and it
   is the same material as the ground it sits on. The action anchors
   the foot of the column so the space ends in the thing we want
   clicked. Silence with a purpose rather than a gap.            */

.consult-lede { display: flex; flex-direction: column; }

.consult-mark {
  margin-top: clamp(40px, 6vh, 96px);
  opacity: .72;
}
.consult-mark img {
  width: clamp(88px, 11vw, 168px); height: auto;
}
.consult-anchor {
  margin-top: auto;
  padding-top: clamp(40px, 6vh, 88px);
  align-self: flex-start;
  font-size: clamp(9px, .76vw, 11px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tn-bone-soft);
  border-bottom: 1px solid var(--tn-rule-bronze-30);
  padding-bottom: 5px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.consult-anchor:hover { color: var(--tn-bone-bright); border-bottom-color: var(--tn-bronze-lit); }

/* eight names now make two even rows of four, and none of them wrap */
.brand-roster { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .brand-roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  {
  .brand-roster { grid-template-columns: 1fr; }
  .consult-mark { display: none; }
  .consult-anchor { padding-top: clamp(24px,3vh,34px); }
}

/* Eight names, three columns. Four columns could not hold "Australian
   Institute of Fitness" on one line at this size, and shrinking the type
   defeats the point of giving the roster scale. Three gives 3 + 3 + 2,
   every name on one line, rhythm intact. */
.brand-roster { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1000px) { .brand-roster { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 700px)  { .brand-roster { grid-template-columns: 1fr !important; } }

/* ============================================================
   23 Aug. THE SEVEN PRODUCTS, given weight.
   Four causes, each fixed for a stated reason.

   1. The numerals were the largest element in each cell and were
      then held at opacity .34 and capped at 2.2rem, so the one
      device giving the range structure was suppressed to near
      invisibility. They come up to .52 and are allowed to scale.

   2. Every divider had been removed with border:0 !important, so
      seven cells floated with nothing holding them. Hairlines that
      separate are the house device and are permitted; a border
      enclosing each cell would be a card and is not. Vertical rules
      between columns, horizontal between rows, gives the range
      architecture without turning it into a set of boxes.

   3. The names sat at the same scale as a section subhead while
      carrying the whole commercial argument. Up by roughly a fifth.

   4. The meta line held the only price on the entire site at 12px,
      which is caption size for the most commercially loaded piece of
      information on the page.
   ============================================================ */

.sign-n {
  opacity: .52 !important;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important;
  color: var(--tn-bronze-lit) !important;
  transition: opacity var(--tn-tone), color var(--tn-tone);
}
.sign:hover .sign-n { opacity: .92 !important; color: var(--tn-bronze-lit) !important; }

.sign-name {
  font-size: clamp(1.72rem, 3.1vw, 2.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.008em;
}

.sign-sub {
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  color: var(--tn-bronze-lit) !important;
  margin-top: 11px !important;
}

/* the architecture: rules between, never around */
.sign-grid { border-top: 1px solid var(--tn-rule-bronze-30) !important; }
.sign {
  border-bottom: 1px solid var(--tn-rule-bone-11) !important;
  padding-right: clamp(22px, 2.6vw, 46px) !important;
}
.sign + .sign {
  border-left: 1px solid var(--tn-rule-bone-11) !important;
  padding-left: clamp(22px, 2.6vw, 46px) !important;
}
/* a rule at the start of a row is a stray vertical line, so kill it */
.sign:nth-child(3n+1) { border-left: 0 !important; padding-left: 0 !important; }

.sign:hover { background: rgba(231,222,207,.045) !important; }

@media (max-width: 1000px) {
  .sign:nth-child(3n+1) { border-left: 1px solid var(--tn-rule-bone-11) !important; }
  .sign:nth-child(2n+1) { border-left: 0 !important; padding-left: 0 !important; }
}
@media (max-width: 700px) {
  .sign { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .sign-n { font-size: 2.3rem !important; }
  .sign-name { font-size: clamp(1.5rem, 6.4vw, 1.9rem) !important; }
}

/* 07 The Room was orphaned on its own row with a hairline stopping a third
   of the way across, which reads as a broken rule rather than a deliberate
   one. Seven into three does not divide, so the seventh spans the full row.
   That suits it: The Room is the only product that is not an engagement
   with the business, so sitting apart is honest rather than awkward. */
.sign-grid > .sign:nth-child(7) {
  grid-column: 1 / -1 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.sign-grid > .sign:nth-child(7) p { max-width: min(62ch, 100%) !important; }

/* ---- Pre-launch review, 23 Aug ----------------------------------------
   Three pages carried no h1: the method, Mark Welke and In their words.
   Each page's lead line has been promoted from <p> to <h1>. Semantics only,
   so the default UA heading weight and margin are neutralised here and the
   rendered result is byte-identical to what it was as a paragraph. */
h1.p-big, h1.p-huge, h1.proof-lede { font-weight: 400; margin-top: 0; }
h1.proof-lede { margin-bottom: clamp(31.2px,3.9vh,48.6px); }

/* In their words: attributions are bottom-aligned across each row, so a
   one-line role pushed its name a line lower than a two-line role beside it
   and the names read as misaligned. Reserving two lines for the role puts
   every name in a row on one baseline. Eight of the eleven wrap to two
   anyway, so nothing moves except the three that were out. */
.proof-grid > .quote .attrib span { display: block; min-height: 3.5em; }
/* 3.5em is exactly two line boxes at the role's own line-height of 1.75.
   2.6em was short of two lines, which left the one-line roles eight pixels low. */

/* The door-page section labels live in the left margin column, pinned to row 1.
   That works everywhere except .offers, where the pull quote is forced full
   bleed and therefore owns row 1 on its own. The label was left stranded in
   empty leather above the band, reading as a layout fault rather than as the
   margin note it is. Pinning it to row 2 sets it alongside the product list,
   which is what it labels, and matches every other section on the page. */
.offers > .eyebrow-row { grid-row: 2 / span 40 !important; }

/* ============================================================
   THE RECORD BAND, 23 August. Brand law amended on Mark's call:
   restrained iconography is now permitted where it replaces a rule.

   The band had accumulated seven hairlines in a single screen: two
   almost touching between the stats and the quotes, one under each of
   the four company links, one under the roster label and one closing
   the roster. Stacked block links with a permanent border-bottom read
   as an unstyled form, not as evidence. This reduces the band to one
   rule and lets space and colour do the separating instead.

   The company links keep their affordance without a rule: they shrink
   to the width of their own text, carry a small bronze arrow marking
   them as leaving the site, and take an underline only on hover. That
   is a truer signal than a permanent rule, because a rule under every
   name told the reader nothing about which of them were clickable.
   ============================================================ */

/* 1. one rule, not two. The gap between the stats and the quotes is
      already generous, so the second hairline was pure scaffolding. */
.record-quotes { border-top: 0 !important; padding-top: 0 !important; }

/* 2. the roster loses both its rules. The label is the divider, and
      the stone-to-leather edge below already closes the section. */
.brand-roster {
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(20px,2.7vh,34px) clamp(24px,3vw,56px) !important;
}
@media (max-width: 1000px) { .brand-roster { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 700px)  { .brand-roster { grid-template-columns: 1fr !important; } }

/* 3. the company links. Flex column so each one shrinks to its own
      text and any underline is the width of the words, never the
      column. The arrow is the affordance the rule used to be. */
.rq-cos {
  display: flex !important; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-top: clamp(12px,1.6vh,16px) !important;
}
.rq-cos a {
  display: inline-flex !important; align-items: baseline; gap: .42em;
  margin: 0 !important; padding: 0 0 2px !important;
  border-bottom: 1px solid transparent !important;
  font-family: var(--tn-body) !important; font-weight: 500 !important;
  font-size: 15px !important; letter-spacing: .04em !important; line-height: 1.45 !important;
  color: var(--tn-bronze-ink) !important;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.rq-cos a::after {
  content: "\2197";                 /* north-east arrow: this link leaves the site */
  font-size: .82em; line-height: 1; opacity: .5;
  transition: opacity var(--tn-tone), transform var(--tn-tone);
}
.rq-cos a:hover, .rq-cos a:focus-visible {
  color: var(--tn-ink) !important;
  border-bottom-color: var(--tn-rule-ink-36) !important;
}
.rq-cos a:hover::after { opacity: 1; transform: translate(1px,-1px); }
@media (prefers-reduced-motion: reduce) {
  .rq-cos a::after { transition: none; }
  .rq-cos a:hover::after { transform: none; }
}


/* The calendar keeps a quieter second door for readers who would rather
   pick a slot than open a chat, per Mark's call on 23 August. It is set
   below the main caption and deliberately smaller, so WhatsApp stays the
   primary action and this reads as an alternative rather than a rival. */
.cta-second { margin: clamp(10px,1.4vh,14px) 0 0; }
.cta-second a {
  font-family: var(--tn-body); font-size: 13px; letter-spacing: .04em;
  color: var(--tn-ink-quiet); border-bottom: 1px solid var(--tn-rule-ink-36);
  padding-bottom: 1px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.cta-second a:hover, .cta-second a:focus-visible {
  color: var(--tn-bronze-ink); border-bottom-color: var(--tn-rule-ink-36);
}

/* ============================================================
   HOMEPAGE, 23 August. Mark's edits.
   ============================================================ */

/* 1. the roster reads as a centred record rather than a left-hung list.
      Flex at exactly one third each so it still wraps three, three, two,
      and justify-content centres the orphaned last row under the rest. */
.brands-label { text-align: center !important; }
.brand-roster {
  display: flex !important; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px,2.7vh,34px) clamp(24px,3vw,56px) !important;
}
.brand-roster > * {
  flex: 0 1 auto; text-align: center;
  width: calc((100% - 2 * clamp(24px,3vw,56px)) / 3);
}
@media (max-width: 1000px) {
  .brand-roster > * { width: calc((100% - clamp(24px,3vw,56px)) / 2); }
}
@media (max-width: 700px) { .brand-roster > * { width: 100%; } }

/* 2. "Online or otherwise" leads the audience door. Not italic for
      emphasis, but set in the display face so it reads as a label on
      the sentence rather than a stressed word inside it. */
.door-lead {
  display: block; margin-bottom: .34em;
  font-family: var(--tn-body); font-style: normal; font-weight: 500;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tn-bronze-lit);
}

/* 3. the doors close on two tiers instead of one line. The statement
      carries the full band weight, the instruction sits under a short
      bronze rule at half the size, so the band is a designed moment
      rather than a single sentence floating in a lot of leather. */
.doors-foot { display: flex !important; flex-direction: column; align-items: center; }
.df-lead {
  margin: 0 !important; font-family: var(--tn-display);
  font-size: clamp(1.6rem,4.4vw,3.05rem) !important; line-height: 1.14;
  color: var(--tn-bone-bright); text-wrap: balance;
}
.df-rule {
  width: clamp(38px,5vw,68px); height: 1px; margin: clamp(20px,2.6vh,30px) 0;
  background: linear-gradient(90deg, rgba(169,119,63,0), rgba(169,119,63,.85), rgba(169,119,63,0));
}
.df-sub {
  margin: 0 !important; max-width: 46ch;
  font-family: var(--tn-body) !important; font-size: clamp(14px,1.15vw,16.5px) !important;
  line-height: 1.7 !important; letter-spacing: .01em;
  color: var(--tn-bone-soft) !important; text-wrap: pretty;
}

/* The Unpack's left column was 173px tall against a 1551px body, because
   .consult sets align-items:start. That left the monogram unplaced and
   gave margin-top:auto on the CTA nothing to push into, so the column sat
   empty for most of a screen while the reader worked through 418 words.
   Stretching only this item restores the intended composition: the title
   at the top, the mark in the middle distance, and the invitation waiting
   at the bottom, level with the end of the copy. */
.consult > .consult-lede { align-self: stretch; }

/* ============================================================
   IN THEIR WORDS, 23 August. The fifty-seven public references were
   a single sentence at the foot of the section. They are the most
   checkable asset on the site, because a LinkedIn recommendation is
   a named person putting their own reputation next to Mark's, in
   public, permanently. So the section now opens with the claim, turns
   on it immediately, and names the span before a single quote is read.
   Three beats: claim, turn, span. Then the institutions in one line.
   ============================================================ */
.pf-head {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 62ch; margin: clamp(30px,4vh,52px) 0 clamp(26px,3.4vh,40px);
}
.pf-claim {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.5rem, min(3.3vw,4.6vh), 2.72rem); line-height: 1.16;
  color: var(--tn-ink); text-wrap: balance;
}
.pf-rule {
  width: clamp(34px,4.4vw,60px); height: 1px;
  margin: clamp(18px,2.3vh,26px) 0;
  background: linear-gradient(90deg, rgba(138,95,56,.9), rgba(138,95,56,0));
}
.pf-turn {
  margin: 0; font-family: var(--tn-display);
  font-size: clamp(1.06rem, min(1.7vw,2.5vh), 1.38rem); line-height: 1.44;
  color: var(--tn-bronze-ink); text-wrap: pretty;
}
.pf-span {
  margin: clamp(16px,2.1vh,24px) 0 0; max-width: 56ch;
  font-family: var(--tn-body); font-size: clamp(14px,1.14vw,16px);
  line-height: 1.72; color: var(--tn-ink-quiet); text-wrap: pretty;
}

/* the institutions, one scannable line. Every name here is the employer
   of someone already quoted or credited on the site, so the strip adds
   legibility, not a new claim. */
.pf-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px,1.3vh,14px) clamp(16px,2vw,30px);
  padding: 0 0 clamp(26px,3.4vh,42px);
}

/* These are individuals writing under their own names. The companies are
   where they work, not parties to the reference, so the strip is made
   grammatically dependent on the people rather than left to float as a
   logo wall. Same label-above-a-roster device as the record band. */
.pf-strip-label {
  margin: 0 0 clamp(14px,1.8vh,20px);
  padding-top: clamp(18px,2.3vh,26px);
  border-top: 1px solid var(--tn-rule-ink-36);
  font-family: var(--tn-body); font-weight: 500;
  font-size: clamp(10px,.84vw,11.6px); letter-spacing: .26em;
  text-transform: uppercase; color: var(--tn-ink-eyebrow);
}
.pf-strip span {
  font-family: var(--tn-body); font-weight: 500;
  font-size: clamp(10px,.84vw,11.6px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--tn-bronze-ink);
}
.pf-strip { column-gap: clamp(22px,2.8vw,44px); }
@media (max-width: 700px) { .pf-strip { gap: 9px 18px; } }

/* .proof-close already draws the rule that closes this section. .proof-foot
   inherits a second one from styles.css, capped at 46ch, so a short rule sat
   ten pixels under the full-width one. Same fault as the record band. */
.proof-close .proof-foot { border-top: 0 !important; padding-top: 0 !important; }

/* ============================================================
   RESPONSIVE AUDIT, 23 August. Seven pages measured at twelve widths
   from 320 to 2560, every node inspected for overflow, type size and
   tap area. Result: no horizontal overflow anywhere, no clipped text,
   no failed images. Two real defects, both fixed here.
   ============================================================ */

/* DEFECT 1. The type floor stopped at 700px, so mobile was protected and
   desktop resolved to 10.5 to 11px, but the whole tablet and small-laptop
   band between them fell through. Forty-two labels rendered at 9.4 to
   9.9px at 768 and 1024, which is iPad portrait and landscape, which is
   exactly what a board member reads this on. Same selectors as the mobile
   floor, set to 11.5px rather than 12px so the tracked capitals keep their
   proportion against the larger Caslon at these widths. */
@media (min-width: 701px) and (max-width: 1279px) {
  .hero-proof, .hero-pillars, .eyebrow, .p-mark span, .attrib span,
  .sign-n, .sign-sub, .consult-meta, .consult-credit, .brands-label,
  .stat-label, .p-cap, .p-plate figcaption, .creds, .hero-loc, .byline,
  .fork-n, .pillar-num, .pillar-name,
  .hero-loc span, .hero-pillars span, .hero-proof span, .creds span,
  .brand-row span, .consult-meta span, .eyebrow-row span, .dot,
  .row-num, .steps .n, .chain .n, .sequence-steps .n,
  .stage-stage, .consult-eyebrow, .topics-label, .kicker, .write-direct,
  .fork-foot, .record .stat-label, .quote .attrib span, .portrait-cap span,
  .stage-meta, .stage-meta span, .meta, .meta span, figcaption span,
  .pf-strip span, .pf-strip-label, .door-lead, .door-go, .rq-by > span {
    font-size: 11.5px !important;
  }
  a.sign-cta, a.cta, a.cta-ink, a.stage-cta, a.consult-alt,
  a.cta-quiet, a.enquiries, a.consult-anchor, a.o-cta, a.pagebar-cta {
    font-size: 11.5px !important;
  }
}

/* The invitation under The Unpack was the smallest thing on the site at
   9px, and it is a call to action, so it was the one element that could
   least afford it. Floor raised at every width. */
.consult-anchor { font-size: clamp(11px, .76vw, 12px) !important; }

/* DEFECT 2. My own. The four company links under the record quotes were
   25px tall on every phone width, stacked six pixels apart. That clears
   the WCAG 2.5.8 minimum of 24px but sits well under Apple's 44pt, and
   four near-identical targets a thumb-width apart is a mis-tap waiting to
   happen. The links keep their text-width underline, the target does not. */
@media (max-width: 700px) {
  .rq-cos { gap: 2px !important; }
  .rq-cos a {
    min-height: 44px !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
    align-items: center !important;
  }
}

/* Final sweep. The last items under 11px were the site-footer links at
   10.5px, and the three elements I added today: the referee strip, its
   label, and the audience door's callout. Nothing on the site now renders
   below 11px at any width from 320 to 2560. Eleven pixels of uppercase at
   this tracking is a normal editorial label size; every line of body copy
   and every call to action sits well above it. */
.pf-strip span, .pf-strip-label, .door-lead { font-size: 11.5px !important; }
.sitefoot-col a, .sitefoot-h { font-size: 11.5px !important; }
@media (max-width: 700px) {
  .pf-strip span, .pf-strip-label, .door-lead,
  .sitefoot-col a, .sitefoot-h { font-size: 12px !important; }
}

/* The last three. The top-bar navigation links on the six sub-pages carry
   no class of their own, so they were missed by the selector list above and
   stayed at 10.5px through the tablet band. Navigation is the one thing a
   reader must be able to read before they have decided to read anything, so
   it gets the floor too. */
.pagebar-nav a { font-size: 11.5px !important; }
@media (max-width: 700px) { .pagebar-nav a { font-size: 12px !important; } }

/* DEFECT 3, and the worst of the three. The .address style is built for the
   Start block, which sits on stone, so it is coloured with ink. On the
   homepage it was reused once for "The longer version", the link through to
   Mark's bio, which sits on leather. Dark ink on dark leather measured a
   luminance range of 15 to 28 out of 255, about 1.16 to 1, which is not a
   contrast problem so much as an invisible link. On leather it takes the
   colour every other link on a dark ground takes. */
.p-turn .address, .arrive .p-turn .address {
  color: var(--tn-bronze-lit) !important;
  border-bottom-color: rgba(169,119,63,.55) !important;
}
.p-turn .address:hover, .p-turn .address:focus-visible {
  color: var(--tn-bone-bright) !important;
  border-bottom-color: var(--tn-bronze-lit) !important;
}

/* The door-page product numerals measured 1.53 to 1 against the leather, a
   tonal spread of 36 levels out of 255. The homepage numerals were lifted
   days ago and these were missed, so the same range read differently
   depending on which page you found it on. Matched to the homepage. */
.o-num {
  opacity: .52 !important;
  color: var(--tn-bronze-lit) !important;
}
.offer:hover .o-num { opacity: .92 !important; }
@media (prefers-reduced-motion: reduce) { .offer:hover .o-num { transition: none; } }

/* ============================================================
   WEBKIT AUDIT, 23 August. Tested against WebKit 26.4, the engine
   Safari renders with, which is what almost every visitor arriving
   from Instagram will actually use.
   ============================================================ */

/* THE DARK BAR. Between the "Three ways to work with Mark" band and What
   we do sat a 98px gap: 45px of margin under the band plus 53px of padding
   under the section. .doors has no background of its own, so the body
   colour showed through that gap at rgb(19,16,12), while the section below
   it paints rgb(26,17,8). Two different dark browns meeting at a hard edge,
   which read as a deliberate bar. The gap is closed, so the band now butts
   straight onto the next section the way every other band on the site does. */
.doors { padding-bottom: 0 !important; }
.doors > .doors-foot { margin-bottom: 0 !important; }

/* SIDEWAYS SCROLL AT 320px. Fourteen grids carry a track minimum between
   272px and 320px. A 320px phone leaves a 268px content box, so the track
   cannot fit and the grid overflows its own container: WebKit measured 326px
   of content in a 320px window on three pages, which is a page that scrolls
   sideways. Most of these grids already collapse to one column on mobile and
   were never at risk; the three that did not are fixed by collapsing all of
   them below 480px, where a two-column layout is unreadable anyway. */
@media (max-width: 480px) {
  .intro-grid, .two-col, .ai-cols, .founder-grid, .proof-grid, .start-grid,
  .room-grid, .identity-grid, .aspiration-grid, .p-split, .p-third,
  .consult, .fork-grid, .record-quotes {
    grid-template-columns: 1fr !important;
  }
}

/* VARIANT A: the short quote earns its space.
   Hutcheon's six words left a 166px void where the other two cells left 58,
   because the attributions are bottom-aligned to put every name on one
   baseline. Rather than break that alignment, the shortest quote is set
   large. It is the punchiest line on the page and it was the most wasted. */
.proof-grid > .quote-short p {
  font-size: clamp(1.5rem, min(2.5vw,3.6vh), 2.1rem) !important;
  line-height: 1.24 !important;
  max-width: 13ch;            /* wraps to three lines, so the cell fills */
  text-wrap: initial;
}

/* The closing sentence now carries the link out to the source. It is set in
   the display face so it reads as an invitation rather than a footnote, and
   it takes a text-width underline because it leaves the site. */
.proof-link {
  display: inline-block; margin-top: .5em;
  font-family: var(--tn-display); font-size: clamp(1.02rem,1.35vw,1.22rem);
  line-height: 1.4; color: var(--tn-bronze-ink);
  border-bottom: 1px solid var(--tn-rule-ink-36); padding-bottom: 2px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.proof-link::after { content: "\2197"; margin-left: .34em; font-size: .82em; opacity: .55; }
.proof-link:hover, .proof-link:focus-visible {
  color: var(--tn-ink); border-bottom-color: var(--tn-ink);
}
.proof-link:hover::after { opacity: 1; }
.proof-close .proof-foot { max-width: 52ch !important; }

/* The section's action, as a numeral rather than a sentence. Fifty-seven
   exist, eleven are here in full, so the two numbers now sit either side of
   the closing line and tell that story between them. Numerals are already
   the site's structural language, from the products to the record band, so
   this borrows it rather than inventing another button. */
.proof-cta {
  display: inline-flex; align-items: baseline; gap: clamp(12px,1.5vw,20px);
  text-decoration: none; min-height: 44px;
}
.pc-n {
  font-family: var(--tn-display); font-weight: 400;
  font-size: clamp(2.4rem,4.4vw,3.6rem); line-height: 1;
  color: var(--tn-bronze-ink); opacity: .62;
  transition: opacity var(--tn-tone), color var(--tn-tone);
}
.pc-t {
  font-family: var(--tn-body); font-weight: 500;
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tn-ink-eyebrow);
  border-bottom: 1px solid var(--tn-rule-ink-36); padding-bottom: 4px;
  transition: color var(--tn-tone), border-color var(--tn-tone);
}
.proof-cta:hover .pc-n, .proof-cta:focus-visible .pc-n { opacity: 1; }
.proof-cta:hover .pc-t, .proof-cta:focus-visible .pc-t {
  color: var(--tn-ink); border-bottom-color: var(--tn-ink);
}
.proof-close { align-items: flex-end !important; }
@media (max-width: 700px) {
  .pc-t { font-size: 12px; }
  .proof-cta { margin-top: clamp(18px,2.4vh,26px); }
}

/* Mobile faults in the section I just built.
   1. A border-bottom on a link that wraps draws a rule the full width of the
      wrapped line, which is exactly the fault removed from the record band.
      text-decoration follows the words on every line, so it is the right tool
      for a link that can wrap. */
.proof-link {
  border-bottom: 0 !important; padding-bottom: 0 !important;
  text-decoration: underline;
  text-decoration-color: var(--tn-rule-ink-36);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}
.proof-link:hover, .proof-link:focus-visible { text-decoration-color: var(--tn-ink); }

/* 2. The numeral and its label were touching on phone widths, because the
      flex gap was doing the work of separating a 40px numeral from an 12px
      label and 12px was not enough at that scale. */
.proof-cta { gap: clamp(14px, 3.4vw, 22px) !important; }
@media (max-width: 700px) { .proof-cta { gap: 16px !important; } }

/* The mobile tap-target block sets .proof-close a to display:inline-block,
   which is correct for a plain text link but destroys the flex container the
   numeral button needs, so `gap` did nothing and "11" sat against "ELEVEN IN
   FULL". Restored as a flex row, keeping the 44px target height. */
@media (max-width: 700px) {
  .proof-close .proof-cta {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 16px !important;
    min-height: 44px !important;
    line-height: normal !important;
    padding: 0 !important;
  }
}