/* ============================================================
   KONO FLOORING - design mockup v1 ("The Box, As A Website")
   Brand palette is brief-mandated: warm near-black + PANTONE 871C
   metallic gold + warm off-white + oak material accents.
   Theme: single dark theme, locked page-wide (packaging-derived).
   Radius system: all-sharp (0) everywhere, plank-architectural.
   Fonts: Archivo (sans, labels/UI/display caps) + EB Garamond
   (serif taglines, per packaging voice; brief names serif use).
   ============================================================ */
:root{
  --ink:#16120d;          /* page ground, warm near-black like the box */
  --ink2:#1d1812;         /* panel */
  --ink3:#251e16;         /* raised panel */
  --line:rgba(201,168,92,.18);
  --line-soft:rgba(201,168,92,.10);
  --gold:#C9A85C;         /* 871C screen approximation, highlight */
  --gold-2:#B99755;
  --gold-deep:#A08C5B;
  --paper:#F2ECDF;        /* warm off-white */
  --muted:#B0A38C;
  --muted-2:#8C8172;
  --ok:#9dbb7a;
  --wood-base:#907e69;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --wood:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='700'><defs><filter id='a' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.085' numOctaves='5' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.09 0.9 0.35 0 0 0'/></filter><filter id='b' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.35 0.5' numOctaves='2' seed='4'/><feColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.07 0 0 0 0 0.05 0.35 0 0 0 0'/></filter><filter id='c' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.003 0.06' numOctaves='4' seed='29'/><feColorMatrix type='matrix' values='0 0 0 0 0.98 0 0 0 0 0.93 0 0 0 0 0.82 0.5 0 0 0 0'/></filter></defs><rect width='900' height='700' fill='%23907e69'/><rect width='900' height='700' filter='url(%23a)'/><rect width='900' height='700' filter='url(%23c)' opacity='.28'/><rect width='900' height='700' filter='url(%23b)' opacity='.5'/></svg>");
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--paper);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
[hidden]{display:none!important}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
[id^="s-"]{scroll-margin-top:88px} /* clear the sticky header on anchor jumps */
.sec{padding:92px 0}
.sec-tight{padding:56px 0}

/* ---------- type ---------- */
.h1{font:600 clamp(2.2rem,4.6vw,3.6rem)/1.12 var(--serif);letter-spacing:-.01em}
.h1 em{font-style:italic;color:var(--gold);line-height:1.15;display:inline-block;padding-bottom:.08em}
.h2{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.15 var(--sans);text-transform:uppercase;letter-spacing:.045em}
.h2 .ser{font:italic 600 1.06em/1.2 var(--serif);text-transform:none;letter-spacing:0;color:var(--gold);display:inline-block;padding-bottom:.1em}
.h3{font:700 1.05rem/1.3 var(--sans);letter-spacing:.02em}
.lead{color:var(--muted);max-width:58ch}
.eyb{font:600 .69rem/1 var(--sans);text-transform:uppercase;letter-spacing:.34em;color:var(--gold);margin-bottom:14px}
.serline{font:italic 500 1.25rem/1.4 var(--serif);color:var(--gold)}
.small{font-size:.83rem;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons: sharp, packaging-gold ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:linear-gradient(160deg,#DBBA72,var(--gold) 55%,var(--gold-2));
  color:#171208;font:700 .8rem/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;
  padding:17px 26px;border:1px solid rgba(255,255,255,.14);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 28px rgba(201,168,92,.22)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:none;color:var(--gold);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--gold);box-shadow:none;background:rgba(201,168,92,.06)}
.btn-sm{padding:12px 18px;font-size:.72rem}
.btn-lg{padding:20px 34px}
.arrow{font-family:var(--sans)}
a.tx{color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:1px}
a.tx:hover{border-color:var(--gold)}

/* ---------- utility bar ---------- */
.util{background:#0f0c08;border-bottom:1px solid var(--line-soft);font-size:.78rem}
.util-in{display:flex;align-items:center;gap:26px;min-height:38px;color:var(--muted)}
.util-in strong{color:var(--paper);font-weight:600}
.util .open{color:var(--ok)}
.util .spacer{flex:1}
.util a.tx{font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:760px){.util .hide-m{display:none}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(22,18,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:13px;flex:none}
.logo svg{display:block}
.logo-words{line-height:1}
.logo-words b{display:block;font:800 1.18rem/1 var(--sans);letter-spacing:.16em;color:var(--paper)}
.logo-words span{display:block;font:600 .56rem/1 var(--sans);letter-spacing:.5em;color:var(--gold);margin-top:5px}
.nav{display:flex;gap:26px;margin-left:12px;flex:1;justify-content:center}
.nav a{font:600 .8rem/1 var(--sans);letter-spacing:.05em;color:var(--muted);padding:8px 0;border-bottom:2px solid transparent;transition:color .15s}
.nav a:hover{color:var(--paper)}
.nav a[aria-current]{color:var(--gold);border-color:var(--gold)}
.hdr .btn{flex:none}
.burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--line);position:relative}
.burger i,.burger i::before,.burger i::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--gold)}
.burger i{top:21px}.burger i::before{top:-7px;left:0;right:0}.burger i::after{top:7px;left:0;right:0}
@media(max-width:1120px){
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:#0f0c08;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 24px 18px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
  .burger{display:block}
  .hdr .btn{display:none}
}

/* ---------- wood material system (CSS/SVG placeholders) ---------- */
.wood{
  background-image:
    repeating-linear-gradient(rgba(255,255,255,0) 0 84px,rgba(255,255,255,.035) 84px 168px),
    repeating-linear-gradient(rgba(18,12,7,0) 0 82px,rgba(18,12,7,.5) 82px 84px),
    repeating-linear-gradient(90deg,rgba(20,14,8,0) 0 236px,rgba(20,14,8,.32) 236px 238px),
    var(--wood);
  background-size:auto,auto,auto,760px 560px;
  background-color:var(--wood-base);
}
.wood-macro{
  background-image:var(--wood);
  background-size:2000px 1500px;background-position:38% 46%;
  background-color:var(--wood-base);
}
.wood-plank{
  background-image:
    repeating-linear-gradient(rgba(255,255,255,0) 0 60px,rgba(255,255,255,.04) 60px 120px),
    repeating-linear-gradient(rgba(18,12,7,0) 0 58px,rgba(18,12,7,.55) 58px 60px),
    var(--wood);
  background-size:auto,auto,640px 470px;
  background-color:var(--wood-base);
}
.parquet{
  background-image:
    repeating-linear-gradient(45deg,rgba(18,12,7,0) 0 44px,rgba(18,12,7,.4) 44px 46px),
    repeating-linear-gradient(-45deg,rgba(18,12,7,0) 0 44px,rgba(30,20,10,.32) 44px 46px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 62px,rgba(255,255,255,.035) 62px 124px),
    var(--wood);
  background-size:auto,auto,auto,700px 540px;
  background-color:var(--wood-base);
}
/* colorway + light-temperature filters */
.f-warmgrey{filter:saturate(.92) brightness(1)}
.f-honey{filter:sepia(.42) saturate(1.25) brightness(1.05)}
.f-walnut{filter:sepia(.3) saturate(1.1) brightness(.62) contrast(1.05)}
.f-ash{filter:saturate(.55) brightness(1.14)}
.f-2700k{filter:sepia(.3) saturate(1.15) brightness(1.04)}
.f-4000k{filter:saturate(.78) brightness(1.08)}
.f-old{filter:grayscale(.5) brightness(.58) contrast(.85) sepia(.45)}

/* room scene: wall + perspective floor */
.room{position:relative;overflow:hidden;background:linear-gradient(#efe7d7,#e0d5bf 78%,#c9bda4)}
.room::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 82% 0%,rgba(255,246,224,.5),transparent 55%),
    radial-gradient(130% 100% at 50% 118%,rgba(10,7,4,.38),transparent 60%)}
.room .base{position:absolute;left:0;right:0;top:44%;height:10px;background:linear-gradient(#f7f2e6,#d8ccb4);box-shadow:0 2px 4px rgba(60,45,25,.25)}
.room .floorwrap{position:absolute;left:-14%;right:-14%;top:44.8%;bottom:-4%;perspective:620px;perspective-origin:50% 0%}
.room .floor{position:absolute;inset:0;transform:rotateX(54deg);transform-origin:50% 0%;height:230%}
.room .shadow{position:absolute;left:0;right:0;top:44.8%;height:26%;background:linear-gradient(rgba(46,32,16,.34),transparent);pointer-events:none}

/* flat swatch tile */
.swatch{position:relative;overflow:hidden}
.swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.1),transparent 45%,rgba(10,6,3,.28))}

/* ---------- hero: "the floor lays itself" ---------- */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;height:clamp(620px,calc(100vh - 112px),840px)}
@supports(height:1svh){.hero{height:clamp(620px,calc(100svh - 112px),840px)}}
.hero-scene{position:absolute;inset:0;pointer-events:none}
.hero-wall{position:absolute;left:0;right:0;top:0;height:37.5%;background:
  radial-gradient(58% 140% at 70% 100%,rgba(201,168,92,.12),transparent 62%),
  linear-gradient(#110d08,#191309 58%,#221a10)}
.hero-horizon{position:absolute;left:0;right:0;top:37.4%;height:1px;z-index:2;background:linear-gradient(90deg,transparent 3%,rgba(201,168,92,.45) 38%,rgba(201,168,92,.45) 72%,transparent 97%);box-shadow:0 0 24px 3px rgba(201,168,92,.16)}
.lay-floor{position:absolute;left:-14%;right:-14%;top:37.5%;bottom:-4%;perspective:1150px;perspective-origin:50% -14%}
.lay-plane{position:absolute;left:0;right:0;top:0;height:210%;transform:rotateX(50deg);transform-origin:50% 0;overflow:hidden;display:flex;flex-direction:column;background:#0d0905;filter:brightness(1.04) saturate(.97)}
.prow{flex:1;display:flex;width:132%;margin-left:var(--sh,0%)}
.plank{display:block;flex:1;background-color:var(--wood-base);background-image:var(--wood);background-size:800px 600px;background-position:calc(var(--bx,0px) + var(--px,0px)) var(--by,0px);border-right:3px solid rgba(10,6,3,.72);border-bottom:2px solid rgba(10,6,3,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);animation:plankIn .85s cubic-bezier(.16,.84,.26,1) both;animation-delay:calc(var(--rd,0s) + var(--cd,0s))}
.plank:nth-child(1){--cd:0s;--px:0px;filter:brightness(.97)}
.plank:nth-child(2){--cd:.075s;--px:-115px;filter:brightness(1.05)}
.plank:nth-child(3){--cd:.15s;--px:-230px;filter:brightness(.93)}
.plank:nth-child(4){--cd:.225s;--px:-345px;filter:brightness(1.07)}
.plank:nth-child(5){--cd:.3s;--px:-460px;filter:brightness(.96)}
.plank:nth-child(6){--cd:.375s;--px:-575px;filter:brightness(1.03)}
.plank:nth-child(7){--cd:.45s;--px:-690px;filter:brightness(.94)}
@keyframes plankIn{0%{transform:translateX(115%);opacity:0}16%{opacity:1}82%{transform:translateX(-1.5%)}100%{transform:none;opacity:1}}
.lay-fog{position:absolute;inset:0;background:linear-gradient(rgba(17,12,7,.82),rgba(17,12,7,.16) 30%,transparent 52%,rgba(9,6,3,.5) 100%)}
/* parquet-K inlay: the last four "planks" snap together into the mark */
.kmark{position:absolute;left:56.5%;top:9%;width:12.5%;aspect-ratio:1/1.7}
.kp{position:absolute;inset:0;opacity:0;background:linear-gradient(168deg,#E8CB82,#C9A85C 52%,#9A8449);filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));animation:.8s cubic-bezier(.2,.75,.3,1.06) both}
.kp1{clip-path:polygon(12% 6%,30% 6%,30% 94%,12% 94%);animation-name:kIn1;animation-delay:2s}
.kp2{clip-path:polygon(34% 52%,80% 6%,96% 6%,50% 52%);animation-name:kIn2;animation-delay:2.15s}
.kp3{clip-path:polygon(34% 42%,62% 14%,69% 14%,41% 42%);animation-name:kIn3;animation-delay:2.3s}
.kp4{clip-path:polygon(34% 56%,48% 56%,86% 94%,72% 94%);animation-name:kIn4;animation-delay:2.45s}
@keyframes kIn1{0%{transform:translateY(-34%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kIn2{0%{transform:translate(26%,-26%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kIn3{0%{transform:translate(-26%,26%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes kIn4{0%{transform:translate(28%,28%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
.kglow{position:absolute;inset:-34% -40%;background:radial-gradient(50% 42% at 50% 50%,rgba(232,203,130,.4),transparent 70%);opacity:0;animation:kGlow 1.5s ease-out 2.95s both}
@keyframes kGlow{0%{opacity:0}35%{opacity:1}100%{opacity:.14}}
.sweep{position:absolute;top:-4%;bottom:-4%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,224,156,.15) 38%,rgba(255,241,208,.3) 50%,rgba(255,224,156,.15) 62%,transparent);transform:translateX(-135%) skewX(-14deg);animation:sweep 1.15s cubic-bezier(.55,.08,.35,.95) 3.15s both}
@keyframes sweep{100%{transform:translateX(435%) skewX(-14deg)}}
.hero-light{position:absolute;inset:-22%;z-index:2;background:radial-gradient(30% 24% at 60% 56%,rgba(255,216,150,.12),transparent 68%)}
.hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(17,12,7,.9),rgba(17,12,7,.62) 32%,rgba(17,12,7,.12) 60%,transparent 76%)}
.hero-in{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:flex-start;width:100%;padding-top:clamp(48px,9vh,96px);padding-bottom:34px}
.hero-copy{max-width:780px}
.hero-copy .lead{max-width:52ch}
.hero-copy .serline{margin-bottom:16px}
.hero-copy .h1{margin-bottom:20px}
.hero-copy .lead{margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-size:.8rem;color:var(--muted)}
.hero-trust b{color:var(--paper);font-weight:600}
.hero-trust .st{color:var(--gold)}
.hero-chip{position:absolute;right:24px;bottom:22px;z-index:3;display:inline-flex;align-items:baseline;gap:8px;background:rgba(15,11,7,.8);backdrop-filter:blur(6px);border:1px solid var(--line);padding:12px 16px;font-size:.78rem;color:var(--muted)}
.hero-chip b{color:var(--paper);font-weight:600}
.hero-chip .price{color:var(--gold);font-weight:700}
.tt-in{opacity:0;transform:translateY(16px);animation:riseIn .7s cubic-bezier(.16,1,.3,1) both}
.h1 .tt-in{display:inline-block}
@keyframes riseIn{100%{opacity:1;transform:none}}
@media(max-width:940px){
  .hero{height:auto;min-height:calc(100vh - 112px)}
  .hero-in{padding-top:56px;padding-bottom:20px}
  .hero-scrim{background:linear-gradient(rgba(17,12,7,.55),rgba(17,12,7,.8) 70%)}
  .lay-floor{top:32%}
  .hero-wall{height:32%}
  .hero-horizon{top:31.9%}
  .kmark{left:60%;top:5%;width:21%}
  .hero-chip{position:relative;right:auto;bottom:auto;align-self:flex-start;margin:0 24px 26px}
}
@media (prefers-reduced-motion:reduce){
  .plank,.kp,.kglow,.sweep,.tt-in{animation:none!important}
  .tt-in{opacity:1;transform:none}
  .kp{opacity:1}
  .kglow{opacity:.14}
  .sweep{display:none}
}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--ink2)}
.trust-in{display:grid;grid-template-columns:repeat(5,1fr)}
.trust-it{padding:26px 22px;border-left:1px solid var(--line-soft)}
.trust-it:first-child{border-left:0}
.trust-it b{display:block;font:700 1.08rem/1.2 var(--sans);letter-spacing:.02em}
.trust-it b .st{color:var(--gold)}
.trust-it > span{display:block;font-size:.76rem;color:var(--muted);margin-top:4px}
.trust-it a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
@media(max-width:940px){.trust-in{grid-template-columns:1fr 1fr}.trust-it:nth-child(3){border-left:0}.trust-it:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line-soft)}}
@media(max-width:560px){.trust-in{grid-template-columns:1fr 1fr}.trust-it{padding:18px 16px}.trust-it:nth-child(odd){border-left:0}.trust-it:nth-child(even){border-left:1px solid var(--line-soft)}.trust-it:nth-child(n+3){border-top:1px solid var(--line-soft)}}

/* ---------- provenance: from forest to your floor ---------- */
.origin{background:#120e09;border-top:1px solid var(--line-soft)}
.origin .shead{max-width:760px}
.origin-map{border:1px solid var(--line);background:#0d0a06}
.origin-map svg{display:block;width:100%;height:auto}
.origin-legend{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft)}
.origin-legend>div{display:flex;align-items:center;gap:10px;padding:13px 18px;border-left:1px solid var(--line-soft);font-size:.78rem;color:var(--muted)}
.origin-legend>div:first-child{border-left:0}
.origin-legend b{color:var(--paper);font-weight:600}
.lg-dot{width:8px;height:8px;background:var(--gold);flex:none}
.lg-star{color:var(--gold);font-size:1rem;line-height:1;flex:none}
.route{stroke-dasharray:1;stroke-dashoffset:1}
.origin-map .op{opacity:0;transform:scale(.5);transform-origin:center;transform-box:fill-box}
.origin-map.on .route{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.3,1)}
.origin-map.on .op{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.origin-map.on .r1{transition-delay:.2s}
.origin-map.on .r2{transition-delay:.4s}
.origin-map.on .r3a{transition-duration:.5s;transition-delay:.6s}
.origin-map.on .r3b{transition-duration:.7s;transition-delay:1.1s}
.origin-map.on .p1{transition-delay:.05s}
.origin-map.on .p2{transition-delay:.25s}
.origin-map.on .p3{transition-delay:.45s}
.origin-map.on .pstar{transition-delay:1.6s}
.prov-rail{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-soft);background:var(--ink2);margin-top:18px}
.prov-rail li{position:relative;padding:26px 22px}
.prov-rail li + li{border-left:1px solid var(--line-soft)}
.prov-rail li::before{content:"";position:absolute;top:0;left:22px;width:34px;height:3px;background:var(--gold)}
.prov-rail .pn{display:block;font:800 .78rem/1 var(--sans);letter-spacing:.22em;color:var(--gold);margin:16px 0 12px}
.prov-rail b{display:block;font:700 .95rem/1.3 var(--sans);letter-spacing:.02em;margin-bottom:8px;color:var(--paper)}
.prov-rail p{font-size:.83rem;color:var(--muted)}
.prov-rail p a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.prov-honest{margin-top:18px;padding:18px 22px;border:1px solid var(--line-soft);border-left:3px solid var(--gold);background:var(--ink2);font-size:.9rem;color:var(--muted)}
.prov-honest b{color:var(--paper)}
@media(max-width:1020px){
  .prov-rail{grid-template-columns:1fr}
  .prov-rail li{padding:20px 22px 20px 26px}
  .prov-rail li + li{border-left:0;border-top:1px solid var(--line-soft)}
  .prov-rail li::before{top:22px;left:0;width:3px;height:30px}
  .prov-rail .pn{margin-top:0}
  .origin-legend{grid-template-columns:1fr 1fr}
  .origin-legend>div:nth-child(3){border-left:0}
  .origin-legend>div:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media(max-width:600px){
  .origin-legend{grid-template-columns:1fr}
  .origin-legend>div{border-left:0}
  .origin-legend>div:nth-child(n+2){border-top:1px solid var(--line-soft)}
  /* SVG text scales with the viewBox; bump it so labels stay legible ~340px wide */
  .origin-map svg text{font-size:20px}
  .origin-map .pstar text:first-of-type{font-size:24px}
  .origin-map .pstar text:last-of-type{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .route{stroke-dashoffset:0}
  .origin-map .op{opacity:1;transform:none}
  .origin-map.on .route,.origin-map.on .op{transition:none}
}

/* ---------- PDP provenance strip ---------- */
.prov-strip{display:flex;flex-wrap:wrap;align-items:stretch;border:1px solid var(--line);background:linear-gradient(150deg,rgba(201,168,92,.12),rgba(201,168,92,.03));margin-top:34px;font-size:.85rem;color:var(--muted)}
.prov-strip>span{display:flex;align-items:center;padding:14px 20px;border-left:1px solid var(--line-soft)}
.prov-strip>span:first-child{border-left:0}
.prov-strip b{color:var(--paper);font-weight:600;margin-right:6px}
.prov-strip a.tx{margin-left:auto;display:flex;align-items:center;padding:14px 20px;font-weight:600;border-bottom:0}
@media(max-width:940px){.prov-strip{flex-direction:column}.prov-strip>span{border-left:0;border-top:1px solid var(--line-soft)}.prov-strip>span:first-child{border-top:0}.prov-strip a.tx{margin-left:0;border-top:1px solid var(--line-soft)}}

/* ---------- collections (asymmetric featured grid) ---------- */
.cols-head{margin-bottom:40px;max-width:640px}
.cols-head .h2{margin-bottom:12px}
.cols-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:18px;min-height:560px}
.ccard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:1px solid var(--line-soft);background:var(--ink2);transition:border-color .2s}
.ccard:hover{border-color:var(--gold)}
.ccard .bg{position:absolute;inset:0;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.ccard:hover .bg{transform:scale(1.035)}
.ccard .scrim{position:absolute;inset:0;background:linear-gradient(rgba(16,11,6,.06) 30%,rgba(16,11,6,.88))}
.ccard .cc{position:relative;padding:26px 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ccard h3{font:800 1.3rem/1.15 var(--sans);text-transform:uppercase;letter-spacing:.05em}
.ccard .sub{font:italic 500 .98rem/1.4 var(--serif);color:rgba(242,236,223,.85);margin-top:6px}
.ccard .from{flex:none;text-align:right}
.ccard .from b{display:block;font:800 1.25rem/1 var(--sans);color:var(--gold)}
.ccard .from span{font-size:.72rem;color:var(--muted)}
.ccard-hero{grid-row:1/3}
.ccard-hero h3{font-size:1.7rem}
@media(max-width:860px){.cols-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}.ccard{min-height:230px}.ccard-hero{grid-row:auto;min-height:320px}}

/* ---------- instant estimate ---------- */
.est{background:var(--ink2);border:1px solid var(--line);display:grid;grid-template-columns:1.05fr .95fr}
.est-form{padding:44px 46px;border-right:1px solid var(--line-soft)}
.est-form .h2{margin-bottom:10px}
.est-form p.lead{margin-bottom:30px;font-size:.95rem}
.field{margin-bottom:24px}
.field label{display:block;font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:10px}
.field .hint{font-size:.76rem;color:var(--muted-2);margin-top:7px}
.inp,select.inp{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);padding:13px 14px;font:500 .95rem var(--sans)}
.inp:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
input[type=range]{width:100%;accent-color:var(--gold);height:32px}
.seg{display:flex;border:1px solid var(--line)}
.seg button{flex:1;padding:12px 8px;font:600 .78rem/1 var(--sans);letter-spacing:.06em;color:var(--muted);border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--gold);color:#171208}
.est-out{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;background:
  radial-gradient(90% 70% at 100% 0%,rgba(201,168,92,.1),transparent 60%),var(--ink3)}
.est-out .lbl{font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.est-out .big{font:800 clamp(2.1rem,4vw,3.1rem)/1.05 var(--sans);color:var(--gold);margin:14px 0 6px}
.est-out .per{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.est-out .mo{border-top:1px solid var(--line-soft);padding-top:18px;margin-top:6px;font-size:.92rem;color:var(--muted)}
.est-out .mo b{color:var(--paper)}
.est-out .note{font-size:.76rem;color:var(--muted-2);margin-top:18px;max-width:40ch}
@media(max-width:860px){.est{grid-template-columns:1fr}.est-form{border-right:0;border-bottom:1px solid var(--line-soft);padding:32px 26px}.est-out{padding:32px 26px}}

/* ---------- how it works: horizontal timeline ---------- */
.steps-head{max-width:620px;margin-bottom:48px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;padding-top:34px}
.steps::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.step{position:relative}
.step::before{content:"";position:absolute;top:-34px;left:0;width:34px;height:3px;background:var(--gold)}
.step h3{font:700 1.02rem/1.3 var(--sans);letter-spacing:.03em;margin-bottom:10px}
.step p{font-size:.92rem;color:var(--muted)}
.step .k{font:italic 500 .95rem/1 var(--serif);color:var(--gold);display:block;margin-bottom:12px}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:30px;padding-top:0}.steps::before{display:none}.step{padding-left:22px;border-left:1px solid var(--line)}.step::before{top:6px;left:-1px;width:3px;height:26px}}

/* ---------- before / after ---------- */
.ba-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.ba{position:relative;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:16/10;user-select:none}
.ba .layer{position:absolute;inset:0}
.ba .after-l{clip-path:inset(0 calc(100% - var(--split,52%)) 0 0)}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--split,52%);width:2px;background:var(--gold);pointer-events:none}
.ba .bar::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);background:var(--gold);
  clip-path:polygon(0 50%,26% 20%,26% 42%,74% 42%,74% 20%,100% 50%,74% 80%,74% 58%,26% 58%,26% 80%)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-cap{margin-top:12px;font-size:.82rem;color:var(--muted)}
.proj-tiles{display:flex;flex-direction:column;gap:18px}
.ptile{flex:1;display:flex;gap:0;border:1px solid var(--line-soft);background:var(--ink2);overflow:hidden;transition:border-color .2s}
.ptile:hover{border-color:var(--gold)}
.ptile .thumb{flex:0 0 116px}
.ptile .tt{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.ptile .tt b{font:700 .95rem/1.2 var(--sans)}
.ptile .tt span{font-size:.78rem;color:var(--muted)}
@media(max-width:860px){.ba-wrap{grid-template-columns:1fr}.proj-tiles{flex-direction:row}.ptile .thumb{flex-basis:80px}}
@media(max-width:640px){.proj-tiles{flex-direction:column}}

/* ---------- visualizer: immersive full-bleed ---------- */
.viz{position:relative;overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.viz .room{position:absolute;inset:0;filter:brightness(.84) saturate(.96)}
.viz::before,.viz::after{content:"";position:absolute;left:0;right:0;height:110px;z-index:1;pointer-events:none}
.viz::before{top:0;background:linear-gradient(var(--ink),transparent)}
.viz::after{bottom:0;background:linear-gradient(transparent,var(--ink))}
.viz-in{position:relative;z-index:2;display:flex;align-items:center;min-height:520px;padding:60px 24px}
.viz-panel{background:rgba(18,13,8,.86);backdrop-filter:blur(10px);border:1px solid var(--line);padding:38px 40px;max-width:430px}
.viz-panel .h2{margin-bottom:12px}
.viz-panel p{font-size:.92rem;color:var(--muted);margin-bottom:24px}
.chips{display:flex;gap:10px;margin-bottom:26px}
.chip{width:58px;height:58px;border:1px solid var(--line);padding:0;position:relative;overflow:hidden;transition:transform .15s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{outline:2px solid var(--gold);outline-offset:2px}
.chip .cw{position:absolute;inset:0}
.chip-name{font-size:.8rem;color:var(--paper);min-height:1.2em;margin-bottom:18px}
.chip-name b{color:var(--gold)}
@media(max-width:640px){.viz-panel{padding:26px 22px}}

/* ---------- pros band ---------- */
.pros{background:linear-gradient(120deg,#241b0f,#1a1409 55%,#241b0f);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pros-in{display:flex;align-items:center;gap:38px;padding:46px 24px;flex-wrap:wrap}
.pros .serline{font-size:1.5rem;flex:1;min-width:260px}
.pros .facts{display:flex;gap:30px;flex-wrap:wrap}
.pros .facts div b{display:block;font:800 1.05rem/1.2 var(--sans);color:var(--gold)}
.pros .facts div span{font-size:.76rem;color:var(--muted)}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.rev-featured{background:var(--ink2);border:1px solid var(--line-soft);padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.stars{color:var(--gold);letter-spacing:3px;font-size:.95rem}
.q{font:italic 500 1.35rem/1.5 var(--serif);margin:16px 0 20px;max-width:34ch}
.q-sm{font:italic 500 1.02rem/1.5 var(--serif);margin:10px 0 14px}
.attr{font-size:.82rem;color:var(--muted)}
.attr b{color:var(--paper);font-weight:600}
.rev-side{display:flex;flex-direction:column;gap:18px}
.rev-card{background:var(--ink2);border:1px solid var(--line-soft);padding:24px 26px;flex:1}
.rev-google{background:linear-gradient(150deg,rgba(201,168,92,.16),rgba(201,168,92,.05));border:1px solid var(--line);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.rev-google b{font:800 2rem/1 var(--sans);color:var(--gold)}
.rev-google span{font-size:.8rem;color:var(--muted);text-align:right}
@media(max-width:860px){.revs{grid-template-columns:1fr}.rev-featured{padding:28px 26px}}

/* ---------- showroom map ---------- */
.showroom{position:relative;border:1px solid var(--line-soft);overflow:hidden;min-height:480px;display:flex;align-items:stretch}
.map{position:absolute;inset:0}
.show-card{position:relative;margin:44px;background:rgba(15,11,7,.92);backdrop-filter:blur(8px);border:1px solid var(--line);padding:36px 38px;max-width:400px;align-self:center}
.show-card .h2{margin-bottom:16px}
.show-rows{margin-bottom:26px}
.show-rows div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:.88rem}
.show-rows div:first-child{border-top:0}
.show-rows span{color:var(--muted)}
.show-rows b{font-weight:600;text-align:right}
@media(max-width:640px){.show-card{margin:20px;padding:26px 22px}}

/* ---------- financing ---------- */
.fin{text-align:center;max-width:660px;margin:0 auto;padding:0 24px}
.fin .big{font:800 clamp(2rem,4vw,3rem)/1.1 var(--sans)}
.fin .big b{color:var(--gold)}
.fin p{color:var(--muted);margin:16px 0 26px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:700 .98rem/1.35 var(--sans)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:400 1.4rem/1 var(--serif);color:var(--gold);flex:none}
.qa[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 22px;font-size:.92rem;color:var(--muted);max-width:60ch}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:#100c08;padding:70px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;margin-bottom:50px}
.foot h4{font:600 .72rem/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;color:var(--gold);margin-bottom:18px}
.foot ul{list-style:none}
.foot li{margin-bottom:10px;font-size:.88rem;color:var(--muted)}
.foot li a:hover{color:var(--paper)}
.foot .brandcol p{font-size:.88rem;color:var(--muted);margin:18px 0;max-width:34ch}
.foot-legal{border-top:1px solid var(--line-soft);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.76rem;color:var(--muted-2)}
@media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- PDP ---------- */
.crumb{padding:26px 24px 0;font-size:.8rem;color:var(--muted-2)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.pdp-top{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding:34px 24px 84px;align-items:start}
.gal-main{position:relative;aspect-ratio:4/3.1;border:1px solid var(--line);overflow:hidden}
.gal-main .view{position:absolute;inset:0}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gthumb{padding:0;border:1px solid var(--line-soft);position:relative;height:74px;overflow:hidden;transition:border-color .15s}
.gthumb:hover{border-color:var(--gold-deep)}
.gthumb[aria-pressed="true"]{border-color:var(--gold);outline:1px solid var(--gold)}
.gthumb .tv{position:absolute;inset:0}
.gthumb .tl{position:absolute;left:0;right:0;bottom:0;background:rgba(15,10,6,.78);font:600 .55rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);padding:4px 2px;text-align:center}
.buy .kicker{font:600 .69rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.buy h1{font:800 clamp(1.9rem,3.4vw,2.6rem)/1.08 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.buy .variant{font:italic 500 1.15rem/1.4 var(--serif);color:var(--muted);margin:8px 0 24px}
.pricebox{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.pricebox .p{font:800 2.6rem/1 var(--sans);color:var(--gold)}
.pricebox .u{color:var(--muted);font-size:.9rem}
.pricebox .box{font-size:.9rem;color:var(--muted)}
.pricebox .box b{color:var(--paper)}
.mo-line{font-size:.86rem;color:var(--muted);margin-top:10px}
.mo-line b{color:var(--paper)}
.stockline{margin:20px 0 26px;padding:14px 16px;background:rgba(157,187,122,.07);border:1px solid rgba(157,187,122,.25);font-size:.88rem}
.stockline b{color:var(--ok)}
.buy-ctas{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.buy-ctas .btn{justify-content:center}
.buy-note{font-size:.8rem;color:var(--muted-2)}
.feat-strip{display:flex;gap:0;border:1px solid var(--line-soft);margin-top:28px}
.feat-strip div{flex:1;text-align:center;padding:14px 6px;border-left:1px solid var(--line-soft)}
.feat-strip div:first-child{border-left:0}
.feat-strip b{display:block;font:700 .82rem/1.2 var(--sans);color:var(--gold)}
.feat-strip span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
@media(max-width:940px){.pdp-top{grid-template-columns:1fr;gap:36px}}
@media(max-width:560px){
  .feat-strip{flex-wrap:wrap}
  .feat-strip div{flex:1 1 33%;border-top:1px solid var(--line-soft)}
  .feat-strip div:nth-child(-n+3){border-top:0}
  .feat-strip div:nth-child(4){border-left:0}
}
@media(max-width:480px){.gthumb{height:62px}.gthumb .tl{font-size:.5rem;letter-spacing:.03em}}

/* box calculator */
.calcbox{background:var(--ink2);border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0}
.calc-l{padding:40px 44px;border-right:1px solid var(--line-soft)}
.calc-l .h2{margin-bottom:8px}
.calc-l p.lead{font-size:.92rem;margin-bottom:26px}
.dims{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--line-soft);font-size:.9rem;cursor:pointer}
.check input{accent-color:var(--gold);width:17px;height:17px;margin-top:3px;flex:none}
.check span small{display:block;color:var(--muted-2);font-size:.76rem}
.calc-r{padding:40px 44px;background:var(--ink3);display:flex;flex-direction:column;justify-content:center}
.calc-rows div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;color:var(--muted)}
.calc-rows div b{color:var(--paper);font-weight:600}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:20px}
.calc-total .t{font:800 2.2rem/1 var(--sans);color:var(--gold)}
.calc-total .lbl{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){.calcbox{grid-template-columns:1fr}.calc-l{border-right:0;border-bottom:1px solid var(--line-soft);padding:28px 24px}.calc-r{padding:28px 24px}}

/* specs */
.spec-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.spec-tile{border:1px solid var(--line-soft);padding:26px 24px;background:var(--ink2)}
.spec-tile.gold{background:linear-gradient(155deg,rgba(201,168,92,.16),rgba(201,168,92,.04));border-color:var(--line)}
.spec-tile b{display:block;font:800 1.9rem/1 var(--sans);color:var(--gold);margin-bottom:8px}
.spec-tile span{font-size:.8rem;color:var(--muted)}
.spec-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.sgroup h3{font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.srow{display:flex;justify-content:space-between;gap:18px;padding:11px 0;font-size:.88rem}
.srow span{color:var(--muted)}
.srow b{font-weight:600;text-align:right}
.srow b a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:.8rem}
.spec-note{margin-top:34px;padding:18px 20px;border-left:3px solid var(--gold);background:var(--ink2);font-size:.88rem;color:var(--muted);max-width:72ch}
.spec-note b{color:var(--paper)}
@media(max-width:940px){.spec-tiles{grid-template-columns:1fr 1fr}.spec-groups{grid-template-columns:1fr;gap:30px}}

/* downloads + video */
.dl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line-soft);background:var(--ink2);padding:20px 24px;transition:border-color .15s}
.dl:hover{border-color:var(--gold)}
.dl b{display:block;font:700 .95rem/1.3 var(--sans);color:var(--paper)}
.dl span{font-size:.76rem;color:var(--muted-2)}
.dl .pdf{flex:none;font:800 .66rem/1 var(--sans);letter-spacing:.1em;color:var(--gold);border:1px solid var(--line);padding:8px 10px}
@media(max-width:820px){.dl-row{grid-template-columns:1fr}}
.vid{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:21/8;background:
  radial-gradient(80% 120% at 50% 0%,rgba(201,168,92,.1),transparent 60%),var(--ink2);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;padding:30px}
.vid .water{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(rgba(90,120,140,.0),rgba(80,110,135,.22));border-top:1px solid rgba(140,180,210,.25)}
.vid .play{width:76px;height:76px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;transition:background .2s}
.vid .play::after{content:"";display:block;width:0;height:0;border-left:20px solid var(--gold);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vid .play:hover{background:rgba(201,168,92,.12)}
.vid h3{font:700 1.15rem/1.3 var(--sans);position:relative}
.vid p{position:relative;font-size:.88rem;color:var(--muted);max-width:52ch}

/* install band */
.install-band{border:1px solid var(--line);background:linear-gradient(120deg,#241b0f,#191309 60%,#241b0f);display:flex;align-items:center;gap:34px;padding:40px 46px;flex-wrap:wrap}
.install-band .txt{flex:1;min-width:260px}
.install-band .txt .h2{margin-bottom:8px}
.install-band .txt p{color:var(--muted);font-size:.92rem}
.install-band .p{font:800 2.4rem/1 var(--sans);color:var(--gold);white-space:nowrap}
.install-band .p span{display:block;font:400 .74rem/1.4 var(--sans);color:var(--muted);white-space:normal}

/* owner reviews on PDP */
.oreviews{display:grid;grid-template-columns:repeat(3,auto);grid-template-columns:1.15fr 1fr 1fr;gap:18px}
.orev{border:1px solid var(--line-soft);background:var(--ink2);padding:26px 28px}
.orev .meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:.76rem;color:var(--muted-2)}
.orev .verified{color:var(--ok)}
@media(max-width:860px){.oreviews{grid-template-columns:1fr}}

/* section head util */
.shead{margin-bottom:38px;max-width:660px}
.shead .h2{margin-bottom:12px}
.shead p{color:var(--muted)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ccard .bg{transition:none}}

/* ============================================================
   INNER PAGES v2: pricing / pro / verify
   ============================================================ */
/* shared page head */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);padding:84px 0 64px;
  background:
    radial-gradient(54% 130% at 84% -12%,rgba(201,168,92,.11),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 237px,rgba(201,168,92,.05) 237px 238px),
    linear-gradient(#120e09,var(--ink))}
.phead .eyb{margin-bottom:16px}
.phead .h1{max-width:26ch;margin-bottom:16px}
.phead .serline{max-width:60ch}
.phead .lead{margin-top:18px}
.phead .facts{display:flex;gap:16px 42px;flex-wrap:wrap;margin-top:38px;border-top:1px solid var(--line-soft);padding-top:26px}
.phead .facts div b{display:block;font:800 1.05rem/1.2 var(--sans);color:var(--gold)}
.phead .facts div span{font-size:.76rem;color:var(--muted)}
@media(max-width:640px){.phead{padding:56px 0 44px}}

/* published price tables */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--ink2)}
.ptable{width:100%;border-collapse:collapse;min-width:720px}
.ptable.w5{min-width:880px}
.ptable th{font:600 .68rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.18em;color:var(--muted);text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:bottom}
.ptable td{padding:20px 22px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover td{background:rgba(201,168,92,.03)}
.ptable .r{text-align:right}
.ptable th.hl{color:var(--gold)}
.ptable td.hl{background:rgba(201,168,92,.055)}
.ptable .prod b{display:block;font:700 1.02rem/1.25 var(--sans)}
.ptable .prod span{display:block;font-size:.78rem;color:var(--muted-2);margin-top:5px}
.ptable .num-lg{display:block;font:700 1.1rem/1.1 var(--sans);color:var(--paper);white-space:nowrap}
.ptable .typ{display:block;font:800 1.4rem/1 var(--sans);color:var(--gold);white-space:nowrap}
.ptable .custom{display:block;font:700 .88rem/1.3 var(--sans);color:var(--gold);white-space:nowrap}
.ptable .sub{display:block;font:400 .7rem/1.45 var(--sans);color:var(--muted-2);letter-spacing:.02em;text-transform:none;margin-top:5px;white-space:normal}

/* sample quote document (printed-paper look) */
.qdoc{position:relative;max-width:880px;margin:0 auto;color:#2b2216;border:1px solid var(--line);
  background:linear-gradient(165deg,#F7F2E5,#EFE7D3 70%,#EAE0C9);box-shadow:0 34px 90px rgba(0,0,0,.5)}
.qdoc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:36px 46px 24px;border-bottom:2px solid #2b2216}
.qlogo{display:flex;align-items:center;gap:11px}
.qlogo b{display:block;font:800 1rem/1 var(--sans);letter-spacing:.16em;color:#2b2216}
.qlogo span{display:block;font:600 .5rem/1 var(--sans);letter-spacing:.44em;color:#8a6f33;margin-top:4px}
.qh-r{text-align:right}
.qh-r b{display:block;font:700 .82rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#2b2216}
.qh-r span{font:italic 500 .88rem/1.5 var(--serif);color:#8a6f33}
.qstamp{position:absolute;top:116px;right:38px;transform:rotate(6deg);border:2px solid rgba(138,111,51,.6);color:rgba(138,111,51,.9);font:800 .64rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:9px 13px;pointer-events:none}
.qmeta{display:flex;flex-wrap:wrap;gap:8px 36px;padding:18px 46px;border-bottom:1px solid rgba(43,34,22,.16);font-size:.8rem;color:#6c5f4b}
.qmeta b{color:#2b2216;font-weight:700}
.qsec{padding:26px 46px 6px;font:700 .64rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#8a6f33}
.qline{display:grid;grid-template-columns:1fr auto;gap:3px 30px;padding:15px 46px;border-bottom:1px solid rgba(43,34,22,.13)}
.qline .nm{font:700 .95rem/1.35 var(--sans)}
.qline .amt{grid-row:1;grid-column:2;font:700 .98rem/1.3 var(--sans);white-space:nowrap;text-align:right}
.qline .ds{grid-column:1;font-size:.8rem;color:#6c5f4b}
.qline .qwhy{grid-column:1/-1;margin-top:7px;padding-left:14px;border-left:2px solid rgba(138,111,51,.5);font:italic 500 .9rem/1.5 var(--serif);color:#7d6a45}
.qsub{display:flex;justify-content:space-between;gap:8px 18px;padding:14px 46px;background:rgba(138,111,51,.08);font:700 .85rem/1.4 var(--sans);color:#2b2216;flex-wrap:wrap}
.qsub span:last-child{white-space:nowrap}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:24px 46px 10px;border-top:2px solid #2b2216;margin-top:18px}
.qtotal .lbl{font:700 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#6c5f4b}
.qtotal .t{font:800 2.1rem/1 var(--sans);color:#8a6f33}
.qfoot{padding:6px 46px 34px;font-size:.77rem;color:#6c5f4b;max-width:66ch}
@media(max-width:680px){
  .qdoc-head,.qmeta,.qsec,.qline,.qsub,.qtotal,.qfoot{padding-left:22px;padding-right:22px}
  .qstamp{display:none}
}

/* four honest reasons */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why{position:relative;border:1px solid var(--line-soft);background:var(--ink2);padding:30px 26px 26px}
.why::before{content:"";position:absolute;top:0;left:26px;width:34px;height:3px;background:var(--gold)}
.why .wn{display:block;font:800 .78rem/1 var(--sans);letter-spacing:.22em;color:var(--gold);margin-bottom:14px}
.why b{display:block;font:700 1rem/1.3 var(--sans);margin-bottom:8px}
.why p{font-size:.86rem;color:var(--muted)}
@media(max-width:1020px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr}}

/* policy band */
.policy{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:linear-gradient(150deg,rgba(201,168,92,.12),rgba(201,168,92,.03))}
.policy.cols3{grid-template-columns:repeat(3,1fr)}
.policy>div{padding:26px;border-left:1px solid var(--line-soft)}
.policy>div:first-child{border-left:0}
.policy .k{display:block;font:italic 600 1.08rem/1.3 var(--serif);color:var(--gold);margin-bottom:9px}
.policy p{font-size:.84rem;color:var(--muted)}
.policy p b{color:var(--paper)}
@media(max-width:940px){.policy,.policy.cols3{grid-template-columns:1fr 1fr}.policy>div:nth-child(odd){border-left:0}.policy>div:nth-child(n+3){border-top:1px solid var(--line-soft)}}
@media(max-width:560px){.policy,.policy.cols3{grid-template-columns:1fr}.policy>div{border-left:0}.policy>div:nth-child(n+2){border-top:1px solid var(--line-soft)}}

/* two-panel block (pro trade account) */
.duo{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);background:var(--ink2)}
.duo-a{padding:42px 46px;border-right:1px solid var(--line-soft)}
.duo-a .h2{margin-bottom:10px}
.duo-b{padding:42px 46px;background:var(--ink3);display:flex;flex-direction:column;justify-content:center}
.duo-b h3{font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ticks{list-style:none}
.ticks li{position:relative;padding:13px 0 13px 26px;border-top:1px solid var(--line-soft);font-size:.9rem;color:var(--muted)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;background:var(--gold)}
.ticks b{color:var(--paper)}
@media(max-width:860px){.duo{grid-template-columns:1fr}.duo-a{border-right:0;border-bottom:1px solid var(--line-soft);padding:30px 26px}.duo-b{padding:30px 26px}}

/* RFQ band */
.rfq{border:1px solid var(--line);background:linear-gradient(120deg,#241b0f,#1a1409 55%,#241b0f);padding:38px 42px}
.rfq-head{margin-bottom:24px;max-width:680px}
.rfq-head .h2{margin-bottom:8px}
.rfq-head p{font-size:.9rem;color:var(--muted)}
.rfq-row{display:grid;grid-template-columns:1.2fr .8fr auto auto;gap:14px;align-items:end}
.rfq-row .field{margin-bottom:0}
.rfq-row .btn{justify-content:center}
@media(max-width:1020px){.rfq-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.rfq{padding:28px 24px}.rfq-row{grid-template-columns:1fr}}

/* logistics strip */
.logi{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-soft);background:var(--ink2)}
.logi>div{padding:30px 28px;border-left:1px solid var(--line-soft)}
.logi>div:first-child{border-left:0}
.logi .k{display:block;font:italic 500 .95rem/1 var(--serif);color:var(--gold);margin-bottom:12px}
.logi b{display:block;font:700 1.02rem/1.3 var(--sans);margin-bottom:8px}
.logi p{font-size:.86rem;color:var(--muted)}
@media(max-width:860px){.logi{grid-template-columns:1fr}.logi>div{border-left:0}.logi>div+div{border-top:1px solid var(--line-soft)}}

/* segment cards */
.segcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.segc{display:flex;flex-direction:column;border:1px solid var(--line-soft);background:var(--ink2);transition:border-color .2s}
.segc:hover{border-color:var(--gold)}
.segc .swb{height:92px;position:relative}
.segc .cc2{display:flex;flex-direction:column;gap:10px;padding:24px 26px;flex:1}
.segc .who{font:700 .66rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.segc .say{font:italic 500 1.05rem/1.55 var(--serif);color:var(--paper)}
.segc .small{margin-top:auto;padding-top:10px}
@media(max-width:860px){.segcards{grid-template-columns:1fr}.segc .swb{height:64px}}

/* certification cards */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cert{position:relative;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line-soft);background:var(--ink2);padding:30px 28px;transition:border-color .2s}
.cert:hover{border-color:var(--gold)}
.cert .seal{position:relative;width:44px;height:44px;flex:none;margin-bottom:6px}
.cert .seal::before{content:"";position:absolute;inset:0;border:1px solid rgba(201,168,92,.4)}
.cert .seal::after{content:"";position:absolute;inset:13px;background:var(--gold)}
.cert h3{font:800 1.08rem/1.25 var(--sans);letter-spacing:.02em}
.cert .iss{font:700 .62rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:-6px}
.cert>p{font-size:.87rem;color:var(--muted);flex:1}
.cert .acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid var(--line-soft);padding-top:16px}
.cert .acts a.tx{font-size:.85rem;font-weight:600}
.pdfchip{display:inline-block;font:800 .64rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:9px 12px;transition:border-color .15s,background .15s}
.pdfchip:hover{border-color:var(--gold);background:rgba(201,168,92,.07)}
@media(max-width:860px){.certs{grid-template-columns:1fr}}

/* provenance rail: 4-column variant (collapses with the base rail below 1020px) */
@media(min-width:1021px){.prov-rail.cols4{grid-template-columns:repeat(4,1fr)}}

/* QC teardown panel */
.qc{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);background:var(--ink2)}
.qc-l{padding:40px 44px;border-right:1px solid var(--line-soft)}
.qc-l .h2{margin-bottom:10px}
.qc-l>.lead{font-size:.92rem;margin-bottom:14px}
.qcheck{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line-soft)}
.qcheck .sq{flex:none;width:11px;height:11px;background:var(--gold);margin-top:6px;box-shadow:0 0 0 4px rgba(201,168,92,.12)}
.qcheck b{display:block;font:700 .95rem/1.3 var(--sans);margin-bottom:4px}
.qcheck p{font-size:.84rem;color:var(--muted)}
.qc-r{padding:40px 44px;background:var(--ink3);display:flex;flex-direction:column;justify-content:center;gap:14px}
.qc-r p{font-size:.9rem;color:var(--muted)}
.lot-tag{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px;align-self:flex-start;border:1px solid var(--line);background:rgba(201,168,92,.07);padding:10px 14px;font-size:.8rem;color:var(--muted)}
.lot-tag b{font:800 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media(max-width:860px){.qc{grid-template-columns:1fr}.qc-l{border-right:0;border-bottom:1px solid var(--line-soft);padding:28px 24px}.qc-r{padding:28px 24px}}

/* the honest essay */
.essay{max-width:840px;border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--ink2);padding:46px 52px}
.essay p{font:500 1.1rem/1.75 var(--serif);color:var(--paper);max-width:62ch}
.essay p+p{margin-top:16px}
.essay p:first-child::first-letter{font:600 3.3rem/.85 var(--serif);color:var(--gold);float:left;padding:7px 12px 0 0}
.essay em{color:var(--gold)}
.essay .sig{font:italic 600 1.08rem/1.5 var(--serif);color:var(--gold)}
@media(max-width:640px){.essay{padding:30px 24px}}

/* install-band phone variant */
.install-band a.p{transition:color .15s}
.install-band a.p:hover{color:#DBBA72}
.install-band .p.tel{font-size:clamp(1.6rem,4.5vw,2.4rem)}
@media(max-width:560px){
  .install-band{padding:30px 26px}
  .install-band .btn{white-space:normal;text-align:center;justify-content:center;width:100%}
}

/* demo toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:99;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:#0f0c08;border:1px solid var(--gold);color:var(--muted);font:500 .82rem/1.5 var(--sans);
  padding:13px 20px;max-width:min(92vw,460px);text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--gold);font-weight:700}
@media (prefers-reduced-motion:reduce){.toast{transition:none;transform:translate(-50%,0)}}

/* ---------- coming-soon (parquet) de-emphasis ---------- */
.ccard-soon{cursor:default}
.ccard-soon:hover{border-color:var(--line-soft)}
.ccard-soon .bg{filter:grayscale(.5) brightness(.75)}
.ccard-soon:hover .bg{transform:none}
.ccard-soon h3,.ccard-soon .sub{opacity:.7}
.soon-tag{flex:none;font:800 .62rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);background:rgba(201,168,92,.07);padding:9px 12px;white-space:nowrap}
.ptable tr.soon td{color:var(--muted-2)}
.ptable tr.soon .prod b{color:var(--muted)}
.ptable tr.soon .prod span{color:var(--muted-2)}
.ptable tr.soon .custom{color:var(--gold-deep)}
.ptable tr.soon:hover td{background:none}