/* =====================================================================
   Ultima Exteriors LLC  -  Brand stylesheet
   Palette + type confirmed from Ultima Exteriors Web & Brand Guide v1.0
   Navy #0d1f3c  |  Red #c8281e  |  Gold #d4a020  |  Cream #f7f5f0
   Headings: Oswald   Body: Lato
   Note: per owner preference, headings/buttons use sentence case
   (no all-caps text-transform anywhere).
   ===================================================================== */

:root{
  --navy:#0d1f3c;
  --navy-700:#13294f;
  --navy-600:#1b386a;
  --red:#c8281e;
  --red-600:#a81f17;
  --gold:#d4a020;
  --gold-soft:#e7c873;
  --cream:#f7f5f0;
  --cream-2:#efece4;
  --ink:#1a1a1a;
  --muted:#555555;
  --line:#dddddd;
  --line-soft:#e8e8e3;
  --white:#ffffff;
  --green:#2e7d5b;

  --maxw:1180px;
  --maxw-narrow:880px;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 3px rgba(13,31,60,.08), 0 1px 2px rgba(13,31,60,.06);
  --shadow:0 10px 30px rgba(13,31,60,.10), 0 4px 10px rgba(13,31,60,.06);
  --shadow-lg:0 24px 60px rgba(13,31,60,.18);
  --ring:0 0 0 3px rgba(212,160,32,.45);

  --ff-head:'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --ff-body:'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--white); line-height:1.65; font-size:17px;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--red); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--ff-head); color:var(--navy); line-height:1.12; margin:0 0 .5em; font-weight:700; letter-spacing:.2px}
h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:600}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:600}
h4{font-size:1.05rem; font-weight:600}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.2em}
li{margin:.3em 0}
strong{font-weight:700}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}

/* ---------- Layout helpers ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.narrow{max-width:var(--maxw-narrow)}
.section{padding:72px 0}
.section.tight{padding:48px 0}
.section.cream{background:var(--cream)}
.section.navy{background:var(--navy); color:#dfe6f1}
.section.navy h1,.section.navy h2,.section.navy h3,.section.navy h4{color:#fff}
.section.navy a{color:var(--gold-soft)}
.center{text-align:center}
.eyebrow{
  font-family:var(--ff-head); font-weight:600; font-size:.82rem;
  letter-spacing:3px; color:var(--red); margin:0 0 12px;
  display:inline-flex; align-items:center; gap:10px; text-transform:none;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block}
.section.navy .eyebrow{color:var(--gold-soft)}
.lede{font-size:1.18rem; color:var(--muted); max-width:62ch}
.section.navy .lede{color:#c4cee0}
.center .lede{margin-left:auto; margin-right:auto}

.grid{display:grid; gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:1rem; letter-spacing:.4px;
  padding:15px 26px; border-radius:var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s;
  text-decoration:none; line-height:1; min-height:52px;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(200,40,30,.28)}
.btn-primary:hover{background:var(--red-600); color:#fff}
.btn-gold{background:var(--gold); color:var(--navy); box-shadow:0 6px 16px rgba(212,160,32,.3)}
.btn-gold:hover{background:#c2911a; color:var(--navy)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-600); color:#fff}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn-outline:hover{background:var(--navy); color:#fff}
.btn-ghost-light{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:#fff; color:var(--navy)}
.btn-lg{padding:18px 32px; font-size:1.08rem; min-height:58px}
.btn-block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line-soft); box-shadow:var(--shadow-sm);
}
.topbar{background:var(--navy); color:#cdd7e8; font-size:.86rem}
.topbar .container{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:38px; padding-top:6px; padding-bottom:6px}
.topbar a{color:#e8edf6}
.topbar .tb-badges{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.topbar .tb-badges span{display:inline-flex; gap:7px; align-items:center; white-space:nowrap}
.topbar .tb-right{display:flex; gap:18px; align-items:center}
.topbar .dot{color:var(--gold)}
.header-main{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand img{height:60px; width:auto}
.nav{display:flex; align-items:center; gap:4px}
.nav a.navlink{
  font-family:var(--ff-head); font-weight:500; color:var(--navy); font-size:1rem;
  padding:10px 13px; border-radius:8px; letter-spacing:.3px; position:relative;
}
.nav a.navlink:hover{background:var(--cream); text-decoration:none; color:var(--red)}
.nav a.navlink[aria-current="page"]{color:var(--red)}
.nav a.navlink[aria-current="page"]::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; background:var(--gold); border-radius:2px}
.header-cta{display:flex; align-items:center; gap:12px}
.header-phone{display:flex; flex-direction:column; line-height:1.15; text-align:right}
.header-phone .lbl{font-size:.72rem; color:var(--muted); letter-spacing:1px}
.header-phone .num{font-family:var(--ff-head); font-weight:700; font-size:1.18rem; color:var(--navy)}
.header-phone .num:hover{color:var(--red); text-decoration:none}

/* dropdown */
.has-dd{position:relative}
.dd-panel{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px; background:#fff;
  border:1px solid var(--line-soft); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.16s ease; z-index:70;
}
.has-dd:hover .dd-panel, .has-dd:focus-within .dd-panel{opacity:1; visibility:visible; transform:translateY(0)}
.dd-panel a{display:block; padding:9px 12px; border-radius:8px; color:var(--navy); font-family:var(--ff-body); font-weight:600; font-size:.95rem}
.dd-panel a:hover{background:var(--cream); color:var(--red); text-decoration:none}

/* hamburger */
.hamburger{display:none; background:none; border:0; cursor:pointer; padding:10px; border-radius:8px}
.hamburger span{display:block; width:26px; height:3px; background:var(--navy); border-radius:3px; margin:5px 0; transition:.2s}
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff; z-index:90;
  transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--shadow-lg);
  padding:22px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-overlay{position:fixed; inset:0; background:rgba(13,31,60,.5); z-index:85; opacity:0; visibility:hidden; transition:.25s}
.drawer-overlay.open{opacity:1; visibility:visible}
.mobile-drawer .md-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.mobile-drawer .md-close{background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--navy)}
.mobile-drawer a.mlink{font-family:var(--ff-head); font-weight:500; color:var(--navy); padding:12px 10px; border-radius:8px; border-bottom:1px solid var(--line-soft); font-size:1.08rem}
.mobile-drawer a.mlink:hover{background:var(--cream); text-decoration:none}
.mobile-drawer .msub{font-size:.95rem; padding-left:24px}
.mobile-drawer .md-cta{margin-top:16px; display:grid; gap:10px}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  grid-template-columns:1fr 1fr; gap:0; box-shadow:0 -6px 20px rgba(13,31,60,.18);
}
.mobile-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px;
  font-family:var(--ff-head); font-weight:600; font-size:1.02rem; color:#fff;
}
.mobile-bar a:hover{text-decoration:none}
.mobile-bar .mb-call{background:var(--navy)}
.mobile-bar .mb-book{background:var(--red)}

/* ---------- Hero ---------- */
.hero{position:relative; background:
   radial-gradient(1100px 480px at 78% -10%, rgba(212,160,32,.14), transparent 60%),
   linear-gradient(160deg, rgba(10,23,46,.9) 0%, rgba(13,31,60,.84) 45%, rgba(17,39,72,.8) 100%),
   url('/assets/img/home-exterior-hero-01.jpg');
   background-size:cover; background-position:center; background-repeat:no-repeat;
   color:#e7ecf5; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; background-image:
   linear-gradient(transparent 0 96%, rgba(255,255,255,.04) 96% 100%),
   linear-gradient(90deg, transparent 0 96%, rgba(255,255,255,.04) 96% 100%);
   background-size:60px 60px; opacity:.5; pointer-events:none}
.hero .container{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:50px; align-items:center; padding:64px 0 70px}
.hero h1{color:#fff; margin-bottom:18px}
.hero h1 .accent{color:var(--gold-soft)}
.hero-sub{font-size:1.2rem; color:#cdd7e8; max-width:54ch; margin-bottom:24px}
.hero-points{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px}
.hero-points li{display:flex; gap:11px; align-items:flex-start; color:#2a3650; font-size:1.04rem; margin:0}
.hero-points .tick{flex-shrink:0; width:24px; height:24px; border-radius:50%; background:rgba(46,125,91,.22); color:#7fe0b0; display:grid; place-items:center; font-size:.8rem; margin-top:2px}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:26px; color:#b9c4d8; font-size:.92rem}
.hero-trust span{display:inline-flex; gap:8px; align-items:center}
.hero-storm{display:inline-flex; align-items:center; gap:10px; background:rgba(200,40,30,.16); border:1px solid rgba(200,40,30,.5); color:#ffd9d4; padding:8px 15px; border-radius:999px; font-size:.9rem; font-family:var(--ff-head); font-weight:500; letter-spacing:.4px; margin-bottom:22px}
.hero-storm .pulse{width:9px; height:9px; border-radius:50%; background:#ff5a4d; box-shadow:0 0 0 0 rgba(255,90,77,.7); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,77,.6)}70%{box-shadow:0 0 0 12px rgba(255,90,77,0)}100%{box-shadow:0 0 0 0 rgba(255,90,77,0)}}

/* ---------- Lead form card ---------- */
.lead-card{background:#fff; color:var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; border-top:5px solid var(--gold)}
.lead-card h3{color:var(--navy); margin-bottom:4px; font-size:1.45rem}
.lead-card .sub{color:var(--muted); font-size:.96rem; margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block; font-family:var(--ff-head); font-weight:500; font-size:.9rem; color:var(--navy); margin-bottom:6px; letter-spacing:.3px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--ff-body); font-size:1rem; color:var(--ink); background:#fff; transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,160,32,.18); outline:none}
.field textarea{min-height:96px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-fineprint{font-size:.78rem; color:var(--muted); margin:12px 0 0; line-height:1.5}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--muted); margin:6px 0 4px}
.consent input{width:18px; height:18px; margin-top:3px; flex-shrink:0}

/* multi-step */
.steps-progress{display:flex; gap:6px; margin-bottom:18px}
.steps-progress .sp{flex:1; height:6px; border-radius:6px; background:var(--line)}
.steps-progress .sp.active{background:var(--gold)}
.steps-progress .sp.done{background:var(--green)}
.step{display:none}
.step.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px}
.choice{
  border:1.5px solid var(--line); border-radius:12px; padding:16px 12px; text-align:center;
  cursor:pointer; font-family:var(--ff-head); font-weight:500; color:var(--navy); background:#fff;
  transition:.15s; display:flex; flex-direction:column; gap:8px; align-items:center; font-size:1rem;
}
.choice:hover{border-color:var(--gold); background:var(--cream)}
.choice.selected{border-color:var(--red); background:#fdeceb; box-shadow:0 0 0 2px rgba(200,40,30,.18)}
.choice .ico{font-size:1.5rem}
.step-nav{display:flex; justify-content:space-between; gap:12px; margin-top:14px}
.step-back{background:none; border:0; color:var(--muted); font-family:var(--ff-head); font-weight:500; cursor:pointer; padding:10px}
.step-back:hover{color:var(--navy)}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--navy-700); color:#dbe3f0}
.trust-strip .container{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px; padding:20px 22px; align-items:center}
.trust-strip .ts{display:inline-flex; gap:10px; align-items:center; font-family:var(--ff-head); font-weight:500; font-size:.98rem; letter-spacing:.3px}
.trust-strip .ts .ic{color:var(--gold)}
.trust-strip .star{color:var(--gold)}

/* ---------- Cards ---------- */
.card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:26px; transition:.18s; height:100%}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:#d6d2c6}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card .card-ico{width:54px; height:54px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(150deg,var(--navy),var(--navy-600)); color:var(--gold); margin-bottom:16px}
.card .card-ico svg{width:28px; height:28px}
.card-link{font-family:var(--ff-head); font-weight:600; color:var(--red); display:inline-flex; gap:6px; align-items:center; margin-top:12px}
.card-link:hover{gap:10px; text-decoration:none}
a.card{display:block; color:inherit}
a.card:hover{text-decoration:none}

.feature{display:flex; gap:16px; align-items:flex-start}
.feature .f-ico{flex-shrink:0; width:48px; height:48px; border-radius:12px; background:var(--cream); color:var(--red); display:grid; place-items:center; border:1px solid var(--line-soft)}
.section.navy .feature .f-ico{background:rgba(255,255,255,.06); color:var(--gold); border-color:rgba(255,255,255,.12)}
.feature h4{margin-bottom:4px}
.feature p{margin:0; color:var(--muted); font-size:.98rem}
.section.navy .feature p{color:#bcc7da}

/* credential chips */
.chips{display:flex; flex-wrap:wrap; gap:12px}
.chip{display:inline-flex; gap:9px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-family:var(--ff-head); font-weight:500; font-size:.92rem; color:var(--navy); box-shadow:var(--shadow-sm)}
.chip .ic{color:var(--gold)}
.section.navy .chip{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#eaf0fa}

/* badge / guarantee callout */
.callout{border-left:4px solid var(--gold); background:var(--cream); border-radius:0 12px 12px 0; padding:20px 24px}
.callout.red{border-left-color:var(--red); background:#fdf0ef}
.callout h4{margin-bottom:6px}
.callout p:last-child{margin:0}

.guarantee-band{background:linear-gradient(135deg,var(--navy),var(--navy-600)); color:#fff; border-radius:var(--radius-lg); padding:38px; position:relative; overflow:hidden}
.guarantee-band::before{content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:rgba(212,160,32,.16)}
.guarantee-band .gb-inner{position:relative; z-index:2; display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.guarantee-seal{flex-shrink:0; width:130px; height:130px; border-radius:50%; border:3px solid var(--gold); display:grid; place-items:center; text-align:center; background:rgba(212,160,32,.1)}
.guarantee-seal .big{font-family:var(--ff-head); font-weight:700; font-size:2rem; color:var(--gold); line-height:1}
.guarantee-seal .small{font-size:.7rem; letter-spacing:1px; color:#dfe6f1}
.guarantee-band h3{color:#fff; font-size:1.7rem}
.guarantee-band p{color:#cdd7e8; margin:0}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat .num{font-family:var(--ff-head); font-weight:700; font-size:2.6rem; color:var(--gold); line-height:1}
.stat .lbl{color:#c4cee0; font-size:.96rem; margin-top:6px}
.section:not(.navy) .stat .num{color:var(--red)}
.section:not(.navy) .stat .lbl{color:var(--muted)}

/* ---------- Process steps ---------- */
.process{counter-reset:step; display:grid; gap:22px}
.process .pstep{display:flex; gap:18px; align-items:flex-start}
.pnum{flex-shrink:0; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1.3rem; display:grid; place-items:center}
.section.navy .pnum{background:var(--gold); color:var(--navy)}
.process .pstep h4{margin-bottom:4px}
.process .pstep p{margin:0; color:var(--muted)}
.section.navy .process .pstep p{color:#bcc7da}

/* ---------- Reviews ---------- */
.review-card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column}
.review-stars{color:var(--gold); letter-spacing:2px; font-size:1.05rem; margin-bottom:10px}
.review-card p{font-style:italic; color:#33414f}
.review-meta{margin-top:auto; display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-soft)}
.review-avatar{width:42px; height:42px; border-radius:50%; background:var(--navy); color:var(--gold); display:grid; place-items:center; font-family:var(--ff-head); font-weight:700}
.review-name{font-family:var(--ff-head); font-weight:600; color:var(--navy); line-height:1.2}
.review-where{font-size:.84rem; color:var(--muted)}
.review-src{margin-left:auto; font-size:.78rem; color:var(--muted)}
.placeholder-note{background:#fffbe9; border:1px dashed var(--gold); border-radius:10px; padding:10px 14px; font-size:.84rem; color:#7a5c00; margin-bottom:18px}

/* ---------- Founder ---------- */
.founder{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center}
.founder .f-photo{position:relative}
.founder .f-photo img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; object-fit:cover}
.founder .f-photo .f-tag{position:absolute; bottom:-16px; left:-16px; background:var(--red); color:#fff; padding:12px 18px; border-radius:12px; font-family:var(--ff-head); font-weight:600; box-shadow:var(--shadow); line-height:1.2}
.founder .f-photo .f-tag small{display:block; font-weight:400; font-size:.78rem; opacity:.85}
.signature{font-family:var(--ff-head); font-weight:600; color:var(--gold-soft); font-size:1.2rem; margin-top:6px}
.section:not(.navy) .signature{color:var(--red)}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto; display:grid; gap:12px}
.faq-item{border:1px solid var(--line-soft); border-radius:12px; background:#fff; overflow:hidden}
.faq-q{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:18px 22px; font-family:var(--ff-head); font-weight:500; font-size:1.1rem; color:var(--navy); display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq-q:hover{background:var(--cream)}
.faq-q .fic{flex-shrink:0; transition:.2s; color:var(--red); font-size:1.4rem; line-height:1}
.faq-item.open .faq-q .fic{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px}
.faq-item.open .faq-a{max-height:520px; padding-bottom:20px}
.faq-a p{margin:0; color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{background:
   radial-gradient(800px 300px at 80% 0%, rgba(212,160,32,.18), transparent 60%),
   linear-gradient(135deg,var(--navy) 0%, var(--navy-600) 100%); color:#fff; text-align:center; border-radius:var(--radius-lg); padding:54px 32px}
.cta-band h2{color:#fff; margin-bottom:10px}
.cta-band p{color:#cdd7e8; max-width:60ch; margin:0 auto 26px; font-size:1.12rem}

/* ---------- Gallery ---------- */
.gallery-filters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:28px}
.gallery-filters button{font-family:var(--ff-head); font-weight:500; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; transition:.15s}
.gallery-filters button:hover{border-color:var(--gold)}
.gallery-filters button.active{background:var(--navy); color:#fff; border-color:var(--navy)}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.gphoto{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; border:1px solid var(--line-soft)}
.gphoto .ph{aspect-ratio:4/3; background:linear-gradient(135deg,#dfe4ec,#cdd5e2); position:relative; display:grid; place-items:center; color:#8a97ab}
.gphoto .ph .ph-ico{font-size:2rem; opacity:.6}
.gphoto .gcap{padding:14px 16px}
.gphoto .gcap .t{font-family:var(--ff-head); font-weight:600; color:var(--navy)}
.gphoto .gcap .m{font-size:.85rem; color:var(--muted)}
.tag-pill{display:inline-block; font-size:.72rem; background:var(--cream-2); color:var(--navy); padding:3px 9px; border-radius:999px; margin-top:6px; font-family:var(--ff-head); font-weight:500}

/* image placeholder block */
.imgph{background:repeating-linear-gradient(45deg,#e9ecf2,#e9ecf2 14px,#e3e7ee 14px,#e3e7ee 28px); border:1px dashed #b9c2d1; border-radius:var(--radius); display:grid; place-items:center; text-align:center; color:#6b7689; min-height:280px; padding:20px}
.imgph .lab{font-family:var(--ff-head); font-weight:500}
.imgph small{display:block; color:#8a93a4; margin-top:4px; font-family:var(--ff-body)}

/* ---------- Map ---------- */
#project-map{height:430px; border-radius:var(--radius-lg); box-shadow:var(--shadow); z-index:1; border:1px solid var(--line-soft)}
.leaflet-popup-content{font-family:var(--ff-body)}
.map-legend{display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:16px; color:var(--muted); font-size:.9rem}

/* ---------- Tables ---------- */
.tbl{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); font-size:.97rem}
.tbl th,.tbl td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line-soft)}
.tbl thead th{background:var(--navy); color:#fff; font-family:var(--ff-head); font-weight:500; letter-spacing:.3px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .yes{color:var(--green); font-weight:700}
.tbl .no{color:#b9b3a6}
.tbl tbody tr:nth-child(even){background:var(--cream)}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:
   radial-gradient(700px 320px at 85% -20%, rgba(212,160,32,.14), transparent 60%),
   linear-gradient(150deg,#0c1d39,#13294f); color:#e7ecf5; padding:54px 0 58px}
.page-hero .eyebrow{color:var(--gold-soft)}
.page-hero h1{color:#fff; margin-bottom:14px}
.page-hero p{color:#cdd7e8; max-width:64ch; font-size:1.14rem; margin:0}
.breadcrumb{font-size:.86rem; color:#9fb0c9; margin-bottom:18px; font-family:var(--ff-head); font-weight:300}
.breadcrumb a{color:#c7d2e4}
.breadcrumb span{color:var(--gold-soft)}

/* prose */
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul{padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:28px; margin:.5em 0}
.prose ul li::before{content:"▸"; position:absolute; left:4px; color:var(--red); font-size:1rem; top:1px}
.prose.on-navy ul li::before{color:var(--gold)}

/* aside boxes */
.note{background:var(--cream); border:1px solid var(--line-soft); border-left:4px solid var(--navy); border-radius:0 12px 12px 0; padding:18px 22px; margin:1.4em 0}
.note.gold{border-left-color:var(--gold)}
.note.red{border-left-color:var(--red)}
.note h4{margin-bottom:6px}
.note p:last-child{margin:0}

/* contact info list */
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:20px}
.contact-list li{display:flex; gap:14px; align-items:flex-start}
.contact-list .ci{flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--cream); color:var(--red); display:grid; place-items:center; border:1px solid var(--line-soft)}
.section.navy .contact-list .ci{background:rgba(255,255,255,.06); color:var(--gold); border-color:rgba(255,255,255,.12)}
.contact-list .ct{font-family:var(--ff-head); font-weight:600; color:var(--navy)}
.section.navy .contact-list .ct{color:#fff}
.contact-list .cv{color:var(--muted)}
.section.navy .contact-list .cv{color:#bcc7da}

/* areas list */
.area-cols{columns:3; column-gap:30px}
.area-cols li{break-inside:avoid; list-style:none; padding:6px 0 6px 24px; position:relative}
.area-cols li::before{content:"▸"; position:absolute; left:0; color:var(--red)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#aab6cb; padding-top:56px; font-size:.95rem}
.site-footer h4{color:#fff; font-size:1.05rem; margin-bottom:16px; letter-spacing:.5px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:38px}
.footer-grid a{color:#cdd7e8}
.footer-grid a:hover{color:#fff}
.footer-brand img{height:64px; background:#fff; padding:8px 12px; border-radius:10px; margin-bottom:16px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.footer-contact{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.footer-contact li{display:flex; gap:10px; align-items:flex-start}
.footer-contact .ic{color:var(--gold); flex-shrink:0; margin-top:3px}
.footer-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.footer-badge{font-family:var(--ff-head); font-weight:500; font-size:.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:7px 11px; color:#dfe6f1}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:20px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; color:#8593ab}
.footer-bottom a{color:#aab6cb}
.disclaimer{font-size:.78rem; color:#7886a0; line-height:1.6; max-width:none; margin-top:6px}

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:14px}.mt-2{margin-top:28px}.mt-3{margin-top:42px}
.text-muted{color:var(--muted)}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav,.header-phone .lbl{display:none}
  .hamburger{display:block}
  .hero-grid{grid-template-columns:1fr; gap:34px; padding:40px 0 48px}
  .split,.founder{grid-template-columns:1fr; gap:30px}
  .founder .f-photo{order:-1; max-width:440px; margin:0 auto}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr); gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
  .area-cols{columns:2}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:52px 0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .mobile-bar{display:grid}
  body{padding-bottom:56px}
  .footer-grid{grid-template-columns:1fr}
  .area-cols{columns:1}
  .gallery-grid{grid-template-columns:1fr}
  .guarantee-band{padding:26px}
  .guarantee-band .gb-inner{flex-direction:column; text-align:center}
  .choice-grid{grid-template-columns:1fr 1fr}
  .topbar{display:none}
  .cta-band{padding:40px 22px}
  .founder .f-photo .f-tag{left:50%; transform:translateX(-50%); bottom:-18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Service-card photos and "to provide" placeholders */
.card .card-photo{height:160px;border-radius:12px;overflow:hidden;margin-bottom:16px;position:relative}
.card .card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card .card-photo.ph{display:grid;place-items:center;text-align:center;line-height:1.35;color:#6b7689;font-family:var(--ff-head);font-weight:600;font-size:1rem;background:repeating-linear-gradient(45deg,#eef0f4,#eef0f4 12px,#e7eaf0 12px,#e7eaf0 24px);border:1px dashed #b3bbc9}
/* Readable bullets when hero-points sit on a light/white card */
.card .hero-points li{color:#2a3650}

/* Brand logo row */
.brand-row{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:center;margin-top:18px}
.brand-row img{height:48px;width:auto;object-fit:contain}

/* hero-points: light text only on dark backgrounds */
.hero .hero-points li,.navy .hero-points li{color:#e7ecf5}