:root{
  --brand:#0ea5a6; --brand-dark:#0f766e; --ink:#0f172a; --muted:#475569;
  --bg:#f8fafc; --card:#ffffff; --ring:rgba(14,165,166,.25); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg);line-height:1.5;padding-bottom:76px;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px; margin:auto; padding:24px}

/* Header */
.site-header{background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:28px}
.brand{display:flex; align-items:center; gap:12px; min-width:1024}
.logo{width:200px; height:auto; border-radius:12px}
h1{font-size:30px; margin:0; overflow-wrap:anywhere; word-break:normal; line-height:1.4}
.tagline{margin:4px 0 0; font-size:23px; color:var(--muted); display:block}
nav{position:relative}
.nav{list-style:none; margin:0; padding:0; display:flex; gap:12px; align-items:center}
.nav a{padding:8px 10px; border-radius:10px}
.btn{display:inline-block; padding:12px 20px; border-radius:12px; text-decoration:none; background:var(--brand); color:#fff; font-weight:600; box-shadow:0 6px 20px rgba(14,165,166,.25); transition:transform .05s ease, background .2s ease; max-width:100%;}
.btn:hover{background:var(--brand-dark)} .btn:active{transform:translateY(1px)} .btn-outline{background:#fff; color:var(--brand); border:1px solid #e5e7eb} .btn-full{width:100%}
.nav .btn {
  white-space: nowrap;   /* keeps the text on one line */
  padding: 12px 24px;    /* adds more space left/right so it doesn’t wrap */
}

/* Hero */
.hero{background:linear-gradient( to right, #ecfeff, #f0fdfa); border-bottom:1px solid #e5e7eb}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero h2{font-size:clamp(26px,5vw,40px); margin:0 0 10px}
.hero p{margin:0 0 12px; color:var(--muted)}
.hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}
.hero-points{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hero-points li{padding-left:10px; border-left:3px solid var(--brand); background:#fff; border-radius:8px; padding:8px 10px}

/* Fast Quote required stars */
#fast-quote .req{color:#c22;font-weight:600;margin-left:.2rem}

/* Optional address layout (keeps with your existing grid) */
#fast-quote fieldset.addr{border:1px solid #e6e6e6;border-radius:8px;padding:12px}
#fast-quote fieldset.addr > legend{padding:0 .4rem;font-weight:600}
#fast-quote .addr-grid{display:grid;grid-template-columns:1fr 110px 110px;gap:.75rem}
@media (max-width:640px){#fast-quote .addr-grid{grid-template-columns:1fr 1fr}}


/* Sections */
.section h2{font-size:28px; margin:0 0 12px}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); box-shadow:0 6px 22px rgba(2,6,23,.06); padding:18px}
.muted{color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.services .service{grid-column:span 4}

/* Contact form */
.contact-form label{display:block; font-weight:600; margin-top:10px}
.contact-form input, .contact-form textarea{width:100%; padding:12px; border:1px solid #e5e7eb; border-radius:10px; outline:none; background:#fff; font-size:16px}
.contact-form input:focus, .contact-form textarea:focus{box-shadow:0 0 0 4px var(--ring)}

/* Footer */
.site-footer{background:#fff; border-top:1px solid #e5e7eb} .site-footer p{margin:0; text-align:center}

/* Sticky call bar */
.cta-strip{position:fixed; left:0; right:0; bottom:0; background:#0b3b39; color:#fff; z-index:60; border-top:1px solid #0a2f2d}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px}
.cta-buttons{display:flex; gap:8px; flex-wrap:wrap}
.cta-inner .btn{background:#fff; color:#0b3b39; box-shadow:none} .cta-inner .btn:hover{background:#e6fffb}

/* Toast */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:-80px; background:#10b981; color:#fff; font-weight:600; padding:14px 20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:9999; transition:bottom .5s ease}
.toast.show{bottom:30px}

/* --- Mobile header: hamburger menu --- */
.menu-toggle{
  display:none; align-items:center; justify-content:center; gap:8px;
  border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:8px 15px;
  font-weight:600; cursor:pointer;
}
.menu-toggle svg{width:20px;height:22px;flex:none}
.menu-backdrop{display:none}

@media (max-width: 900px){
  /* Stack hero into one column to avoid layout wider than viewport */
  .hero-inner{grid-template-columns:1fr}
}

@media (max-width: 700px){
  /* Header full width & safe-areas */
  .site-header,
  .site-header .container,
  .header-inner{
    max-width:100% !important;
    width:100% !important;
    margin:0 !important;
  }
  .site-header{box-shadow:0 2px 10px rgba(0,0,0,.04)}
  .site-header .container{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
  .container{padding:14px}
  .header-inner{gap:10px}
  .logo{width:80px}
  h1{font-size:clamp(16px, 4.4vw, 20px)}
  .tagline{display:block; font-size:11px; line-height:1.3}
  .menu-toggle{display:inline-flex}
  /* Turn nav into a dropdown sheet */
  nav{
    position:fixed; left:12px; right:18px; top:100px;
    max-width:calc(100vw - 24px);
    background:#fff; border:1px solid #e5e7eb; border-radius:16px;
    box-shadow:0 12px 28px rgba(2,6,23,.18);
    display:none;
  }
  nav.open{display:block}
  .nav{flex-direction:column; align-items:stretch; gap:0}
  .nav li{border-bottom:1px solid #f1f5f9}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block; padding:14px 18px; font-size:16px}
}

@media (max-width: 420px){
  .logo{width:80px}
  .header-inner{gap:8px}
  .nav a{padding:12px 12px; font-size:15px}
}
@media (max-width: 360px){
  .nav a{font-size:14px}
}
@media (max-width:900px){
  .services .service{grid-column:span 12}
}

/* --- Desktop form layout fixes --- */
.quote-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:1024px){
  .quote-card{max-width:520px;margin-left:auto}
  .quote-grid{grid-template-columns:1fr 1fr}
  .quote-grid .full{grid-column:1 / -1}
}

/* === Offset in-page anchors for sticky header === */
[id] { scroll-margin-top: 255px; }      /* desktop/header height */
@media (max-width: 700px){
  [id] { scroll-margin-top: 135px; }    /* mobile/header height */
}

/* === Stack hero and center the Fast Quote card === */
.hero-inner{display:block}
.hero-inner > div{margin-bottom:24px}
.quote-card{width:100%;max-width:800px;margin:0 auto}

/* === Before & After Gallery === */
.ba-section{padding:24px 0}
.ba-section h2{font-size:28px; margin:0 0 12px}
.ba-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}
.ba-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 22px rgba(2,6,23,.06);
  overflow:hidden;
}
.ba-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
@media (max-width:560px){
  .ba-pair{grid-template-columns:1fr}
}
.ba-imgwrap{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
}
.ba-imgwrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ba-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(15,23,42,.85);
  color:#fff; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px;
  letter-spacing:.3px;
}
.ba-caption{padding:10px 12px; color:#475569; font-size:14px}