/* ============================================================
   ELITE RESTORATION BY VILLEGAS — Call-Conversion Landing Page
   Direction: heavily branded "standard contractor site" — bold flat
   color blocks, condensed all-caps headings, solid icon badges —
   matching the client's own live site (restoreelite.com) rather than
   an elevated/minimal system. Exact brand colors sampled from their
   site: red #CA161F, navy #013A71, plus fire/water/mold icon colors.
   Primary CTA = phone call, not form. Photography and trust badges
   (IICRC, CA contractor license, Google reviews) pulled from their
   own live site. Onboarding doc is source of truth for brand facts
   (phone, license #, service area, hours) — confirmed 2026-09-23.
   ============================================================ */

@font-face{font-family:"Suisse Intl";src:url("fonts/SuisseIntl-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url("fonts/SuisseIntl-Regular.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl";src:url("fonts/SuisseIntl-Bold.ttf") format("truetype");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Antonio";src:url("fonts/Antonio-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Antonio";src:url("fonts/Antonio-Bold.ttf") format("truetype");font-weight:700 800;font-style:normal;font-display:swap}

:root{
  --ink:#111111;
  --ink-800:#1C1C1C;
  --ink-700:#2A2A2A;
  --cyan:#CA161F;
  --cyan-600:#A01118;
  --cyan-050:#FBEAEA;
  --paper:#FFFFFF;
  --bone:#F5F5F5;
  --sand:#ECE6DC;
  --line:#E1E1E1;
  --muted:#5B5B5B;
  --muted-2:#8A8A8A;
  --green:#013A71;
  --green-600:#012A54;
  --green-050:#E8EEF5;
  --gold:#013A71;
  --fire:#FB8A00;
  --water:#00C5EB;
  --mold:#338850;
  --radius:6px;
  --radius-lg:10px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.10);
  --shadow:0 10px 26px rgba(0,0,0,.16);
  --shadow-lg:0 20px 50px rgba(0,0,0,.22);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --serif:"Antonio",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Suisse Intl",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1;letter-spacing:.01em;text-transform:uppercase}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-600);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cyan);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:1.5px;background:var(--cyan);display:inline-block}
.eyebrow.center{justify-content:center}
.section{padding:112px 0}
.section-head{max-width:720px}
.section-head.center{margin:0 auto;text-align:center}
.section h2{font-size:clamp(30px,4vw,52px);margin:18px 0 0}
.section .lead{color:var(--muted);font-size:18px;margin-top:20px;max-width:600px}
.section-head.center .lead{margin-left:auto;margin-right:auto}

/* buttons — flat, blocky, high-contrast (matches the client's own black/red pill buttons) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;
  padding:16px 28px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .2s,color .2s;white-space:nowrap;
}
.btn-primary{background:var(--cyan);color:#fff}
.btn-primary:hover{background:var(--cyan-600);transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-lg{padding:19px 36px;font-size:17px}

/* ---------- top utility bar ---------- */
.utility{background:var(--ink);color:#cfcfd6;font-size:13px}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;height:44px;gap:20px}
.utility a{color:#cfcfd6;transition:color .2s}
.utility a:hover{color:#fff}
.utility .u-left{display:flex;gap:26px;align-items:center}
.utility .u-item{display:flex;align-items:center;gap:8px}
.utility .u-item svg{width:14px;height:14px;stroke:var(--cyan)}
.utility .u-offer{color:#fff;font-weight:600}
.utility .u-offer b{color:var(--cyan)}
@media(max-width:900px){.utility .u-left .u-item.hide-sm{display:none}}

/* ---------- header — solid red bar, like the client's own nav ---------- */
header.nav{
  position:sticky;top:0;z-index:60;background:var(--cyan);
  border-bottom:3px solid var(--ink);transition:box-shadow .3s;
}
header.nav.scrolled{box-shadow:var(--shadow)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav .logo{background:#fff;padding:8px 14px;border-radius:var(--radius)}
.nav .logo img{height:44px;display:block}
.nav ul{list-style:none;display:flex;gap:4px;align-items:center}
.nav ul a{font-size:14.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;
  position:relative;padding:11px 16px;border-radius:var(--radius);transition:background .2s,color .2s}
.nav ul a:hover{background:rgba(255,255,255,.15)}
.nav ul a.active{background:#fff;color:var(--cyan)}
.nav ul a::after{content:none}
.nav .nav-cta{display:flex;align-items:center;gap:18px}
.nav .callnum{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;color:#fff}
.nav .callnum svg{width:17px;height:17px;stroke:#fff}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{width:26px;height:2px;background:#fff;display:block;transition:.3s}
.nav .logo{flex-shrink:0}
@media(max-width:1080px){
  .nav ul,.nav .callnum span{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:560px){
  /* the sticky call bar already covers "always-visible call" on mobile —
     drop the full call button from the header so it can't squeeze the logo */
  .nav .nav-cta .btn-primary{display:none}
}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.82) 38%,rgba(11,11,13,.35) 100%);}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;
  align-items:center;padding-top:82px;padding-bottom:82px;min-height:calc(100vh - 124px)}
.hero-copy .eyebrow{color:var(--cyan)}
.hero-copy .eyebrow::before{background:var(--cyan)}
.hero h1{font-size:clamp(40px,5.4vw,74px);font-weight:600;margin:22px 0 0;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero p.sub{font-size:19px;color:#c9c9d1;max-width:520px;margin-top:24px}
.hero .hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero .hero-trust{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap;align-items:center}
.hero .hero-trust .t{display:flex;flex-direction:column;line-height:1.15}
.hero .hero-trust .t b{font-family:var(--serif);font-size:26px;color:#fff}
.hero .hero-trust .t span{font-size:12.5px;color:var(--muted-2);letter-spacing:.02em}
.hero .hero-trust .stars{color:var(--cyan);font-size:15px;letter-spacing:2px}

/* hero form card */
.leadcard{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:34px 32px;
  box-shadow:var(--shadow-lg);position:relative}
.leadcard .lc-tag{position:absolute;top:-14px;right:26px;background:var(--cyan);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:100px}
.leadcard h3{font-size:26px;margin-bottom:6px}
.leadcard .lc-sub{font-size:14.5px;color:var(--muted);margin-bottom:22px}
.leadcard form{display:grid;gap:13px}
.leadcard .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.leadcard input,.leadcard select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--sans);font-size:15px;background:var(--bone);transition:border .2s,background .2s;color:var(--ink)}
.leadcard input:focus,.leadcard select:focus{outline:none;border-color:var(--cyan);background:#fff}
.leadcard button{margin-top:4px;width:100%}
.leadcard .lc-fine{font-size:11.5px;color:var(--muted-2);text-align:center;margin-top:4px}
.leadcard .lc-fine svg{width:12px;height:12px;stroke:var(--cyan);vertical-align:-1px;margin-right:3px}
@media(max-width:940px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:60px;min-height:0}
  .hero-bg img{opacity:.3}
}

/* ---------- offer strip ---------- */
.offerstrip{background:var(--cyan);color:#fff}
.offerstrip .wrap{display:flex;align-items:center;justify-content:center;gap:40px;height:64px;flex-wrap:wrap;
  font-weight:600;font-size:15px}
.offerstrip .o{display:flex;align-items:center;gap:10px}
.offerstrip .o svg{width:18px;height:18px;stroke:#fff}
.offerstrip .o b{font-family:var(--serif);font-size:18px}
.offerstrip .dot{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.4}
@media(max-width:760px){.offerstrip .dot{display:none}.offerstrip .wrap{gap:18px;height:auto;padding-top:16px;padding-bottom:16px}}

/* ---------- logos / trust bar ---------- */
.trustbar{background:var(--bone);border-bottom:1px solid var(--line)}
.trustbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:26px 28px;flex-wrap:wrap}
.trustbar .tb-item{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink-700);font-weight:500}
.trustbar .tb-item svg{width:22px;height:22px;stroke:var(--cyan-600);flex-shrink:0}
.trustbar .tb-item b{font-weight:700}

/* ---------- story / shop-at-home ---------- */
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.story-media{position:relative}
.story-media .m-main{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}
.story-media .m-main img{width:100%;height:100%;object-fit:cover}
.story-media .m-badge{position:absolute;bottom:-26px;left:-26px;background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow);max-width:230px}
.story-media .m-badge b{font-family:var(--serif);font-size:40px;color:var(--cyan);display:block;line-height:1}
.story-media .m-badge span{font-size:13px;color:#c9c9d1;margin-top:6px;display:block}
.story-body h2{margin-top:16px}
.story-list{list-style:none;margin-top:30px;display:grid;gap:16px}
.story-list li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink-700)}
.story-list li svg{width:22px;height:22px;stroke:var(--cyan-600);flex-shrink:0;margin-top:2px}
.story-body .btn{margin-top:34px}
@media(max-width:900px){.story .wrap{grid-template-columns:1fr;gap:60px}.story-media .m-badge{left:0}}

/* ---------- audience cards ---------- */
.audience{background:var(--bone)}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.aud-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px 32px;
  transition:transform .4s var(--ease),box-shadow .4s;position:relative;overflow:hidden}
.aud-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.aud-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.aud-card:hover::before{transform:scaleX(1)}
.aud-card .ic{width:56px;height:56px;border-radius:14px;background:var(--cyan-050);display:grid;place-items:center;margin-bottom:22px}
.aud-card .ic svg{width:27px;height:27px;stroke:var(--cyan-600)}
.aud-card h3{font-size:23px}
.aud-card p{color:var(--muted);font-size:15px;margin-top:12px}
@media(max-width:860px){.aud-grid{grid-template-columns:1fr}}

/* ---------- products — Netflix-style horizontal accordion (from 5blox) ---------- */
.prod-stack{display:flex;gap:3px;height:clamp(560px,78vh,860px);overflow:hidden;
  background:var(--ink);margin-top:52px;width:100vw;margin-left:calc(50% - 50vw)}
.prod-card{flex:1;position:relative;overflow:hidden;cursor:pointer;min-width:0;background:var(--ink);
  color:#fff;text-decoration:none;isolation:isolate;
  transition:flex .65s cubic-bezier(.5,0,.1,1)}
.prod-card:hover,.prod-card:focus-visible{flex:4.4}
.prod-stack:hover .prod-card:not(:hover) img{filter:brightness(.62) saturate(.85)}
.prod-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s ease;will-change:transform,filter}
.prod-card:hover img{transform:scale(1.05)}
.prod-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .4s ease;
  background:linear-gradient(180deg,rgba(11,11,13,.14) 0%,rgba(11,11,13,.10) 42%,rgba(11,11,13,.86) 100%)}
/* collapsed label — index + vertical name */
.pc-collapsed{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2vw,30px) clamp(15px,1.3vw,24px);pointer-events:none;transition:opacity .35s ease}
.pc-collapsed .pc-num{font-weight:600;font-size:clamp(11px,.9vw,13px);letter-spacing:.18em;color:var(--cyan);
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.pc-collapsed .pc-vlabel{align-self:flex-start;writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:600;font-size:clamp(11px,.85vw,13px);letter-spacing:.3em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;max-height:72%}
.prod-card:hover .pc-collapsed{opacity:0}
/* expanded content — fades in on hover */
.pc-expanded{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease .18s,transform .55s cubic-bezier(.2,.8,.2,1) .15s}
.prod-card:hover .pc-expanded,.prod-card:focus-visible .pc-expanded{opacity:1;transform:none;pointer-events:auto}
.pc-expanded .pc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px;white-space:nowrap}
.pc-expanded .pc-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--cyan)}
.pc-expanded h3{font-size:clamp(28px,3.2vw,46px);line-height:1;letter-spacing:-.03em;color:#fff;
  margin-bottom:14px;white-space:nowrap}
.pc-expanded .pc-meta{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.pc-expanded .pc-meta .dot{width:4px;height:4px;background:var(--cyan)}
.pc-go{flex:none;width:clamp(46px,3.4vw,56px);height:clamp(46px,3.4vw,56px);
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s,border-color .3s,color .3s}
.pc-go svg{width:18px;height:18px;transition:transform .3s ease}
.prod-card:hover .pc-go{background:var(--cyan);border-color:var(--cyan);color:#fff}
.prod-card:hover .pc-go svg{transform:translateX(3px)}
.prod-hint{margin-top:22px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted-2)}
/* mobile: stack vertically — accordion needs hover */
@media(max-width:820px){
  .prod-stack{flex-direction:column;height:auto;background:transparent;gap:14px;border-radius:0}
  .prod-card{flex:none;height:58vh;min-height:340px;border-radius:var(--radius)}
  .prod-card:hover{flex:none}
  .prod-stack:hover .prod-card:not(:hover) img{filter:none}
  .pc-collapsed{opacity:0}
  .pc-expanded{opacity:1;transform:none;pointer-events:auto}
  .prod-hint{display:none}
}

/* ---------- comparison ---------- */
.compare{background:var(--ink);color:#fff}
.compare .section-head.center .lead{color:var(--muted-2)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px;max-width:960px;margin-left:auto;margin-right:auto}
.cmp-col{border-radius:var(--radius-lg);padding:38px 34px}
.cmp-col.typical{background:var(--ink-800);border:1px solid var(--ink-700)}
.cmp-col.premium{background:linear-gradient(160deg,#062b38,#083a4b);border:1.5px solid var(--cyan-600);position:relative}
.cmp-col .cmp-tag{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;margin-bottom:6px}
.cmp-col.typical .cmp-tag{color:var(--muted-2)}
.cmp-col.premium .cmp-tag{color:var(--cyan)}
.cmp-col h3{font-size:26px;margin-bottom:24px}
.cmp-col ul{list-style:none;display:grid;gap:16px}
.cmp-col li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.cmp-col li svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.cmp-col.typical li{color:#a7a7ae}
.cmp-col.typical li svg{stroke:#5c5c63}
.cmp-col.premium li{color:#eafaff}
.cmp-col.premium li svg{stroke:var(--cyan)}
.cmp-col.premium .badge-best{position:absolute;top:-13px;right:30px;background:var(--cyan);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:100px}
@media(max-width:760px){.cmp-grid{grid-template-columns:1fr}}

/* ---------- projects / before-after ---------- */
.projects .proj-list{display:grid;gap:70px;margin-top:60px}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.proj.rev .proj-info{order:-1}
.proj-media{display:flex;gap:12px;height:clamp(360px,42vw,540px)}
.proj-shot{flex:1;min-width:0;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.proj-shot img{width:100%;height:100%;object-fit:cover;display:block}
.proj-shot .lbl{position:absolute;top:12px;left:12px;background:rgba(11,11,13,.78);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;backdrop-filter:blur(4px)}
.proj-shot .lbl.after{background:var(--cyan);color:#fff}
.proj-info{background:var(--bone);border-radius:var(--radius-lg);padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
.proj-info .p-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-600);font-weight:600}
.proj-info h3{font-size:30px;margin:12px 0 14px}
.proj-info p{color:var(--muted);font-size:15.5px}
.proj-info .p-meta{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.proj-info .p-meta div b{font-family:var(--serif);font-size:22px;color:var(--ink);display:block;line-height:1}
.proj-info .p-meta div span{font-size:12.5px;color:var(--muted);margin-top:4px;display:block}
@media(max-width:860px){.proj{grid-template-columns:1fr}.proj.rev .proj-info{order:0}}

/* ---------- how it works ---------- */
.how{background:var(--bone)}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;counter-reset:step}
.how-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 28px;position:relative}
.how-step .num{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--cyan-600);
  width:44px;height:44px;border:1.5px solid var(--cyan);border-radius:50%;display:grid;place-items:center;margin-bottom:22px}
.how-step h3{font-size:20px}
.how-step p{color:var(--muted);font-size:14.5px;margin-top:10px}
.how-step:not(:last-child)::after{content:"";position:absolute;top:56px;right:-13px;width:26px;height:1.5px;
  background:var(--line);z-index:2}
@media(max-width:900px){.how-grid{grid-template-columns:1fr 1fr}.how-step::after{display:none!important}}
@media(max-width:520px){.how-grid{grid-template-columns:1fr}}

/* ---------- promise ---------- */
.promise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 60px;margin-top:56px}
.promise-item{display:flex;gap:20px;align-items:flex-start;padding-bottom:28px;border-bottom:1px solid var(--line)}
.promise-item .ic{width:52px;height:52px;border-radius:13px;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.promise-item .ic svg{width:24px;height:24px;stroke:var(--cyan)}
.promise-item h3{font-size:21px}
.promise-item p{color:var(--muted);font-size:15px;margin-top:8px}
@media(max-width:760px){.promise-grid{grid-template-columns:1fr}}

/* ---------- finishes gallery ---------- */
.finishes{background:var(--ink);color:#fff}
.fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.fin{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm)}
.fin img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.fin:hover img{transform:scale(1.07)}
.fin .fin-name{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 16px;color:#fff;
  background:linear-gradient(to top,rgba(11,11,13,.85),transparent);font-size:14px}
.fin .fin-name b{display:block;font-family:var(--serif);font-size:18px}
.fin .fin-name span{font-size:12px;color:var(--muted-2)}
.finishes .fin-cta{text-align:center;margin-top:48px}
@media(max-width:860px){.fin-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews ---------- */
.reviews .rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.reviews .rv-score{display:flex;align-items:center;gap:16px;background:var(--bone);border:1px solid var(--line);
  border-radius:100px;padding:12px 22px}
.reviews .rv-score .stars{color:var(--gold);letter-spacing:2px;font-size:17px}
.reviews .rv-score b{font-family:var(--serif);font-size:22px}
.reviews .rv-score span{font-size:13px;color:var(--muted)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.rv-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-sm)}
.rv-card .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.rv-card p{font-size:15.5px;color:var(--ink-700);margin:16px 0 22px;line-height:1.65}
.rv-card .rv-by{display:flex;align-items:center;gap:12px}
.rv-card .rv-av{width:42px;height:42px;border-radius:50%;background:var(--cyan);color:#fff;
  display:grid;place-items:center;font-weight:700;font-family:var(--serif)}
.rv-card .rv-by b{font-size:15px}
.rv-card .rv-by span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.rv-card .rv-by span svg{width:13px;height:13px}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}

/* ---------- financing band ---------- */
.finance{position:relative;color:#fff;border-radius:0;background-color:var(--ink);
  background-image:
    linear-gradient(100deg, rgba(9,10,12,.97) 0%, rgba(9,10,12,.9) 46%, rgba(14,30,38,.72) 100%),
    url("assets/financing-detail.webp");
  background-size:cover;background-position:center right;background-repeat:no-repeat}
.finance .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:center;padding:80px 28px}
.finance h2{font-size:clamp(28px,3.4vw,44px)}
.finance p{color:#c2c8cc;font-size:17px;margin-top:18px;max-width:520px}
.finance .fin-terms{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.finance .fin-terms .term{border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 20px;text-align:center}
.finance .fin-terms .term b{font-family:var(--serif);font-size:26px;color:var(--cyan);display:block;line-height:1}
.finance .fin-terms .term span{font-size:12px;color:var(--muted-2)}
.finance .fin-right{text-align:center}
.finance .fin-right .btn{width:100%}
.finance .fin-note{font-size:12px;color:var(--muted-2);margin-top:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.finance p,.finance h2{text-shadow:0 1px 10px rgba(0,0,0,.35)}
@media(max-width:860px){.finance .wrap{grid-template-columns:1fr;gap:34px}}

/* ---------- area + faq ---------- */
.area .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.area-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.area-map iframe{width:100%;height:340px;border:0;display:block}
.area .cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.area .cities span{background:var(--bone);border:1px solid var(--line);border-radius:100px;
  padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--ink-700)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:22px 40px 22px 0;
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);position:relative;display:block}
.faq-q::after{content:"+";position:absolute;right:0;top:20px;font-family:var(--sans);font-size:26px;
  font-weight:400;color:var(--cyan-600);transition:transform .3s}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .4s var(--ease)}
.faq-a p{color:var(--muted);font-size:15.5px;padding:0 0 4px}
.faq-item.open .faq-a{max-height:240px;padding-bottom:22px}
@media(max-width:860px){.area .wrap{grid-template-columns:1fr;gap:48px}}

/* ---------- final CTA ---------- */
.finalcta{background:var(--bone)}
.finalcta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.finalcta h2{font-size:clamp(32px,4vw,54px)}
.finalcta h2 em{font-style:normal;color:var(--cyan-600)}
.finalcta .lead{color:var(--muted);font-size:18px;margin-top:20px;max-width:460px}
.finalcta .fc-contact{margin-top:32px;display:grid;gap:18px}
.finalcta .fc-row{display:flex;gap:14px;align-items:flex-start}
.finalcta .fc-row .ic{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex-shrink:0}
.finalcta .fc-row .ic svg{width:20px;height:20px;stroke:var(--cyan-600)}
.finalcta .fc-row b{font-size:15px;display:block}
.finalcta .fc-row span{font-size:14.5px;color:var(--muted)}
.finalcta .fc-row a{font-weight:600}
.fc-card{background:#fff;border-radius:var(--radius-lg);padding:40px 38px;box-shadow:var(--shadow)}
.fc-card h3{font-size:26px;margin-bottom:6px}
.fc-card .fc-sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.fc-card form{display:grid;gap:14px}
.fc-card .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fc-card input,.fc-card select,.fc-card textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:12px;font-family:var(--sans);font-size:15px;background:var(--bone);color:var(--ink);resize:vertical}
.fc-card input:focus,.fc-card select:focus,.fc-card textarea:focus{outline:none;border-color:var(--cyan);background:#fff}
.fc-card button{width:100%;margin-top:4px}
@media(max-width:860px){.finalcta .wrap{grid-template-columns:1fr;gap:44px}}

/* ---------- footer ---------- */
footer{background:var(--green);color:#cfdcea;padding:74px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px}
.foot-brand img{height:30px;margin-bottom:20px}
.foot-brand p{font-size:14.5px;color:#b7c8db;max-width:280px}
.foot-social{display:flex;gap:12px;margin-top:22px}
.foot-social a{width:38px;height:38px;border:2px solid rgba(255,255,255,.3);border-radius:var(--radius);display:grid;place-items:center;transition:.2s}
.foot-social a:hover{border-color:var(--cyan);background:var(--cyan)}
.foot-social svg{width:17px;height:17px;stroke:#fff}
.foot-col h4{font-family:var(--serif);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-size:14.5px;color:#cfdcea;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{background:var(--cyan);padding:22px 0;font-size:13px;color:#fff}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* wireframe note banner */
.wf-note{background:#111;color:#7cd; text-align:center;font-size:12.5px;padding:8px 20px;letter-spacing:.03em;
  font-family:var(--sans);border-bottom:1px solid #222}
.wf-note b{color:#fff}

/* ============================================================
   FLAT / BRANDED SYSTEM — solid color blocks, hard edges, no blur.
   Deliberately un-minimal: heavy branding over modern glass effects.
   ============================================================ */

/* flat, bold cards — no frost, no soft glow */
.aud-card,.how-step,.rv-card,.fc-card{
  background:#fff!important;
  border:2px solid var(--ink)!important;
  box-shadow:5px 5px 0 var(--cyan)!important;
}
.aud-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cyan)!important}
.aud-card .ic{background:var(--cyan);border-radius:var(--radius)}
.aud-card .ic svg{stroke:#fff}

/* solid chips on light */
.reviews .rv-score{background:var(--ink);color:#fff;border-radius:var(--radius);padding:10px 16px}
.reviews .rv-score b,.reviews .rv-score span{color:#fff}
.area .cities span{background:var(--ink);color:#fff;border-radius:var(--radius)}
.faq-item{border-bottom:2px solid var(--line)}

/* solid color panels on dark: comparison + financing */
.cmp-col.premium{
  background:var(--green)!important;
  border:2px solid var(--cyan)!important;
  box-shadow:6px 6px 0 var(--cyan)!important;
}
.cmp-col.typical{background:var(--ink-800)!important;border:2px solid var(--ink-700)!important}
.finance .fin-terms .term{background:rgba(255,255,255,.08);border:2px solid var(--cyan)!important;border-radius:var(--radius)}

/* ---------- HERO: bold, static, high-contrast — no motion, no glow ---------- */
.hero-bg img{opacity:.5;filter:contrast(1.08) saturate(1.1)}
.hero-bg::after{background:
  linear-gradient(100deg,rgba(1,10,20,.92) 0%,rgba(1,10,20,.78) 46%,rgba(1,10,20,.4) 100%)}
.leadcard{position:relative;background:#fff!important;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--cyan)!important}
.leadcard input,.leadcard select{background:var(--bone)}
/* solid trust bar */
.hero .hero-trust{background:var(--ink);border:2px solid var(--cyan);
  border-radius:var(--radius);padding:20px 26px;gap:26px}
.hero .hero-trust .t{position:relative;padding-right:26px}
.hero .hero-trust .t:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:2px;height:34px;background:rgba(255,255,255,.2)}
/* solid rating card — hangs off the form's lower-left */
.hero-float{position:absolute;left:22px;bottom:-30px;z-index:5;display:flex;align-items:center;gap:13px;
  background:var(--green);border:2px solid var(--ink);border-radius:var(--radius);padding:13px 18px}
.hero-float .hf-ic{width:40px;height:40px;border-radius:var(--radius);background:var(--cyan);display:grid;place-items:center;flex-shrink:0}
.hero-float .hf-ic svg{width:20px;height:20px;stroke:#fff}
.hero-float b{font-size:14px;color:#fff;display:block;line-height:1.2}
.hero-float span{font-size:11.5px;color:#dce6f0}
@media(max-width:1180px){.hero-float{display:none}}
@media(prefers-reduced-motion:reduce){.hero-bg img{animation:none}}

/* ============================================================
   SUB-PAGE COMPONENTS (shared across interior pages)
   ============================================================ */

/* --- interior page hero --- */
.subhero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:88px 0 74px}
.subhero-bg{position:absolute;inset:0;z-index:0}
.subhero-bg img{width:100%;height:100%;object-fit:cover;opacity:.34;
  animation:heroZoom 30s ease-in-out infinite alternate;transform-origin:60% 40%}
.subhero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.78) 0%,rgba(11,11,13,.7) 40%,rgba(11,11,13,.94) 100%)}
.subhero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(720px 420px at 82% 12%, rgba(212,42,42,.24), transparent 60%)}
.subhero .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted-2);margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--muted-2);transition:color .2s}
.crumb a:hover{color:var(--cyan)}
.crumb .sep{opacity:.45}
.crumb .cur{color:#fff}
.subhero .eyebrow{color:var(--cyan)}
.subhero .eyebrow::before{background:var(--cyan)}
.subhero h1{font-size:clamp(38px,5vw,66px);font-weight:700;letter-spacing:-.03em;margin-top:18px;max-width:16ch}
.subhero h1 em{font-style:normal;color:var(--cyan)}
.subhero p.sub{color:#c9c9d1;font-size:18px;margin-top:20px;max-width:600px}
.subhero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.subhero-stats{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap}
.subhero-stats .t{display:flex;flex-direction:column;line-height:1.15}
.subhero-stats .t b{font-size:26px;color:#fff;font-weight:700}
.subhero-stats .t span{font-size:12.5px;color:var(--muted-2)}

/* --- generic prose --- */
.prose{max-width:760px}
.prose p{color:var(--ink-700);font-size:17px;margin-top:18px;line-height:1.7}
.prose p:first-child{margin-top:0}
.prose h3{font-size:26px;margin-top:38px;letter-spacing:-.02em}
.prose ul{list-style:none;margin-top:20px;display:grid;gap:14px}
.prose ul li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink-700)}
.prose ul li svg{width:21px;height:21px;stroke:var(--cyan-600);flex-shrink:0;margin-top:2px}

/* --- media + text split (alternating) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-media{order:-1}
.split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.split-media.tall{aspect-ratio:4/5}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-body h2{font-size:clamp(28px,3.4vw,42px);margin-top:16px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}.split.rev .split-media{order:0}}

/* --- spec / detail cards grid --- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.spec{background:rgba(255,255,255,.58);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);padding:32px 28px;
  box-shadow:0 22px 54px rgba(11,11,13,.08),inset 0 1px 0 rgba(255,255,255,.85)}
.spec .ic{width:52px;height:52px;border-radius:13px;background:var(--cyan-050);display:grid;place-items:center;margin-bottom:20px}
.spec .ic svg{width:25px;height:25px;stroke:var(--cyan-600)}
.spec h3{font-size:20px}
.spec p{color:var(--muted);font-size:14.5px;margin-top:10px}
@media(max-width:860px){.specs{grid-template-columns:1fr}}

/* --- shared bottom CTA band --- */
.cta-band{position:relative;background:var(--ink);color:#fff;text-align:center;padding:96px 0;overflow:hidden;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(680px 460px at 50% 0%, rgba(212,42,42,.28), transparent 62%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band .eyebrow{color:var(--cyan);justify-content:center}
.cta-band .eyebrow::before,.cta-band .eyebrow::after{background:var(--cyan)}
.cta-band h2{font-size:clamp(30px,4vw,52px);margin-top:16px}
.cta-band h2 em{font-style:normal;color:var(--cyan)}
.cta-band p{color:#c2c8cc;font-size:18px;margin-top:18px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* --- active nav state --- */
.nav ul a.active{color:var(--cyan-600)}
.nav ul a.active::after{width:100%}

/* --- content section tints --- */
.section.tint{background:var(--bone)}

/* ============================================================
   MOBILE NAV (off-canvas)
   ============================================================ */
.mm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190;opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s}
.mm-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;height:100%;width:min(86vw,380px);background:var(--ink);color:#fff;
  z-index:200;transform:translateX(100%);transition:transform .42s var(--ease);
  padding:32px 32px 40px;box-shadow:-30px 0 80px rgba(0,0,0,.5);overflow-y:auto;display:flex;flex-direction:column}
.mobile-menu.open{transform:none}
.mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mm-head img{height:26px}
.mm-close{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center}
.mm-close svg{width:24px;height:24px;stroke:#fff}
.mobile-menu nav a{display:block;font-size:20px;font-weight:600;padding:15px 0;border-bottom:1px solid var(--ink-700);
  color:#fff;transition:color .2s}
.mobile-menu nav a:hover,.mobile-menu nav a.active{color:var(--cyan)}
.mm-cta{margin-top:auto;padding-top:26px;display:grid;gap:12px}
.mm-cta .callnum{color:#fff;justify-content:center;font-size:17px}
.mm-cta .callnum svg{stroke:var(--cyan)}
.mobile-menu,.mm-backdrop{display:none}
@media(max-width:1080px){.mobile-menu,.mm-backdrop{display:flex}.mm-backdrop{display:block}}
body.mm-open{overflow:hidden}


/* ============================================================
   INLAND RENOVATION & CONSTRUCTION — brand overrides
   Blue = structural accent · Green = positive/energy accent
   ============================================================ */

/* bigger logo (wordmark w/ tagline is wide) */
.nav .logo img{height:54px}
.foot-brand img{height:56px}
.mm-head img{height:40px}

/* logo lockup in the final CTA */
.fc-logo{height:64px;width:auto;margin-bottom:22px;display:block}

/* large decorative logo watermark in the dark band */
.finance{overflow:hidden}
.band-logo{position:absolute;right:-40px;bottom:-30px;width:min(46vw,560px);opacity:.06;
  z-index:0;pointer-events:none;filter:grayscale(1) brightness(3)}
.finance .wrap{position:relative;z-index:1}
@media(max-width:860px){.band-logo{width:80vw;right:-10px;bottom:-10px;opacity:.05}}

/* GREEN as the positive accent -------------------------------- */
/* offer strip -> energetic green band with dark text */
.offerstrip{background:var(--green);color:#FFFFFF}
.offerstrip .o svg{stroke:#FFFFFF}
.offerstrip .dot{background:#FFFFFF;opacity:.45}

/* before/after: keep Before neutral, After = green */
.proj-shot .lbl.after{background:var(--green);color:#FFFFFF}

/* "our way" badge — red pops against the navy premium card */
.cmp-col.premium .badge-best{background:var(--cyan);color:#FFFFFF;border-radius:var(--radius)}

/* checkmarks read green (positive) */
.story-list li svg,
.cmp-col.premium li svg,
.prose ul li svg{stroke:var(--green-600)}

/* hero headline highlight — bright blue pops on the dark photo bg (navy is too dark to read here) */
.hero h1 em{color:var(--water)}
.subhero h1 em{color:var(--water)}

/* hero trust stat numbers get a subtle green tint */
.hero .hero-trust .t b{color:#fff}

/* green accent bar under section eyebrows stays blue; add green cta-band underline glow */
.cta-band::before{background:radial-gradient(680px 460px at 50% 0%, rgba(212,42,42,.28), transparent 62%)}

/* buttons: primary blue keeps white text (set via #00181F->#fff swap) */
.btn-primary{color:#fff}
.btn-primary:hover{background:#A81F1F}

/* a secondary green button variant (used for select CTAs) */
.btn-green{background:var(--green);color:var(--ink);box-shadow:0 12px 30px rgba(30,95,168,.3)}
.btn-green:hover{background:#2A72C4;transform:translateY(-2px)}

/* reviews stars stay gold; verified-review star mark -> green */
.rv-card .rv-by span svg{fill:var(--green-600)!important}

/* ============================================================
   DARKER THEME — a couple of light sections moved to ink
   (kept isolated so no two dark sections sit back-to-back)
   ============================================================ */

/* --- About / Story on ink --- */
.story{background:var(--ink);color:#fff}
.story .eyebrow{color:var(--cyan)}
.story .eyebrow::before{background:var(--cyan)}
.story-body h2{color:#fff}
.story .lead{color:#c2c8cc}
.story-list li{color:#d8d8de}
.story-media .m-badge{background:var(--ink-800);border:1px solid var(--ink-700)}

/* --- How It Works on ink (dark glass step cards) --- */
.how{background:var(--ink);color:#fff}
.how .eyebrow.center{color:var(--cyan)}
.how .eyebrow.center::before,.how .eyebrow.center::after{background:var(--cyan)}
.how .section-head h2{color:#fff}
.how::before{background:
  radial-gradient(600px 440px at 10% 12%, rgba(212,42,42,.20), transparent 60%),
  radial-gradient(680px 520px at 92% 90%, rgba(30,95,168,.12), transparent 62%)}
.how .how-step{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 22px 54px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)!important}
.how .how-step h3{color:#fff}
.how .how-step p{color:#b4b4bb}
.how .how-step .num{color:var(--cyan);border-color:var(--cyan)}
.how .how-step:not(:last-child)::after{background:rgba(255,255,255,.16)}


/* ============================================================
   INTERIOR PAGES — subpage hero, prose, services, gallery, blog
   (added for the multi-page build: about/services/gallery/
    contact/blog/legal)
   ============================================================ */

/* --- shared subpage hero (dark, image-backed) --- */
.subhero{position:relative;background:var(--ink);color:#fff;padding:96px 0 84px;overflow:hidden}
.subhero-bg{position:absolute;inset:0;z-index:0}
.subhero-bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.subhero::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(720px 420px at 12% 0%, rgba(212,42,42,.30), transparent 62%),
    radial-gradient(680px 460px at 96% 100%, rgba(30,95,168,.14), transparent 64%),
    linear-gradient(180deg, rgba(11,11,13,.72), rgba(11,11,13,.86))}
.subhero .wrap{position:relative;z-index:2;max-width:900px}
.subhero .eyebrow{color:var(--cyan)}
.subhero .eyebrow::before{background:var(--cyan)}
.subhero h1{font-size:clamp(34px,5.2vw,62px);margin:16px 0 18px;color:#fff}
.subhero h1 em{color:var(--green);font-style:normal}
.subhero p{color:#c8ccd2;max-width:660px;font-size:clamp(16px,1.5vw,19px)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted-2);
  letter-spacing:.02em;margin-bottom:20px}
.crumbs a{color:#cfd3d8}.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* --- prose (legal pages + blog article body) --- */
.prose{max-width:800px;margin:0 auto}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:44px 0 14px}
.prose h3{font-size:20px;margin:30px 0 10px}
.prose p{color:var(--ink-700);margin-bottom:16px;font-size:17px}
.prose ul{list-style:none;margin:8px 0 20px;display:grid;gap:12px}
.prose ul li{position:relative;padding-left:32px;color:var(--ink-700)}
.prose ul li svg{position:absolute;left:0;top:3px;width:20px;height:20px;fill:none;stroke-width:2}
.prose a{color:var(--cyan-600);text-decoration:underline;text-underline-offset:3px}
.prose .lead{font-size:19px;color:var(--muted)}
.legal p{font-size:15.5px;color:var(--muted)}
.legal h2{font-size:22px}

/* --- services: alternating feature rows --- */
.svc-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.svc-detail + .svc-detail{margin-top:96px}
.svc-detail.rev .svc-media{order:2}
.svc-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.svc-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4}
.svc-media .tag{position:absolute;top:18px;left:18px;background:var(--cyan);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 15px;border-radius:100px}
.svc-copy h2{font-size:clamp(26px,3vw,40px)}
.svc-copy .lead{color:var(--muted);font-size:18px;margin:16px 0 22px}
.svc-copy ul{list-style:none;display:grid;gap:13px;margin-bottom:28px}
.svc-copy ul li{position:relative;padding-left:32px;color:var(--ink-700);font-weight:500}
.svc-copy ul li svg{position:absolute;left:0;top:3px;width:20px;height:20px;fill:none;stroke:var(--green-600);stroke-width:2}
@media(max-width:860px){
  .svc-detail{grid-template-columns:1fr;gap:30px}
  .svc-detail.rev .svc-media{order:0}
  .svc-detail + .svc-detail{margin-top:64px}
}

/* --- gallery grid (uniform, denser) --- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-grid .fin{aspect-ratio:4/3}
.gal-grid .fin img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}

/* --- video placeholders (client to supply) --- */
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vid{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--ink-800);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted-2)}
.vid video{width:100%;height:100%;object-fit:cover}
.vid .vph{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px}
.vid .vph svg{width:44px;height:44px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.vid .vph span{font-size:13px;letter-spacing:.04em}
@media(max-width:640px){.vid-grid{grid-template-columns:1fr}}

/* --- blog index cards --- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.05)}
.post-card .pc-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.post-card .pc-date{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-600);font-weight:600}
.post-card h3{font-size:20px;margin:10px 0 10px;line-height:1.18}
.post-card p{color:var(--muted);font-size:15px;flex:1}
.post-card .pc-read{margin-top:16px;font-weight:600;color:var(--cyan-600);font-size:14px;display:inline-flex;align-items:center;gap:7px}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr}}

/* --- article (single blog post) --- */
.article-hero{border-bottom:1px solid var(--line)}
.article-meta{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:10px}
.article-fig{border-radius:var(--radius-lg);overflow:hidden;margin:0 auto 40px;max-width:900px;box-shadow:var(--shadow)}
.article-fig img{width:100%;aspect-ratio:16/8;object-fit:cover}

/* --- contact split (reuses finalcta primitives) --- */
.contact-info .ci-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .ci-row .ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--cyan-050);border:1px solid var(--line)}
.contact-info .ci-row .ic svg{width:20px;height:20px;stroke:var(--cyan-600);fill:none;stroke-width:2}
.contact-info .ci-row b{display:block;font-size:15px}
.contact-info .ci-row span,.contact-info .ci-row a{color:var(--muted);font-size:15px}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);margin-top:26px;height:280px}
.contact-map iframe{width:100%;height:100%;border:0;display:block}


/* ============================================================
   PROJECT DETAIL PAGE — editorial template (project-1.html)
   Magazine-style: cinematic hero, lede + facts, full-bleed
   features, portrait/landscape splits, quote band, gallery.
   ============================================================ */
:root{ --pj-pad: clamp(72px,9vw,132px); }
.pj-label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:12px}
.pj-label::before{content:"";width:30px;height:1px;background:var(--cyan)}
.pj-label .num{color:var(--cyan-600)}

/* ---- HERO ---- */
.pj-hero{position:relative;height:clamp(560px,82vh,860px);overflow:hidden;background:var(--ink)}
.pj-hero-media,.pj-hero-media video,.pj-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-hero-media img{object-position:center 60%}
.pj-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,11,.92) 0%,rgba(8,9,11,.5) 34%,rgba(8,9,11,.12) 62%,rgba(8,9,11,.3) 100%)}
.pj-hero-inner{position:absolute;inset:0;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:0 28px calc(clamp(40px,7vh,80px));display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.pj-hero .pj-label{color:rgba(255,255,255,.9);margin-bottom:20px}
.pj-hero .pj-label .num{color:var(--green)}
.pj-hero h1{font-size:clamp(40px,7vw,92px);line-height:.98;letter-spacing:-.035em;margin:0;max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.pj-hero h1 em{font-style:normal;color:var(--green)}
.pj-hero-meta{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,60px);margin-top:clamp(28px,5vh,48px);
  padding-top:24px;border-top:1px solid rgba(255,255,255,.22)}
.pj-hero-meta div{display:grid;gap:5px}
.pj-hero-meta dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.pj-hero-meta dd{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.95)}

/* ---- OVERVIEW + FACTS ---- */
.pj-overview{padding:var(--pj-pad) 0}
.pj-og{display:grid;grid-template-columns:1fr;gap:clamp(38px,5vw,72px)}
@media(min-width:900px){.pj-og{grid-template-columns:1.5fr 1fr;align-items:start}}
.pj-lede h2{font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;margin:18px 0 24px;max-width:18ch}
.pj-lede h2 em{font-style:normal;color:var(--cyan-600)}
.pj-lede p{color:var(--muted);font-size:clamp(15px,1.35vw,18px);line-height:1.75;max-width:60ch}
.pj-lede p+p{margin-top:16px}
.pj-facts{border-top:2px solid var(--ink);padding-top:20px}
.pj-facts .row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.pj-facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding-top:3px;white-space:nowrap;font-weight:600}
.pj-facts dd{font-size:14px;font-weight:500;text-align:right;line-height:1.5}

/* ---- FIGURES ---- */
.pj-fig{position:relative;overflow:hidden;border-radius:var(--radius-lg)}
.pj-fig img{width:100%;height:100%;object-fit:cover}
.pj-cap{display:flex;gap:14px;align-items:baseline;margin-top:14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pj-cap .fnum{color:var(--cyan-600);font-weight:600}

/* full-bleed feature */
.pj-bleed{padding:clamp(30px,5vw,70px) 0}
.pj-bleed .frame{width:min(100% - 56px,1600px);margin:0 auto}
.pj-bleed.edge .frame{width:100%}
.pj-bleed.edge .pj-fig{border-radius:0}
.pj-bleed .pj-fig{aspect-ratio:16/9}
.pj-bleed .frame .pj-cap{max-width:var(--maxw);margin:14px auto 0;padding:0 28px}

/* split: portrait + landscape */
.pj-split{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.5vw,40px);align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:clamp(30px,5vw,70px) 28px}
@media(min-width:860px){
  .pj-split{grid-template-columns:.8fr 1.2fr}
  .pj-split.flip{grid-template-columns:1.2fr .8fr}
  .pj-split.flip .pj-portrait{order:2}
}
.pj-portrait .pj-fig{aspect-ratio:3/4}
.pj-land .pj-fig{aspect-ratio:4/3}
.pj-copy{align-self:center}
.pj-copy h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;margin-bottom:12px}
.pj-copy p{color:var(--muted);font-size:16px;line-height:1.7;max-width:46ch}

/* ---- QUOTE BAND ---- */
.pj-quote{position:relative;padding:clamp(90px,13vw,170px) 0;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.pj-quote .qbg{position:absolute;inset:0;z-index:-2}
.pj-quote .qbg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.pj-quote::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,9,11,.9),rgba(11,26,38,.62))}
.pj-quote .narrow{max-width:1000px;margin:0 auto;padding:0 28px}
.pj-quote blockquote{font-size:clamp(26px,4vw,52px);line-height:1.18;letter-spacing:-.02em;font-weight:600;max-width:20ch}
.pj-quote blockquote em{font-style:normal;color:var(--green)}
.pj-quote cite{display:flex;align-items:center;gap:14px;margin-top:34px;font-style:normal;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.pj-quote cite::before{content:"";width:34px;height:1px;background:var(--green)}

/* ---- GALLERY (rigid rows, no gaps/holes) ---- */
.pj-gallery-sec{padding:var(--pj-pad) 0;background:var(--bone)}
.pj-gallery-head{max-width:var(--maxw);margin:0 auto 34px;padding:0 28px;display:flex;
  justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pj-gallery-head h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.03em}
.pj-gallery-head h2 em{font-style:normal;color:var(--cyan-600)}
.pj-gallery-head .count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pj-gallery{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;
  gap:clamp(8px,1vw,14px);align-content:flex-start}
.pj-gallery .pj-fig{flex:1 1 30%;min-width:180px;height:clamp(190px,22vw,300px);border-radius:10px}
@media(max-width:520px){.pj-gallery .pj-fig{min-width:44%;height:clamp(150px,40vw,220px)}}

/* homepage hero video montage (matches .hero-bg img treatment) */
.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.5}
@media(max-width:760px){.hero-bg video{opacity:.32}}

/* contact form fine-print (fc-card variant of .lc-fine) */
.fc-card .lc-fine{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted-2);margin-top:12px}
.fc-card .lc-fine svg{width:14px;height:14px;stroke:var(--cyan);fill:none;flex:none}

/* article hero meta sits on the dark subhero — lighten for contrast */
.subhero .article-meta{color:rgba(255,255,255,.72)}
.subhero .article-meta .fnum,.subhero .article-meta a{color:var(--green)}

/* ============================================================
   SERVICES DROPDOWN — desktop hover menu + mobile sub-links
   ============================================================ */
.nav ul li.has-drop{position:relative}
.nav ul li.has-drop>a{display:inline-flex;align-items:center}
.caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;margin-left:5px;
  transition:transform .25s var(--ease)}
.nav ul li.has-drop:hover>a .caret,.nav ul li.has-drop:focus-within>a .caret{transform:rotate(180deg)}
.nav .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;min-width:238px;display:grid;gap:2px;opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:70}
.nav ul li.has-drop:hover .drop,.nav ul li.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
.nav .drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav .drop a{padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--ink-800);white-space:nowrap}
.nav .drop a::after{content:none}
.nav .drop a:hover,.nav .drop a.active{background:var(--cyan-050);color:var(--cyan-600)}
/* mobile off-canvas sub-links */
.mobile-menu nav a.mm-sub{font-size:15px;font-weight:500;color:#b9c0c6;padding-left:20px}
.mobile-menu nav a.mm-sub:hover,.mobile-menu nav a.mm-sub.active{color:var(--cyan)}

/* ============================================================
   STICKY MOBILE CALL BAR — extremely call-conversion focused.
   Fixed to the bottom of the viewport on small screens only, so
   the phone number is always one tap away no matter how far the
   visitor has scrolled. body padding-bottom prevents it covering
   the final CTA/footer content.
   ============================================================ */
.sticky-call{display:none}
@media(max-width:760px){
  body{padding-bottom:74px}
  .sticky-call{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:var(--cyan);box-shadow:0 -8px 30px rgba(0,0,0,.35);
  }
  .sticky-call a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 10px;color:#fff;font-weight:700;font-size:16.5px;
  }
  .sticky-call a svg{width:19px;height:19px;flex:none;animation:ringPulse 1.6s ease-in-out infinite}
  .sticky-call .sc-2{background:rgba(0,0,0,.18)}
}
@keyframes ringPulse{0%,100%{transform:rotate(0)}10%{transform:rotate(-15deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.sticky-call a svg{animation:none}}

/* ============================================================
   TRUST BADGES — real CA license board + IICRC + Google review
   badges pulled from the client's own site. Heavy branding beats
   subtlety: full-size real seals, not shrunk into a corner.
   ============================================================ */
.badges{background:var(--bone);padding:56px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.badges .wrap{display:flex;align-items:center;justify-content:center;gap:60px;flex-wrap:wrap}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.badge-item img{height:70px;width:auto}
.badge-item .badge-cap{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:var(--radius);
  padding:8px 18px}

/* ============================================================
   SOLID ICON BADGES — the client's own site leads with a row of
   big flat-colored icons (fire/water/mold/disaster). Replaces a
   more "modern SaaS" hover-card pattern with something closer to
   their real, heavily-branded look.
   ============================================================ */
.svc-band{background:var(--cyan);padding:70px 0}
.svc-band .section-head h2,.svc-band .section-head .eyebrow{color:#fff}
.svc-band .section-head .eyebrow::before,.svc-band .section-head .eyebrow.center::after{background:#fff}
.svc-band .lead{color:rgba(255,255,255,.88)!important}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:52px}
.svc-item{background:#fff;border:3px solid var(--ink);border-radius:var(--radius-lg);
  padding:36px 28px;text-align:center;box-shadow:6px 6px 0 var(--ink);transition:transform .15s var(--ease)}
.svc-item:hover{transform:translate(-3px,-3px)}
.svc-item .svc-ic{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center}
.svc-item .svc-ic svg{width:40px;height:40px}
.svc-item h3{font-size:24px;margin-bottom:10px}
.svc-item p{color:var(--muted);font-size:14.5px;line-height:1.55}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}