/* =========================================================================
   Cruxsmith - "Daylight Forge" design system
   Warm paper + sturdy serif (Spectral) + humanist sans (Hanken Grotesk).
   Light is the default (trust-forward); a warm dark mode mirrors it.
   Single clay/ember accent, a deep pine for verified/trust signals.
   ========================================================================= */

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

:root{
  /* light (default) */
  --paper:#f5f1e8;
  --paper-2:#efe8da;
  --surface:#fffdf7;
  --surface-2:#faf6ec;
  --ink:#221e18;
  --ink-2:#5c574c;
  --ink-3:#8a8474;
  --line:#e2dac8;
  --line-2:#d0c6af;
  --clay:#b9542f;
  --clay-deep:#9c4324;
  --clay-soft:#f0e0d4;
  --pine:#3f5c45;
  --gold:#a98545;
  --shadow:0 1px 2px rgba(34,30,24,.04), 0 18px 40px -30px rgba(34,30,24,.28);
  --shadow-lift:0 2px 4px rgba(34,30,24,.05), 0 26px 50px -28px rgba(34,30,24,.34);

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --maxw:1140px;
  --r:12px;
  --r-sm:8px;
  --r-lg:18px;
}

body.dark-mode{
  --paper:#15110d;
  --paper-2:#1c1711;
  --surface:#211a13;
  --surface-2:#271f16;
  --ink:#f2eae0;
  --ink-2:#b6aa99;
  --ink-3:#7e7365;
  --line:#332820;
  --line-2:#44362a;
  --clay:#dd7e40;
  --clay-deep:#ecab66;
  --clay-soft:#2e2117;
  --pine:#7aa581;
  --gold:#cdab74;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 44px -30px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 28px 56px -28px rgba(0,0,0,.8);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .35s ease, color .35s ease;
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
h1{font-weight:600}
em{font-style:italic}
a{color:var(--clay);text-decoration:none}
a:hover{color:var(--clay-deep)}
p{text-wrap:pretty}
img{max-width:100%;display:block}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.6rem}
.narrow{max-width:760px}

/* accessibility */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--clay);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;z-index:2000;font-weight:600}
.skip-link:focus{left:0}
*:focus-visible{outline:2.5px solid var(--clay);outline-offset:3px;border-radius:2px}
body.dark-mode *:focus-visible{outline-color:var(--clay-deep)}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s, border-color .18s, color .18s;white-space:nowrap}
.btn-primary{background:var(--clay);color:#fff7f1}
.btn-primary:hover{background:var(--clay-deep);color:#fff7f1;transform:translateY(-2px);box-shadow:0 12px 26px -12px var(--clay)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--clay);color:var(--clay)}
.btn-lg{padding:1rem 1.8rem;font-size:1.05rem}
.text-link{color:var(--clay);font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.text-link:hover{gap:.5rem}

/* ---- navigation ------------------------------------------------------ */
nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem 1.6rem;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink)}
.nav-brand:hover{color:var(--ink)}
.nav-brand .peak{height:27px;width:auto;flex:none}
.logo-base{fill:#b9932e}
.logo-mid{fill:#b6b92e}
.logo-peak{fill:#81b92e}
.nav-links{display:flex;gap:1.9rem;list-style:none;align-items:center}
.nav-links a{font-size:.96rem;font-weight:500;color:var(--ink-2);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--clay)}
.nav-controls{display:flex;align-items:center;gap:.85rem}
.nav-cta{font-family:var(--sans);font-weight:600;font-size:.92rem;color:#fff7f1;background:var(--clay);padding:.6rem 1.05rem;border-radius:var(--r-sm);transition:background .2s,transform .2s;white-space:nowrap}
.nav-cta:hover{background:var(--clay-deep);color:#fff7f1;transform:translateY(-1px)}
.theme-toggle{background:transparent;border:1px solid var(--line-2);width:38px;height:38px;border-radius:var(--r-sm);cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.theme-toggle:hover{border-color:var(--clay)}
.hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:8px}
.hamburger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:.5rem 0;transform:translateY(-130%);transition:transform .3s ease;align-items:stretch}
  .nav-links.active{transform:translateY(0)}
  .nav-links li{border-top:1px solid var(--line)}
  .nav-links a{display:block;padding:1rem 1.6rem;font-size:1.05rem}
  .hamburger{display:flex}
  .nav-cta{display:none}
}

/* ---- section scaffolding -------------------------------------------- */
.section{padding:4.6rem 0}
.section.alt{background:var(--paper-2)}
.section-border{border-top:1px solid var(--line)}
.kicker{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--clay);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:26px;height:2px;background:var(--clay);border-radius:2px;display:inline-block}
.section-heading{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:24ch}
.section-subtext{color:var(--ink-2);max-width:62ch;margin-top:1rem;font-size:1.08rem}
.section-head{margin-bottom:2.6rem}

/* ---- hero ------------------------------------------------------------ */
.hero{padding:4.8rem 0 3.4rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem);margin-bottom:1.4rem}
.hero h1 em{color:var(--clay);font-style:italic}
.hero .subtitle{font-size:1.18rem;color:var(--ink-2);max-width:46ch;margin-bottom:2rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:600;color:var(--pine);margin-bottom:1.5rem;background:var(--surface);border:1px solid var(--line);padding:.4rem .85rem .4rem .6rem;border-radius:40px}
.hero-kicker .dot{height:18px;width:auto;flex:none}
.trust-line{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-2);max-width:52ch}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:2rem}.hero{padding-top:3rem}}

/* ---- image placeholder ---------------------------------------------- */
.ph{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-2);overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 14px, var(--surface) 14px 28px);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);min-height:220px}
.ph::after{content:attr(data-label);font-family:'JetBrains Mono','SF Mono',monospace;font-size:.74rem;letter-spacing:.04em;
  color:var(--ink-3);padding:.5rem .8rem;background:var(--surface);border:1px solid var(--line);border-radius:40px;max-width:80%}
.ph.tall{min-height:420px}
.ph.wide{aspect-ratio:16/9}
.ph.hero-img{min-height:380px}
.case-img{width:100%;height:auto;display:block;margin:.4rem 0 1rem;border-radius:0}

/* ---- generic grids & cards ------------------------------------------ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1.2rem}
.feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.feature-card h3{font-size:1.22rem;margin-bottom:.55rem}
.feature-card p{color:var(--ink-2);font-size:.98rem}
.feature-card .text-link{margin-top:.9rem}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--clay-soft);color:var(--clay);font-family:var(--serif);font-weight:600;font-size:1.2rem;margin-bottom:.9rem}
body.dark-mode .step-num{color:var(--clay-deep)}

.work-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.work-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.work-tag{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--pine);background:color-mix(in srgb,var(--pine) 12%,transparent);padding:.38rem 1rem;border-radius:40px;line-height:1.25;margin-bottom:.9rem}
.work-card h3{font-size:1.3rem;margin-bottom:.6rem}
.work-card p{color:var(--ink-2);font-size:.97rem;margin-bottom:.5rem}

/* ---- compare grid ---------------------------------------------------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.compare-col{border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;background:var(--surface)}
.compare-col h3{font-size:1.2rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}
.compare-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.compare-col li{font-size:.98rem;color:var(--ink-2);padding-left:1.7rem;position:relative}
.compare-bad li::before{content:"–";position:absolute;left:.35rem;color:var(--ink-3);font-weight:700}
.compare-good{border-color:var(--clay);background:linear-gradient(180deg,var(--clay-soft),var(--surface))}
.compare-good h3{color:var(--clay)}
.compare-good li{color:var(--ink)}
.compare-good li::before{content:"✓";position:absolute;left:.2rem;color:var(--pine);font-weight:700}
@media(max-width:720px){.compare-grid{grid-template-columns:1fr}}

/* ---- proof ----------------------------------------------------------- */
.proof-results{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.result-item{padding:1.5rem 0;border-bottom:1px solid var(--line);font-size:1.1rem;color:var(--ink);padding-left:1.8rem;position:relative}
.result-item::before{content:"";position:absolute;left:0;top:1.9rem;width:9px;height:9px;background:var(--clay);border-radius:2px;transform:rotate(45deg)}
.result-item .metric{color:var(--clay);font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.12em}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow)}
.stat .big{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--clay);line-height:1}
.stat .cap{font-size:.92rem;color:var(--ink-2);margin-top:.7rem}
@media(max-width:720px){.stat-row{grid-template-columns:1fr}}

/* ---- pricing --------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;align-items:start}
.price-grid--narrow{max-width:720px;margin-inline:auto}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem}
.price-card.featured{border-color:var(--clay);box-shadow:0 0 0 1px var(--clay), var(--shadow-lift);position:relative}
.price-badge{font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--clay)}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.spots-fill{display:inline-flex;align-items:center;gap:.4rem}
.spots-fill svg{display:block;flex:none}
.spots-fill .ring-track{stroke:color-mix(in srgb,var(--clay) 20%,transparent)}
.spots-fill .ring-arc{stroke:var(--clay)}
.spots-ratio{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--clay)}
.price-card h3{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--ink)}
.price-desc{color:var(--ink-2);font-size:.97rem;margin:.4rem 0 .8rem}
.deliverables{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0 1.3rem}
.deliverables li{font-size:.93rem;color:var(--ink-2);padding-left:1.5rem;position:relative}
.deliverables li::before{content:"✓";position:absolute;left:0;color:var(--pine);font-weight:700}
.price-card .btn{margin-top:auto}
.expansion-note{margin-top:1.6rem;padding:1.2rem 1.4rem;background:var(--clay-soft);border:1px solid color-mix(in srgb,var(--clay) 28%,transparent);border-radius:var(--r);font-size:.98rem;color:var(--ink)}
.why-panel{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:var(--r);padding:1.7rem 1.9rem;box-shadow:var(--shadow)}
.why-panel p{color:var(--ink-2);font-size:1.05rem}
.why-panel p+p{margin-top:1rem}

/* ---- FAQ ------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 2.2rem 1.25rem 0;font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1.1rem;font-size:1.5rem;color:var(--clay);font-family:var(--sans);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);padding:0 2rem 1.4rem 0;font-size:1rem}
.faq details a{font-weight:600}

/* ---- CTA section ----------------------------------------------------- */
.cta-section{padding:5rem 0;text-align:center;background:var(--paper-2)}
.cta-section h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.cta-section h2 em{color:var(--clay);font-style:italic}
.cta-section p{color:var(--ink-2);max-width:50ch;margin:0 auto 2rem;font-size:1.12rem}

/* ---- footer ---------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:3.4rem 0 2.6rem;background:var(--surface-2)}
.footer-nav{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer-col h4{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;font-family:var(--sans)}
.footer-col a{display:block;color:var(--ink-2);font-size:.94rem;padding:.28rem 0;transition:color .2s}
.footer-col a:hover{color:var(--clay)}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:700;font-size:1.35rem;margin-bottom:.7rem;color:var(--ink)}
.footer-brand .peak{height:24px;width:auto}
.footer-blurb{font-size:.92rem;color:var(--ink-2);max-width:32ch}
.footer-legal{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-3)}
.footer-legal a{color:var(--ink-2)}
@media(max-width:720px){.footer-nav{grid-template-columns:1fr 1fr}.footer-brand-col{grid-column:1 / -1}}

/* ---- sticky CTA (mobile) -------------------------------------------- */
.sticky-cta{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(150%);
  background:var(--clay);color:#fff7f1;font-weight:600;padding:.85rem 1.4rem;border-radius:40px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4);z-index:900;transition:transform .35s ease;font-size:.95rem;white-space:nowrap}
.sticky-cta.show{transform:translateX(-50%) translateY(0)}
.sticky-cta:hover{color:#fff7f1;background:var(--clay-deep)}
@media(min-width:861px){.sticky-cta{display:none}}

/* ---- reveal animation ------------------------------------------------ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---- hero "crux route" graphic --------------------------------------- */
.hero-graphic{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:radial-gradient(120% 120% at 78% 18%, var(--surface) 0%, var(--surface-2) 70%, var(--paper-2) 100%);
  overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center}
.hero-graphic svg{width:100%;height:100%;display:block}
.hg-contour{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-opacity:.6}
.hg-base{stroke:var(--line);stroke-width:1.4;stroke-opacity:.75}
.hg-route{fill:none;stroke:var(--clay);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.hg-node{fill:var(--surface);stroke:var(--clay);stroke-width:2.2}
.hg-crux{fill:var(--clay)}
.hg-halo{fill:none;stroke:var(--clay);stroke-width:2;opacity:0}
.hg-peak-a{fill:#81b92e}.hg-peak-b{fill:#b6b92e}.hg-peak-c{fill:#b9932e}
.hg-label{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;fill:var(--ink-3)}
.hg-label.crux{fill:var(--clay)}
.hg-node,.hg-crux,.hg-halo,.hg-peak-a,.hg-peak-b,.hg-peak-c{transform-box:fill-box;transform-origin:center}

/* entrance is purely additive: base state above is the full, visible composition */
@media (prefers-reduced-motion: no-preference){
  .hg-contour{animation:hgFade .9s ease both}
  .hg-contour:nth-of-type(1){animation-delay:.05s}
  .hg-contour:nth-of-type(2){animation-delay:.13s}
  .hg-contour:nth-of-type(3){animation-delay:.21s}
  .hg-contour:nth-of-type(4){animation-delay:.29s}
  .hg-contour:nth-of-type(5){animation-delay:.37s}
  .hg-base{animation:hgFade .9s ease .1s both}
  .hg-route{animation:hgDraw 1.5s cubic-bezier(.65,.05,.36,1) .45s both}
  .hg-node{animation:hgPop .5s cubic-bezier(.34,1.56,.64,1) both}
  .hg-node.n1{animation-delay:.85s}.hg-node.n2{animation-delay:1.2s}.hg-node.n3{animation-delay:1.55s}
  .hg-crux{animation:hgPop .55s cubic-bezier(.34,1.56,.64,1) 1.75s both}
  .hg-halo{animation:hgHalo 1.9s ease-out 2.2s 2}
  .hg-peak-a,.hg-peak-b,.hg-peak-c{animation:hgPop .55s cubic-bezier(.34,1.56,.64,1) both}
  .hg-peak-c{animation-delay:1.95s}.hg-peak-b{animation-delay:2.05s}.hg-peak-a{animation-delay:2.15s}
  .hg-label{animation:hgFade .7s ease both}
  .hg-label.crux{animation-delay:2.25s}.hg-label.summit{animation-delay:2.4s}
}
@keyframes hgFade{from{opacity:0}to{opacity:1}}
@keyframes hgDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hgPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes hgHalo{0%{opacity:.5;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}

/* ---- paper grain (tactile warmth, very subtle) ----------------------- */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
body.dark-mode::after{opacity:.05;mix-blend-mode:overlay}

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

/* =========================================================================
   LANDING PAGE - editorial layer ("Daylight Forge, set in lead")
   Home page only. Everything is scoped under `.lp` so the shared system
   and the other 13 interior pages are completely unaffected.
   Reuses every token, the logo, and the crux-route graphic classes.
   ========================================================================= */
.lp .container.wide{max-width:1300px}
.lp .lp-section{padding:6rem 0;position:relative}
.lp .lp-section.tight{padding:4rem 0}
.lp .lp-section.alt{background:var(--paper-2)}
.lp .lp-rule{border-top:1px solid var(--line)}

/* mono wayfinding label: "01 / THE DIAGNOSTIC" --------------------------- */
.lp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.7rem}
.lp-eyebrow .n{color:var(--clay);font-weight:500}
.lp-eyebrow .bar{align-self:center;width:30px;height:1px;background:var(--line-2);flex:none}

.lp-display{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.02;color:var(--ink)}
.lp-display em{font-style:italic;color:var(--clay)}

/* ---- section-index rail (left gutter spine, wide screens only) -------- */
/* The rail sits in the left gutter. It has an explicit width (so a fixed,
   positioned, auto-width box can't shrink-to-fit to a phantom size and bleed
   off-screen) and is anchored by its RIGHT edge to a constant 1.75rem left of
   the widest content container (the 1300px hero) via translateX(-100%). The
   gap to content is therefore identical at every width. It only appears once
   the gutter is wide enough (>=1500px) to hold the rail plus that gap with
   room to spare, so it can never ride over the hero or copy. */
.lp-rail{position:fixed;left:calc((100vw - 1300px)/2 - 1.75rem);top:50%;
  width:3.4rem;transform:translate(-100%,-50%);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:'JetBrains Mono',monospace}
.lp-rail a{display:flex;align-items:center;gap:.7rem;padding:.36rem 0;color:var(--ink-3);
  font-size:.68rem;letter-spacing:.06em;text-decoration:none;transition:color .25s}
.lp-rail a .rn{font-variant-numeric:tabular-nums;transition:color .25s}
.lp-rail a::before{content:"";width:14px;height:1px;background:var(--line-2);flex:none;
  transition:background .25s,width .25s}
.lp-rail a:hover{color:var(--ink)}
.lp-rail a:hover::before{background:var(--ink-3);width:20px}
.lp-rail a.active{color:var(--clay)}
.lp-rail a.active .rn{color:var(--clay)}
.lp-rail a.active::before{background:var(--clay);width:26px}
@media(max-width:1499px){.lp-rail{display:none}}

/* ---- HERO ------------------------------------------------------------- */
.lp-hero{padding:3.4rem 0 0;position:relative;overflow:hidden}
.lp-hero-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:2.4rem}
.lp-loc{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.lp-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:1.5rem 2.5rem;align-items:center}
.lp-hero-copy{max-width:none}
.lp-hero h1{font-size:clamp(2.6rem,5.2vw,4.3rem);line-height:1.03;letter-spacing:-.025em;
  margin:.2rem 0 1.5rem;max-width:16ch}
.lp-hero h1 em{color:var(--clay);font-style:italic}
.lp-hero .subtitle{font-size:1.18rem;color:var(--ink-2);max-width:48ch;margin-bottom:1.9rem;line-height:1.6}
.lp-hero .subtitle .lede{font-size:1.05em}
.lp-hero-art{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.lp-hg{position:relative;width:118%;margin-right:-18%;min-height:420px;display:flex;align-items:center;justify-content:center}
.lp-hg svg{width:100%;height:100%;display:block;overflow:visible}
.lp-hero-trust{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.4rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.lp-hero-trust .lab{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;padding-top:.2rem}
.lp-hero-trust p{font-size:.98rem;color:var(--ink-2);max-width:74ch;margin:0}
@media(max-width:860px){
  .lp-hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .lp-hero-art{order:-1;min-height:300px}
  .lp-hg{width:100%;margin-right:0;min-height:300px}
  .lp-hero h1{max-width:none}
  .lp-hero-trust{grid-template-columns:1fr;gap:.5rem}
}

/* ---- THE WIN: roofing case strip (reframed proof stats) --------------- */
.lp-win{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden}
.lp-win-head{padding:1.9rem 2rem 1.7rem;display:grid;grid-template-columns:1.5fr 1fr;
  gap:1rem 2rem;align-items:end;border-bottom:1px solid var(--line)}
.lp-win-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.015em;line-height:1.08}
.lp-win-head h2 em{font-style:italic;color:var(--clay)}
.lp-win-head .frame{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.lp-win-tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pine);margin-bottom:.7rem;display:block}
.lp-win-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.lp-win-cell{padding:2rem;border-right:1px solid var(--line);position:relative}
.lp-win-cell:last-child{border-right:0}
.lp-win-lever{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.lp-win-lever b{color:var(--clay);font-weight:500}
.lp-win-num{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,5.4vw,4.4rem);
  line-height:.95;color:var(--ink);letter-spacing:-.02em}
.lp-win-num .u{font-size:.34em;color:var(--ink-2);letter-spacing:0}
.lp-win-cap{margin-top:.9rem;font-size:.92rem;color:var(--ink-2);line-height:1.5;max-width:30ch}
@media(max-width:760px){
  .lp-win-head{grid-template-columns:1fr;padding:1.5rem}
  .lp-win-grid{grid-template-columns:1fr}
  .lp-win-cell{border-right:0;border-bottom:1px solid var(--line)}
  .lp-win-cell:last-child{border-bottom:0}
}

/* ---- full-bleed establishing image (chapter break) ------------------- */
.lp-bleed{position:relative}
.lp-bleed .ph{border-radius:0;border-left:0;border-right:0;min-height:clamp(280px,42vw,520px)}
.lp-bleed-fig{margin:0;position:relative;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  overflow:hidden;background:var(--paper-2)}
.lp-bleed-fig img{display:block;width:100%;height:clamp(300px,46vw,560px);object-fit:cover;
  object-position:center 42%}
/* a whisper of warm paper at the edges so the band seats into the page */
.lp-bleed-fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px 12px color-mix(in oklab, var(--paper) 38%, transparent)}
body.dark-mode .lp-bleed-fig img{filter:brightness(.86) contrast(1.02)}
body.dark-mode .lp-bleed-fig::after{box-shadow:inset 0 0 110px 16px color-mix(in oklab, var(--paper) 55%, transparent)}
.lp-bleed-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 0 0;font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---- THE DIAGNOSTIC: oversized numbered leak list -------------------- */
.lp-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:2.5rem 3.5rem;align-items:start}
.lp-split-head{position:sticky;top:6rem}
.lp-split-head h2{font-size:clamp(2rem,3.6vw,2.9rem);max-width:13ch;margin:1.1rem 0 1.1rem}
.lp-split-head .note{color:var(--ink-2);font-size:1rem;max-width:34ch}
.lp-leaks{display:flex;flex-direction:column}
.lp-leak{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.7rem 0;
  border-top:1px solid var(--line)}
.lp-leak:first-child{border-top:0;padding-top:.3rem}
.lp-leak .ln{font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1;
  color:var(--line-2);letter-spacing:-.02em;font-feature-settings:"tnum"}
.lp-leak h3{font-size:1.34rem;margin-bottom:.4rem;letter-spacing:-.01em}
.lp-leak p{color:var(--ink-2);font-size:1rem;max-width:52ch}
@media(max-width:860px){
  .lp-split{grid-template-columns:1fr;gap:2rem}
  .lp-split-head{position:static}
  .lp-leak{gap:1.1rem}
}

/* ---- THE DIFFERENCE: pull-quote + spec-sheet compare ----------------- */
.lp-quote{max-width:20ch;margin:.6rem 0 2.2rem;
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.06}
.lp-quote em{color:var(--clay);font-style:italic}
.lp-diff-sub{color:var(--ink-2);font-size:1.1rem;max-width:54ch;margin-top:0}
.lp-compare{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.lp-compare-col{padding:2rem 2.2rem}
.lp-compare-col+.lp-compare-col{border-left:1px solid var(--line)}
.lp-compare-col.them{background:var(--surface-2)}
.lp-compare-col.us{position:relative}
.lp-compare-col.us::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--clay)}
.lp-compare-h{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.3rem;color:var(--ink-3)}
.lp-compare-col.us .lp-compare-h{color:var(--clay)}
.lp-compare-col ul{list-style:none;display:flex;flex-direction:column;gap:0}
.lp-compare-col li{font-size:1rem;padding:.85rem 0 .85rem 1.7rem;position:relative;
  border-top:1px solid var(--line);color:var(--ink-2)}
.lp-compare-col li:first-child{border-top:0}
.lp-compare-col.them li::before{content:"–";position:absolute;left:.3rem;top:.85rem;color:var(--ink-3);font-weight:700}
.lp-compare-col.us li{color:var(--ink)}
.lp-compare-col.us li::before{content:"✓";position:absolute;left:.2rem;top:.85rem;color:var(--pine);font-weight:700}
@media(max-width:720px){
  .lp-compare{grid-template-columns:1fr}
  .lp-compare-col+.lp-compare-col{border-left:0;border-top:1px solid var(--line)}
}

/* ---- WHO WE SERVE: editorial three-column band ----------------------- */
.lp-serve{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.lp-serve-col{padding:2.2rem 2rem 2.4rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.lp-serve-col:last-child{border-right:0}
.lp-serve-idx{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.16em;
  color:var(--clay);margin-bottom:1.4rem}
.lp-serve-col h3{font-size:1.42rem;margin-bottom:.7rem;letter-spacing:-.01em;max-width:14ch}
.lp-serve-col p{color:var(--ink-2);font-size:.98rem;margin-bottom:1.2rem}
.lp-serve-col .text-link{margin-top:auto}
@media(max-width:820px){
  .lp-serve{grid-template-columns:1fr}
  .lp-serve-col{border-right:0;border-bottom:1px solid var(--line)}
  .lp-serve-col:last-child{border-bottom:0}
}

/* ---- HOW WE WORK: numbered sequence on a route line ------------------ */
.lp-steps{margin-top:1rem;position:relative}
.lp-step{display:grid;grid-template-columns:auto 1fr;gap:2rem;padding:0 0 2.6rem}
.lp-step:last-child{padding-bottom:0}
.lp-step-rail{position:relative;width:64px;display:flex;justify-content:center}
.lp-step-rail::before{content:"";position:absolute;top:.6rem;bottom:-2.6rem;width:2px;
  background:linear-gradient(var(--line-2),var(--line-2));left:50%;transform:translateX(-50%)}
.lp-step:last-child .lp-step-rail::before{display:none}
.lp-step-node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--clay)}
.lp-step.crux .lp-step-node{border-color:var(--clay);box-shadow:0 0 0 4px var(--clay-soft)}
.lp-step-body{padding-top:.5rem;max-width:60ch}
.lp-step-body h3{font-size:1.4rem;margin-bottom:.5rem;letter-spacing:-.01em}
.lp-step-body .tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem;display:block}
.lp-step-body p{color:var(--ink-2);font-size:1.02rem}
@media(max-width:860px){
  .lp-step{gap:1.2rem}
  .lp-step-rail{width:48px}
  .lp-step-node{width:46px;height:46px;font-size:1.25rem}
}

/* ---- PROOF: elevated result list ------------------------------------- */
.lp-proof-list{border-top:1px solid var(--line)}
.lp-proof-item{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line)}
.lp-proof-item .pn{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--clay);
  letter-spacing:.1em;padding-top:.5rem}
.lp-proof-item p{font-size:1.14rem;color:var(--ink);line-height:1.5;max-width:62ch}
.lp-proof-item .metric{color:var(--clay);font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.08em}
@media(max-width:620px){.lp-proof-item{grid-template-columns:1fr;gap:.4rem}}

/* ---- BUILT IN-HOUSE: editorial product rows -------------------------- */
.lp-ship{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:820px){.lp-ship{grid-template-columns:1fr}}

/* ---- WHERE WE WORK: compact place strip ------------------------------ */
.lp-places{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.lp-place{padding:1.6rem 1.8rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.35rem}
.lp-place:last-child{border-right:0}
.lp-place h3{font-size:1.18rem}
.lp-place p{color:var(--ink-2);font-size:.92rem;margin-bottom:.4rem}
.lp-place .text-link{margin-top:auto;font-size:.92rem}
@media(max-width:720px){
  .lp-places{grid-template-columns:1fr}
  .lp-place{border-right:0;border-bottom:1px solid var(--line)}
  .lp-place:last-child{border-bottom:0}
}

/* ---- FAQ two-column -------------------------------------------------- */
.lp-faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:2.5rem 3.5rem;align-items:start}
.lp-faq-grid .lp-split-head{position:sticky;top:6rem}
@media(max-width:860px){
  .lp-faq-grid{grid-template-columns:1fr;gap:1.5rem}
  .lp-faq-grid .lp-split-head{position:static}
}

/* ---- additive entrance for the route line + nodes -------------------- */
@media (prefers-reduced-motion: no-preference){
  .lp-step-node{opacity:0;transform:scale(.6)}
  .lp-steps.visible .lp-step-node{animation:hgPop .5s cubic-bezier(.34,1.56,.64,1) both}
  .lp-steps.visible .lp-step:nth-child(1) .lp-step-node{animation-delay:.05s}
  .lp-steps.visible .lp-step:nth-child(2) .lp-step-node{animation-delay:.18s}
  .lp-steps.visible .lp-step:nth-child(3) .lp-step-node{animation-delay:.31s}
  .lp-steps.visible .lp-step:nth-child(4) .lp-step-node{animation-delay:.44s}
}

/* =========================================================================
   LANDING - round 2 refinements (additive; nothing above is removed)
   ========================================================================= */

/* ---- rail: reading spine + scroll-progress fill ----------------------- */
/* A hairline spine runs through the left edge of the section ticks; a clay
   fill grows down it with scroll, so the rail reads as a progress index, not
   just nav. Driven by --lp-prog (0..1), set by JS; defaults to a visible base
   state so no-JS still shows a complete, sensible rail. */
.lp-rail{padding-left:9px}
.lp-rail::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;
  background:var(--line-2)}
.lp-rail-prog{position:absolute;left:0;top:.5rem;width:1px;background:var(--clay);
  height:calc((100% - 1rem) * var(--lp-prog,0));transition:height .12s linear;pointer-events:none}
.lp-rail a{position:relative}

/* ---- contour seam: a thin topographic motif between sections ---------- */
/* Echoes the hero's route-on-contours as connective tissue. Decorative only,
   aria-hidden, and fully visible at rest (no JS or motion required). */
.lp-seam{position:relative;height:118px;overflow:hidden;pointer-events:none}
.lp-seam svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.lp-seam .ct{fill:none;stroke:var(--line-2);stroke-width:1.2;stroke-opacity:.7;vector-effect:non-scaling-stroke}
.lp-seam .ct-route{fill:none;stroke:var(--clay);stroke-width:1.6;stroke-opacity:.85;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.lp-seam .ct-node{fill:none;stroke:var(--clay);stroke-width:1.6}
@media (prefers-reduced-motion: no-preference){
  .lp-seam .ct-route{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
  .lp-seam.visible .ct-route{animation:hgDraw 1.6s cubic-bezier(.65,.05,.36,1) .1s both}
  .lp-seam .ct-node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
  .lp-seam.visible .ct-node{animation:hgPop .5s cubic-bezier(.34,1.56,.64,1) 1.2s both}
}

/* ---- difference: editorial lede with serif drop cap ------------------- */
.lp-diff-sub.lede-cap::first-letter{
  font-family:var(--serif);font-weight:600;color:var(--clay);
  font-size:3.2em;line-height:.72;float:left;margin:.06em .12em 0 0;font-style:italic}

/* ---- win cells: quiet interactive lift -------------------------------- */
.lp-win-cell{transition:background .25s ease}
.lp-win-cell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.65,.05,.36,1)}
.lp-win-cell:hover{background:var(--clay-soft)}
.lp-win-cell:hover::after{transform:scaleX(1)}

/* =========================================================================
   ICON SYSTEM - "Daylight Forge" hairline set
   Geometric line icons drawn on a 24x24 grid, 1.6px stroke, round joins, to
   match the hero route graphic and the contour seams. All strokes inherit
   currentColor, so an icon takes the color of the text it sits beside. Use
   via the SVG sprite: <svg class="cs-ico"><use href="#ico-NAME"></use></svg>.
   Sprite symbols set stroke; this class sets fill:none + sizing so a single
   declaration governs the whole library.
   ========================================================================= */
.cs-ico{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cs-ico *{vector-effect:non-scaling-stroke}
.cs-ico.solid-dot{fill:currentColor;stroke:none}

/* ---- footer "Start here" block: icon rows ---------------------------- */
/* Only index.html uses these classes, so the other 13 footers are untouched.
   A hairline contour accent and icon-led rows give the footer an anchor. */
.footer-col.footer-start{position:relative}
.footer-start .footer-start-list{display:flex;flex-direction:column;gap:.15rem}
.footer-start a{display:flex;align-items:flex-start;gap:.7rem;padding:.5rem 0;color:var(--ink-2)}
.footer-start a .cs-ico{font-size:1.05rem;color:var(--ink-2);margin-top:.15rem;
  transition:color .2s,transform .2s}
.footer-start a .fs-t{display:block;color:var(--ink);font-weight:600;font-size:.96rem;line-height:1.3}
.footer-start a .fs-s{display:block;color:var(--ink-3);font-size:.8rem;line-height:1.4;
  font-family:'JetBrains Mono',monospace;letter-spacing:.01em;margin-top:.1rem}
.footer-start a:hover .cs-ico{color:var(--clay);transform:translateX(1px)}
.footer-start a:hover .fs-t{color:var(--clay)}
.footer-start a .cs-ico.fs-route{color:var(--clay)}
.footer-start a:hover .cs-ico.fs-route{color:var(--clay-deep)}

/* a hairline route tick threading down the Start column, echoing the hero */
.footer-start::before{content:"";position:absolute;left:-1.1rem;top:.2rem;bottom:.4rem;
  width:1px;background:linear-gradient(var(--line-2),transparent)}
@media(max-width:720px){.footer-start::before{display:none}}

/* ---- icon library showcase (icons.html, internal reference) ---------- */
.ico-sheet{max-width:1080px;margin:0 auto;padding:4rem 1.6rem 6rem}
.ico-sheet h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;margin-bottom:.6rem}
.ico-sheet .lede{color:var(--ink-2);max-width:60ch;margin-bottom:.8rem}
.ico-sheet .meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2.6rem}
.ico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ico-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.7rem 1rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  text-align:center;transition:background .2s}
.ico-cell:hover{background:var(--surface)}
.ico-cell .cs-ico{font-size:2.2rem;color:var(--ink)}
.ico-cell:hover .cs-ico{color:var(--clay)}
.ico-cell .nm{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.ico-row-demo{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;
  padding:1.6rem 1.8rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ico-row-demo span{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink-2);font-size:.96rem}
.ico-row-demo .cs-ico{color:var(--clay);font-size:1.15rem}
.ico-scale{margin-top:1.4rem;display:flex;align-items:flex-end;gap:1.6rem;color:var(--ink)}
.ico-scale .cs-ico{color:var(--ink)}

/* =========================================================================
   FIELD INSTRUMENTS - tiny, quiet, endlessly watchable
   A traveler that works the hero route, an altimeter hung on the reading
   rail, a compass in the footer, and a survey plotter in the margins. All
   decorative (aria-hidden), all token-driven so light/dark stay correct,
   paused while off-screen, and fully disabled under prefers-reduced-motion
   (CSS via the global kill switch; the JS loops check the same query).
   ========================================================================= */

/* the climber: a clay dot that works the hero route on a loop */
.hg-dot{fill:var(--clay);stroke:var(--surface);stroke-width:2;opacity:0;transition:opacity .55s ease}
.hg-dot.on{opacity:1}
.hg-ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}

/* rail altimeter: scroll depth read as elevation gained, Franklin to Wayah */
.lp-alt{margin-top:1.6rem;display:flex;flex-direction:column;gap:.45rem}
.lp-alt svg{width:46px;height:46px;display:block;overflow:visible}
.lp-alt .alt-face{stroke:var(--line-2)}
.lp-alt .alt-ticks{stroke:var(--ink-3);opacity:.5}
.lp-alt .alt-idx{fill:var(--clay);opacity:.85}
.lp-alt .alt-needle line{stroke:var(--clay)}
.lp-alt .alt-needle line.tail{stroke:var(--ink-3)}
.lp-alt .alt-pin{fill:var(--ink);stroke:var(--paper);stroke-width:1.2}
.lp-alt-read{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.1em;
  color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-alt-read b{color:var(--clay);font-weight:500}

/* footer compass: idles around north; the cursor is a magnetic anomaly */
.f-compass{margin-top:1.15rem;width:42px;height:42px;opacity:.9}
.f-compass svg{width:100%;height:100%;display:block;overflow:visible}
.f-compass .c-face{stroke:var(--line-2)}
.f-compass .c-card{stroke:var(--ink-3);opacity:.5}
.f-compass .c-n{fill:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:6px;letter-spacing:.04em}
.f-compass .needle-n{fill:var(--clay)}
.f-compass .needle-s{fill:var(--surface);stroke:var(--ink-3);stroke-width:.9}
.f-compass .c-pin{fill:var(--ink);stroke:var(--surface);stroke-width:1.1}

/* survey plotter: a pen endlessly resurveying a small generative peak */
.fig-plate{width:236px;max-width:100%;margin:2.4rem 0 0 auto;padding:10px 10px 8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow)}
.fig-plate .stage{position:relative;background:var(--surface-2);border-radius:3px;overflow:hidden}
.fig-plate canvas{display:block;width:100%;height:auto;transition:opacity .7s ease}
.fig-plate canvas.pen{position:absolute;inset:0;height:100%}
.fig-plate figcaption{display:flex;justify-content:space-between;gap:.9rem;padding-top:.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.nf .fig-plate{margin:2.8rem auto 0}

/* the cairn resettles when you brush the brand */
@media (prefers-reduced-motion: no-preference){
  .nav-brand .peak path,.footer-brand .peak path{transform-box:fill-box;transform-origin:50% 100%}
  .nav-brand:hover .peak path:nth-of-type(odd),.footer-brand:hover .peak path:nth-of-type(odd){
    animation:cairnA .9s cubic-bezier(.33,1,.68,1) both}
  .nav-brand:hover .peak path:nth-of-type(even),.footer-brand:hover .peak path:nth-of-type(even){
    animation:cairnB .9s cubic-bezier(.33,1,.68,1) both}
  .nav-brand:hover .peak path:nth-of-type(2),.footer-brand:hover .peak path:nth-of-type(2){animation-delay:.05s}
  .nav-brand:hover .peak path:nth-of-type(3),.footer-brand:hover .peak path:nth-of-type(3){animation-delay:.1s}
  .nav-brand:hover .peak path:nth-of-type(4),.footer-brand:hover .peak path:nth-of-type(4){animation-delay:.15s}
  .nav-brand:hover .peak path:nth-of-type(5),.footer-brand:hover .peak path:nth-of-type(5){animation-delay:.2s}
}
@keyframes cairnA{0%{transform:none}30%{transform:translateY(-1.8px) rotate(-1.6deg)}
  58%{transform:translateY(.5px) rotate(.8deg)}80%{transform:translateY(-.2px) rotate(-.3deg)}100%{transform:none}}
@keyframes cairnB{0%{transform:none}30%{transform:translateY(-2.1px) rotate(1.5deg)}
  58%{transform:translateY(.45px) rotate(-.7deg)}80%{transform:translateY(-.2px) rotate(.3deg)}100%{transform:none}}

/* ---- build-story screenshot plates (/indenture) ----------------------- */
.build-shot{margin:2.2rem 0 1rem;padding:10px 10px 8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.build-shot img{display:block;width:100%;height:auto;border-radius:3px}
.build-shot figcaption{display:flex;justify-content:space-between;gap:.9rem;padding-top:.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}