:root{
  --canvas:#14100c;
  --panel:#1d1712;
  --panel-2:#26201a;
  --accent:#c9a227;
  --accent-hover:#e6c878;
  --accent-muted:rgba(201,162,39,0.28);
  --text-primary:#f3ead9;
  --text-secondary:#cfc4ac;
  --stone:#8f8578;
  --good:#7fa66a;
  --radius:4px;
  --max:1080px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --tshadow: 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.7;
}
h1,h2,h3{
  font-family:Cambria,Georgia,"Times New Roman",serif;
  line-height:1.2;
  margin:0 0 .5rem;
  font-weight:400;
  text-wrap:balance;
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
a{color:var(--accent-hover);text-decoration:none}
a:hover{color:var(--text-primary)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{
  position:absolute;left:1rem;top:-3rem;background:var(--accent);color:var(--canvas);
  padding:.6rem 1rem;border-radius:2px;font-weight:700;z-index:100;transition:top .2s var(--ease-out);
}
.skip-link:focus{top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.eyebrow{
  display:block;text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;font-weight:600;color:var(--accent);margin-bottom:.9rem;
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:40;background:rgba(20,16,12,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--accent-muted);
}
.site-nav-inner{max-width:var(--max);margin:0 auto;padding:.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text-primary)}
.brand img{width:32px;height:32px;border-radius:50%}
.brand span{font-family:Cambria,Georgia,serif;font-size:.88rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text-secondary);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--accent-hover)}
.nav-cta{border:1px solid var(--accent);color:var(--accent-hover);padding:.5rem 1.1rem;border-radius:2px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.lang-switch{display:flex;gap:.35rem;font-size:.72rem}
.lang-switch a{color:var(--text-secondary);padding:.15rem .35rem}
.lang-switch a.active{color:var(--accent-hover);font-weight:700}
.nav-side{display:flex;align-items:center;gap:1rem}
.nav-cta:hover{background:var(--accent);color:var(--canvas)}
@media (max-width:720px){ .nav-links{display:none} }
@media (max-width:480px){ .brand span{display:none} .nav-side{gap:.6rem} }

/* ---------- Hero pin ---------- */
.hero-pin{position:relative;height:900vh}
.hero-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas);
}
.hero-media{position:absolute;inset:0}
.hero-media .poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s var(--ease-out);
  will-change:transform;transform:translateZ(0);
}
.hero-stage.video-ready .hero-media video{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,8,6,0) 32%, rgba(10,8,6,.66) 100%);
}
.ld-ring{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);z-index:3;color:var(--accent-hover);opacity:.9;pointer-events:none}
.hero-stage.video-ready .ld-ring, .hero-stage.video-failed .ld-ring{display:none}
.scroll-cue{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:3;color:var(--text-secondary);opacity:.85;pointer-events:none}
.scroll-cue svg{animation:cue-bob 2.2s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.band{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 1.5rem;z-index:2;pointer-events:none;opacity:0;
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5,5,10,.66) 0%, rgba(5,5,10,.44) 46%, rgba(5,5,10,0) 76%);
}
.band-inner{position:relative;max-width:640px}
.band h2, .band p{text-shadow:var(--tshadow)}
.band .eyebrow{text-shadow:var(--tshadow)}
.band h2{font-size:clamp(1.7rem,4.6vw,2.9rem);color:var(--text-primary)}
.band p{color:var(--text-secondary);font-size:1.02rem;max-width:34em;margin:.7rem auto 0}
.band .btn{text-shadow:none}

.band.settle h2{font-size:clamp(2rem,6vw,3.6rem)}
.band.settle .brand-mark{
  display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.1rem;
}
.band.settle .brand-mark img{width:44px;height:44px;border-radius:50%}

/* word/char split choreography */
.split-line{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block}
.w.rise{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px));
}
.w.drift{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px));
}
.soft-copy{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));transition:none}
.sharp-copy{opacity:var(--k,0)}
.blur-wrap{position:relative}
.approach{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:scale(calc(.86 + .14*var(--kc)));
}
.btn-row{margin-top:1.4rem;opacity:var(--kb,0);transition:none;pointer-events:auto}

.btn{
  display:inline-block;padding:.85rem 1.9rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  border-radius:2px;border:1px solid transparent;transition:background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out);
}
.btn-gold{background:var(--accent);color:var(--canvas);font-weight:700}
.btn-gold:hover{background:var(--accent-hover);color:var(--canvas)}
.btn-outline{border-color:rgba(243,234,217,.4);color:var(--text-primary)}
.btn-outline:hover{border-color:var(--accent-hover);color:var(--accent-hover)}
@media (pointer:coarse){ .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center} }

/* ---------- Static hero (mobile / reduced motion) ---------- */
.static-hero{display:none;position:relative;min-height:88vh;background-size:cover;background-position:center;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem}
.static-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,6,.35) 0%, rgba(10,8,6,.78) 100%)}
.static-hero .band-inner{position:relative;z-index:1;max-width:640px}
.static-hero h1{font-size:clamp(2rem,7vw,2.8rem);color:var(--text-primary);text-shadow:var(--tshadow)}
.static-hero p{color:var(--text-secondary);text-shadow:var(--tshadow);font-size:1.02rem;max-width:32em;margin:.8rem auto 1.6rem}
body.static-mode .hero-pin{display:none}
body.static-mode .static-hero{display:flex}

/* ---------- Simple static hero (home page, no scroll-video) ---------- */
.plain-hero{position:relative;min-height:78vh;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem}
.plain-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,6,.3) 0%, rgba(10,8,6,.8) 100%)}
.plain-hero .band-inner{position:relative;z-index:1;max-width:680px}
.plain-hero h1{font-size:clamp(2rem,6vw,3rem);color:var(--text-primary);text-shadow:var(--tshadow)}
.plain-hero p{color:var(--text-secondary);text-shadow:var(--tshadow);font-size:1.05rem;max-width:34em;margin:.9rem auto 1.7rem}

/* ---------- Below fold ---------- */
main{max-width:var(--max);margin:0 auto;padding:5rem 1.25rem}
section{margin-bottom:5.5rem}
section:last-child{margin-bottom:0}
.section-heading{text-align:center;margin-bottom:2.75rem}
.section-heading h2{font-size:clamp(1.6rem,3.6vw,2.2rem);color:var(--text-primary)}
.section-heading h2::after{content:"";display:block;width:44px;height:1px;background:var(--accent);margin:1.1rem auto 0}
.section-heading p{color:var(--text-secondary);max-width:40em;margin:1.1rem auto 0}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger .part{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal-stagger.in .part{opacity:1;transform:none}
.reveal-stagger.in .part:nth-child(1){transition-delay:0ms}
.reveal-stagger.in .part:nth-child(2){transition-delay:90ms}
.reveal-stagger.in .part:nth-child(3){transition-delay:180ms}
.reveal-stagger .part{transition-delay:0ms}
.reveal-stagger.settled .part{transition-delay:0ms !important}

.trust-strip{border-top:1px solid var(--accent-muted);border-bottom:1px solid var(--accent-muted);background:var(--panel)}
.trust-strip-inner{max-width:var(--max);margin:0 auto;padding:2.1rem 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem}
.trust-item{display:flex;align-items:center;gap:.7rem;justify-content:center;font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}
.trust-item svg{flex-shrink:0;color:var(--accent)}

.product{margin-bottom:4rem;background:var(--panel);border:1px solid var(--accent-muted);border-radius:var(--radius);overflow:hidden}
.product:last-child{margin-bottom:0}
.product-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.product-media{position:relative}
.product-media img, .product-media video{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.product-body{padding:2.25rem}
.product-body h3{font-size:1.5rem;color:var(--text-primary)}
.product-body .tagline{color:var(--text-secondary);margin-bottom:1.1rem}
.cert-badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--accent);color:var(--accent-hover);border-radius:2px;padding:.45rem .9rem;font-size:.8rem;font-weight:600;margin:.3rem 0 .5rem}
.cert-note{font-size:.82rem;color:var(--stone);margin:.25rem 0 1rem}
.price-table{width:100%;border-collapse:collapse;margin:1rem 0}
.price-table th,.price-table td{text-align:left;padding:.7rem .4rem;border-bottom:1px solid var(--accent-muted)}
.price-table th{color:var(--stone);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.price-table td:last-child{color:var(--accent-hover);font-family:Cambria,Georgia,serif;font-size:1.02rem;text-align:right}
.stock-note{font-size:.82rem;color:var(--stone);margin:.7rem 0 1.2rem}
.waitlist-box{border:1px solid var(--accent-muted);border-radius:2px;padding:.9rem 1.1rem;color:var(--text-secondary);font-size:.9rem;margin:.7rem 0 1.2rem}
@media (max-width:820px){ .product-grid{grid-template-columns:1fr} .product-media img,.product-media video{min-height:220px} }

.commit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem}
.commit-card{border-left:1px solid var(--accent-muted);padding-left:1.25rem}
.commit-card h3{font-size:1rem;color:var(--text-primary)}
.commit-card p{color:var(--text-secondary);font-size:.9rem;margin:0}

/* ---------- Home: two product link cards ---------- */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.hub-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;min-height:340px;
  background-size:cover;background-position:center;border:1px solid var(--accent-muted);
}
.hub-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,6,.1) 0%, rgba(10,8,6,.88) 100%)}
.hub-card-body{position:absolute;left:0;right:0;bottom:0;padding:1.75rem;z-index:1}
.hub-card .eyebrow{margin-bottom:.5rem}
.hub-card h3{font-size:1.4rem;color:var(--text-primary)}
.hub-card p{color:var(--text-secondary);font-size:.9rem;margin:.5rem 0 1.1rem}
.hub-card .btn{transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out)}
.hub-card:hover .btn-outline{border-color:var(--accent-hover);color:var(--accent-hover)}
@media (max-width:760px){ .hub-grid{grid-template-columns:1fr} }

.faq-list{display:flex;flex-direction:column;gap:.75rem;max-width:46em;margin:0 auto}
.faq-item{border:1px solid var(--accent-muted);border-radius:var(--radius);background:var(--panel)}
.faq-item summary{cursor:pointer;padding:1rem 2.5rem 1rem 1.25rem;color:var(--text-primary);font-weight:600;list-style:none;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:1.25rem;top:1rem;color:var(--accent)}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{padding:0 1.25rem 1.1rem;margin:0;color:var(--text-secondary);font-size:.92rem}

.cta-section{background:var(--panel);border:1px solid var(--accent-muted);border-radius:var(--radius);padding:3rem 2.25rem;text-align:center}
.cta-links{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}
.cta-note{color:var(--stone);font-size:.85rem;margin-top:1.1rem}

footer{border-top:1px solid var(--accent-muted);text-align:center;padding:2.5rem 1.25rem;color:var(--stone);font-size:.8rem}

/* one living element: glow pulse on gold rule */
.glow-pulse{position:relative}
.glow-pulse::after{
  content:"";position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);width:44px;height:1px;
  background:var(--accent);opacity:.5;
  animation:pulse-glow 5s ease-in-out infinite;animation-delay:-1.4s;
}
@keyframes pulse-glow{0%,100%{opacity:.35;box-shadow:0 0 0 rgba(201,162,39,0)}50%{opacity:.9;box-shadow:0 0 14px rgba(201,162,39,.5)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  .reveal, .reveal-stagger .part{transition:none !important}
  .w.rise,.w.drift,.approach{transition:none !important}
  .glow-pulse::after{animation:none !important}
}
