/* =========================================================================
   BLACKLAND POOLS
   Design language: cinematic dusk. Near-black blue-green ground, brass and
   aqua accents, high-contrast didone display against geometric sans.
   Motion personality: slow and buoyant. Things rise the way air rises
   through water. Nothing snaps.
   ========================================================================= */

/* ---------- 1. PRIMITIVE TOKENS ---------- */
:root {
  --ink-900:#040709;  --ink-850:#060A0D;  --ink-800:#0A1116;
  --ink-700:#0E1920;  --ink-600:#132530;  --ink-500:#1B3340;
  --ink-400:#27485A;

  --aqua-500:#2FA9AE; --aqua-400:#4FCBC8; --aqua-300:#8FE3DC;
  --brass-600:#9C6F2E; --brass-500:#C79A50; --brass-400:#E0BC7C;
  --bone-100:#F3EFE8; --bone-200:#DED8CD; --bone-400:#9AA3A6; --bone-500:#76858C;

  --font-display:"Bodoni Moda",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* motion: buoyant */
  --e-rise:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-quick:240ms; --t-mid:480ms; --t-slow:820ms;

  --shell:1240px;
  --z-nav:60; --z-panel:40; --z-hint:20;
}

/* ---------- 2. SEMANTIC TOKENS ---------- */
:root {
  --bg:var(--ink-850);
  --bg-alt:var(--ink-800);
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.055);
  --line:rgba(160,196,206,.14);
  --line-strong:rgba(160,196,206,.26);
  --fg:var(--bone-100);
  --fg-mute:var(--bone-400);
  --fg-dim:var(--bone-500);
  --accent:var(--brass-500);
  --accent-hi:var(--brass-400);
  --signal:var(--aqua-400);
  --focus:var(--aqua-300);
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
/* [hidden] must beat the author display rules below, or panels toggled
   with the hidden property render anyway. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:17px;font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass-500);color:var(--ink-900)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:22px}
@media(min-width:900px){.shell{padding-inline:44px}}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ink-900);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:500}
.skip:focus{left:0}

/* ---------- 4. TYPE SYSTEM ---------- */
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s-4);
}
.sec-h{
  font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,6.4vw,3.85rem);
  line-height:1.03;letter-spacing:-.015em;color:var(--fg);
}
.sec-h em{font-style:italic;color:var(--accent-hi)}
.sec-p{
  margin-top:var(--s-5);max-width:56ch;color:var(--fg-mute);
  font-size:clamp(1rem,2.4vw,1.125rem);line-height:1.72;
}
.sec-head{margin-bottom:var(--s-8)}
@media(min-width:900px){.sec-head{margin-bottom:var(--s-9)}}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-fg:var(--ink-900);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:var(--r-pill);
  font-size:15px;font-weight:500;letter-spacing:.02em;cursor:pointer;
  transition:transform var(--t-quick) var(--e-rise),background-color var(--t-quick) var(--e-soft),
             border-color var(--t-quick) var(--e-soft),color var(--t-quick) var(--e-soft),
             box-shadow var(--t-mid) var(--e-rise);
  will-change:transform;touch-action:manipulation;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--t-quick) var(--e-rise)}
.btn--primary{
  background:linear-gradient(175deg,var(--brass-400),var(--brass-500) 62%,var(--brass-600));
  color:var(--ink-900);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 34px -14px rgba(199,154,80,.7);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 20px 46px -16px rgba(199,154,80,.85)}
.btn--primary:hover svg{transform:translateX(4px)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--fg)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-hi);transform:translateY(-2px)}
.btn--lg{min-height:60px;padding:0 34px;font-size:16px}
.btn--sm{min-height:46px;padding:0 20px;font-size:14px}

/* ---------- 6. TOPBAR ---------- */
.topbar{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);
  transition:background-color var(--t-mid) var(--e-soft),border-color var(--t-mid) var(--e-soft),
             backdrop-filter var(--t-mid) var(--e-soft);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(6,10,13,.82);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
}
.topbar__in{
  max-width:var(--shell);margin-inline:auto;padding:14px 22px;
  display:flex;align-items:center;gap:var(--s-6);
}
@media(min-width:900px){.topbar__in{padding:18px 44px}}
.wordmark{display:flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;padding-right:8px}
.wordmark__mark{width:26px;height:26px;color:var(--accent);flex:none}
.wordmark__type{font-family:var(--font-display);font-size:20px;letter-spacing:.03em}
.topnav{display:none;gap:var(--s-6)}
@media(min-width:1000px){.topnav{display:flex}}
.topnav a{
  position:relative;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-mute);padding:6px 0;transition:color var(--t-quick) var(--e-soft);
}
.topnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-quick) var(--e-rise);
}
.topnav a:hover{color:var(--fg)}
.topnav a:hover::after{transform:scaleX(1)}
.topbar__call{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:border-color var(--t-quick) var(--e-soft),color var(--t-quick) var(--e-soft);
}
.topbar__call svg{width:15px;height:15px;color:var(--accent)}
.topbar__call:hover{border-color:var(--accent);color:var(--accent-hi)}
.topbar__call span{display:none}
@media(min-width:560px){.topbar__call span{display:inline}}

/* ---------- 7. HERO + DUSK SCENE ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.dusk{position:absolute;inset:0;z-index:-1}
.dusk__sky{
  position:absolute;inset:0;
  background:
    linear-gradient(179deg,
      #05080B 0%, #071019 16%, #0B1D2C 32%, #16303C 47%,
      #2E4A45 58%, #6B5539 68%, #A86E3C 76%, #C08247 82%, #6E4E36 88%, #241A16 100%);
}
.dusk__sun{
  position:absolute;left:62%;top:72%;width:min(120vw,1100px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,196,120,.55) 0%,rgba(233,152,74,.28) 26%,rgba(190,108,60,.09) 46%,transparent 66%);
  filter:blur(2px);
}
.dusk__ridge{position:absolute;left:0;right:0;bottom:31%;width:100%;height:min(34vh,240px)}
.ridge-far{fill:#14252C;opacity:.9}
.ridge-near{fill:#0A151A}
.dusk__house{
  position:absolute;right:4%;bottom:31%;width:min(46vw,420px);height:min(24vh,190px);
  background:linear-gradient(180deg,#0B141A,#070E12);
  clip-path:polygon(0% 42%,18% 42%,30% 12%,44% 42%,100% 42%,100% 100%,0% 100%);
}
.dusk__win{position:absolute;background:#F0B463;border-radius:1px;box-shadow:0 0 22px 6px rgba(240,180,99,.32)}
.dusk__win--a{left:56%;top:56%;width:8%;height:16%}
.dusk__win--b{left:70%;top:56%;width:8%;height:16%}
.dusk__win--c{left:31%;top:30%;width:5%;height:10%;background:#E7A459;box-shadow:0 0 16px 4px rgba(231,164,89,.3)}
.dusk__water{
  position:absolute;left:-8%;right:-8%;bottom:0;height:34%;
  background:
    linear-gradient(180deg,
      rgba(18,52,62,.96) 0%, rgba(14,64,74,.98) 18%,
      rgba(12,84,92,1) 42%, rgba(10,60,70,1) 74%, rgba(6,32,40,1) 100%);
  border-top:1px solid rgba(143,227,220,.22);
}
.dusk__coping{
  position:absolute;left:0;right:0;top:-7px;height:7px;
  background:linear-gradient(180deg,#4C5A5C,#26363A);opacity:.85;
}
.dusk__caustic{
  position:absolute;left:-20%;right:-20%;top:0;bottom:0;
  background:
    repeating-linear-gradient(101deg,
      transparent 0 26px, rgba(196,244,238,.055) 26px 30px, transparent 30px 68px);
  mix-blend-mode:screen;
  animation:drift 26s linear infinite;
}
.dusk__caustic--2{
  background:
    repeating-linear-gradient(78deg,
      transparent 0 44px, rgba(255,208,140,.05) 44px 47px, transparent 47px 96px);
  animation-duration:38s;animation-direction:reverse;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(96px,0,0)}}
.dusk__grain{
  position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) .5px,transparent .5px);
  background-size:3px 3px;
}
.dusk__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 88% at 50% 42%,transparent 34%,rgba(4,7,9,.62) 100%),
    linear-gradient(180deg,rgba(4,7,9,.86) 0%,transparent 26%);
}

.hero__body{
  position:relative;max-width:var(--shell);width:100%;margin-inline:auto;
  padding:150px 22px var(--s-7);
}
@media(min-width:900px){.hero__body{padding:190px 44px var(--s-8)}}
.hero__h{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.35rem,8.2vw,5.4rem);line-height:.98;letter-spacing:-.022em;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(4,7,9,.6);
}
.hero__h em{font-style:italic;color:var(--brass-400)}
.hero__p{
  margin-top:var(--s-5);max-width:50ch;font-size:clamp(1rem,2.5vw,1.18rem);
  line-height:1.7;color:rgba(243,239,232,.82);
}
.hero__floor{
  margin-top:var(--s-6);padding:var(--s-4) 0 0;border-top:1px solid var(--line-strong);
  max-width:52ch;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;
}
.hero__floor-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}
.hero__floor-v{
  font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.3rem);font-weight:500;
  color:var(--brass-400);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.hero__floor-n{flex:1 1 100%;font-size:14px;color:var(--fg-dim);line-height:1.6;margin-top:4px}
.hero__cta{margin-top:var(--s-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5)}
.hero__tel{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;color:var(--fg-mute);box-shadow:0 1px 0 var(--line-strong);
  transition:color var(--t-quick) var(--e-soft),border-color var(--t-quick) var(--e-soft);
}
.hero__tel:hover{color:var(--accent-hi);border-color:var(--accent)}

.hero__stats{
  position:relative;max-width:var(--shell);width:100%;margin:0 auto;
  padding:0 22px var(--s-7);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);
}
@media(min-width:760px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.hero__stats{padding:0 44px var(--s-8)}}
.hero__stats{padding-top:0}
.hero__stat{background:var(--bg);padding:var(--s-5) var(--s-4) var(--s-5) 0}
.hero__stat dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)}
.hero__stat dd{
  margin-top:6px;font-family:var(--font-display);font-size:clamp(1.5rem,4.4vw,2rem);
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg);
}

/* ---------- 8. DESIGNER ---------- */
.designer{
  position:relative;padding:var(--s-9) 0 var(--s-8);
  background:linear-gradient(180deg,var(--ink-850) 0%,var(--ink-800) 40%,var(--ink-850) 100%);
}
.designer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 46% at 50% 30%,rgba(47,169,174,.07),transparent 70%);
}
@media(min-width:900px){.designer{padding:var(--s-10) 0 var(--s-9)}}

.dsg{
  position:relative;max-width:var(--shell);margin-inline:auto;padding-inline:22px;
  display:grid;gap:var(--s-5);
}
@media(min-width:900px){.dsg{padding-inline:44px}}
@media(min-width:1080px){.dsg{grid-template-columns:minmax(0,1fr) 366px;gap:var(--s-6);align-items:start}}

.dsg__stage{display:grid;gap:var(--s-4);min-width:0}
.dsg__canvaswrap{
  position:relative;aspect-ratio:1/1;width:100%;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#0E2028 0%,#070D11 62%,#04080A 100%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
  /* pan-y so a vertical drag still scrolls the page on a phone;
     a horizontal-first drag is captured and orbits both axes */
  touch-action:pan-y;cursor:grab;
}
.dsg__canvaswrap:active{cursor:grabbing}
@media(min-width:640px){.dsg__canvaswrap{aspect-ratio:16/10}}
@media(min-width:1080px){.dsg__canvaswrap{aspect-ratio:16/11}}

/* Below the two column breakpoint the stage dissolves into the parent grid so
   the canvas can pin to the top of the viewport. Otherwise you are adjusting a
   pool you cannot see, which is the whole point of the section. */
@media(max-width:1079px){
  .dsg__stage{display:contents}
  .dsg__canvaswrap{
    /* 73px clears the fixed topbar, plus a hairline of air */
    position:sticky;top:76px;z-index:5;aspect-ratio:6/5;
    box-shadow:0 24px 40px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset;
  }
}
#dsg-canvas{width:100%;height:100%;display:block}
.dsg__hint{
  position:absolute;left:14px;bottom:12px;z-index:var(--z-hint);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);
  background:rgba(4,8,10,.6);padding:6px 12px;border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity var(--t-mid) var(--e-soft);pointer-events:none;
}
.dsg__hint.is-gone{opacity:0}
.dsg__reset{
  position:absolute;right:12px;bottom:12px;z-index:var(--z-hint);
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;background:rgba(4,8,10,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;
  transition:border-color var(--t-quick) var(--e-soft),color var(--t-quick) var(--e-soft),transform var(--t-quick) var(--e-rise);
}
.dsg__reset svg{width:19px;height:19px}
.dsg__reset:hover{border-color:var(--accent);color:var(--accent-hi);transform:rotate(-40deg)}
.dsg__loading{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);
  transition:opacity var(--t-mid) var(--e-soft);
}
.dsg__loading.is-gone{opacity:0;pointer-events:none}
.dsg__spin{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-strong);border-top-color:var(--aqua-400);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.dsg__fallback{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:14px}
.dsg__fallback svg{width:100%;height:100%}
.dsg__fallback-note{font-size:12px;color:var(--fg-dim);line-height:1.5;padding:8px 4px 0;max-width:56ch}

/* readout */
.readout{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
  padding:var(--s-5);
}
.readout__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
@media(min-width:620px){.readout__grid{grid-template-columns:repeat(4,1fr)}}
.ro{background:var(--ink-800);padding:var(--s-4) var(--s-4) 14px;display:grid;gap:2px}
.ro__k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)}
.ro__v{
  font-family:var(--font-display);font-size:clamp(1.5rem,4.6vw,1.95rem);font-weight:500;
  color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.1;
}
.ro__u{font-size:12px;color:var(--fg-mute);letter-spacing:.06em}

.readout__band{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
@media(min-width:760px){.readout__band{grid-template-columns:1fr 1fr}}
.band{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);
  background:rgba(6,10,13,.55);
}
.band--run{border-color:rgba(47,169,174,.22)}
.band__k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim)}
.band__v{
  margin-top:6px;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,4.2vw,1.75rem);color:var(--accent-hi);font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.band--run .band__v{color:var(--aqua-300)}
.band__v i{font-style:normal;font-family:var(--font-body);font-size:.62em;color:var(--fg-dim);padding:0 2px}
.band__bar{margin-top:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.band__fill{
  display:block;height:100%;width:38%;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,var(--brass-600),var(--brass-400));
  transition:transform var(--t-slow) var(--e-rise);
}
.band__n{margin-top:12px;font-size:12px;line-height:1.55;color:var(--fg-dim)}
.runbits{margin-top:12px;display:grid;gap:7px}
.runbits li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--fg-mute);border-bottom:1px dotted rgba(160,196,206,.16);padding-bottom:6px}
.runbits b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.readout__disc{
  margin-top:var(--s-4);display:flex;gap:11px;align-items:flex-start;
  font-size:12.5px;line-height:1.6;color:var(--fg-mute);
  border-top:1px solid var(--line);padding-top:var(--s-4);
}
.readout__disc svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.readout__disc b{color:var(--fg);font-weight:500}

/* control panel */
.dsg__panel{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  overflow:hidden;
}
@media(min-width:1080px){
  .dsg__panel{position:sticky;top:88px;max-height:calc(100svh - 112px);display:flex}
  .panel__scroll{overflow-y:auto;overscroll-behavior:contain}
}
.panel__scroll{padding:var(--s-5);display:grid;gap:var(--s-5);width:100%}
.fld{border:0;padding:0;margin:0;min-width:0}
.fld__l{
  padding:0 0 12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);width:100%;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.chips{display:grid;gap:8px}
.chips--shape,.chips--size{grid-template-columns:repeat(2,1fr)}
.chips--fin,.chips--deck{grid-template-columns:1fr}
.chip{position:relative;cursor:pointer;display:block;min-width:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip>span{
  display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13.5px;color:var(--fg-mute);background:rgba(255,255,255,.015);
  transition:border-color var(--t-quick) var(--e-soft),color var(--t-quick) var(--e-soft),
             background-color var(--t-quick) var(--e-soft),transform var(--t-quick) var(--e-rise);
}
.chip:hover>span{border-color:var(--line-strong);color:var(--fg);transform:translateY(-1px)}
.chip input:checked+span{
  border-color:var(--brass-500);color:var(--fg);background:rgba(199,154,80,.1);
  box-shadow:0 0 0 1px rgba(199,154,80,.32);
}
.chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.chip svg{width:30px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.75}
.chip input:checked+span svg{stroke:var(--accent-hi);opacity:1}
.chip--txt>span{flex-direction:column;align-items:flex-start;gap:1px;justify-content:center;font-variant-numeric:tabular-nums}
.chip--txt i{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.chip--row>span{align-items:flex-start;flex-direction:column;gap:2px;padding:11px 13px}
.chip--row b{font-weight:500;font-size:14px;color:var(--fg)}
.chip--row i{font-style:normal;font-size:12px;line-height:1.45;color:var(--fg-dim)}
.chip--sw i{
  width:20px;height:20px;border-radius:5px;flex:none;background:var(--sw);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 2px 6px rgba(0,0,0,.5);
}
.range{margin-top:14px}
.range__l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--fg-mute);margin-bottom:10px}
.range__l output{color:var(--accent-hi);font-variant-numeric:tabular-nums;font-size:14px}
.range__i{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;
}
.range__i::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.range__i::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.range__i::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-9.5px;
  background:var(--brass-400);border:1px solid rgba(0,0,0,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform var(--t-quick) var(--e-rise);
}
.range__i::-moz-range-thumb{
  width:22px;height:22px;border:1px solid rgba(0,0,0,.4);border-radius:50%;
  background:var(--brass-400);box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.range__i:hover::-webkit-slider-thumb{transform:scale(1.12)}
.panel__foot{display:flex;gap:10px;flex-wrap:wrap;padding-top:var(--s-2);border-top:1px solid var(--line)}
.panel__foot .btn{flex:1 1 auto}

/* ---------- 9. BUILD STAGES ---------- */
.build{padding:var(--s-9) 0;background:var(--ink-850);border-top:1px solid var(--line)}
@media(min-width:900px){.build{padding:var(--s-10) 0}}
.stages{display:grid;gap:0;counter-reset:st}
.stage{
  position:relative;padding:var(--s-5) 0 var(--s-5) 0;border-top:1px solid var(--line);
  display:grid;gap:6px;
}
@media(min-width:820px){
  .stage{grid-template-columns:132px minmax(0,1fr);column-gap:var(--s-6);padding:var(--s-6) 0;align-items:start}
  .stage h3{grid-column:2}
  .stage p{grid-column:2}
}
.stage:last-child{border-bottom:1px solid var(--line)}
.stage__w{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
@media(min-width:820px){.stage__w{grid-row:1/span 2;padding-top:5px}}
.stage h3{font-family:var(--font-display);font-size:clamp(1.3rem,3.4vw,1.7rem);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.stage p{max-width:66ch;color:var(--fg-mute);font-size:15.5px;line-height:1.68}
.stage::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--brass-500),transparent 46%);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--e-rise);
}
.stage.is-in::after{transform:scaleX(1)}

/* ---------- 10. PRICING ---------- */
.pricing{padding:var(--s-9) 0;background:linear-gradient(180deg,var(--ink-850),var(--ink-800))}
@media(min-width:900px){.pricing{padding:var(--s-10) 0}}
.tiers{display:grid;gap:var(--s-4)}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr);gap:var(--s-5);align-items:start}}
.tier{
  position:relative;padding:var(--s-6) var(--s-5) var(--s-6);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color var(--t-mid) var(--e-soft),transform var(--t-mid) var(--e-rise);
}
.tier:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.tier--feat{
  border-color:rgba(199,154,80,.42);
  background:linear-gradient(180deg,rgba(199,154,80,.11),rgba(199,154,80,.02) 46%,rgba(255,255,255,.01));
  box-shadow:0 30px 70px -50px rgba(199,154,80,.6);
}
@media(min-width:900px){.tier--feat{transform:translateY(-14px)}.tier--feat:hover{transform:translateY(-18px)}}
.tier__flag{
  position:absolute;top:-11px;left:var(--s-5);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-900);
  background:var(--brass-400);padding:4px 12px;border-radius:var(--r-pill);font-weight:500;
}
.tier__n{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.tier__p{
  margin-top:10px;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,4.2vw,1.9rem);color:var(--fg);font-variant-numeric:tabular-nums;
  line-height:1.15;letter-spacing:-.015em;
}
.tier__p i{font-style:normal;font-family:var(--font-body);font-size:.58em;color:var(--fg-dim)}
.tier__d{margin-top:var(--s-3);font-size:14.5px;line-height:1.62;color:var(--fg-mute)}
.tier__l{margin-top:var(--s-5);display:grid;gap:9px;border-top:1px solid var(--line);padding-top:var(--s-4)}
.tier__l li{position:relative;padding-left:20px;font-size:14px;color:var(--fg-mute);line-height:1.5}
.tier__l li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent);
}
.pricing__note{
  margin-top:var(--s-6);max-width:74ch;font-size:14.5px;line-height:1.7;color:var(--fg-dim);
  border-left:1px solid var(--line-strong);padding-left:var(--s-4);
}

/* ---------- 11. WARRANTY ---------- */
.warranty{padding:var(--s-9) 0;background:var(--ink-800);border-block:1px solid var(--line)}
@media(min-width:900px){.warranty{padding:var(--s-10) 0}}
.wgrid{display:grid;gap:var(--s-7)}
@media(min-width:960px){.wgrid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:var(--s-9);align-items:start}}
.wlist{display:grid;gap:0}
.wlist>div{
  display:grid;gap:4px;padding:var(--s-4) 0;border-top:1px solid var(--line);
}
@media(min-width:640px){.wlist>div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:var(--s-5);align-items:baseline}}
.wlist>div:last-child{border-bottom:1px solid var(--line)}
.wlist dt{font-size:14px;letter-spacing:.02em;color:var(--fg)}
.wlist dd{font-size:14.5px;color:var(--fg-mute);line-height:1.6}

/* ---------- 12. CREW ---------- */
.crew{padding:var(--s-9) 0}
@media(min-width:900px){.crew{padding:var(--s-10) 0}}
.people{display:grid;gap:var(--s-4)}
@media(min-width:700px){.people{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.people{grid-template-columns:repeat(4,1fr)}}
.person{
  padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  transition:border-color var(--t-mid) var(--e-soft),transform var(--t-mid) var(--e-rise);
}
.person:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.person__i{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(199,154,80,.4);color:var(--accent-hi);
  font-family:var(--font-display);font-size:15px;letter-spacing:.06em;
  margin-bottom:var(--s-4);background:rgba(199,154,80,.07);
}
.person h3{font-family:var(--font-display);font-size:1.32rem;font-weight:400;letter-spacing:-.005em}
.person__r{margin-top:3px;font-size:13px;color:var(--fg-mute)}
.person__c{
  margin-top:10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aqua-400);line-height:1.55;
}
.person__b{margin-top:var(--s-3);font-size:13.5px;line-height:1.62;color:var(--fg-dim)}

/* ---------- 13. FAQ ---------- */
.faq{padding:var(--s-9) 0;background:var(--ink-800);border-top:1px solid var(--line)}
@media(min-width:900px){.faq{padding:var(--s-10) 0}}
.qa{display:grid;max-width:900px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;min-height:44px;
  transition:color var(--t-quick) var(--e-soft);
}
.q summary::-webkit-details-marker{display:none}
.q summary span{
  font-family:var(--font-display);font-size:clamp(1.08rem,3vw,1.42rem);font-weight:400;
  line-height:1.28;letter-spacing:-.005em;max-width:52ch;
}
.q summary:hover{color:var(--accent-hi)}
.q summary i{
  position:relative;flex:none;width:22px;height:22px;margin-top:6px;
  border:1px solid var(--line-strong);border-radius:50%;
  transition:border-color var(--t-quick) var(--e-soft),transform var(--t-mid) var(--e-rise);
}
.q summary i::before,.q summary i::after{
  content:"";position:absolute;inset:50% 5px auto;height:1px;background:currentColor;
  transition:transform var(--t-mid) var(--e-rise);
}
.q summary i::after{transform:rotate(90deg)}
.q[open] summary i{border-color:var(--accent);transform:rotate(180deg)}
.q[open] summary i::after{transform:rotate(0deg)}
.q__b{padding:0 0 var(--s-5);max-width:70ch;display:grid;gap:var(--s-4)}
.q__b p{font-size:15.5px;line-height:1.75;color:var(--fg-mute)}
.q__b b{color:var(--fg);font-weight:500}
.q[open] .q__b{animation:qopen var(--t-mid) var(--e-rise) both}
@keyframes qopen{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}

/* ---------- 14. CLOSE + FOOT ---------- */
.close{
  padding:var(--s-10) 0;position:relative;overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 110%,rgba(199,154,80,.16),transparent 62%),
    linear-gradient(180deg,var(--ink-850),var(--ink-900));
}
.close__grid{display:grid;gap:var(--s-7)}
@media(min-width:900px){
  .close__grid{grid-template-columns:236px minmax(0,1fr);gap:var(--s-9);align-items:start}
}
.close__who{
  padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(199,154,80,.09),rgba(255,255,255,.012));
}
.close__mono{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(199,154,80,.45);color:var(--accent-hi);
  font-family:var(--font-display);font-size:20px;letter-spacing:.06em;
  background:rgba(199,154,80,.09);margin-bottom:var(--s-4);
}
.close__name{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;letter-spacing:-.01em}
.close__role{margin-top:4px;font-size:13.5px;color:var(--fg-mute)}
.close__cred{
  margin-top:10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aqua-400);line-height:1.55;
}
.close__hours{
  margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line);
  display:grid;gap:2px;
}
.close__hours b{
  font-family:var(--font-display);font-size:1.12rem;font-weight:500;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.close__hours span{font-size:12.5px;color:var(--fg-dim)}
.close__in{max-width:660px}
.close__in .sec-p+.sec-p{margin-top:var(--s-4)}
.close__cta{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.close__cta .btn{font-variant-numeric:tabular-nums}
.close__meta{margin-top:var(--s-6);font-size:13px;color:var(--fg-dim);line-height:1.6}

.foot{background:var(--ink-900);border-top:1px solid var(--line);padding:var(--s-6) 0}
.foot__in{display:grid;gap:8px;font-size:12.5px;color:var(--fg-dim)}
@media(min-width:820px){.foot__in{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-5)}}
.foot__d{line-height:1.5}
.foot__by a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);box-shadow:0 1px 0 rgba(199,154,80,.35);transition:color var(--t-quick) var(--e-soft)}
.foot__by a:hover{color:var(--accent-hi)}


.demo-note{max-width:78ch;color:var(--fg-mute);line-height:1.55}
@media(min-width:820px){.foot__in{grid-template-columns:auto 1fr auto}.demo-note{grid-column:1/-1;order:3;padding-top:10px;border-top:1px solid var(--line)}}

/* ---------- 15. REVEAL ---------- */
.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--t-slow) var(--e-rise),transform var(--t-slow) var(--e-rise)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 16. REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .dusk__caustic{animation:none}
  .stage::after{transform:scaleX(1)}
}