/* ============================================================
   Hilliard Coaching: shared stylesheet
   Literary / editorial design system
   ============================================================ */

/* Self-hosted fonts (Latin subset, woff2) — replaces Google Fonts @import */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cormorant-500.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-600.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-italic-400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/cormorant-italic-500.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/hanken-400.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/hanken-500.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/hanken-600.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/hanken-700.woff2') format('woff2');}

:root {
  /* palette: derived from the Hilliard Coaching logo */
  --paper:      #f6f2ec;   /* light, warm cream */
  --paper-deep: #ece5d9;   /* slightly deeper panel */
  --ink:        #353630;   /* warm charcoal */
  --ink-soft:   #5a574e;   /* secondary text */
  --ink-faint:  #8f897c;   /* captions / meta */
  --slate:      #38525d;   /* deep brand-blue feature sections */
  --slate-deep: #2b3f48;   /* footer / deepest */
  --gold:       #5e7d8b;   /* ACCENT: brand slate-blue (lines, arrows) */
  --gold-deep:  #4a6975;   /* accent for small text on cream */
  --warm:       #9d8b78;   /* brand taupe: warm structural tone */
  --warm-deep:  #7b6951;   /* taupe for small text */
  --sage:       #6f7c70;
  --line:       #ddd3c4;   /* hairlines on paper */
  --line-dark:  rgba(246,242,236,0.16);

  /* type: two-font system mirroring the logo */
  --display: 'Cormorant Garamond', Georgia, serif;   /* headings + standfirsts */
  --body:    'Hanken Grotesk', system-ui, sans-serif; /* body & detail copy */
  --label:   'Hanken Grotesk', system-ui, sans-serif; /* eyebrows, nav, meta */

  /* metrics */
  --measure: 38rem;
  --gutter:  clamp(1.5rem, 5vw, 6rem);
  --maxw:    1240px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(80% 60% at 16% 8%, rgba(94,125,139,0.055), transparent 55%),
    radial-gradient(80% 70% at 88% 96%, rgba(157,139,120,0.06), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* inline links inside body prose and journal essays: bold accent, no underline */
.prose a, .essay .body a {
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.prose a:hover, .essay .body a:hover {
  color: var(--slate);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* on dark sections, use the warm sand accent so links stay visible */
.dark .prose a, .dark .essay .body a { color: #cdbaa2; }
.dark .prose a:hover, .dark .essay .body a:hover { color: var(--paper); }

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.measure { max-width: var(--measure); }

section { position: relative; z-index: 1; }

/* ---------- type scale ---------- */
.eyebrow {
  font-family: var(--label);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  padding-bottom: 0.04em;
}

.display {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 500;
  line-height: 1.02;
}
h2.section-title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 500;
}
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.lead {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

p { margin: 0 0 1.3em; max-width: var(--measure); }
.prose p { color: var(--ink-soft); }
.prose p strong, strong { color: var(--ink); font-weight: 600; }

em { font-style: italic; }

/* drop a serif italic flourish */
.flourish { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--gold-deep); }

/* etymology motif */
.etym {
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: none;
}
.etym b { color: var(--gold-deep); font-weight: 600; font-style: normal; }

/* ---------- buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--label);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn .arr { transition: transform .35s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn.gold { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.btn.gold:hover { background: var(--slate-deep); border-color: var(--slate-deep); color: var(--paper); }

.btn.on-dark { border-color: rgba(244,239,229,0.5); color: var(--paper); }
.btn.on-dark:hover { background: var(--paper); color: var(--slate-deep); border-color: var(--paper); }
@media (max-width: 760px) {
  .hero-actions .btn, .band-cta-wrap .btn { width: 100%; justify-content: center; }
  .band-cta-wrap .btn { font-size: 0.7rem; padding-inline: 1rem; letter-spacing: 0.1em; }
}
.chair-img { object-position: 50% 60%; }
@media (max-width: 760px) { .chair-img { object-position: 32% 60%; } }

/* text link with underline reveal */
.link {
  text-decoration: none;
  color: var(--gold-deep);
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 1.15em;
  padding-bottom: 1px;
  transition: opacity .3s ease;
}
.link:hover { opacity: 0.6; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand img {
  height: 69px;          /* top-of-page size; JS shrinks this height on scroll (no transform) */
  width: auto;
  display: block;
}
@media (max-width: 760px) {
  .brand img { height: 51px; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  padding: 0.4rem 0;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- sections ---------- */
.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.section.tight { padding-block: clamp(3rem, 6vw, 5rem); }

.dark {
  background: var(--slate);
  color: var(--paper);
}
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark .prose p, .dark p { color: rgba(247,243,237,0.9); }
.dark .eyebrow { color: #cdbaa2; }
.dark .eyebrow::before, .dark .eyebrow.center::after { background: var(--gold); }
.dark .link { color: #cdbaa2; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- portrait frame ---------- */
.portrait {
  position: relative;
}
.portrait img {
  width: 100%;
  filter: saturate(0.94) contrast(1.02);
}
.portrait.arch img {
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
}
.portrait .frame-line {
  position: absolute;
  inset: -14px;
  border: 1px solid var(--warm);
  opacity: 0.7;
  pointer-events: none;
}
.portrait.arch .frame-line {
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
}

/* ---------- hero portrait (refined, editorial) ---------- */
.hero-portrait {
  margin: 0 0 0 auto;
  max-width: 330px;
  position: relative;
}
.hero-portrait .ph-frame { position: relative; }
/* slate accent block behind, offset top-left: adds depth & contemporary asymmetry */
.hero-portrait .ph-frame::before {
  content: "";
  position: absolute;
  left: -24px;
  top: -24px;
  width: 60%;
  height: 54%;
  background: var(--blue, #6d8a96);
  z-index: 0;
}
.hero-portrait .ph-frame::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 62%;
  height: 58%;
  border: 1px solid var(--warm);
  z-index: 0;
}
/* floating credential card overlapping the portrait */
.hero-portrait .cred-chip {
  position: absolute;
  left: -26px;
  bottom: 34px;
  z-index: 3;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -26px rgba(33,40,42,0.5);
  padding: 0.85rem 1.1rem;
  max-width: 12.5rem;
}
.hero-portrait .cred-chip .ch-label {
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}
.hero-portrait .cred-chip .ch-text {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.18;
  color: var(--ink);
}
@media (max-width: 520px) {
  .hero-portrait .cred-chip { left: 0; bottom: 12px; }
}
.hero-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}
.hero-portrait figcaption {
  margin-top: 1.4rem;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  line-height: 1.7;
}
.hero-portrait figcaption b { color: var(--warm-deep); font-weight: 600; }

/* ============================================================
   Home-page editorial enhancements
   ============================================================ */

/* headline accent: colour the full stop in brand blue */
.display .stop { color: var(--gold); }

/* kinetic "to see" etymology line under the hero headline */
.hero-motif {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.1rem 0 0;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.hero-motif b { color: var(--gold-deep); font-weight: 600; }
.hero-motif .eye {
  width: 1.9rem; height: 0.95rem; flex: none;
  color: var(--gold);
  overflow: visible;
}
.hero-motif .draw {
  flex: 1; height: 1px; max-width: 7rem;
  background: linear-gradient(90deg, var(--warm), transparent);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-motif .draw { transform: scaleX(0); transition: transform 1.1s .5s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in .hero-motif .draw, .js .hero-motif.in .draw { transform: scaleX(1); }
  .js .hero-motif .eye-path { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.4s .4s ease; }
  .js .reveal.in .hero-motif .eye-path { stroke-dashoffset: 0; }
}

/* ---------- credential marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  overflow: hidden;
  padding: 1.05rem 0;
  position: relative;
  z-index: 1;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper-deep), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--paper-deep), transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--label);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.marquee-sep { color: var(--gold); font-size: 0.7rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; gap: 1.8rem; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee::before, .marquee::after { display: none; }
}

/* ---------- big editorial numerals on offering cards ---------- */
.card { overflow: hidden; }
.card .index {
  position: absolute;
  top: -1.1rem;
  right: 0.5rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 7.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.2;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .index { opacity: 0.28; transform: translateY(3px); }

/* ---------- editorial hero ---------- */
.hero-ed { padding: clamp(3.2rem,6vw,5rem) 0 clamp(3rem,6vw,5rem); position: relative; overflow: hidden; }
/* subtle warm gradient wash */
.hero-ed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 88% -10%, rgba(94,125,139,0.07), transparent 52%),
    linear-gradient(180deg, rgba(157,139,120,0.06), rgba(157,139,120,0) 46%);
}
/* faint paper grain: handled globally by body::before */
.hero-ed > .wrap { position: relative; z-index: 1; }
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-top: 1.5px solid var(--ink);
  padding-top: 0.85rem;
  margin-bottom: clamp(2rem,5vw,3.4rem);
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.masthead .m-mid { color: var(--ink-faint); font-weight: 500; }
.masthead .m-r { color: var(--gold-deep); }
@media (max-width: 720px) { .masthead .m-mid { display: none; } }

.hero-ed-grid {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 246px);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: end;
}
.hero-ed-lead {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1.1rem,2.4vw,1.7rem);
}
.hero-kicker {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem,2.3vw,1.9rem);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: none;
  white-space: nowrap;
  margin: 0;
}
.hero-title {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-size: clamp(3.6rem,9vw,7.2rem);
  color: var(--ink);
  margin: 0;
}
.hero-title .stop { color: var(--gold); }

.hero-divider { display: flex; align-items: center; gap: 1.1rem; }
.hero-divider .hd-line { flex: none; width: clamp(3rem,8vw,7rem); height: 1px; background: var(--warm); }
.hero-divider .hd-label {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  white-space: nowrap;
}

.hero-ed-portrait { display: flex; align-items: flex-end; }
.hero-ed-portrait .hero-portrait { margin: 0 0 0 auto; max-width: 222px; width: 100%; position: relative; }
/* vertical caption running up the left side of the photo */
.hero-ed-portrait figcaption {
  position: absolute;
  left: -1.5rem;
  bottom: 0;
  transform: rotate(180deg);
  margin: 0;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--label);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--warm-deep);
  line-height: 1;
}
.hero-ed-portrait figcaption b { color: var(--warm-deep); font-weight: 600; }

.hero-foot {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 246px);
  gap: clamp(2rem,5vw,4.5rem);
  margin-top: clamp(2rem,4vw,3rem);
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
  align-items: start;
}
.hero-foot-lead p { max-width: 36rem; }
.hero-foot-note { position: relative; padding-top: 0.4rem; }
.foot-quote .qm {
  color: var(--blue, #6d8a96);
  font-weight: 700;
  font-style: normal;
}
.foot-quote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem,1.95vw,1.7rem);
  line-height: 1.34;
  color: var(--ink);
  margin: 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--blue, #6d8a96);
}
@media (max-width: 760px) {
  .hero-ed-grid, .hero-foot { grid-template-columns: 1fr; }
  .hero-ed-portrait { margin-top: 0.5rem; }
  .hero-ed-portrait .hero-portrait { margin: 0 auto; }
  .hero-ed-portrait figcaption { position: static; top: auto; left: auto; writing-mode: horizontal-tb; transform: none; white-space: normal; margin-top: 2.5rem; text-align: center; }
  .hero-title { font-size: clamp(2.9rem,14vw,4.6rem); }
  .hero-kicker { white-space: normal; }
}

/* ---------- image bands & figures ---------- */
.img-band {
  position: relative;
  margin: 0;
  width: 100%;
  height: clamp(260px, 42vh, 480px);
  overflow: hidden;
}
.img-band.tall { height: clamp(340px, 60vh, 640px); }
.img-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.01);
}
.img-band figcaption {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 14px rgba(20,28,32,0.5);
}
/* dawn statement band: a quote set over the full-width image */
.quote-band { height: clamp(300px, 40vh, 420px); z-index: 1; }
.quote-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(98deg, rgba(247,243,237,0.62) 0%, rgba(247,243,237,0.34) 38%, rgba(247,243,237,0.08) 64%, rgba(247,243,237,0) 80%);
}
.band-quote-wrap {
  position: absolute; inset: 0; z-index: 2;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center;
}
.band-quote {
  margin: 0; max-width: 20em;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 3.7vw, 3.4rem);
  line-height: 1.18; letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--slate);
  text-shadow: 0 1px 10px rgba(247,243,237,0.7);
}
.band-quote .accent { color: var(--slate); font-style: italic; }
.band-cta-wrap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.statement-feature .prose p { max-width: none; }
/* framed figure (sits inside a column, taupe offset like the portrait) */
.img-figure { position: relative; margin: 0; }
.img-figure .frame { position: relative; }
.img-figure .frame::after {
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 60%; height: 56%;
  border: 1px solid var(--warm);
  z-index: 0;
}
.img-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.01);
}
.img-figure figcaption {
  margin-top: 1.1rem;
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ---------- pull quote ---------- */
.pullquote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.pullquote .accent { color: #cdbaa2; font-style: italic; }

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  padding: 2.4rem 2.1rem 2.1rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
  min-height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(33,40,42,0.4);
  background: #fff;
}
.card .num {
  font-family: var(--label);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.card .go {
  margin-top: auto;
  font-family: var(--label);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.card:hover .go .arr { transform: translateX(4px); }
.card .go .arr { transition: transform .35s ease; }

/* ---------- testimonial ---------- */
.quote-block {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.quote-block .mark {
  font-size: 1.4em;
  color: var(--gold);
  line-height: 0;
}
.attribution {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-top: 1.6rem;
}
.dark .attribution { color: rgba(247,243,237,0.72); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--slate-deep);
  color: rgba(244,239,229,0.78);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
  font-size: 1rem;
}
.site-footer a { color: rgba(244,239,229,0.78); text-decoration: none; }
.site-footer .f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer .brand-f {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--paper);
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.site-footer h4 {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cdbaa2;
  font-weight: 600;
  margin: 0 0 1.2rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.7rem; }
.site-footer .f-link:hover { color: var(--paper); }
.site-footer .f-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(244,239,229,0.5);
  flex-wrap: wrap;
}

/* ---------- page hero (interior pages) ---------- */
.page-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem,4vw,3rem); }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }

/* ---------- reveal on scroll + parallax ---------- */
/* Base: content always visible (safe for no-JS / reduced-motion / print). */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Gentle rise + fade. Movement is vertical only, never horizontal, so it can
     never widen the page or show a scrollbar on mobile. Off-screen items hold
     their small offset until they enter view; first-screen items resolve to the
     final state in the load frame, so nothing flashes and nothing jumps. */
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .js .reveal.rv-up    { transform: translateY(30px); }
  .js .reveal.rv-scale { transform: translateY(16px) scale(.984); }
  .js .reveal.rv-left,
  .js .reveal.rv-right { transform: translateY(20px); }
  .js .reveal.hero-ed-lead { transition-duration: .7s; }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* parallax: image is taller than its frame, leaving room to drift */
.img-band img.parallax {
  height: calc(100% + 400px);
  top: -200px;
  bottom: auto;          /* release inset:0 bottom so the extra height applies */
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .img-band img.parallax { height: 100%; top: 0; transform: none !important; }
}

/* ---------- list styles ---------- */
ul.ticks { list-style: none; padding: 0; margin: 0 0 1.6em; }
ul.ticks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.85rem;
  color: var(--ink-soft);
}
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.7rem; height: 0.7rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ---------- info grid (who / format / results) ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.info-grid .cell {
  background: var(--paper);
  padding: 2.4rem 2rem 2.5rem;
}
.info-grid .cell .kicker {
  display: block;
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.info-grid h4 {
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--slate);
  font-weight: 600;
  margin: 0 0 1.05rem;
  padding-bottom: 0.8rem;
  position: relative;
}
.info-grid h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2rem; height: 2px;
  background: var(--gold);
}
.info-grid p { font-size: 1.05rem; margin: 0; color: var(--ink-soft); }

/* ---------- programme timeline ---------- */
.phase-label {
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 1.6rem;
}

.steps { display: grid; gap: 1.1rem; }
.step {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .wk {
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  padding-top: 0.45rem;
}
.step h4 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
.step p { font-size: 1rem; margin: 0; color: var(--ink-soft); max-width: 46rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 2.5rem 1.3rem 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 500;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--body);
  font-size: 1.5rem;
  color: var(--gold-deep);
  transition: transform .3s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  max-width: 52rem;
}

/* ---------- big CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- testimonial grid (clients) ---------- */
.tgrid { display: flex; gap: 1.5rem; align-items: flex-start; }
.tcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.tcard {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  padding: 2.1rem 2rem 1.9rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* speech-bubble tail (rotated square that inherits card fill + border) */
.tcard::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--paper-deep);
  transform: rotate(45deg);
}
.tcard.tail-bl::after { bottom: -11px; left: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tcard.tail-br::after { bottom: -11px; right: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tcard.tail-tl::after { top: -11px; left: 38px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.tcard.tail-tr::after { top: -11px; right: 38px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.tcard p {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.42;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 1.4rem;
  max-width: none;
}
.tcard .by {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  display: block;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .tgrid { flex-direction: column; }
}

/* ---------- journal contents index ---------- */
.toc {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1px solid var(--line);
}
#wisdom { scroll-margin-top: 92px; }
.toc-lead {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  text-decoration: none;
  color: inherit;
  padding: 1.3rem 0.4rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s ease;
}
.toc-lead:hover { padding-left: 0.6rem; }
.toc-lead .toc-no {
  font-family: var(--label);
  font-size: 0.92rem;
  color: var(--gold);
  flex: none;
  width: 1.6rem;
  padding-top: 0.35rem;
}
.toc-lead .toc-word {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.22rem;
  transition: color .3s ease;
}
.toc-lead:hover .toc-word { color: var(--gold-deep); }
.toc-lead .toc-root {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-faint);
  line-height: 1.3;
}
.toc-lead .toc-root b { color: var(--gold-deep); font-weight: 600; font-style: normal; }
.toc-lead .toc-arr {
  font-family: var(--label);
  color: var(--gold);
  flex: none;
  align-self: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.toc-lead:hover .toc-arr { opacity: 1; transform: none; }
.toc-divider {
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0;
  padding: 1.3rem 0 0.2rem;
}
.toc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.toc-item {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  text-decoration: none;
  color: inherit;
  padding: 1.15rem 0.4rem 1.15rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s ease, background .3s ease;
}
.toc-grid .toc-item:nth-child(odd) { padding-right: clamp(1rem, 3vw, 2.4rem); }
.toc-grid .toc-item:nth-child(even) {
  padding-left: clamp(1rem, 3vw, 2.4rem);
  border-left: 1px solid var(--line);
}
.toc-item:hover { padding-left: 0.6rem; }
.toc-grid .toc-item:nth-child(even):hover { padding-left: calc(clamp(1rem, 3vw, 2.4rem) + 0.6rem); }
.toc-item .toc-no {
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  flex: none;
  padding-top: 0.45rem;
  width: 1.6rem;
}
.toc-item .toc-text { flex: 1; min-width: 0; }
.toc-item .toc-word {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.2rem;
  transition: color .3s ease;
}
.toc-item:hover .toc-word { color: var(--gold-deep); }
.toc-item .toc-root {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: var(--ink-faint);
  line-height: 1.3;
}
.toc-item .toc-root b { color: var(--gold-deep); font-weight: 600; font-style: normal; }
.toc-item .toc-arr {
  font-family: var(--label);
  color: var(--gold);
  flex: none;
  align-self: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.toc-item:hover .toc-arr { opacity: 1; transform: none; }
@media (max-width: 680px) {
  .toc-grid { grid-template-columns: 1fr; }
  .toc-grid .toc-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .toc-grid .toc-item:nth-child(odd) { padding-right: 0; }
  .toc-grid .toc-item:nth-child(even):hover,
  .toc-item:hover { padding-left: 0.6rem; }
}

/* ---------- journal / essays ---------- */
.essay { padding-block: clamp(2.2rem, 3.4vw, 3.2rem); border-top: 1px solid var(--line); scroll-margin-top: 108px; }
.essay:first-of-type { border-top: 0; }
.essay .meta {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 1.4rem;
}
.essay .word-root {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--gold-deep);
  margin: 0 0 0.4rem;
}
.essay h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin-bottom: 1.2rem;
}
.essay .body { max-width: 40rem; }
.essay .body p { color: var(--ink-soft); }
.essay .body p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.6em;
  line-height: 0.78;
  float: left;
  padding: 0.05em 0.12em 0 0;
  color: var(--ink);
  font-weight: 500;
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  /* collapse all inline two/three-column section grids to a single column */
  .stack { grid-template-columns: 1fr !important; row-gap: clamp(1.6rem,5vw,2.4rem) !important; }
  .hero-portrait { margin-left: auto; margin-right: auto; }
  .img-figure { margin-left: auto; margin-right: auto; max-width: 460px; }
  body { font-size: 1.06rem; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .step .wk { padding-top: 0; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .site-footer .f-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 760px), (pointer: coarse) {
  .nav-toggle { display: block; }

  /* the <nav> becomes a full editorial panel below the header bar, carrying the
     same language as the desktop rail: eyebrow, numbered hairline tabs, CTA, place */
  .site-header nav {
    position: fixed;
    inset: 88px 0 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: 2.3rem 0 1.6rem;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    background-color: var(--paper);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)' opacity='0.055'/%3E%3C/svg%3E"),
      linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 55%, var(--line) 100%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .34s ease, transform .34s ease, visibility .34s;
  }
  .site-header nav.open { opacity: 1; visibility: visible; transform: none; }

  /* eyebrow */
  .site-header nav::before {
    content: "Navigate";
    font-family: var(--label);
    font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 600;
    padding-left: calc(var(--gutter) + 1.8rem + 0.7rem);
    margin-bottom: 1.9rem;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat; background-size: 1.8rem 1px;
    background-position: var(--gutter) center;
  }

  /* the numbered hairline tabs */
  .nav-links {
    position: static; transform: none;
    flex-direction: column; align-items: stretch;
    gap: 0; width: 100%; padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none;
    counter-reset: navtab;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: flex; align-items: center; gap: 0.9rem;
    width: 100%; padding: 1.05rem var(--gutter);
    border-top: 1px solid var(--line);
    font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500; color: var(--ink-soft);
    text-decoration: none;
  }
  .nav-links li:last-child a { border-bottom: 1px solid var(--line); }
  .nav-links a::before {
    counter-increment: navtab;
    content: counter(navtab, decimal-leading-zero);
    flex: none; width: 1.9rem;
    font-family: var(--display); font-size: 1.6rem; line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold); font-weight: 500;
  }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--ink); font-weight: 600; background: var(--paper); box-shadow: inset 3px 0 0 0 var(--slate); }
  .nav-links a.active::before { color: var(--gold-deep); }
  .nl-label { display: inline-block; }

  /* CTA + place, at the foot of the panel */
  .site-header nav .nav-cta {
    display: inline-flex; align-items: center; gap: 0.55rem;
    align-self: flex-start;
    margin: 2.1rem var(--gutter) 0;
    font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    color: var(--paper); background: var(--slate); border: 1px solid var(--slate);
    padding: 0.9rem 1.4rem; text-decoration: none;
  }
  .site-header nav::after {
    content: "London \00b7 Worldwide";
    margin-top: auto;
    padding: 1.4rem var(--gutter) 0;
    font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  }
}

/* ============================================================
   Desktop left tab-rail navigation (>=761px)
   Top strip keeps the logo; primary nav becomes a fixed vertical
   tab-rail down the left, with the current page as a connected tab.
   Mobile (<=760px) is untouched and keeps the hamburger menu.
   ============================================================ */
:root { --rail-w: 236px; --rail-w-full: 236px; --rail-w-collapsed: 74px; --rail-pad: clamp(1.6rem, 2vw, 2.2rem); }

.nav-cta { display: none; }   /* hidden on mobile; shown on desktop */

@media (min-width: 761px) and (pointer: fine) {
  /* push all page content to the right of the rail */
  .page-shell { margin-left: var(--rail-w); }

  /* top strip: align the logo to the rail's left edge, CTA to the right */
  .site-header .wrap.nav { padding-left: var(--rail-pad); }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
    font-family: var(--label);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--paper);
    background: var(--slate);
    border: 1px solid var(--slate);
    padding: 0.82rem 1.4rem;
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease;
  }
  .nav-cta .arr { transition: transform .3s ease; }
  .nav-cta:hover { background: var(--slate-deep); border-color: var(--slate-deep); }
  .nav-cta:hover .arr { transform: translateX(4px); }

  /* the <nav> in the header becomes a fixed vertical rail under the strip */
  .site-header nav {
    position: fixed;
    top: 88px;
    left: 0;
    bottom: 0;
    width: var(--rail-w);
    background: var(--paper);
    border-right: 1px solid var(--line);
    z-index: 40;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 0 1.5rem;
  }
  /* eyebrow removed from the rail (kept here, hidden, so the tabRise hook is harmless) */
  .site-header nav::before {
    content: "Navigate";
    display: none;
    font-family: var(--label);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 600;
    padding: 0 var(--rail-pad);
    padding-left: calc(var(--rail-pad) + 1.8rem + 0.7rem);   /* room for the leading line + gap */
    margin-bottom: 2.6rem;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-size: 1.8rem 1px;
    background-position: var(--rail-pad) center;             /* short line, vertically centred with the text */
  }
  /* quiet location marker pinned to the bottom of the rail */
  .site-header nav::after {
    content: "London · Worldwide";
    margin-top: auto;
    padding: 1.3rem var(--rail-pad) 0;
    border-top: 1px solid var(--line);
    font-family: var(--label);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 500;
  }

  /* the tabs */
  .nav-links {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    counter-reset: navtab;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.02rem var(--rail-pad);
    border-top: 1px solid var(--line);
    font-family: var(--label);
    font-size: 0.84rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .25s ease, padding-left .3s ease, background .25s ease;
  }
  .nav-links li:last-child a { border-bottom: 1px solid var(--line); }
  .nav-links a::before {
    counter-increment: navtab;
    content: counter(navtab, decimal-leading-zero);
    flex: none;
    width: 1.7rem;
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold);
    font-weight: 500;
  }
  .nav-links a::after { display: none; }   /* drop the base sliding underline */
  .nav-links a:hover {
    color: var(--ink);
    padding-left: calc(var(--rail-pad) + 0.45rem);
  }

  /* active tab: connects into the content panel */
  .nav-links a.active {
    color: var(--ink);
    font-weight: 600;
    background: var(--paper);
    box-shadow: inset 3px 0 0 0 var(--slate);
  }
  .nav-links a.active::before { color: var(--gold-deep); }
  .nav-links a.active::after {       /* paper strip that breaks the rail's right edge */
    display: block;
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: -1px;
    width: 2px;
    background: var(--paper);
  }

  .nav-toggle { display: none; }
}

/* ============================================================
   Rail enhancements: reading-progress spine, staggered load-in,
   top-strip positioning line. Desktop only; reduced-motion safe.
   ============================================================ */

/* --- top-strip positioning line (centred, wide desktop only) --- */
.nav-tagline { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
  .nav-tagline {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--label);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* --- reading-progress spine on the rail's left edge --- */
.rail-progress { display: none; }
@media (min-width: 761px) and (pointer: fine) {
  .rail-progress {
    display: block;
    position: absolute;
    left: 0; top: 0;
    width: 3px;
    height: 100%;
    background: var(--line);
  }
  .rail-progress-fill {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: var(--slate);
    transform: scaleY(0);
    transform-origin: top center;
  }
}

/* --- staggered entrance for the rail tabs --- */
@keyframes tabRise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 761px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .site-header nav::before { animation: tabRise .6s .05s both cubic-bezier(.16,.7,.22,1); }
  .js .nav-links li a { animation: tabRise .6s both cubic-bezier(.16,.7,.22,1); }
  .js .nav-links li:nth-child(1) a { animation-delay: .12s; }
  .js .nav-links li:nth-child(2) a { animation-delay: .18s; }
  .js .nav-links li:nth-child(3) a { animation-delay: .24s; }
  .js .nav-links li:nth-child(4) a { animation-delay: .30s; }
  .js .nav-links li:nth-child(5) a { animation-delay: .36s; }
  .js .nav-links li:nth-child(6) a { animation-delay: .42s; }
  .js .site-header nav::after { animation: tabRise .6s .5s both cubic-bezier(.16,.7,.22,1); }
}

/* ============================================================
   Layout revision: logo moves into a full-height left sidebar;
   the top strip becomes a slim bar over the content (so the
   button lines up with the content, including Richard's portrait).
   The rail gets a warmer tone, a soft gradient and a grain so it
   reads as distinct from the cream content. Desktop only; mobile
   keeps the logo + hamburger in the strip exactly as before.
   ============================================================ */
@media (min-width: 761px) and (pointer: fine) {
  /* rail -> full-height, warmly toned sidebar */
  .site-header nav {
    top: 0;
    padding-top: 164px;            /* clears the dropped logo and opens the gap before the first tab */
    background-color: var(--paper);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)' opacity='0.055'/%3E%3C/svg%3E"),
      linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 46%, var(--line) 100%);
    border-right: 1px solid var(--line);
    box-shadow: inset -11px 0 20px -18px rgba(53,54,48,0.30);
  }

  /* logo lifts out of the strip to the head of the sidebar; dropped so it
     sits level with the start of the hero text rather than floating above it */
  .site-header .brand {
    position: fixed;
    top: 78px;
    left: var(--rail-pad);
    z-index: 60;
  }
  .site-header .brand img { height: 64px; }
  .site-header .brand-word { opacity: 1; transition: opacity .34s ease .04s; }

  /* strip -> slim top bar over the content, aligned with it */
  .site-header { margin-left: var(--rail-w); }
  .site-header .wrap.nav { padding-inline: var(--gutter); }

  /* tabs are transparent so the toned rail shows; active tab stays
     paper so it still reads as connecting into the content panel */
  .nav-links a { background: transparent; }
  .nav-links a.active { background: var(--paper); }
}

/* tagline becomes the left item of the top bar (no longer centred) */
@media (min-width: 1024px) and (pointer: fine) {
  .nav-tagline {
    position: static;
    transform: none;
    left: auto; top: auto;
  }
}

/* ============================================================
   Top bar removed on desktop. The sidebar now carries brand,
   navigation and the primary CTA (seated at its foot, just
   above the location line); page content runs to the top of
   the viewport beside the rail. Mobile keeps its bar + hamburger.
   ============================================================ */
@media (min-width: 761px) and (pointer: fine) {
  .site-header {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 0;
    margin-left: 0;
    background: none;
    border-bottom: none;
    z-index: 40;
  }
  .site-header .wrap.nav { height: 0; min-height: 0; padding: 0; }

  /* CTA drops to the foot of the rail; auto top margin pushes it down */
  .nav-cta {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    margin: auto var(--rail-pad) 1.3rem;
    padding: 0.85rem 1.1rem;
  }
  .site-header nav::after { margin-top: 0; }
}

/* extra reveal variety + print safety */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.rv-fade { transform: none; }
}
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Legal page
   ============================================================ */
.legal-intro { padding-top: clamp(0.5rem, 2vw, 1.6rem); }
.legal-meta {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.7rem;
  line-height: 1.7;
}
.legal-meta b { color: var(--ink-soft); font-weight: 600; }

.legal-toc {
  list-style: none;
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
  padding: 0;
  counter-reset: ltoc;
  border-top: 1px solid var(--line);
  max-width: 38rem;
}
.legal-toc li { counter-increment: ltoc; border-bottom: 1px solid var(--line); }
.legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.95rem 0.2rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.32rem;
  transition: color .25s ease, padding-left .25s ease;
}
.legal-toc a::before {
  content: counter(ltoc, decimal-leading-zero);
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--gold-deep);
  flex: none;
  transform: translateY(-0.15em);
}
.legal-toc a:hover { color: var(--slate); padding-left: 0.5rem; }

.legal-body { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.legal-section {
  max-width: 46rem;
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.legal-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.legal-section .ls-num {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 0.7rem;
}
.legal-section h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 0.55em; }
.legal-section h3 {
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.9em 0 0.7em;
}
.legal-section ul.legal-list {
  list-style: none; padding: 0; margin: 0 0 1.3em;
  max-width: var(--measure);
}
.legal-section ul.legal-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6em;
  color: var(--ink-soft);
}
.legal-section ul.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 1px; background: var(--gold-deep);
}
.legal-section a { color: var(--slate); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: var(--slate-deep); }


/* ============================================================
   Optional collapsed rail (desktop). Open is the default on every
   load. The toggle (× by the "Navigate" label) collapses the rail
   to numerals only; the wordmark swaps for the symbol; hovering the
   collapsed rail peeks it back to full width over the content. The
   logo/symbol swap is a plain display swap (no cross-fade) so it
   can never be squashed, and the brand ignores the cursor while
   collapsed so crossing it cannot flicker the hover. Only the rail
   width and the page margin animate. Mobile is untouched.
   ============================================================ */
.brand .brand-mark { display: none; }
.rail-collapse { display: none; }

@media (min-width: 761px) and (pointer: fine) {
  /* the only things that animate: the rail width and the content margin */
  .page-shell { transition: margin-left .42s cubic-bezier(.4,0,.2,1); }
  .site-header nav { transition: width .42s cubic-bezier(.4,0,.2,1); }
  .nl-label { display: inline-block; white-space: nowrap; opacity: 1; transition: opacity .34s ease .04s; }

  /* toggle: a quiet hairline circle in the rail's top-right corner, above the logo */
  .rail-collapse {
    position: absolute; top: 26px; right: 16px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin: 0; padding: 0;
    background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
    cursor: pointer; color: var(--gold-deep); z-index: 61;
    box-shadow: 0 6px 16px -12px rgba(53,54,48,0.5);
    transition: color .25s ease, background .25s ease, border-color .25s ease;
  }
  .rail-collapse:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
  .rail-collapse .rc-ico { font-size: 1rem; line-height: 1; font-weight: 600; }
  .rail-collapse .rc-ico-open { display: none; }

  /* ============ collapsed (resting): numerals only ============ */
  html.rail-collapsed { --rail-w: var(--rail-w-collapsed); }

  /* numerals centre; labels and the wide chrome leave the layout */
  html.rail-collapsed .nav-links a { justify-content: center; gap: 0; padding-inline: 0; }
  html.rail-collapsed .nav-links a::before { width: auto; }
  html.rail-collapsed .site-header nav::before { display: none; }
  html.rail-collapsed .site-header nav::after  { display: none; }
  html.rail-collapsed .nav-cta { display: none; }

  /* hovering a number reveals just that page name, as a small flyout over the content */
  html.rail-collapsed .nl-label {
    position: absolute;
    left: 100%; top: 50%;
    transform: translateY(-50%) translateX(10px);
    white-space: nowrap;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 0.45rem 0.7rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    box-shadow: 0 10px 24px -16px rgba(53,54,48,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 70;
  }
  html.rail-collapsed .nav-links a:hover .nl-label,
  html.rail-collapsed .nav-links a:focus-visible .nl-label {
    opacity: 1;
    transform: translateY(-50%) translateX(6px);
  }

  /* while the rail is closing, freeze the page-name flyouts so they snap
     rather than all fade out together; on opening they fade back in */
  html.rail-collapsed.rail-animating .nl-label { opacity: 0 !important; transition: none !important; }

  /* wordmark -> symbol, centred (symbol stays a clickable home link) */
  html.rail-collapsed .site-header .brand { left: 20px; }
  html.rail-collapsed .brand-word { position: absolute; opacity: 0; pointer-events: none; transition: none; }
  html.rail-collapsed .brand-mark { display: block; width: 36px; height: 36px; }

  /* toggle: swap to the open glyph, centred above the symbol */
  html.rail-collapsed .rail-collapse .rc-ico-close { display: none; }
  html.rail-collapsed .rail-collapse .rc-ico-open  { display: inline; }
  html.rail-collapsed .rail-collapse { top: 26px; right: auto; left: 50%; transform: translateX(-50%); }
}

@media (min-width: 761px) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .page-shell, .site-header nav { transition: none; }
}

/* Touch devices (no hover) can't reveal the collapsed flyout labels, so the
   collapse toggle is withheld there: the rail stays full and labelled. */
@media (hover: none) and (min-width: 761px) {
  .rail-collapse { display: none; }
}