@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-display-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --black-950: #0A0A0B;
  --black-900: #111113;
  --black-800: #1A1A1D;
  --graphite-700: #2A2A2E;
  --silver-400: #A9AEB5;
  --silver-200: #D6D9DD;
  --ivory: #F7F3EA;
  --ink: #141414;
  --ink-soft: #4A4640;
  --gold-300: #F3D27A;
  --gold-500: #D4A537;
  --gold-600: #B8862B;
  --gold-800: #7A5717;
  --gold-grad: linear-gradient(180deg, #FBE7A1 0%, #E2B04A 45%, #9C6B1C 100%);
  --header: 72px;
  --tap: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black-950);
  color: var(--silver-200);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 1.55;
}
.header-row > * { min-width: 0; }
body.page-marketing, body.page-home { padding-bottom: calc(var(--tap) + 12px); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--gold-300); }
h1, h2, h3 { font-family: "Playfair Display", serif; font-weight: 700; line-height: 1.15; color: var(--ivory); }
h1 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 4.4rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 0.5em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4em; }
p { margin: 0 0 0.8em; }
.wrap { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.kicker { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: var(--gold-300); font-weight: 600; }
.lead { font-size: 1.12rem; color: var(--silver-200); max-width: 42rem; }
.skip { position: absolute; left: 8px; top: -40px; background: var(--gold-500); color: var(--black-950); padding: 8px 12px; z-index: 20; }
.skip:focus { top: 8px; }

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(10,10,11,0.92); border-bottom: 1px solid var(--graphite-700); }
.header-row { min-height: var(--header); display: flex; align-items: center; gap: 14px; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; background: radial-gradient(circle, rgba(212,165,55,0.55), rgba(212,165,55,0) 70%); border-radius: 50%; }
.header-ig { display: none; align-items: center; gap: 8px; min-height: 48px; color: var(--silver-200); text-decoration: none; }
.header-phone { margin-left: auto; color: var(--ivory); text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.nav-toggle, .nav-systems-btn, .btn, .text-link, .tap-bar a, .stage-picker button { min-height: 48px; }
.nav-toggle { background: transparent; color: var(--ivory); border: 1px solid var(--gold-600); padding: 0 14px; }
.nav-menu { display: flex; flex-direction: column; gap: 4px; position: absolute; inset: var(--header) 0 auto 0; background: var(--black-900); padding: 12px 16px 20px; }
.js .nav-menu { display: none; }
.js .nav-menu.is-open { display: flex; }
.nav-menu a { color: var(--ivory); text-decoration: none; padding: 10px 0; }
.nav-systems { position: relative; }
.nav-systems-btn { background: transparent; color: var(--ivory); border: 0; padding: 10px 0; text-align: left; font: inherit; }
.nav-systems-list { list-style: none; margin: 0; padding: 0; }
.js .nav-systems-list { display: none; }
.js .nav-systems-list.is-open { display: block; }
.nav-audit { align-self: flex-start; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; }
.btn-gold { background: var(--gold-500); color: var(--black-950); }
.btn-ghost { background: transparent; color: var(--ivory); border: 1px solid var(--gold-600); }
.btn-row, .text-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.text-link { color: var(--gold-300); display: inline-flex; align-items: center; }
.reassure { color: var(--silver-400); }

.hero { position: relative; background: var(--black-950); }
.hero-stage { position: relative; }
.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-grid { position: relative; display: grid; gap: 24px; padding: 28px 0 36px; }
.hero-gem { display: grid; justify-items: center; gap: 8px; }
.gem-svg { width: min(280px, 70vw); }
.gem-line, .gem-dot { fill: none; stroke: var(--silver-400); stroke-width: 1.2; }
.gem-dot { fill: var(--silver-200); stroke: none; }
.gem-facet { stroke: var(--silver-400); stroke-width: 1; fill: url(#goldFill); }
.gem-swoosh { fill: none; stroke: var(--gold-500); stroke-width: 2; }
.facet-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.facet-chip { color: var(--ivory); text-decoration: none; display: flex; align-items: center; min-height: 48px; border: 1px solid var(--graphite-700); padding: 0 12px; }
.hero-motto { font-family: "Playfair Display", serif; color: var(--gold-300); font-size: 1.4rem; margin: 0; }
.js-motion .gem-facet { fill: transparent; }
.js-motion .facet-chip { opacity: 0.4; }
.js-motion .hero-motto { opacity: 0; }
.js-motion .gem-swoosh { stroke-dasharray: 220; stroke-dashoffset: 220; }
.js-motion .gem-line { stroke-dasharray: 520; stroke-dashoffset: 520; animation: gem-draw 1.2s ease forwards; }
.js-motion .gem-facet.is-on { fill: url(#goldFill); }
.js-motion .facet-chip.is-on { opacity: 1; }
.js-motion .hero-motto.is-on { opacity: 1; transition: opacity 360ms ease; }
.js-motion .gem-swoosh.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms ease; }
.hero.is-complete .gem-facet { fill: url(#goldFill); }
.hero.is-complete .facet-chip { opacity: 1; }
.hero.is-complete .hero-motto { opacity: 1; }
.hero.is-complete .gem-swoosh { stroke-dashoffset: 0; }
@keyframes gem-draw { to { stroke-dashoffset: 0; } }

.flake { position: relative; }
.flake::before { content: ""; position: absolute; inset: 0; background: url("brand/gold-flakes-quiet.jpg") center/cover; opacity: 0.12; pointer-events: none; }
.flake > * { position: relative; }
.section { padding: 64px 0; }
.section-ivory { background: var(--ivory); color: var(--ink); }
.section-ivory h2, .section-ivory h3 { color: var(--ink); }
.section-ivory a { color: var(--gold-800); }
.section-ivory .kicker { color: var(--gold-800); }
.geo { background-image: linear-gradient(30deg, transparent 48%, rgba(212,165,55,0.08) 49%, rgba(212,165,55,0.08) 51%, transparent 52%); background-size: 72px 72px; }

.frame { border: 1px solid var(--gold-600); padding: 6px; }
.frame-inner { border: 1px solid var(--gold-500); padding: 16px; position: relative; }
.frame-inner::before, .frame-inner::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--gold-300); }
.frame-inner::before { top: -4px; left: -4px; }
.frame-inner::after { bottom: -4px; right: -4px; }
.stat-grid, .card-grid, .pillar-grid { display: grid; gap: 16px; }
.stat-num, .calc-output strong, .tuesday-clock { font-variant-numeric: tabular-nums; }
.stat-num { font-family: "Playfair Display", serif; font-size: 3rem; color: var(--gold-300); margin: 0; }
.section-ivory .stat-num { color: var(--gold-800); }
.source { font-size: 0.92rem; }
.source a { color: var(--silver-400); }
.section-ivory .source a { color: var(--ink-soft); }
.system-card.is-dim { opacity: 0.38; }
.stage-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.stage-picker button { background: var(--black-800); color: var(--ivory); border: 1px solid var(--graphite-700); padding: 0 14px; font: inherit; }
.stage-picker button[aria-pressed="true"] { background: var(--gold-500); color: var(--black-950); }
.stage-picker span { display: block; font-size: 0.75rem; }

.tuesday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tuesday-list li { display: grid; gap: 10px; }
.hour, .tuesday-clock { color: var(--gold-300); font-weight: 600; }
.day-card { background: var(--black-900); padding: 14px; border: 1px solid var(--graphite-700); }
.day-sys { border-color: var(--gold-600); }
.swoosh-rule { display: block; width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.band { padding: 48px 0 64px; }
.band-inner { text-align: left; }
.calc { background: var(--ivory); color: var(--ink); padding: 8px 0 20px; }
.calc h2 { color: var(--ink); }
.calc-grid { display: grid; gap: 12px; }
.calc label, form label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--ink); }
.check, .choice { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.calc input, .calc select, form input, form select, form textarea {
  width: 100%; min-height: 48px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--ink-soft); padding: 8px 10px;
}
form input[type="checkbox"], form input[type="radio"] {
  width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; flex: none; accent-color: var(--gold-800);
}
.hp input { width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.calc-note { color: var(--ink-soft); font-size: 0.92rem; }
.calc-output { font-size: 1.2rem; }
.formula { color: var(--ink-soft); }
.hp { position: absolute !important; width: 0; height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.choices { border: 0; padding: 0; display: grid; gap: 8px; }
.choice { border: 1px solid var(--gold-600); padding: 12px; min-height: 48px; }
form[data-lead] { position: relative; background: var(--ivory); color: var(--ink); padding: 18px; }
form[data-lead] .btn-ghost { color: var(--ink); border-color: var(--gold-800); }
.form-layout, .contact-grid, .about-grid { display: grid; gap: 24px; }
.numbers-layout { display: block; }
.rail { position: sticky; top: 0; z-index: 6; background: var(--black-950); padding: 12px 16px; border-bottom: 1px solid var(--graphite-700); }
.rail-count { letter-spacing: 0.08em; margin: 0; color: var(--gold-300); font-weight: 600; }
.rail ol { display: none; margin: 8px 0 0; padding-left: 18px; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.2em; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.flow li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; }
.flow li::before { content: counter(step); width: 36px; height: 36px; border: 1px solid var(--gold-800); color: var(--gold-800); display: grid; place-items: center; font-weight: 600; }
.chip-list, .link-list { list-style: none; margin: 0; padding: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { border: 1px solid var(--gold-800); color: var(--ink); padding: 8px 12px; }
.link-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--silver-200); text-decoration: none; }
.faq { border-bottom: 1px solid var(--graphite-700); padding: 8px 0; }
.section-ivory .faq { border-color: #ddd4c4; }
.faq summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--ivory); }
.section-ivory .faq summary { color: var(--ink); }
.site-footer { background: var(--black-900); padding: 36px 0 24px; }
.foot-grid { display: grid; gap: 22px; }
.foot-title { color: var(--gold-300); font-weight: 600; }
.legal { color: var(--silver-400); }
.icon { flex: none; }
.tap-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--black-900); border-top: 1px solid var(--gold-600); }
.tap-bar a { color: var(--ivory); text-decoration: none; display: grid; place-items: center; min-height: var(--tap); }
.tap-bar a:last-child { background: var(--gold-500); color: var(--black-950); font-weight: 600; }
elevenlabs-convai { bottom: var(--tap) !important; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 16px 0 0; margin: 0; color: var(--silver-400); }
.crumbs a { color: var(--silver-200); }
.page-intro { padding-top: 18px; }
.miss { min-height: 60vh; display: grid; align-items: center; }

.js-motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity 360ms ease, transform 360ms ease; }
.js-motion .reveal.is-in { opacity: 1; transform: none; }
.calc, .calc *, form, form * { transition: none !important; animation: none !important; }

@media (min-width: 800px) {
  .stat-grid, .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .tuesday-list li { grid-template-columns: 80px 1fr 1fr; align-items: stretch; }
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; }
  .form-layout, .contact-grid { grid-template-columns: 1.4fr 0.6fr; align-items: start; }
  .numbers-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
  .rail { position: sticky; top: 88px; background: transparent; border: 0; padding: 0 0 0 16px; }
  .rail ol { display: block; }
}
@media (min-width: 900px) {
  .js-motion .hero { min-height: 180vh; }
  .js-motion .hero-stage { position: sticky; top: 0; min-height: 100vh; display: grid; align-items: center; padding: 8px 0 var(--tap); box-sizing: border-box; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .header-ig { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-menu, .js .nav-menu { position: static; display: flex; flex-direction: row; align-items: center; gap: 16px; background: transparent; padding: 0; margin-left: auto; }
  .header-phone { margin-left: 0; }
  .js .nav-systems-list.is-open { position: absolute; top: 100%; left: 0; background: var(--black-900); border: 1px solid var(--graphite-700); min-width: 220px; padding: 8px; z-index: 40; }
  .nav-menu a { padding: 0; min-height: 48px; display: inline-flex; align-items: center; }
}
@media (max-width: 899px) {
  .js-motion .gem-facet { fill: url(#goldFill); }
  .js-motion .facet-chip { opacity: 1; }
  .js-motion .hero-motto { opacity: 1; }
  .js-motion .gem-swoosh { stroke-dashoffset: 0; }
  .header-phone { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gem-line, .gem-swoosh { stroke-dashoffset: 0 !important; }
  .gem-facet { fill: url(#goldFill) !important; }
  .facet-chip, .hero-motto { opacity: 1 !important; }
}
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }