/* ==========================================================================
   CLAVES HOUSE — site.css
   Shared design system: tokens, reset, typography, header, footer, components.
   Cinema-layer styles live in cinema.css. Token-based so the licensed
   Noe Display / Söhne pair can replace the provisional Fraunces / Hanken
   Grotesk fallbacks by editing two tokens only.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */

:root {
  /* Palette (V8 visual constitution) */
  --ink:        #17110d;
  --black:      #0c0907;
  --espresso:   #22150f;
  --bone:       #f7f1e6;
  --paper:      #efe5d5;
  --gold:       #a9823e;
  --gold-deep:  #765522;
  --burgundy:   #5b1f1b;
  --serpentine: #24372e;

  /* Functional roles */
  --bg-dark:    var(--black);
  --bg-deep:    var(--ink);
  --bg-panel:   var(--espresso);
  --bg-light:   var(--bone);
  --bg-light-2: var(--paper);
  --text-dark:  #efe7d8;            /* primary text on dark  (contrast ≥ 12:1 on --black) */
  --text-dark-dim: #b9ac97;         /* secondary text on dark (contrast ≈ 7:1) */
  --text-light: var(--ink);         /* primary text on ivory */
  --text-light-dim: #5b4f41;        /* secondary text on ivory (contrast ≈ 7:1) */
  --line-dark:  rgba(239, 231, 216, 0.16);
  --line-light: rgba(23, 17, 13, 0.16);
  --accent:     var(--gold);
  --accent-ink: var(--gold-deep);   /* gold text on ivory (contrast ≈ 5.9:1) */

  /* Typography — Canela (display) + Graphik (body), vendored.
     NOTE: the uploaded cuts are 75-glyph trial subsets; £, é, —, … fall
     through to the Fraunces / Hanken fallbacks until the full licensed
     Commercial Type webfonts replace the files. Same family names, so the
     swap is a file replacement only. */
  --font-display: "Canela", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Graphik", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --wrap: 1480px;
  --gutter: clamp(20px, 4.5vw, 54px);
  --measure: 46rem;
  --header-h: 76px;

  /* Rhythm */
  --space-section: clamp(96px, 14vw, 200px);
  --space-block: clamp(48px, 7vw, 96px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Fonts (bundled; latin subset) ---------- */

/* Canela — display serif (Light 300 · Regular 400 · Medium 500) */
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-light-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-regular-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-medium-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}

/* Graphik — body grotesque (Regular 400 · Medium 500 · Semibold 600) */
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-regular-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-medium-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/graphik-semibold-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}

/* Fallbacks (also serve the glyphs outside the trial subsets) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  font-optical-sizing: auto;
  unicode-range: U+0000-00FF, U+2010-205F, U+20AC, U+2122;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  font-optical-sizing: auto;
  unicode-range: U+0000-00FF, U+2010-205F, U+20AC, U+2122;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-205F, U+20AC, U+2122;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-205F, U+20AC, U+2122;
}

/* ---------- 3. Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior stays "auto" (the default): the film layer treats scroll
     position as its only clock, 1:1, with no smoothing or easing tails.
     A global "smooth" here fights that and breaks native hash-link jumps
     (skip link, in-page anchors) on pages with the film layer, because the
     browser's smooth-scroll animation gets interrupted by the resulting
     scroll events before it reaches the target. */
  background: var(--bg-dark);       /* overscroll matches the opening scene */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-color: rgba(169, 130, 62, 0.55); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold); color: var(--black); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 340;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 4. Utilities ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.on-light .eyebrow, .eyebrow.on-light { color: var(--accent-ink); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  padding: 12px 20px;
  background: var(--bone);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s var(--ease-soft);
}
.skip-link:focus-visible { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- 5. Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  height: var(--header-h);
  padding-inline: var(--gutter);
  color: var(--text-dark);
  transition: background-color 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft),
              color 0.45s var(--ease-soft);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line-dark);
  opacity: 0;
  transition: opacity 0.45s var(--ease-soft);
}
.site-header.is-solid {
  background: rgba(12, 9, 7, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header.is-solid::after { opacity: 1; }
/* Ivory pages ask for a dark header once the hero is passed */
.site-header.on-light { color: var(--text-light); }
.site-header.on-light.is-solid {
  background: rgba(247, 241, 230, 0.88);
}
.site-header.on-light::after { background: var(--line-light); }

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}
.wordmark .brand-key {
  display: block;
  width: 116px;
  height: auto;
  max-height: calc(var(--header-h) - 12px);
  object-fit: contain;
}
.site-footer .wordmark .brand-key { width: 180px; max-height: none; }
@media (max-width: 560px) {
  .site-header .wordmark .brand-key { width: 96px; }
}

.desktop-nav {
  display: flex;
  gap: clamp(14px, 2.2vw, 34px);
  margin-left: auto;
}
.desktop-nav a,
.header-enquire {
  position: relative;
  font-size: 0.8rem;
  font-weight: 520;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 6px;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease-soft);
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { opacity: 1; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-enquire {
  flex: none;
  border: 1px solid currentColor;
  padding: 9px 18px 10px;
  border-radius: 999px;
  opacity: 1;
  transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft),
              border-color 0.3s var(--ease-soft);
}
.header-enquire:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
}

/* Mobile menu — <details> based, JS manages focus/Escape/close-on-navigate */
.mobile-menu { display: none; margin-left: auto; }
.mobile-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 4px;
  cursor: pointer;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary .menu-bars {
  width: 22px; height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: transform 0.3s var(--ease-soft);
}
.mobile-menu[open] summary .menu-bars { transform: rotate(90deg); }
.mobile-menu nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--gutter);
  background: rgba(12, 9, 7, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 340;
  text-decoration: none;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu nav a:last-child { color: var(--accent); border-bottom: 0; }

@media (max-width: 1060px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .header-enquire { margin-left: auto; }
  .mobile-menu { margin-left: 0; }
}
@media (max-width: 560px) {
  .header-enquire span { display: none; }
  .header-enquire { padding: 8px 14px 9px; }
}
@media (max-width: 400px) {
  /* Logo + Enquire + Menu stop fitting the fixed header below ~400px
     (common small-phone widths: 375px, 360px) — the Menu trigger was
     overflowing past the viewport edge, making it unreachable. */
  .site-header { gap: 10px; padding-inline: 16px; }
  .wordmark small { display: none; }
  .wordmark { gap: 0.5em; font-size: 0.96rem; }
  .header-enquire { padding: 7px 12px 8px; font-size: 0.72rem; }
  .mobile-menu summary { padding: 10px 2px; gap: 7px; font-size: 0.72rem; }
}

/* Journey progress hairline (home only; JS-driven, inert without JS) */
.journey-progress {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 99;
  width: 2px;
  background: transparent;
  pointer-events: none;
  display: none;
}
.js .journey-progress { display: block; }
.journey-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--gold), rgba(169, 130, 62, 0.25));
  transform: scaleY(0);
  transform-origin: top;
}

/* ---------- 6. Footer ---------- */

.site-footer {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-top: 1px solid var(--line-dark);
  padding: clamp(64px, 9vw, 120px) 0 48px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.site-footer .footer-brand p {
  max-width: 30ch;
  color: var(--text-dark-dim);
  font-size: 0.95rem;
  margin-top: 18px;
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.site-footer nav ul { display: grid; gap: 10px; }
.site-footer nav a {
  text-decoration: none;
  color: var(--text-dark-dim);
  font-size: 0.95rem;
  transition: color 0.25s var(--ease-soft);
}
.site-footer nav a:hover { color: var(--text-dark); }
.site-footer .footer-legal {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-dark-dim);
}
.site-footer .footer-legal p { max-width: 72ch; }
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 7. Editorial sections ---------- */

.section { padding-block: var(--space-section); }
.section.dark { background: var(--bg-deep); color: var(--text-dark); }
.section.deepest { background: var(--bg-dark); color: var(--text-dark); }
.section.panel { background: var(--bg-panel); color: var(--text-dark); }
.section.light { background: var(--bg-light); color: var(--text-light); }
.section.light-2 { background: var(--bg-light-2); color: var(--text-light); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: var(--space-block);
  align-items: end;
}
.section-head .eyebrow { grid-column: 1 / 4; }
.section-head h2 {
  grid-column: 4 / 12;
  font-size: clamp(2.2rem, 4.6vw, 4.3rem);
}
.section-head.offset h2 { grid-column: 2 / 10; }
.section-head.offset .eyebrow { grid-column: 10 / 13; text-align: right; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .section-head .eyebrow,
  .section-head.offset .eyebrow { grid-column: 1 / -1; text-align: left; margin-bottom: 14px; }
  .section-head h2,
  .section-head.offset h2 { grid-column: 1 / -1; }
}

.lede {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
}
.lede em { font-style: italic; color: var(--accent); }
.on-light .lede em, .section.light .lede em, .section.light-2 .lede em { color: var(--accent-ink); }

.body-copy { color: var(--text-dark-dim); max-width: var(--measure); }
.body-copy p + p { margin-top: 1.2em; }
.section.light .body-copy, .section.light-2 .body-copy { color: var(--text-light-dim); }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.split > .split-a { grid-column: 1 / 6; }
.split > .split-b { grid-column: 7 / 13; }
.split > .split-wide { grid-column: 1 / 9; }
.split > .split-narrow { grid-column: 9 / 13; }
@media (max-width: 900px) {
  .split { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .split > * { grid-column: 1 / -1 !important; }
  .split > .split-a { margin-bottom: 24px; }
}

/* Statement — the commercial idea, set large */
.statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.statement .muted { color: var(--text-dark-dim); }
.section.light .statement .muted, .section.light-2 .statement .muted { color: var(--text-light-dim); }
.statement em { font-style: italic; color: var(--accent); }
.section.light .statement em, .section.light-2 .statement em { color: var(--accent-ink); }

/* ---------- 8. Links, buttons, lists ---------- */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 580;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid rgba(169, 130, 62, 0.4);
  padding-bottom: 8px;
  transition: border-color 0.3s var(--ease-soft), gap 0.3s var(--ease-soft);
}
.section.light .text-link, .section.light-2 .text-link { color: var(--accent-ink); }
.text-link:hover { border-color: currentColor; gap: 16px; }
.text-link .arrow { transition: transform 0.3s var(--ease-out); }
.text-link:hover .arrow { transform: translateX(4px); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--text-dark);
  font-size: 0.82rem;
  font-weight: 580;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.button:hover { background: var(--accent); color: var(--black); }
.button.solid { background: var(--accent); color: var(--black); }
.button.solid:hover { background: transparent; color: inherit; }
.section.light .button, .section.light-2 .button { color: var(--text-light); }
.section.light .button:hover, .section.light-2 .button:hover { color: var(--black); }

/* Offer rows — editorial list, not cards */
.offer-list { border-top: 1px solid var(--line-dark); }
.section.light .offer-list, .section.light-2 .offer-list { border-color: var(--line-light); }
.offer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.section.light .offer, .section.light-2 .offer { border-color: var(--line-light); }
.offer .offer-kind {
  grid-column: 1 / 3;
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.section.light .offer .offer-kind, .section.light-2 .offer .offer-kind { color: var(--text-light-dim); }
.offer .offer-main { grid-column: 3 / 9; }
.offer .offer-main h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-bottom: 6px;
}
.offer .offer-main h3 a { text-decoration: none; }
.offer .offer-main h3 a:hover { color: var(--accent); }
.section.light .offer .offer-main h3 a:hover { color: var(--accent-ink); }
.offer .offer-main .offer-desc {
  color: var(--text-dark-dim);
  font-size: 0.98rem;
  max-width: 56ch;
}
.section.light .offer .offer-desc, .section.light-2 .offer .offer-desc { color: var(--text-light-dim); }
.offer .offer-side {
  grid-column: 9 / 13;
  text-align: right;
  display: grid;
  gap: 12px;
  justify-items: end;
}
.offer .offer-fee {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent);
}
.section.light .offer .offer-fee, .section.light-2 .offer .offer-fee { color: var(--accent-ink); }
@media (max-width: 900px) {
  .offer { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .offer .offer-kind { grid-column: 1 / -1; }
  .offer .offer-main { grid-column: 1 / -1; }
  .offer .offer-side { grid-column: 1 / -1; text-align: left; justify-items: start; margin-top: 8px; }
}

.fee-note {
  font-size: 0.82rem;
  color: var(--text-dark-dim);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  max-width: 52ch;
}
.section.light .fee-note, .section.light-2 .fee-note { color: var(--text-light-dim); }

/* Numbered stage list (method) */
.stage-list { border-top: 1px solid var(--line-dark); counter-reset: stage; }
.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: clamp(24px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.stage .stage-no {
  grid-column: 1 / 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
}
.stage h3 { grid-column: 2 / 6; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.stage p { grid-column: 7 / 13; color: var(--text-dark-dim); font-size: 0.98rem; }
@media (max-width: 900px) {
  .stage { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stage .stage-no { grid-column: 1 / 2; }
  .stage h3 { grid-column: 2 / -1; }
  .stage p { grid-column: 2 / -1; margin-top: 6px; }
}

/* Definition rows (mandates: Context / Difficulty / Route / Outcome) */
.case-list { display: grid; gap: clamp(40px, 6vw, 72px); }
.case {
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(24px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.case > header { grid-column: 1 / 5; }
.case > header .case-note {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin-bottom: 14px;
}
.case > header h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.case .case-body { grid-column: 6 / 13; display: grid; gap: 20px; }
.case .case-body div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.case .case-body dt {
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.case .case-body dd { margin: 0; color: var(--text-dark-dim); }
@media (max-width: 900px) {
  .case > header { grid-column: 1 / -1; }
  .case .case-body { grid-column: 1 / -1; }
  .case .case-body div { grid-template-columns: 1fr; gap: 4px; }
}

/* Pull line — the quiet aphorisms */
.pull-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  color: var(--accent);
  max-width: 26ch;
}
.section.light .pull-line, .section.light-2 .pull-line { color: var(--accent-ink); }

/* Reveal-on-scroll (JS-gated; visible by default without JS) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Media figures */
.figure { position: relative; overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure .figure-caption {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-dark-dim);
}
.section.light .figure-caption, .section.light-2 .figure-caption { color: var(--text-light-dim); }
.figure.ratio-45 { aspect-ratio: 4 / 5; }
.figure.ratio-32 { aspect-ratio: 3 / 2; }
.figure.ratio-169 { aspect-ratio: 16 / 9; }

/* ---------- 9. Interior page hero ---------- */

.page-hero {
  padding: calc(var(--header-h) + clamp(64px, 10vw, 140px)) 0 var(--space-block);
  background: var(--bg-dark);
  color: var(--text-dark);
  position: relative;
  overflow: clip;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  max-width: 14ch;
  margin-top: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-hero .lede { margin-top: 28px; max-width: 34ch; color: var(--text-dark-dim); }
.page-hero .hero-media {
  margin-top: var(--space-block);
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. Founders ---------- */

.founder-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.founder-photo { grid-column: 1 / 6; }
.founder-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder-photo figcaption {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dark-dim);
}
.founder-cards { grid-column: 7 / 13; display: grid; gap: clamp(32px, 4vw, 56px); }
.founder-card { border-top: 1px solid var(--line-dark); padding-top: 24px; }
.founder-card .founder-role {
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-card h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 12px 0 4px; }
.founder-card .founder-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.founder-card p { color: var(--text-dark-dim); font-size: 0.98rem; }
.founder-card p + p { margin-top: 1em; }
@media (max-width: 900px) {
  .founder-photo { grid-column: 1 / -1; max-width: 420px; }
  .founder-cards { grid-column: 1 / -1; }
}

/* Legal hub */
.legal-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin-top: 20px; }
.legal-meta {
  margin-top: 18px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.legal-doc { padding-top: 0; }
.todo-slot {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed rgba(169, 130, 62, 0.7);
  border-radius: 3px;
  color: var(--accent);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  background: rgba(169, 130, 62, 0.08);
}

/* Footer compliance link row */
.footer-compliance {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.75rem;
}
.footer-compliance a {
  color: var(--text-dark-dim);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.25s var(--ease-soft);
}
.footer-compliance a:hover { color: var(--accent); }

/* Letter questions (enquire v3) */
.letter-question { margin-top: 2.1em; }
.letter-q-label {
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.letter-q-label span { color: var(--text-dark-dim); }

/* The sticky rail */
.rail-sticky {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 26px;
  border-left: 1px solid var(--line-dark);
  padding-left: clamp(20px, 2.6vw, 36px);
}
@media (max-width: 1000px) {
  .rail-sticky { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 28px; }
}
.rail-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.35;
  color: var(--text-dark);
  margin: 0;
  transition: color 0.4s var(--ease-soft);
}
.rail-sub { color: var(--text-dark-dim); font-size: 0.92rem; margin: 0; }
.rail-strong { color: var(--accent); }
.rail-founders { display: grid; gap: 14px; border-top: 1px solid var(--line-dark); padding-top: 22px; }
.rail-founders p { margin: 0; display: grid; gap: 2px; }
.rail-founders strong { font-weight: 560; font-size: 0.95rem; }
.rail-founders span { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dark-dim); }
.rail-label {
  font-size: 0.66rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.rail-discretion p, .rail-direct p { margin: 0; }
.rail-discretion { border-top: 1px solid var(--line-dark); padding-top: 22px; color: var(--text-dark-dim); font-size: 0.88rem; }
.rail-direct { border-top: 1px solid var(--line-dark); padding-top: 22px; }

/* Operational success */
.form-success .success-key {
  display: block;
  width: clamp(100px, 14vw, 160px);
  height: auto;
  margin-bottom: 18px;
  opacity: 0.95;
}
.form-success .success-ref {
  margin-top: 22px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Voice note (One Brief) */
.voice { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.voice-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-dark-dim);
  margin: 0;
}
.voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 11px;
  border: 1px solid rgba(169, 130, 62, 0.5);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 580;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.voice-btn:hover { background: rgba(169, 130, 62, 0.12); }
.voice-btn.is-recording { background: var(--accent); color: var(--black); border-color: var(--accent); }
.voice-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.voice-btn.is-recording .voice-dot { animation: voice-pulse 1.1s ease-in-out infinite; }
@keyframes voice-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .voice-btn.is-recording .voice-dot { animation: none; } }
.voice-state { font-size: 0.85rem; color: var(--text-dark-dim); }
.voice audio { width: 100%; margin-top: 8px; }

/* Proof ledger (The House Proves Itself) */
.proof-ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
}
.proof-ledger article { border-top: 1px solid var(--line-dark); padding-top: 22px; }
.proof-ledger h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 10px; }
.proof-ledger p { color: var(--text-dark-dim); font-size: 0.96rem; }
.proof-ledger .proof-link { margin-top: 14px; }
@media (max-width: 760px) { .proof-ledger { grid-template-columns: 1fr; } }

/* Two Keys — named founder custody */
.two-keys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(28px, 4vw, 44px);
  margin-top: clamp(24px, 3vw, 40px);
}
.section.light .two-keys-grid, .section.light-2 .two-keys-grid { border-color: var(--line-light); }
.two-keys-grid h3 { margin: 10px 0 10px; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.two-keys-grid p { color: var(--text-dark-dim); font-size: 0.98rem; }
.section.light .two-keys-grid p, .section.light-2 .two-keys-grid p { color: var(--text-light-dim); }
@media (max-width: 700px) { .two-keys-grid { grid-template-columns: 1fr; } }

/* The Physical Key */
.the-key .key-figure img { width: min(100%, 340px); height: auto; opacity: 0.94; }
.the-key .key-figure figcaption {
  margin-top: 14px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-dark-dim);
}

/* Notes from the House — essay blocks */
.note-list { display: grid; gap: clamp(56px, 8vw, 110px); }
.note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(28px, 4vw, 48px);
}
.note .note-head { grid-column: 1 / 6; }
.note .note-head h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.note .note-standfirst {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--accent);
}
.note .note-body { grid-column: 7 / 13; color: var(--text-dark-dim); max-width: var(--measure); }
.note .note-body p + p { margin-top: 1.15em; }
@media (max-width: 900px) {
  .note { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .note .note-head, .note .note-body { grid-column: 1 / -1; }
  .note .note-body { margin-top: 20px; }
}

/* Possibility wall — one-line asks, each a real mandate or edition */
.possibility-list { border-top: 1px solid var(--line-dark); }
.possibility {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1.28;
  color: var(--text-dark);
  transition: color 0.3s var(--ease-soft), padding-left 0.35s var(--ease-out);
}
.possibility .possibility-tag {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  flex: none;
  transition: color 0.3s var(--ease-soft);
}
.possibility:hover { color: var(--accent); padding-left: 12px; }
.possibility:hover .possibility-tag { color: var(--accent); }
@media (max-width: 640px) {
  .possibility { flex-direction: column; gap: 8px; }
}

/* Founders duo — two equal portraits facing one another */.founders-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.founder-figure { margin: 0; }
.founder-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.founder-figure figcaption {
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.founder-block { border-top: 1px solid var(--line-dark); padding-top: 22px; margin-top: 26px; }
.founder-block .founder-role {
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-block h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 12px 0 4px; }
.founder-block .founder-question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.founder-block p { color: var(--text-dark-dim); font-size: 0.96rem; }
.founder-block p + p { margin-top: 1em; }
@media (max-width: 760px) {
  .founders-duo { grid-template-columns: 1fr; }
  .founder-figure { max-width: 440px; }
}

/* Two-questions comparison (House page) */.questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
.question-col { border-top: 1px solid var(--line-light); padding-top: 20px; }
.question-col h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 20px;
}
.question-col ul { display: grid; gap: 12px; }
.question-col li {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 340;
  line-height: 1.35;
  color: var(--text-light);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-light);
}
@media (max-width: 700px) { .questions { grid-template-columns: 1fr; } }

/* ---------- 11. Scenario demonstrations (method) ---------- */

.scenarios { border-top: 1px solid var(--line-dark); }
.scenario-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line-dark);
}
.scenario-tabs button {
  flex: 1 1 240px;
  text-align: left;
  padding: 22px 20px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 340;
  line-height: 1.3;
  color: var(--text-dark-dim);
  border-right: 1px solid var(--line-dark);
  position: relative;
  transition: color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft);
}
.scenario-tabs button:last-child { border-right: 0; }
.scenario-tabs button::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.scenario-tabs button[aria-selected="true"] { color: var(--text-dark); }
.scenario-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.scenario-tabs button:hover { color: var(--text-dark); }
.scenario-panels { position: relative; }
.scenario-panel { padding: clamp(32px, 5vw, 56px) 0; }
.scenario-panel[hidden] { display: none; }
.scenario-panel h3 {
  font-family: var(--font-display);
  font-weight: 340;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  max-width: 22ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.scenario-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.scenario-steps li {
  border-top: 1px solid var(--line-dark);
  padding-top: 16px;
  position: relative;
}
.scenario-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 12px;
}
.scenario-steps h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.scenario-steps p { font-size: 0.92rem; color: var(--text-dark-dim); }
@media (max-width: 1000px) { .scenario-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .scenario-steps { grid-template-columns: 1fr; } }

/* ---------- 12. Dependency diagram (London → Geneva) ---------- */

.diagram {
  border: 1px solid var(--line-dark);
  padding: clamp(20px, 3vw, 40px);
  background: rgba(34, 21, 15, 0.35);
}
.section.light .diagram, .section.light-2 .diagram {
  border-color: var(--line-light);
  background: rgba(255, 255, 255, 0.35);
}
.diagram svg { width: 100%; height: auto; }
.diagram .diagram-caption {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-dark-dim);
}
.section.light .diagram-caption { color: var(--text-light-dim); }

/* ---------- 13. Enquiry form ---------- */

.enquire-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.enquire-intro { grid-column: 1 / 6; }
.enquire-form-wrap { grid-column: 7 / 13; }
@media (max-width: 900px) {
  .enquire-intro, .enquire-form-wrap { grid-column: 1 / -1; }
  .enquire-intro { margin-bottom: 32px; }
}

.form-note {
  font-size: 0.85rem;
  color: var(--text-dark-dim);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin-bottom: 32px;
  max-width: 52ch;
}

.field { margin-bottom: 28px; }
.field label, .field legend {
  display: block;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin-bottom: 10px;
}
.field label .req { color: var(--accent); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-dark);
  font: inherit;
  border-radius: 0;
  transition: border-color 0.3s var(--ease-soft);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9823e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}
.field select option { background: var(--ink); color: var(--text-dark); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field .field-error {
  display: none;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #d98a7a;
}
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #d98a7a; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.choice-row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.choice-row input { accent-color: var(--gold); width: 16px; height: 16px; }

.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 24px; }
.form-status[role="alert"] { color: #d98a7a; font-size: 0.95rem; }
.form-success {
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--accent);
  padding: clamp(24px, 4vw, 40px);
  background: rgba(34, 21, 15, 0.4);
}
.form-success h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.form-success p { color: var(--text-dark-dim); max-width: 52ch; }

/* ---------- 14. 404 ---------- */

.error-page {
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 24px;
  padding: var(--gutter);
}
.error-page .error-code {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4rem, 12vw, 9rem);
  color: var(--accent);
  line-height: 1;
}
.error-page h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.error-page .error-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---------- 16. Interior extras ---------- */

/* Multi-part offer descriptions ("The question. / Claves maps. / Client receives.") */
.offer-desc p + p { margin-top: 0.55em; }
.offer-desc strong { color: var(--text-dark); font-weight: 600; }
.section.light .offer-desc strong, .section.light-2 .offer-desc strong { color: var(--text-light); }

/* Legal & policy rows (privacy, terms) */
.legal-list { border-top: 1px solid var(--line-dark); }
.legal-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--line-dark);
}
.legal-row h3 { grid-column: 1 / 5; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.legal-row .legal-body { grid-column: 6 / 13; color: var(--text-dark-dim); max-width: var(--measure); }
.legal-row .legal-body p + p { margin-top: 1em; }
@media (max-width: 900px) {
  .legal-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .legal-row h3, .legal-row .legal-body { grid-column: 1 / -1; }
  .legal-row .legal-body { margin-top: 8px; }
}

/* Direct contact line on the enquiry page */
.direct-line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 340;
}
.direct-line a { text-decoration-color: rgba(169, 130, 62, 0.55); }

/* ---------- 17. The letter (enquiry page) ---------- */

.letter-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 64px) 0 clamp(56px, 9vh, 110px);
  overflow: clip;
  background: var(--bg-dark);
}
.letter-hero-media, .letter-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.letter-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 9, 7, 0.94) 8%, rgba(12, 9, 7, 0.42) 52%, rgba(12, 9, 7, 0.55) 100%),
    linear-gradient(100deg, rgba(12, 9, 7, 0.72) 0%, rgba(12, 9, 7, 0.12) 60%);
}
.letter-hero-content { position: relative; }
.letter-hero h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  max-width: 9ch;
  margin-top: 20px;
}
.letter-hero h1 em { font-style: italic; color: var(--accent); }
.letter-hero .lede { margin-top: 26px; max-width: 36ch; color: var(--text-dark-dim); }

.letter-section { background: var(--bg-deep); }
.letter-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.letter-form-col { grid-column: 2 / 9; }
.letter-aside-col { grid-column: 10 / 13; }
@media (max-width: 1000px) {
  .letter-form-col, .letter-aside-col { grid-column: 1 / -1; }
  .letter-aside-col { margin-top: 40px; }
}

.letter-form { counter-reset: line; }
.letter-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  line-height: 2.15;
  color: var(--text-dark);
  margin: 0 0 0.35em;
}
.letter-line.salutation, .letter-line.signoff { font-style: italic; color: var(--accent); }
.letter-line .field {
  display: inline-block;
  position: relative;
  margin: 0 0.12em;
  vertical-align: baseline;
}
.letter-line input, .letter-line select {
  font: inherit;
  font-style: italic;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(169, 130, 62, 0.4);
  border-radius: 0;
  padding: 0 0.1em 0.08em;
  min-width: 7ch;
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft);
}
.letter-line input { width: 11ch; }
.letter-line input.wide { width: 16ch; }
.letter-line select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9823e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1em center;
  padding-right: 1.2em;
  max-width: 100%;
}
.letter-line select option { background: var(--ink); color: var(--text-dark); font-size: 1rem; font-style: normal; }
.letter-line input::placeholder { color: rgba(185, 172, 151, 0.45); }
.letter-line input:focus, .letter-line select:focus {
  outline: none;
  border-bottom-color: var(--accent);
  background: rgba(169, 130, 62, 0.07);
}
@media (max-width: 640px) {
  .letter-line input, .letter-line input.wide { width: 100%; min-width: 12ch; }
  .letter-line { line-height: 2.0; }
  .letter-line .field { display: block; margin: 0.1em 0; }
}

.letter-message { margin: 0.8em 0 0; }
.letter-message textarea {
  width: 100%;
  min-height: 180px;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 2.0;
  color: var(--text-dark);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2em - 1px),
      rgba(169, 130, 62, 0.18) calc(2em - 1px), rgba(169, 130, 62, 0.18) 2em);
  border: 0;
  padding: 0 2px;
  resize: vertical;
}
.letter-message textarea:focus { outline: none; background-color: rgba(169, 130, 62, 0.04); }
.letter-message textarea::placeholder { color: rgba(185, 172, 151, 0.4); }

.letter-form .field.has-error input,
.letter-form .field.has-error select,
.letter-form .field.has-error textarea { border-bottom-color: #d98a7a; }
.letter-form .field-error { display: none; }

.letter-seal {
  margin-top: clamp(36px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.letter-seal img {
  width: clamp(120px, 16vw, 190px);
  height: auto;
  opacity: 0.92;
}
.letter-aside .direct-line { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

/* Breadcrumbs */
.breadcrumb {
  font-size: 0.66rem;
  font-weight: 520;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin-bottom: 26px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .breadcrumb-sep { color: var(--accent); }

/* ---------- 19. The Network page (routing made visible) ---------- */

/* Hero killer line */
.net-killer {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.net-killer em { font-style: italic; color: var(--accent); }

/* The route demonstration (scroll-driven) */
.route-stage {
  position: relative;
  height: 340svh;
  background: var(--bg-dark);
}
.route-stage-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
}
.route-canvas { position: absolute; inset: 0; }
.route-canvas svg { width: 100%; height: 100%; display: block; }
.route-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 9px 16px 10px;
  border: 1px solid rgba(169, 130, 62, 0.45);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dark);
  background: rgba(12, 9, 7, 0.85);
  white-space: nowrap;
  will-change: opacity, transform;
}
.route-chip.is-core {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
  padding: 14px 22px 15px;
}
.route-question {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(48px, 8vh, 96px);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  color: var(--text-dark);
  will-change: opacity, transform;
  white-space: nowrap;
  background: rgba(12, 9, 7, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 10px 24px 12px;
  border-radius: 4px;
}
.route-question em { font-style: italic; color: var(--accent); }
.route-step {
  position: absolute;
  top: calc(var(--header-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(12, 9, 7, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px 14px 7px;
  border-radius: 999px;
  white-space: nowrap;
  will-change: opacity;
}
@media (max-width: 760px) {
  .route-stage { height: 300svh; }
  .route-chip { font-size: 0.58rem; padding: 7px 11px 8px; letter-spacing: 0.14em; }
}

/* Security story */
.net-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.net-quote em { font-style: italic; color: var(--accent); }
.net-issues { border-top: 1px solid var(--line-dark); margin-top: clamp(32px, 4vw, 56px); }
.net-issues li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.78rem;
  font-weight: 520;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.net-person { border-top: 1px solid var(--line-dark); padding: clamp(28px, 4vw, 48px) 0; }
.net-rel-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 560;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 4px 11px 5px;
  margin-bottom: 12px;
}
.net-person .net-person-role {
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.net-person h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 12px 0 6px; }
.net-person .net-person-sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.net-person .net-why-label {
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin-bottom: 8px;
}
.net-person .net-why { color: var(--text-dark-dim); max-width: 62ch; }
.net-conclusion {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  max-width: 26ch;
}
.net-conclusion em { font-style: italic; color: var(--accent); }

/* Client A / Client B scenarios */
.net-clients { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.net-client { border-top: 1px solid var(--line-dark); padding-top: 24px; }
.net-client .net-client-say {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--text-dark);
  margin-bottom: 26px;
}
@media (max-width: 700px) { .net-clients { grid-template-columns: 1fr; } }

/* The Wider House matrix */
.wider-matrix { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.wider-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.wider-row dt {
  font-size: 0.66rem;
  font-weight: 560;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.wider-row dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dark-dim);
  letter-spacing: 0.04em;
}

/* Diagram mobile fallbacks */
.diagram-fallback { display: none; }
.diagram-fallback-core { display: none; }
@media (max-width: 700px) {
  .diagram-fallback {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line-dark);
  }
  .diagram-fallback li {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 0.78rem;
    font-weight: 520;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dark-dim);
    display: grid;
    gap: 4px;
  }
  .diagram-fallback li strong { color: var(--text-dark); font-weight: 560; }
  .diagram-fallback li span {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }
  .diagram-fallback-core {
    display: block;
    margin-top: 20px;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-size: 1.2rem;
  }
  /* svg[data-diagram-live], not just the attribute selector: .geneva-svg's
     unconditional `display: block` (below) ties in specificity with the
     bare attribute selector, and being later in the stylesheet it was
     winning — the Geneva map stayed visible under 700px, stacked on top
     of this same fallback list instead of being replaced by it. */
  svg[data-diagram-live] { display: none; }
}

/* Geneva live map */
.geneva-stage { position: relative; }
.geneva-svg { width: 100%; height: auto; display: block; }
.geneva-svg .g-wire { fill: none; stroke: #a9823e; stroke-width: 1; }
.geneva-svg .g-node { fill: #b9ac97; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 2px; }
.geneva-svg .g-node.named { fill: #a9823e; font-weight: 600; }
.geneva-svg .g-sub { fill: #8a7e6c; font-size: 9.5px; letter-spacing: 0.6px; }
.geneva-svg .g-dot { fill: #a9823e; }
.geneva-svg .g-core { stroke: #a9823e; stroke-width: 1.2; fill: rgba(169, 130, 62, 0.08); }
.geneva-svg .g-core-title { fill: #efe7d8; font-family: var(--font-display); font-style: italic; font-size: 21px; }
.geneva-svg .g-core-sub { fill: #a9823e; font-family: var(--font-body); font-size: 11px; letter-spacing: 2.5px; }

/* ---------- 20. Small screens & print niceties ---------- */

@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .wordmark { font-size: 0.92rem; letter-spacing: 0.26em; }
}

/* Final production polish: live typography over crafted material. */
.founder-role,.net-person-role,.rail-founders,.mo-territories { font-family:Arial,Helvetica,sans-serif; }
.mo-layout { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(32px,6vw,90px); align-items:start; }
.mo-layout .body-copy h2 { margin:20px 0 30px; max-width:16ch; }
.mo-territories { font-size:.66rem; letter-spacing:.15em; line-height:2; color:var(--accent); margin-top:28px; }
.mo-quote { font-family:var(--font-display); font-size:clamp(1.4rem,2vw,2rem); line-height:1.35; padding-top:28px; border-top:1px solid var(--line-dark); margin-top:28px; }
.strategy-flow { display:grid; grid-template-columns:1.5fr auto 1fr auto 1fr; align-items:center; gap:24px; padding-block:28px 48px; }
.strategy-flow ul { display:grid; grid-template-columns:1fr 1fr; gap:18px; font: .7rem Arial,Helvetica,sans-serif; text-transform:uppercase; letter-spacing:.18em; color:var(--text-dark-dim); }
.strategy-decision,.strategy-sequence { padding:24px 16px; border-block:1px solid var(--line-dark); font:clamp(1.2rem,2vw,1.9rem) var(--font-display); text-align:center; }
.strategy-sequence { color:var(--accent); }.strategy-join { color:var(--accent); }
.brief-diagram { display:block; width:100%; height:auto; overflow:visible; }
.brief-sources text { fill:#c2b6a4; font:12.5px Arial,Helvetica,sans-serif; letter-spacing:1.4px; }
.brief-wire { stroke:#967746; stroke-width:.8; opacity:.32; }
.brief-signal { fill:#dac18b; opacity:0; }
.brief-core-title { fill:#efe7d8; font:italic 20px Georgia,serif; opacity:.68; }
.brief-core-label { fill:#c6a566; font:10px Arial,Helvetica,sans-serif; letter-spacing:2px; }
.brief-core-edge { fill:none; stroke:#e5c891; stroke-width:.8; opacity:0; }
.diagram-fallback,.diagram-fallback-core { display:none; }
.route-canvas { inset:calc(var(--header-h) + 55px) 0 155px; }
.route-wires { position:absolute; inset:0; z-index:0; pointer-events:none; }
.route-chip { display:grid; place-items:center; width:112px; height:34px; padding:0 7px; border:0; border-radius:0; background:transparent url('../brand/claves-token-m.png') center/100% 100% no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:.64rem; letter-spacing:.14em; z-index:1; text-shadow:0 1px 2px #000; }
.route-chip[data-chip="art"],.route-chip[data-chip="law"] { width:78px; background-image:url('../brand/claves-token-s.png'); }
.route-chip[data-chip="security"],.route-chip[data-chip="residence"],.route-chip[data-chip="education"],.route-chip[data-chip="immigration"] { width:142px; background-image:url('../brand/claves-token-l.png'); }
.route-chip.is-core { width:154px; height:59px; padding:0; border:0; border-radius:0; background:transparent url('../brand/claves-network-core.png') center/100% 100% no-repeat; color:#d9bc83; font: .68rem Arial,Helvetica,sans-serif; letter-spacing:.16em; }
.route-chip.is-selected { filter:brightness(1.16); }
.route-chip.is-rejected { filter:brightness(.6) saturate(.6); }
.route-chip.is-core.is-accountable { filter:brightness(1.22); }
.route-question { background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; padding:0 24px; width:min(94%,850px); white-space:normal; text-wrap:balance; line-height:1.15; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.route-step { background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; }
.route-stage-inner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 75%,rgba(0,0,0,.1),transparent 75%); pointer-events:none; }
.letter-section { --font-display:Georgia,'Times New Roman',serif; --font-body:Arial,Helvetica,sans-serif; font-family:var(--font-body); }
.enquiry-wrap { max-width:1040px; }.enquiry-paths { display:grid; grid-template-columns:1fr 1fr; gap:32px; border-block:1px solid var(--line-dark); margin-bottom:50px; }
.enquiry-paths button { background:none; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--text-dark-dim); text-align:left; padding:25px 0; font:.8rem var(--font-body); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.enquiry-paths button[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.enquiry-paths button span { display:block; font:1rem var(--font-display); text-transform:none; letter-spacing:0; color:var(--text-dark-dim); margin-top:12px; }
.enquiry-route { max-width:760px; margin-inline:auto; }.enquiry-route[hidden],.form-success[hidden] { display:none; }
.enquiry-route h3 { font:clamp(1.8rem,3vw,2.5rem) var(--font-display); font-weight:400; }
.letter-form label { display:block; font:.8rem var(--font-body); line-height:1.6; }
.letter-form .letter-question { margin-block:30px; }.letter-form input:not([type="checkbox"]),.letter-form textarea,.letter-form select { display:block; width:100%; border:0; border-bottom:1px solid var(--line-dark); border-radius:0; background:transparent; padding:12px 0; font:clamp(1.15rem,2vw,1.6rem) var(--font-display); color:var(--text-dark); box-shadow:none; }
.letter-form input:focus,.letter-form textarea:focus,.letter-form select:focus { border-color:var(--accent); outline:1px solid var(--accent); outline-offset:5px; }
.letter-form textarea { resize:vertical; min-height:150px; }.letter-form select option { background:#0c0907; color:#efe7d8; }
.letter-form .enquiry-contact { border:0; padding:24px 0; margin:0; }.enquiry-contact legend { font:.72rem var(--font-body); text-transform:uppercase; letter-spacing:.14em; margin-bottom:8px; }.enquiry-contact label { margin-block:18px; }
.enquiry-context { display:grid; grid-template-columns:1fr 1fr; gap:30px; }.field-helper { font:.85rem var(--font-body); color:var(--text-dark-dim); line-height:1.6; margin-top:12px; }.enquiry-contact label span { color:var(--text-dark-dim); }
.letter-form .notes-opt-in { display:flex; align-items:flex-start; gap:12px; padding-block:24px; color:var(--text-dark-dim); font:.85rem var(--font-body); }.notes-opt-in input { margin-top:4px; width:16px; height:16px; accent-color:var(--accent); }
.letter-section .button { border-radius:0; }.enquiry-discretion { max-width:760px; margin:50px auto 0; padding-top:24px; border-top:1px solid var(--line-dark); font:.86rem var(--font-body); line-height:1.7; color:var(--text-dark-dim); }
.enquiry-regarding { margin-top:24px; font:.85rem var(--font-body); color:var(--accent); }.voice-instrument { display:flex; align-items:center; gap:24px; padding-block:28px; }.voice-microphone { display:flex; align-items:center; gap:12px; border:1px solid var(--line-dark); border-radius:0; background:transparent; color:var(--text-dark); padding:16px; font:.85rem var(--font-body); }.voice-microphone svg { fill:none; stroke:currentColor; stroke-width:1.2; }.voice-instrument output { font:1rem var(--font-body); font-variant-numeric:tabular-nums; }.voice-waveform { width:100px; height:24px; opacity:.3; fill:none; stroke:var(--accent); stroke-width:1; }.voice-recorder.is-recording .voice-waveform { animation:voice-breathe 1.5s ease-in-out infinite; }.voice-recorder.is-recording .voice-microphone { color:var(--accent); border-color:var(--accent); }.voice-actions { display:flex; gap:24px; }.voice-actions button { border:0; border-bottom:1px solid var(--line-dark); background:none; color:var(--text-dark); padding:8px 0; font:.8rem var(--font-body); }.voice-actions button:disabled { opacity:.35; cursor:default; }.voice-recorder audio { width:100%; margin-top:24px; }.voice-state { min-height:3em; margin-top:20px; font:.85rem var(--font-body); }
@keyframes voice-breathe { 50% { opacity:.65; } }
@media(max-width:760px) { .mo-layout { grid-template-columns:1fr; }.mo-layout .founder-figure { max-width:400px; }.strategy-flow { grid-template-columns:1fr; }.strategy-join { text-align:center; transform:rotate(90deg); }.strategy-flow ul { gap:16px; }.route-chip { width:85px; height:29px; font-size:.57rem; letter-spacing:.08em; }.route-chip[data-chip="art"],.route-chip[data-chip="law"] { width:62px; }.route-chip[data-chip="security"],.route-chip[data-chip="residence"],.route-chip[data-chip="education"],.route-chip[data-chip="immigration"] { width:108px; }.route-chip.is-core { width:133px; height:51px; font-size:.58rem; }.route-canvas { inset:calc(var(--header-h) + 60px) 0 160px; }.route-question { font-size:1.6rem; bottom:35px; }.route-step { font-size:.58rem; letter-spacing:.17em; }.enquiry-paths { gap:20px; }.enquiry-context { grid-template-columns:1fr; gap:8px; }.voice-instrument { gap:15px; }.voice-waveform { width:70px; } }
@media(prefers-reduced-motion:reduce) { .voice-recorder.is-recording .voice-waveform { animation:none; }.brief-signal { display:none; } }
.diagram:has(.brief-diagram) { border:0; padding:0; background:none; }
.diagram svg.brief-diagram { display:block; }

.strategic-proof .section-head { display:block; }
.strategic-proof .section-head .lede { max-width:64ch; margin-top:24px; }
.strategy-flow > * { min-width:0; }

/* Two-component update. Versioned component-local includes preserve all other markup. */
.geneva-svg .g-signal { fill:#dac18b; stroke:none; opacity:0; pointer-events:none; }
.brief-orbit { display:none; position:relative; width:100%; aspect-ratio:760/420; perspective:1200px; transform-style:preserve-3d; }
.brief-orbit.is-active { display:block; }
.brief-orbit.is-active ~ .brief-diagram { display:none; }
.brief-orbit ~ .brief-diagram .brief-core-title { opacity:1; }
.brief-orbit ~ .brief-diagram .brief-core-edge { opacity:.16; }
.brief-orbit-rings { position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.brief-orbit-ring { position:absolute; left:50%; top:50%; width:88%; height:58%; border:1px solid rgba(169,130,62,.16); border-radius:50%; transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-8deg); }
.brief-orbit-ring:nth-child(2) { width:82%; height:62%; border-color:rgba(169,130,62,.09); transform:translate(-50%,-50%) rotateX(62deg) rotateZ(10deg); }
.brief-orbit-ring:nth-child(3) { width:94%; height:56%; border-color:rgba(169,130,62,.06); transform:translate(-50%,-50%) rotateX(72deg); }
.brief-orbit-card { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:112px; height:34px; padding:0 8px; background:transparent url('../brand/claves-token-m.png') center/100% 100% no-repeat; color:#efe7d8; font:11px/1 Arial,Helvetica,sans-serif; letter-spacing:.09em; white-space:nowrap; text-shadow:0 1px 2px #000; transform-origin:50% 50%; backface-visibility:hidden; pointer-events:none; }
.brief-orbit-card--s { width:86px; background-image:url('../brand/claves-token-s.png'); }
.brief-orbit-card--l { width:142px; background-image:url('../brand/claves-token-l.png'); }
.brief-orbit-core { position:absolute; left:50%; top:50%; width:clamp(230px,40%,270px); transform:translate(-50%,-50%); z-index:20; pointer-events:none; }
.brief-orbit-core img { display:block; width:100%; height:auto; }
.brief-orbit-title { position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); color:#efe7d8; font:italic 20px/1.2 Georgia,serif; white-space:nowrap; }
.brief-orbit-label { position:absolute; left:50%; top:70%; transform:translate(-50%,-50%); color:#c6a566; font:10px/1.2 Arial,Helvetica,sans-serif; letter-spacing:2px; white-space:nowrap; }
@media(max-width:760px) {
 .brief-orbit { aspect-ratio:360/600; }
 .brief-orbit-card { width:95px; height:30px; font-size:10px; letter-spacing:.04em; }
 .brief-orbit-card--s { width:76px; }
 .brief-orbit-card--l { width:110px; }
 .brief-orbit-core { width:190px; }
 .brief-orbit-title { font-size:16px; }
 .brief-orbit-label { font-size:8px; letter-spacing:1.7px; }
 .brief-orbit-ring { height:66%; transform:translate(-50%,-50%) rotateX(25deg) rotateZ(-7deg); }
 .brief-orbit-ring:nth-child(2) { height:71%; transform:translate(-50%,-50%) rotateX(29deg) rotateZ(9deg); }
 .brief-orbit-ring:nth-child(3) { height:64%; transform:translate(-50%,-50%) rotateX(22deg); }
 .brief-orbit:not(.is-ready) ~ .brief-diagram { display:none; }
 .brief-orbit:not(.is-ready) ~ .diagram-fallback { display:grid; }
 .brief-orbit:not(.is-ready) ~ .diagram-fallback-core { display:block; }
}
@media(prefers-reduced-motion:reduce) {
 .geneva-svg .g-signal { display:none; }
 .brief-orbit.is-active { display:none; }
 .brief-orbit.is-active ~ .brief-diagram { display:block; }
}