/* ==========================================================================
   Oliver Camponovo — Sovereign Wealth Architecture

   Composed against oc-tokens.css. Nothing here invents a number: sizes,
   spaces, hairlines, shadows and timings all come from the token layer, so
   the page reads as one object rather than as a set of sections that were
   each styled on their own day.
   ========================================================================== */

/* ── Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--paper-100);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  margin: 0;
  font-weight: 300;
  letter-spacing: var(--track-snug);
  line-height: var(--lh-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* German runs 20–30% longer than English and builds compounds no column can
   hold unbroken — Drei-Schichten-Architektur is 26 characters in a heading
   set at 40px on a 390px screen. Hyphenation is ordinary practice in German
   typesetting and is what keeps the display sizes inside their measure. */
:lang(de) h1, :lang(de) h2, :lang(de) h3,
:lang(de) .hub__name, :lang(de) .manifesto__body,
:lang(de) .layer__desc, :lang(de) .archetype__focus { hyphens: auto; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(197, 160, 89, 0.28); }

section[id] { scroll-margin-top: calc(var(--nav-h-condensed) + var(--s-5)); }

/* The focus ring is an interface component, so SC 1.4.11 asks it for 3:1
   against what surrounds it. The bright gold gives 7.1:1 on the dark
   sections but only 2.2:1 on paper, which is a fail everywhere the page is
   light — so the ring resolves through a token like everything else, and a
   halo behind it keeps it visible over the hero photograph too. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

.gold { color: var(--gold-text); }
em.gold { font-style: italic; font-weight: 300; }

/* ── Icons ───────────────────────────────────────────────────────────────
   Every glyph on the page is a 24-unit lucide outline drawn at sizes from
   10px to 48px. With stroke-width given in user units that produced actual
   stroke weights from 1.0px to 3.0px — a threefold spread, which is why the
   set never read as one family. non-scaling-stroke evaluates the width after
   the viewBox transform, so a single declaration gives every icon the same
   weight at every size. */

svg { stroke-width: 1.5; }
svg path, svg circle, svg rect, svg line,
svg polyline, svg polygon, svg ellipse { vector-effect: non-scaling-stroke; }

/* The one exception: a tick inside an 18px disc needs the extra weight to
   register at all. */
.book__tick svg, .done__check svg { stroke-width: 2; }

/* ── Shell ───────────────────────────────────────────────────────────────
   One container, one left edge. Every section's inner wrapper resolves to
   the same measured column, so the margin down the left of the document
   never moves. Blocks that want a narrower measure keep the shared left
   edge and give the width back on the right, rather than re-centring and
   introducing a second margin. */

.heritage__inner, .philosophy__inner, .archetypes__inner, .expertise__inner,
.global__inner, .book__inner, .insights__inner, .pedigree__inner,
.vindication__inner, .contact__inner, .pullquote__inner, .credstrip__inner,
.legal__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

.heritage, .philosophy, .archetypes, .expertise, .global, .book,
.insights, .pedigree, .vindication, .contact, .pullquote {
  padding-inline: var(--gutter);
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
}

.insights { padding-block: var(--section-tight); }
.pullquote { padding-block: var(--section-loose); }

/* ── Surface tone ────────────────────────────────────────────────────────
   The page alternates dark and light in pairs. Within each run the tone
   steps very slightly so two adjacent sections of the same family do not
   read as one undifferentiated slab — the join is felt rather than seen. */

.heritage    { background: var(--paper-100); }
.philosophy  { background: var(--paper-200); }
.archetypes  { background: var(--ink-700); color: var(--paper-100); }
.expertise   { background: var(--ink-600); color: var(--paper-100); }
.global      { background: var(--paper-100); }
.book        { background: var(--paper-200); }
.insights    { background: var(--paper-100); }
.pedigree    { background: var(--ink-700); color: var(--paper-100); }
.pullquote   { background: var(--paper-100); text-align: center; }
.vindication { background: var(--paper-200); }
.contact     { background: var(--ink-900); color: var(--paper-100); }

/* ── Seams ───────────────────────────────────────────────────────────────
   Where the page changes register it used to butt one flat colour against
   another, so the document read as a stack of unrelated blocks. Each dark
   run now opens with a hairline of gold and a wide, very low ambient light
   that lifts the top edge, and closes with the light falling away. The
   effect is a dissolve rather than a cut, and it costs one gradient. */

.archetypes::before,
.pedigree::before,
.contact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--line-gold) 22%, var(--line-gold) 78%, transparent);
  z-index: 1;
}

.archetypes::after,
.pedigree::after,
.contact::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(197, 160, 89, 0.07), rgba(197, 160, 89, 0.02) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Light sections closing into a dark one get the reciprocal: the paper
   deepens fractionally at the foot so the transition is prepared. */
.philosophy::after,
.insights::after,
.book::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(19, 18, 16, 0.035));
  pointer-events: none;
  z-index: 0;
}

/* ── Responsive helpers ──────────────────────────────────────────────── */

@media (max-width: 1023px) { .u-lg-up { display: none !important; } }
@media (min-width: 1024px) { .u-lg-down { display: none !important; } }
@media (max-width: 767px) { .u-md-up { display: none !important; } }

/* ── Motion ──────────────────────────────────────────────────────────────
   Reveals travel a short distance quickly. The old set moved 40–50px over
   1.0–1.4s, which announces itself as a scroll animation; a premium reveal
   is one you register as the page settling rather than as an effect. */

@keyframes ocPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes ocSpin { to { transform: rotate(360deg); } }
@keyframes revealUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes revealLeft { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes revealScale { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes markDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sealPulse {
  0%   { transform: scale(0.96); opacity: 0.55; }
  100% { transform: scale(1.04); opacity: 1; box-shadow: 0 0 30px rgba(197, 160, 89, 0.25); }
}

/* Content may only start hidden where something can be relied on to reveal
   it. That used to be a .has-js class set by an inline script, which the
   public CSP blocked — so on the live site the class was never set and the
   reveals never ran at all. The browser is asked directly instead: where the
   feature is unsupported the query does not match, the content is simply
   visible, and the page loses an animation rather than its text.
   oc-site.js adds .is-in via IntersectionObserver; `animation-timeline`
   still only ships in Chromium. */
@media (scripting: enabled) {
  .reveal { opacity: 0; will-change: opacity, transform; }
}
.reveal.is-in { opacity: 1; animation-fill-mode: both; }
.reveal--up.is-in    { animation: revealUp 0.75s var(--ease) both; }
.reveal--left.is-in  { animation: revealLeft 0.8s var(--ease) both; }
.reveal--right.is-in { animation: revealRight 0.8s var(--ease) both; }
.reveal--scale.is-in { animation: revealScale 0.9s var(--ease) both; }

body[data-no-motion] .reveal { opacity: 1 !important; }
body[data-no-motion] *,
body[data-no-motion] *::before,
body[data-no-motion] *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shared atoms ────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink-900);
  color: var(--gold);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  border: 1px solid var(--line-gold);
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* The eyebrow is the page's most repeated device, so it carries a rule as
   well as a colour: a mark the eye can find at a glance when scanning, and
   one that survives being set in a script with no uppercase. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  font-family: var(--sans);
  margin-bottom: var(--s-5);
  color: var(--on-surface-faint);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.eyebrow--gold { color: var(--gold-text); }

.rule { height: 1px; width: 100%; background: var(--line-gold); border: 0; }
.rule--short { width: 72px; margin-top: var(--s-2); }
.rule--center { margin-inline: auto; }

/* Ambient light, not decoration: these sit behind content to stop large
   flat areas reading as empty. Kept far below the threshold of notice. */
.orb {
  position: absolute;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(197, 160, 89, 0.055), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.orb--tr { right: -8%; top: -12%; }
.orb--bl { left: -12%; bottom: -10%; }
.orb--br { right: -10%; bottom: -12%; }
.orb--r  { right: -14%; top: 34%; }

/* Crop marks. Two corners, not four — a printer's registration reference
   reads as craft; a full box drawn in dotted corners reads as a widget. */
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  --corner-color: var(--line-gold);
  pointer-events: none;
}
.corner--gold { --corner-color: var(--line-gold); }
.corner--tl { top: 0; left: 0; border-top: 1px solid var(--corner-color); border-left: 1px solid var(--corner-color); }
.corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--corner-color); border-right: 1px solid var(--corner-color); }
.corner--tr, .corner--bl { display: none; }

.dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  display: inline-block;
  flex-shrink: 0;
  animation: ocPulse 2.6s ease-in-out infinite;
}
.dot--gold { background: var(--gold); }
.dot--alliance { background: var(--alliance); }

/* ── Group-hover primitives ──────────────────────────────────────────────
   The design's [data-group] / [data-gh-*] pairs. :focus-within is paired
   with :hover throughout so keyboard users get the same affordances —
   without it the "Access Report" cue on the article cards is permanently
   invisible to anyone not using a mouse. */

[data-gh] { transition: all var(--dur) var(--ease); }

.group:hover [data-gh~="accent"],
.group:focus-within [data-gh~="accent"]  { color: var(--gold-text); }
.group:hover [data-gh~="num"],
.group:focus-within [data-gh~="num"]     { color: var(--line-gold); }
.group:hover [data-gh~="ring"],
.group:focus-within [data-gh~="ring"]    { transform: scale(1); border-color: var(--line-gold); opacity: 1; }
.group:hover [data-gh~="icon"],
.group:focus-within [data-gh~="icon"]    { opacity: 1; color: var(--gold); border-color: var(--line-gold); }
.group:hover [data-gh~="grow"],
.group:focus-within [data-gh~="grow"]    { transform: scale(1.06); border-color: var(--line-gold); }
.group:hover [data-gh~="unscale"],
.group:focus-within [data-gh~="unscale"] { transform: scale(1); }
.group:hover [data-gh~="color"],
.group:focus-within [data-gh~="color"]   { filter: grayscale(0); }
.group:hover [data-gh~="fade"],
.group:focus-within [data-gh~="fade"]    { opacity: 0; }
.group:hover [data-gh~="border"],
.group:focus-within [data-gh~="border"]  { border-color: var(--gold); }
.group:hover [data-gh~="circle"],
.group:focus-within [data-gh~="circle"]  { border-color: var(--gold); color: var(--gold); }
.group:hover [data-gh~="reveal"],
.group:focus-within [data-gh~="reveal"]  { opacity: 1; transform: none; }
.group:hover [data-gh~="wipe"],
.group:focus-within [data-gh~="wipe"]    { transform: scaleX(1); }
.group:hover [data-gh~="onink"],
.group:focus-within [data-gh~="onink"]   { color: var(--paper-100); }
.group:hover [data-gh~="hoverbar"],
.group:focus-within [data-gh~="hoverbar"]{ transform: scaleX(1); }

/* ── Preloader ───────────────────────────────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--ink-800);
  z-index: 9999;
}
.preloader.is-gone { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease); }
.preloader__seal {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--serif);
  font-size: var(--t-h4);
  letter-spacing: 0.08em;
  animation: sealPulse 2s ease-in-out infinite alternate;
}
.preloader__label {
  margin-top: var(--s-5);
  color: var(--gold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-family: var(--mono);
  opacity: 0.8;
}

/* ── Scroll progress ─────────────────────────────────────────────────────
   Reduced from 4px to a hairline. A thick progress bar is a reading-app
   affordance; at 2px it registers as a detail of the chrome. */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--gold-dim), var(--gold), var(--gold-bright));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 70;
  pointer-events: none;
}

/* ── Navigation ──────────────────────────────────────────────────────────
   Over the hero the bar is transparent and lets the photograph run to the
   top of the window; on the first scroll it condenses — shorter, blurred,
   hairline-ruled. That transformation is the whole navigation "effect":
   nothing slides, nothing bounces, the chrome simply takes up less room
   once the reader has committed to the page. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
.nav::before {
  /* A short scrim under the transparent state so white type stays legible
     against whatever part of the photograph happens to sit behind it. */
  content: "";
  position: absolute;
  inset: 0 0 -40px 0;
  background: linear-gradient(to bottom, rgba(13, 12, 10, 0.55), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
}
.nav.is-condensed {
  height: var(--nav-h-condensed);
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav.is-condensed::before { opacity: 0; }

/* A document with no hero behind it has nothing to be transparent over, so
   the legal pages carry the condensed treatment from the first paint. */
.nav--solid {
  height: var(--nav-h-condensed);
  background: rgba(13, 12, 10, 0.92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav--solid::before { opacity: 0; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: #fff;
  flex-shrink: 0;
  min-height: 44px;
}
.nav__seal {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}
.nav__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 300;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav__brand:hover .nav__name { color: var(--gold); }

.nav__menu {
  display: flex;
  gap: clamp(var(--s-5), 2.4vw, var(--s-7));
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  margin-inline: auto;
}
.nav__menu a {
  position: relative;
  padding: var(--s-3) 0;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* The underline is drawn from the left rather than faded in, so the cue
   reads as a mark being made and not as an element appearing. */
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__menu a:hover { color: #fff; }
.nav__menu a:hover::after { transform: scaleX(1); }
.nav__menu a.is-active { color: var(--gold); }
.nav__menu a.is-active::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; }

.langbar {
  display: flex;
  align-items: center;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 3px;
}
.langbar a {
  padding: 6px 9px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  line-height: 1;
}
.langbar a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.langbar a[aria-current="true"] {
  color: var(--ink-900);
  background: var(--gold);
  font-weight: 600;
}

.nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44x44 minimum touch target (WCAG 2.5.5) — this is the only way into the
     menu on mobile, so it should not be a 40px squeeze. */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
}
.nav__burger .icon-close { display: none; }
.nav__burger[aria-expanded="true"] .icon-close { display: block; }
.nav__burger[aria-expanded="true"] .icon-burger { display: none; }

/* ── Mobile menu ─────────────────────────────────────────────────────── */

.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8);
  color: #fff;
  overflow-y: auto;
  animation: fadeIn var(--dur) var(--ease) both;
}
.mobilemenu[hidden] { display: none; }
.mobilemenu__top { display: flex; flex-direction: column; gap: var(--s-6); }
.mobilemenu__protocol {
  color: var(--gold);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-family: var(--sans);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
}
.mobilemenu__links { display: flex; flex-direction: column; }
.mobilemenu__links a {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-family: var(--serif);
  font-weight: 300;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobilemenu__links a:hover,
.mobilemenu__links a:focus-visible { color: var(--gold); padding-left: var(--s-2); }
.mobilemenu__links svg { color: var(--gold); opacity: 0.5; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.mobilemenu__links a:hover svg { transform: translateX(4px); }

.mobilemenu__bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.mobilemenu__langs { display: flex; flex-direction: column; gap: var(--s-3); }
.mobilemenu__langlabel {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
}
.mobilemenu__langrow { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mobilemenu__langrow a {
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  color: var(--on-surface-muted);
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.mobilemenu__langrow a[aria-current="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
  font-weight: 600;
}
.mobilemenu__colophon {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
}

/* ── Hero ────────────────────────────────────────────────────────────────
   Left-aligned on the shell grid rather than centred. A centred stack is
   the default arrangement of every landing page ever built; anchoring the
   headline to the same left margin the rest of the document uses makes the
   first screen part of the composition instead of a title card in front of
   it. The photograph is graded so the darkest part of the frame falls under
   the type, which is why the text needs no box behind it. */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink-800);
  color: var(--paper-100);
  padding: calc(var(--nav-h) + var(--s-9)) var(--gutter) var(--s-8);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: scale(1.06);
  will-change: transform, opacity;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(1) brightness(0.42) contrast(1.2);
}
/* Two overlaid gradients: one vertical to seat the foot of the section into
   the strip below it, one horizontal so the left column — where the type
   sits — is reliably the darkest part of the frame whatever the crop. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(13, 12, 10, 0.92) 0%, rgba(13, 12, 10, 0.55) 42%, rgba(13, 12, 10, 0.25) 100%),
    linear-gradient(to top, var(--ink-800) 2%, rgba(19, 18, 16, 0.1) 45%, rgba(13, 12, 10, 0.6) 100%);
  pointer-events: none;
}
/* The monogram is cropped by the right edge of the window rather than
   floated in the middle. Held at the boundary of visibility, it reads as
   watermarked stock; centred and complete it read as a background image. */
.hero__watermark {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}
.hero__watermark span {
  font-size: min(52vw, 46rem);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--paper-100);
  user-select: none;
  letter-spacing: -0.06em;
  opacity: 0.045;
  line-height: 0.74;
  transform: translate(14%, 16%);
  animation: fadeIn 2s var(--ease) both;
}

.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}
.hero__stack { display: flex; flex-direction: column; align-items: flex-start; }
.hero__stack > * { animation: heroRise 1s var(--ease) both; }
.hero__stack > *:nth-child(1) { animation-delay: 0.05s; }
.hero__stack > *:nth-child(2) { animation-delay: 0.16s; }
.hero__stack > *:nth-child(3) { animation-delay: 0.28s; }

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--gold);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  margin-bottom: var(--s-6);
}
.hero__tagline::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: markDraw 1.1s var(--ease) 0.5s both;
}
.hero__title {
  font-size: var(--t-display);
  font-family: var(--serif);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: #fff;
  font-weight: 300;
  /* Constrained in characters, not pixels: German sets far longer than
     English at the same point size and was breaking in the wrong places. */
  max-width: 15ch;
  text-wrap: balance;
  margin-bottom: var(--s-6);
}
.hero__subtitle {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: rgba(246, 243, 238, 0.78);
  max-width: 46ch;
  line-height: var(--lh-lead);
}

/* Set upright, at body size, at 11.5:1 against the scrim's darkest column.
   A disclaimer that has to be squinted at is not a disclaimer, so this is
   quieter than the subtitle by rhythm and width, never by fading it out. */
.hero__caveat {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: rgba(246, 243, 238, 0.8);
  max-width: 52ch;
}

/* A measured rail along the foot of the frame: place on the left, scroll
   cue on the right, a hairline between them. It gives the hero a base to
   stand on, which is what a floating centred chevron never does. */
.hero__location {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}
.hero__location span {
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold);
  font-weight: 500;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-gold);
  min-width: min(340px, 42vw);
}
.hero__chevron {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 10;
  color: var(--gold);
  opacity: 0.75;
  animation: ocPulse 3s ease-in-out infinite;
}
.hero__chevron svg { stroke: currentColor; }

@media (max-width: 1023px) {
  /* .hero__location carries u-lg-up, so below 1024px the foot rail is gone
     and the padding that reserved room for it would read as a dead band. */
  .hero { padding-bottom: var(--s-8); }
}
@media (max-width: 767px) {
  .hero { min-height: 92svh; }
  .hero__title { max-width: 100%; }
  .hero__chevron { display: none; }
}

/* ── Credentials strip ───────────────────────────────────────────────────
   An index rail, not a caption: the four credentials are the first factual
   claim the page makes, so they are set at a legible size with a rule above
   and below rather than at 10px in the gap between two sections. */

.credstrip {
  background: var(--ink-900);
  color: var(--on-surface-muted);
  padding: var(--s-6) var(--gutter);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.credstrip__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 180% at 50% 100%, rgba(197, 160, 89, 0.07), transparent 70%);
  pointer-events: none;
}
.credstrip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(var(--s-5), 4vw, var(--s-9));
  row-gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  text-align: center;
}
.credstrip__sep { color: var(--line-gold); }

/* ── Heritage ────────────────────────────────────────────────────────────
   The personal statement was inside a bordered, blurred, shadowed panel
   with four corner marks — five separate devices competing to frame three
   paragraphs. It is now the page itself: a gold spine down the left, a drop
   cap, and a measure that stops at 62 characters. Nothing to look at except
   the words, which is the point of a manifesto. */

/* The manifesto carries its own gold rule down the left of the text, which
   is the one that means something — it marks the measure. A second vertical
   rule at the edge of the window was decoration competing with it. */
.heritage__spine { display: none; }

.heritage__inner { max-width: var(--shell); }
.heritage__head { margin-bottom: var(--s-8); }
/* The eyebrow already draws a rule before its label; the standalone one
   underneath it was the same mark made twice. */
.heritage__head .rule { display: none; }

.manifesto {
  position: relative;
  max-width: 62ch;
  padding-left: clamp(var(--s-5), 3vw, var(--s-8));
  border-left: 1px solid var(--line-gold);
}
/* Crop marks belong on a plate, not on a column of running text — they were
   framing a box that no longer exists. They stay on .designations. */
.manifesto .corner { display: none; }
.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  font-family: var(--serif);
  line-height: 1.6;
  color: var(--on-surface);
  font-weight: 300;
}
.dropcap {
  font-size: 4.25em;
  font-family: var(--serif);
  font-weight: 300;
  color: var(--gold-text);
  margin-right: 0.08em;
  float: left;
  line-height: 0.78;
  padding-top: 0.06em;
}
.manifesto__lead { text-wrap: pretty; }
.manifesto__quote {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--on-surface-muted);
  font-style: italic;
  font-weight: 300;
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-gold);
}
.manifesto__close {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--on-surface-muted);
  font-weight: 300;
}
.manifesto__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
}
.manifesto__sig { display: flex; align-items: center; gap: var(--s-4); }
.manifesto__sigline { width: 44px; height: 1px; background: var(--gold); flex-shrink: 0; }
.manifesto__signame {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface);
}
.manifesto__archive {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--gold-text);
  font-family: var(--mono);
  user-select: none;
}

/* ── Philosophy ──────────────────────────────────────────────────────────
   Asymmetric: the text column is deliberately narrower than the image
   column, and the portrait is offset downward so the two do not sit in a
   symmetrical pair. The old radial-mask vignette on the portrait has gone —
   a soft-edged ellipse is a photo-frame effect from a decade ago. It is now
   a hard editorial crop with an offset hairline behind it. */

.philosophy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
@media (min-width: 900px) {
  .philosophy__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(var(--s-8), 7vw, 120px); }

  /* With no portrait uploaded the section would be a 56ch column of text in a
     1200px shell — a third of the page used and the rest silent. The heading
     and the copy then take a column each, which is a composition rather than
     a layout waiting for an asset that has not been supplied. */
  .philosophy__inner:not(.philosophy__inner--split) > .reveal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-8), 6vw, 104px);
    align-items: start;
  }
  .philosophy__inner:not(.philosophy__inner--split) .eyebrow { grid-column: 1; grid-row: 1; }
  .philosophy__inner:not(.philosophy__inner--split) .philosophy__title { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .philosophy__inner:not(.philosophy__inner--split) .philosophy__copy { grid-column: 2; grid-row: 1 / span 2; max-width: 52ch; }
}
.philosophy__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-7);
  line-height: var(--lh-title);
  font-weight: 300;
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  max-width: 16ch;
}
.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 56ch;
}
.philosophy__p1 {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--on-surface);
  border-left: 1px solid var(--line-gold);
  padding-left: var(--s-5);
}
.philosophy__p2 {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  font-family: var(--sans);
  line-height: var(--lh-body);
  padding-left: calc(var(--s-5) + 1px);
}

.portrait { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
/* The hairline sits behind and offset, so the photograph looks mounted
   rather than outlined. */
.portrait__halo {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-gold);
  transform: translate(20px, 20px);
  pointer-events: none;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease);
}
.portrait:hover .portrait__halo { transform: translate(14px, 14px); }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  z-index: 10;
  background: var(--paper-200);
  box-shadow: var(--shadow-lg);
}
.portrait__fade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.45), rgba(13, 12, 10, 0.05));
  transition: opacity var(--dur-image) var(--ease);
  pointer-events: none;
}
.portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.06);
  transition: transform var(--dur-image) var(--ease), filter var(--dur-image) var(--ease);
}
.portrait__frame:hover img,
.portrait__frame:focus-within img { filter: grayscale(0) contrast(1); }

/* ── Archetypes ──────────────────────────────────────────────────────────
   Three cards that were three outlined boxes. The border has gone: each is
   a tonal surface with a rule across the top that draws on hover, and the
   ordinal is a large ghost figure rather than a small label. Removing the
   outline is what lets the three read as one row instead of three widgets. */

.archetypes__head { margin-bottom: var(--s-9); max-width: 62ch; }
.archetypes__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  max-width: 18ch;
}
.archetypes__intro {
  margin-top: var(--s-5);
  color: var(--on-surface-muted);
  max-width: 58ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.archetypes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* One step lighter than the section it sits on. Painting the card the same
   colour as its ground and separating it with a 6%-white hairline made the
   three panels invisible until hovered — a layered surface has to be doing
   something at rest, or it is not a surface. */
.archetype {
  padding: var(--pad-panel);
  background: var(--ink-600);
  transition: background-color var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.archetype::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.archetype:hover { background: var(--ink-500); }
.archetype:hover::before, .archetype:focus-within::before { transform: scaleX(1); }
.archetype__num {
  font-family: var(--serif);
  color: rgba(246, 243, 238, 0.07);
  position: absolute;
  top: var(--s-4);
  right: var(--s-5);
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1;
  z-index: -1;
  transition: color var(--dur-slow) var(--ease);
  user-select: none;
}
.archetype__badge {
  margin-bottom: var(--s-8);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.archetype__ring {
  position: absolute;
  inset: -10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  transform: scale(0.85);
  opacity: 0;
  transition: all var(--dur-slow) var(--ease);
  pointer-events: none;
}
.archetype__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface-faint);
  opacity: 0.9;
  transition: all var(--dur-slow) var(--ease);
}
.archetype__profile {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: var(--s-3);
  display: block;
}
.archetype__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
  color: #fff;
  font-weight: 400;
}
.archetype__focus {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 40ch;
}

/* ── Expertise timeline ──────────────────────────────────────────────────
   The three layer cards were 48px-padded outlined boxes carrying paragraphs
   768px wide — 116 characters on a line, half again past the point where
   the eye reliably finds the next one. They are now hairline-separated rows
   on the section's own ground, with the copy capped at 66 characters. */

.expertise__head { margin-bottom: var(--s-9); max-width: 60ch; }
.expertise__inner > .expertise__head { text-align: left; }
.expertise__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-4);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  max-width: 16ch;
}
.expertise__tagline {
  color: var(--on-surface-faint);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--t-micro);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.expertise__head .rule--center { margin-inline: 0; }

.timeline { position: relative; }
.timeline__spine {
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-gold) 12%, var(--line-gold) 88%, transparent);
}
.timeline__items { display: flex; flex-direction: column; }
.layer { position: relative; }
.layer__marker {
  position: absolute;
  left: 0;
  top: calc(var(--s-7) + 4px);
  width: 12px;
  align-items: center;
  z-index: 20;
  display: flex;
}
.layer__num {
  position: absolute;
  left: 34px;
  top: -3px;
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
}
.layer__dash { display: none; }
.layer__node {
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  background: var(--ink-600);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow var(--dur-slow) var(--ease);
}
.layer__node::after { content: ""; width: 3px; height: 3px; border-radius: var(--r-full); background: var(--gold); }
.layer:hover .layer__node { box-shadow: 0 0 0 5px rgba(197, 160, 89, 0.12); }

.layer__card {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line-soft);
  transition: background-color var(--dur-slow) var(--ease);
  position: relative;
}
.layer:first-child .layer__card { border-top: 0; }
.layer__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-6); }
.layer__icon {
  color: var(--gold);
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  transition: all var(--dur-slow) var(--ease);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer__text { flex: 1 1 320px; }
.layer__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
  color: #fff;
  font-weight: 400;
}
.layer__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 66ch;
}
@media (min-width: 768px) {
  .layer__card { margin-left: 104px; }
}
@media (max-width: 767px) {
  .timeline__spine, .layer__marker { display: none; }
}

/* ── Global footprint ────────────────────────────────────────────────────
   Eight identical bordered cards in a grid was the most generic element on
   the page. The hubs are now an index — hairline rows, ordinal, place,
   status — which is how a firm that operates in eight jurisdictions would
   actually list them, and which reads as a register rather than as tiles. */

.global__map {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  color: var(--gold);
  z-index: 0;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 78%);
}
.global__map svg { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.global__map g[data-hub] { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.global__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s-8);
  gap: var(--s-7);
}
.global__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  max-width: 14ch;
}
.global__aside {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  max-width: 34ch;
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.global__aside p { font-style: italic; font-family: var(--serif); font-size: var(--t-body); }
.global__legend {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  font-style: normal;
}
.global__legenditem { display: flex; align-items: center; gap: var(--s-2); }

.global__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: var(--s-9);
  border-top: 1px solid var(--line);
}
.hub {
  cursor: default;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  position: relative;
  transition: padding-left var(--dur) var(--ease);
}
.hub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.hub:hover { padding-left: var(--s-3); }
.hub:hover::after { transform: scaleX(1); }
/* display:contents lifts the label and the tag out of their wrapper so all
   three cells sit on the row's own grid; each is then placed explicitly,
   because the source order (label, tag, name) is not the reading order. */
.hub__head { display: contents; }
.hub__label {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.hub__name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-h3);
  font-family: var(--serif);
  font-weight: 300;
  transition: color var(--dur) var(--ease);
  line-height: var(--lh-tight);
  color: var(--on-surface);
}
.hub__tag {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  white-space: nowrap;
}
.hub__bar { display: none; }

@media (max-width: 479px) {
  /* Three columns will not hold at 375px without the place name breaking.
     The status moves under the name rather than being truncated. */
  .hub { grid-template-columns: auto 1fr; row-gap: var(--s-1); }
  .hub__tag { grid-column: 2; grid-row: 2; justify-self: start; }
}

.hub--neutral .hub__tag { color: var(--gold-text); }
.hub--neutral::after { background: var(--gold); }
.hub--neutral:hover .hub__name { color: var(--gold-text); }

.hub--alliance .hub__tag { color: var(--alliance-text); }
.hub--alliance::after { background: var(--alliance); }
.hub--alliance:hover .hub__name { color: var(--alliance-text); }

/* ── The Book ────────────────────────────────────────────────────────── */

.book__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
@media (min-width: 900px) {
  .book__inner--split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--s-8), 7vw, 112px); }

  /* Same problem, same answer: with no cover the pitch splits into a stated
     half and a supporting half, so the section still occupies the page. */
  .book__inner:not(.book__inner--split) > .reveal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-8), 6vw, 104px);
    align-items: start;
  }
  .book__inner:not(.book__inner--split) .eyebrow      { grid-column: 1; grid-row: 1; }
  .book__inner:not(.book__inner--split) .book__title  { grid-column: 1; grid-row: 2; }
  .book__inner:not(.book__inner--split) .book__lead   { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .book__inner:not(.book__inner--split) .book__features { grid-column: 2; grid-row: 1 / span 2; margin-bottom: var(--s-6); align-self: end; }
  .book__inner:not(.book__inner--split) .authorcard   { grid-column: 2; grid-row: 3; margin-bottom: var(--s-6); }
  .book__inner:not(.book__inner--split) .btn-wipe     { grid-column: 2; grid-row: 4; justify-self: start; }
}
.book__coverwrap { position: relative; perspective: 1600px; }
.book__glow {
  position: absolute;
  inset: -6%;
  background: radial-gradient(ellipse at 50% 60%, rgba(197, 160, 89, 0.16), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}
.book__stage {
  position: relative;
  aspect-ratio: 3 / 4.2;
  max-width: 360px;
  margin-inline: auto;
  transform-style: preserve-3d;
}
.book__cover {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotateY(-6deg) rotateX(1.5deg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  background: var(--ink-700);
}
.book__cover:hover {
  transform: rotateY(-1deg) rotateX(0deg) translateY(-8px);
  box-shadow: 0 8px 16px rgba(19, 18, 16, 0.1), 0 50px 90px -30px rgba(19, 18, 16, 0.4);
}
/* Board thickness, plus a light sweep across the face — the two cues that
   make a flat rectangle read as a physical object. */
.book__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(13, 12, 10, 0.55), rgba(197, 160, 89, 0.35) 60%, rgba(13, 12, 10, 0.25));
  z-index: 20;
}
.book__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 15;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.16) 46%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.book__cover:hover::after { opacity: 1; }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }

.book__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-5);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  font-weight: 300;
  max-width: 15ch;
}
.book__lead {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--on-surface-muted);
  margin-bottom: var(--s-7);
  line-height: var(--lh-lead);
  max-width: 50ch;
}
/* Sentence case on a hairline grid. Set as 12px bold uppercase with 0.18em
   tracking, four short phrases read as system labels rather than as the
   contents of a book. */
.book__features {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
  max-width: 46ch;
}
.book__features li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface-muted);
}
.book__tick {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-gold);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.book__features li:hover .book__tick { background: var(--gold); border-color: var(--gold); color: var(--paper-000); }
.book__features span { transition: color var(--dur) var(--ease); }

.authorcard {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  max-width: 46ch;
}
.authorcard__avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  overflow: hidden;
  filter: grayscale(1);
  transition: filter var(--dur-image) var(--ease);
  flex-shrink: 0;
}
.authorcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.authorcard__label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  margin-bottom: var(--s-1);
}
.authorcard__quote {
  font-size: var(--t-body);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--on-surface);
  line-height: var(--lh-lead);
}

/* The primary call to action. The ink wipes in from the left on a scale
   transform rather than an animated width, so it composites on the GPU. */
.btn-wipe {
  position: relative;
  padding: var(--s-5) var(--s-7);
  overflow: hidden;
  border: 1px solid var(--ink-800);
  background: transparent;
  color: var(--ink-800);
  font-weight: 600;
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  min-height: 52px;
}
.btn-wipe__ink {
  position: absolute;
  inset: 0;
  background: var(--ink-800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
  display: block;
  z-index: 0;
}
.btn-wipe__label {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  transition: color var(--dur-slow) var(--ease);
}
.btn-wipe:hover .btn-wipe__label svg { transform: translateX(4px); }
.btn-wipe__label svg { transition: transform var(--dur) var(--ease); }

/* ── The Briefing ────────────────────────────────────────────────────── */

.insights__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--s-8);
  gap: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.insights__title {
  font-size: var(--t-h1);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  font-weight: 300;
}
.insights__aside { text-align: right; max-width: 34ch; }
.insights__aside p {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  font-style: italic;
  font-family: var(--serif);
  margin-bottom: var(--s-4);
}
.insights__all {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--gold-text);
  min-height: 44px;
  transition: gap var(--dur) var(--ease);
}
.insights__aside .insights__all { justify-content: flex-end; margin-left: auto; }
.insights__all:hover { gap: var(--s-3); }
/* Two columns, stated rather than derived from a minimum width.

   `auto-fit` with a 280px floor resolved to four columns at the 1200px shell,
   so the six briefings laid out 4 + 2 — and the two empty cells in the second
   row painted the container background as a solid rectangle, which is the
   beige block that was showing under the grid. The background is only meant
   to be seen through the 1px gaps, as hairlines.

   Four columns also cost the headlines their meaning: at 299px a card clamped
   "The Paper Passport Is Already Dead. I Don't Need to Invent the Date — It's
   in the Court Records." down to "...I Don't Need to Invent the…". Two columns
   fit six pieces exactly and give the titles room to finish. */
.insights__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
}

/* An odd number of pieces would leave one cell empty, and an empty cell is
   exactly how the beige rectangle happened. The last one spans the row
   instead, so the band closes cleanly at five, six or seven briefings rather
   than only at even counts. In the single-column layout below 900px this
   resolves to the full width and changes nothing. */
.insights__grid > .article:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* With nothing to list, the header's bottom rule is a grid line with no grid.
   The band closes itself instead: rules top and bottom, no dangling edge. */
.insights__inner--bare {
  border-block: 1px solid var(--line);
  padding-block: var(--s-7);
}
.insights__inner--bare .insights__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  align-items: center;
}
.article {
  padding: var(--pad-panel) var(--pad-card) var(--pad-card);
  /* Lifts towards white rather than being outlined — the same reason the
     archetype panels lift towards light on the dark sections. */
  background: var(--paper-000);
  transition: background-color var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: var(--on-surface);
}
/* The hover cue is the gold rule drawing across the top, the title taking
   the accent and the access line rising into place. A background change on
   top of those would be a fourth signal for one gesture. */
.article:hover .article__title { color: var(--gold-text); }
.article__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  gap: var(--s-3);
}
.article__date {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.article__class {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  font-weight: 500;
  color: var(--on-surface-faint);
  white-space: nowrap;
}
.article__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
  font-weight: 400;
  transition: color var(--dur) var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article__snippet {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article__access {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold-text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ── Pedigree ────────────────────────────────────────────────────────── */

.pedigree__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
}
@media (min-width: 900px) {
  .pedigree__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--s-8), 6vw, 104px); }
}
.pedigree__col--center { display: flex; flex-direction: column; justify-content: center; }
.pedigree__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-8);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  font-weight: 300;
  max-width: 12ch;
}
.pedigree__blocks { display: flex; flex-direction: column; gap: var(--s-8); }
.pedigree__blocktitle {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-text);
  margin-bottom: var(--s-5);
  font-weight: 600;
}
.pedigree__entry { display: flex; flex-direction: column; gap: var(--s-3); }
.pedigree__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--s-3);
  gap: var(--s-4);
  transition: border-color var(--dur-slow) var(--ease);
}
.pedigree__entry:hover .pedigree__row { border-color: var(--line-gold); }
.pedigree__role { font-size: var(--t-h3); font-family: var(--serif); font-weight: 300; color: #fff; }
.pedigree__meta {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--gold-text);
  font-family: var(--mono);
  white-space: nowrap;
}
.pedigree__meta--dim { color: var(--on-surface-faint); }
.pedigree__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  max-width: 58ch;
}
.pedigree__schools { display: flex; flex-direction: column; gap: var(--s-5); }
.pedigree__school {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  border-left: 1px solid var(--line);
  padding-left: var(--s-5);
  transition: border-color var(--dur-slow) var(--ease);
}
.pedigree__school:hover { border-color: var(--gold); }
.pedigree__uni { font-size: var(--t-h3); font-family: var(--serif); font-weight: 300; color: #fff; line-height: var(--lh-tight); }
.pedigree__degree {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--on-surface-faint);
  font-weight: 500;
}

/* The one genuinely raised surface on the page, and the only place a heavy
   shadow is justified: it is a plate, and it should look set into the page. */
.designations {
  padding: var(--pad-panel);
  background: var(--ink-900);
  border: 1px solid var(--line-gold);
  position: relative;
  box-shadow: var(--shadow-lg);
}
.designations__title {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--gold);
  margin-bottom: var(--s-5);
}
.designations__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.designations__list li {
  font-size: var(--t-small);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--on-surface-muted);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.designations__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.designations__bullet {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* ── Pull quote ──────────────────────────────────────────────────────────
   The page's one moment of pure breath, and the only section that is
   centred — which is what makes centring mean something here. */

.pullquote__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.pullquote__bg span {
  font-size: 22vw;
  font-family: var(--serif);
  font-weight: 300;
  color: rgba(19, 18, 16, 0.035);
  user-select: none;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -0.03em;
}
.pullquote__inner { max-width: var(--shell-narrow); }
.pullquote__mark {
  color: var(--gold);
  margin-bottom: var(--s-7);
  display: flex;
  justify-content: center;
  opacity: 0.5;
}
.pullquote__mark svg { width: 32px; height: 32px; }
.pullquote__text {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  font-family: var(--serif);
  line-height: 1.18;
  letter-spacing: var(--track-snug);
  font-style: italic;
  font-weight: 300;
  position: relative;
  z-index: 10;
  margin: 0;
  color: var(--on-surface);
  text-wrap: balance;
}
.pullquote__attr {
  margin-top: var(--s-7);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  color: var(--on-surface-faint);
}

/* ── Vindication ─────────────────────────────────────────────────────── */

.vindication__inner { max-width: var(--shell); }
.vindication__ghost {
  position: absolute;
  left: -0.06em;
  top: -0.28em;
  font-size: clamp(120px, 16vw, 210px);
  font-family: var(--serif);
  font-weight: 300;
  color: rgba(19, 18, 16, 0.04);
  user-select: none;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
  line-height: 1;
}
.vindication__content { position: relative; z-index: 10; }
.vindication__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-8);
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  color: var(--on-surface);
  font-weight: 300;
  max-width: 16ch;
}
.vindication__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .vindication__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
}
.vindication__copy {
  font-size: var(--t-lead);
  color: var(--on-surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  font-weight: 300;
  font-family: var(--serif);
  line-height: var(--lh-lead);
  max-width: 56ch;
}
.vindication__p2 { font-size: var(--t-small); color: var(--on-surface-muted); font-family: var(--sans); line-height: var(--lh-body); }
.vindication__pull {
  padding-top: var(--s-6);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.vindication__quote {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-text);
  line-height: var(--lh-lead);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-gold);
  margin: 0;
}
.vindication__source {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  /* Explicit colour rather than opacity: this sits inside .vindication__copy,
     whose own alpha would compound and fail AA. */
  color: rgba(19, 18, 16, 0.7);
  font-weight: 500;
  padding-left: var(--s-5);
}

.dossier { position: relative; }
.dossier__glow {
  position: absolute;
  inset: -5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(197, 160, 89, 0.12), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.dossier__card {
  background: var(--paper-000);
  padding: var(--pad-panel);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  transform: rotate(0.6deg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.dossier__card:hover { transform: rotate(0deg); }
.dossier__inner-rule {
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-gold);
  opacity: 0.5;
  pointer-events: none;
}
.dossier__corner {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 70%, rgba(197, 160, 89, 0.1), transparent 70%);
  pointer-events: none;
}
.dossier__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--s-5);
  position: relative;
  z-index: 10;
}
.dossier__court {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--s-1);
}
.dossier__courtsub { font-size: var(--t-small); font-family: var(--serif); font-style: italic; color: var(--on-surface-faint); }
.dossier__refs {
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--on-surface-faint);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.dossier__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-family: var(--serif);
  font-size: var(--t-body);
  color: var(--on-surface);
  line-height: var(--lh-lead);
  margin-bottom: var(--s-6);
  position: relative;
  z-index: 10;
}
.dossier__veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to top, var(--paper-000), rgba(253, 252, 250, 0.5), transparent);
  z-index: 10;
  pointer-events: none;
}
.dossier__line1 { font-style: italic; color: var(--on-surface-muted); }
.dossier__line2 { padding-top: var(--s-3); font-weight: 400; color: var(--on-surface); font-family: var(--serif); }
.dossier__redaction { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-1); }
.dossier__redaction span { height: 11px; background: rgba(19, 18, 16, 0.06); display: block; }
.dossier__stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg);
  z-index: 20;
  pointer-events: none;
  user-select: none;
}
.dossier__stamp span {
  display: block;
  border: 2px double rgba(197, 160, 89, 0.75);
  color: rgba(197, 160, 89, 0.75);
  padding: var(--s-3) var(--s-6);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}
.dossier__foot { display: flex; justify-content: flex-end; margin-top: var(--s-5); position: relative; z-index: 20; }
.dossier__foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  color: var(--on-surface-faint);
  min-height: 44px;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.dossier__foot a:hover { color: var(--gold-text); gap: var(--s-4); }

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact__head { margin-bottom: var(--s-9); max-width: 30ch; }
.contact__title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-5);
  font-style: italic;
  font-weight: 300;
  letter-spacing: var(--track-tight);
}
.contact__lead {
  font-size: var(--t-lead);
  font-family: var(--serif);
  font-weight: 300;
  color: var(--on-surface-muted);
  max-width: 44ch;
  line-height: var(--lh-lead);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: stretch;
  margin-bottom: var(--s-10);
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
}

.advisory {
  background: linear-gradient(160deg, rgba(246, 243, 238, 0.055), rgba(246, 243, 238, 0.015));
  border: 1px solid var(--line);
  padding: var(--pad-panel);
  transition: border-color var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.advisory:hover { border-color: var(--line-gold); }
.advisory__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); gap: var(--s-4); }
.advisory__eyebrow {
  color: var(--gold-text);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}
.advisory__title { font-size: var(--t-h2); margin-bottom: var(--s-4); font-weight: 300; }
.advisory__desc {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--s-6);
  max-width: 46ch;
}
.advisory__features {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  border-top: 1px solid var(--line-soft);
}
.advisory__features li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.advisory__features li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
/* Same size and colour as the description it qualifies (9.4:1 on --ink-900),
   not a shrunken footnote under it. */
.advisory__caveat {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--on-surface-muted);
  margin: 0 0 var(--s-6);
  max-width: 46ch;
}
.advisory__cta {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-100);
  color: var(--ink-900);
  min-height: 56px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.advisory__cta:hover { background: var(--gold); }
.advisory__cta svg { transition: transform var(--dur) var(--ease); }
.advisory__cta:hover svg { transform: translateX(4px); }
.advisory__cta span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }

.channels { display: flex; flex-direction: column; gap: var(--s-8); justify-content: center; }
.channels__block { display: flex; flex-direction: column; gap: var(--s-4); }
.channels__label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
  font-family: var(--sans);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.channels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); }
.channel {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  transition: color var(--dur) var(--ease);
  min-height: 48px;
  color: var(--on-surface-muted);
}
.channel:hover { color: var(--gold); }
.channel__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.channel--lg .channel__icon { width: 48px; height: 48px; }
.channel__name {
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.channel--lg .channel__name { font-size: var(--t-body); }

.sitefoot {
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.sitefoot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  gap: var(--s-4);
}
.sitefoot__row a { color: var(--on-surface-muted); transition: color var(--dur) var(--ease); position: relative; }
.sitefoot__row a:hover { color: var(--gold); }
/* The privacy link sits mid-sentence, so it cannot be given a 44px box
   without breaking the line. The hit area is extended instead — WCAG 2.5.5
   is about the target, not the ink. */
.sitefoot__row a::after { content: ""; position: absolute; inset: -13px -8px; }
.sitefoot__disclaimer {
  max-width: 78ch;
  font-size: var(--t-micro);
  color: rgba(246, 243, 238, 0.5);
  line-height: 1.75;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Back to top ─────────────────────────────────────────────────────── */

.totop {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: 50;
  width: 48px;
  height: 48px;
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--paper-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--dur) var(--ease) both;
}
.totop[hidden] { display: none; }
.totop:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-900); }
.totop svg { transition: transform var(--dur) var(--ease); }
.totop:hover svg { transform: translateY(-2px); }

/* ── Waitlist modal ──────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fadeIn var(--dur) var(--ease) both;
}
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: var(--paper-000);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  box-shadow: var(--shadow-lg);
  border-top: 2px solid var(--gold);
  max-height: 90vh;
  overflow-y: auto;
  animation: revealUp var(--dur-slow) var(--ease) both;
}
.modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  color: var(--on-surface-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2);
}
.modal__close:hover { color: var(--gold-text); }
.modal__close span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }

.quiz[hidden], .enrol[hidden], .done[hidden] { display: none; }

.quiz__head { margin-bottom: var(--s-7); }
.quiz__headrow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-4); gap: var(--s-4); }
.quiz__labels { display: flex; flex-direction: column; gap: var(--s-1); }
.quiz__audit { color: var(--gold-text); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; }
.quiz__protocol {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  color: var(--on-surface-faint);
  font-family: var(--mono);
}
.quiz__step { font-size: var(--t-micro); font-family: var(--mono); color: var(--on-surface-faint); white-space: nowrap; }
.quiz__track { height: 2px; width: 100%; background: var(--line-soft); position: relative; overflow: hidden; }
.quiz__bar { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); transition: width var(--dur) var(--ease); width: 0; }
.quiz__q { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-bottom: var(--s-6); line-height: var(--lh-tight); font-weight: 300; }
.quiz__options { display: flex; flex-direction: column; gap: var(--s-2); }
.quiz__options button {
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  background: transparent;
  transition: all var(--dur) var(--ease);
  font-size: var(--t-small);
  font-weight: 400;
  cursor: pointer;
  color: var(--on-surface);
  min-height: 52px;
  position: relative;
}
.quiz__options button:hover {
  border-color: var(--gold);
  background: rgba(197, 160, 89, 0.06);
  padding-left: var(--s-6);
}
.quiz__skip {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-3);
}
.quiz__skip button {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--on-surface-faint);
  font-weight: 600;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  min-height: 44px;
}
.quiz__skip button:hover { color: var(--gold-text); }

.enrol__eyebrow {
  color: var(--gold-text);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
  margin-bottom: var(--s-3);
  display: block;
}
.enrol__title { font-size: var(--t-h2); margin-bottom: var(--s-5); line-height: var(--lh-tight); font-weight: 300; }
.enrol__score {
  padding: var(--s-5);
  background: var(--paper-200);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-left: 2px solid var(--gold);
}
.enrol__scorelabel { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 600; color: var(--on-surface-muted); }
.enrol__scorevalue { font-size: var(--t-h4); font-family: var(--serif); font-weight: 400; text-align: right; }
/* Directly under the verdict, not muted and not shrunk into the smallest step
   on the scale: a qualification the reader has to squint at is not one. */
.enrol__caveat { font-size: var(--t-small); line-height: var(--lh-body); margin: 0 0 var(--s-6); }
.enrol__lead { font-size: var(--t-small); color: var(--on-surface-muted); margin-bottom: var(--s-6); line-height: var(--lh-body); }
.enrol__form { display: flex; flex-direction: column; gap: var(--s-5); }
.enrol__error {
  padding: var(--s-4);
  background: rgba(239, 68, 68, 0.08);
  border-left: 2px solid var(--danger);
  color: #b91c1c;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 600;
}
.enrol__error[hidden] { display: none; }
.enrol__field { display: flex; flex-direction: column; gap: var(--s-2); }
.enrol__label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--on-surface-faint); font-weight: 600; }
.enrol__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  outline: none;
  transition: border-color var(--dur) var(--ease);
  font-size: var(--t-body);
  font-family: var(--sans);
  color: var(--on-surface);
  border-radius: 0;
  min-height: 44px;
}
/* A placeholder is text, and the same 4.5:1 floor applies to it. */
.enrol__input::placeholder { color: var(--on-surface-faint); }
.enrol__input:focus { border-bottom-color: var(--gold); border-bottom-width: 2px; padding-bottom: calc(var(--s-3) - 1px); }
.enrol__submit {
  width: 100%;
  padding: var(--s-5);
  background: var(--ink-800);
  color: var(--paper-100);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  font-weight: 600;
  transition: background-color var(--dur) var(--ease);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 56px;
}
.enrol__submit:hover { background: var(--gold); color: var(--ink-900); }
.enrol__submitlabel { display: flex; align-items: center; gap: var(--s-3); }
.enrol__submit svg { transition: transform var(--dur) var(--ease); }
.enrol__submit:hover svg { transform: translateX(4px); }
.enrol__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(246, 243, 238, 0.3);
  border-top-color: var(--paper-100);
  border-radius: var(--r-full);
  animation: ocSpin 0.8s linear infinite;
}
.enrol__submit.is-loading { opacity: 0.6; cursor: default; }
.enrol__submit.is-loading .enrol__spinner { display: block; }
.enrol__submit.is-loading .enrol__submitlabel { display: none; }
.enrol__privacy {
  font-size: var(--t-micro);
  line-height: 1.65;
  color: var(--on-surface-faint);
  margin: calc(var(--s-2) * -1) 0 0;
}
.enrol__privacy a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }

.done { text-align: center; padding: var(--s-7) 0; }
.done__check {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-full);
  color: var(--gold-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-6);
}
.done__title { font-size: var(--t-h2); margin-bottom: var(--s-3); font-style: italic; font-weight: 300; }
.done__text {
  font-size: var(--t-small);
  color: var(--on-surface-muted);
  line-height: var(--lh-body);
  text-transform: none;
  letter-spacing: 0;
  max-width: 42ch;
  margin-inline: auto;
}

/* ── Narrow-viewport trims ───────────────────────────────────────────────
   Mobile is not the desktop layout compressed. The gutter, the section
   rhythm and the type scale are all fluid, so what is left here is the
   handful of places where the arrangement itself has to change. */

@media (max-width: 899px) {
  /* 900px is this sheet's desktop boundary. Below it two columns would put the
     headlines back where four columns had them. */
  .insights__grid { grid-template-columns: 1fr; }
  .insights__aside { text-align: left; max-width: 100%; }
  .insights__aside .insights__all { justify-content: flex-start; margin-left: 0; }
  .insights__head { align-items: flex-start; }
  .global__head { align-items: flex-start; }
  .global__aside { max-width: 100%; }
}

@media (max-width: 767px) {
  .archetypes__grid, .insights__grid { gap: 1px; }
  .global__grid { column-gap: 0; }
  .vindication__ghost { font-size: clamp(96px, 26vw, 150px); }
  .dossier__card { transform: none; }
  .dossier__stamp span { letter-spacing: 0.16em; padding: var(--s-2) var(--s-4); }
  .totop { bottom: var(--s-4); right: var(--s-4); width: 44px; height: 44px; }
  .contact__grid { margin-bottom: var(--s-8); }
  .manifesto { padding-left: var(--s-5); }
  .dropcap { font-size: 3.4em; }
  .hero__watermark span { font-size: 86vw; }
}

/* ── Print ───────────────────────────────────────────────────────────────
   A credentials page gets printed and PDF'd. Drop the chrome, flatten the
   dark sections to ink-on-white, and expose link targets. */

@media print {
  .nav, .mobilemenu, .scroll-progress, .totop, .modal, .preloader,
  .hero__bg, .hero__watermark, .hero__chevron, .hero__location,
  .global__map, .orb, .pullquote__bg, .vindication__ghost,
  .dossier__redaction, .dossier__veil, .book__glow, .dossier__glow,
  .credstrip__glow, .heritage__spine, .portrait__halo { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  .hero, .credstrip, .archetypes, .expertise, .pedigree, .contact,
  .designations, .heritage, .philosophy, .global, .book, .insights,
  .vindication, .pullquote, .archetype, .article {
    background: #fff !important;
    color: #000 !important;
    padding: 18pt 0 !important;
    border-color: #ccc !important;
  }

  .archetypes::before, .archetypes::after, .pedigree::before, .pedigree::after,
  .contact::before, .contact::after, .philosophy::after, .insights::after,
  .book::after { display: none !important; }

  .hero { min-height: 0 !important; page-break-after: avoid; }
  .hero__title, .hero__subtitle, .hero__tagline { color: #000 !important; }
  .hero__scrim { display: none !important; }

  * { box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  .reveal { opacity: 1 !important; animation: none !important; }

  [class*="__desc"], [class*="__lead"], [class*="__intro"], [class*="__snippet"],
  [class*="__meta"], [class*="__degree"], p, li, span, div { opacity: 1 !important; }
  .eyebrow, .gold, em.gold, .dropcap, .vindication__quote,
  .authorcard__label, .designations__title { color: #6b4f1d !important; }

  section, .manifesto, .archetype, .layer, .dossier__card { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Print the destination of real links, but not of in-page anchors. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="#"]::after { content: ""; }

  @page { margin: 16mm; }
}

/* ── Legal documents ─────────────────────────────────────────────────────
   Deliberately plain. A privacy notice that is hard to read is a privacy
   notice nobody reads — but plain is not the same as unconsidered, so it
   still uses the document's measure, scale and rhythm. */

.legal {
  background: var(--paper-100);
  color: var(--ink-800);
  padding: calc(var(--nav-h) + var(--s-9)) var(--gutter) var(--s-9);
}
.legal__inner { max-width: 74ch; }
.legal__title {
  font-size: var(--t-h1);
  font-weight: 300;
  line-height: var(--lh-title);
  letter-spacing: var(--track-tight);
  margin: var(--s-2) 0 var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.legal__body { font-size: var(--t-body); line-height: 1.8; color: var(--on-surface-muted); }
.legal__body h2 {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--gold-text);
  margin: var(--s-8) 0 var(--s-4);
}
.legal__body p { margin-bottom: var(--s-4); max-width: var(--measure); }
.legal__body ul, .legal__body ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); max-width: var(--measure); }
.legal__body li { margin-bottom: var(--s-3); }
.legal__body a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--paper-200);
  padding: 2px 6px;
}
.legal__back {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}
.legal__back a { color: var(--on-surface-faint); transition: color var(--dur) var(--ease); display: inline-flex; min-height: 44px; align-items: center; }
.legal__back a:hover { color: var(--gold-text); }

/* The unsubscribe confirmation. Borrows the enrolment button's treatment but
   not its width: the modal button fills a narrow column, and stretched across
   a 74ch document the same rule reads as a banner rather than a control. */
.legal__form { margin-top: var(--s-6); }
.legal__submit {
  padding: var(--s-4) var(--s-7);
  background: var(--ink-800);
  color: var(--paper-100);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  font-weight: 600;
  transition: background-color var(--dur) var(--ease);
  border: none;
  cursor: pointer;
  min-height: 56px;
}
.legal__submit:hover { background: var(--gold); color: var(--ink-900); }

/* The legal pages carry no mobile menu, so the language bar is the only way
   to switch there. u-md-up would hide it below 768px and strand a phone
   visitor on whichever language they happened to land in. */
.langbar--always { display: flex; }
@media (max-width: 420px) {
  .langbar--always a { padding: 6px 6px; }
}