:root{
  --navy:      #12283e;
  --navy-2:    #1a3550;
  --teal:      #0f7a6c;
  --teal-dark: #0b5c51;
  --coral:     #e8562e;
  --coral-dark:#c8431f;
  --ink:       #1a2530;
  --ink-soft:  #5b6770;
  --bg:        #f7f9fb;
  --card:      #ffffff;
  --line:      #e4e9ed;
  --line-2:    #d7dee3;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:16.5px;
}
img{max-width:100%; display:block;}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--teal-dark);}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy); line-height:1.2; margin:0 0 0.55em; font-weight:600;}
h1{font-size:clamp(1.7rem,3.2vw,2.35rem);}
h2{font-size:clamp(1.3rem,2.2vw,1.7rem);}
h3{font-size:1.08rem; color:var(--navy);}
p{margin:0 0 1em;}
.container{max-width:1140px; margin:0 auto; padding:0 24px;}
.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase; color:#8fd6c8; margin-bottom:10px;
}
.eyebrow.dark{color:var(--teal-dark);}

/* header */
.site-header{background:#FEFEFE; padding:14px 0; position:sticky; top:0; z-index:300; width:100%; box-shadow:0 4px 14px rgba(18,40,62,0.10); border-bottom:1px solid #ececec;}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0;}
.brand-logo{height:40px; width:auto; flex:none;}
.main-nav{display:flex; align-items:center; gap:26px;}
.main-nav > a{color:var(--navy); font-weight:500; font-size:0.95rem;}
.main-nav > a:hover{color:var(--teal);}
.nav-services{position:relative;}
.nav-services > summary{
  color:var(--navy); font-weight:500; font-size:0.95rem; cursor:pointer; list-style:none;
}
.nav-services > summary::-webkit-details-marker{display:none;}
.nav-services > summary:hover{color:var(--teal);}
.nav-services[open] > summary{color:var(--teal);}
.nav-services .panel{
  position:absolute; top:calc(100% + 10px); left:-20px; background:#fff; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.18); padding:16px 20px; width:560px; max-width:90vw;
  columns:2; column-gap:24px; z-index:50; border:1px solid var(--line);
}
.nav-services .panel a{display:block; padding:6px 0; color:var(--ink); font-size:0.9rem;}
.nav-services .panel a:hover{color:var(--teal);}
.header-right{display:flex; align-items:center; gap:12px; flex:none;}
.phone-pill{
  background:var(--coral); color:#fff; font-weight:600; font-size:0.92rem;
  padding:10px 18px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.phone-pill:hover{background:var(--coral-dark); color:#fff;}
.phone-pill.compact{padding:9px 12px; font-size:0.85rem;}

/* mobile hamburger + slide-in drawer (pure CSS, checkbox hack) */
.menu-toggle-cb{display:none;}
.hamburger-btn{
  display:none; width:38px; height:38px; border-radius:8px; background:rgba(18,40,62,0.06);
  align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.hamburger-btn span, .hamburger-btn span::before, .hamburger-btn span::after{
  content:""; display:block; width:20px; height:2px; background:var(--navy); position:relative; transition:0.2s;
}
.hamburger-btn span::before{position:absolute; top:-6px;}
.hamburger-btn span::after{position:absolute; top:6px;}

.mobile-drawer{
  position:fixed; top:0; left:0; width:280px; height:100%; background:var(--navy);
  transform:translateX(-100%); transition:transform 0.25s ease; z-index:500;
  padding:20px; overflow-y:auto;
}
.drawer-overlay{
  position:fixed; inset:0; background:rgba(10,15,20,0.55); opacity:0; visibility:hidden;
  transition:opacity 0.25s ease; z-index:400;
}
.menu-toggle-cb:checked ~ .mobile-drawer{transform:translateX(0);}
.menu-toggle-cb:checked ~ .drawer-overlay{opacity:1; visibility:visible;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #2a4058;}
.drawer-head span{color:#fff; font-family:var(--font-display); font-weight:600; letter-spacing:0.06em; font-size:0.85rem; text-transform:uppercase;}
.drawer-close{width:30px; height:30px; border-radius:6px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; cursor:pointer;}
.mobile-drawer nav a, .mobile-drawer nav summary{
  display:block; padding:13px 4px; color:#fff; font-family:var(--font-display); font-weight:500;
  font-size:1rem; border-bottom:1px solid #223649; cursor:pointer; list-style:none;
}
.mobile-drawer nav summary::-webkit-details-marker{display:none;}
.mobile-drawer .sub-panel a{
  padding:10px 4px 10px 16px; font-family:var(--font-body); font-weight:400; font-size:0.88rem; color:#b8c8d2; border-bottom:none;
}
.desktop-only{display:flex;}
@media (max-width:820px){
  .desktop-only{display:none !important;}
  .hamburger-btn{display:flex; order:3;}
  .brand{order:1;}
  .header-right{order:2;}
  .brand-logo{height:30px;}
  .phone-pill{padding:8px 12px; font-size:0.82rem;}
}
@media (max-width:400px){
  .brand-logo{height:26px;}
  .phone-pill span.ptext{display:none;}
}

/* trust banner */
.trust-banner{background:#eef4f6; border-bottom:1px solid var(--line);}
.trust-banner .container{display:flex; align-items:center; gap:10px; padding:9px 24px; font-size:0.86rem; color:var(--ink-soft);}
.dot{width:8px; height:8px; border-radius:50%; background:#2e9e5b; flex:none;}

/* hero */
.hero{position:relative; color:#fff; overflow:hidden;}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,20,32,0.92) 0%, rgba(10,20,32,0.78) 45%, rgba(18,40,62,0.55) 100%); z-index:1;}
.hero .container{position:relative; z-index:2; padding:50px 24px 50px; display:grid; grid-template-columns:1.35fr 0.95fr; gap:40px; align-items:center;}
@media (max-width:880px){
  .hero .container{grid-template-columns:1fr; align-items:start; padding:28px 20px 32px; gap:24px;}
}
.hero-text{display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.hero h1{color:#fff; max-width:820px; font-size:clamp(1.9rem,3.6vw,2.7rem);}
.hero .lede{font-size:1.18rem; color:#dbe6ea; max-width:640px; line-height:1.72;}
.hero .lede a{color:#8fe0cf; text-decoration:underline; font-weight:600;}
.btn{
  display:inline-block; background:var(--coral); color:#fff; font-family:var(--font-display);
  font-weight:600; font-size:0.95rem; padding:14px 28px; border-radius:8px; text-decoration:none;
  border:none; cursor:pointer; margin-top:8px;
}
.btn:hover{background:var(--coral-dark); color:#fff;}

.quote-card{background:#fff; color:var(--ink); border-radius:14px; padding:24px 26px; box-shadow:0 18px 40px rgba(0,0,0,0.25); font-size:1rem;}
.quote-card h3{margin-top:0; color:var(--navy); font-size:1.2rem;}
.quote-card p.hint{font-size:0.9rem; color:var(--ink-soft); margin-bottom:14px;}
.quote-card form{display:flex; flex-direction:column; gap:8px;}
.quote-card label{font-size:0.84rem; font-weight:600; color:var(--navy); margin-bottom:-3px;}
.quote-card input, .quote-card select, .quote-card textarea{
  border:1px solid var(--line-2); padding:10px 13px; font-family:var(--font-body); font-size:0.94rem; border-radius:8px; width:100%;
}
.quote-card textarea{min-height:64px;}
.quote-card .btn{align-self:flex-start; margin-top:4px; font-size:0.94rem; padding:12px 24px;}
.quote-card .note{font-size:0.82rem; color:var(--ink-soft); margin-top:10px;}

/* stat strip */
.stat-strip{background:#fff; border-bottom:1px solid var(--line);}
.stat-strip .container{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:26px 24px;}
@media (max-width:760px){.stat-strip .container{grid-template-columns:repeat(2,1fr);}}
.stat{text-align:center;}
.stat .val{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--coral);}
.stat .lbl{font-size:0.82rem; color:var(--ink-soft); margin-top:2px;}

/* sections */
section{padding:52px 0;}
section.alt{background:#eef4f6;}
.two-col{display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:start;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px;}
@media (max-width:900px){.grid-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-cards{grid-template-columns:1fr;}}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; overflow:hidden;}
.card.has-thumb{padding:0;}
.card.has-thumb .thumb{width:100%; aspect-ratio:16/10; overflow:hidden;}
.card.has-thumb .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.card.has-thumb .card-body{padding:20px;}
.card h3{margin-top:0;}
.card a.card-link{color:var(--teal); font-weight:600; font-size:0.9rem;}

/* two-col that should equalize column heights (photo fills full height) */
.two-col.stretch{align-items:stretch;}
.two-col.stretch .photo-frame{height:100%; min-height:280px;}
.two-col.stretch .photo-frame img{height:100%;}

/* process steps */
.process-list{list-style:none; margin:0; padding:0; counter-reset:step; display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:700px){.process-list{grid-template-columns:1fr;}}
.process-list li{counter-increment:step; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; position:relative;}
.process-list li::before{
  content:counter(step, decimal-leading-zero); font-family:var(--font-display); font-weight:700; color:var(--teal);
  font-size:0.85rem; display:block; margin-bottom:6px;
}

/* materials/cost callout */
.cost-box{background:var(--navy); color:#fff; border-radius:14px; padding:26px;}
.cost-box p{color:#cfe0ea; font-size:0.95rem;}
.cost-box .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px;}
.cost-box .stat .val{color:#8fe0cf;}
.cost-box .stat .lbl{color:#9db3bf;}

/* testimonials */
.testi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px;}
.testi p{font-style:italic; color:var(--ink-soft);}
.testi .who{font-family:var(--font-display); font-weight:600; font-size:0.85rem; color:var(--teal-dark);}

/* FAQ accordion */
.faq-list{border-top:1px solid var(--line);}
details.faq-item{border-bottom:1px solid var(--line); padding:14px 0;}
details.faq-item summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:1rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--teal); flex:none; transition:transform 0.15s;}
details.faq-item[open] summary::after{content:"\2212";}
details.faq-item .faq-a{padding-top:10px; color:var(--ink-soft);}

figure{margin:0;}
figcaption{font-size:0.8rem; color:var(--ink-soft); padding-top:6px;}

/* footer */
.footer-topbar{height:6px; background:linear-gradient(90deg, var(--coral), var(--teal));}
footer.site-footer{background:#fff; padding:44px 0 22px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.footer-logo{height:44px; width:auto;}
.footer-grid p{font-size:0.9rem; color:var(--ink-soft);}
.social-row{display:flex; gap:10px; margin-top:14px;}
.social-row a{
  width:32px; height:32px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center;
  justify-content:center; font-size:0.75rem; font-weight:700; color:var(--ink-soft);
}
.footer-grid h4{color:var(--coral); font-size:0.92rem; margin-bottom:10px;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{padding:4px 0; font-size:0.9rem;}
.footer-grid a{color:var(--ink-soft);}
.footer-grid a:hover{color:var(--teal);}
.footer-bottom{border-top:1px solid var(--line); margin-top:28px; padding-top:16px; font-size:0.82rem; color:#9aa4ac; text-align:center;}

.map-embed{width:100%; height:340px; border:1px solid var(--line); border-radius:12px; background:#dfe7ea; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:0.9rem;}

.photo-frame{border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}

.fact-card{background:var(--navy); color:#fff; border-radius:14px; padding:24px;}
.fact-card h3{color:#fff; margin-top:0;}
.fact-card ul{list-style:none; margin:0; padding:0;}
.fact-card li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid #24405a; font-size:0.9rem;}
.fact-card li:last-child{border-bottom:none;}
.fact-card li b{color:#8fe0cf; font-weight:600; text-align:right;}

.why-box{background:#eef4f6; border-left:4px solid var(--coral); border-radius:8px; padding:18px 22px;}
.why-box .bad{color:#9aa4ac; font-size:0.9rem; text-decoration:line-through;}
.why-box .expert{color:var(--navy); font-weight:500; margin-top:6px;}

/* scannable bullet lists (readability fix) */
ul.bullet-list{list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:12px;}
ul.bullet-list li{
  padding-left:26px; position:relative; font-size:0.98rem; line-height:1.6; color:var(--ink-soft);
}
ul.bullet-list li::before{
  content:"";
  position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:2px; background:var(--coral); transform:rotate(45deg);
}
ul.bullet-list li strong{color:var(--navy);}
ul.quick-facts{list-style:none; margin:16px 0; padding:0;}
ul.quick-facts li{
  padding:10px 0; border-bottom:1px solid var(--line); font-size:0.95rem; color:var(--ink-soft);
  display:flex; gap:8px; align-items:baseline;
}
ul.quick-facts li::before{content:"✓"; color:var(--teal); font-weight:700; flex:none;}
ul.quick-facts li strong{color:var(--navy);}