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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

: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; }

/* ---------- 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 { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn.gold:hover { background: var(--gold-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); }

/* 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(2.4rem,5vw,4rem) 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);
}
/* 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) {
  .js .reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.16,.7,.22,1);
    will-change: opacity, transform;
  }
  .js .reveal.rv-left  { transform: translateX(-52px); }
  .js .reveal.rv-right { transform: translateX(52px); }
  .js .reveal.rv-up    { transform: translateY(40px); }
  .js .reveal.rv-scale { transform: scale(.92); }
  .js .reveal.hero-ed-lead { transition-duration: 1.15s; }
  .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% + 220px);
  top: -110px;
  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.7rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 0.7rem;
}
.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;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.phase-label::after { content:""; flex:1; height:1px; background:var(--line); }

.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; }
}
@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) {
  body { font-size: 1.06rem; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .step .wk { padding-top: 0; }
  .nav-links {
    position: fixed;
    inset: 88px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--gutter) 1.6rem;
    /* Hide fully above the viewport. -130% of the panel's own height does NOT clear
       the 88px header, so the closed panel's bottom edge was overlapping and cropping
       the top of the logo. Shift up by the full panel height plus the header offset. */
    transform: translateY(calc(-100% - 96px));
    transition: transform .4s ease, box-shadow .4s ease;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    border-bottom: 1px solid transparent;
  }
  .nav-links.open {
    transform: translateY(0);
    box-shadow: 0 20px 40px -28px rgba(0,0,0,0.4);
    border-bottom-color: var(--line);
  }
  .nav-links a { padding: 0.85rem 0; font-size: 0.95rem; width: 100%; }
  .nav-links a::after { display: none; }            /* no sliding underline in stacked menu */
  .nav-links a.active { color: var(--gold-deep); }  /* mark current page with colour instead */
  .nav-toggle { display: block; }
}

/* ============================================================
   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-pad: clamp(1.6rem, 2vw, 2.2rem); }

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

@media (min-width: 761px) {
  /* 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.5rem;
    margin-left: auto;
    font-family: var(--label);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-deep);
    text-decoration: none;
    transition: opacity .3s ease;
  }
  .nav-cta .arr { transition: transform .3s ease; }
  .nav-cta:hover { opacity: 0.62; }
  .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;
  }
  /* small eyebrow at the top of the rail */
  .site-header nav::before {
    content: "Navigate";
    font-family: var(--label);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    padding: 0 var(--rail-pad);
    margin-bottom: 1.5rem;
  }
  /* 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: baseline;
    gap: 0.85rem;
    width: 100%;
    padding: 1.02rem var(--rail-pad);
    border-top: 1px solid var(--line);
    font-family: var(--label);
    font-size: 0.8rem;
    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;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--gold);
    font-weight: 600;
  }
  .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; }
}