:root{
  --paper:#FCFBF9;
  --paper-2:#F4F1EC;
  --ink:#14161A;
  --ink-soft:#3C434C;
  --muted:#6B7480;
  --line:#E3DFD8;
  --amber:#E0890F;
  --amber-ink:#8A4E05;
  --glass:#101922;
  --radius:14px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
em.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(252,251,249,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{text-decoration:none;font-weight:800;font-size:17.5px;letter-spacing:-.02em;line-height:1.1;margin-right:auto;display:flex;align-items:center;gap:10px}
.brand .dot{width:26px;height:26px;border-radius:7px;background:var(--glass);position:relative;flex:none}
.brand .dot::after{content:"";position:absolute;left:4px;right:4px;top:5px;height:7px;border-radius:2px;background:var(--amber)}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.nav .links{display:none;gap:22px}
.nav .links a{text-decoration:none;color:var(--muted);font-size:15.5px;font-weight:500}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
@media(min-width:860px){.nav .links{display:flex}}
.nav-call{text-decoration:none;font-weight:700;font-size:15.5px;background:var(--ink);color:var(--paper);padding:11px 17px;border-radius:999px;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:17px;padding:16px 26px;border-radius:999px;border:1px solid transparent;text-align:center}
.btn-amber{background:var(--amber);color:#1A1104}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{padding:54px 0 10px}
h1{
  font-size:clamp(38px,7.4vw,70px);line-height:1.02;letter-spacing:-.035em;font-weight:800;
  margin:0 0 18px;max-width:14ch;text-wrap:balance;
}
.hero .lead{font-size:clamp(17px,2.2vw,20.5px);color:var(--ink-soft);max-width:48ch;margin:0 0 26px}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;color:var(--muted);font-size:14.5px;align-items:center}
.trust b{color:var(--ink)}
.stars{color:var(--amber);letter-spacing:.06em}

/* ---------- tint demo ---------- */
.demo{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.demo-top{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.demo-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.legal{font-size:13.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.legal.ok{background:#E8F3EA;color:#1F6B37}
.legal.no{background:#FBE9E7;color:#A33224}
.glassbox{position:relative;aspect-ratio:16/8;background:
  linear-gradient(180deg,#7FB2D6 0%, #A9C9E0 42%, #CBD9C4 60%, #8EA37F 100%);
}
.glassbox .road{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#9AA394,#6F7A68)}
.glassbox .sun{position:absolute;right:11%;top:14%;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,#FFF2CF 0%, #FFD477 55%, rgba(255,212,119,0) 72%)}
.glassbox .tint{position:absolute;inset:0;background:#0B1016;opacity:.35;transition:opacity .18s linear}
.glassbox .frame{position:absolute;inset:0;border:14px solid #1B1F25;border-radius:4px;pointer-events:none}
.glassbox .pct{position:absolute;left:24px;bottom:20px;color:#fff;font-weight:800;font-size:clamp(26px,5vw,38px);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.demo-bottom{padding:18px}
input[type=range]{width:100%;accent-color:var(--amber);height:34px}
.ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:-4px}
.demo-note{margin:10px 0 0;color:var(--muted);font-size:14.5px}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-tag{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-ink);font-weight:700;margin:0 0 12px}
h2{font-size:clamp(28px,4.6vw,44px);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 14px;max-width:18ch;text-wrap:balance}
h3{font-size:20px;letter-spacing:-.015em;font-weight:700;margin:0 0 8px}
.sub{color:var(--ink-soft);max-width:58ch;margin:0 0 34px;font-size:17px}

.cards{display:grid;gap:16px}
@media(min-width:720px){.cards.c-3{grid-template-columns:repeat(3,1fr)}.cards.c-2{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.62}
.card .ico{width:38px;height:38px;border-radius:10px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card .ico svg{width:20px;height:20px}

.band{background:var(--glass);color:#F2EFE9}
.band h2{color:#fff}
.band .sub{color:#AFB7C0}
.band .section-tag{color:var(--amber)}
.steps{display:grid;gap:14px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px 22px;background:rgba(255,255,255,.03)}
.step .n{width:30px;height:30px;border-radius:999px;background:var(--amber);color:#1A1104;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:14px}
.step h3{color:#fff}
.step p{margin:0;color:#AFB7C0;font-size:15.5px}

.law{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:16px}
.law th,.law td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.law th{background:var(--paper-2);font-weight:700;font-size:15.5px}
.law tr:last-child td{border-bottom:0}
.law td:last-child{font-weight:700}

details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0;margin-bottom:10px}
summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-weight:600;font-size:22px;line-height:1}
details[open] summary::after{content:"\2013"}
details .body{padding:0 22px 20px;color:var(--ink-soft);font-size:16px}

.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;display:grid;gap:6px}
.review .score{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}

form{display:grid;gap:14px;max-width:540px}
label{display:grid;gap:7px;font-size:14.5px;color:var(--muted);font-weight:600}
input[type=text],input[type=tel],input[type=email],textarea{
  font-family:inherit;font-size:16.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:14px 15px;width:100%;font-weight:400;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
button.send{font-family:inherit;font-weight:700;font-size:17px;background:var(--amber);color:#1A1104;border:0;border-radius:999px;padding:16px 28px;cursor:pointer;justify-self:start}
.done{display:none;border:1px solid var(--amber);background:#FFF6E8;border-radius:var(--radius);padding:18px 20px}
.done.on{display:block}

.hours{width:100%;border-collapse:collapse;font-size:16px}
.hours td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.hours td:last-child{text-align:right;color:var(--ink);font-weight:600}
.hours tr:last-child td{border-bottom:0}
.phone-xl{font-size:clamp(30px,5.4vw,42px);font-weight:800;letter-spacing:-.03em;text-decoration:none;display:inline-block;margin:4px 0 10px}

footer{border-top:1px solid var(--line);padding:40px 0 110px;color:var(--muted);font-size:15px}
@media(min-width:860px){footer{padding-bottom:50px}}
footer .cols{display:grid;gap:22px}
@media(min-width:720px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{text-decoration:underline}
footer h4{font-size:14px;margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}

/* mobile sticky call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(252,251,249,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:10px}
.callbar a{flex:1;padding:14px 10px;font-size:16px}
@media(min-width:860px){.callbar{display:none}}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap > *{animation:fade .6s cubic-bezier(.2,.7,.3,1) both}
  .hero .lead{animation-delay:.06s}
  @keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}