/* Recharge District — shared site styles (brand book 2026) */
:root{
  --sand:#F4EAE1; --sand-2:#FBF6F1; --toast:#FCDFC0; --lime:#FFF776;
  --orange:#F26622; --orange-text:#D9480F; --pulse:#EC4424;
  --green:#018D62; --green-ink:#017A55; --deep:#0B3F2E; --navy:#172440;
  --ink:#231F1C; --muted:#6B6158; --line:#E6D6C7; --white:#fff;
  --display:'Chonked','Titan One',system-ui,sans-serif;
  --round:'Fredoka','Geist',system-ui,sans-serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px; --r-sm:14px; --pad:clamp(16px,4vw,40px); --max:1180px;
  --shadow:0 18px 40px -18px rgba(35,31,28,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--sand);color:var(--ink);line-height:1.55;font-size:16px;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.display{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:.005em}
.round{font-family:var(--round)}
.eyebrow{font-family:var(--round);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:60ch}
section{padding:clamp(64px,9vw,112px) 0}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{font-size:clamp(40px,6.4vw,76px);color:var(--deep)}
.sec-head h2 .o{color:var(--orange-text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;
  padding:14px 24px;font-family:var(--round);font-weight:600;font-size:17px;text-decoration:none;line-height:1.1;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-orange{background:var(--orange);color:var(--ink);box-shadow:0 8px 20px -10px rgba(242,102,34,.9)}
.btn-orange:hover{background:#FF7431}
.btn-green{background:var(--green-ink);color:#fff}
.btn-green:hover{background:var(--deep)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-cream{background:var(--sand);color:var(--deep)}
.btn-sm{padding:10px 16px;font-size:15px}

/* launch strip */
.strip{background:var(--lime);color:var(--ink);font-family:var(--round);font-weight:600;font-size:15px;text-align:center;padding:9px var(--pad)}
.strip a{text-decoration:none}
.strip b{font-weight:700}
.strip .arrow{display:inline-block;margin-left:6px;transition:transform .15s}
.strip a:hover .arrow{transform:translateX(3px)}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(244,234,225,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(230,214,199,.7)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.nav .logo img{height:40px;width:auto}
.nav ul{display:flex;align-items:center;gap:6px;list-style:none}
.nav ul a{display:block;text-decoration:none;font-family:var(--round);font-weight:500;font-size:16px;padding:8px 14px;border-radius:999px;color:var(--deep)}
.nav ul a:hover,.nav ul a[aria-current="page"]{background:#fff}
.nav .soon{font-size:11px;font-weight:700;background:var(--toast);color:var(--orange-text);border-radius:999px;padding:2px 7px;margin-left:4px;vertical-align:2px}
.nav .ig{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;background:none;border:0;padding:8px;color:var(--deep)}
.menu-btn svg{width:28px;height:28px}
@media(max-width:860px){
  .menu-btn{display:block}
  .nav ul{position:absolute;left:0;right:0;top:70px;background:var(--sand);flex-direction:column;align-items:stretch;padding:10px var(--pad) 20px;gap:2px;
    border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(0,0,0,.25);display:none}
  .nav.open ul{display:flex}
  .nav ul a{padding:14px 12px;font-size:18px}
  .nav .logo img{height:34px}
}

/* social icons */
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px}
.icon{width:20px;height:20px;flex:none}

/* footer */
footer{background:var(--deep) url('/brand/pattern-green.svg') center/900px;color:var(--sand);padding:64px 0 36px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer img.flogo{height:54px;width:auto;margin-bottom:16px}
footer h3{font-family:var(--round);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--toast);margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none;opacity:.92}
footer a:hover{opacity:1;text-decoration:underline}
footer .fine{border-top:1px solid rgba(244,234,225,.16);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;opacity:.75}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}

/* forms */
.field{display:grid;gap:6px}
.field label{font-family:var(--round);font-weight:600;font-size:14px}
.field input,.field textarea,.field select{font:inherit;font-size:16px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{border-color:var(--green);outline:none}
.hp{position:absolute;left:-9999px}
.form-msg{font-weight:600;min-height:1.4em}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}