/* ============ TOKENS ============ */
:root{
  --bg:#F3F7F7;
  --surface:#FFFFFF;
  --surface-2:#E7EFEF;
  --ink:#14212A;
  --muted:#4B6167;
  --border:#D7E2E2;
  --tint:#2E6E76;
  --tint-soft:#E3F0F1;
  --repair:#C24E22;
  --repair-ink:#FFFFFF;
  --crack:#9FB4B8;
  --focus:#2E6E76;

  /* fixed (deliberately non-theme) hero band, evokes the tinted band on real glass */
  --hero-bg:#12181B;
  --hero-bg-2:#1B2C2F;
  --hero-ink:#F3F7F7;
  --hero-muted:#9FBEC1;
  --hero-accent:#5CB7C0;
  --hero-cta:#F0895A;
  --hero-cta-ink:#1B120C;

  --display:'Big Shoulders Display',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1315;
    --surface:#171D20;
    --surface-2:#1D2427;
    --ink:#E7EEEF;
    --muted:#93A8AC;
    --border:#2A3336;
    --tint:#5CB7C0;
    --tint-soft:#16292B;
    --repair:#E8804E;
    --repair-ink:#14181B;
    --crack:#3A4A4E;
    --focus:#5CB7C0;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1315;
  --surface:#171D20;
  --surface-2:#1D2427;
  --ink:#E7EEEF;
  --muted:#93A8AC;
  --border:#2A3336;
  --tint:#5CB7C0;
  --tint-soft:#16292B;
  --repair:#E8804E;
  --repair-ink:#14181B;
  --crack:#3A4A4E;
  --focus:#5CB7C0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px;}
.prose{max-width:60ch;}
h1,h2,h3{font-family:var(--display);text-wrap:balance;font-weight:800;letter-spacing:0.01em;margin:0;line-height:1.02;}
h2{font-size:clamp(1.9rem,4vw,2.9rem);text-transform:uppercase;}
h3{font-size:1.25rem;text-transform:uppercase;}
p{margin:0;}
.eyebrow{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tint);font-weight:600;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--repair);display:inline-block;}
section{padding-block:88px;}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px;}
.section-head p{color:var(--muted);font-size:1.05rem;}

/* ============ TOP TINT BAND ============ */
.tint-band{
  position:sticky;top:0;z-index:60;height:5px;width:100%;
  background:linear-gradient(90deg,var(--hero-accent),var(--repair) 55%,var(--hero-accent));
  background-size:200% 100%;
}

/* ============ HEADER ============ */
header{
  position:sticky;top:5px;z-index:55;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:20px;}
.logo{display:flex;flex-direction:column;line-height:1;font-family:var(--display);text-transform:uppercase;}
.logo b{font-size:1.15rem;font-weight:800;letter-spacing:0.01em;}
.logo span{font-size:0.62rem;letter-spacing:0.22em;color:var(--tint);font-weight:600;margin-top:3px;}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:0.92rem;font-weight:500;}
.nav-links a{text-decoration:none;padding-block:4px;border-bottom:2px solid transparent;transition:border-color .15s;}
.nav-links a:hover{border-color:var(--repair);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.phone-link{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;font-size:0.98rem;text-decoration:none;white-space:nowrap;}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:6px;padding:8px;cursor:pointer;color:var(--ink);}

.btn{
  font-family:var(--body);font-weight:600;font-size:0.95rem;border:none;border-radius:3px;
  padding:13px 24px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-repair{background:var(--repair);color:var(--repair-ink);}
.btn-repair:hover{box-shadow:0 6px 20px -6px color-mix(in srgb, var(--repair) 70%, transparent);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--tint);}
.btn-hero{background:var(--hero-cta);color:var(--hero-cta-ink);}
.btn-hero:hover{box-shadow:0 8px 26px -8px color-mix(in srgb, var(--hero-cta) 70%, transparent);}
.btn-hero-ghost{background:transparent;color:var(--hero-ink);border:1.5px solid color-mix(in srgb, var(--hero-ink) 35%, transparent);}
.btn-hero-ghost:hover{border-color:var(--hero-ink);}

/* ============ HERO ============ */
.hero{
  background:radial-gradient(120% 140% at 82% 0%, var(--hero-bg-2), var(--hero-bg) 60%);
  color:var(--hero-ink);position:relative;overflow:hidden;
  padding-block:72px 96px;
}
.hero::after{ /* windshield curve */
  content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:64px;
  background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0;
}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;position:relative;z-index:2;}
.hero-eyebrow{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--hero-accent);font-weight:600;display:flex;align-items:center;gap:10px;}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--hero-cta);box-shadow:0 0 0 4px color-mix(in srgb, var(--hero-cta) 25%, transparent);}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);text-transform:uppercase;margin-top:14px;}
.hero h1 em{font-style:normal;color:var(--hero-accent);}
.hero-sub{color:var(--hero-muted);font-size:1.12rem;max-width:46ch;margin-top:20px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:22px;margin-top:44px;padding-top:28px;border-top:1px solid color-mix(in srgb, var(--hero-ink) 16%, transparent);}
.hero-badge{display:flex;align-items:center;gap:10px;font-size:0.86rem;color:var(--hero-muted);}
.hero-badge svg{color:var(--hero-accent);flex-shrink:0;}

.hero-card{
  background:color-mix(in srgb, var(--hero-bg-2) 60%, black 10%);
  border:1px solid color-mix(in srgb, var(--hero-ink) 14%, transparent);
  border-radius:4px;padding:28px;position:relative;
}
.hero-card .crackmark{position:absolute;top:-1px;right:-1px;width:46px;height:46px;color:var(--hero-cta);opacity:.9;}
.hero-card h3{color:var(--hero-ink);font-size:1.05rem;}
.hero-card p{color:var(--hero-muted);font-size:0.9rem;margin-top:8px;}
.hero-steps{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.hero-steps li{display:flex;gap:12px;align-items:flex-start;font-size:0.92rem;color:var(--hero-ink);}
.hero-steps b{font-family:var(--mono);color:var(--hero-cta);width:22px;flex-shrink:0;}

/* ============ TRUST STRIP ============ */
.trust{background:var(--surface-2);border-bottom:1px solid var(--border);}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-block:0;}
.trust-item{display:flex;align-items:center;gap:12px;padding:22px 18px;border-left:1px solid var(--border);}
.trust-item:first-child{border-left:none;}
.trust-item svg{color:var(--tint);flex-shrink:0;}
.trust-item span{font-size:0.86rem;font-weight:500;line-height:1.3;}

/* ============ CRACK DIVIDER ============ */
.crack-divider{width:100%;height:34px;overflow:visible;}
.crack-divider path{
  fill:none;stroke:var(--crack);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.1s ease;
}
.crack-divider.is-visible path{stroke-dashoffset:0;}

/* ============ SERVICES ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
.svc-card{
  background:var(--surface);padding:30px 26px;position:relative;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.svc-card::before{
  content:"";position:absolute;top:0;right:0;width:26px;height:26px;
  background:linear-gradient(135deg, transparent 48%, var(--repair) 49%, var(--repair) 51%, transparent 52%);
  opacity:.55;
}
.svc-card .icon{color:var(--tint);margin-bottom:18px;}
.svc-card h3{font-size:1.15rem;}
.svc-card p{color:var(--muted);font-size:0.92rem;margin-top:10px;}
.svc-card .tag{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;color:var(--repair);text-transform:uppercase;}

/* ============ HOW IT WORKS ============ */
.how{background:var(--surface-2);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative;}
.how-step{position:relative;padding-left:0;}
.how-num{font-family:var(--mono);font-size:0.85rem;color:var(--repair);font-weight:600;}
.how-step h3{margin-top:10px;font-size:1.2rem;}
.how-step p{color:var(--muted);margin-top:10px;font-size:0.94rem;}
.how-rule{height:2px;background:linear-gradient(90deg,var(--border),var(--repair) 20%,var(--border));margin-bottom:26px;}

/* ============ ESTIMATE TOOL ============ */
.estimate{background:var(--tint);color:#F3F7F7;position:relative;}
.estimate .eyebrow{color:var(--hero-cta);}
.estimate .section-head p{color:color-mix(in srgb, #F3F7F7 78%, transparent);}
.estimate-panel{
  background:color-mix(in srgb, var(--ink) 22%, var(--tint) 78%);
  border:1px solid color-mix(in srgb, white 16%, transparent);
  border-radius:4px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
fieldset{border:none;padding:0;margin:0;}
legend{font-family:var(--mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:0.08em;color:color-mix(in srgb, white 75%, transparent);margin-bottom:12px;padding:0;}
.opt-row{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.opt{
  display:flex;align-items:center;gap:12px;background:color-mix(in srgb, white 8%, transparent);
  border:1px solid color-mix(in srgb, white 16%, transparent);border-radius:3px;padding:12px 14px;cursor:pointer;font-size:0.92rem;
}
.opt:has(input:checked){border-color:var(--hero-cta);background:color-mix(in srgb, var(--hero-cta) 18%, transparent);}
.opt input{accent-color:var(--hero-cta);width:16px;height:16px;}
.field-label{font-family:var(--mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:0.08em;color:color-mix(in srgb, white 75%, transparent);display:block;margin-bottom:8px;}
.zip-input{
  width:100%;padding:13px 14px;border-radius:3px;border:1px solid color-mix(in srgb, white 20%, transparent);
  background:color-mix(in srgb, white 8%, transparent);color:#fff;font-family:var(--body);font-size:1rem;
}
.zip-input::placeholder{color:color-mix(in srgb, white 55%, transparent);}
.estimate-result{display:flex;flex-direction:column;justify-content:center;gap:16px;}
.result-figure{font-family:var(--mono);font-size:clamp(2.1rem,4vw,2.9rem);font-weight:600;font-variant-numeric:tabular-nums;}
.result-figure small{font-size:0.9rem;font-weight:500;color:color-mix(in srgb, white 70%, transparent);display:block;margin-top:6px;font-family:var(--body);}
.result-note{font-size:0.82rem;color:color-mix(in srgb, white 70%, transparent);max-width:36ch;}
.estimate-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.result-idle{color:color-mix(in srgb, white 55%, transparent);font-size:0.95rem;max-width:34ch;}

/* ============ INSURANCE ============ */
.insurance .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;}
.insurance-visual{
  aspect-ratio:4/3;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.insurance-visual svg{width:62%;color:var(--tint);}
.insurance ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.insurance li{display:flex;gap:12px;font-size:0.96rem;}
.insurance li svg{color:var(--repair);flex-shrink:0;margin-top:2px;}
.fine-print{margin-top:22px;font-size:0.8rem;color:var(--muted);}

/* ============ SERVICE AREA ============ */
.area-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.area-col h3{font-size:1rem;display:flex;align-items:center;gap:10px;color:var(--tint);}
.town-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:0.92rem;}
.town-list li{padding-block:8px;border-bottom:1px solid var(--border);}
.area-note{margin-top:28px;font-size:0.92rem;color:var(--muted);}

/* ============ WHY US ============ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);border:1px solid var(--border);}
.why-item{background:var(--surface);padding:26px 28px;display:flex;gap:16px;}
.why-item svg{color:var(--repair);flex-shrink:0;margin-top:3px;}
.why-item h3{font-size:1.02rem;text-transform:none;font-family:var(--body);font-weight:700;}
.why-item p{color:var(--muted);font-size:0.9rem;margin-top:6px;}

/* ============ REVIEWS PLACEHOLDER ============ */
.reviews{background:var(--surface-2);}
.review-shell{
  border:1px dashed var(--border);border-radius:4px;padding:44px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.review-stars{display:flex;gap:6px;color:var(--border);}
.review-shell h3{font-size:1.15rem;}
.review-shell p{color:var(--muted);max-width:46ch;font-size:0.94rem;}

/* ============ REFERRAL / SIGNUP ============ */
.signup{background:var(--surface-2);}
.signup-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:40px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;
}
.signup-panel h3{font-size:1.5rem;text-transform:uppercase;}
.signup-panel p{color:var(--muted);margin-top:12px;font-size:0.96rem;}
.signup-form{display:flex;gap:10px;margin-top:6px;}
.signup-form input{
  flex:1;padding:13px 14px;border-radius:3px;border:1px solid var(--border);
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:0.95rem;
}
.signup-note{font-size:0.78rem;color:var(--muted);margin-top:10px;}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:2px;background:var(--border);border:1px solid var(--border);}
details{background:var(--surface);}
summary{
  list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;
  gap:20px;font-weight:600;font-size:1rem;
}
summary::-webkit-details-marker{display:none;}
summary .chev{color:var(--repair);flex-shrink:0;transition:transform .18s ease;}
details[open] summary .chev{transform:rotate(45deg);}
.faq-a{padding:0 24px 22px;color:var(--muted);max-width:64ch;font-size:0.94rem;}

/* ============ FINAL CTA ============ */
.final-cta{background:var(--hero-bg);color:var(--hero-ink);text-align:center;position:relative;overflow:hidden;}
.final-cta h2{color:var(--hero-ink);}
.final-cta p{color:var(--hero-muted);margin-top:14px;font-size:1.1rem;}
.final-cta .btn-row{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap;}

/* ============ FOOTER ============ */
footer{background:var(--surface);border-top:1px solid var(--border);padding-block:48px 110px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
.foot-logo{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;font-weight:800;}
footer p{color:var(--muted);font-size:0.88rem;margin-top:10px;max-width:34ch;}
.foot-col h4{font-family:var(--mono);font-size:0.74rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin:0 0 14px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:0.9rem;}
.foot-col a{text-decoration:none;}
.foot-col a:hover{color:var(--tint);}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);font-size:0.78rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ============ STICKY MOBILE CALL BAR ============ */
.call-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--repair);color:var(--repair-ink);
  display:none;align-items:center;justify-content:center;gap:10px;padding:15px;font-weight:700;
  text-decoration:none;font-size:1rem;box-shadow:0 -8px 24px -12px rgba(0,0,0,.3);
}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .crack-divider path{transition:none;stroke-dashoffset:0;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .trust .wrap{grid-template-columns:repeat(2,1fr);}
  .trust-item:nth-child(3){border-left:none;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .how-grid{grid-template-columns:1fr;gap:26px;}
  .estimate-panel{grid-template-columns:1fr;}
  .insurance .wrap{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .signup-panel{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
/* Nav collapses to a hamburger earlier than the layout breakpoint above —
   five links plus the phone number and two buttons don't fit in one row
   below ~960px and were wrapping into a jumbled multi-line header. */
@media (max-width:960px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .nav .phone-link span{display:none;}
}
@media (max-width:680px){
  section{padding-block:60px;}
  .services-grid{grid-template-columns:1fr;}
  .trust .wrap{grid-template-columns:1fr 1fr;}
  .area-cols{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:30px;}
  .call-bar{display:flex;}
  body{padding-bottom:0;}
  .final-cta .btn-row{flex-direction:column;align-items:stretch;}
}