/* ============================================================
   SLC — Direction C v2 · Living Diagnostic
   Brand-aligned rebuild: warm cream + black + aurora + sawtooth
   ============================================================ */

/* ----- TOKENS ----- */
:root {
  /* ============================================================
     Brand palette — five hues × six-step tint ramps + accents.
     Sampled from the official Canva color sheet (slc-canva-ref/colors.png).
     ============================================================ */

  /* GOLD ramp */
  --gold-50:  #fbf5e9;
  --gold-100: #f0d6a6;
  --gold-200: #eac481;
  --gold-300: #e1ab4b;
  --gold-500: #db9a26;   /* core */
  --gold-700: #996c1b;   /* deep */

  /* ORANGE ramp */
  --orange-50:  #fcf1ea;
  --orange-100: #f1c4a9;
  --orange-200: #ebab86;
  --orange-300: #e38752;
  --orange-500: #dd6f2e;  /* core */
  --orange-700: #9b4e20;  /* deep */

  /* PLUM ramp */
  --plum-50:  #f6eaf1;
  --plum-100: #d9a7c4;
  --plum-200: #ca83ab;
  --plum-300: #b34d87;
  --plum-500: #a3296f;   /* core */
  --plum-700: #721d4e;   /* deep */

  /* INDIGO ramp */
  --indigo-50:  #eeeef6;
  --indigo-100: #b8b8d8;
  --indigo-200: #9b9bc8;
  --indigo-300: #6f6fb0;
  --indigo-500: #5252a0; /* core */
  --indigo-700: #393970; /* deep */

  /* TEAL ramp */
  --teal-50:  #e7f4f3;
  --teal-100: #9bd0cf;
  --teal-200: #72bcbb;
  --teal-300: #35a09d;
  --teal-500: #0c8c89;   /* core */
  --teal-700: #075554;   /* deep */

  /* Pure accents — used sparingly, on black or against saturated fields */
  --yellow:    #ffd700;
  --magenta:   #cf0e4e;
  --cyan:      #1fbcd2;

  /* Aliases (legacy names — kept so existing rules keep working) */
  --gold:      var(--gold-500);
  --gold-deep: var(--gold-700);
  --gold-soft: #f3d27a;
  --orange:    var(--orange-500);
  --plum:      var(--plum-500);
  --plum-deep: var(--plum-700);
  --indigo:    var(--indigo-500);
  --teal:      var(--teal-500);
  --black:     #000000;
  --black-2:   #0a0a0a;
  --ink:       #0d0d0d; /* dark plum — locked */
  --ink-soft:  #1c0814;

  /* warm tints */
  --cream:     #ffffff;
  --cream-2:   #f0f0f0;
  --peach:     #f4d4ba;
  --peach-2:   #f7decb;
  --mauve:     #e9c8d6;
  --lavender:  #d4d3e5;

  /* type */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* SLC brand cursor — the four-color inner diamonds from the logo.
     SVG renders crisp at any DPI; PNG fallbacks below for older browsers.
     Hotspot (20,20) is the visual center of the diamond cluster.
     Final keyword (`auto`) is the ALWAYS-valid CSS fallback. */
  cursor: url("assets/cursor-default.png") 4 4, auto;
  cursor: -webkit-image-set(
            url("assets/cursor-default.png") 1x,
            url("assets/cursor-default@2x.png") 2x
          ) 4 4, auto;
  cursor: url("assets/cursor-sawtooth.svg") 12 12, auto;
}

/* Pointer (hover) variant — a touch larger, used over any clickable element.
   Applies to native interactive elements, anything with role=button, and any
   element with .leg-toggle / .diag-card label which are clickable in script. */
a,
button,
[role="button"],
summary,
label,
select,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
.leg-toggle,
.diag-card label,
.nav-cta,
.btn,
.svc-link,
.note-link {
  /* Pointer cursor: the gold-quadrant glyph (active/clickable color). */
  cursor: url("assets/cursor-pointer.png") 6 6, pointer;
  cursor: -webkit-image-set(
            url("assets/cursor-pointer.png") 1x,
            url("assets/cursor-pointer@2x.png") 2x
          ) 6 6, pointer;
  cursor: url("assets/cursor-full-mark.svg") 16 16, pointer;
}

/* Text inputs and textareas: keep the native text I-beam (custom diamond cursor
   would make it hard to see where the caret is). Override the body default. */
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea {
  cursor: text;
}

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

a { color: inherit; text-decoration: none; }

/* ============================================================
   COMMON TYPE UTILITIES
   ============================================================ */
.mono-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mono-tag.light { color: #f0f0f0; }
.mono-tag.cream { color: var(--cream); }
.mono-tag.dim   { opacity: 0.55; }
.mono-tag.right { margin-left: auto; }
.mono-tag.mt    { margin-top: 12px; display:inline-block; }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
}
.dot-gold   { background: var(--gold); }
.dot-plum   { background: var(--plum); }
.dot-teal   { background: var(--teal); }
.dot-indigo { background: var(--indigo); }
.dot-orange { background: var(--orange); }

.gold        { color: var(--gold); }
.gold-ink    { color: var(--gold-deep); }
.teal        { color: var(--teal); }
.teal-ink    { color: var(--teal-700); }
.plum        { color: var(--plum); }
.plum-ink    { color: var(--plum-700); }
.indigo      { color: var(--indigo); }
.indigo-ink  { color: var(--indigo-700); }
.orange      { color: var(--orange); }
.orange-ink  { color: var(--orange-700); }
.magenta     { color: var(--magenta); }

/* ============================================================
   NAV
   ============================================================ */
/* Deep-link alias anchors — link targets only, never shown in nav */
.anchor-alias { display: block; height: 0; margin: 0; padding: 0; visibility: hidden; scroll-margin-top: 84px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 6px var(--gutter);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(20, 17, 14, 0.08);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand-logo--symbol {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .brand-logo--symbol { width: 36px; height: 36px; }
}
/* Wide logo (symbol + wordmark integrated) — aspect 650×192.5 ≈ 3.38:1 */
.brand-logo--wide {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .brand-logo--wide { height: 36px; }
}
@media (max-width: 480px) {
  .brand-logo--wide { height: 30px; }
}
.brand-logo {
  display: block;
  height: 38px;
  width: auto;
}
@media (max-width: 720px) {
  .brand-logo { height: 32px; }
}

.nav-links {
  display: flex; gap: clamp(10px, 1.8vw, 22px);
  margin-left: auto;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.78;
  letter-spacing: 0.01em;
  position: relative;
  padding: 8px 4px 8px 16px;
  /* Diamond dot at left — pops in on hover via background-size animation. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><rect x='2' y='2' width='6' height='6' transform='rotate(45 5 5)' fill='%23a3296f'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 0 0;
  transition: opacity 0.2s, color 0.2s, background-size 220ms cubic-bezier(.5,1.6,.5,1);
}
/* Sawtooth frame — top + bottom, fade in together on hover. */
.nav-links a::before,
.nav-links a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  height: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4' preserveAspectRatio='none'><polygon points='0,4 4,0 8,4' fill='%23a3296f'/></svg>");
  background-repeat: repeat-x;
  background-size: 8px 4px;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.nav-links a::before { top: 0; transform: rotate(180deg); }
.nav-links a::after { bottom: 0; }
.nav-links a:hover {
  opacity: 1;
  color: var(--plum);
  background-size: 10px 10px;
}
.nav-links a:hover::before,
.nav-links a:hover::after { opacity: 1; }
/* Current page: gold diamond + gold sawtooth, always visible. */
.nav-links a[aria-current="page"] {
  opacity: 1;
  color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><rect x='2' y='2' width='6' height='6' transform='rotate(45 5 5)' fill='%23db9a26'/></svg>");
  background-size: 10px 10px;
}
.nav-links a[aria-current="page"]::before,
.nav-links a[aria-current="page"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4' preserveAspectRatio='none'><polygon points='0,4 4,0 8,4' fill='%23db9a26'/></svg>");
  opacity: 1;
}

.nav-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: white;
  background: var(--plum);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--plum-deep); transform: translateY(-1px); }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(20, 17, 14, 0.18);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  transition: border-color 0.2s, background 0.2s;
}
.nav-toggle:hover { border-color: rgba(20, 17, 14, 0.4); background: rgba(20, 17, 14, 0.03); }
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 49;
  background: var(--cream);
  padding: 88px var(--gutter) 48px;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid rgba(20, 17, 14, 0.08);
  box-shadow: 0 12px 32px rgba(20, 17, 14, 0.08);
  display: none;
}
.mobile-menu.is-open {
  transform: translateY(0);
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}
.mobile-menu__links a {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 17, 14, 0.08);
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-menu__links a:hover,
.mobile-menu__links a:active {
  color: var(--plum);
  padding-left: 8px;
}
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: white;
  background: var(--plum);
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s;
}
.mobile-menu__cta:hover { background: var(--plum-deep); }
/* When the CTA sits inside .mobile-menu__links (subpages), the link rule above
   outweighs .mobile-menu__cta — re-assert the pill treatment at higher specificity */
.mobile-menu__links a.mobile-menu__cta {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: white;
  padding: 14px 22px;
  border-bottom: none;
  justify-content: center;
  margin-top: 12px;
  align-self: flex-start; /* hug content — don't stretch to the column width */
}
.mobile-menu__links a.mobile-menu__cta:hover,
.mobile-menu__links a.mobile-menu__cta:active {
  color: white;
  padding-left: 22px;
  background: var(--plum-deep);
}

@media (max-width: 900px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; }
}

/* Extra-tight phones: shrink CTA so the hamburger + logo all fit */
@media (max-width: 420px) {
  .nav-cta {
    font-size: 12px;
    padding: 8px 12px;
  }
  .nav { padding: 12px 16px; gap: 8px; }
}

/* ============================================================
   HERO — warm cream
   ============================================================ */
.hero {
  background: linear-gradient(180deg, var(--cream) 0%, #f7eedf 100%);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: clamp(20px, 4vw, 56px) clamp(20px, 4vw, 56px);
}
.hero-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.hero-meta::before {
  content: "";
  grid-column: 2;
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(20, 17, 14, 0.18) 0%,
    rgba(20, 17, 14, 0.08) 60%,
    rgba(20, 17, 14, 0.18) 100%
  );
  order: 2;
}
.hero-meta .mono-tag:not(.right) { grid-column: 1; order: 1; }
.hero-meta .mono-tag.right { grid-column: 3; order: 3; }
@media (max-width: 760px) {
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hero-meta::before { display: none; }
  .hero-meta .mono-tag:not(.right),
  .hero-meta .mono-tag.right { grid-column: 1; }
}

/* =================================================================
   SECTION RAIL — universal eyebrow-with-rule pattern
   Use: <div class="section-rail"><span class="mono-tag">EYEBROW</span><span class="section-rail__rule"></span><span class="mono-tag section-rail__meta">META</span></div>
   Fills the top-right vacuum across every section.
   Desktop only — collapses to mobile-style stack under 760px.
   ================================================================= */
.section-rail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.section-rail__rule {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(20, 17, 14, 0.18) 0%,
    rgba(20, 17, 14, 0.08) 60%,
    rgba(20, 17, 14, 0.18) 100%
  );
}
.section-rail__meta {
  color: rgba(20, 17, 14, 0.55);
  white-space: nowrap;
  font-weight: 500;
}
/* Dark sections — lighten the rule + meta */
.dark .section-rail__rule,
[class*="dark"] .section-rail__rule,
.section-rail--dark .section-rail__rule {
  background: linear-gradient(
    to right,
    rgba(245, 235, 221, 0.25) 0%,
    rgba(245, 235, 221, 0.10) 60%,
    rgba(245, 235, 221, 0.25) 100%
  );
}
.dark .section-rail__meta,
[class*="dark"] .section-rail__meta,
.section-rail--dark .section-rail__meta {
  color: rgba(245, 235, 221, 0.55);
}
@media (max-width: 760px) {
  .section-rail {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 16px;
  }
  .section-rail__rule { display: none; }
  .section-rail__meta { text-align: left; }
}

.hero-head {
  grid-column: 1 / 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 8.6vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.hero-gold {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.hero-support {
  grid-column: 1 / 2;
  max-width: 56ch;
  padding-right: clamp(0px, 4vw, 32px);
}
.lede {
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.lede em { color: var(--plum); font-style: italic; }
.sub {
  font-size: 15px;
  color: rgba(20, 17, 14, 0.65);
  margin: 0 0 30px;
  max-width: 44ch;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----- buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-plum {
  background: var(--plum); color: white;
}
.btn-plum:hover { background: var(--plum-deep); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(20, 17, 14, 0.35);
}
.btn-outline:hover { border-color: var(--ink); background: rgba(20,17,14,0.04); }

.btn-gold {
  background: var(--gold); color: var(--ink);
}
.btn-gold:hover { background: var(--gold-deep); color: white; transform: translateY(-1px); }

.btn-ghost-cream {
  background: transparent; color: var(--cream);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn-ghost-cream:hover { background: rgba(255, 255, 255,0.1); border-color: var(--cream); }

.btn-sm { padding: 10px 16px; font-size: 13px; }

/* ----- hero corner tile ----- */
.hero-tile {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  align-self: end;
  position: relative;
  background: white;
  border: 1px solid rgba(20,17,14,0.1);
  padding: 14px;
  border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(20,17,14,0.25), 0 8px 20px -10px rgba(20,17,14,0.1);
  max-width: 360px;
  justify-self: end;
}
.tile-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--ink);
}
.tile-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.92);
}
.tile-meta { padding: 0 4px 6px; }
.tile-meta p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0 0;
  color: var(--ink);
  font-style: italic;
}
.tile-corner {
  position: absolute;
  top: -16px; right: -16px;
}

/* ----- rotators ----- */
.hero-rotators {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 18px;
  padding-top: clamp(16px, 3vw, 32px);
  border-top: 1px solid rgba(20,17,14,0.1);
}
.rot-line {
  font-family: var(--serif);
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.6s;
}
.rot-line em { font-style: italic; }
.rot-line.rot-gold em { color: var(--gold); }
.rot-line.rot-plum em { color: var(--plum); }
.rot-line.rot-teal em { color: var(--teal); }
.rot-sep { opacity: 0.3; color: var(--ink); }

@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-head, .hero-support { grid-column: 1; }
  .hero-tile {
    grid-column: 1; grid-row: auto;
    justify-self: stretch;
    max-width: 100%;
  }
}

/* ============================================================
   SAWTOOTH HORIZON DIVIDERS
   ============================================================ */
.horizon {
  display: block;
  line-height: 0;
  margin: 0;
  position: relative;
}
.horizon svg {
  display: block;
  width: 100%;
  height: clamp(56px, 7vw, 96px);
}
/* torn seams need more vertical room so the rip reads */
.horizon-torn svg {
  height: clamp(72px, 9vw, 120px);
}
/* puzzle seam is the signature — needs height so tabs read */
.horizon-puzzle svg {
  height: clamp(96px, 11vw, 160px);
}
/* soft wave seam — long wavelength, low amplitude, calm on desktop */
.horizon-wave svg {
  height: clamp(64px, 7.5vw, 110px);
}
/* hairline seam stays slim */
.horizon-hairline svg {
  height: clamp(28px, 3vw, 40px);
}
.horizon-down { background: var(--ink); }
.horizon-up   { background: var(--cream); }
/* Puzzle paints its own dark plum via the path — container is the cream-ish hero tail */
.horizon-puzzle { background: #f7eedf !important; }
/* Wave defaults to hero tail color; per-instance inline `style="background:..."` overrides this */
.horizon-wave   { background: #f7eedf; }
/* Stroked wave (same-color either side) — quiet, thin */
.horizon-wave--stroked svg { height: clamp(28px, 3vw, 40px); }

/* CHEVRON seams — staircase echoing the logo edge */
.horizon-chevron { background: #f7eedf; }                  /* default container = hero tail */
.horizon-chevron svg { height: clamp(52px, 6vw, 80px); }   /* hero + engagements→about */
.horizon-chevron--soft svg { height: clamp(36px, 4vw, 56px); } /* between cream sections */
.horizon-chevron--rule svg { height: clamp(20px, 2.4vw, 28px); } /* same-color quiet rule */
.horizon-puzzle--mobile { display: none; }

/* Mobile: unify every seam to one height (~12px, matching the research-page
   .rseam) — overrides the per-seam inline heights and the chevron sizes so the
   seams read consistently instead of some tall, some fine. */
@media (max-width: 600px) {
  .horizon svg { height: 12px !important; }
}

/* ============================================================
   DARK PLUM SECTION (used by organism + PI)
   ============================================================ */
.dark {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

/* aurora bleeds — soft glows in corners */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.aurora-plum-bl {
  bottom: -200px; left: -140px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(163, 41, 111, 0.85) 0%, rgba(163, 41, 111, 0.0) 70%);
  opacity: 0.65;
}
.aurora-teal-br {
  bottom: -200px; right: -140px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(12, 140, 137, 0.85) 0%, rgba(12, 140, 137, 0.0) 70%);
  opacity: 0.55;
}
.aurora-indigo-tr {
  top: -240px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(82, 82, 160, 0.6) 0%, rgba(82, 82, 160, 0.0) 70%);
  opacity: 0.5;
}
.aurora-plum-r {
  top: 50%; right: -260px;
  transform: translateY(-50%);
  width: 700px; height: 900px;
  background: radial-gradient(circle, rgba(163, 41, 111, 0.85) 0%, rgba(163, 41, 111, 0.0) 65%);
  opacity: 0.7;
}
.aurora-teal-bl {
  bottom: -180px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(12, 140, 137, 0.7) 0%, rgba(12, 140, 137, 0.0) 70%);
  opacity: 0.45;
}

/* ============================================================
   ORGANISM SECTION
   ============================================================ */
.organism-section {
  padding: clamp(44px, 5.5vw, 80px) var(--gutter) clamp(28px, 4vw, 56px);
  position: relative;
}
/* Plum top bleed so the cream→plum wave melts into the section instead of hitting a hard plum/ink edge */
.organism-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(120px, 18vw, 260px);
  background: none; /* flat black — plum top-bleed removed */
  pointer-events: none;
  z-index: 0;
}
/* Flat-black organism section: suppress the plum/teal aurora glows */
.organism-section .aurora { display: none !important; }
.organism-header {
  max-width: var(--maxw);
  margin: 0 auto clamp(32px, 5vw, 56px);
  position: relative; z-index: 2;
}
.section-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 16px 0 18px;
  font-variation-settings: "opsz" 144;
}
.section-head.light { color: var(--cream); }
.section-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0;
}
.section-sub.light { color: rgba(255, 255, 255, 0.75); }

/* legend tiles (above organism) */
.legend {
  max-width: var(--maxw);
  margin: 0 auto clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 22px);
  position: relative; z-index: 2;
}
.leg {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  border-radius: 4px;
  color: var(--cream);
  transition: background 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
  align-self: start;
}
.leg-toggle {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  width: 100%;
  padding: 22px 22px 20px;
  text-align: left;
  color: inherit;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font: inherit;
  position: relative;
  transition: background 0.2s;
}
.leg-toggle > .leg-icon,
.leg-toggle > .leg-rule,
.leg-toggle > .leg-roman,
.leg-toggle > .leg-name,
.leg-toggle > .leg-count,
.leg-toggle > .leg-meta { grid-column: 1; }
.leg-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  justify-self: start;
  align-self: start;
}
.leg-icon svg { width: 48px; height: 48px; display: block; }
.leg-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.leg-chev {
  grid-column: 2; grid-row: 1 / span 5;
  align-self: center;
  justify-self: end;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease, background 0.2s, color 0.2s, border-color 0.2s;
}
.leg-gold .leg-chev { border-color: rgba(219, 154, 38, 0.45); color: rgba(219, 154, 38, 0.9); }
.leg-teal .leg-chev { border-color: rgba(12, 140, 137, 0.55); color: rgba(76, 192, 188, 0.95); }
.leg-plum .leg-chev { border-color: rgba(217, 119, 169, 0.5); color: rgba(217, 119, 169, 0.95); }
.leg[data-expanded="true"] .leg-chev { transform: rotate(45deg); }

.leg-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 22px;
}
.leg[data-expanded="true"] .leg-body {
  max-height: 720px;
}
.leg-body-inner {}
.leg-def {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 4px 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.leg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.leg-list li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.leg-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--gold);
  opacity: 0.85;
}
.leg-teal .leg-list li::before { background: var(--teal); }
.leg-plum .leg-list li::before { background: #b34d87; }
@media (max-width: 520px) {
  .leg-list { grid-template-columns: 1fr; }
}
.leg::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
  opacity: 0.85;
}
.leg-teal::before { background: var(--teal); }
.leg-plum::before { background: var(--plum); }

.leg-rule { display: none; }
.leg-roman {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
}
.leg-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
}
.leg-gold .leg-name { color: var(--gold); }
.leg-teal .leg-name { color: var(--teal); }
.leg-plum .leg-name { color: #b34d87; }   /* lift plum on dark */

.leg-count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--cream);
}
.leg-count small {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 8px;
}
.leg-meta {
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.leg:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.leg:hover .leg-chev { background: rgba(255, 255, 255, 0.06); }
.leg[data-expanded="true"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}
.leg-gold[data-expanded="true"] { border-color: rgba(219, 154, 38, 0.45); }
.leg-teal[data-expanded="true"] { border-color: rgba(12, 140, 137, 0.55); }
.leg-plum[data-expanded="true"] { border-color: rgba(217, 119, 169, 0.5); }

/* =========================================================
   ROOT CARDS — Mockup 2 (approved): diamond mark, centered.
   Icon set inside the rotated SLC diamond; roman / name /
   tagline centered; "+" toggle pinned top-right; flat dark card.
   ========================================================= */
.leg { background: #141414; border-color: #262626; }
.leg::before { display: none; }                 /* drop the top accent rule */
.leg-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 34px 26px 30px;
}
.leg-count { display: none; }                    /* count not part of this layout */
.leg-icon {
  width: 70px; height: 70px;
  margin: 0 0 22px;
  border: 1.5px solid currentColor;
  border-radius: 11px;
  transform: rotate(45deg);
  align-self: center;     /* defeat the old grid's align-self:start so the diamond centers */
  justify-self: center;
}
.leg-gold .leg-icon { color: var(--gold); }
.leg-teal .leg-icon { color: var(--teal); }
.leg-plum .leg-icon { color: #b34d87; }
.leg-icon svg { width: 36px; height: 36px; transform: rotate(-45deg); }
.leg-roman { margin: 0 0 2px; }
.leg-name { margin: 2px 0 8px; }
.leg-meta { max-width: 26ch; }
.leg-chev {
  position: absolute;
  top: 16px; right: 16px;
  grid-row: auto;
}
/* Mockup 2 is a clean card — drop the sawtooth corner triangles */
.leg-corner { display: none; }

@media (max-width: 720px) {
  .legend { grid-template-columns: 1fr; }
}

/* organism stage */
.organism-stage {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.organism {
  width: 100%;
  height: auto;
  display: block;
}

/* svg type */
.svg-mono {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  fill: rgba(255, 255, 255, 0.55);
  text-transform: lowercase;
}
.svg-mono.dim { fill: rgba(255, 255, 255, 0.35); }
.svg-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  fill: var(--gold);
  text-transform: uppercase;
}
.svg-root-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
}
.cur { fill: rgba(255, 255, 255, 0.7); }

/* root colors */
.root-resources .trunk, .root-resources .branch { stroke: var(--gold); fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: 0.95; }
.root-practices .trunk, .root-practices .branch { stroke: var(--teal); fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: 0.95; }
.root-identity  .trunk, .root-identity  .branch { stroke: var(--plum); fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: 0.95; }

.root-resources .current circle { fill: var(--gold); }
.root-practices .current circle { fill: var(--teal); }
.root-identity  .current circle { fill: var(--plum); }

/* grow-in animation */
.organism .trunk, .organism .branch {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.organism.grow .trunk { animation: draw 1.6s cubic-bezier(.22,.61,.36,1) forwards; }
.organism.grow .branch { animation: draw 1.2s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 0.4s; }
.organism.grow .currents circle { animation: pop 0.5s ease forwards; animation-delay: 1.5s; opacity: 0; transform-origin: center; transform: scale(0); }
.organism.grow .currents text { animation: fadeIn 0.5s ease forwards; animation-delay: 1.7s; opacity: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }

/* alive pulse */
.organism.alive .currents circle {
  animation: pulse 3.2s ease-in-out infinite;
  opacity: 1;
}
.root-practices .currents circle { animation-delay: 0.4s; }
.root-identity  .currents circle { animation-delay: 0.8s; }
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.6); }
}

/* hover-isolate (root-level): dims the two roots you're NOT pointing at. */
.organism-stage[data-focus] .root { opacity: 0.18; transition: opacity 0.3s; }
.organism-stage[data-focus="resources"] .root-resources,
.organism-stage[data-focus="practices"] .root-practices,
.organism-stage[data-focus="identity"]  .root-identity { opacity: 1; }

/* hover-isolate (current-level): when a single current is being inspected,
   dim its siblings (other currents + flow lines in the same root) and bring
   the focused current + its matching flow line forward. Works on top of the
   root-level isolation above. */
.organism-stage[data-current-focus] .current,
.organism-stage[data-current-focus] .flow-out,
.organism-stage[data-current-focus] .flow-in {
  opacity: 0.22;
  transition: opacity 0.2s;
}
.organism-stage[data-current-focus] .current.is-focused,
.organism-stage[data-current-focus] .flow-out.is-focused,
.organism-stage[data-current-focus] .flow-in.is-focused {
  opacity: 1;
}
.current { cursor: pointer; transition: opacity 0.2s; }
.current .cur { transition: font-weight 0.15s, fill 0.15s; }
.current.is-focused circle { r: 5; }
.current.is-focused .cur { font-weight: 700; }
.flow-out, .flow-in { transition: opacity 0.2s, stroke-width 0.2s; }
.flow-out.is-focused, .flow-in.is-focused { stroke-width: 2; }

/* Jump-to-Self-Check CTA — sits under the organism diagram, anchors the
   diagnostic loop by sending the user to the input that fills the bars. */
.organism-cta {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(32px, 4vw, 48px);
}
.organism-cta__hint {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 14px 0 0;
  font-weight: 600;
}

/* Current tooltip — appears when a current is focused AND has a definition.
   Positioned by JS inside .organism-stage (which is position: relative). */
.organism-stage { position: relative; }
.current-tooltip {
  position: absolute;
  z-index: 6;
  background: #1d1417;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 2px solid var(--accent, var(--gold-soft));
  border-radius: 4px;
  padding: 10px 14px;
  max-width: 240px;
  min-width: 140px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.current-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.current-tooltip[hidden] { display: none; }
.current-tooltip__name {
  display: block;
  color: var(--accent, var(--gold-soft));
  text-transform: uppercase;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 6px;
}
.current-tooltip__def {
  display: block;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0;
  line-height: 1.35;
}

/* tessellated ground decoration */
.ground-pattern {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 280px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 30%, rgba(0,0,0,0.6) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='16' viewBox='0 0 28 16'><polygon points='0,16 14,0 28,16' fill='%23222' /><polygon points='14,0 28,16 42,0' fill='%23333' transform='translate(-14,0)' /></svg>");
  background-size: 28px 16px;
  background-position: bottom center;
  background-repeat: repeat-x;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
}

/* ============================================================
   STATS BAND — cream
   ============================================================ */
.stats-band {
  background: #291a52;
  padding: clamp(30px, 3.4vw, 48px) var(--gutter) clamp(36px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none; /* removed warm orange bottom-glow — keep section flat neutral */
  pointer-events: none;
}
.stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(10px, 1.6vw, 20px);
}
.stat {
  padding: 14px 0 14px;
  border-top: 1px solid rgba(20, 17, 14, 0.2);
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
}
.stat-num.gold  { color: var(--gold-deep); }
.stat-num.teal  { color: var(--teal); }
.stat-num.plum  { color: var(--plum); }
.stat-num.indigo{ color: var(--indigo); }
.stat-num .pct {
  font-size: 0.55em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 4px;
}
.stat-cap {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 12px;
  max-width: 26ch;
}
/* Comparative gap bars under each stat (scoped to the evidence band) */
.stats-band .stat-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.stats-band .stat-bar__lbl { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 3px; }
.stats-band .stat-bar__track { display: block; height: 7px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden; }
.stats-band .stat-bar__fill { display: block; height: 100%; width: var(--w, 0); border-radius: 4px; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
.stats-band .stats-grid.is-arming .stat-bar__fill { width: 0; }   /* JS zeroes them, then releases on scroll-in */
.stats-band .stat-bar__fill--cmp { background: rgba(255,255,255,0.40); }
.stat-cite {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.6);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(20, 17, 14, 0.12);
  max-width: 32ch;
}
.stat-cite sup { font-size: 10px; }
.stat-cite sup a {
  color: var(--plum);
  text-decoration: none;
  padding-left: 2px;
}
.stat-cite sup a:hover { text-decoration: underline; }

/* Evidence section on black — flip text light; magenta + stat numbers pop */
.stats-band .section-head-dark { color: #f3ece0; }
.stats-band .stats-framing__lede { color: rgba(255,255,255,0.82); }
.stats-band .stat { border-top-color: rgba(255,255,255,0.18); }
.stats-band .stat-cap { color: rgba(255,255,255,0.86); }
.stats-band .stat-cite { color: rgba(255,255,255,0.5); }
.stats-band .stat-cite a { color: rgba(255,255,255,0.85); }
.stats-band .stat-num.gold { color: var(--gold); }
.stats-band .stat-num.plum { color: #cf0e4e; }      /* magenta — pops on violet */
.stats-band .stat-num.indigo { color: #c7c7f2; }    /* lavender — legible on violet */
.stats-band .mono-tag { color: rgba(255,255,255,0.72); }
.stats-band .mono-tag .dot { background: var(--gold); }
.stats-band .section-rail__rule { background: linear-gradient(to right, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0) 100%); }

@media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PREDICT-THEN-REVEAL (evidence band) — guess the figure, then reveal.
   JS adds .is-predict to the grid + injects .stat-guess; numbers/bars stay in
   HTML (no-JS + safety-net reveal show real data). In predict mode the band runs
   a uniform 2-col (desktop) / 1-col (mobile) block layout, overriding the ledger.
   ============================================================ */
.stats-grid.is-predict { grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.8vw, 40px) clamp(28px, 4vw, 56px); }
.stats-grid.is-predict .stat { display: block; }
.stats-grid.is-predict .stat:not(.is-revealed) .stat-num,
.stats-grid.is-predict .stat:not(.is-revealed) .stat-bars { display: none; }
.stats-band .stat-guess { margin-top: 14px; }
.stats-band .stat-guess__lab { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.stats-band .stat-guess__val { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.stats-band .stat-guess__slider { -webkit-appearance: none; appearance: none; width: 100%; max-width: 300px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.18); outline: none; }
.stats-band .stat-guess__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.stats-band .stat-guess__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); cursor: grab; }
.stats-band .stat-guess__reveal { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold); color: var(--ink); border: 0; border-radius: 20px; padding: 9px 18px; cursor: pointer; }
.stats-band .stat-guess__reveal:hover { filter: brightness(1.06); }
.stats-band .stat-gap { display: none; font-family: var(--sans); font-size: 0.84rem; line-height: 1.45; color: rgba(255,255,255,0.7); margin-top: 12px; }
.stats-band .stat-gap b { color: #fff; }
.stats-band .stat-gap .miss { color: var(--gold); font-style: italic; }
.stat.is-revealed .stat-guess { display: none; }
.stat.is-revealed .stat-gap { display: block; }
@media (max-width: 680px) { .stats-grid.is-predict { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .stats-band .stat-bar__fill { transition: none; } }

/* ============================================================
   SOURCES & METHODS
   ============================================================ */
.sources {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(56px, 7vw, 92px);
  border-top: 1px solid rgba(20, 17, 14, 0.08);
}
.sources-inner {
  max-width: 920px;
  margin: 0 auto;
}
.sources-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 16px 0 32px;
}
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sources-list li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 4px 12px;
  padding: 18px 0;
  border-top: 1px solid rgba(20, 17, 14, 0.12);
}
.sources-list li:first-child { border-top: 1px solid rgba(20, 17, 14, 0.18); }
.src-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  padding-top: 4px;
}
.src-body {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.src-title {
  font-weight: 500;
  margin-right: 4px;
}
.src-body em { font-style: italic; }
.src-body strong { font-weight: 500; }
.src-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 41, 111, 0.3);
  padding-bottom: 1px;
}
.src-link:hover { border-bottom-color: var(--plum); }
.sources-note {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 17, 14, 0.12);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: rgba(20, 17, 14, 0.65);
}
.sources-note a {
  color: var(--plum);
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 41, 111, 0.3);
}
@media (max-width: 640px) {
  .sources-list li { grid-template-columns: 1fr; gap: 4px; }
}
/* Mobile ledger rows (≤520): each stat becomes a compact row — number + caption
   share the top line, the bar(s) drop to a full-width line below, source underneath.
   Pure CSS reflow of the existing markup (flex-wrap + order), so the count-up
   animation and bar fills are unaffected. Desktop/tablet grid is untouched. */
@media (max-width: 520px) {
  .stats-band .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .stats-band .stat { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 13px; padding: 16px 0; }
  .stats-band .stat-num { order: 1; flex: 0 0 auto; font-size: clamp(32px, 10vw, 40px); }
  .stats-band .stat-cap { order: 2; flex: 1 1 150px; margin-top: 0; max-width: none; font-size: 13px; }
  .stats-band .stat-bars { order: 3; flex: 0 0 100%; margin-top: 10px; }
  .stats-band .stat-cite { order: 4; flex: 0 0 100%; margin-top: 8px; }
}

/* ============================================================
   WHAT WE SEE — editorial
   ============================================================ */
.sees {
  background: var(--cream);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 8vw, 104px);
}
.sees-inner {
  max-width: var(--maxw); margin: 0 auto;
}
.sees-head { margin-bottom: clamp(36px, 5vw, 60px); }

/* Head split: heading + lede on the left, the fanned discipline deck on the right. */
.sees-head__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 33%, 372px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  margin-top: clamp(16px, 2.4vw, 26px);
}
.sees-head__text .sees-lede { max-width: 52ch; }

/* ============================================================
   DISCIPLINE MATCHING GAME (drag & drop) — one game, desktop + mobile.
   Replaces the former fan/flip deck. Content lives in HTML (readable with
   no JS); the controller adds .is-game to switch into play mode.
   ============================================================ */
.sees-head__cols--match { display: block; }   /* stack: thesis on top, full-width game below */
.sees-match { margin-top: clamp(20px, 3vw, 34px); }
.sees-match__bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sees-match__progress { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(13,13,13,0.6); }
.sees-match__progress b { color: var(--ink); }
.sees-match__ptrack { flex: 1; max-width: 240px; height: 4px; background: rgba(13,13,13,0.1); border-radius: 3px; overflow: hidden; }
.sees-match__pfill { display: block; height: 100%; width: 0; background: var(--indigo, #5252a0); border-radius: 3px; transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1); }
.sees-match__reset { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px solid rgba(13,13,13,0.25); color: var(--ink); padding: 8px 14px; border-radius: 20px; cursor: pointer; }
.sees-match__reset:hover { background: rgba(13,13,13,0.06); }

.sees-match__board { display: grid; grid-template-columns: minmax(0,1fr) clamp(280px, 32%, 320px); gap: clamp(20px,3vw,30px); align-items: start; }
.sees-match__discs { display: flex; flex-direction: column; gap: 10px; }
.sees-match__disc { background: #fffdf7; border: 1px solid #e2dac9; border-left: 3px solid var(--c, #c9c0ad); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: center; transition: box-shadow 0.15s, background 0.15s; }
.sees-match__glyph { grid-row: 1 / span 4; width: 36px; height: 36px; align-self: start; margin-top: 2px; }
.sees-match__no { grid-column: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--c, #9a917e); }
.sees-match__name { grid-column: 2; font-family: var(--serif); font-size: 1.2rem; line-height: 1.05; }
.sees-match__pr { grid-column: 2; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); margin: 6px 0 0; }
.sees-match__desc { grid-column: 2; font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; color: rgba(13,13,13,0.66); margin: 6px 0 0; }

/* slot (added by JS in game mode) */
.sees-match__slot { grid-column: 2; margin-top: 9px; }
.sees-match__slot--empty { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13,13,13,0.32); border: 1px dashed rgba(13,13,13,0.22); border-radius: 7px; padding: 7px 10px; display: block; }
.sees-match__slot--filled { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #fff; background: var(--c); border-radius: 7px; padding: 8px 11px; display: flex; align-items: center; gap: 7px; animation: seesMatchPop 0.3s; }

/* game mode: hide the inline answer + collapse desc until matched */
.sees-match.is-game .sees-match__pr { display: none; }
.sees-match.is-game .sees-match__desc { max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height 0.4s, opacity 0.3s, margin 0.3s; }
.sees-match.is-game .sees-match__disc.is-done .sees-match__desc { max-height: 80px; opacity: 1; margin-top: 8px; }
.sees-match.is-game .sees-match__disc.is-over { box-shadow: 0 0 0 2px var(--indigo, #5252a0); background: #faf7ef; }
.sees-match.is-game .sees-match__disc.is-wrong { animation: seesMatchShake 0.4s; }

.sees-match__tray { background: rgba(13,13,13,0.03); border: 1px solid #e2dac9; border-radius: 14px; padding: 16px; position: sticky; top: 96px; }
.sees-match__lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13,13,13,0.45); margin: 0 0 12px; }
.sees-match__chips { display: flex; flex-direction: column; gap: 9px; }
.sees-match__chip { font-family: var(--mono); font-size: 12.5px; background: #fffdf7; border: 1px solid #e2dac9; border-radius: 9px; padding: 12px 13px; cursor: grab; text-align: center; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity 0.25s, box-shadow 0.15s; }
.sees-match__chip:hover { box-shadow: 0 4px 12px -6px rgba(0,0,0,0.4); }
.sees-match__chip.is-dragging { opacity: 0.25; }
.sees-match__chip.is-placed { opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; border: 0; }
.sees-match__hint { font-family: var(--sans); font-style: italic; font-size: 0.82rem; color: rgba(13,13,13,0.5); margin: 12px 0 0; line-height: 1.4; }

.sees-match__ghost { position: fixed; z-index: 1000; pointer-events: none; font-family: var(--mono); font-size: 12.5px; background: #fff; border: 1px solid #e2dac9; border-radius: 9px; padding: 12px 13px; box-shadow: 0 14px 32px -8px rgba(0,0,0,0.5); transform: rotate(-2deg) scale(1.04); }

.sees-match__done { margin-top: 18px; background: #291a52; color: #f3ece0; border-radius: 14px; padding: 20px 22px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s; }
.sees-match__done.is-show { opacity: 1; transform: none; }
.sees-match__done b { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 1.3rem; }
.sees-match__done span { display: block; font-family: var(--sans); font-size: 0.92rem; color: rgba(255,255,255,0.78); margin-top: 6px; }

@keyframes seesMatchShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes seesMatchPop { 0%{transform:scale(0.9)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* Mobile: chip tray becomes a sticky bank under the nav (contained to this section). */
@media (max-width: 760px) {
  .sees-match__board { display: flex; flex-direction: column; gap: 14px; }
  .sees-match__tray { order: -1; position: sticky; top: 84px; z-index: 40; background: rgba(245,242,236,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  /* Wrap instead of horizontal scroll: chip pointerdown calls preventDefault
     to start the drag, which would otherwise swallow the swipe-to-scroll
     gesture. Wrapping shows all 7 chips at once and keeps drag clean. */
  .sees-match__chips { flex-direction: row; flex-wrap: wrap; overflow-x: visible; gap: 8px; padding-bottom: 4px; }
  .sees-match__chip { flex: 0 0 auto; white-space: nowrap; }
  .sees-match__hint { display: none; }
}
/* ============================================================
   MANIFESTO — the thesis block. Cream beat between the dark
   photo hero and the triptych. Centered serif statement that
   names what SLC is doing differently from comms agencies,
   culture consultants, and ops consultants: it reads the
   substrate underneath all three.
   ============================================================ */
.manifesto {
  background: var(--cream, #ece7e1);
  padding: clamp(40px, 5vw, 72px) var(--gutter, 28px);
  text-align: center;
  position: relative;
}
.manifesto__inner {
  max-width: 780px;
  margin: 0 auto;
}
.manifesto__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(13, 13, 13, 0.6);
  margin-bottom: 12px;
}
.manifesto__eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--plum, #a3296f);
  display: inline-block;
}
.manifesto__head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink, #0d0d0d);
  margin: 0 0 16px;
}
.manifesto__head em {
  font-style: italic;
  color: var(--gold-deep, #b67a18);
}
.manifesto__sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(13, 13, 13, 0.78);
  max-width: 56ch;
  margin: 0 auto;
}
.manifesto__sub strong {
  font-weight: 600;
  color: var(--ink, #0d0d0d);
  font-style: normal;
}
.manifesto__sub em {
  font-style: italic;
  color: var(--gold-deep, #b67a18);
}

/* ============================================================
   BRIDGE — written transition from the seven-disciplines quiz
   into the "by role" tabs. A short beat: eyebrow + serif statement,
   centered, lots of breathing room above and below.
   ============================================================ */
.sees-bridge {
  max-width: 760px;
  margin: clamp(36px, 5vw, 64px) auto clamp(28px, 4vw, 52px);
  padding: 0 var(--gutter, 28px);
  text-align: center;
}
.sees-bridge__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(13, 13, 13, 0.55);
  margin-bottom: 14px;
}
.sees-bridge__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--plum, #a3296f);
  display: inline-block;
}
.sees-bridge__line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--ink, #0d0d0d);
  margin: 0 auto;
  max-width: 36ch;
}
.sees-bridge__line em {
  font-style: italic;
  color: var(--gold-deep, #b67a18);
}

/* ============================================================
   QUIZ MODE — replaces the drag pattern with a linear flashcard
   walk-through. One discipline center-stage, all 7 practice chips
   below. Activated when JS adds .sees-match.is-quiz; the original
   .sees-match__disc cards remain in the DOM (no-JS fallback) but
   are hidden when the quiz is running.
   ============================================================ */
.sees-match.is-quiz .sees-match__discs,
.sees-match.is-quiz .sees-match__tray,
.sees-match.is-quiz .sees-match__hint { display: none; }
.sees-match.is-quiz .sees-match__board { display: block; }

.sees-quiz { max-width: 880px; margin: 0 auto; text-align: center; }
.sees-quiz__meter { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13,13,13,0.55); margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.sees-quiz__pips { display: flex; gap: 6px; }
.sees-quiz__pip { width: 18px; height: 6px; border-radius: 3px; background: rgba(13,13,13,0.12); transition: background 0.3s; }
.sees-quiz__pip.is-done { background: var(--gold, #db9a26); }
.sees-quiz__pip.is-active { background: var(--plum, #a3296f); }

.sees-quiz__card { background: #fffdf7; border: 1px solid #e2dac9; border-left: 4px solid var(--c, #a3296f); border-radius: 16px; padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 48px); transition: border-color 0.3s, transform 0.35s, opacity 0.35s; position: relative; }
.sees-quiz__card.is-leaving { opacity: 0; transform: translateX(-30px); }
.sees-quiz__card.is-entering { opacity: 0; transform: translateX(30px); }
.sees-quiz__card__glyph { width: 56px; height: 56px; margin: 0 auto 12px; }
.sees-quiz__card__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); display: block; margin-bottom: 6px; }
.sees-quiz__card__name { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; margin: 0 0 8px; color: var(--ink, #0d0d0d); }
.sees-quiz__card__desc { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: rgba(13,13,13,0.68); margin: 0 auto; max-width: 38ch; }
.sees-quiz__prompt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(13,13,13,0.55); margin: 24px 0 14px; }

.sees-quiz__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.sees-quiz__chip { font-family: var(--mono); font-size: 13px; background: #fffdf7; border: 1px solid #e2dac9; border-radius: 9px; padding: 12px 16px; cursor: pointer; color: var(--ink, #0d0d0d); transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s; }
.sees-quiz__chip:hover { border-color: var(--ink, #0d0d0d); background: #fffaf0; transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0,0,0,0.4); }
.sees-quiz__chip.is-wrong { animation: seesQuizShake 0.42s; border-color: #c33; color: #c33; }
.sees-quiz__chip.is-right { background: var(--c); border-color: var(--c); color: #fff; transform: scale(1.06); }
.sees-quiz__chip.is-done { opacity: 0.3; pointer-events: none; }
@keyframes seesQuizShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 80%{transform:translateX(-3px)} }

.sees-quiz__reset { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px solid rgba(13,13,13,0.25); padding: 7px 13px; border-radius: 18px; cursor: pointer; color: var(--ink, #0d0d0d); }
.sees-quiz__reset:hover { background: rgba(13,13,13,0.06); }

.sees-quiz__done { margin-top: 24px; background: var(--ink, #0d0d0d); color: var(--cream, #ece7e1); border-radius: 14px; padding: 22px 28px; display: none; text-align: center; }
.sees-quiz__done.show { display: block; animation: seesQuizPop 0.35s; }
.sees-quiz__done b { font-family: var(--serif); font-weight: 500; font-size: 1.22rem; color: var(--gold, #db9a26); display: block; margin-bottom: 6px; }
@keyframes seesQuizPop { 0%{transform:scale(.92); opacity:0} 60%{transform:scale(1.04); opacity:1} 100%{transform:scale(1)} }

.sees-quiz__summary { display: none; margin-top: 24px; text-align: left; }
.sees-quiz__summary.show { display: block; animation: seesQuizPop 0.35s; }
.sees-quiz__summary h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(13,13,13,0.55); margin: 0 0 14px; text-align: center; }
.sees-quiz__summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sees-quiz__summary__cell { background: #fffdf7; border: 1px solid #e2dac9; border-left: 3px solid var(--c); border-radius: 8px; padding: 10px 14px; }
.sees-quiz__summary__cell b { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.1; color: var(--ink, #0d0d0d); }
.sees-quiz__summary__cell span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--c); margin-top: 2px; }

@media (max-width: 680px) {
  .sees-quiz__card__name { font-size: clamp(26px, 7.5vw, 36px); }
  .sees-quiz__card__desc { font-size: 0.95rem; }
  .sees-quiz__chip { font-size: 12px; padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sees-quiz__card, .sees-quiz__chip, .sees-quiz__pip { transition: none; }
  .sees-quiz__chip.is-wrong, .sees-quiz__done.show, .sees-quiz__summary.show { animation: none; }
}

/* === Matching game · Layout B (2026-06-13): full-width, hero card left /
   prompt + chips right. Replaces the centered 880px lane. Meter spans the
   top; the done/summary panels span full width. Collapses to a stack ≤760px. === */
.sees-match.is-quiz .sees-quiz {
  max-width: none;
  margin: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: clamp(14px, 2vw, 22px);
  align-items: start;
}
.sees-match.is-quiz .sees-quiz__meter { grid-column: 1 / -1; }
.sees-match.is-quiz .sees-quiz__card {
  grid-column: 1; grid-row: 2 / span 2;
  align-self: start; margin: 0;
}
.sees-match.is-quiz .sees-quiz__prompt {
  grid-column: 2; grid-row: 2;
  align-self: start; margin: 2px 0 12px;
}
.sees-match.is-quiz .sees-quiz__chips {
  grid-column: 2; grid-row: 3;
  align-self: start; justify-content: flex-start;
}
.sees-match.is-quiz .sees-quiz__done,
.sees-match.is-quiz .sees-quiz__summary { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .sees-match.is-quiz .sees-quiz { display: block; }
  .sees-match.is-quiz .sees-quiz__chips { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sees-match__pfill, .sees-match__done, .sees-match.is-game .sees-match__desc { transition: none; }
  .sees-match__slot--filled, .sees-match.is-game .sees-match__disc.is-wrong { animation: none; }
}

/* ---- Fanned applied-social-science cards ---- */
.sees-fan { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sees-fan__label {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(20,17,14,0.42);
}
.sees-fan__deck { position: relative; width: 100%; height: 296px; }
.sees-fan__card {
  --total: 7; --mid: 3; --span: 44deg;
  --rot: calc((var(--i) - var(--mid)) * (var(--span) / 6));
  --offset: calc((var(--i) - var(--mid)) * 33px);
  position: absolute; top: 16px; left: 50%;
  width: 154px; min-height: 198px;
  transform-origin: 50% 96%;
  transform: translateX(calc(-50% + var(--offset))) rotate(var(--rot));
  z-index: var(--i);
  display: flex; flex-direction: column; gap: 7px;
  background: #fffdf7; border: 1px solid #e2dac9; border-top: 3px solid var(--c);
  border-radius: 9px; box-shadow: 0 10px 22px -12px rgba(0,0,0,0.45);
  padding: 15px 14px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s ease, opacity 0.4s ease;
  transition-delay: calc(var(--i) * 0.055s);
}
/* Deal-in: deck starts stacked + hidden; JS releases on scroll-in so cards fan open staggered. */
.sees-fan__deck.is-dealing .sees-fan__card {
  transform: translateX(-50%) rotate(0deg) translateY(34px);
  opacity: 0;
  transition-delay: 0s;
}
.sees-fan__card:hover, .sees-fan__card:focus-visible {
  transition-delay: 0s;
  transform: translateX(calc(-50% + var(--offset))) rotate(0deg) translateY(-30px) scale(1.06);
  height: auto; z-index: 30; outline: none;
  box-shadow: 0 26px 44px -14px rgba(0,0,0,0.55);
}
.sees-fan__no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--c); }
.sees-fan__glyph { width: 26px; height: 26px; color: var(--c); margin: -2px 0; }
.sees-fan__practice { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); line-height: 1.2; }
.sees-fan__name {
  font-family: var(--serif); font-weight: 400; font-size: 0.92rem; line-height: 1.14;
  color: var(--ink);
  /* No mid-word breaking — longest single word ("Communication") fits one
     line at this size in the 154px card, so two-word names wrap cleanly. */
  overflow-wrap: normal; word-break: keep-all; hyphens: manual;
}
.sees-fan__desc {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.4;
  color: rgba(20,17,14,0.66); margin-top: auto;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease 0.04s, transform 0.2s ease 0.04s;
}
.sees-fan__card:hover .sees-fan__desc,
.sees-fan__card:focus-visible .sees-fan__desc { opacity: 1; transform: none; }
.sees-fan__hint { font-family: var(--sans); font-style: italic; font-size: 0.8rem; color: rgba(20,17,14,0.42); }

/* Deck controls (counter + prev/next) — base hidden (fan/desktop); the mobile
   media query below re-shows them. Declared BEFORE the media query so the
   media rule (equal specificity) wins by source order. */
.sees-fan__controls { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.sees-fan__nav { font-family: var(--mono); font-size: 15px; line-height: 1; background: var(--ink); color: #fff; border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.sees-fan__counter { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: rgba(20,17,14,0.6); min-width: 54px; text-align: center; }

/* Mobile flip card (≤980): replaces the stacked deck. Front = symbol + discipline;
   back = comms practice + description. The deck controller builds it from the same
   seven cards, so the desktop fan markup stays untouched. Hidden on desktop. */
.sees-flip { display: none; }
.sees-flip__card { display: block; width: 100%; max-width: 320px; height: 296px; margin: 0 auto; background: none; border: 0; padding: 0; cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent; }
.sees-flip__inner { display: block; position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; }
.sees-flip__card.is-flipped .sees-flip__inner { transform: rotateY(180deg); }
.sees-flip__face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fffdf7; border: 1px solid #e2dac9; border-top: 3px solid var(--c); border-radius: 14px; box-shadow: 0 12px 26px -14px rgba(0,0,0,0.4); padding: 26px 24px; text-align: left; }
.sees-flip__front { align-items: center; justify-content: center; text-align: center; gap: 16px; }
.sees-flip__front .sees-fan__no { font-size: 11px; }
.sees-flip__front .sees-fan__glyph { width: 60px; height: 60px; margin: 0; }
.sees-flip__name { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.06; color: var(--ink); }
.sees-flip__hint { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13,13,13,0.32); }
.sees-flip__back { transform: rotateY(180deg); justify-content: center; gap: 13px; }
.sees-flip__prlab { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(13,13,13,0.4); display: block; margin-bottom: 3px; }
.sees-flip__pr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.sees-flip__desc { font-family: var(--serif); font-size: 1.12rem; line-height: 1.34; color: var(--ink); }
.sees-flip__nm-sm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13,13,13,0.45); }

/* Below the two-column threshold: stop fanning, lay the cards out as a simple
   grid with everything legible (no hover dependency). */
/* Mobile/tablet (≤980): stacked tap-through deck — one card, tap to advance.
   Desktop (>980) keeps the fan. The controller JS manages the stack transforms. */
@media (max-width: 980px) {
  .sees-head__cols { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .sees-fan { align-items: stretch; }
  /* Mobile: replace the fan/stacked deck with the flip card. */
  .sees-fan__deck { display: none; }
  .sees-fan__hint { display: none; }        /* "Hover a card" is meaningless on touch */
  .sees-flip { display: block; }
  .sees-fan__controls { display: flex; }
}

.section-head-dark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 14px 0 0;
  max-width: 18ch;
  font-variation-settings: "opsz" 144;
}
.sees-grid { display: block; }
.sees-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--indigo-700);
  text-transform: uppercase;
}
.sees-row__hl {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.12;
  color: var(--ink);
}
/* Master list + detail — headlines scan on the left; click loads the reading on the right */
.sees-md {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 4vw, 50px);
  max-width: 1000px;
  margin-top: clamp(8px, 1.5vw, 16px);
  border-top: 1px solid rgba(20,17,14,0.15);
  padding-top: 8px;
}
.sees-md__list { display: flex; flex-direction: column; }
.sees-md__tab {
  text-align: left; background: none; border: none; width: 100%; cursor: pointer;
  border-bottom: 1px solid rgba(20,17,14,0.10);
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(18px, 2.2vw, 24px) 14px clamp(18px, 2.2vw, 24px) 0;
  transition: padding 0.2s ease, border-color 0.2s ease;
}
.sees-md__t {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.12;
  color: rgba(20,17,14,0.46); transition: color 0.18s ease;
}
.sees-md__tab:hover .sees-md__t { color: var(--indigo-700); }
.sees-md__tab.is-active {
  border-left: 3px solid var(--indigo);
  padding-left: 16px; margin-left: -19px;
}
.sees-md__tab.is-active .sees-md__t { color: var(--ink); }
/* Sliding active-indicator (JS adds .has-ind; static border-left is the no-JS fallback) */
.sees-md__list.has-ind { position: relative; padding-left: 16px; }
.sees-md__list.has-ind .sees-md__tab.is-active { border-left: none; padding-left: 0; margin-left: 0; }
.sees-md__rail-ind {
  position: absolute; left: 0; top: 0; width: 3px; height: 0;
  background: var(--indigo); border-radius: 2px;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1), height 0.32s cubic-bezier(.4,0,.2,1);
}
.sees-md__detail { padding-top: clamp(2px, 1vw, 10px); }
/* True crossfade between panes (JS adds .has-fade + manages height; no-JS falls back to the display toggle) */
.sees-md__detail.has-fade { position: relative; transition: min-height 0.34s ease; }
.sees-md__detail.has-fade .sees-md__pane {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; transform: translateY(8px); animation: none; pointer-events: none;
  transition: opacity 0.34s ease, transform 0.34s ease;
}
.sees-md__detail.has-fade .sees-md__pane[hidden] { display: block; }   /* keep in layout so it can fade */
.sees-md__detail.has-fade .sees-md__pane.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sees-md__rail-ind, .sees-md__detail.has-fade, .sees-md__detail.has-fade .sees-md__pane { transition: none; }
}
.sees-md .sees-ic { width: 46px; height: 46px; color: var(--indigo); margin-bottom: 16px; }
.sees-md__hl {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1;
  margin: 0 0 16px; color: var(--ink);
}
.sees-md__pane { display: none; }
.sees-md__pane.is-active { display: block; animation: seesPaneIn 0.32s ease; }
@keyframes seesPaneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sees-md__pane p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6; margin: 0;
  color: rgba(20,17,14,0.72); max-width: 56ch;
}
.sees-md__pane p em { font-style: italic; color: var(--indigo); }
@media (max-width: 760px) {
  .sees-md { grid-template-columns: 1fr; gap: 24px; }
  .sees-md__tab.is-active { margin-left: 0; }
}

/* === "Pick your seat" — Layout D: top segmented pill tabs + full-width panel.
   (2026-06-13) Overrides the left-rail layout above. The tab-switch + crossfade
   JS still drives it; the vertical rail indicator is hidden in this layout. === */
.sees-md { display: block; max-width: 1000px; }
.sees-md__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0 !important;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.sees-md__rail-ind { display: none !important; }
.sees-md__tab {
  width: auto;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  padding: 9px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(20,17,14,0.22) !important;
  border-radius: 999px;
}
.sees-md__tab .sees-no { color: rgba(20,17,14,0.5); }
.sees-md__tab .sees-no::after { content: " ·"; opacity: 0.55; }
.sees-md__tab .sees-md__t {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20,17,14,0.72);
}
.sees-md__tab:hover { border-color: rgba(20,17,14,0.42) !important; }
.sees-md__tab:hover .sees-md__t { color: var(--ink); }
.sees-md__tab.is-active {
  background: var(--ink);
  border-color: var(--ink) !important;
}
.sees-md__tab.is-active .sees-no,
.sees-md__tab.is-active .sees-md__t { color: var(--cream); }
.sees-md__detail { padding-top: 4px; }
/* Two-column pane (Option A): description left, "what you leave with" right. */
.sees-md__pane-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.sees-md__pane-main p + p { margin-top: 0.85em; }
.sees-md__leave {
  border-left: 1px solid rgba(20,17,14,0.16);
  padding-left: clamp(20px, 2.5vw, 30px);
}
.sees-md__leave-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-700, #996c1b);
  margin: 4px 0 16px;
}
.sees-md__leave-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.sees-md__leave-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.sees-md__leave-list li::before {
  content: "\25C6";
  position: absolute;
  left: 0; top: 2px;
  font-size: 11px;
  color: var(--gold, #db9a26);
}
@media (max-width: 760px) {
  .sees-md__pane-grid { grid-template-columns: 1fr; gap: 22px; }
  .sees-md__leave { border-left: none; border-top: 1px solid rgba(20,17,14,0.16); padding-left: 0; padding-top: 18px; }
}

/* === Consolidated section (2026-06-13): disciplines list (left) + read-by-seat (right).
   Replaces the old matching game + bridge. Disciplines expand their definition on
   hover/focus (CSS) and stay pinned on tap (.is-open via JS). === */
.sees-cons {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 34px);
}
@media (max-width: 900px) { .sees-cons { grid-template-columns: 1fr; gap: 40px; } }
.sees-cons__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(20,17,14,0.55); margin: 0 0 16px;
}
.sees-cons__label .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sees-cons__label .dot-indigo { background: var(--indigo, #5252a0); }
.sees-cons__label .dot-plum { background: var(--plum, #a3296f); }

.sees-disc__list { list-style: none; margin: 0; padding: 0; }
.sees-disc__item { border-top: 1px solid rgba(20,17,14,0.12); }
.sees-disc__item:last-child { border-bottom: 1px solid rgba(20,17,14,0.12); }
.sees-disc__btn {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px; text-align: left; font: inherit; color: var(--ink);
}
.sees-disc__glyph { width: 27px; height: 27px; flex: 0 0 auto; }
.sees-disc__no { font-family: var(--mono); font-size: 10px; color: var(--c, #9a917e); flex: 0 0 auto; min-width: 28px; }
.sees-disc__name { font-family: var(--serif); font-size: 1.1rem; line-height: 1.1; color: var(--ink); flex: 1 1 auto; transition: color 0.18s ease; }
.sees-disc__pr { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20,17,14,0.5); flex: 0 0 auto; text-align: right; }
.sees-disc__chev { font-family: var(--mono); font-size: 16px; color: var(--c, #a3296f); flex: 0 0 auto; line-height: 1; transition: transform 0.3s ease; }
.sees-disc__def { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.38s ease, opacity 0.3s ease; }
/* Tap-toggle (.is-open) is the authority on touch — works to open AND close. */
.sees-disc__item.is-open .sees-disc__name { color: var(--c); }
.sees-disc__item.is-open .sees-disc__chev { transform: rotate(45deg); }
.sees-disc__item.is-open .sees-disc__def { max-height: 96px; opacity: 1; }
/* Hover/focus expand only where hovering is real (desktop) — otherwise sticky
   :hover/:focus after a tap would keep the panel stuck open on mobile. */
@media (hover: hover) {
  .sees-disc__item:hover .sees-disc__name { color: var(--c); }
  .sees-disc__item:hover .sees-disc__chev,
  .sees-disc__item:focus-within .sees-disc__chev { transform: rotate(45deg); }
  .sees-disc__item:hover .sees-disc__def,
  .sees-disc__item:focus-within .sees-disc__def { max-height: 96px; opacity: 1; }
}
.sees-disc__def p { margin: 0 0 13px 38px; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: rgba(20,17,14,0.66); }
@media (max-width: 460px) { .sees-disc__pr { display: none; } }

/* Section head hero: heading + lede (left) beside a photo (right) — fills the
   space the heading used to leave empty. (2026-06-13) */
.sees-head__hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(16px, 2.4vw, 26px);
}
.sees-head__photo { margin: 0; }
.sees-head__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 20px 44px -24px rgba(13, 13, 13, 0.45);
}
@media (max-width: 820px) {
  .sees-head__hero { grid-template-columns: 1fr; gap: 26px; }
  .sees-head__photo img { aspect-ratio: 16 / 9; max-height: 320px; }
}

/* N° 04 — full-width structural thesis below the 3-column row */
.sees-thesis {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 56px);
  background: #eeeef6;
  border-left: 4px solid var(--indigo, #5252a0);
  border-radius: 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.sees-thesis .sees-no {
  color: var(--indigo, #5252a0);
  padding-top: 6px;
  white-space: nowrap;
}
.sees-thesis p {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.sees-thesis em { font-style: italic; color: var(--mute, #5b5b5b); }
.sees-thesis strong { font-weight: 600; color: var(--indigo, #5252a0); }
@media (max-width: 820px) {
  .sees-thesis { grid-template-columns: 1fr; gap: 12px; }
}

/* The unspoken needs — three things the sector can't name */
.sees-needs { margin-top: clamp(30px, 4vw, 50px); }
.sees-needs__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(20,17,14,0.55); margin: 0 0 18px;
}
.sees-needs__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.sees-needs__list li {
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: rgba(20,17,14,0.74); border-top: 2px solid var(--plum, #a3296f); padding-top: 14px;
}
.sees-needs__list strong {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.15;
  color: var(--ink); margin-bottom: 7px;
}
.sees-needs__list em { font-style: italic; color: var(--plum, #a3296f); }
@media (max-width: 760px) {
  .sees-needs__list { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   SECTOR EVIDENCE — count-up stat cards inside .sees
   ============================================================ */
.sector-evidence {
  margin-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid rgba(20,17,14,0.15);
  padding-top: clamp(28px, 3.5vw, 44px);
}
.sector-evidence-tag { margin-bottom: clamp(20px, 2.5vw, 32px); display: inline-flex; }
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.sector-card {
  position: relative;
  background: transparent;
  padding: 22px 4px 6px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.sector-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: width 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sector-card[data-bar="plum"]   .sector-bar { background: var(--plum); }
.sector-card[data-bar="gold"]   .sector-bar { background: var(--gold); }
.sector-card[data-bar="orange"] .sector-bar { background: var(--orange); }
.sector-card[data-bar="teal"]   .sector-bar { background: var(--teal); }
.sector-card.in-view .sector-bar { width: 100%; }

.sector-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-variation-settings: "opsz" 144;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.sector-num.plum   { color: var(--plum); }
.sector-num.gold   { color: var(--gold); }
.sector-num.orange { color: var(--orange); }
.sector-num.teal   { color: var(--teal); }
.sector-suffix {
  font-family: var(--serif);
  font-size: 0.72em;
  letter-spacing: -0.01em;
}
.sector-cap {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
}
.sector-cite {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,17,14,0.55);
  margin: auto 0 0;
}
@media (max-width: 980px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .sector-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   NAMED CONDITIONS — catalog
   ============================================================ */
.conditions {
  background: var(--cream-2);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 8vw, 104px);
  border-top: 1px solid rgba(20,17,14,0.08);
}
.conditions-head {
  max-width: var(--maxw); margin: 0 auto clamp(36px, 5vw, 60px);
}
.conditions-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-style: italic;
  line-height: 1.5;
  margin-top: 18px;
  max-width: 56ch;
  color: rgba(20,17,14,0.7);
}
.condition-list {
  max-width: var(--maxw); margin: 0 auto;
  list-style: none; padding: 0;
  border-top: 1px solid rgba(20,17,14,0.15);
}
.cond {
  display: grid;
  grid-template-columns: 80px 64px 1fr 2fr auto;
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid rgba(20,17,14,0.15);
  transition: background 0.2s, padding 0.2s;
  position: relative;
}
.cond:hover {
  background: rgba(163, 41, 111, 0.05);
  padding-left: 16px;
}
.cond:hover .cond-name { color: var(--plum); }
.cond-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}
.cond-root {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  justify-self: start;
  text-transform: uppercase;
}
.r-gold { color: var(--gold-deep); }
.r-teal { color: var(--teal); }
.r-plum { color: var(--plum); }

.cond-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s;
}
.cond-def {
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
  margin: 0;
  color: rgba(20,17,14,0.72);
}
.cond-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(20,17,14,0.5);
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cond {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "no name"
      "no def"
      "root tag";
    gap: 6px 16px;
  }
  .cond-no { grid-area: no; }
  .cond-root { grid-area: root; align-self: start; }
  .cond-name { grid-area: name; }
  .cond-def  { grid-area: def; }
  .cond-tag  { grid-area: tag; align-self: end; justify-self: end; }
}

/* ============================================================
   EVIDENCE TILES — cream
   ============================================================ */
.evidence {
  background: var(--cream-2);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 8vw, 104px);
}
.evidence-head {
  max-width: var(--maxw); margin: 0 auto clamp(36px, 5vw, 60px);
}
.evidence-head .section-head-dark { max-width: 22ch; }
.evidence-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.plate {
  background: var(--cream);
  padding: 14px;
  margin: 0;
  border: 1px solid rgba(20,17,14,0.1);
  box-shadow: 0 20px 50px -25px rgba(20,17,14,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}
.plate:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -25px rgba(20,17,14,0.3); }
.plate-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  margin-bottom: 14px;
}
.plate-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
  transition: transform 0.6s;
}
.plate:hover .plate-photo img { transform: scale(1.04); }
.plate figcaption p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  margin: 10px 0 4px;
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 880px) { .evidence-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* services footer — link to full /services page */
.services-footer {
  max-width: var(--maxw);
  margin: clamp(40px, 5vw, 64px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.services-footnote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
  color: var(--mute, #5b5b5b);
  max-width: 64ch;
  margin: 0;
}

/* ----- SERVICES variant of the plate layout ----- */
.services-sub {
  max-width: 56ch;
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(20,17,14,0.78);
}
/* Homepage copy rewrite (May 2026) — evidence framing + observation lede */
.stats-framing__head { margin: 16px 0 12px; }
.stats-framing__lede {
  max-width: 64ch; margin: 0 0 clamp(28px, 3.5vw, 44px);
  font-family: var(--sans); font-size: 17px; line-height: 1.58;
  color: #0d0d0d;
}
.sees-lede {
  max-width: 66ch; margin: 16px 0 0;
  font-family: var(--sans); font-size: 17px; line-height: 1.58;
  color: rgba(20,17,14,0.78);
}
/* Bridge band — slim connective beat between the opening and the framework */
.bridge-band {
  background: #291a52;                  /* full-bleed violet-lean band, edge to edge */
  padding: clamp(34px, 4.5vw, 56px) var(--gutter);
}
.bridge-band__inner {
  max-width: 880px; margin: 0 auto; text-align: center;
}
.bridge-band__inner .mono-tag { justify-content: center; color: rgba(255,255,255,0.78); }
.bridge-band__inner .mono-tag .dot { background: #db9a26; }
.bridge-band__lede {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.94);
}
.bridge-band__lede strong { color: #db9a26; font-weight: 600; }
/* Diagnostic map toggle — Root Organism diagram is hidden until revealed (desktop) */
.legend-revealer { display: flex; justify-content: center; margin-top: clamp(22px, 3.5vw, 38px); }
@media (max-width: 760px) { .legend-revealer { display: none; } }

/* Dual diagnostics block (Conditions + Postures) — Layout 3, two co-equal CTAs */
.dual-dx { max-width: var(--maxw); margin: clamp(26px,3.5vw,44px) auto 0; }
.dual-dx__panel { border: 1.5px solid rgba(13, 13, 13,.16); border-radius: 18px; overflow: hidden; background: #ffffff; }
.dual-dx__cols { display: grid; grid-template-columns: 1fr 1fr; }
.dual-dx__col { padding: clamp(26px,3vw,38px); }
.dual-dx__icon { width: 40px; height: 40px; display: block; margin-bottom: 14px; }
.dual-dx__col--c { border-right: 1.5px solid rgba(13, 13, 13,.12); }
.dual-dx__for { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 12px; }
.dual-dx__col--c .dual-dx__for { color: #a3296f; }
.dual-dx__col--p .dual-dx__for { color: #0c8c89; }
.dual-dx__name { font-family: var(--serif); font-weight: 500; font-size: clamp(24px,2.4vw,29px); line-height: 1.05; color: #0d0d0d; margin: 0 0 10px; }
.dual-dx__body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: rgba(13, 13, 13,.78); margin: 0; }
.dual-dx__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid rgba(13, 13, 13,.12); }
.dual-dx__cta { padding: 22px; text-align: center; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; transition: filter .2s ease; }
.dual-dx__cta:hover { filter: brightness(1.08); }
.dual-dx__cta--c { background: #a3296f; }
.dual-dx__cta--p { background: #0c8c89; }
.dual-dx__bridge { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: rgba(13, 13, 13,.74); text-align: center; max-width: 74ch; margin: 24px auto 0; }

/* ============================================================
   OPTION D — Comparison table layout.
   3-column grid inside the panel: rowlab + Conditions + Postures.
   Header row (glyphs + names), data rows (For / What it names / You leave
   with), footer row with the two pill CTAs. Mobile: stacks per row, each
   cell gets a colored left rule indicating its lane.
   ============================================================ */
.dual-dx__table { background: transparent; }
.dual-dx__thead, .dual-dx__row, .dual-dx__tfoot { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 0 clamp(18px, 2.2vw, 28px); padding: 18px clamp(22px, 2.6vw, 32px); }
.dual-dx__thead { background: rgba(13, 13, 13, 0.03); border-bottom: 1.5px solid rgba(13, 13, 13, 0.14); padding-top: 22px; padding-bottom: 22px; }
.dual-dx__row + .dual-dx__row, .dual-dx__tfoot, .dual-dx__row { border-top: 1px solid rgba(13, 13, 13, 0.12); }
.dual-dx__tfoot { background: rgba(13, 13, 13, 0.02); align-items: center; }
.dual-dx__rowlab { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13, 13, 13, 0.55); padding-top: 4px; align-self: start; }
.dual-dx__tfoot .dual-dx__rowlab { align-self: center; padding-top: 0; }
.dual-dx__cell { font-family: var(--sans); font-size: 0.94rem; line-height: 1.5; color: rgba(13, 13, 13, 0.78); }
.dual-dx__hcol { display: flex; flex-direction: column; gap: 8px; }
.dual-dx__hcol svg { width: 36px; height: 36px; }
.dual-dx__hcol .dual-dx__for { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c); margin: 0; }
.dual-dx__hcol .dual-dx__name { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.05; margin: 0; color: var(--ink); }
.dual-dx__hcol--c { --c: #a3296f; }
.dual-dx__hcol--p { --c: #0c8c89; }

/* CTA: inline rounded pill (replaces the old full-width foot panels). */
.dual-dx__cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 24px; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; transition: filter 0.2s ease; }
.dual-dx__cta:hover { filter: brightness(1.06); }
.dual-dx__cta--c { background: #a3296f; }
.dual-dx__cta--p { background: #0c8c89; }

/* Mobile: stack rows (label, cell-c, cell-p) vertically; cells get a colored
   left-rule so the lane is still legible without the table columns. */
@media (max-width: 760px) {
  .dual-dx__thead, .dual-dx__row, .dual-dx__tfoot { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .dual-dx__cell--c, .dual-dx__cell--p { border-left: 3px solid var(--c); padding-left: 12px; }
  .dual-dx__cell--c { --c: #a3296f; }
  .dual-dx__cell--p { --c: #0c8c89; }
  .dual-dx__hcol .dual-dx__name { font-size: 1.18rem; }
}
/* Mobile segmented toggle — hidden by default (desktop & no-JS); shown only ≤760px once JS adds .has-seg. */
.dual-dx__seg { display: none; }
.dual-dx__segbtn { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 11px 6px; border-radius: 9px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(13, 13, 13,.55); transition: color .3s ease; }
.dual-dx__segbtn.is-on { color: #fff; }
.dual-dx__segpill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: #a3296f; transition: transform .32s cubic-bezier(.4,0,.2,1), background .32s ease; }
@media (max-width: 760px) {
  .dual-dx__cols, .dual-dx__foot { grid-template-columns: 1fr; }
  .dual-dx__col--c { border-right: none; border-bottom: 1.5px solid rgba(13, 13, 13,.12); }
  /* With JS (.has-seg): show the toggle and reveal one diagnostic at a time. */
  .dual-dx.has-seg .dual-dx__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: relative; margin: 14px 14px 0; padding: 4px; background: rgba(13, 13, 13,.06); border-radius: 12px; }
  .dual-dx.has-seg .dual-dx__col--c { border-bottom: none; }
  .dual-dx.has-seg[data-show="c"] .dual-dx__col--p,
  .dual-dx.has-seg[data-show="c"] .dual-dx__cta--p { display: none; }
  .dual-dx.has-seg[data-show="p"] .dual-dx__col--c,
  .dual-dx.has-seg[data-show="p"] .dual-dx__cta--c { display: none; }
}
.diag-toolhead { max-width: var(--maxw); margin: clamp(36px,4.5vw,58px) auto clamp(10px,1.5vw,18px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dx-switch { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(13,13,13,.62); background: rgba(13,13,13,.05); border: 1px solid rgba(13,13,13,.15);
  border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
.dx-switch:hover { color: #0d0d0d; border-color: rgba(13,13,13,.4); background: rgba(13,13,13,.08); }
.diagnostic.dx-unchosen .dx-switch { display: none; }

/* Posture → Condition PAIR GRID (inside the dual diagnostics block) */
.dx-grid-wrap { max-width: var(--maxw); margin: clamp(24px,3vw,40px) auto 0; }
.dx-grid__lbl { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dx-grid__lbl .t { color: #0c8c89; } .dx-grid__lbl .c { color: #a3296f; }
.dx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.dx-cell { position: relative; text-align: left; background: #ffffff; border: none; border-left: 3px solid var(--rc);
  border-radius: 8px; padding: 15px 16px; cursor: pointer; display: flex; flex-direction: column; font-family: var(--serif);
  transition: background .18s, box-shadow .18s, transform .12s; }
.dx-cell--r { --rc: #db9a26; } .dx-cell--p { --rc: #0c8c89; } .dx-cell--i { --rc: #a3296f; }
.dx-cell__code { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: rgba(13, 13, 13,.45); }
.dx-cell__p { font-family: var(--serif); font-weight: 500; font-size: 17px; color: #0d0d0d; margin: 2px 0 6px; }
.dx-cell__c { font-family: var(--serif); font-size: 14px; color: #721d4e; }
.dx-cell__c::before { content: "↳ "; color: #db9a26; }
.dx-cell:hover { box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); transform: translateY(-1px); }
.dx-cell.is-flagged { border-left-width: 6px; box-shadow: 0 0 0 1.5px var(--rc) inset; }
.dx-cell--r.is-flagged { background: #f7e7c5; } .dx-cell--p.is-flagged { background: #cfe8e7; } .dx-cell--i.is-flagged { background: #eed3e2; }
.dx-cell.is-flagged .dx-cell__c { font-weight: 600; }
.dx-cell.is-flagged::after { content: "\2713"; position: absolute; top: 11px; right: 13px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--rc); }
.dx-grid__read { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: rgba(13, 13, 13,.55); text-align: center; margin-top: 16px; }
.dx-map__note { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5;
  color: rgba(13, 13, 13,.74); text-align: center; max-width: 60ch; margin: 14px auto 0; }
.dx-map__note strong { font-style: normal; color: #721d4e; font-weight: 600; }
@media (max-width: 760px) { .dx-grid { grid-template-columns: 1fr; } }

/* Diagnostics toggle — switch inline tool between Conditions & Postures */
.dx-toggle { display: inline-flex; gap: 6px; background: rgba(13, 13, 13,.06); padding: 5px; border-radius: 999px; }
.dx-toggle__btn {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 18px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgba(13, 13, 13,.6); transition: background .2s ease, color .2s ease;
}
.dx-toggle__btn.is-active { background: #0d0d0d; color: #ffffff; }
.dx-toggle__btn:not(.is-active):hover { color: #0d0d0d; }

/* When Postures is active, hide the Conditions tool elements; otherwise hide the iframe */
.diagnostic.dx-postures #diag-groups,
.diagnostic.dx-postures .pm-tri-figure,
.diagnostic.dx-postures .diag-action,
.diagnostic.dx-postures #diag-reading,
.diagnostic.dx-postures [data-dx-only="conditions"] { display: none !important; }
.diagnostic:not(.dx-postures) #dx-postures-pane { display: none; }

/* Unchosen start state — hide BOTH panes until the user picks a diagnostic. */
.diagnostic.dx-unchosen #diag-groups,
.diagnostic.dx-unchosen .pm-tri-figure,
.diagnostic.dx-unchosen .diag-action,
.diagnostic.dx-unchosen #diag-reading,
.diagnostic.dx-unchosen #dx-postures-pane,
.diagnostic.dx-unchosen .diag-toolhead,
.diagnostic.dx-unchosen [data-dx-only="conditions"] { display: none !important; }
.dx-choose-prompt { display: none; }
.diagnostic.dx-unchosen .dx-choose-prompt {
  display: block;
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(13, 13, 13, 0.6);
  padding: clamp(12px, 1.6vw, 20px) 20px clamp(16px, 2vw, 26px);
}
.diagnostic.dx-unchosen .dx-choose-prompt strong { font-style: normal; font-weight: 600; color: #0d0d0d; }
#dx-postures-pane { max-width: var(--maxw); margin: 0 auto; }
.dx-postures-frame { width: 100%; border: 0; min-height: 720px; display: block; background: transparent; }
.legend-revealall {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: #ffffff; background: transparent;
  border: 1.5px solid rgba(255, 255, 255,0.38);
  padding: 14px 28px; border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.legend-revealall:hover { background: rgba(255, 255, 255,0.08); border-color: rgba(255, 255, 255,0.7); }
.legend-revealall__chev { font-size: 17px; line-height: 1; transition: transform 0.25s ease; }
.legend-revealall.is-open .legend-revealall__chev { transform: rotate(45deg); }
.plate.svc { display: flex; flex-direction: column; }
.plate.svc .plate-photo {
  position: relative;
  aspect-ratio: 4 / 3;     /* shallower than specimens so copy gets room */
}
.svc-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--orange);   /* was gold — orange activates the warm action hue */
  color: white;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 3px;
  box-shadow: 0 6px 14px -6px rgba(20,17,14,0.45);
}
.plate.svc figcaption {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 6px;
  flex: 1;
}
.plate.svc .mono-tag { margin-top: 4px; }
.svc-no {
  font-weight: 600;
  color: var(--ink);
}
.svc-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.svc-copy {
  font-family: var(--sans);
  font-style: normal;        /* overrides the italic specimen caption style */
  font-size: 15px;
  line-height: 1.55;
  color: rgba(20,17,14,0.82);
  margin: 0;
}
.svc-copy strong { color: var(--ink); font-weight: 700; }
.svc-leave {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(20,17,14,0.7);
  /* hidden until the card is hovered / focused */
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}
.plate.svc:hover .svc-leave,
.plate.svc:focus-within .svc-leave {
  max-height: 480px;
  margin-top: 14px;
  opacity: 1;
}
/* touch / no-hover devices can't hover — keep the deliverable visible there */
@media (hover: none) {
  .svc-leave { max-height: none; margin-top: 14px; opacity: 1; overflow: visible; }
}
/* bulleted deliverables — four-quadrant brand mark as the marker */
.svc-leave__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.svc-leave__list li { position: relative; padding-left: 23px; font-size: 13.5px; line-height: 1.45; color: rgba(20,17,14,0.78); }
.svc-mk { position: absolute; left: 0; top: 2px; width: 14px; height: 14px; color: var(--gold-deep, #996c1b); }
.plate.svc-orange .svc-mk { color: var(--orange); }
.plate.svc-plum .svc-mk { color: var(--plum); }
.plate.svc-teal .svc-mk { color: var(--teal); }

/* =========================================================
   PRESSURE READING — three Root cards (replaces FIG. 01·B).
   Gray console panel; severity shown by waveform motion, never red.
   ========================================================= */
.rcon { background: #26262c; border-radius: 12px; padding: clamp(22px, 3vw, 36px); margin-top: clamp(20px, 3vw, 34px); }
.rcon__lbl { margin-bottom: 18px; }
.rcon__lbl .mono-tag { color: rgba(255,255,255,0.72); }
.rcon__lbl .mono-tag .dot { background: #db9a26; }
.rcon__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .rcon__cards { grid-template-columns: 1fr; } }
.rcon-card { background: #0d0d0d; border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid var(--c); border-radius: 10px; padding: 20px 20px 16px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.75); }
.rcon-card__top { display: flex; justify-content: space-between; align-items: center; }
.rcon-card__dia { width: 46px; height: 46px; }
.rcon-card__ct { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,0.5); }
.rcon-card__nm { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; color: var(--c); margin: 8px 0 6px; }
.rcon-card__def { font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,0.62); margin: 0 0 10px; }
.rcon-card__wave { width: 100%; height: 42px; display: block; }
.rcon-card__wave path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--c)); }
.rcon-card__state { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rcon-seg { display: flex; gap: 4px; flex: 1; }
.rcon-seg i { flex: 1; height: 7px; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background .25s; }
.rcon-seg i.on { background: var(--c); }
.rcon-word { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap; color: rgba(255,255,255,0.5); }
.rcon-word.strain { color: var(--c); }
.rcon-word.splinter { color: var(--c); font-weight: 700; }
.rcon-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; min-height: 6px; }
.rcon-chip { font-family: var(--mono); font-size: 10px; padding: 4px 8px; border-radius: 5px; }
.rcon-chip.full { background: var(--c); color: #fff; font-weight: 600; }
.rcon-chip.cross { background: transparent; border: 1px solid var(--c); color: var(--c); }
.svc-leave .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep, #996c1b);
  margin-bottom: 4px;
}

/* Deliverables strip — the tangible artifacts a client walks away with.
   Sits under the services intro so "what you leave with" hits before the cards. */
.svc-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(20,17,14,0.16);
  list-style: none;
}
.svc-deliverables__label {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin: 0 0 4px;
}
.svc-deliverables li {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(219,154,38,0.13);
  border: 1px solid rgba(219,154,38,0.42);
  padding: 8px 13px;
  border-radius: 3px;
}
.svc-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  border-top: 1px solid rgba(20,17,14,0.18);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.svc-link:hover {
  color: var(--plum-700);
  border-top-color: var(--plum);
}

/* Per-card service hue — Inquire link and svc-no eyebrow take the card's color.
   The whole Services row chromatically reads as orange → plum → teal. */
.plate.svc-orange .svc-no { color: var(--orange-700); }
.plate.svc-orange .svc-link { color: var(--orange-700); }
.plate.svc-orange .svc-link:hover { color: var(--orange); border-top-color: var(--orange); }

.plate.svc-plum .svc-no { color: var(--plum-700); }
.plate.svc-plum .svc-link { color: var(--plum); }
.plate.svc-plum .svc-link:hover { color: var(--plum-700); border-top-color: var(--plum); }

.plate.svc-teal .svc-no { color: var(--teal-700); }
.plate.svc-teal .svc-link { color: var(--teal); }
.plate.svc-teal .svc-link:hover { color: var(--teal-700); border-top-color: var(--teal); }
.svc-link span { transition: transform 200ms ease; }
.svc-link:hover span { transform: translateX(4px); }
/* keep specimen italic caption rule from leaking into services */
.plate.svc figcaption p.svc-copy { font-style: normal; margin: 0; }

/* ============================================================
   PRINCIPAL CONSULTANT & INVESTIGATOR — black with plum aurora
   ============================================================ */
.pi {
  padding: clamp(48px, 6vw, 92px) var(--gutter);
  position: relative;
}
/* Lighter plum About — mid-plum base, lifted with corner gradients. Keeps text readable. */
.pi.dark {
  background: linear-gradient(165deg, #1a1a1a 0%, #141414 50%, #0d0d0d 100%);
}
.pi.dark .pi-bio { color: rgba(255, 255, 255, 0.94); }
.pi.dark .pi-meta { border-top-color: rgba(255, 255, 255, 0.28); }
.pi.dark .pi-meta dt { color: rgba(255, 255, 255, 0.7); }
/* hide the legacy aurora bleeds inside .pi so the lighter gradient reads cleanly */
.pi.dark .aurora { display: none; }
.pi-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative; z-index: 2;
}
.pi-pull {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 18px 0 24px;
  color: var(--cream);
  font-variation-settings: "opsz" 144;
}
.pi-pull .gold { color: var(--gold); font-style: italic; font-weight: 400; }
.pi-attribution {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
}
.pi-attribution .mono-tag.gold {
  color: var(--gold);
}
.pi-bio {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
  max-width: 56ch;
}
.pi-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 540px;
}
.pi-meta div { margin: 0; }
.pi-meta dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pi-meta dd {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  color: var(--cream);
  margin: 4px 0 0;
}

.pi-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
.pi-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.pi-stamp {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .pi-inner { grid-template-columns: 1fr; }
  .pi-photo { max-width: 420px; }
}

/* ============================================================
   CLOSER — dark plum w/ plum accent glow
   ============================================================ */
.closer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(56px, 7vw, 104px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 80% 30%, rgba(163, 41, 111, 0.35) 0%, transparent 60%),
              radial-gradient(ellipse 70% 60% at 10% 90%, rgba(82, 82, 160, 0.25) 0%, transparent 60%);
  pointer-events: none;
}
.closer-corner {
  position: absolute;
  bottom: 0; right: 0;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0.95;
}
.closer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.closer-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 108px);
  line-height: 1;
  letter-spacing: -0.024em;
  margin: 20px 0 24px;
  color: var(--cream);
  font-variation-settings: "opsz" 144;
}
.closer-head .gold { color: var(--gold); font-style: italic; }
.closer-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 36px;
  font-style: italic;
}
.closer-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0d0d0d; /* official neutral near-black (was warm plum #26102a under the cream palette) */
  color: var(--cream);
  padding: clamp(32px, 4vw, 56px) var(--gutter) 32px;
  position: relative;
  overflow: hidden;
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  position: relative; z-index: 2;
}
.f-brand { max-width: 340px; }
.f-logo {
  display: block;
  height: 78px;
  width: auto;
  margin-bottom: 14px;
}
.f-name {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255,0.55);
  text-transform: uppercase;
  font-family: var(--mono);
  letter-spacing: 0.18em;
  font-size: 10px;
}
.f-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255,0.65);
  margin: 0;
}
.f-col {
  display: flex; flex-direction: column;
  gap: 10px;
}
.f-col a {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255, 255, 255,0.78);
  transition: color 0.2s;
}
.f-col a:hover { color: var(--gold); }
.f-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.f-social-icon {
  color: rgba(255, 255, 255,0.6);
  transition: color 0.2s;
  flex-shrink: 0;
}
.f-social:hover .f-social-icon { color: var(--gold); }
.f-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255,0.55);
}
.footer-bottom {
  max-width: var(--maxw); margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255,0.12);
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  position: relative; z-index: 2;
}

@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s, transform 0.8s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   V3 ADDITIONS — TICKER · HERO PHOTO · DIAGNOSTIC · DISPATCH
   ============================================================ */

/* ---------- hero: reframe layout for left text + right photo ---------- */
.hero { padding-left: calc(var(--gutter) + 64px); }
.hero-inner {
  /* override v2 grid to mirror LinkedIn post-1: text left, photo right */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  grid-template-rows: auto auto auto;
  align-items: start;
}
.hero-left {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.hero-head {
  grid-column: auto;
  font-size: clamp(40px, 6.8vw, 92px);
}
.hero-head .hero-gold em {
  font-style: italic;
  color: var(--plum-deep);
  font-weight: 400;
}
.hero-head .hero-gold {
  color: var(--plum-deep);
  font-style: italic;
  font-weight: 400;
}
.hero-support {
  grid-column: auto;
  max-width: 52ch;
  margin-top: 28px;
  padding-right: 0;
}

/* ---------- hero photo (right side) ---------- */
.hero-photo {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 2;
}
.hero-photo__frame {
  position: relative;
  background: white;
  padding: 14px 14px 14px;
  border: 1px solid rgba(20,17,14,0.1);
  box-shadow:
    0 36px 80px -36px rgba(20,17,14,0.32),
    0 12px 28px -16px rgba(20,17,14,0.14);
  border-radius: 4px;
}
.hero-photo__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.98);
}
.hero-photo__corner {
  position: absolute;
  top: -18px; left: -18px;
  pointer-events: none;
}
.hero-photo__meta {
  margin-top: 14px;
  padding: 0 4px;
}
.hero-photo__meta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 0;
  color: var(--ink);
}

/* hide the v2 small tile entirely if it survives anywhere */
.hero-tile { display: none !important; }

/* ---------- Hero asterisk: pulsing diamonds mark in the gap ---------- */
/* hero-inner already has position:relative on most v2 layouts — enforce it */
.hero-inner { position: relative; }
.hero-asterisk {
  /* Absolutely positioned in the gap between hero-left (col 1) and hero-photo (col 2). */
  position: absolute;
  /* hero-photo is justify-self:end max-width 520px — its left edge is ~ container.right - 520px. */
  /* Park the asterisk just to the LEFT of the photo, vertically centered with the photo. */
  right: calc(520px + clamp(8px, 1.4vw, 28px));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(34px, 4vw, 56px);
  height: clamp(34px, 4vw, 56px);
  pointer-events: none;
  z-index: 3;
  display: inline-block;
  animation: slc-asterisk-pulse 3.2s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 4px 14px rgba(163, 41, 111, 0.18));
}
.hero-asterisk svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Use translateY(-50%) so we don't override the vertical-centering transform */
@keyframes slc-asterisk-pulse {
  0%, 100% { transform: translateY(-50%) scale(1)    rotate(0deg);  opacity: 0.88; }
  50%      { transform: translateY(-50%) scale(1.18) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-asterisk { animation: none; }
}
@media (max-width: 900px) {
  .hero-asterisk {
    /* tuck between text and photo when stacked: center the gap */
    position: static;
    transform: none;
    margin: 16px auto 4px;
    width: clamp(32px, 9vw, 48px);
    height: clamp(32px, 9vw, 48px);
  }
  /* Restore in-flow keyframes (no translateY) on mobile */
  @keyframes slc-asterisk-pulse {
    0%, 100% { transform: scale(1)   rotate(0deg);   opacity: 0.88; }
    50%      { transform: scale(1.18) rotate(45deg); opacity: 1; }
  }
}

@media (max-width: 900px) {
  .hero { padding-left: var(--gutter); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-left, .hero-photo {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    justify-self: stretch;
  }
  .hero-photo { margin-top: 24px; }
  .hero-photo__frame img { aspect-ratio: 16 / 11; }
}

/* ---------- vertical ticker on left edge ---------- */
.ticker {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 56px;
  border-right: 1px solid rgba(20,17,14,0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255,0.6) 0%, rgba(247,238,223,0.4) 100%);
  overflow: hidden;
  z-index: 3;
  display: flex;
  align-items: stretch;
  justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 60px, black 160px, black calc(100% - 160px), transparent calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, transparent 60px, black 160px, black calc(100% - 160px), transparent calc(100% - 60px), transparent 100%);
}
.ticker__track {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  padding: 28px 0;
  animation: tickerLoop 72s linear infinite;
  transition: opacity 0.4s ease;
  line-height: 1;
}
.ticker:hover .ticker__track { opacity: 0.95; }
.ticker__track span { display: inline-block; }
.ticker__track .tk-sep { color: var(--gold); opacity: 0.9; font-size: 9px; }

/* Per-condition hue rotation on the ticker.
   Cycles gold → plum → teal → indigo → orange across condition labels.
   The tk-sep diamonds rotate one phase behind for chromatic separation. */
.ticker__track > span:not(.tk-sep):nth-of-type(10n+1)  { color: var(--gold);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+3)  { color: var(--plum);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+5)  { color: var(--teal);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+7)  { color: var(--indigo); opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+9)  { color: var(--orange); opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+11) { color: var(--plum);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+13) { color: var(--teal);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+15) { color: var(--gold);   opacity: 0.55; }
.ticker__track > span:not(.tk-sep):nth-of-type(10n+17) { color: var(--indigo); opacity: 0.55; }
/* On hover the whole rail brightens (existing rule), labels stay distinct by hue */
.ticker:hover .ticker__track > span:not(.tk-sep) { opacity: 0.95; }
@keyframes tickerLoop {
  0%   { transform: rotate(180deg) translateY(0%); }
  100% { transform: rotate(180deg) translateY(-50%); }
}
@media (max-width: 900px) {
  .ticker { display: none; }
}

/* ============================================================
   DIAGNOSTIC SECTION
   ============================================================ */
.diagnostic {
  background: var(--cream-2);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 8vw, 104px);
  border-top: 1px solid rgba(20,17,14,0.06);
}
.diagnostic-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.diagnostic-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  margin-top: 14px;
  max-width: 60ch;
  color: rgba(20,17,14,0.72);
}
.diagnostic-counter {
  margin-top: 24px;
}
.diagnostic-counter .mono-tag {
  background: rgba(20,17,14,0.04);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,17,14,0.1);
}
#flag-count {
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.08em;
}

.diag-list {
  max-width: var(--maxw);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 980px) { .diag-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .diag-list { grid-template-columns: 1fr; } }

/* Conditions grouped by Root (layout B). Three blocks stacked vertically,
   each with a labeled rail + lede, then its 3-card grid. Cards keep all
   their existing styling — only the wrapping containers are new. */
.diag-groups {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

/* =========================================================
   DIAGNOSTIC · HORIZONTAL LAYOUT (shared by Conditions + Postures)
   3 root columns side-by-side; conditions/postures stacked within
   each column. Mobile (<=760px) collapses back to a single column.
   (Originally inline in index.html — moved here so the white-led
   Postures page renders identically to the homepage Conditions.)
   ========================================================= */
.diag-groups--horizontal {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  flex-direction: initial !important;
  gap: clamp(20px, 2.6vw, 36px) !important;
  border: none;
}
.diag-groups--horizontal .diag-group { border: none !important; margin: 0; }
.diag-groups--horizontal .diag-group__rail {
  cursor: default;
  padding: 6px 0 12px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.diag-groups--horizontal .diag-group__rail:hover { background: transparent; }
.diag-groups--horizontal .diag-group__triangle { display: none; }
.diag-groups--horizontal .diag-group__name { flex: 1 1 100%; }
.diag-groups--horizontal .diag-group__rule { display: none; }
.diag-groups--horizontal .diag-group__meta { flex: 0 1 auto; }
.diag-groups--horizontal .diag-group__strain { margin-left: auto; }
.diag-groups--horizontal .diag-group__body { display: block !important; padding: 0; }
.diag-groups--horizontal .diag-list { grid-template-columns: 1fr !important; gap: 10px; }
.diag-groups--horizontal .diag-card label { padding: 12px 14px; gap: 10px; }
.diag-groups--horizontal .diag-card { box-shadow: none; border-radius: 3px; }
.diag-groups--horizontal .diag-card:hover { transform: none; }
.diag-groups--horizontal .diag-no { display: none; }
.diag-groups--horizontal .diag-name { font-size: 1rem; line-height: 1.15; margin: 0 0 4px; }
.diag-groups--horizontal .diag-sym { font-size: 0.82rem; line-height: 1.4; margin: 0; }
@media (max-width: 760px) {
  .diag-groups--horizontal {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}
.diag-group__rail {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 12px;
}
.diag-group__name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.005em;
}
.diag-group[data-root="resources"] .diag-group__name { color: var(--gold); }
.diag-group[data-root="practices"] .diag-group__name { color: var(--plum); }
.diag-group[data-root="identity"]  .diag-group__name { color: var(--teal); }
.diag-group__meta {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.5);
  font-weight: 600;
  white-space: nowrap;
}
.diag-group__rule {
  flex: 1;
  height: 1px;
  background: rgba(20, 17, 14, 0.16);
  align-self: center;
}
.diag-group__lede {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(20, 17, 14, 0.65);
  margin: 0 0 22px;
  max-width: 60ch;
}
/* Per-group strain readout: 3 pips + count, sitting at the right end of the rail.
   Fills with the root's color as conditions in that group are checked. Driven
   by pressure-map.js — same data feed as the diagram's strain bars. */
.diag-group__strain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.55);
  font-weight: 600;
  white-space: nowrap;
}
.diag-group__strain-count b {
  color: var(--ink, #0d0d0d);
  font-weight: 700;
}
.diag-group__pips {
  display: inline-flex;
  gap: 3px;
}
.diag-group__pip {
  width: 18px;
  height: 7px;
  border-radius: 1px;
  background: rgba(20, 17, 14, 0.14);
  transition: background 0.25s ease;
}
.diag-group[data-root="resources"] .diag-group__pip.on { background: var(--gold); }
.diag-group[data-root="practices"] .diag-group__pip.on { background: var(--plum); }
.diag-group[data-root="identity"]  .diag-group__pip.on { background: var(--teal); }
@media (max-width: 600px) {
  .diag-group__rail { flex-wrap: wrap; }
  .diag-group__rule { display: none; }
  .diag-group__strain { margin-left: auto; }
}

.diag-card {
  background: var(--cream);
  border: 1px solid rgba(20,17,14,0.12);
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 12px 36px -22px rgba(120, 84, 30, 0.18);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
  position: relative;
}
.diag-card label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 22px 22px 22px;
  cursor: pointer;
  align-items: start;
}
.diag-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.diag-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(20,17,14,0.4);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
/* Hover: subtle ink tint, no per-card hue yet */
.diag-card:hover { transform: translateY(-2px); }

/* Per-root color identity — each card inherits the hue of its root system.
   RES (Resources) = gold · IDN (Identity) = plum · PRC (Practices) = teal.
   This matches the organism diagram's color logic. */
.diag-card[data-root="RES"]:hover { border-color: rgba(219, 154, 38, 0.45); }
.diag-card[data-root="IDN"]:hover { border-color: rgba(163, 41, 111, 0.45); }
.diag-card[data-root="PRC"]:hover { border-color: rgba(12, 140, 137, 0.45); }

.diag-card[data-root="RES"]:hover .diag-check { border-color: var(--gold); }
.diag-card[data-root="IDN"]:hover .diag-check { border-color: var(--plum); }
.diag-card[data-root="PRC"]:hover .diag-check { border-color: var(--teal); }

/* Per-root diag-no eyebrow color */
.diag-card[data-root="RES"] .diag-no { color: var(--gold-700); }
.diag-card[data-root="IDN"] .diag-no { color: var(--plum-700); }
.diag-card[data-root="PRC"] .diag-no { color: var(--teal-700); }

/* Checked state — root determines fill */
.diag-card.is-checked[data-root="RES"] {
  border-color: var(--gold);
  background: var(--gold-50);
  box-shadow: 0 18px 50px -22px rgba(219, 154, 38, 0.4);
}
.diag-card.is-checked[data-root="IDN"] {
  border-color: var(--plum);
  background: var(--plum-50);
  box-shadow: 0 18px 50px -22px rgba(163, 41, 111, 0.4);
}
.diag-card.is-checked[data-root="PRC"] {
  border-color: var(--teal);
  background: var(--teal-50);
  box-shadow: 0 18px 50px -22px rgba(12, 140, 137, 0.4);
}

.diag-card.is-checked[data-root="RES"] .diag-check {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.diag-card.is-checked[data-root="IDN"] .diag-check {
  background: var(--plum); border-color: var(--plum); color: white;
}
.diag-card.is-checked[data-root="PRC"] .diag-check {
  background: var(--teal); border-color: var(--teal); color: white;
}

.diag-card.is-checked[data-root="RES"] .diag-name { color: var(--gold-700); }
.diag-card.is-checked[data-root="IDN"] .diag-name { color: var(--plum-700); }
.diag-card.is-checked[data-root="PRC"] .diag-name { color: var(--teal-700); }

.diag-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.diag-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 25px);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
  transition: color 0.2s;
}
.diag-sym {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(20,17,14,0.78);
}

.diag-action {
  max-width: var(--maxw);
  margin: clamp(28px, 4vw, 44px) auto 0;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.diag-reading-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }

.diag-reading {
  max-width: var(--maxw);
  margin: clamp(28px, 4vw, 48px) auto 0;
  background: white;
  border: 1px solid rgba(20,17,14,0.12);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 60px -28px rgba(20,17,14,0.25);
  animation: reading-in 0.5s ease;
}
@keyframes reading-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.diag-reading-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 14px 0 16px;
  color: var(--ink);
  max-width: 38ch;
  font-variation-settings: "opsz" 144;
}
.diag-reading-head em { color: var(--plum); font-style: italic; }
.diag-reading-body {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(20,17,14,0.78);
  margin: 0 0 24px;
  max-width: 60ch;
}
.diag-flagged {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(20,17,14,0.12);
}
.diag-flagged .flagged-item {
  display: grid;
  grid-template-columns: 80px 1fr 2.5fr;
  gap: clamp(10px, 2vw, 24px);
  align-items: baseline;
}
.diag-flagged .fl-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.diag-flagged .fl-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--plum);
}
.diag-flagged .fl-def {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(20,17,14,0.7);
}
.diag-flagged .flagged-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(20,17,14,0.6);
}
@media (max-width: 720px) {
  .diag-flagged .flagged-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   DISPATCH · LAB NOTES
   ============================================================ */
.dispatch {
  background: var(--cream-2);
  padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 80px);
  position: relative;
}
.dispatch-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.dispatch-head {
  margin-bottom: clamp(16px, 2.5vw, 28px);
  max-width: 64ch;
}
.dispatch-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: rgba(20,17,14,0.85);
  margin-top: 10px;
  max-width: 58ch;
}
.dispatch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border-top: 1px solid rgba(20,17,14,0.18);
  padding-top: clamp(20px, 2.5vw, 28px);
}

/* ============================================================
   Layout B — single-column dispatch with dark ribbon subscribe
   ============================================================ */
/* Center the section header above the flow */
.dispatch .dispatch-head {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.dispatch .dispatch-head .section-rail {
  justify-content: center;
}
.dispatch .dispatch-head .dispatch-sub {
  margin-left: auto;
  margin-right: auto;
}

.dispatch-flow {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid rgba(20,17,14,0.18);
}
.dispatch-note {
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-bottom: 1px solid rgba(20,17,14,0.14);
}
.dispatch-note:last-child { border-bottom: 0; }
.dispatch-note-meta {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.dispatch-note-sep { color: rgba(20,17,14,0.3); }
.dispatch-note-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.dispatch-note-excerpt {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: rgba(20,17,14,0.85);
  margin: 0 0 16px;
  max-width: 60ch;
}
.dispatch-note-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--plum);
  text-decoration: none;
}
.dispatch-note-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Dark ribbon subscribe — sits between the two notes */
.dispatch-ribbon {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 36px);
  background: var(--ink);
  color: var(--cream);
  border-radius: 4px;
  margin: clamp(20px, 3vw, 32px) 0;
}
.dispatch-ribbon-text { display: flex; flex-direction: column; gap: 4px; }
.dispatch-ribbon-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255,0.6);
  text-transform: uppercase;
}
.dispatch-ribbon-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0;
  line-height: 1.15;
}
.dispatch-ribbon-head em {
  font-style: italic;
  color: var(--plum-lift, #b34d87);
}
.dispatch-ribbon-form {
  display: flex;
  gap: 0;
  position: relative;
}
.dispatch-ribbon-input {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255,0.3);
  background: rgba(255, 255, 255,0.06);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 14px;
  min-width: 240px;
  border-radius: 0;
}
.dispatch-ribbon-input::placeholder { color: rgba(255, 255, 255,0.45); }
.dispatch-ribbon-btn {
  padding: 12px 22px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  border: 0;
  cursor: pointer;
}
.dispatch-ribbon-btn:hover { filter: brightness(1.05); }

@media (max-width: 720px) {
  .dispatch-ribbon { grid-template-columns: 1fr; gap: 16px; }
  .dispatch-ribbon-form { flex-direction: column; gap: 8px; }
  .dispatch-ribbon-input { min-width: 0; width: 100%; }
  .dispatch-ribbon-btn { width: 100%; }
}
@media (max-width: 880px) {
  .dispatch-grid { grid-template-columns: 1fr; }
}

.dispatch-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}
.note {
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid rgba(20,17,14,0.14);
}
.note:last-child { border-bottom: 0; padding-bottom: 0; }
.note-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.note-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}
.note-excerpt {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(20,17,14,0.75);
  margin: 0 0 12px;
  max-width: 58ch;
}
.note-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--plum);
  border-bottom: 1px solid rgba(163, 41, 111, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.note-link:hover { color: var(--plum-deep); border-color: var(--plum-deep); }

.dispatch-sub-card {
  background: var(--cream);
  border: 1px solid rgba(20,17,14,0.12);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 22px 56px -28px rgba(20,17,14,0.22);
  position: relative;
}
.dispatch-sub-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.dispatch-sub-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 16px 0 10px;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.dispatch-sub-head em { color: var(--plum); font-style: italic; }
.dispatch-sub-copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(20,17,14,0.7);
  margin: 0 0 20px;
}
.dispatch-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.dispatch-input {
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 13px 14px;
  border: 1px solid rgba(20,17,14,0.25);
  background: white;
  border-radius: 4px;
  color: var(--ink);
  transition: border-color 0.2s;
}
.dispatch-input:focus {
  outline: 0;
  border-color: var(--plum);
}
.dispatch-submit { justify-content: center; }
.dispatch-thanks {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--plum);
  margin: 4px 0 12px;
  padding: 12px 14px;
  background: rgba(163, 41, 111, 0.08);
  border-left: 3px solid var(--plum);
  border-radius: 0 4px 4px 0;
}
.dispatch-fine {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(20,17,14,0.45);
  text-transform: uppercase;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(20,17,14,0.1);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   PLAYBOOK DOWNLOAD SECTION
   ========================================================= */
.playbook {
  background: var(--cream);
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.playbook-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.playbook-head {
  text-align: center;
  margin-bottom: 56px;
}
.playbook-head .mono-tag {
  margin-bottom: 18px;
}
.playbook-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.playbook-title .gold-ink em {
  color: var(--gold);
  font-style: italic;
}
.playbook-sub-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(20,17,14,0.66);
  margin: 0;
}

.playbook-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

/* =============================================================
   LP-ROW CARDS — compact horizontal mode preview rows (Variant C)
   Replaces the tall 3-up tarot cards with stacked horizontal rows:
   glyph + numeral on the left, name / drive / root inline at the
   top of the body column, reading paragraph beneath.
   ============================================================= */
.lp-matrix-title__pink {
  color: var(--plum, #a3296f);
  font-style: italic;
}
.lp-row-spread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  max-width: 880px;
}
.lp-row-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(20, 17, 14, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}
.lp-row-card__glyph-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lp-row-card__glyph {
  width: 40px;
  height: 40px;
  color: var(--accent);
  display: block;
}
.lp-row-card__num {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 600;
}
.lp-row-card__body { min-width: 0; }
.lp-row-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.lp-row-card__name {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  color: var(--ink, #14110e);
  letter-spacing: -0.005em;
}
.lp-row-card__drive {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(20, 17, 14, 0.62);
  margin: 0;
}
.lp-row-card__root {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--accent);
  margin-left: auto;
  text-transform: uppercase;
}
.lp-row-card__reading {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 0.94rem;
  line-height: 1.45;
  color: rgba(20, 17, 14, 0.86);
  margin: 0;
}
@media (max-width: 600px) {
  .lp-row-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 12px 14px; }
  .lp-row-card__glyph { width: 32px; height: 32px; }
  .lp-row-card__name { font-size: 19px; }
  .lp-row-card__root { margin-left: 0; width: 100%; margin-top: 2px; }
  .lp-row-card__reading { font-size: 0.9rem; }
}

/* =============================================================
   PLAYBOOK · TIGHT MODIFIER (Variant P3)
   Smaller cover, drops the chapter list + intro paragraph,
   tighter eyebrow + headline + short desc on the form side.
   ============================================================= */
.playbook-grid--tight {
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: flex-start;
}
.playbook-grid--tight .playbook-cover-card {
  max-width: 240px;
}
.playbook-grid--tight .playbook-form-col {
  padding-top: 4px;
}
.pb-tight-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
}
.pb-tight-headline {
  font-family: var(--serif, "Fraunces", serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink, #14110e);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.pb-tight-headline em {
  color: var(--plum, #a3296f);
  font-style: italic;
}
.pb-tight-desc {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(20, 17, 14, 0.74);
  margin: 0 0 18px;
  max-width: 50ch;
}
@media (max-width: 760px) {
  .playbook-grid--tight {
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: center;
  }
  .playbook-grid--tight .playbook-cover-card {
    max-width: 180px;
  }
  .playbook-grid--tight .playbook-form-col {
    text-align: center;
  }
  .pb-tight-headline { text-align: center; }
  .pb-tight-desc { text-align: center; }
}

/* ---- LEFT: cover mockup ---- */
.playbook-cover-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 20px 10px 30px;
}
.playbook-cover-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  transform: rotate(-2deg);
  filter: drop-shadow(0 30px 36px rgba(20,17,14,0.45)) drop-shadow(0 12px 18px rgba(20,17,14,0.28));
}

/* The cover image: bottom-right corner clipped away to reveal the "fold" beneath */
.playbook-cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  /* cut a diagonal off the bottom-right corner (~62px from each axis) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 62px), calc(100% - 62px) 100%, 0 100%);
  position: relative;
  z-index: 2;
}

/* The exposed page beneath — cream square sitting at the clipped corner, slightly inset.
   Has a subtle inner shadow on the top + left edges to suggest the cover is casting onto it. */
.playbook-cover-card::before {
  content: "";
  position: absolute;
  /* Position the square so its top-left aligns with the clip-path diagonal start point.
     Image is clipped 62px from right and 62px from bottom of the card's content area.
     The card has no padding now, so right/bottom = 0. We place the square exactly under. */
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  background:
    linear-gradient(135deg,
      #f0e6d2 0%,
      #e8dcc3 100%);
  border-radius: 0 0 2px 0;
  /* shadow on the inside upper-left edges (where the cover would shade it) */
  box-shadow:
    inset 2px 2px 6px rgba(20,17,14,0.18),
    inset 1px 1px 0 rgba(20,17,14,0.06);
  z-index: 1;
}
.playbook-cover {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4.25;
  background: #0d0a08;
  background-image:
    radial-gradient(120% 60% at 30% 100%, rgba(82,82,160,0.18) 0%, transparent 60%),
    radial-gradient(80% 50% at 80% 0%, rgba(221,111,46,0.10) 0%, transparent 65%),
    linear-gradient(180deg, #0e0b09 0%, #050403 100%);
  color: #ffffff;
  padding: 28px 30px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow:
    0 30px 60px -20px rgba(20,17,14,0.55),
    0 12px 24px -10px rgba(20,17,14,0.35),
    inset 0 0 0 1px rgba(255, 255, 255,0.06);
  font-family: var(--serif);
}
.cover-wash {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(60% 50% at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cover-stair {
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.cover-meta-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.cover-logo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cover-logo-img {
  display: block;
  height: 64px;
  width: auto;
}
.cover-logo-word {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: rgba(255, 255, 255,0.85);
  text-transform: uppercase;
}
.cover-meta-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}
.cover-mono {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: rgba(255, 255, 255,0.7);
  text-transform: uppercase;
}
.cover-system {
  position: relative;
  z-index: 2;
  margin: 18px 0 14px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
}
.cover-headline {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.cover-headline span { display: block; }
.cover-headline .cover-crisis {
  color: var(--gold);
  font-style: italic;
}
.cover-section-label {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255,0.78);
  text-transform: uppercase;
  line-height: 1.5;
}
.cover-guide {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255, 255, 255,0.88);
}
.cover-body {
  position: relative;
  z-index: 2;
  margin: 10px 0 16px;
  font-family: var(--serif);
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255,0.72);
}
.cover-color-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  height: 6px;
  margin-bottom: 12px;
}
.cover-color-bar span { display: block; border-radius: 1px; }
.cover-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  margin-bottom: 6px;
  border-top: 1px solid rgba(255, 255, 255,0.18);
}
.cover-stamp {
  display: none; /* keeping this hidden — vol stamp suppressed for now */
}

/* Hint of page 2 beneath the fold */
.cover-fold-glyph {
  position: absolute;
  bottom: 38px;
  right: 38px;
  font-size: 9px;
  color: rgba(20,17,14,0.32);
  z-index: 4;
  pointer-events: none;
  line-height: 1;
}
.cover-fold-pg {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(20,17,14,0.45);
  z-index: 4;
  pointer-events: none;
  line-height: 1;
}

/* ---- RIGHT: form column ---- */
.playbook-form-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.playbook-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(20,17,14,0.78);
  margin: 0;
  max-width: 46ch;
}
.playbook-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(20,17,14,0.12);
  padding-top: 18px;
}
.playbook-list li {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,17,14,0.08);
}
.playbook-list li:last-child { border-bottom: none; padding-bottom: 0; }
.playbook-list em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.2;
}
.playbook-list span {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20,17,14,0.62);
}

.playbook-form-card {
  background: #ffffff;
  border: 1px solid rgba(20,17,14,0.12);
  border-radius: 4px;
  padding: 24px 24px 22px;
  box-shadow: 0 14px 30px -22px rgba(20,17,14,0.35);
  position: relative;
}
.playbook-form-card .mono-tag { margin-bottom: 14px; }
.playbook-form { display: flex; flex-direction: column; gap: 12px; }
.playbook-input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  border: 1px solid rgba(20,17,14,0.18);
  border-radius: 3px;
  background: #fbf8f3;
  color: var(--ink);
  transition: border-color 160ms ease, background 160ms ease;
}
.playbook-input:focus {
  outline: none;
  border-color: var(--plum);
  background: #fff;
}
/* Make native <select> match the other playbook inputs */
select.playbook-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
.playbook-submit {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--plum);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.playbook-submit:hover { background: #721d4e; transform: translateY(-1px); }
.playbook-submit span { margin-left: 8px; }
.playbook-fine {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(20,17,14,0.45);
  text-transform: uppercase;
  margin: 4px 0 0;
}

.playbook-thanks { display: flex; flex-direction: column; gap: 10px; }
.playbook-thanks .mono-tag { margin-bottom: 6px; }
.playbook-thanks-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.playbook-thanks-fine {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(20,17,14,0.62);
  margin: 0;
}
.playbook-thanks-fine a { color: var(--plum); text-decoration: underline; }
.playbook-redownload {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  padding-top: 10px;
  border-top: 1px solid rgba(20,17,14,0.1);
  align-self: flex-start;
}
.playbook-redownload:hover { color: #721d4e; }

/* mobile */
@media (max-width: 880px) {
  .playbook { padding: 72px 0 88px; }
  .playbook-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .playbook-cover { max-width: 340px; }
  .playbook-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* hidden attribute must trump flex */
.playbook-form[hidden],
.playbook-thanks[hidden] { display: none !important; }


/* ============================================================
   MOBILE TYPE BUMP
   Raises body type ~2px on small screens for readability.
   Applied LAST so it overrides earlier mobile rules.
   ============================================================ */
@media (max-width: 720px) {
  html, body {
    font-size: 19px;
    line-height: 1.6;
  }
}


/* ============================================================
   LANDING PATTERN TEASER (.lp-matrix-*)
   3-mode editorial preview of the funder behavioral matrix.
   Full library lives on the Research page (#matrix).
   Mirrors the editorial register of .r-matrix-* on Research.
   ============================================================ */
.lp-matrix-thesis {
  max-width: 760px;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}
.lp-matrix-thesis .mono-tag {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lp-matrix-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.lp-matrix-title em {
  font-style: italic;
  color: var(--plum);
  font-family: var(--serif);
}
.lp-matrix-lede {
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  color: rgba(20, 17, 14, 0.85);
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   LAYOUT E — Tarot spread: three mode cards as a reading
   ============================================================ */
.lp-spread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.lp-card {
  background: rgba(28, 8, 20, 0.06);
  border: 1px solid rgba(20, 17, 14, 0.15);
  border-radius: 4px;
  padding: 28px 24px;
  min-height: 360px;
  position: relative;
}
.lp-card--gold { border-top: 3px solid var(--gold); }
.lp-card--plum { border-top: 3px solid var(--plum); }
.lp-card--teal { border-top: 3px solid var(--teal); }
.lp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
}
.lp-card-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(20, 17, 14, 0.55);
}
.lp-card-root {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lp-card--gold .lp-card-root { color: var(--gold-deep, #b07c1c); }
.lp-card--plum .lp-card-root { color: var(--plum); }
.lp-card--teal .lp-card-root { color: var(--teal); }
.lp-card-glyph {
  width: 56px;
  height: 56px;
  display: block;
  margin: 4px 0 20px;
  opacity: 0.92;
}
.lp-card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  margin: 0 0 10px;
}
.lp-card-drive {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(20, 17, 14, 0.72);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(20, 17, 14, 0.18);
}
.lp-card-reading {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(20, 17, 14, 0.85);
  margin: 0 0 28px;
}
.lp-card-foot {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(20, 17, 14, 0.4);
}
.lp-spread-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  transition: color 0.2s;
}
.lp-spread-cta:hover { color: var(--gold-deep, #b07c1c); }

@media (max-width: 880px) {
  .lp-spread { grid-template-columns: 1fr; }
  .lp-card { min-height: 0; padding: 22px 20px 56px; }
}

.lp-matrix-body {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

/* LIST (3 rows) — editorial register, no boxes */
.lp-matrix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(20, 17, 14, 0.18);
}
.lp-matrix-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 22px) 0;
  border-bottom: 1px solid rgba(20, 17, 14, 0.12);
  cursor: pointer;
  transition: background-color 160ms ease, padding-left 160ms ease, opacity 160ms ease;
  position: relative;
  outline: none;
}
.lp-matrix-row:hover {
  background: rgba(20, 17, 14, 0.025);
  padding-left: 10px;
}
.lp-matrix-row:focus-visible {
  background: rgba(20, 17, 14, 0.04);
  padding-left: 10px;
  box-shadow: inset 3px 0 0 var(--plum);
}
.lp-matrix-row.is-active {
  background: rgba(20, 17, 14, 0.04);
  padding-left: 10px;
}
.lp-matrix-row.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--row-color, var(--plum));
}
.lp-matrix-row[data-root="Resources"] { --row-color: #db9a26; }
.lp-matrix-row[data-root="Practices"] { --row-color: #a3296f; }
.lp-matrix-row[data-root="Identity"]  { --row-color: #0c8c89; }

.lp-matrix-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(20, 17, 14, 0.5);
  text-transform: uppercase;
}
.lp-matrix-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.lp-matrix-drive {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 17px);
  color: rgba(20, 17, 14, 0.68);
  text-align: right;
  white-space: nowrap;
}
.lp-matrix-root {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--row-color, var(--plum));
  font-weight: 600;
}

/* READING ASIDE — sits next to list, displays selected mode */
.lp-matrix-reading {
  position: sticky;
  top: 100px;
  padding: clamp(28px, 3vw, 36px) 0 clamp(28px, 3vw, 36px) clamp(28px, 3vw, 40px);
  border-left: 1px solid rgba(20, 17, 14, 0.18);
  transition: opacity 120ms ease;
}
.lp-matrix-reading.is-updating { opacity: 0; }
.lp-matrix-reading-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.lp-matrix-reading-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.lp-matrix-reading-drive {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  color: rgba(20, 17, 14, 0.72);
  margin: 0 0 26px;
}
.lp-matrix-reading-drive em {
  font-style: italic;
  color: rgba(20, 17, 14, 0.55);
}
.lp-matrix-reading-body {
  border-top: 1px solid rgba(20, 17, 14, 0.18);
  padding-top: 20px;
}
.lp-matrix-reading-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.5);
  margin-bottom: 10px;
}
.lp-matrix-reading-text {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* CTA below reading panel */
.lp-matrix-cta {
  margin-top: clamp(28px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  border-bottom: 1px solid var(--plum);
  padding: 8px 2px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font-weight: 600;
}
.lp-matrix-cta:hover {
  color: var(--plum-deep);
  border-color: var(--plum-deep);
}
.lp-matrix-cta:hover .lp-matrix-cta-arrow { transform: translateX(4px); }
.lp-matrix-cta-arrow { transition: transform 0.2s ease; display: inline-block; }

/* FOOTER NOTE */
.lp-matrix-foot {
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid rgba(20, 17, 14, 0.12);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 16px);
  color: rgba(20, 17, 14, 0.68);
  max-width: 880px;
  line-height: 1.5;
  text-indent: -22px;
  padding-left: 22px;
}
.lp-matrix-foot strong {
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
}
.lp-matrix-foot-glyph {
  color: var(--gold);
  font-size: 14px;
  margin-right: 10px;
  font-style: normal;
}

/* MOBILE */
@media (max-width: 760px) {
  .lp-matrix-body {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .lp-matrix-row {
    grid-template-columns: 52px 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 16px;
    align-items: baseline;
    padding: 16px 0;
  }
  .lp-matrix-no { grid-row: 1; grid-column: 1; }
  .lp-matrix-name { grid-row: 1; grid-column: 2; font-size: 22px; }
  .lp-matrix-root {
    grid-row: 1;
    grid-column: 3;
    align-self: center;
    font-size: 10px;
  }
  .lp-matrix-drive {
    grid-row: 2;
    grid-column: 2 / -1;
    text-align: left;
    font-size: 15px;
    white-space: normal;
  }
  .lp-matrix-reading {
    position: static;
    padding-left: 0;
    padding-top: 24px;
    border-left: none;
    border-top: 1px solid rgba(20, 17, 14, 0.18);
  }
  .lp-matrix-title { font-size: 32px; }
  .lp-matrix-reading-title { font-size: 32px; }
  .lp-matrix-foot { font-size: 14px; }
}


/* TEASER VARIANT — neutralize the boxed container so editorial layout fills width */
.playbook-companion[data-ring-variant="teaser"] {
  display: block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.playbook-companion[data-ring-variant="teaser"]::before,
.playbook-companion[data-ring-variant="teaser"]::after {
  display: none;
}

/* =============================================================
   CTA CHIP — sticky floating bottom-bar CTA. Replaces the
   in-flow .closer sections that used to live at the end of each
   page. Appears after the user has scrolled ~1.5 viewports;
   dismissable; remembers dismissal via sessionStorage so it
   doesn't pop back on every scroll. Coordinates with the
   back-to-top FAB: on narrow screens the FAB hides when the chip
   is visible (they'd collide); on desktop they sit side by side.
   ============================================================= */
.cta-chip {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 45;
  width: min(560px, calc(100% - 32px));
  background: #0d0d0d;
  color: #ffffff;
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 14px 28px -8px rgba(13, 13, 13, 0.55),
    0 0 0 1px rgba(219, 154, 38, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.34, 1.4, .64, 1);
}
.cta-chip[hidden] { display: none; }
.cta-chip.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cta-chip__text {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 0.94rem;
  line-height: 1.3;
  color: var(--cream, #ffffff);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.cta-chip__text strong {
  color: var(--gold, #db9a26);
  font-weight: 500;
}
.cta-chip__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold, #db9a26);
  color: #0d0d0d;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--sans, "Inter Tight", sans-serif);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.cta-chip__btn:hover,
.cta-chip__btn:focus-visible {
  background: var(--cream, #ffffff);
  color: #0d0d0d;
}
.cta-chip__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.18s ease;
}
.cta-chip__close:hover,
.cta-chip__close:focus-visible { color: var(--cream, #ffffff); }

/* Hide the back-to-top FAB when the chip is open AND viewport is narrow,
   so they don't collide bottom-right. On wider screens both can coexist. */
@media (max-width: 720px) {
  body:has(.cta-chip.is-visible) .back-to-top {
    opacity: 0;
    pointer-events: none;
  }
}
/* On wider screens, nudge the FAB up slightly so the chip's shadow doesn't
   sit underneath it awkwardly. */
@media (min-width: 721px) {
  body:has(.cta-chip.is-visible) .back-to-top {
    bottom: max(86px, env(safe-area-inset-bottom, 86px));
  }
}
/* Mobile chip text shrinks slightly */
@media (max-width: 480px) {
  .cta-chip { padding: 10px 12px 10px 16px; gap: 8px; }
  .cta-chip__text { font-size: 0.86rem; }
  .cta-chip__btn { padding: 8px 12px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-chip { transition: opacity 0.18s ease; }
  .cta-chip.is-visible { transform: translateX(-50%) translateY(0); }
}

/* =============================================================
   BACK-TO-TOP — mobile-only floating brand-mark button. Springs
   in when the user scrolls past one viewport, gentle idle bob,
   smooth-scrolls to top on tap. Hidden when the mobile menu is
   open. Uses the four-quadrant diamond glyph as the icon so the
   button doubles as a brand-presence beat on long pages.
   ============================================================= */
.back-to-top {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  right: max(18px, env(safe-area-inset-right, 18px));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--plum-700, #721d4e);
  cursor: pointer;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 24px rgba(13, 13, 13, 0.34),
    0 0 0 4px rgba(219, 154, 38, 0.10);
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  transition:
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(.34, 1.56, .64, 1),
    background 0.18s ease,
    box-shadow 0.22s ease;
  z-index: 40;
}
.back-to-top__glyph {
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.back-to-top.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: back-to-top-bob 2.6s ease-in-out 0.5s infinite;
}
@keyframes back-to-top-bob {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1) translateY(-3px); }
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--ink, #14110e);
  animation-play-state: paused;
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 14px 32px rgba(13, 13, 13, 0.42),
    0 0 0 5px rgba(219, 154, 38, 0.20);
}
.back-to-top:active { transform: scale(0.94) translateY(0); }
.back-to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body:has(.mobile-menu.is-open) .back-to-top {
  opacity: 0; pointer-events: none; animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top.is-visible {
    animation: none !important;
    transition: opacity 0.18s ease, background 0.18s ease;
  }
  .back-to-top.is-visible { transform: none; }
}
@media (max-width: 720px) {
  .back-to-top { display: flex; }
}

/* =========================================================
   CLOSER BLOCK · final dark plum band with closing word + masthead.
   Shared across homepage + research page. Replaces the older
   gradient-bleed approach. Wraps the closing-word rail and the
   simplified footer beneath it on the same dark background.
   ========================================================= */
.closer-block {
  background: var(--ink);   /* #0d0d0d — site's near-black ink token */
  color: var(--cream);
  position: relative;
  padding-top: clamp(36px, 4vw, 60px);   /* breathing room above the logo */
  padding-bottom: 0;
  overflow: hidden;
}
.closer-rail {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(30px, 3.4vw, 48px);
  position: relative; z-index: 2;
  /* Editorial masthead: left column = brand + closing word.
     Right column = actions. Top-aligned so logo and Contact button
     share the same horizon. */
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.closer-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 0 14px;
}
.closer-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255,0.5);
  margin: 0 0 14px;
}
.closer-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--cream);
  margin: 0 0 12px;
  max-width: 22ch;
}
.closer-headline em {
  font-style: italic;
  color: var(--gold-soft);
  font-family: var(--serif);
}
.closer-body {
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255,0.72);
  margin: 0;
  max-width: 56ch;
}

/* Simplified footer (.footer--simple): just the legal row;
   brand + Contact us dissolved into the closer-rail above. */
.footer--simple {
  background: transparent;
  padding-top: 0;
  padding-bottom: clamp(15px, 1.8vw, 21px);
}
/* Hide the decorative plum/teal aurora glows inside the simple footer.
   They tint the near-black background and make it read as plum, not black. */
.closer-block .aurora,
.footer--simple .aurora { display: none; }
.footer--simple .footer-inner {
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
}
.footer--simple .f-logo { height: 60px; }
.footer--simple .f-contact-cta {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.f-contact-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: rgba(255, 255, 255,0.08);
  border: 1px solid rgba(255, 255, 255,0.3);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.f-contact-btn:hover {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  background: rgba(255, 255, 255,0.12);
}
.f-contact-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(255, 255, 255,0.5);
}
.footer--simple .footer-bottom {
  margin-top: clamp(14px, 1.6vw, 22px);
  padding-top: 14px;
}

/* Actions column (right side): Contact button + LinkedIn + By appointment.
   Top-aligned with the brand identity on the left. Items right-aligned. */
.closer-actions {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
  margin-top: 0;
}
.closer-actions .f-contact-sub {
  margin-top: 2px;
}
.closer-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 4px;
  color: rgba(255, 255, 255,0.7);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.closer-social:hover { color: var(--gold-soft); }
.closer-social svg { display: inline-block; flex-shrink: 0; }

/* =============================================================
   SIMPLIFIED CTA FOOTER (.closer-block--simple) — 2026-06-13.
   One clean line: wide logo left, Contact us + LinkedIn right,
   legal row beneath. No closing headline/body, no sawtooth seam.
   ============================================================= */
.closer-block--simple .closer-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}
.closer-block--simple .closer-logo {
  height: clamp(30px, 3.2vw, 40px);
  margin: 0;
}
.closer-block--simple .closer-actions {
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
}
@media (max-width: 620px) {
  .closer-block--simple .closer-rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .footer--simple .footer-inner { grid-template-columns: 1fr; }
  .footer--simple .f-contact-cta { align-items: flex-start; }
  .closer-headline { max-width: none; }
  .closer-rail {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .closer-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}