/* ============================================================
   Shade Shack Patio Covers — site styles
   Green brand palette (--green/--accent/--cream/--ink) injected
   per-build into <style id="brandVars"> in index.html (from
   data/config.json). Headings use Space Grotesk (heavy) with a
   Light weight for subheads; body/UI use Inter.
   ============================================================ */

:root{
  --green:#2D5016;
  --accent:#4A8C2A;
  --cream:#F6F3EA;
  --ink:#23291F;
  --paper:#ffffff;
  --muted:#5d6654;
  --line:#e6e3d7;
  --radius:16px;
  --shadow:0 18px 50px rgba(20,30,15,.12);
  --shadow-sm:0 6px 18px rgba(20,30,15,.08);
  --maxw:1180px;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --slab:'Space Grotesk',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.modal-open{overflow:hidden;}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--slab); margin:0; font-weight:700; letter-spacing:-.02em;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.2em; font-size:13px;
  font-weight:700; color:var(--accent); margin:0 0 12px; text-align:center;
}
.section-title{
  font-size:clamp(29px,4.6vw,46px); font-weight:700; line-height:1.12;
  color:var(--ink); margin:0 auto 14px; max-width:22ch; text-align:center;
}
.section-lead{font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:60ch; margin:0 auto 8px; text-align:center;}
/* the accent word/line: same family, opposite (light) weight — the core of the look */
.green{color:var(--accent); font-weight:300; font-style:normal; letter-spacing:-.01em;}
.ink{color:var(--ink);}
.section-title-light{color:#fff;}
.eyebrow-light{color:#8fd0a8;}

.skip{position:absolute; left:-999px; top:0; background:var(--green); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 10px 0;}
.skip:focus{left:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1;
  border:1.5px solid transparent; border-radius:2px; padding:14px 24px;
  cursor:pointer; text-decoration:none; white-space:nowrap; letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(74,140,42,.32);}
.btn-accent:hover{box-shadow:0 14px 30px rgba(74,140,42,.42);}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.65); backdrop-filter:blur(3px);}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
.btn-cream{background:var(--cream); color:var(--green); box-shadow:0 12px 28px rgba(0,0,0,.2);}
.btn-cream:hover{background:#fff;}
.btn-hero-primary{background:#FFFFFF; color:#155c34; box-shadow:0 12px 30px rgba(0,0,0,.22);}
.btn-hero-primary:hover{background:#f2f6f3; box-shadow:0 18px 38px rgba(0,0,0,.28);}
.btn-hero-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.7); backdrop-filter:blur(3px);}
.btn-hero-ghost:hover{background:rgba(255,255,255,.18);}
.btn-lg{padding:17px 32px; font-size:16px;}
.btn-block{width:100%;}

/* ---------- animations ---------- */
[data-animate]{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
[data-animate].in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  [data-animate]{opacity:1 !important; transform:none !important; transition:none !important;}
  .svc-editorial,.se-content>*{opacity:1 !important; transform:none !important; transition:none !important;}
  .se-img,.se-ph{transform:none !important;}
}

/* ---------- announcement bar ---------- */
.announce{background:var(--green); color:#fff; font-size:13.5px; position:relative; z-index:60;}
.announce-in{display:flex; align-items:center; justify-content:space-between; padding:9px 24px; gap:12px;}
.announce-left{opacity:.92; letter-spacing:.01em;}
.announce-phone{color:#fff; text-decoration:none; font-weight:700; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:999px;}
.announce-phone:hover{background:rgba(255,255,255,.22);}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:#FFFFFF; backdrop-filter:blur(8px); border-bottom:1px solid #eee; transition:box-shadow .25s, border-color .25s;}
.nav.scrolled{box-shadow:0 6px 24px rgba(20,30,15,.09); border-color:var(--line);}
.nav-in{display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:16px;}
.brand img{height:52px; width:auto;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{text-decoration:none; font-weight:600; color:#000000; font-size:15.5px;}
.nav-links a:not(.btn){position:relative;}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:#155c34; transform:scaleX(0); transform-origin:left; transition:transform .2s ease;}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);}
.nav-links a.nav-cta{background:#155c34; color:#FFFFFF;}
.nav-links a.nav-cta:hover{background:#0e4226; color:#FFFFFF;}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;}
.hamburger span{width:26px; height:3px; background:#000000; border-radius:2px; transition:transform .3s, opacity .2s;}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.drawer-scrim{position:fixed; inset:0; background:rgba(15,22,10,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:40;}
.drawer-scrim.show{opacity:1; pointer-events:auto;}

@media (max-width:900px){
  .nav-links{
    position:fixed; left:0; right:0; top:0; background:#FFFFFF; flex-direction:column; align-items:stretch;
    gap:6px; padding:92px 24px 28px; transform:translateY(-115%); transition:transform .36s cubic-bezier(.16,.84,.44,1);
    box-shadow:0 22px 44px rgba(0,0,0,.18); z-index:45;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:14px 8px; font-size:18px; border-bottom:1px solid var(--line);}
  .nav-links a:not(.btn)::after{display:none;}
  .nav-links a.nav-cta{margin-top:10px; border:0; text-align:center;}
  .hamburger{display:flex;}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:92vh; min-height:92dvh; display:flex; align-items:center; color:#fff; overflow:hidden;}
.hero-bg{position:absolute; inset:-6% 0 0 0; background:linear-gradient(135deg,#155c34 0%,#0a3d22 50%,#1a7a45 100%) center/cover no-repeat; will-change:transform; z-index:0;}
.hero-bg-nomedia{
  background-image:radial-gradient(rgba(255,255,255,.55) 1.3px, transparent 1.4px), linear-gradient(135deg,#155c34 0%,#0a3d22 50%,#1a7a45 100%);
  background-size:26px 26px, cover; background-position:0 0, center; background-repeat:repeat, no-repeat; opacity:1;
}
.hero-bg-nomedia::after{content:""; position:absolute; inset:0; background:rgba(10,15,8,.04);}
.hero-overlay{position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, rgba(21,92,52,.82) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0) 100%),
             linear-gradient(180deg, rgba(10,15,8,.12) 0%, rgba(10,15,8,.42) 100%);}
.hero-in{position:relative; z-index:2; padding:90px 24px; max-width:860px; text-align:center;}
.hero-title{font-family:var(--slab); font-size:clamp(40px,7.2vw,64px); line-height:1.06; font-weight:700; letter-spacing:-.02em; margin:0 0 22px;}
.hero-title span{display:block;}
.hero-title .ink{color:#fff;}
/* opposite weight, same family — original green tint, no italics */
.hero-title .green{color:color-mix(in srgb, var(--accent) 72%, #ffffff); font-weight:300; font-style:normal; letter-spacing:-.01em;}
.hero-sub{font-family:var(--sans); font-size:20px; font-weight:400; color:rgba(255,255,255,.9); max-width:580px; margin:0 auto 38px; line-height:1.55;}
@media (max-width:640px){ .hero-sub{font-size:17px;} }
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.hero-scroll{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:14px; z-index:3;}
.hero-scroll span{position:absolute; top:8px; left:50%; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:scrolldot 1.6s infinite;}
@keyframes scrolldot{0%{opacity:0; top:8px;}40%{opacity:1;}80%{opacity:0; top:22px;}100%{opacity:0;}}

/* ---------- review bar ---------- */
.reviewbar{position:relative; z-index:6; background:transparent;}
.rb-in{
  background:#fff; border-radius:18px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:24px 18px;
  margin-top:-58px; position:relative;
}
.rb-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:6px 8px; position:relative;}
.rb-item:not(:last-child)::after{content:""; position:absolute; right:0; top:14%; height:72%; width:1px; background:var(--line);}
.rb-icon{width:34px; height:34px; border-radius:50%; background:var(--cream); color:var(--green); font-weight:800; display:flex; align-items:center; justify-content:center; font-family:var(--slab); margin-bottom:2px;}
.rb-rating{font-size:24px; font-weight:800; font-family:var(--slab); color:var(--ink); line-height:1;}
.rb-count{font-size:12.5px; color:var(--muted);}
.rb-name{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.rb-badge{background:var(--green); color:#fff; border-radius:14px;}
.rb-badge::after{display:none;}
.rb-badge-num{font-size:30px; font-weight:800; font-family:var(--slab); line-height:1;}
.rb-badge-label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.92;}

.stars{display:inline-flex; gap:2px;}
.stars svg{width:16px; height:16px;}
.stars.sm svg{width:13px; height:13px;}
.stars svg.on{fill:#F2B705;}
.stars svg.off{fill:#d8d4c5;}

/* ---------- services (editorial alternating cards) ---------- */
.services{background:#FFFFFF;}
.se-wrap{max-width:var(--maxw); margin:40px auto 0; padding:0 24px;}
.se-divider{height:1px; background:#e8e8e8; margin:0;}
.svc-editorial{
  display:flex; align-items:stretch; gap:0; min-height:420px; padding:36px 0;
  opacity:0; transform:translateY(32px); transition:opacity .6s ease, transform .6s ease;
}
.svc-editorial.in-view{opacity:1; transform:none;}
.svc-editorial.flip{flex-direction:row-reverse;}
.se-media{flex:0 0 55%; padding:12px;}
.se-media-inner{
  position:relative; height:100%; min-height:360px; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}
.se-media-inner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.08) 100%); pointer-events:none;}
.se-img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.in-view .se-img{transform:scale(1.03);}
.se-ph{position:relative; width:100%; height:100%; min-height:360px; background:linear-gradient(135deg,#155c34 0%,#0e4226 100%); display:flex; align-items:center; justify-content:center; transition:transform .8s ease;}
.in-view .se-ph{transform:scale(1.03);}
.se-ph-tex{position:absolute; inset:0; width:100%; height:100%; opacity:.10;}
.se-ph-icon{position:relative; width:96px; height:96px; color:#fff;}
.se-ph-icon svg{width:96px; height:96px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.se-content{flex:0 0 45%; display:flex; flex-direction:column; justify-content:center; padding:48px;}
.se-content > *{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.in-view .se-content > *{opacity:1; transform:none;}
.in-view .se-label{transition-delay:0s;}
.in-view .se-title{transition-delay:.1s;}
.in-view .se-desc{transition-delay:.2s;}
.in-view .se-rule,.in-view .se-stats{transition-delay:.3s;}
.in-view .se-cta{transition-delay:.4s;}
.se-label{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#155c34;}
.se-title{font-family:var(--slab); font-size:36px; font-weight:700; line-height:1.12; letter-spacing:-.02em; color:#000000; margin:0 0 16px;}
.se-desc{font-size:16px; color:#444444; line-height:1.7; margin:0 0 18px;}
.se-rule{border:0; border-top:1px solid #eeeeee; margin:0 0 16px;}
.se-stats{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px;}
.se-stat{font-size:13px; font-weight:700; color:#155c34;}
.se-stat-sep{color:#8bbf9f; font-weight:700;}
.se-cta{align-self:flex-start; font-weight:600; font-size:15px; color:#155c34; text-decoration:none;}
.se-cta:hover{text-decoration:underline;}
.se-cta span{transition:margin-left .2s;}
.se-cta:hover span{margin-left:5px;}
@media (max-width:768px){
  .svc-editorial,.svc-editorial.flip{flex-direction:column; min-height:0; padding:24px 0;}
  .se-media{flex:none; width:100%; padding:0;}
  .se-media-inner,.se-ph{min-height:0; height:260px;}
  .se-content{flex:none; width:100%; padding:28px 4px 8px;}
  .se-title{font-size:28px;}
}

/* ---------- before / after ---------- */
.ba-section{padding-bottom:96px;}
.ba-row{display:flex; gap:22px; overflow-x:auto; padding:30px 24px 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; max-width:calc(var(--maxw) + 48px); margin:0 auto;}
.ba-row::-webkit-scrollbar{height:8px;}
.ba-row::-webkit-scrollbar-thumb{background:#cdd2c4; border-radius:8px;}
.ba-card{flex:0 0 clamp(280px,80vw,440px); scroll-snap-align:center;}
.ba{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); user-select:none; --p:50%; cursor:ew-resize; background:#dfe2d6;}
.ba-before,.ba-after{position:absolute; inset:0;}
.ba-after{clip-path:inset(0 0 0 var(--p));}
.ba-img{width:100%; height:100%; object-fit:cover;}
.ba-ph{width:100%; height:100%;}
.ba-ph-before{background:linear-gradient(160deg,#b9ab86 0%,#9c8a63 55%,#7c6a45 100%);}
.ba-ph-after{background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 80%,#fff) 0%, var(--accent) 55%, var(--green) 100%);}
.ba-label{position:absolute; top:12px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(15,22,10,.6); padding:5px 11px; border-radius:999px; backdrop-filter:blur(2px);}
.ba-label-before{left:12px;}
.ba-label-after{right:12px;}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--p); width:3px; background:#fff; transform:translateX(-1.5px); box-shadow:0 0 0 1px rgba(0,0,0,.08); touch-action:none;}
.ba-handle:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.ba-handle-grip{position:absolute; top:50%; left:50%; width:42px; height:42px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 4px 14px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;}
.ba-handle-grip::before,.ba-handle-grip::after{content:""; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; position:absolute;}
.ba-handle-grip::before{border-right:7px solid var(--green); left:8px;}
.ba-handle-grip::after{border-left:7px solid var(--green); right:8px;}
.ba-caption{margin:14px 4px 0; font-weight:600; color:var(--ink); font-size:15.5px;}

/* ---------- project map ---------- */
.map-wrap{max-width:calc(var(--maxw) - 0px); margin:30px auto 0; padding:0 24px;}
#projectMap{height:480px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); z-index:1; background:#e8ece2;}
.leaflet-popup-content-wrapper{border-radius:14px; padding:0; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.22);}
.leaflet-popup-content{margin:0; width:230px !important;}
.ss-pop-head{background:var(--green); color:#fff; padding:10px 14px; font-family:var(--slab); font-weight:700; font-size:15px;}
.ss-pop-body{padding:8px 14px 12px;}
.ss-pop-item{display:flex; align-items:center; gap:9px; padding:7px 0;}
.ss-pop-item + .ss-pop-item{border-top:1px solid var(--line);}
.ss-pop-dot{width:30px; height:30px; border-radius:7px; flex:0 0 auto; background:linear-gradient(160deg,var(--accent),var(--green)) center/cover no-repeat;}
.ss-pop-name{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;}
.ss-pop-link{color:var(--accent); font-weight:700; text-decoration:none; font-size:13px; white-space:nowrap;}
.ss-pin{display:flex; align-items:center; justify-content:center; width:34px; height:34px; background:var(--green); border:3px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 4px 10px rgba(0,0,0,.3);}
.ss-pin span{transform:rotate(45deg); color:#fff; font-size:13px; font-weight:800;}

/* ---------- why choose us / trust ---------- */
.why{position:relative; background:#155c34; color:#fff; text-align:center; overflow:hidden;}
.why::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px);
  opacity:.5;}
.why-in{position:relative; z-index:1;}
.why-head{font-family:var(--slab); font-size:clamp(38px,8.4vw,80px); line-height:.98; font-weight:700; letter-spacing:-.02em; margin-bottom:22px;}
.why-line1{display:block;}
.why-line2{display:block; color:color-mix(in srgb,var(--accent) 60%,#fff); font-weight:300; font-style:normal;}
.why-text{max-width:680px; margin:0 auto 40px; color:rgba(255,255,255,.86); font-size:18px;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:960px; margin:0 auto;}
@media (max-width:820px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .trust-grid{grid-template-columns:1fr;} }
.trust-card{
  display:flex; align-items:center; gap:12px; text-align:left; background:#fff; color:var(--ink);
  border-left:4px solid #155c34; border-radius:12px; padding:18px 18px; box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .25s ease;
}
.trust-card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.2);}
.trust-icon{font-size:24px; line-height:1; flex:0 0 auto;}
.trust-label{font-weight:700; font-size:15px; line-height:1.25;}

/* ---------- section background rhythm + wave dividers ---------- */
.ba-section{background:#F8F7F5;}
.map-section{background:#FFFFFF;}
.wave{position:relative; width:100%; line-height:0; margin-top:-53px; z-index:2; pointer-events:none;}
.wave svg{display:block; width:100%; height:54px;}

/* ---------- service areas ---------- */
.areas{background:#F0F7F3;}
.area-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:26px;}
.area-card{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; text-decoration:none; color:var(--ink); font-weight:700; font-size:17px; transition:transform .18s, box-shadow .22s, border-color .2s, color .2s;}
.area-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--accent); color:var(--green);}
.area-pin{filter:saturate(1.1);}

/* ---------- testimonials / reviews ---------- */
.testimonials{position:relative; background:#155c34; overflow:hidden;}
.tcarousel{margin-top:30px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.ttrack{display:flex; gap:22px; width:max-content; will-change:transform; padding:6px 0 10px;}
.tcard{position:relative; flex:0 0 360px; max-width:88vw; background:#fff; border-radius:16px; padding:30px 26px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:0 14px 34px rgba(0,0,0,.18); overflow:hidden;}
.tcard-quote{position:absolute; top:-18px; right:10px; font-family:var(--slab); font-size:120px; line-height:1; color:#155c34; opacity:.10; pointer-events:none;}
.tcard-text{position:relative; margin:0; color:var(--ink); font-size:16.5px; line-height:1.62; flex:1; font-family:var(--sans); font-style:normal;}
.tcard-by{position:relative; display:flex; flex-direction:column;}
.tcard-name{font-weight:800; font-family:var(--slab); color:var(--ink);}
.tcard-city{font-size:13.5px; color:var(--muted);}

/* ---------- CTA banner ---------- */
.cta-banner{background:linear-gradient(120deg, var(--green) 0%, color-mix(in srgb,var(--green) 60%, var(--accent)) 100%); color:#fff; text-align:center;}
.cta-in{max-width:760px; margin:0 auto;}
.cta-head{font-size:clamp(28px,4.6vw,46px); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin-bottom:14px;}
.cta-sub{font-size:18px; color:rgba(255,255,255,.9); margin:0 auto 28px; max-width:620px;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.cta-or{margin-top:18px; color:rgba(255,255,255,.82); font-size:15px;}
.cta-or a{color:#fff; font-weight:700;}

/* ---------- contact ---------- */
.contact{background:#F8F7F5;}
.contact-in{max-width:640px; margin:0 auto; text-align:center;}
.contact-lead{color:var(--muted); font-size:17px; max-width:52ch; margin:0 auto 28px;}
.contact-cta{margin:0 auto;}
.contact-info{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:14px;}
.contact-info li{display:flex; align-items:center; justify-content:center; gap:12px; font-size:16px; font-weight:600;}
.contact-info a{color:var(--green); text-decoration:none;}

/* ---------- estimate modal (shared form styles) ---------- */
.quote-form{display:flex; flex-direction:column; gap:16px; padding:24px 26px;}
.quote-form[hidden]{display:none;}
.q-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .q-grid{grid-template-columns:1fr;} }
.q-grid .q-span{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink);}
.field .req{color:#b0301f;}
.field .opt{color:var(--muted); font-weight:600;}
.field input,.field select,.field textarea{font-family:var(--sans); font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.field input.invalid,.field textarea.invalid{border-color:#d64530; box-shadow:0 0 0 3px rgba(214,69,48,.14);}
.field textarea{resize:vertical;}
.field-err{color:#b0301f; font-size:12.5px; font-weight:700;}
.field-err:empty{display:none;}

/* interest bubbles (multi-select) */
.bubble-row{display:flex; flex-wrap:wrap; gap:9px;}
.bubble{font-family:var(--sans); font-size:14px; font-weight:700; color:#000000; background:#fff; border:2px solid #000000; border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .15s ease, color .15s ease, transform .1s ease;}
.bubble:hover{background:#f4f4f4;}
.bubble.on{background:#155c34; color:#fff; border-color:#155c34;}
.bubble:active{transform:scale(.97);}

/* submit, notes, success */
.quote-submit{width:100%; background:#155c34; color:#fff; border-radius:2px; padding:14px; font-weight:700; box-shadow:0 8px 22px rgba(21,92,52,.28);}
.quote-submit:hover{background:#0e4226; box-shadow:0 12px 28px rgba(21,92,52,.36);}
.quote-submit:disabled{opacity:.7; cursor:default;}
.form-note{margin:0; font-size:14.5px; min-height:1.2em; text-align:center;}
.form-note.ok{color:var(--green); font-weight:700;}
.form-note.err{color:#b0301f; font-weight:700;}
.quote-success{padding:44px 26px; text-align:center; animation:quoteIn .35s ease;}
.quote-success[hidden]{display:none;}
.quote-check{width:74px; height:74px; margin:0 auto 18px;}
.quote-check svg{width:74px; height:74px;}
.quote-check circle{stroke:#155c34; stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:checkCircle .5s ease forwards;}
.quote-check path{stroke:#155c34; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:checkMark .35s .45s ease forwards;}
@keyframes checkCircle{to{stroke-dashoffset:0;}}
@keyframes checkMark{to{stroke-dashoffset:0;}}
.quote-success-title{font-size:24px; font-weight:800; color:var(--ink); margin:0 0 8px;}
.quote-success-sub{font-size:15.5px; color:var(--muted); line-height:1.55; max-width:34ch; margin:0 auto;}
@keyframes quoteIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------- modal overlay ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.6); opacity:0; transition:opacity .25s ease;
}
.modal-overlay.open{display:flex; opacity:1;}
.modal-card{
  position:relative; width:100%; max-width:560px; max-height:92vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.2);
  transform:translateY(20px); opacity:0;
}
.modal-overlay.open .modal-card{
  animation:modalIn .3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes modalIn{to{transform:translateY(0); opacity:1;}}
.modal-head{position:relative; background:#155c34; color:#fff; padding:26px 28px;}
.modal-title{font-family:var(--slab); font-size:24px; margin:0; color:#fff;}
.modal-sub{margin:8px 0 0; font-size:14.5px; color:rgba(255,255,255,.92);}
.modal-license{margin:10px 0 0; font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.72);}
.modal-close{position:absolute; top:14px; right:16px; width:32px; height:32px; background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:0;}
.modal-close:hover{opacity:.75;}
.modal-body{padding:0;}
.modal-body .quote-form{padding:24px 28px;}
@media (prefers-reduced-motion:reduce){
  .modal-overlay,.modal-overlay .modal-card{transition:none; animation:none; transform:none; opacity:1;}
}
@media (max-width:600px){
  .modal-overlay{padding:0; align-items:flex-end;}
  .modal-card{max-width:none; width:95vw; margin:0 auto 2vh; max-height:94vh; border-radius:16px;}
}

/* ---------- footer ---------- */
.footer{position:relative; background:#0a3d22; color:rgba(255,255,255,.82); padding:60px 0 0; border-top:1px solid rgba(255,255,255,.1);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:36px;}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand img{height:64px; width:auto; filter:brightness(0) invert(1); opacity:.95;}
.footer-tag{margin:14px 0 12px; font-family:var(--slab); font-size:15px; color:rgba(255,255,255,.7);}
.footer-license{margin:0 0 16px; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); line-height:1.5;}
.footer-social{display:flex; gap:12px;}
.soc{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .2s;}
.soc:hover{background:var(--accent);}
.soc svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2;}
.footer-col h4{color:#fff; font-size:16px; margin-bottom:14px;}
.footer-col ul{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:9px;}
.footer-col a{text-decoration:none; color:rgba(255,255,255,.78); font-size:15px;}
.footer-col a:hover{color:#fff;}
.footer-bar{margin-top:48px; border-top:1px solid rgba(255,255,255,.14); padding:20px 0; font-size:13.5px; color:rgba(255,255,255,.6); text-align:center;}

@media (max-width:560px){
  .section{padding:64px 0;}
  .rb-in{grid-template-columns:repeat(2,1fr); gap:14px; margin-top:-40px;}
  .rb-item:nth-child(2)::after{display:none;}
}