/* =========================================================================
   Ivan's Pro Painting — styles-v3.css
   LUXURY THEME LAYER. Loads AFTER styles-v2.css and only overrides look:
   colour, type, corners, borders, hero treatment, rhythm.
   styles-v2.css keeps owning layout, grids and all responsive breakpoints.

   Install: add ONE line to each page head, directly after the v2 stylesheet.
     <link rel="stylesheet" href="/styles-v3.css">
   Revert: delete that line. Nothing else in the repo changes.

   Palette: navy #0b1e35 · deep red #9e1b1b · white
   Type:    Instrument Serif (display) + Montserrat (UI) + Didact Gothic (body)
   ========================================================================= */

:root{
  --blue:#0b1e35;          /* navy — surfaces, headings, secondary buttons */
  --blue-dark:#061524;     /* deeper navy — footer, hover */
  --blue-mid:#1f5fa8;      /* mid blue — light-surface accents, links */
  --blue-pale:#8fb8e8;     /* pale blue — emphasis on navy */
  --orange:#9e1b1b;        /* DEEP RED. Fills only, never text on navy. */
  --orange-dark:#7a1414;
  --red-tint:#e0938c;      /* accent TEXT on navy (AA on #0b1e35) */
  --gold:#d8a657;          /* review stars */
  --ink:#0b1e35;
  --body:#4a5567;
  --line:#d7e0ec;
  --bg-soft:#f2f6fb;
  --radius:0;
  --shadow:none;
}

/* ---------- 1. Display typography ---------- */
h1,h2,.hero h1,.sec-head h2,.ctaband h2,.social-proof .sp-head h2,.prose h2,.guarantee h3{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.012em}
h1,.hero h1{font-size:clamp(38px,4.6vw,64px);line-height:1.03;font-weight:400}
.sec-head h2,.social-proof .sp-head h2{font-size:clamp(29px,3.2vw,46px);line-height:1.08;font-weight:400}
.ctaband h2{font-size:clamp(28px,3.1vw,44px);line-height:1.06;font-weight:400}
.prose h2{font-size:clamp(24px,2.2vw,32px);line-height:1.16;font-weight:400}
.guarantee h3{font-size:28px}
.hero h1 em{color:var(--blue-pale);font-style:italic}
h3,h4{letter-spacing:-.005em}
.sec-head p{color:var(--body)}

/* Eyebrows: small, wide-tracked, hairline-led */
.eyebrow{font-size:11.5px;letter-spacing:.28em;color:var(--blue-mid);display:flex;align-items:center;gap:14px;
  justify-content:inherit}
.eyebrow::before{content:"";flex:0 0 38px;height:1px;background:currentColor;opacity:.9}
.sec-head .eyebrow{justify-content:center}
.hero .eyebrow{color:var(--red-tint)}

/* Serif numerals wherever numbers carry the design */
.tier .yrs,.step::before,.proof .stat b{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.tier .yrs{font-size:66px;line-height:1;color:var(--ink)}
.tier.feat .yrs{color:var(--blue-pale)}
.proof .stat b{font-size:38px;color:var(--ink)}
.step::before{font-size:46px;color:#cfdcec}

/* ---------- 2. Squared corners ---------- */
.btn,.card,.card .ic,.leadcard,.leadcard input,.leadcard select,.review,.step,.tier,.tier .badge,
.faq details,.answer,.guarantee,.chips .chip,.chip-link,.trustchips .chip,.ba-card,.ba-tag,
.gallery2 img,.imgrow img,.crewgrid img,.dd-panel,.dd-link,.dd-plain,.navlink,.sp-card,
.ticks li::before,.list-check li::before{border-radius:0}

/* ---------- 3. Hairlines instead of shadows ---------- */
header.site,.leadcard,.ba-card,.card,.card:hover,.cards .card:hover,.tier,.tier.feat,
.imgrow img,.crewgrid img,.gallery2 img,.dd-panel{box-shadow:none}
.leadcard,.imgrow img,.crewgrid img,.gallery2 img,.dd-panel{border:1px solid var(--line)}
.btn:hover,.card:hover,.cards .card:hover{transform:none}
.card:hover,.cards .card:hover{border-color:var(--blue);background:#fbfcfe}
.card .ic{background:#eef3fa;color:var(--blue);border:1px solid var(--line)}
.card .more{color:var(--blue-mid);letter-spacing:.16em;font-size:11.5px}
/* Rail arrows sit over review text — they need a solid backing, not a shadow */
.sp-nav{box-shadow:0 0 0 7px var(--bg-soft);background:#fff;border-color:var(--line)}
.sp-nav:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.card .more:hover{color:var(--blue)}

/* ---------- 4. Hero: one dark navy photo treatment sitewide ---------- */
.hero{background:var(--blue)}
.hero::before{background-image:url('/img/exterior-hero-v3.webp')!important;opacity:.38}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,30,53,.96) 6%,rgba(11,30,53,.87) 44%,rgba(11,30,53,.48) 100%)}
.hero .wrap{z-index:1;padding-top:76px;padding-bottom:84px}
.hero .sub{color:#c3d2e6}
.ticks li{color:#dbe5f2}
.ticks li::before,.list-check li::before{background:var(--orange)}
.trustchips .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);font-weight:600;letter-spacing:.06em}
.hero .callrow .or{color:#9fb3cd}
@media(max-width:820px){.hero .wrap{padding-top:46px;padding-bottom:50px}}

/* ---------- 5. Buttons ---------- */
.btn{letter-spacing:.09em;font-size:15px;padding:17px 30px;color:#fff}
.btn-blue{background:var(--blue)}
.btn-blue:hover{background:var(--blue-dark)}
.mobilecall a.book{background:var(--blue)}

/* ---------- 6. Dark surfaces (navy, not near-black) ---------- */
.topbar{background:var(--blue-dark);color:#b9c6d8}
.topbar .stars{color:var(--gold)}
.ctaband{background:var(--blue)}
.ctaband p{color:#b9c6d8}
footer.site{background:#071627;color:#9aa9bd}
footer.site a{color:#ccd7e5}
footer.site a:hover{color:#fff}
.foot-legal,.foot-cities{border-top-color:rgba(255,255,255,.10)}
.foot-cities span[aria-hidden]{color:rgba(255,255,255,.18)}
.reviews,.proof,.social-proof{background:var(--bg-soft)}
.stars,.sp-stars{color:var(--gold)}

/* ---------- 7. Accent blocks ---------- */
.answer{background:#eef3fa;border:1px solid var(--line);border-left:3px solid var(--orange)}
.guarantee{border:1px solid var(--line);border-top:3px solid var(--orange);background:var(--bg-soft)}
.guarantee h3{color:var(--blue)}
.tier.feat{background:var(--blue);border:1px solid var(--blue)}
.tier.feat h3{color:#fff}
.tier.feat p{color:#c3d2e6}
.tier .badge{letter-spacing:.14em;font-size:11px}
.chips .chip{font-weight:600;letter-spacing:.04em}
.chip-link:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.faq summary::after{color:var(--orange)}
.navlink[aria-current=page]::after{background:var(--orange)}
.head-cta .phone .num{color:var(--ink)}
.dd-link:hover{color:var(--blue)}
a{color:var(--blue-mid)}
a:hover{color:var(--blue)}

/* ---------- 8. Rhythm ---------- */
main > section{padding-top:92px;padding-bottom:92px}
main > section.ctaband{padding-top:100px;padding-bottom:100px}
@media(max-width:720px){main > section{padding-top:54px;padding-bottom:54px}}
.sec-head{margin-bottom:50px}
.gallery2 figcaption{letter-spacing:.13em;text-transform:uppercase;font-size:11px;color:#6c7a8c;
  font-family:'Montserrat',sans-serif}

/* ---------- 9. OPTIONAL: image-topped service cards ----------
   Add <img> as the first child of a .card and it becomes the mockup's
   photo card. Cards without an image are unaffected. */
.card:has(>img){padding:0 0 30px;overflow:hidden}
.card:has(>img)>img{width:100%;height:200px;object-fit:cover;margin-bottom:22px;display:block}
.card:has(>img)>h3,.card:has(>img)>p,.card:has(>img)>.more{margin-left:24px;margin-right:24px}