/* ============================================================
   KURNT — DESIGN TOKENS
   ============================================================ */
:root{
  color-scheme:dark;
  --accent-text:#7CFF00;
  --nav-bg:rgba(11,12,10,0.72);
  --black:#0b0c0a;
  --near-black:#0f100e;
  --graphite:#181916;
  --dark-grey:#26271f;
  --line:#2a2c26;
  --silver:#a9ada2;
  --white:#f3f5f0;
  --green:#7CFF00;
  --green-dim: rgba(124,255,0,0.5);
  --green-glow: rgba(124,255,0,0.22);
  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16,.84,.32,1);
  --nav-h: 68px;
  --nav-h-compact: 54px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--black);}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--green); color:#000; padding:12px 18px; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .wrap{ padding:0 18px; } }

.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--accent-text); font-weight:500; margin:0 0 10px; text-transform:uppercase;
}
#host .eyebrow{ color:var(--accent-text); }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-0.01em; }

.section{ position:relative; padding:min(9vw,72px) 0; border-top:1px solid var(--line); scroll-margin-top:var(--nav-h); }
.section:first-of-type{ border-top:none; }
#hero{ scroll-margin-top:0; }

/* ============================================================
   NAVIGATION — compacts on scroll so it never eats the screen
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav.compact{ height:var(--nav-h-compact); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo{ display:flex; align-items:center; height:22px; transition:height .3s var(--ease); }
.nav.compact .nav-logo{ height:18px; }
.nav-logo img{ height:100%; width:auto; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color:var(--silver); font-size:13.5px; font-weight:500;
  position:relative; padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--green); transition:width .3s var(--ease); box-shadow:0 0 8px var(--green-glow);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--white); }
.nav-links a.active::after{ width:100%; }
.nav-cta{
  background:var(--white); color:var(--black); font-size:12.5px; font-weight:600;
  padding:9px 18px; border-radius:999px; text-decoration:none;
  border:1px solid var(--white); transition:background .25s, color .25s, box-shadow .25s, padding .3s;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.nav.compact .nav-cta{ padding:7px 15px; font-size:12px; }
.nav-cta:hover{ background:var(--green); border-color:var(--green); box-shadow:0 0 24px var(--green-glow); }
.nav-toggle{ display:none; background:none; border:none; color:var(--white); padding:8px; cursor:pointer; }
.nav-toggle svg{ display:block; }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta{ display:none; }
}
.mobile-menu{
  position:fixed; inset:0; z-index:490; background:rgba(11,12,10,0.98);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:22px; padding:0 28px; transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.mobile-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-menu a{ font-family:var(--font-display); font-size:26px; text-decoration:none; color:var(--white); }
.mobile-menu .nav-cta{ margin-top:10px; }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; min-height:92svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:var(--nav-h) 0 20px;
  overflow:hidden;
}
#hero-blob{
  position:absolute; width:46vw; height:46vw; max-width:640px; max-height:640px;
  border-radius:50%; left:0; top:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(124,255,0,0.30) 0%, rgba(124,255,0,0.10) 45%, rgba(124,255,0,0) 72%);
  filter:blur(6px); mix-blend-mode:screen;
  transform:translate(-50%,-50%);
  transition:opacity .4s ease;
  opacity:0;
}
#hero .hero-logo{ position:relative; z-index:1; width:min(38vw,220px); margin-bottom:18px; }
#hero .hero-logo img{ width:100%; }
#hero h1{
  position:relative; z-index:1;
  font-size:clamp(30px,6vw,64px); color:var(--white); max-width:14ch;
}
#hero h1 .accent{ color:var(--accent-text); }
#hero p.sub{
  position:relative; z-index:1;
  font-family:var(--font-body); color:var(--silver); font-size:clamp(14px,1.7vw,17px);
  max-width:500px; margin:16px auto 0; line-height:1.55;
}
.hero-ctas{ position:relative; z-index:1; display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-size:13.5px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  font-family:var(--font-body);
}
.btn-primary{ background:var(--green); color:#0b0c0a; }
.btn-primary:hover{ box-shadow:0 0 30px var(--green-glow); transform:translateY(-2px); }
.btn-secondary{ background:transparent; color:var(--white); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--white); transform:translateY(-2px); }
#host .btn-secondary{ color:var(--white); border-color:var(--line); }
#host .btn-secondary:hover{ border-color:var(--white); }

.hero-ambient{ position:absolute; inset:0; z-index:-1; }
.hero-ambient canvas{ width:100%; height:100%; }

.scroll-cue{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-mono); color:var(--silver); font-size:10px; letter-spacing:.14em; opacity:.7;
}
.scroll-cue .line{ width:1px; height:26px; background:linear-gradient(var(--green), transparent); animation:scrollcue 2s ease infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ============================================================
   ABOUT KURNT — short introduction
   ============================================================ */
#about{ text-align:center; }
.about-title{ margin:8px auto 0; font-size:clamp(28px,5vw,52px); max-width:18ch; }
.about-copy{ margin:18px auto 0; max-width:52ch; color:var(--silver); font-size:clamp(15px,2vw,18px); line-height:1.6; }
.about-facts{ margin-top:22px; font-family:var(--font-mono); font-size:12px; color:var(--silver); letter-spacing:.02em; }

/* ============================================================
   CHARGE TIME CALCULATOR
   ============================================================ */
#calculator{ background:var(--near-black); }
#calculator h2{ font-size:clamp(26px,4vw,42px); max-width:14ch; }
#calculator .body-copy{ color:var(--silver); font-size:13.5px; line-height:1.5; margin-top:8px; max-width:56ch; }
.calc-panel{
  margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--graphite); border:1px solid var(--line); border-radius:18px; overflow:hidden;
}
.calc-controls{ padding:24px; display:flex; flex-direction:column; gap:18px; }
.calc-row label{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--silver); margin-bottom:8px; }
.calc-row label b{ color:var(--white); font-weight:600; }
.calc-row input[type="range"]{
  width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px;
  background:var(--line); outline:none;
}
.calc-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green-glow); cursor:pointer; border:2px solid #0b0c0a;
}
.calc-row input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--green); border:2px solid #0b0c0a; cursor:pointer;
}
.speed-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.speed-pill{
  border:1px solid var(--line); background:transparent; color:var(--silver);
  padding:7px 13px; border-radius:999px; font-size:12px; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.speed-pill.active{ border-color:var(--green); color:var(--white); background:rgba(124,255,0,0.08); }
.calc-row select{
  width:100%; background:var(--near-black); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; color:var(--white); font-family:var(--font-body); font-size:13.5px;
}
.calc-row select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow); }
.calc-manual{ display:none; }
.calc-manual.show{ display:flex; flex-direction:column; gap:18px; margin-top:4px; }
.calc-vehicle-note{ margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--silver); }
.calc-result{
  padding:24px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.calc-no-dc{ display:none; color:var(--silver); font-size:13.5px; line-height:1.6; padding:0 6px; }
.calc-no-dc.show{ display:block; }
.calc-no-dc b{ display:block; font-family:var(--font-display); font-size:17px; color:var(--white); font-weight:500; margin-bottom:8px; }
.calc-result .est-time{ font-family:var(--font-display); font-size:clamp(40px,5vw,58px); color:var(--white); }
.calc-result .est-time .unit{ font-size:.35em; color:var(--accent-text); margin-left:4px; }
.calc-result .est-caption{ color:var(--silver); font-size:13px; margin-top:4px; }
.calc-result .kwh-bar{ margin-top:18px; height:7px; border-radius:999px; background:var(--line); overflow:hidden; position:relative; }
.calc-result .kwh-fill{ height:100%; background:linear-gradient(90deg, var(--green), #c8ff8c); transition:width .3s ease; }
.calc-result .kwh-labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--silver); margin-top:6px; }
.calc-result .kwh-labels .mid{ color:var(--white); }
.calc-disclaimer{ margin-top:16px; font-size:11px; color:#6c7075; max-width:70ch; line-height:1.5; }
@media (max-width:860px){ .calc-panel{ grid-template-columns:1fr; } .calc-result{ border-left:none; border-top:1px solid var(--line); } }

/* ============================================================
   TWO WAYS TO CHARGE — compact duo cards
   ============================================================ */
#charge-types h2{ font-size:clamp(26px,4vw,42px); }
.steps-flow{
  margin-top:36px; display:flex; align-items:flex-start; justify-content:center;
  gap:22px; flex-wrap:wrap; text-align:center;
}
.sf-step{ max-width:170px; }
.sf-step .sf-num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-text); letter-spacing:.05em; }
.sf-step h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:8px 0 6px; }
.sf-step p{ color:var(--silver); font-size:13.5px; line-height:1.5; margin:0; }
.sf-arrow{ color:var(--line); font-size:22px; margin-top:26px; }
@media (max-width:640px){
  .steps-flow{ flex-direction:column; align-items:center; gap:20px; }
  .sf-arrow{ transform:rotate(90deg); margin-top:0; }
}

/* ============================================================
   PHILOSOPHY — condensed
   ============================================================ */
#philosophy{ background:var(--near-black); }
#philosophy h2{ font-size:clamp(26px,4vw,42px); max-width:16ch; }
#philosophy .lede{ color:var(--silver); font-size:14px; max-width:52ch; line-height:1.55; margin-top:10px; }
.principles{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.principle{ background:var(--graphite); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.principle .num{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent-text); letter-spacing:.06em; }
.principle h3{ font-family:var(--font-display); font-size:15.5px; font-weight:600; margin:6px 0 4px; }
.principle p{ color:var(--silver); font-size:12.5px; line-height:1.5; margin:0; }
@media (max-width:700px){ .principles{ grid-template-columns:1fr; } }
.statement-block{ margin-top:32px; text-align:center; }
.statement-block .yes{ font-family:var(--font-display); font-size:clamp(20px,3.2vw,36px); color:var(--white); max-width:22ch; margin:0 auto; line-height:1.25; }
.statement-block .yes .accent{ color:var(--accent-text); }
.statement-block .strike{ position:relative; display:inline-block; color:var(--silver); }
.statement-block .strike::after{
  content:''; position:absolute; left:0; top:52%; width:0; height:2px; background:var(--green);
  transition:width .6s var(--ease); box-shadow:0 0 8px var(--green-glow);
}
.statement-block.in .strike::after{ width:100%; }

/* ============================================================
   NETWORK — locations + expansion
   ============================================================ */
#network{ background:var(--near-black); }
#network h2{ font-size:clamp(26px,4vw,42px); max-width:14ch; }
#network .body-copy{ color:var(--silver); font-size:13.5px; line-height:1.55; margin-top:8px; max-width:60ch; }
.network-panel{
  margin-top:22px; display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--line);
  background:var(--graphite); border-radius:14px; overflow:hidden;
}
.location-card{ padding:22px; }
.location-card .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.location-card h4{ font-family:var(--font-display); font-size:17px; font-weight:500; margin:0; }
.status-pill{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; padding:4px 10px; border-radius:999px; border:1px solid var(--green-dim); color:var(--accent-text); white-space:nowrap; }
.location-card .addr{ color:var(--silver); font-size:13px; margin-top:8px; }
.location-card .meta{ display:flex; gap:18px; margin-top:14px; }
.location-card .meta div{ font-family:var(--font-mono); font-size:10.5px; color:var(--silver); }
.location-card .meta b{ display:block; font-family:var(--font-display); font-size:14px; color:var(--white); font-weight:500; margin-top:2px; }
.location-card .directions{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13px;
  color:var(--accent-text); text-decoration:none; border-bottom:1px solid var(--green-dim);
}
.location-card .directions:hover{ color:var(--white); border-color:var(--white); }
.next-up{ padding:22px; border-left:1px solid var(--line); }
.next-up .label{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent-text); letter-spacing:.04em; margin-bottom:10px; }
.next-up ul{ list-style:none; margin:0; padding:0; }
.next-up li{ padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--silver); }
.next-up li:first-child{ border-top:none; }
@media (max-width:760px){ .network-panel{ grid-template-columns:1fr; } .next-up{ border-left:none; border-top:1px solid var(--line); } }
.network-cta{ margin-top:18px; color:var(--silver); font-size:13.5px; }
.network-cta a{ color:var(--accent-text); text-decoration:none; border-bottom:1px solid var(--green-dim); }
.network-cta a:hover{ color:var(--white); border-color:var(--white); }

/* ============================================================
   HOST A KURNT — off-white section, heavily compacted
   ============================================================ */
#host{ background:var(--black); color:var(--white); }
#host h2{ font-size:clamp(28px,4.4vw,46px); color:var(--white); }
#host .host-head{ max-width:680px; }
#host .body-copy{ color:var(--silver); font-size:14.5px; line-height:1.55; margin-top:12px; }
#host .body-copy strong{ color:var(--white); }
#host .property-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
#host .property-tags span{ border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:12px; color:var(--silver); }

#host .process{
  margin-top:32px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border:1px solid rgba(11,12,10,.12); border-radius:999px; padding:6px;
}
#host .process .p-step{ display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:12.5px; color:var(--silver); }
#host .process .p-step b{ font-family:var(--font-mono); color:var(--accent-text); font-weight:600; }
#host .process .p-arrow{ color:var(--silver); }
@media (max-width:640px){
  #host .process{ border-radius:14px; flex-direction:column; align-items:stretch; }
  #host .process .p-step{ padding:10px 8px; border-bottom:1px solid var(--line); }
  #host .process .p-step:last-child{ border-bottom:none; }
  #host .process .p-arrow{ display:none; }
}

#host .benefits-block{ margin-top:32px; }
#host .benefits-block h3{ font-family:var(--font-display); font-size:clamp(19px,2.6vw,26px); font-weight:500; color:var(--white); max-width:16ch; }
.benefits-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.benefits-grid .b-card{ background:var(--graphite); padding:16px 14px; }
.benefits-grid .b-card b{ display:block; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--white); margin-bottom:4px; }
.benefits-grid .b-card span{ font-size:12px; color:var(--silver); line-height:1.4; }
@media (max-width:760px){ .benefits-grid{ grid-template-columns:1fr 1fr; } }

#host .host-cta{ margin-top:34px; }

/* ============================================================
   MODALS — host + contact forms live here, not on the page
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(5,6,4,0.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  backdrop-filter:blur(4px);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-card{
  position:relative; width:100%; max-width:600px; max-height:86vh; overflow-y:auto;
  background:var(--graphite); border:1px solid var(--line); border-radius:20px;
  padding:clamp(22px,4vw,40px);
  transform:translateY(16px); transition:transform .3s var(--ease);
}
.modal-overlay.open .modal-card{ transform:translateY(0); }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:var(--silver); font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.modal-close:hover{ border-color:var(--green); color:var(--white); }
.modal-card h3{ font-family:var(--font-display); font-size:20px; font-weight:500; padding-right:30px; }
.modal-card .form-sub{ color:var(--silver); font-size:13px; margin-top:6px; }
@media (max-width:640px){
  .modal-overlay{ padding:0; }
  .modal-card{ max-width:none; width:100%; height:100%; max-height:100%; border-radius:0; }
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:2px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:12.5px; color:var(--silver); }
.field label .opt{ color:#6c7075; font-weight:400; }
.field input, .field select, .field textarea{
  background:var(--near-black); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--white); font-family:var(--font-body); font-size:14px;
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-glow);
}
.field textarea{ resize:vertical; min-height:84px; }
.field .field-error{ font-size:11.5px; color:#ff6b5e; min-height:14px; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#ff6b5e; }
.field.invalid .field-error{ display:block; }
.submit-row{ display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap; }
.form-status{ font-size:12.5px; color:var(--accent-text); display:none; }
.form-status.show{ display:block; }
.form-legal{ margin-top:14px; font-size:11.5px; color:#6c7075; }
.form-legal a{ color:var(--silver); text-decoration:underline; text-underline-offset:2px; }
.form-legal a:hover{ color:var(--white); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } .field.full{ grid-column:auto; } }

/* ============================================================
   CONTACT — compact
   ============================================================ */
#contact{ background:var(--near-black); text-align:center; }
#contact .wrap{ max-width:640px; }
#contact h2{ font-size:clamp(26px,4.4vw,44px); }
#contact .body-copy{ color:var(--silver); font-size:14px; margin-top:10px; line-height:1.55; }
.contact-links{ display:flex; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.contact-link{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:10px 18px; text-decoration:none;
  color:var(--silver); font-size:13px; transition:border-color .25s, color .25s;
}
.contact-link:hover{ border-color:var(--green); color:var(--white); }
.contact-addr{ margin-top:18px; color:#8a8f86; font-family:var(--font-mono); font-size:11.5px; }
#contact .host-cta{ margin-top:26px; }

/* ============================================================
   FOOTER — big closing statement, kept prominent
   ============================================================ */
footer{ border-top:1px solid var(--line); }
.footer-hero{ padding:min(10vw,80px) 0 min(6vw,48px); text-align:center; }
.footer-hero .footer-tagline{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--accent-text);
  text-transform:uppercase;
}
.footer-hero .footer-logo{ width:min(60vw,340px); margin:18px auto 0; }
.footer-utility{ border-top:1px solid var(--line); padding:22px 0; }
.footer-utility .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-nav{ display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.footer-nav a{ text-decoration:none; color:var(--silver); font-size:12.5px; }
.footer-nav a:hover{ color:var(--white); }
.social-links{ display:flex; align-items:center; gap:10px; }
.social-links a{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--line); border-radius:50%; color:var(--silver);
  transition:border-color .25s, color .25s, box-shadow .25s;
}
.social-links a:hover{ color:var(--white); border-color:var(--green); box-shadow:0 0 16px var(--green-glow); }
.footer-bottom{ padding:16px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#6c7075; font-family:var(--font-mono); font-size:11px; }
.footer-bottom a{ text-decoration:none; color:#6c7075; }
.footer-bottom a:hover{ color:var(--silver); }

#cine-vignette{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode:multiply;
}

.word-split{ overflow:hidden; display:inline-block; vertical-align:top; }
.word-split .w-inner{ display:inline-block; will-change:transform; }

#float-cta{
  position:fixed; right:20px; bottom:20px; z-index:300;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green); color:#0b0c0a; font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 30px rgba(0,0,0,0.45), 0 0 0 0 var(--green-glow);
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), box-shadow .25s ease;
}
#float-cta.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#float-cta:hover{ box-shadow:0 8px 30px rgba(0,0,0,0.45), 0 0 26px var(--green-glow); }
@media (max-width:640px){ #float-cta{ right:14px; bottom:14px; padding:11px 16px; font-size:12.5px; } }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .scroll-cue .line{ animation:none; }
}


/* ===== Notify box, FAQ, trust line, helpers ===== */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }
.notify{ margin-top:28px; padding:20px; border:1px solid var(--line); border-radius:16px; display:grid; gap:14px; }
.notify-copy b{ display:block; font-family:var(--font-display); font-weight:500; font-size:16px; }
.notify-copy span{ display:block; margin-top:4px; color:var(--silver); font-size:13.5px; }
.notify-fields{ display:grid; gap:10px; grid-template-columns:1fr; align-items:start; }
.notify-fields .field{ margin:0; }
@media(min-width:720px){ .notify{ grid-template-columns:1fr 1.4fr; align-items:center; } .notify-fields{ grid-template-columns:1.3fr 1fr auto; } .notify .form-status{ grid-column:1/-1; } }
.faq{ margin-top:22px; border-top:1px solid var(--line); max-width:760px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:500; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:14px; color:var(--accent-text); font-family:var(--font-mono); font-size:18px; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--silver); font-size:14.5px; line-height:1.6; padding:0 0 18px; max-width:62ch; }
.faq summary:focus-visible, .modal-close:focus-visible, .btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.trust-line{ margin-top:12px; font-family:var(--font-mono); font-size:11.5px; color:var(--silver); letter-spacing:.02em; }
.notify .btn{ white-space:nowrap; }


/* ===== Partner page: proposition ===== */
#host .lede{ margin-top:14px; font-family:var(--font-display); font-size:clamp(17px,2.4vw,22px); font-weight:500; color:var(--white); }
#host .host-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
#host .roles{ max-width:900px; margin:36px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ #host .roles{ grid-template-columns:1fr; } }
#host .role-card{ background:var(--graphite); border:1px solid var(--line); border-radius:16px; padding:22px; }
#host .role-card h3, #host .how-works h3, #host .journey h3{ font-family:var(--font-display); font-size:clamp(17px,2.2vw,21px); font-weight:500; color:var(--white); }
#host .role-card ul{ list-style:none; margin-top:14px; display:grid; gap:12px; }
#host .role-card li{ font-size:13.5px; line-height:1.5; color:var(--silver); }
#host .role-card li b{ display:block; color:var(--white); font-weight:600; font-size:14px; }
#host .how-works, #host .journey{ max-width:680px; margin:36px auto 0; }
#host .how-works p{ margin-top:10px; color:var(--silver); font-size:14.5px; line-height:1.65; }
#host .journey ol{ list-style:none; margin-top:14px; border-top:1px solid var(--line); }
#host .journey li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
#host .journey li > b{ font-family:var(--font-mono); color:var(--accent-text); font-weight:600; font-size:13px; padding-top:2px; }
#host .journey strong{ display:block; color:var(--white); font-size:15px; font-weight:600; }
#host .journey span{ display:block; margin-top:3px; color:var(--silver); font-size:13.5px; line-height:1.5; }
.about-more{ margin-top:20px; font-size:13.5px; }
.about-more a{ color:var(--accent-text); }
.about-copy + .about-copy{ margin-top:12px; }
.facts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:22px; }
.facts-grid div{ background:var(--black); padding:16px 18px; }
.facts-grid dt{ font-family:var(--font-mono); font-size:11px; color:var(--silver); letter-spacing:.04em; text-transform:uppercase; }
.facts-grid dd{ margin-top:4px; font-size:14.5px; }
.legal-page ul{ padding-left:20px; margin-top:10px; }
.legal-page li{ margin-top:6px; }
.legal-page li b, .legal-page p b{ color:var(--white); font-weight:600; }
.legal-page p{ margin-top:12px; }
.legal-page .eyebrow{ margin-bottom:10px; }
#host .role-card ul{ padding:0; margin-left:0; }
.facts-grid dd{ margin-left:0; }

.page-top{ padding-top:calc(var(--nav-h) + 40px); border-top:none; }
.page-top h1{ font-size:clamp(28px,4.4vw,46px); }
.footer-nav{ flex-wrap:wrap; }


/* ===== Side menu drawer ===== */
.nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
.mobile-menu{ display:none !important; }
.side-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:1190; }
.side-scrim.open{ opacity:1; pointer-events:auto; }
.side-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,340px); z-index:1200;
  background:var(--near-black); color:var(--white); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s var(--ease); visibility:hidden;
  display:flex; flex-direction:column; padding:72px 28px 28px; overflow-y:auto;
}
.side-menu.open{ transform:translateX(0); visibility:visible; }
.side-close{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--white); font-size:32px; line-height:1; cursor:pointer; padding:6px 10px; }
.side-menu ul{ list-style:none; margin:0; padding:0; }
.side-menu nav a{ display:block; padding:14px 0; font-family:var(--font-display); font-size:24px; color:var(--white); text-decoration:none; border-bottom:1px solid var(--line); }
.side-menu nav a:hover, .side-menu nav a.current{ color:var(--accent-text); }
.side-cta{ margin-top:28px; text-align:center; }
.side-contact{ margin-top:auto; padding-top:28px; display:grid; gap:8px; font-family:var(--font-mono); font-size:12px; }
.side-contact a{ color:var(--silver); text-decoration:none; }
.side-contact a:hover{ color:var(--accent-text); }
.side-menu a:focus-visible, .side-close:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .side-menu, .side-scrim{ transition:none; } }

/* ============================================================
   MOBILE / PRODUCTION FIXES (added on top of the design)
   ============================================================ */
html{ -webkit-tap-highlight-color:transparent; }
/* 16px inputs stop iPhones zooming in when a field is tapped */
@media (max-width:860px){
  .field input, .field select, .field textarea{ font-size:16px; }
}
/* floating button clears the iPhone home bar, and tucks away while scrolling down */
#float-cta{ bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:640px){ #float-cta{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } }
#float-cta.tuck{ opacity:0; transform:translateY(14px) scale(.96); pointer-events:none; }
/* the nav logo is now the wordmark image */
.nav-logo img{ height:100%; width:auto; }
/* images carry width/height attributes (prevents layout shift); keep their aspect ratio */
#hero .hero-logo img, .footer-hero .footer-logo{ height:auto; }

/* ============================================================
   DAY / NIGHT MODE
   Night (dark) is the default. Day mode swaps the design tokens,
   so every page and component follows automatically.
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --black:#f3f5f0;          /* page background */
  --near-black:#eceee7;
  --graphite:#ffffff;       /* cards, panels, inputs */
  --dark-grey:#dfe2d8;
  --line:rgba(11,12,10,.13);
  --silver:#4d5246;         /* secondary text */
  --white:#0b0c0a;          /* primary text */
  --accent-text:#3a7d00;    /* green that stays readable on light */
  --green-dim:rgba(58,125,0,.45);
  --green-glow:rgba(124,255,0,.30);
  --nav-bg:rgba(243,245,240,.85);
}
html[data-theme="light"] #cine-vignette{ display:none; }
html[data-theme="light"] #hero-blob{ mix-blend-mode:multiply; opacity:.5; }
html[data-theme="light"] .footer-bottom, html[data-theme="light"] .footer-bottom a,
html[data-theme="light"] .form-legal, html[data-theme="light"] .calc-disclaimer{ color:#5f6459; }
/* logos: dark-ink versions in day mode (JS also swaps src as a fallback) */
html[data-theme="light"] img[data-theme-img="/assets/logo.webp"]{ content:url(/assets/logo-dark.webp); }
html[data-theme="light"] img[data-theme-img="/assets/wordmark.webp"]{ content:url(/assets/wordmark-dark.webp); }
/* smooth cross-fade only while switching, never on page load */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

/* toggle button */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--white); cursor:pointer;
  transition:border-color .25s, color .25s, background .25s, transform .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--green); }
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle svg{ width:17px; height:17px; display:block; }
.theme-toggle .i-moon{ display:none; }
html[data-theme="light"] .theme-toggle .i-sun{ display:none; }
html[data-theme="light"] .theme-toggle .i-moon{ display:block; }
.nav.compact .theme-toggle{ width:34px; height:34px; }
@media (max-width:860px){ .theme-toggle{ width:40px; height:40px; } }