/* ===========================================================================
   theme.css — Bolton Home Remodelers LLC
   Premium LIGHT re-theme of the local-site-builder dark design system.
   Loaded LAST (after styles.css + pages.css) so it wins every cascade tie.
   Palette: royal blue from the "B" logo (#2f5fae) + deep navy ink + warm brass.
   Display face swapped to Fraunces (serif) for a high-end, design-build feel.
   =========================================================================== */
:root{
  --bg:#ffffff; --bg2:#f4f7fb; --bg3:#eef3f9; --card:#ffffff; --line:#dde6f0;
  --ink:#13294a; --muted:#52617a; --muted2:#8694a8;
  /* primary (was green) -> brand royal blue; accent (was orange) -> warm brass */
  --green:#2f5fae; --green-d:#244c8c; --green-soft:rgba(47,95,174,.10);
  --orange:#c0892e; --orange-d:#a4741f;
  --shadow:0 22px 50px -24px rgba(19,41,74,.28);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --cond:'Barlow Condensed',Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
}
body{background:var(--bg);color:var(--ink)}

/* headings: serif, title-case (not the athletic all-caps) */
h1,h2,h3,h4{text-transform:none}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.01em}
h2.title{letter-spacing:-.015em}
.prose h2{text-transform:none;font-family:var(--display);font-weight:600}
.ctaband h2,.final-card h2,.subhero h1{text-transform:none}
.eyebrow{color:var(--green)}

/* ---------- BUTTONS ---------- */
.btn{border-radius:10px}
.btn-green{background:var(--green);color:#fff;box-shadow:0 12px 30px -12px rgba(47,95,174,.5)}
.btn-green:hover{background:var(--green-d);color:#fff;box-shadow:0 16px 38px -12px rgba(47,95,174,.6)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 12px 30px -12px rgba(192,137,46,.45)}
.btn-orange:hover{background:var(--orange-d);color:#fff}
.btn-ghost{background:rgba(47,95,174,.05);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(47,95,174,.10);border-color:var(--green)}
/* ghost button stays light-on-dark when sitting over a hero photo */
.hero .btn-ghost,.subhero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover,.subhero .btn-ghost:hover{background:rgba(255,255,255,.22);border-color:#fff}

/* ---------- NAV (always solid white so the blue logo + navy text stay legible) */
.nav{background:#fff;border-bottom:1px solid var(--line)}
.nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 6px 24px -16px rgba(19,41,74,.4)}
.nav-links a{color:var(--muted);font-weight:600}
.nav-links a:hover{color:var(--green)}
.nav-phone{color:var(--ink)}
.nav-phone svg{fill:var(--green)}
.hamb span{background:var(--ink)}
.nav-links.mobile{background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.brand-logo{height:46px;width:auto;display:block}
.brand-mark{height:46px;width:auto;border-radius:7px;display:block}
.brand-wm{display:flex;flex-direction:column;line-height:1}
.brand-wm b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.005em;color:var(--ink)}
.brand-wm .sub{font-family:var(--cond);font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-top:3px}
.zipline{margin-top:16px;padding:12px 16px;background:var(--green-soft);border:1px solid rgba(47,95,174,.18);border-radius:10px;font-size:14px;color:var(--muted)}
.zipline strong{color:var(--ink)}
.zipline a{color:var(--green);font-weight:600}

/* ---------- citations / "reviewed on" logo strip ---------- */
.cite-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.cite-head{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:20px}
.cite-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.cite-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 24px;min-width:118px;min-height:60px;transition:.18s;box-shadow:0 6px 18px -14px rgba(19,41,74,.5)}
.cite-chip:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 14px 30px -16px rgba(19,41,74,.5)}
.cite-chip img{height:26px;width:auto;display:block}
.cite-sub{text-align:center;color:var(--muted);font-size:14.5px;margin-top:18px}
.cite-sub b{color:var(--ink)}
@media(max-width:600px){.cite-chip{min-width:92px;padding:12px 16px}.cite-chip img{height:22px}}
/* compact footer citation row (site-wide) */
.cite-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 30px;padding-top:26px;border-top:1px solid var(--line)}
.cite-foot span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--muted)}
.cite-foot img{height:22px;width:auto;filter:grayscale(1);opacity:.6;transition:.18s}
.cite-foot a:hover img{filter:none;opacity:1}
@media(max-width:760px){.brand-logo,.brand-mark{height:38px}.brand-wm b{font-size:17px}.brand-wm .sub{font-size:9.5px}}

/* ---------- HERO / SUBHERO: navy-tinted photo banner, white text ---------- */
.hero-bg::after{background:linear-gradient(180deg,rgba(11,23,42,.74) 0%,rgba(15,29,52,.55) 38%,rgba(9,18,33,.9) 100%)}
.subhero .hero-bg::after{background:linear-gradient(180deg,rgba(11,23,42,.82),rgba(15,29,52,.66) 45%,rgba(9,18,33,.93))}
.hero h1,.subhero h1{color:#fff}
.hero h1 em{color:#fff;font-style:normal;background:linear-gradient(120deg,#7fb0ff,#cfe0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.sub,.subhero p.sub{color:#e8edf4}
.hero-trust span{color:#cdd7e4}.hero-trust b{color:#fff}.hero-trust .sep{background:rgba(255,255,255,.3)}
.scrollcue{color:rgba(255,255,255,.7)}.scrollcue i{border-color:rgba(255,255,255,.4)}.scrollcue i::after{background:#fff}
.hero .ribbon,.subhero .ribbon{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:30px;margin-bottom:20px;backdrop-filter:blur(4px)}
.hero .ribbon .dot,.subhero .ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);flex:0 0 8px}

/* ---------- STAT BAR ---------- */
.stats{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.stat .n{color:var(--ink)}.stat .n .u{color:var(--orange)}

/* ---------- SPLIT / MEDIA BADGE ---------- */
.split .media .badge{background:rgba(15,27,41,.82);color:#fff;border-color:rgba(255,255,255,.16)}
.split .media .badge b{color:#fff}
.tick{border-color:rgba(47,95,174,.32)}.tick svg{stroke:var(--green)}

/* ---------- PROGRAM / FEATURE / PILLAR CARDS ---------- */
.prog:hover{border-color:var(--green)}
.prog .ph::after{background:linear-gradient(180deg,transparent 46%,rgba(15,27,41,.55))}
.prog .tag{background:var(--green);color:#fff}.prog .age{color:var(--green)}
.prog .pl .arw{color:var(--orange)}
.feat .ic{background:var(--green-soft);border-color:rgba(47,95,174,.25)}.feat .ic svg{stroke:var(--green)}
.pillar:hover{border-color:var(--green)}.pillar::before{background:linear-gradient(90deg,var(--green),transparent)}
.pillar .pn{color:rgba(47,95,174,.18)}

/* ---------- PROOF / TESTIMONIALS ---------- */
.proof-main .ov h3{color:#fff}.proof-main .ov p{color:#dbe3ee}
.proof-card .lab{color:#fff;background:rgba(15,27,41,.72);border-color:rgba(255,255,255,.14)}
.tst-card p{color:var(--muted)}.tst-card .av{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff}
.tst-card .who small{color:var(--muted2)}

/* ---------- OFFER / SCHEDULE / LOCATIONS ---------- */
.offer-banner{background:linear-gradient(135deg,rgba(47,95,174,.10),rgba(47,95,174,.02));border-color:rgba(47,95,174,.22)}
.offer-banner .free{color:var(--green)}.offer-banner p{color:var(--muted)}
.plan.pop{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 20px 50px -22px rgba(47,95,174,.4)}
.plan .pp{background:var(--green);color:#fff}
.sblock .st{color:var(--green)}
.loc.primary{border-color:rgba(47,95,174,.4)}
.loc.primary .pin{background:var(--green-soft);color:var(--green);border-color:rgba(47,95,174,.35)}
.loc .map{background:#e9eef5;filter:grayscale(.2) contrast(1.03)}

/* ---------- LEAD FORM ---------- */
.intro::before{background:radial-gradient(60% 80% at 80% 20%,rgba(47,95,174,.06),transparent)}
.field input,.field select,.field textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.form-ok .ic{background:var(--green-soft);border-color:var(--green)}.form-ok .ic svg{stroke:var(--green)}

/* ---------- FAQ ---------- */
.qa button{color:var(--ink)}.qa button::after{color:var(--green)}

/* ---------- FINAL CTA ---------- */
.final-card .bg::after{background:linear-gradient(180deg,rgba(15,27,41,.8),rgba(11,23,42,.92))}
.final-card h2{color:#fff}.final-card p{color:#e8edf4}

/* ---------- FOOTER (light) ---------- */
footer{background:var(--bg2);border-top:1px solid var(--line)}
.foot-brand p{color:var(--muted)}
.foot-col h5{color:var(--green)}
.foot-col a,.foot-col p{color:var(--muted)}.foot-col a:hover{color:var(--ink)}
.foot-bot{color:var(--muted2);border-top-color:var(--line)}
.socials a{border-color:var(--line)}.socials svg{fill:var(--muted)}
.socials a:hover{border-color:var(--green);background:var(--green-soft)}.socials a:hover svg{fill:var(--green)}

/* ---------- INNER-PAGE CHROME (pages.css hardcoded spots) ---------- */
.subhero{border-bottom-color:rgba(255,255,255,.08)}
.linkcard:hover{border-color:var(--green)}
.prose ul li::before{color:var(--green)}
.factbar .f .k{color:var(--green)}
.ctaband{background:linear-gradient(135deg,rgba(47,95,174,.09),rgba(47,95,174,.02));border-color:rgba(47,95,174,.2)}
.ctaband p{color:var(--muted)}

/* ---------- GUIDE / LISTICLE PAGES ---------- */
.answer{background:linear-gradient(135deg,var(--green-soft),transparent);border-color:rgba(47,95,174,.18)}
.answer p{color:var(--ink)}
.gitem .grank{background:var(--green-soft);border-color:rgba(47,95,174,.2);color:var(--green)}
.gitem .gdetail{color:var(--ink)}.gitem .gtag{color:var(--green);border-color:rgba(47,95,174,.25)}
.gitem .gnote b{color:var(--green)}.gtable th{color:var(--green)}

/* =====================================================================
   CUSTOM HOMEPAGE COMPONENTS (Bolton)
   ===================================================================== */
/* service icon grid */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:.22s}
.svc-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:var(--shadow)}
.svc-card .svc-ic{width:52px;height:52px;border-radius:13px;background:var(--green-soft);display:grid;place-items:center;margin-bottom:16px}
.svc-card .svc-ic svg{width:27px;height:27px;stroke:var(--green);fill:none;stroke-width:1.7}
.svc-card h3{font-size:20px;margin-bottom:7px;color:var(--ink)}
.svc-card p{color:var(--muted);font-size:14px;margin:0}
.svc-card .svc-go{margin-top:14px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:13px;color:var(--green)}
@media(max-width:1000px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* credential / trust badges */
.cred-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cred{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.cred .ci{flex:0 0 40px;height:40px;border-radius:10px;background:var(--green-soft);display:grid;place-items:center}
.cred .ci svg{width:21px;height:21px;stroke:var(--green);fill:none;stroke-width:1.8}
.cred b{display:block;font-size:15px;color:var(--ink)}
.cred span{font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.cred-row{grid-template-columns:1fr 1fr}}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding-top:8px}
.step .sn{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:600;margin-bottom:16px}
.step h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-size:19px;margin-bottom:7px;color:var(--ink)}
.step p{color:var(--muted);font-size:14.5px;margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* project gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)}
.gal.tall{grid-row:span 2;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gal:hover img{transform:scale(1.06)}
.gal .cap{position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,23,42,.6))}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gal.tall{grid-row:auto;aspect-ratio:4/3}}

/* Google reviews band */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.rev-stars{color:#e8a93a;letter-spacing:3px;font-size:17px;line-height:1;margin-bottom:12px}
.rev-card p{color:var(--ink);font-size:15px;line-height:1.6;flex:1}
.rev-who{margin-top:16px;display:flex;align-items:center;gap:12px}
.rev-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-d));display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:18px;font-weight:600}
.rev-who b{font-size:14.5px;color:var(--ink);display:block}
.rev-who small{color:var(--muted2);font-size:12px}
.rev-summary{display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:40px;padding:10px 20px;box-shadow:var(--shadow)}
.rev-summary b{color:var(--green);font-size:20px}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* split helper for a contact/quote 2-col */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr;gap:30px}}
.qbtns{display:grid;gap:12px;margin-top:8px}
.qbtns .big{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.18s}
.qbtns .big:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow)}
.qbtns .big .qi{flex:0 0 42px;height:42px;border-radius:10px;background:var(--green-soft);display:grid;place-items:center}
.qbtns .big .qi svg{width:21px;height:21px;stroke:var(--green);fill:none;stroke-width:1.8}
.qbtns .big b{display:block;font-size:16px;color:var(--ink)}
.qbtns .big span{font-size:13px;color:var(--muted)}
.field textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--ink);font-family:var(--body);font-size:15px;min-height:96px;resize:vertical}