/* ────────────────────────────────────────────────────────────
   REVOLEAP — SHARED BRAND STYLESHEET
   Pine on cream (day) + Pine Lantern (night)
   v3 · 2026 — committed design language

   The variable NAMES are kept stable from v2 (--graphite, --bone,
   --copper, etc.) so existing component CSS continues to work. The
   VALUES are now Pine on cream:
     --graphite  → cream surface (was dark)
     --bone      → ink-on-cream  (was light)
     --copper    → pine green    (was copper)
     --brass     → terracotta-bronze (the warm second voice)

   Day  · default
   Night · @media (prefers-color-scheme: dark) on auto, or [data-theme="dark"]
   ──────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ─── Surfaces (Pine on cream — day) ─── */
  --graphite: #F6F1E2;          /* primary surface — cream */
  --graphite-soft: #ECE6D1;     /* editorial section variation — slightly darker cream */
  --graphite-elev: #E2DBC5;     /* elevated surface (cards) */
  --bone: #1F2418;              /* primary text/ink on cream */
  --bone-dim: rgba(31, 36, 24, 0.78);
  --ink: #1F2418;

  /* ─── Accent — pine + brass ─── */
  --copper: #2A523B;            /* pine green — principal accent */
  --copper-bright: #36664A;     /* brighter pine for hover/contrast */
  --copper-dim: #1E3D2A;        /* deeper pine */
  --copper-glow: rgba(42, 82, 59, 0.16);
  --copper-wash: rgba(42, 82, 59, 0.05);

  /* The warm second voice — terracotta-bronze. Used for italics emphasis,
     pull-quote rules, eyebrow accents, the leap-stroke under the logo. */
  --brass: #B5723A;
  --brass-bright: #C58547;
  --brass-glow: rgba(181, 114, 58, 0.18);

  /* ─── Rules & muted — same surface (cream throughout) ─── */
  --rule: rgba(31, 36, 24, 0.14);
  --rule-strong: rgba(31, 36, 24, 0.24);
  --muted: rgba(31, 36, 24, 0.72);
  --muted-soft: rgba(31, 36, 24, 0.67);
  --muted-strong: rgba(31, 36, 24, 0.85);

  /* Aliases — bone-section rules now collapse to the same cream system */
  --rule-on-bone: rgba(31, 36, 24, 0.14);
  --rule-on-bone-strong: rgba(31, 36, 24, 0.22);
  --muted-on-bone: rgba(31, 36, 24, 0.66);
  --muted-on-bone-strong: rgba(31, 36, 24, 0.80);

  /* Translucent overlays for fixed nav, dropdowns, etc. */
  --bg-overlay: rgba(246, 241, 226, 0.86);
  --bg-overlay-strong: rgba(246, 241, 226, 0.96);

  /* Typography */
  --font-display: 'Fraunces', 'Lora', 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-body: 'Google Sans Text', 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

  /* Layout */
  --max: 1440px;
  --gutter: 48px;


  /* ─── Reading system — Fraunces speaks · Google Sans reads · mono annotates.
     Deks: Fraunces at book weight (350) + darker ink on day; night keeps 300
     (halation adds apparent weight on dark). Reading copy: Google Sans 400. ─── */
  --dek-weight: 350;
  --dek-ink: rgba(31, 36, 24, 0.92);
  --read-ink: rgba(31, 36, 24, 0.84);
  --font-read: 'Google Sans Text', 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  color-scheme: light;
}

/* ─── NIGHT — Pine Lantern. Auto via OS, or [data-theme="dark"] manual override ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --graphite: #18201A;
    --graphite-soft: #1F2A21;
    --graphite-elev: #262F26;
    --bone: #F2EDD9;
    --bone-dim: rgba(242, 237, 217, 0.85);
    --ink: #F2EDD9;

    --copper: #5DA078;
    --copper-bright: #74B58E;
    --copper-dim: #4A8765;
    --copper-glow: rgba(93, 160, 120, 0.18);
    --copper-wash: rgba(93, 160, 120, 0.05);

    --brass: #DD9050;
    --brass-bright: #E8A268;
    --brass-glow: rgba(221, 144, 80, 0.20);

    --rule: rgba(242, 237, 217, 0.12);
    --rule-strong: rgba(242, 237, 217, 0.22);
    --muted: rgba(242, 237, 217, 0.72);
    --muted-soft: rgba(242, 237, 217, 0.60);
    --muted-strong: rgba(242, 237, 217, 0.85);

    --rule-on-bone: rgba(242, 237, 217, 0.12);
    --rule-on-bone-strong: rgba(242, 237, 217, 0.20);
    --muted-on-bone: rgba(242, 237, 217, 0.66);
    --muted-on-bone-strong: rgba(242, 237, 217, 0.80);

    --bg-overlay: rgba(24, 32, 26, 0.86);
    --bg-overlay-strong: rgba(24, 32, 26, 0.96);


    --dek-weight: 300;
    --dek-ink: rgba(242, 237, 217, 0.85);
    --read-ink: rgba(242, 237, 217, 0.80);
    color-scheme: dark;
  }
}

/* Manual override — wins over OS preference */
:root[data-theme="dark"] {
  --graphite: #18201A;
  --graphite-soft: #1F2A21;
  --graphite-elev: #262F26;
  --bone: #F2EDD9;
  --bone-dim: rgba(242, 237, 217, 0.85);
  --ink: #F2EDD9;

  --copper: #5DA078;
  --copper-bright: #74B58E;
  --copper-dim: #4A8765;
  --copper-glow: rgba(93, 160, 120, 0.18);
  --copper-wash: rgba(93, 160, 120, 0.05);

  --brass: #DD9050;
  --brass-bright: #E8A268;
  --brass-glow: rgba(221, 144, 80, 0.20);

  --rule: rgba(242, 237, 217, 0.12);
  --rule-strong: rgba(242, 237, 217, 0.22);
  --muted: rgba(242, 237, 217, 0.72);
  --muted-soft: rgba(242, 237, 217, 0.60);
  --muted-strong: rgba(242, 237, 217, 0.85);

  --rule-on-bone: rgba(242, 237, 217, 0.12);
  --rule-on-bone-strong: rgba(242, 237, 217, 0.20);
  --muted-on-bone: rgba(242, 237, 217, 0.66);
  --muted-on-bone-strong: rgba(242, 237, 217, 0.80);

  --bg-overlay: rgba(24, 32, 26, 0.86);
  --bg-overlay-strong: rgba(24, 32, 26, 0.96);


  --dek-weight: 300;
  --dek-ink: rgba(242, 237, 217, 0.85);
  --read-ink: rgba(242, 237, 217, 0.80);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }

body {
  background: var(--graphite);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: default;
  text-rendering: optimizeLegibility;
}

/* ─── Grain texture overlay — multiply on cream, screen on Pine Lantern ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    opacity: 0.06;
    mix-blend-mode: screen;
  }
}
:root[data-theme="dark"] body::before {
  opacity: 0.06;
  mix-blend-mode: screen;
}

/* ─── Selection ─── */
::selection { background: var(--copper); color: var(--graphite); }

/* ─── SCROLL PROGRESS BAR ─── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--copper) 0%, var(--brass) 100%);
  z-index: 200;
  pointer-events: none;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px var(--copper-glow);
}

/* ─── Utility primitives ─── */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.mono span { color: var(--copper-bright); }
.mono-num { color: var(--copper-bright); font-weight: 500; }

.serif { font-family: var(--font-display); }
.italic { font-style: italic; color: var(--copper); }

.container { max-width: var(--max); margin: 0 auto; }

/* ─── NAV ─── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 22px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  background: var(--bg-overlay);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--bone);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.logo .leap-stroke {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  position: relative;
}
.logo .leap-stroke::before {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--copper);
  transform-origin: left center;
  transform: rotate(-38deg);
  transition: transform 0.35s var(--ease-soft);
}
.logo:hover .leap-stroke::before { transform: rotate(-38deg) translateX(2px); }

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  color: var(--bone);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s var(--ease-soft);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0;
  background: var(--copper);
  transition: width 0.3s var(--ease-soft);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:not(.cta):hover { color: var(--copper-bright); }
.nav-links a.active { color: var(--copper); }
.nav-links a.active::after { width: 100%; }
.nav-links a.cta {
  border: 1px solid var(--rule-strong);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.nav-links a.cta::after { display: none; }
.nav-links a.cta:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--graphite);
}

/* ─── NAV DROPDOWN (Practice mega-menu) ─── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-dropdown > a::before {
  /* keep underline same */
}
.nav-dropdown-arrow {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.3s var(--ease-soft);
  margin-left: 4px;
  opacity: 0.7;
}
.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown:focus-within .nav-dropdown-arrow {
  transform: rotate(225deg) translateY(-1px);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -24px;
  min-width: 360px;
  background: var(--bg-overlay-strong);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), visibility 0.25s;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 0 32px var(--copper-glow);
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bone) !important;
  align-items: center;
  transition: background 0.2s var(--ease-soft) !important;
  font-weight: 500 !important;
  width: 100%;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: var(--copper-glow); color: var(--copper-bright) !important; }
.nav-dropdown-menu a img { width: 24px; height: 24px; opacity: 0.85; color: var(--copper); }
.nav-dropdown-menu a .dd-name { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; }
.nav-dropdown-menu a .dd-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-soft); white-space: nowrap; }
.nav-dropdown-menu a:hover .dd-meta { color: var(--copper); }
.nav-dropdown-menu .dd-divider {
  margin: 4px 12px;
  height: 1px;
  background: var(--rule);
}
.nav-dropdown-menu .dd-overview {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--copper-bright) !important;
  padding: 12px 14px !important;
  display: block !important;
  grid-template-columns: none !important;
  text-align: left;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  cursor: pointer;
}

#nav-checkbox { display: none; }

/* ─── SECTION BASE ─── */
section {
  padding: 140px 48px;
  position: relative;
  border-top: 1px solid var(--rule);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 80px;
  max-width: var(--max);
}
.section-label .rule {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--rule);
}

/* ─── Editorial section variation ───
   In the v2 system, .on-bone meant "flip to a light surface." In Pine v3
   the entire site lives on cream, so .on-bone now means "use the slightly
   darker cream as a quiet editorial rhythm." Same surface family, just
   stepped to give the page a tonal cadence. */
.on-bone {
  background: var(--graphite-soft);
  color: var(--ink);
}
.on-bone .mono { color: var(--muted-on-bone); }
.on-bone .mono-num { color: var(--copper); }
.on-bone .mono span { color: var(--copper); }
.on-bone .section-label .rule { background: var(--rule-on-bone); }
.on-bone .italic { color: var(--copper); }

/* ─── Headline scale ─── */
.h-display {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.h-display em { font-style: italic; color: var(--copper); font-weight: 400; }

.h-large {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.h-large em { font-style: italic; color: var(--copper); font-weight: 400; }

.h-section {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.h-section em { font-style: italic; color: var(--copper); font-weight: 400; }

.h-card {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.lede {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--bone-dim);
}
.on-bone .lede { color: var(--muted-on-bone-strong); }
.lede em { font-style: italic; color: var(--copper); font-weight: 400; }
.on-bone .lede em { color: var(--copper-dim); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
  transition: all 0.35s var(--ease-soft);
  cursor: pointer;
  background: transparent;
}
.btn::after {
  content: '→';
  transition: transform 0.35s var(--ease-soft);
}
.btn:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--graphite);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px var(--copper-glow);
}
.btn:hover::after { transform: translateX(4px); }
.btn.btn-primary {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--graphite);
}
.btn.btn-primary:hover {
  background: transparent;
  color: var(--copper-bright);
  border-color: var(--copper);
  box-shadow: 0 8px 24px -8px var(--copper-glow);
}

.on-bone .btn { color: var(--ink); border-color: var(--rule-on-bone-strong); }
.on-bone .btn:hover {
  background: var(--copper-dim);
  border-color: var(--copper-dim);
  color: var(--graphite);
  box-shadow: 0 8px 24px -8px var(--copper-glow);
}
/* Primary buttons keep their filled treatment inside on-bone sections —
   without this, .on-bone .btn (declared later, equal specificity) paints
   the label ink-on-pine until hover. */
.on-bone .btn.btn-primary { color: var(--graphite); border-color: var(--copper); }
.on-bone .btn.btn-primary:hover { background: transparent; color: var(--copper-bright); border-color: var(--copper); }

/* ─── FOOTER ─── */
footer.site-footer {
  padding: 80px 48px 40px;
  border-top: 1px solid var(--rule);
  background: var(--graphite);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
footer.site-footer::before {
  content: '';
  position: absolute;
  bottom: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse at center, var(--copper-glow) 0%, transparent 70%);
  pointer-events: none;
}
footer .footer-top {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
footer .footer-brand .logo { font-size: 28px; }
footer .footer-tagline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--dek-weight);
  line-height: 1.5;
  max-width: 240px;
  color: var(--dek-ink);
  margin-top: 12px;
  max-width: 320px;
  line-height: 1.5;
}
footer .footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 20px;
  font-weight: 500;
}
footer .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
footer .footer-col a {
  color: var(--bone);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  transition: color 0.3s var(--ease-soft), padding-left 0.3s var(--ease-soft);
  display: inline-block;
}
footer .footer-col a:hover { color: var(--copper-bright); padding-left: 6px; }

footer .footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}
footer .footer-bottom .mono { color: var(--muted); }
footer .footer-bottom .mono span { color: var(--copper); }

footer .footer-meta {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted-soft); margin-top: 16px;
}


/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleX(1); transform-origin: left; }
  50%      { transform: scaleX(0.3); transform-origin: left; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(8px, -6px) rotate(2deg); }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fade-up { opacity: 0; animation: fadeUp 1s var(--ease-soft) forwards; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }
.delay-5 { animation-delay: 0.75s; }

/* Scroll-triggered fade-up — controlled by JS adding .is-visible */
[data-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-fade-delay="1"] { transition-delay: 0.08s; }
[data-fade-delay="2"] { transition-delay: 0.16s; }
[data-fade-delay="3"] { transition-delay: 0.24s; }
[data-fade-delay="4"] { transition-delay: 0.32s; }
[data-fade-delay="5"] { transition-delay: 0.40s; }
[data-fade-delay="6"] { transition-delay: 0.48s; }

/* ─── HERO ORNAMENT (interior pages) ─── */
.hero-ornament {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: fadeUp 1.6s var(--ease-out) 0.4s forwards;
}
.hero-ornament .ornament-spin {
  animation: slowSpin 80s linear infinite;
  transform-origin: center;
}
.hero-ornament .ornament-drift {
  animation: drift 12s ease-in-out infinite;
}

/* ─── Page hero (interior pages) ─── */
.page-hero {
  padding: 200px 48px 120px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, var(--copper-wash) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .page-hero-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 240px;
  gap: 64px;
  align-items: end;
  position: relative;
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 28px;
  display: block;
  font-weight: 500;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 0;
}
.page-hero h1 em { font-style: italic; color: var(--copper); font-weight: 400; }
.page-hero .lede { max-width: 520px; padding-bottom: 16px; }

/* ─── Cards / grids ─── */
.card-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  border-top: 1px solid var(--rule);
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: 56px 32px 40px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
  position: relative;
}
.card:hover {
  background: var(--graphite-soft);
  transform: translateY(-2px);
}
.card .card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--copper-bright);
  letter-spacing: 0.1em;
  margin-bottom: 80px;
  font-weight: 500;
}
.card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.15;
}
.card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.card .card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.on-bone .card-grid { border-top-color: var(--rule-on-bone); }
.on-bone .card { border-color: var(--rule-on-bone); color: var(--ink); }
.on-bone .card:hover { background: var(--graphite-elev); }
.on-bone .card p { color: var(--muted-on-bone); }
.on-bone .card .card-num { color: var(--copper-dim); }
.on-bone .card .card-meta { color: var(--muted-on-bone); border-color: var(--rule-on-bone); }

/* ─── Editorial pull (with subtle radial wash) ─── */
.pull {
  padding: 160px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pull::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at center, var(--copper-glow) 0%, transparent 65%);
  pointer-events: none;
}
.pull > * { position: relative; }
.pull blockquote {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 1100px;
  margin: 0 auto 40px;
}
.pull blockquote em { font-style: italic; color: var(--copper); }
.pull cite {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}
.pull .ornament {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--copper);
  margin: 0 auto 48px;
  box-shadow: 0 0 16px var(--copper-glow);
}

/* ─── PRACTICE ICON (small geometric mark) ─── */
.practice-icon {
  width: 32px; height: 32px;
  display: inline-block;
  flex-shrink: 0;
}
.practice-icon-lg { width: 56px; height: 56px; }
.practice-icon path,
.practice-icon line,
.practice-icon circle,
.practice-icon rect {
  transition: stroke 0.35s var(--ease-soft);
}

/* ─── RESPONSIVE — mobile typography upgrade (Balanced) ─── */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }
  section { padding: 120px 32px; }
  nav.site-nav { padding: 18px 32px; }
  .page-hero { padding: 160px 32px 96px; }
  .page-hero .page-hero-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  footer.site-footer { padding: 64px 32px 32px; }
  footer .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    /* Mobile readability — bump muted contrast slightly. Surface and accent
       tokens stay the same; we only widen the alpha on muted text so it stays
       legible at smaller body sizes and in mixed lighting. */
    --muted: rgba(31, 36, 24, 0.80);
    --muted-soft: rgba(31, 36, 24, 0.60);
    --muted-on-bone: rgba(31, 36, 24, 0.74);
    --rule: rgba(31, 36, 24, 0.18);
  }
  /* Mirror the bump in dark mode (cream-on-dark) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --muted: rgba(242, 237, 217, 0.80);
      --muted-soft: rgba(242, 237, 217, 0.60);
      --muted-on-bone: rgba(242, 237, 217, 0.74);
      --rule: rgba(242, 237, 217, 0.18);
    }
  }
  :root[data-theme="dark"] {
    --muted: rgba(242, 237, 217, 0.80);
    --muted-soft: rgba(242, 237, 217, 0.60);
    --muted-on-bone: rgba(242, 237, 217, 0.74);
    --rule: rgba(242, 237, 217, 0.18);
  }
  body { font-size: 16px; -webkit-text-size-adjust: 100%; }
  /* Reduce grain on mobile — costs more contrast than it adds */
  body::before { opacity: 0.03; }

  section { padding: 96px 24px; }
  nav.site-nav { padding: 16px 24px; }
  .page-hero { padding: 140px 24px 80px; }
  .page-hero .eyebrow { font-size: 11px; }

  /* Mono labels — bump to readable size */
  .mono { font-size: 11.5px; letter-spacing: 0.1em; }

  /* Body display copy — heavier weight on mobile (light 300 ghosts on small screens) */
  .lede { font-size: 18px; font-weight: 400; line-height: 1.6; }

  /* Mobile nav */
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px;
    background: var(--bg-overlay-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--rule);
  }
  .nav-links a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
  }
  .nav-links a::after { display: none; }
  .nav-links a.cta {
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: 14px 20px;
    margin-top: 16px;
    width: auto;
    text-align: center;
  }
  #nav-checkbox:checked ~ .nav-links { display: flex; }
  #nav-checkbox { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
  #nav-checkbox:focus-visible + .nav-toggle { outline: 2px solid var(--copper); outline-offset: 3px; }

  /* Dropdown collapses to expandable submenu on mobile */
  .nav-dropdown { width: 100%; }
  .nav-dropdown > a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    justify-content: space-between;
  }
  .nav-dropdown-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 12px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: auto;
    border-left: 1px solid var(--rule);
    margin: 4px 0 12px 4px;
  }
  .nav-dropdown-menu a { padding: 12px 12px !important; }
  .nav-dropdown-menu a .dd-name { font-size: 16px; }
  .nav-dropdown-arrow { display: none; }
  .nav-dropdown-menu .dd-overview { padding: 8px 12px 12px !important; }

  .card-grid.cols-2,
  .card-grid.cols-3,
  .card-grid.cols-4 { grid-template-columns: 1fr; }
  .card { border-right: none; padding: 44px 24px 32px; }
  .card .card-num { margin-bottom: 48px; }
  .card p { font-size: 15px; line-height: 1.65; }

  footer.site-footer { padding: 48px 24px 24px; }
  footer .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  footer .footer-bottom { flex-direction: column; align-items: flex-start; padding-top: 24px; }
  footer .footer-tagline { font-size: 17px; }
  footer .footer-col a { font-size: 17px; }

  .pull { padding: 96px 24px; }
  .pull cite { font-size: 11px; }

  /* Buttons — bigger tap target */
  .btn { padding: 16px 22px; font-size: 11.5px; min-height: 48px; }

  /* Hero ornaments — scale down */
  .hero-ornament { transform: scale(0.65); transform-origin: top right; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-fade] { opacity: 1; transform: none; }
  .scroll-progress { transition: none; }
}

/* ─── THEME TOGGLE — two dots, no text ─── */
.theme-toggle {
  background: none;
  border: none;
  padding: 6px 0;
  margin: 0 6px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted-soft);
  transition: color 0.3s var(--ease-soft);
  -webkit-appearance: none;
  appearance: none;
}
.theme-toggle:hover { color: var(--copper); }
.theme-toggle .tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
  display: inline-block;
}
.theme-toggle .tt-dot.is-active {
  background: var(--copper);
  border-color: var(--copper);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ─── Practice icons: dark-mode filter ─────────────────────────
   Icons are baked with ink #1F2418 linework + pine #2A523B accent
   for cream day mode. Dark mode flips ink to cream while keeping
   the pine accent in the right luminance band. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .practice-icon,
  :root:not([data-theme="light"]) .practice-icon-lg,
  :root:not([data-theme="light"]) .practice-icon-xl,
  :root:not([data-theme="light"]) .nav-dropdown-menu a img,
  :root:not([data-theme="light"]) .dd-overview img,
  :root:not([data-theme="light"]) img[src*="icon-ai-engineering"],
  :root:not([data-theme="light"]) img[src*="icon-cloud"],
  :root:not([data-theme="light"]) img[src*="icon-data"],
  :root:not([data-theme="light"]) img[src*="icon-app"],
  :root:not([data-theme="light"]) img[src*="icon-platops"],
  :root:not([data-theme="light"]) .hero-ornament-page,
  :root:not([data-theme="light"]) img[src*="ornament"] {
    filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.1);
  }
}
:root[data-theme="dark"] .practice-icon,
:root[data-theme="dark"] .practice-icon-lg,
:root[data-theme="dark"] .practice-icon-xl,
:root[data-theme="dark"] .nav-dropdown-menu a img,
:root[data-theme="dark"] .dd-overview img,
:root[data-theme="dark"] img[src*="icon-ai-engineering"],
:root[data-theme="dark"] img[src*="icon-cloud"],
:root[data-theme="dark"] img[src*="icon-data"],
:root[data-theme="dark"] img[src*="icon-app"],
:root[data-theme="dark"] img[src*="icon-platops"],
:root[data-theme="dark"] .hero-ornament-page,
:root[data-theme="dark"] img[src*="ornament"] {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.1);
}

/* ─── Best practices: focus, tap targets, reduced motion ───────────────
   Universal :focus-visible styling so keyboard navigation is obvious without
   muddying the design. Only the active focus ring shows — mouse clicks remain
   chrome-free. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.theme-toggle:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Form inputs: focus shifts to a thicker bottom rule rather than an outline */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-bottom-color: var(--copper);
  box-shadow: 0 1px 0 0 var(--copper);
}

/* Mobile: larger tap target on the theme toggle without making it visually
   bigger. Add a hit-area pseudo-element. */
@media (max-width: 768px) {
  .theme-toggle {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .theme-toggle .tt-dot { width: 9px; height: 9px; }

  /* Larger nav menu tap targets */
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-toggle { min-height: 40px; }
}

/* Universal reduced-motion guard — already partially honoured elsewhere; this
   is the catch-all so any new animation we add inherits it for free. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-progress { transition: none; }
  .hero-leap, [data-fade] { opacity: 1 !important; transform: none !important; }
}

/* iOS Safari hit-area fix — prevent tap-highlight flash of grey */
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Print stylesheet — quiet, ink-on-paper */
@media print {
  body::before { display: none; }
  nav.site-nav, .scroll-progress, .theme-toggle, footer .footer-bottom-meta { display: none; }
  body { background: #FFFFFF; color: #000000; }
  a { color: inherit; text-decoration: underline; }
}

/* ─── Partner logos: dark-mode filter ───
   The partner logos use ink #1F2418 wordmarks for cream day mode.
   In dark mode we invert the WHOLE logo so the wordmark reads as
   cream on the dark surface. Brand colours (Anthropic terracotta,
   Databricks red, Snowflake cyan, etc.) hue-rotate as a side effect
   — slightly off-brand, but readable. For exact-brand colours in
   both modes, ship paired light/dark SVGs via <picture>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner img {
    filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.08);
  }
}
:root[data-theme="dark"] .partner img {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.08);
}

/* ─── Cities skyline · dark-mode treatment ───
   The skylines are inline SVG, so we can target the silhouette + highlight
   groups directly via attribute selectors. In dark mode:
     - Canvas drops to deep graphite — gives the warm glow contrast.
     - A brass radial wash from the bottom-centre simulates city-at-evening
       atmospheric warmth.
     - Silhouettes flip to cream (visible against the dark canvas).
     - Highlights flip to brass with a soft drop-shadow — reads as lit
       windows and warm spires.
   Light mode keeps the original ink-on-cream rendering, untouched. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .city-canvas {
    background: var(--graphite);
    position: relative;
    overflow: hidden;
  }
  :root:not([data-theme="light"]) .city-canvas::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--brass-glow), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  :root:not([data-theme="light"]) .city-skyline {
    position: absolute; z-index: 1;
    filter: none;
  }
  /* Cream silhouettes — visible against the dark canvas */
  :root:not([data-theme="light"]) .city-skyline g[fill="#1F2418"] { fill: #F2EDD9; }
  :root:not([data-theme="light"]) .city-skyline path[stroke="#1F2418"] { stroke: #F2EDD9; }
  /* Brass highlights — the lit-windows / spires that carry the warmth */
  :root:not([data-theme="light"]) .city-skyline g[fill="#2A523B"] {
    fill: #DD9050;
    filter: drop-shadow(0 0 4px rgba(221, 144, 80, 0.55));
  }
}
:root[data-theme="dark"] .city-canvas {
  background: var(--graphite);
  position: relative;
  overflow: hidden;
}
:root[data-theme="dark"] .city-canvas::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--brass-glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .city-skyline {
  position: absolute; z-index: 1;
  filter: none;
}
:root[data-theme="dark"] .city-skyline g[fill="#1F2418"] { fill: #F2EDD9; }
:root[data-theme="dark"] .city-skyline path[stroke="#1F2418"] { stroke: #F2EDD9; }
:root[data-theme="dark"] .city-skyline g[fill="#2A523B"] {
  fill: #DD9050;
  filter: drop-shadow(0 0 4px rgba(221, 144, 80, 0.55));
}

/* ─── Sample artifacts on practice pages — dark-mode visibility
   The diagrams use hardcoded ink (#1F2418) and cream (#F2EDD9) values
   so they render correctly on light cream surfaces. In dark mode the
   surface flips dark, so we mirror-flip the ink/cream pairs. Pine
   (#2A523B) and brass (#B5723A) accent values are preserved because
   they read well against both modes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art-svg [fill="#1F2418"]   { fill: #F2EDD9; }
  :root:not([data-theme="light"]) .art-svg [stroke="#1F2418"] { stroke: #F2EDD9; }
  :root:not([data-theme="light"]) .art-svg [fill="#F2EDD9"]   { fill: #1F2418; }
  :root:not([data-theme="light"]) .art-svg [stroke="#F2EDD9"] { stroke: #1F2418; }
}
:root[data-theme="dark"] .art-svg [fill="#1F2418"]   { fill: #F2EDD9; }
:root[data-theme="dark"] .art-svg [stroke="#1F2418"] { stroke: #F2EDD9; }
:root[data-theme="dark"] .art-svg [fill="#F2EDD9"]   { fill: #1F2418; }
:root[data-theme="dark"] .art-svg [stroke="#F2EDD9"] { stroke: #1F2418; }

/* ─── Ask-AI footer strip — invite visitors to have an assistant summarise Revoleap ─── */
.ask-ai { max-width: var(--max); margin: 0 auto; padding: 30px 48px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ask-ai-ey { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; }
.ask-ai-ti { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.ask-ai-ti em { font-style: italic; color: var(--copper); }
.ask-ai-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ask-ai-chip { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 15px; transition: border-color .15s, transform .15s; }
.ask-ai-chip:hover { border-color: var(--copper); transform: translateY(-1px); }
.ask-ai-ico { width: 22px; height: 22px; display: inline-block; flex: none; fill: currentColor; vertical-align: middle; }
.ask-ai-toast { flex-basis: 100%; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); opacity: 0; transition: opacity .2s; }
.ask-ai-toast.on { opacity: 1; }
@media (max-width: 720px) { .ask-ai { padding: 24px 24px; } .ask-ai-ti { font-size: 17px; } }