/* ==========================================================================
   C-Bus Help | bespoke site (cbushelp.com.au)
   Identity: "We speak C-Bus." Tactile, architectural, reassuring.
   Warm charcoal/graphite base + brass/amber keypad accent + a calm restored
   green for the working state. Display = Instrument Serif, body = Inter,
   system labels = JetBrains Mono. Sticky keypad scrollytelling: a dark, faulted
   wall panel comes back to life as the rescue beats scroll.
   Self-contained. No build step. Distinct from the fall + temp identities.
   ========================================================================== */
:root{
  --bg:        oklch(0.985 0.006 86);
  --bg-2:      oklch(0.962 0.010 84);
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.255 0.012 70);
  --ink-soft:  oklch(0.40 0.012 70);
  --muted:     oklch(0.52 0.012 72);
  --line:      oklch(0.90 0.010 80);

  --graphite:  oklch(0.255 0.010 75);
  --graphite-2:oklch(0.205 0.010 75);
  --night:     oklch(0.205 0.012 70);
  --night-2:   oklch(0.165 0.012 68);

  --brass:     oklch(0.74 0.115 78);
  --brass-ink: oklch(0.56 0.115 70);
  --brass-deep:oklch(0.46 0.10 66);
  --brass-soft:oklch(0.92 0.045 84);

  --restored:  oklch(0.62 0.105 152);
  --restored-ink:oklch(0.46 0.09 152);
  --restored-soft:oklch(0.93 0.035 150);

  --fault:     oklch(0.60 0.16 32);
  --on-dark:   oklch(0.95 0.012 86);
  --on-dark-soft:oklch(0.80 0.012 84);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --maxw: 1160px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 14px; --radius-lg: 22px; --radius-sm: 9px;
  --shadow: 0 2px 6px oklch(0.25 0.01 70 / .06), 0 26px 60px -28px oklch(0.25 0.02 70 / .34);
  --shadow-sm: 0 1px 3px oklch(0.25 0.01 70 / .07), 0 12px 26px -18px oklch(0.25 0.02 70 / .26);

  --z-nav:200;
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1.02rem,.99rem + .18vw,1.13rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--brass-ink); }
::selection{ background:oklch(0.92 0.045 84 / .9); color:var(--ink); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.02;
  letter-spacing:-0.005em; text-wrap:balance; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.9rem,1.9rem + 4.6vw,5.6rem); }
h2{ font-size:clamp(2.15rem,1.5rem + 2.7vw,3.7rem); }
h3{ font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem); }
p{ margin:0; text-wrap:pretty; overflow-wrap:anywhere; }
.lead{ font-size:clamp(1.16rem,1.04rem + .55vw,1.45rem); line-height:1.5; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:62ch; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; }
:where(a,button,summary,input,textarea):focus-visible{ outline:3px solid var(--brass-ink); outline-offset:3px; border-radius:6px; }

/* mono system label, used for "we speak C-Bus" register */
.mono{ font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brass-ink); display:inline-flex; align-items:center; gap:.55rem; }
.mono::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--brass); flex:none; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; white-space:nowrap;
  font-size:1rem; line-height:1; padding:.95rem 1.55rem; border-radius:11px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .4s var(--ease), background-color .25s, box-shadow .4s, border-color .25s; }
.btn--primary{ background:var(--graphite); color:var(--on-dark); box-shadow:0 10px 26px -12px oklch(0.25 0.02 70 / .6); }
.btn--primary:hover{ background:var(--graphite-2); transform:translateY(-2px); box-shadow:0 16px 34px -12px oklch(0.25 0.02 70 / .7); }
.btn--brass{ background:var(--brass); color:oklch(0.30 0.06 66); box-shadow:0 10px 26px -12px oklch(0.74 0.115 78 / .55); }
.btn--brass:hover{ background:oklch(0.78 0.115 80); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brass); transform:translateY(-2px); }
.btn--on-dark{ background:var(--brass); color:oklch(0.28 0.06 66); }
.btn--on-dark:hover{ background:oklch(0.80 0.115 82); }
.btn--ghost-dark{ background:transparent; color:var(--on-dark); border-color:oklch(1 0 0 / .26); }
.btn--ghost-dark:hover{ border-color:var(--brass); }
.btn--lg{ padding:1.1rem 1.95rem; font-size:1.06rem; }
.textlink{ color:var(--brass-ink); font-weight:600; text-decoration:none; border-bottom:2px solid oklch(0.74 0.115 78 / .5); padding-bottom:1px; transition:border-color .25s; }
.textlink:hover{ border-color:var(--brass); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- header ---------- */
.nav{ position:sticky; top:0; z-index:var(--z-nav); background:oklch(0.985 0.006 86 / .82); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s; }
.nav.is-stuck{ border-color:var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:400; font-size:1.55rem; letter-spacing:-0.01em; }
.brand svg{ width:30px; height:34px; flex:none; }
.nav__links{ display:flex; align-items:center; gap:1.5rem; }
.nav__links a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.96rem; }
.nav__links a:not(.btn):hover,.nav__links a[aria-current]{ color:var(--ink); }
.nav__links a[aria-current]{ font-weight:600; }
.nav__toggle{ display:none; }
@media (max-width:760px){
  .nav__links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem var(--gutter) 1.4rem;
    box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .4s var(--ease); }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a:not(.btn){ padding:.95rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav__links .btn{ margin-top:1rem; justify-content:center; }
  .nav__toggle{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.95rem;
    background:transparent; border:1.5px solid var(--line); border-radius:10px; padding:.55rem .9rem; color:var(--ink); cursor:pointer; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3.2rem,2.6rem + 5vw,7rem) 0 clamp(2.6rem,2rem + 4vw,5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-25% -10% auto auto; width:60%; height:80%; z-index:-1;
  background:radial-gradient(60% 70% at 78% 14%, oklch(0.92 0.045 84 / .7), transparent 70%),
             radial-gradient(50% 55% at 95% 50%, oklch(0.93 0.035 150 / .5), transparent 68%);
  filter:blur(6px); }
.hero__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin:1.1rem 0 1.3rem; }
.hero h1 em{ font-style:italic; color:var(--brass-ink); }
.hero .lead{ max-width:48ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero__note{ margin-top:1.9rem; max-width:52ch; color:var(--muted); font-size:.95rem; line-height:1.6;
  border-left:2px solid var(--brass); padding-left:1rem; }

/* ---------- the keypad (hero + sticky stage share .keypad) ---------- */
.keypad{ width:min(100%,360px); justify-self:center; background:var(--graphite-2); border-radius:24px; padding:18px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .06), 0 1px 0 oklch(0 0 0 / .4), var(--shadow);
  position:relative; }
.keypad::after{ content:""; position:absolute; inset:6px; border-radius:19px; border:1px solid oklch(1 0 0 / .05); pointer-events:none; }
.keypad__plate{ background:linear-gradient(180deg, oklch(0.30 0.012 75), oklch(0.235 0.012 72));
  border-radius:16px; padding:1.1rem 1.1rem 1.3rem; box-shadow:inset 0 2px 8px oklch(0 0 0 / .35); }
.keypad__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1rem; }
.keypad__head .lbl{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-soft); }
.keypad__head .net{ font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; color:oklch(0.62 0.012 80); }
.keypad__status{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.2rem .5rem; border-radius:99px; transition:background-color .6s, color .6s; }
.keypad__dot{ width:7px; height:7px; border-radius:50%; flex:none; transition:background-color .6s, box-shadow .6s; }
.keys{ display:grid; gap:.6rem; }
.key{ display:flex; align-items:center; gap:.8rem; padding:.72rem .85rem; border-radius:11px;
  background:oklch(0.265 0.012 74); border:1px solid oklch(1 0 0 / .05);
  transition:background-color .6s var(--ease), border-color .6s, box-shadow .6s; min-width:0; }
.key__led{ width:11px; height:11px; border-radius:50%; flex:none; background:oklch(0.40 0.012 70);
  box-shadow:none; transition:background-color .6s, box-shadow .6s; }
.key__txt{ min-width:0; flex:1; }
.key__name{ font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--on-dark); display:block; overflow-wrap:anywhere; }
.key__sub{ font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:oklch(0.62 0.012 80); overflow-wrap:anywhere; }
.key__val{ font-family:var(--mono); font-size:.7rem; color:var(--on-dark-soft); flex:none; transition:color .6s; }
.keypad__foot{ margin-top:1rem; display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.04em; color:oklch(0.6 0.012 80); transition:color .6s; min-width:0; }
.keypad__foot svg{ width:14px; height:14px; flex:none; }
.keypad__foot span{ overflow-wrap:anywhere; }

/* keypad states: dark/faulted -> diagnosing -> rebuilding -> restored.
   Default (no data-state) renders the RESTORED, working panel so it never
   ships blank to a crawler. JS sets data-state for the scroll story. */
.keypad[data-state="restored"] .keypad__status,.keypad:not([data-state]) .keypad__status{ background:oklch(0.93 0.035 150 / .16); color:var(--restored-soft); }
.keypad[data-state="restored"] .keypad__dot,.keypad:not([data-state]) .keypad__dot{ background:var(--restored); box-shadow:0 0 10px oklch(0.62 0.105 152 / .8); }
.keypad[data-state="restored"] .key,.keypad:not([data-state]) .key{ background:oklch(0.30 0.018 120); }
.keypad[data-state="restored"] .key__led,.keypad:not([data-state]) .key__led{ background:var(--restored); box-shadow:0 0 9px oklch(0.62 0.105 152 / .9); }
.keypad[data-state="restored"] .keypad__foot,.keypad:not([data-state]) .keypad__foot{ color:var(--restored-soft); }

.keypad[data-state="dead"] .keypad__plate{ background:linear-gradient(180deg, oklch(0.215 0.008 60), oklch(0.165 0.008 58)); }
.keypad[data-state="dead"] .keypad__status{ background:oklch(0.60 0.16 32 / .18); color:oklch(0.80 0.10 36); }
.keypad[data-state="dead"] .keypad__dot{ background:var(--fault); box-shadow:0 0 8px oklch(0.60 0.16 32 / .7); }
.keypad[data-state="dead"] .key{ background:oklch(0.20 0.008 60); }
.keypad[data-state="dead"] .key__led{ background:oklch(0.32 0.01 60); box-shadow:none; }
.keypad[data-state="dead"] .key__val,.keypad[data-state="dead"] .keypad__foot{ color:oklch(0.46 0.10 32); }
.keypad[data-state="dead"] .key--fault .key__led{ background:var(--fault); box-shadow:0 0 9px oklch(0.60 0.16 32 / .9); animation:fault 1.4s steps(2) infinite; }

.keypad[data-state="diagnosing"] .keypad__status{ background:oklch(0.92 0.045 84 / .16); color:var(--brass-soft); }
.keypad[data-state="diagnosing"] .keypad__dot{ background:var(--brass); box-shadow:0 0 9px oklch(0.74 0.115 78 / .8); animation:fault 1.1s steps(2) infinite; }
.keypad[data-state="diagnosing"] .key{ background:oklch(0.27 0.012 78); }
.keypad[data-state="diagnosing"] .key__led{ background:oklch(0.46 0.04 78); }
.keypad[data-state="diagnosing"] .key.is-scan .key__led{ background:var(--brass); box-shadow:0 0 9px oklch(0.74 0.115 78 / .9); }
.keypad[data-state="diagnosing"] .keypad__foot{ color:var(--brass-soft); }

.keypad[data-state="rebuilding"] .keypad__status{ background:oklch(0.92 0.045 84 / .16); color:var(--brass-soft); }
.keypad[data-state="rebuilding"] .keypad__dot{ background:var(--brass); box-shadow:0 0 9px oklch(0.74 0.115 78 / .8); }
.keypad[data-state="rebuilding"] .key{ background:oklch(0.285 0.014 86); }
.keypad[data-state="rebuilding"] .key__led{ background:var(--brass); box-shadow:0 0 8px oklch(0.74 0.115 78 / .7); }
.keypad[data-state="rebuilding"] .key__val{ color:var(--brass-soft); }
.keypad[data-state="rebuilding"] .keypad__foot{ color:var(--brass-soft); }

@keyframes fault{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .keypad .key__led,.keypad__dot{ animation:none !important; } }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(3.5rem,2.8rem + 4.5vw,7rem) 0; }
.panel{ background:var(--bg-2); }
.section__head{ max-width:42ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section__head h2{ margin-bottom:.9rem; }
.section__head p{ color:var(--ink-soft); font-size:1.16rem; }
.kicker{ /* legacy hook kept harmless */ }

/* ---------- the rescue scroll-story: sticky keypad + scrolling beats ---------- */
.story{ background:var(--night); color:var(--on-dark); position:relative; overflow:hidden; }
.story::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 32% at 14% 6%, oklch(0.60 0.16 32 / .14), transparent 70%),
             radial-gradient(46% 36% at 88% 96%, oklch(0.62 0.105 152 / .20), transparent 72%); }
.story .wrap{ position:relative; z-index:1; }
.story__intro{ max-width:46ch; padding:clamp(3.5rem,3rem + 4vw,6rem) 0 clamp(1rem,2vw,2.5rem); }
.story__intro .mono{ color:var(--brass-soft); margin-bottom:1rem; }
.story__intro .mono::before{ background:var(--brass); }
.story__intro h2{ color:var(--on-dark); margin-bottom:.9rem; }
.story__intro p{ color:var(--on-dark-soft); font-size:1.16rem; }

.story__cols{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem,5vw,5.5rem); align-items:start; }
@media (max-width:880px){ .story__cols{ grid-template-columns:1fr; } }
.story__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
@media (max-width:880px){ .story__stage{ position:sticky; top:60px; height:auto; padding:1.4rem 0 1.8rem; } }
.beats{ padding:4vh 0 10vh; }
.beat{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; max-width:34ch; }
@media (max-width:880px){ .beat{ min-height:62vh; } }
.beat__step{ font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass-soft); margin-bottom:.8rem; display:inline-flex; align-items:center; gap:.55rem; }
.beat__step .n{ width:1.7rem; height:1.7rem; border-radius:7px; display:inline-grid; place-items:center; background:oklch(1 0 0 / .08);
  border:1px solid oklch(1 0 0 / .14); color:var(--on-dark); font-size:.82rem; }
.beat.is-fault .beat__step{ color:oklch(0.80 0.10 36); }
.beat h3{ color:var(--on-dark); font-size:clamp(1.7rem,1.3rem + 1.9vw,2.7rem); margin-bottom:.8rem; line-height:1.05; }
.beat p{ color:var(--on-dark-soft); font-size:1.1rem; }

/* ---------- pains ("sound familiar") ---------- */
.pains{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(1rem,2.4vw,1.6rem); }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-sm); min-width:0; }
.pain h3{ font-family:var(--sans); font-weight:600; font-size:1.12rem; line-height:1.3; display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.6rem; }
.pain h3 .x{ width:1.5rem; height:1.5rem; flex:none; border-radius:7px; background:oklch(0.96 0.05 36); color:var(--fault);
  display:grid; place-items:center; font-weight:700; font-size:.9rem; margin-top:.1rem; }
.pain p{ color:var(--ink-soft); font-size:.98rem; }

/* ---------- feats (what we do / faults) ---------- */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:clamp(1.4rem,3vw,2.4rem); }
.feat{ display:flex; gap:1rem; align-items:flex-start; min-width:0; }
.feat__ic{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--graphite); color:var(--brass);
  display:grid; place-items:center; padding:11px; box-shadow:var(--shadow-sm); }
.feat__ic svg{ width:100%; height:100%; }
.feat > div{ min-width:0; }
.feat h3{ font-family:var(--sans); font-weight:600; font-size:1.16rem; margin-bottom:.45rem; line-height:1.25; }
.feat p{ color:var(--ink-soft); font-size:.99rem; }

/* ---------- compare (fix vs rip-out) ---------- */
.compare{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }
.compare h2{ margin-bottom:1rem; }
.gauge{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.2rem); box-shadow:var(--shadow); min-width:0; }
.gauge__title{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem; }
.gauge__row{ display:grid; grid-template-columns:5.5rem 1fr; gap:.8rem; align-items:center; margin-bottom:.9rem; }
.gauge__lbl{ font-family:var(--sans); font-weight:600; font-size:.92rem; overflow-wrap:anywhere; }
.gauge__track{ height:12px; border-radius:99px; background:var(--bg-2); overflow:hidden; }
.gauge__track i{ display:block; height:100%; border-radius:99px; background:var(--graphite); }
.gauge__track.now i{ background:var(--restored); }
.gauge small{ display:block; color:var(--muted); font-size:.85rem; margin-top:1.1rem; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(1.5rem,3vw,3rem); counter-reset:s; }
.step{ counter-increment:s; position:relative; padding-top:1.7rem; border-top:2px solid var(--brass); min-width:0; }
.step::before{ content:"0" counter(s); font-family:var(--mono); font-weight:600; font-size:.9rem; color:var(--brass-ink); position:absolute; top:-1.1rem; left:0; background:var(--bg); padding-right:.6rem; }
.panel .step::before{ background:var(--bg-2); }
.step h3{ font-family:var(--sans); font-weight:600; font-size:1.22rem; margin:.2rem 0 .55rem; }
.step p{ color:var(--ink-soft); }

/* ---------- proof ---------- */
.proof{ max-width:62ch; }
.proof h2{ margin-bottom:1.1rem; }
.proof > p{ color:var(--ink-soft); font-size:1.1rem; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1.2rem; margin-top:2.2rem; max-width:none; }
.stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); min-width:0; }
.stat b{ font-family:var(--serif); font-weight:400; font-size:1.4rem; display:block; color:var(--ink); line-height:1.1; margin-bottom:.35rem; }
.stat span{ color:var(--muted); font-size:.92rem; line-height:1.45; display:block; }

/* ---------- takeover / retainer band ---------- */
.retain{ background:linear-gradient(135deg, var(--graphite), var(--night-2)); color:var(--on-dark); border-radius:var(--radius-lg);
  padding:clamp(2.2rem,2rem + 3.5vw,4rem); position:relative; overflow:hidden; }
.retain::before{ content:""; position:absolute; inset:auto -8% -50% auto; width:55%; height:120%;
  background:radial-gradient(circle at 70% 30%, oklch(0.74 0.115 78 / .22), transparent 65%); pointer-events:none; }
.retain__in{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:820px){ .retain__in{ grid-template-columns:1fr; } }
.retain h2{ color:var(--on-dark); max-width:20ch; margin-bottom:1rem; }
.retain p{ color:var(--on-dark-soft); font-size:1.1rem; max-width:52ch; }
.retain__list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.retain__list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--on-dark); font-size:.98rem; min-width:0; }
.retain__list svg{ width:20px; height:20px; flex:none; color:var(--brass); margin-top:.15rem; }
.retain__list span{ overflow-wrap:anywhere; }

/* ---------- faq ---------- */
.faq{ max-width:760px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.4rem 2.5rem 1.4rem 0; position:relative; font-family:var(--serif); font-weight:400; font-size:1.4rem; line-height:1.2; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.3rem; top:1.85rem; width:12px; height:12px;
  border-right:2px solid var(--brass-ink); border-bottom:2px solid var(--brass-ink); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq p{ color:var(--ink-soft); padding-bottom:1.4rem; max-width:66ch; }

/* ---------- closing CTA ---------- */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:auto -10% -45% -10%; height:70%; z-index:-1;
  background:radial-gradient(50% 100% at 50% 100%, oklch(0.92 0.045 84 / .65), transparent 72%); }
.cta h2{ max-width:20ch; margin:0 auto 1.1rem; }
.cta p{ max-width:50ch; margin:0 auto 2rem; color:var(--ink-soft); font-size:1.16rem; }
.cta__row{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--muted); }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:11px; padding:.85rem .95rem; width:100%; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px oklch(0.74 0.115 78 / .18); }
.field textarea{ min-height:160px; resize:vertical; line-height:1.5; }
.form__note{ color:var(--muted); font-size:.86rem; line-height:1.5; }
.aside{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2rem); box-shadow:var(--shadow); min-width:0; }
.aside h2{ font-family:var(--serif); font-size:1.6rem; margin-bottom:1.1rem; }
.aside dl{ margin:0; display:grid; gap:.2rem; }
.aside dt{ font-family:var(--sans); font-weight:600; font-size:.98rem; color:var(--ink); margin-top:.9rem; }
.aside dt:first-child{ margin-top:0; }
.aside dd{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.aside .lbl{ font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:1.5rem; }
.aside a{ color:var(--brass-ink); font-weight:600; }

/* ---------- article (guide) ---------- */
.article{ max-width:64ch; }
.article h2{ margin-bottom:1rem; }
.article h2:not(:first-child){ margin-top:.4rem; }
.article p{ color:var(--ink-soft); font-size:1.08rem; margin-bottom:1.1rem; }
.article p:last-child{ margin-bottom:0; }
.article strong{ color:var(--ink); font-weight:600; }
.toc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.5rem; box-shadow:var(--shadow-sm); }
.toc p{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.toc a{ color:var(--ink-soft); text-decoration:none; font-size:.98rem; border-bottom:1px solid transparent; }
.toc a:hover{ color:var(--brass-ink); border-color:var(--brass); }

/* ---------- footer ---------- */
.foot{ background:var(--night-2); color:var(--on-dark-soft); padding:clamp(2.8rem,2rem + 3vw,4rem) 0 2.4rem; }
.foot a{ color:oklch(0.86 0.012 84); text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.4rem; }
.foot__promise{ font-family:var(--serif); font-size:1.7rem; color:var(--on-dark); max-width:14ch; margin:0; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2rem 3rem; }
.foot__col h4{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--brass-soft); margin:0 0 .9rem; font-weight:500; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot__col li{ font-size:.95rem; color:var(--on-dark-soft); overflow-wrap:anywhere; }
.foot__bottom{ border-top:1px solid oklch(1 0 0 / .1); margin-top:2.6rem; padding-top:1.5rem; display:flex; flex-wrap:wrap;
  gap:.6rem 1.6rem; justify-content:space-between; color:oklch(0.68 0.012 82); font-size:.85rem; }
.foot__bottom span{ overflow-wrap:anywhere; }
.foot__bottom a{ color:oklch(0.8 0.012 84); }

/* ---------- reveal motion (visible by default; JS hides only below-fold) ---------- */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-pending{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion: reduce){ .reveal.is-pending{ opacity:1; transform:none; } }