/*
Theme Name: Lake Point Exteriors
Theme URI: https://lakepointexteriors.com
Author: Lake Point Exteriors
Author URI: https://lakepointexteriors.com
Description: Custom WordPress theme for Lake Point Exteriors — GAF Certified exterior contractor serving Chicago to Milwaukee.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lakepointext
*/

/* ---------- CSS Variables ---------- */
:root{
  --navy:#061829;
  --navy-2:#0b2338;
  --navy-3:#13324d;
  --blue:#2563EB;
  --blue-hover:#1d4fd1;
  --orange:#E8720C;
  --orange-hover:#cf6308;
  --ink:#0b1524;
  --ink-2:#36465a;
  --muted:#61708a;
  --line:#e4e8ef;
  --bg:#f8f9fa;
  --white:#ffffff;
  --green:#22c55e;
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:'Manrope', system-ui, sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Manrope',sans-serif;margin:0;letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1920px;margin:0 auto}
.inner{max-width:1600px;margin:0 auto;padding:0 48px}

/* ---------- Topbar ---------- */
.topbar{overflow:hidden;
  background:var(--navy);
  color:#c9d4e3;
  font-size:13px;
  font-weight:500;
}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:40px}
.topbar .left{display:flex;align-items:center;gap:10px}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.topbar .sep{opacity:.45;margin:0 8px}
.topbar a.mail{color:#dbe4f0;display:inline-flex;align-items:center;gap:8px}
.topbar a.mail:hover{color:#fff}

/* ---------- Nav ---------- */
.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.nav .inner{display:flex;align-items:center;height:76px;gap:40px;overflow:visible}
.logo{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.logo-mark{
  width:80px;height:80px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),#1e3a8a);
  position:relative;display:grid;place-items:center;color:#fff;
}
.logo-mark svg{display:block}
.logo-img{width:60px;height:60px;border-radius:8px;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:8px}
.nav-links a, .nav-links .drop{
  font-size:14.5px;font-weight:600;color:#26364d;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 2px;
  transition:color .15s ease;
}
.nav-links a:hover,.nav-links .drop:hover,.nav-links a.active{color:var(--blue)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;
  padding:11px 18px;border-radius:10px;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 1px 2px rgba(232,114,12,.25)}
.btn-orange:hover{background:var(--orange-hover)}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-ghost:hover{border-color:#c9d3e1;background:#f7f9fc}
.btn-outline-dark{background:transparent;color:var(--navy);border:1px solid #c9d3e1}
.btn-outline-dark:hover{background:#f2f5f9}
.btn-outline-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-outline-white:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn-lg{padding:14px 22px;font-size:15.5px;border-radius:11px}

/* ---------- Services Dropdown ---------- */
.dropdown{position:relative}
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--white);
  border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
  padding:8px 0;
  min-width:220px;
  z-index:1000;
  border:1px solid var(--line);
}
.dropdown-menu a{
  display:block;
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:background .15s,color .15s;
}
.dropdown-menu a:hover{
  background:var(--bg);
  color:var(--blue);
}
.dropdown.open .dropdown-menu{display:block}
.dropdown.open .caret{transform:rotate(180deg)}

.caret{width:12px;height:12px}

/* ---------- Hero (Homepage) ---------- */
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero .inner{padding-top:72px;padding-bottom:96px;display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;
  color:var(--blue);text-transform:uppercase;
  margin-bottom:22px;
}
.eyebrow .mid{width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.6}
h1.hero-title{
  font-size:64px;line-height:1.04;font-weight:600;
  letter-spacing:-.03em;color:var(--navy);
  margin-bottom:24px;
  text-wrap:balance;
}
h1.hero-title .accent{color:var(--blue);display:block}
.hero p.lede{
  font-size:18px;line-height:1.6;color:var(--ink-2);
  max-width:560px;margin:0 0 36px;
}
.hero-ctas{display:flex;gap:12px;margin-bottom:40px}
.trust-row{display:flex;flex-wrap:wrap;gap:22px 28px;color:#2a394f;font-size:14px;font-weight:600}
.trust-row .item{display:inline-flex;align-items:center;gap:8px}
.check{
  width:18px;height:18px;border-radius:50%;background:#e6f0ff;
  color:var(--blue);display:grid;place-items:center;flex:none;
}
.check svg{width:11px;height:11px}

/* hero image */
.hero-visual{position:relative}
.hero-photo{
  width:560px;height:620px;border-radius:18px;overflow:hidden;
  background:#d6dde6;
  box-shadow:0 22px 60px -18px rgba(6,24,41,.35), 0 2px 6px rgba(6,24,41,.08);
  position:relative;
}
.hero-photo .ph-img{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,24,41,0) 55%, rgba(6,24,41,.35) 100%),
    repeating-linear-gradient(135deg,#9aa7b5 0 2px,#8c99a8 2px 4px),
    linear-gradient(180deg,#b9c3cf,#7d8b9e);
}
.hero-photo svg.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo-label{
  position:absolute;left:16px;bottom:16px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11px;color:#fff;background:rgba(6,24,41,.55);
  padding:6px 10px;border-radius:6px;letter-spacing:.02em;
}

.badge-card{
  position:absolute;top:20px;left:20px;
  background:#fff;border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(6,24,41,.15);
  border:1px solid rgba(255,255,255,.8);
}
.badge-card .bc-mark{
  width:40px;height:40px;border-radius:8px;background:#0c3b7a;color:#fff;
  display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;
}
.badge-card .bc-t{font-size:13px;font-weight:700;color:var(--navy);line-height:1.15;white-space:nowrap}
.badge-card .bc-s{font-size:11.5px;color:var(--muted)}

.stats-bar{
  position:absolute;left:20px;right:20px;bottom:20px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-radius:12px;padding:14px 18px;
  display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 8px 24px rgba(6,24,41,.18);
}
.stats-bar .s{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.stats-bar .s + .s{border-left:1px solid #e6ebf2}
.stats-bar .s .v{font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--navy);letter-spacing:-.01em}
.stats-bar .s .l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Trust strip ---------- */
.trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.trust-strip .inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.trust-strip .label{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:#f2f5f9;border:1px solid #e4e8ef;
  font-size:13.5px;font-weight:600;color:#25344b;
}
.pill .sq{width:8px;height:8px;border-radius:2px;background:var(--blue)}
.pill.alt .sq{background:#0ea5e9}
.pill.a .sq{background:#ef4444}
.pill.b .sq{background:#059669}
.pill.c .sq{background:#a16207}

/* ---------- Services ---------- */
.services{background:var(--navy);color:#e7eef8;padding:96px 0 110px}
.services .head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.services h2{font-size:48px;line-height:1.08;color:#fff;letter-spacing:-.025em;font-weight:600;max-width:640px}
.services .head p{color:#a9b7cb;max-width:380px;margin:0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;color:var(--ink);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:18px;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;min-height:280px;
}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(0,0,0,.35);border-color:#dbe3ee}
.card .cat{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.card .icon{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:#eef3ff;color:var(--blue);
}
.card h3{font-size:22px;font-weight:600;letter-spacing:-.015em}
.card p{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.55}
.card .more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--blue);
}
.card .more .arrow{transition:transform .18s ease}
.card:hover .more .arrow{transform:translateX(3px)}

/* per-category accents */
.card.c-residential .cat{color:#2563EB}
.card.c-residential .icon{background:#eaf1ff;color:#2563EB}
.card.c-commercial .cat{color:#0ea5e9}
.card.c-commercial .icon{background:#e4f4fd;color:#0ea5e9}
.card.c-siding .cat{color:#059669}
.card.c-siding .icon{background:#e4f6ef;color:#059669}
.card.c-gutters .cat{color:#a16207}
.card.c-gutters .icon{background:#fbf0dc;color:#a16207}
.card.c-storm .cat{color:#dc2626}
.card.c-storm .icon{background:#fce8e8;color:#dc2626}
.card.c-insurance .cat{color:#7c3aed}
.card.c-insurance .icon{background:#efe6fd;color:#7c3aed}

/* ---------- Section chrome shared ---------- */
.section{padding:104px 0}
.section.dark{background:var(--navy);color:#e7eef8}
.section.light{background:#fff}
.section.soft{background:var(--bg)}
.section h2.title{
  font-size:46px;line-height:1.1;letter-spacing:-.025em;font-weight:600;
  max-width:720px;margin:0 0 20px;
}
.section.dark h2.title{color:#fff}
.section.dark h2.title .accent{color:var(--blue)}
.section .lede-sub{
  font-size:17px;line-height:1.6;color:var(--ink-2);max-width:620px;margin:0;
}
.section.dark .lede-sub{color:#a9b7cb}
.pill-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  background:#eaf1ff;color:var(--blue);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:20px;
}
.section.dark .pill-eyebrow{background:rgba(37,99,235,.15);color:#8ab0ff}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue);font-weight:700;font-size:14.5px;
}
.section.dark .link-arrow{color:#8ab0ff}
.link-arrow:hover{color:var(--blue-hover)}

/* ---------- Certifications ---------- */
.cert-grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:72px;align-items:center;margin-top:8px}
.track-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:22px 24px;margin-top:16px;
  display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start;
}
.track-num{
  font-family:'Bricolage Grotesque';font-weight:600;font-size:12px;
  letter-spacing:.12em;color:#8ab0ff;text-transform:uppercase;padding-top:2px;line-height:1.5;
}
.track-card h4{font-size:18px;color:#fff;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;font-family:'Bricolage Grotesque'}
.track-card p{margin:0;color:#a9b7cb;font-size:14.5px;line-height:1.55}
.cert-cta{margin-top:26px}

.cert-photo{
  width:520px;height:520px;border-radius:18px;overflow:hidden;
  position:relative;
  background:
    linear-gradient(180deg,rgba(6,24,41,0) 60%,rgba(6,24,41,.35) 100%),
    repeating-linear-gradient(45deg,#b5c0cd 0 2px,#a2adbb 2px 4px),
    linear-gradient(180deg,#c4cdd8,#8a97a8);
  box-shadow:0 22px 60px -18px rgba(0,0,0,.45);
}
.cert-photo .photo-label{background:rgba(6,24,41,.55)}
.installer-badge{
  position:absolute;right:20px;bottom:20px;
  background:#fff;border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.installer-badge .ib-mark{
  width:44px;height:44px;border-radius:50%;background:#0c3b7a;color:#fff;
  display:grid;place-items:center;font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;
}
.installer-badge .ib-t{font-size:14px;font-weight:700;color:var(--navy);line-height:1.15}
.installer-badge .ib-s{font-size:11.5px;color:var(--muted)}

/* ---------- Why 4 reasons ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.why-item .n{
  font-family:'Bricolage Grotesque';font-size:14px;font-weight:700;
  letter-spacing:.12em;color:var(--blue);margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.why-item h4{
  font-family:'Bricolage Grotesque';font-size:20px;font-weight:600;
  letter-spacing:-.015em;color:var(--navy);margin:0 0 10px;line-height:1.2;
}
.why-item p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* ---------- Process timeline ---------- */
.steps{position:relative;margin-top:56px}
.steps::before{
  content:"";position:absolute;top:26px;left:7%;right:7%;
  border-top:2px dashed #d6dfea;
}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.step .dot{
  width:54px;height:54px;border-radius:50%;background:#fff;
  border:2px solid var(--blue);display:grid;place-items:center;
  font-family:'Bricolage Grotesque';font-weight:700;font-size:18px;color:var(--blue);
  margin-bottom:22px;position:relative;z-index:1;
}
.step h4{
  font-family:'Bricolage Grotesque';font-size:20px;font-weight:600;
  letter-spacing:-.015em;color:var(--navy);margin:0 0 8px;
}
.step p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:260px}

/* ---------- Service area ---------- */
.area-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:end;margin-bottom:44px}
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.city-pill{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#e7eef8;font-size:14.5px;font-weight:600;
  transition:background .15s ease, border-color .15s ease;
}
.city-pill:hover{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.35)}
.city-pill .pin{
  width:18px;height:18px;border-radius:50%;background:rgba(37,99,235,.18);
  display:grid;place-items:center;color:#8ab0ff;flex:none;
}
.city-pill .pin svg{width:10px;height:10px}
.area-link{margin-top:36px}

/* ---------- Dispatch CTA ---------- */
.dispatch{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:88px 0;
}
.dispatch::before{
  content:"";position:absolute;inset:0;opacity:.18;
  background:
    linear-gradient(180deg,rgba(6,24,41,.7) 0%,rgba(6,24,41,.92) 100%),
    repeating-linear-gradient(135deg,#3a4a5d 0 2px,#2a3848 2px 5px);
}
.dispatch .inner{position:relative;text-align:center}
.dispatch h2{
  font-family:'Bricolage Grotesque';font-size:52px;line-height:1.08;
  letter-spacing:-.025em;font-weight:600;color:#fff;margin:0 0 18px;
}
.dispatch p{font-size:17.5px;line-height:1.6;color:#b8c4d6;max-width:640px;margin:0 auto 32px}
.dispatch .ctas{display:flex;justify-content:center;gap:12px}

/* ---------- Page Hero (subpages) ---------- */
.page-hero{background:var(--bg);padding:56px 0 88px;border-bottom:1px solid var(--line)}
.page-hero .inner{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:center}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:20px}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.6}
.breadcrumb .cur{color:var(--navy)}
h1.page-title{font-size:60px;line-height:1.04;font-weight:600;letter-spacing:-.03em;color:var(--navy);margin-bottom:18px}
.page-hero .sub{font-size:19px;color:var(--ink-2);font-weight:600;margin:0 0 14px}
.page-hero .desc{font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:560px;margin:0 0 32px}
.page-hero .ctas{display:flex;gap:12px}
.page-hero .photo{width:560px;height:540px;border-radius:18px;overflow:hidden;position:relative;
  background:
    linear-gradient(180deg,rgba(6,24,41,0) 55%,rgba(6,24,41,.35) 100%),
    repeating-linear-gradient(135deg,#9aa7b5 0 2px,#8c99a8 2px 4px),
    linear-gradient(180deg,#b9c3cf,#7d8b9e);
  box-shadow:0 22px 60px -18px rgba(6,24,41,.35)}

/* ---------- Subpage section overrides ---------- */
h2.title{font-size:44px;line-height:1.1;letter-spacing:-.025em;font-weight:600;margin:0 0 18px;color:var(--navy);max-width:720px}
.section.dark h2.title{color:#fff}
h2.title .accent{color:var(--blue);display:block}
.lede-sub{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:680px;margin:0}
.section.dark .lede-sub{color:#a9b7cb}

/* ---------- Proper grid / Check list ---------- */
.proper-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;margin-top:36px}
.proper-grid p.body{font-size:16px;color:var(--ink-2);line-height:1.75;margin:0}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:15px;color:var(--ink);font-weight:500;line-height:1.5}
.check-list li .cc{width:22px;height:22px;border-radius:50%;background:#e6f0ff;color:var(--blue);display:grid;place-items:center;flex:none;margin-top:1px}
.check-list li .cc svg{width:13px;height:13px}

/* ---------- Materials ---------- */
.materials-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px;flex-wrap:wrap}
.materials-head .right{color:var(--ink-2);max-width:380px;font-size:16px}
.materials-head .right strong{color:var(--navy);font-family:'Bricolage Grotesque';font-weight:600;font-size:20px;letter-spacing:-.01em;display:block;margin-bottom:6px}
.mats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-height:220px}
.mat-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25);border-color:#dbe3ee}
.mat-card .cat{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.mat-card h3{font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--navy)}
.mat-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.mat-card .icon{width:42px;height:42px;border-radius:10px;background:#eef3ff;color:var(--blue);display:grid;place-items:center}

/* ---------- Warranty ---------- */
.warranty-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.war-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px 30px}
.war-card .tag{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8ab0ff;margin-bottom:14px}
.war-card h3{font-family:'Bricolage Grotesque';font-size:26px;font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 10px}
.war-card p{margin:0 0 18px;color:#a9b7cb;font-size:15px;line-height:1.6}
.war-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.war-card ul li{color:#cfd8e6;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.war-card ul li::before{content:"";width:5px;height:5px;background:#8ab0ff;border-radius:50%;margin-top:8px;flex:none}
.war-cta{margin-top:36px}

/* ---------- FAQ ---------- */
.faq-list{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s ease}
.faq:hover{border-color:#c9d3e1}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Bricolage Grotesque';font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:28px;height:28px;border-radius:50%;background:#f2f5f9;color:var(--navy);display:grid;place-items:center;flex:none;transition:transform .2s ease,background .2s ease}
.faq[open] summary .plus{transform:rotate(45deg);background:#eaf1ff;color:var(--blue)}
.faq .body{padding:0 24px 22px;color:var(--ink-2);font-size:15px;line-height:1.7;max-width:860px}

/* ---------- Related ---------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.rel-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25);border-color:#dbe3ee}
.rel-card .icon{width:42px;height:42px;border-radius:10px;background:#eef3ff;color:var(--blue);display:grid;place-items:center}
.rel-card h3{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--navy)}
.rel-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.rel-card .more{margin-top:auto;padding-top:10px;color:var(--blue);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}

/* ---------- Footer ---------- */
/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-info{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.ci-row{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px}
.ci-row svg{flex:none;color:var(--blue)}
.ci-row a{color:var(--blue);font-weight:500}
.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:13.5px;font-weight:600;color:var(--ink);font-family:'Bricolage Grotesque'}
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;
  font-family:'Manrope',sans-serif;color:var(--ink);background:#fff;
  transition:border-color .15s ease;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-field textarea{resize:vertical}
.contact-form .btn{align-self:flex-start}

.footer{background:#040f1c;color:#a9b7cb;padding:72px 0 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px}
.footer .fcol h5{
  font-family:'Bricolage Grotesque';font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8ea0ba;margin:0 0 18px;font-weight:700;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer ul a{color:#cfd8e6;font-size:14.5px}
.footer ul a:hover{color:#fff}
.footer .logo{color:#fff;margin-bottom:18px}
.footer .about{font-size:14px;line-height:1.65;color:#a9b7cb;max-width:380px;margin:0 0 22px}
.socials{display:flex;gap:10px}
.socials a{
  width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.06);
  display:grid;place-items:center;color:#cfd8e6;
  transition:background .15s ease,color .15s ease;
}
.socials a:hover{background:var(--blue);color:#fff}
.footer .office li{display:flex;gap:10px;color:#cfd8e6;font-size:14px;align-items:flex-start}
.footer .office li svg{flex:none;margin-top:3px;color:#8ea0ba}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;
  color:#7e8ea6;font-size:13px;
}
.footer-bottom .certs{display:flex;gap:16px;align-items:center}
.footer-bottom .certs span + span::before{content:"\00B7";margin-right:16px;color:#3a4a5d}

/* ---------- Hamburger ---------- */
.hamburger{
  display:none;margin-left:auto;width:42px;height:42px;border-radius:10px;
  background:#f2f5f9;border:1px solid var(--line);
  align-items:center;justify-content:center;color:var(--navy);
}
.hamburger svg{width:20px;height:20px}
.mobile-menu{display:none;background:#fff;border-top:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu .mm-inner{padding:18px 24px 24px;display:flex;flex-direction:column;gap:4px}
.mobile-menu a, .mobile-menu .mm-item{
  padding:14px 6px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:600;color:#26364d;display:block;
}
.mobile-menu .mm-ctas{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mobile-menu .mm-ctas .btn{justify-content:center;width:100%}

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width:1024px){
  .inner{padding:0 32px}
  .hero .inner{grid-template-columns:1fr;gap:48px;padding-top:56px;padding-bottom:72px}
  .hero-visual{max-width:100%}
  .hero-photo{width:100%;max-width:560px;height:520px;margin:0 auto}
  h1.hero-title{font-size:52px}
  .cert-grid{grid-template-columns:1fr;gap:40px}
  .cert-photo{width:100%;max-width:560px;height:460px;margin:0 auto}
  .why-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .services h2{font-size:40px}
  .section h2.title{font-size:38px}
  h2.title{font-size:36px}
  .area-head{grid-template-columns:1fr;gap:20px}
  .cities{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .section{padding:80px 0}

  /* subpage tablet */
  .page-hero .inner{grid-template-columns:1fr;gap:48px}
  .page-hero .photo{width:100%;max-width:560px;height:460px;margin:0 auto}
  h1.page-title{font-size:48px}
  .proper-grid{grid-template-columns:1fr;gap:32px}
  .mats-grid{grid-template-columns:repeat(2,1fr)}
  .warranty-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Mobile (<=768px) ---------- */
@media (max-width:768px){
  .inner{padding:0 20px}
  .topbar{font-size:12px}
  .topbar .inner{height:auto;min-height:40px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px}
  .topbar .left{flex-wrap:wrap;gap:6px}
  .topbar a.mail{display:none}
  .nav .inner{height:64px;gap:12px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:inline-flex}
  .logo{font-size:13px}
  .logo-mark{width:70px;height:70px}.logo-img{width:50px!important;height:50px!important}

  .hero .inner{padding-top:40px;padding-bottom:56px;gap:36px}
  h1.hero-title{font-size:36px;line-height:1.08}
  .hero p.lede{font-size:16px}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px}
  .hero-ctas .btn{justify-content:center;width:100%}
  .trust-row{gap:12px 18px;font-size:13px}
  .hero-photo{height:420px;border-radius:14px}
  .badge-card{top:14px;left:14px;padding:10px 12px;gap:10px}
  .badge-card .bc-mark{width:34px;height:34px;font-size:14px}
  .badge-card .bc-t{font-size:12px}
  .badge-card .bc-s{font-size:10.5px}
  .stats-bar{left:12px;right:12px;bottom:12px;padding:12px}
  .stats-bar .s .v{font-size:15px}
  .stats-bar .s .l{font-size:10px}

  .trust-strip .inner{gap:12px}
  .pill{font-size:12.5px;padding:7px 12px}

  .services{padding:64px 0 72px}
  .services .head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .services h2{font-size:32px}
  .service-grid{grid-template-columns:1fr;gap:14px}
  .card{min-height:0;padding:22px}
  .card h3{font-size:20px}

  .section{padding:64px 0}
  .section h2.title{font-size:30px;line-height:1.12}
  h2.title{font-size:30px;line-height:1.12}
  .section .lede-sub{font-size:15.5px}
  .lede-sub{font-size:15.5px}

  .track-card{grid-template-columns:1fr;gap:8px;padding:18px 18px}
  .cert-photo{height:360px}
  .installer-badge{right:12px;bottom:12px;padding:10px 12px}
  .installer-badge .ib-mark{width:36px;height:36px;font-size:15px}

  .why-grid{grid-template-columns:1fr;gap:28px;margin-top:36px}

  .steps::before{display:none}
  .steps-grid{grid-template-columns:1fr;gap:28px}
  .step .dot{width:44px;height:44px;font-size:16px;margin-bottom:14px}
  .step p{max-width:none}

  .cities{grid-template-columns:repeat(2,1fr);gap:10px}
  .city-pill{padding:12px 12px;font-size:13.5px}

  .dispatch{padding:64px 0}
  .dispatch h2{font-size:34px}
  .dispatch p{font-size:15.5px}
  .dispatch .ctas{flex-direction:column;gap:10px}
  .dispatch .ctas .btn{justify-content:center;width:100%}

  /* subpage mobile */
  .page-hero{padding:40px 0 56px}
  h1.page-title{font-size:36px;line-height:1.08}
  .page-hero .sub{font-size:17px}
  .page-hero .desc{font-size:15.5px}
  .page-hero .ctas{flex-direction:column;align-items:stretch;gap:10px}
  .page-hero .ctas .btn{justify-content:center;width:100%}
  .page-hero .photo{height:380px}

  .mats-grid{grid-template-columns:1fr;gap:14px}
  .materials-head{flex-direction:column;align-items:flex-start;gap:16px}
  .materials-head .right{max-width:none}

  .warranty-grid{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .war-card{padding:24px}
  .war-card h3{font-size:22px}

  .faq summary{padding:16px 18px;font-size:16px}
  .faq .body{padding:0 18px 18px;font-size:14.5px}

  .related-grid{grid-template-columns:1fr;gap:14px}

  
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .form-row{grid-template-columns:1fr;gap:14px}
  .contact-form{gap:14px}
  .form-field input,.form-field select,.form-field textarea{width:100%;box-sizing:border-box}
  .contact-form .btn{width:100%;justify-content:center}
  .footer{padding:56px 0 0}
  .footer-grid{grid-template-columns:1fr;gap:36px;padding-bottom:40px}
  .footer-bottom{flex-direction:column;gap:10px;align-items:flex-start;text-align:left}
  .footer-bottom .certs{flex-wrap:wrap;gap:8px}
  .footer-bottom .certs span + span::before{margin-right:8px}
}

@media (max-width:420px){
  h1.hero-title{font-size:32px}
  .section h2.title{font-size:26px}
  h2.title{font-size:26px}
  .services h2{font-size:28px}
  .dispatch h2{font-size:28px}
  .hero-photo{height:360px}
  h1.page-title{font-size:32px}
}