/* inner.css — shared chrome for all inner pages (CPT singles + landing pages).
 * Layers on top of global.css; each page's own stylesheet layers on top of this.
 * Holds the inner-page hero, breadcrumb, and final-CTA band — the pieces every
 * inner page reuses (hero/final are front-page-specific in homepage.css, so they
 * live here rather than global.css). Page-specific components stay in <page>.css. */

/* ── Inner-page hero ──────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; padding:96px 0 88px; color:#F6EFDD;}
.hero-bg{position:absolute; inset:0;
  background:radial-gradient(1100px 560px at 50% -10%,rgba(201,154,59,.22),transparent 60%),
    radial-gradient(760px 520px at 80% 20%,rgba(185,28,28,.20),transparent 62%),
    linear-gradient(180deg,#181B24,#14161E 60%,#0E1016);}
.hero-photo{position:absolute; inset:0; opacity:.55;
  background:var(--img,none) center 52%/cover no-repeat;}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(43,43,43,.62),rgba(43,43,43,.86));}
.hero-inner{position:relative; z-index:3; max-width:900px; margin:0 auto; padding:0 24px; text-align:center;}
.hero h1{font-size:clamp(33px,4.8vw,56px); letter-spacing:-.01em; margin-top:14px; text-shadow:0 2px 40px rgba(0,0,0,.5);}
.hero .lede{font-size:clamp(16px,1.6vw,18.5px); color:#E7DCC6; max-width:640px; margin:20px auto 0;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px;}

/* Breadcrumb */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  font-size:14px; letter-spacing:.04em; color:#CDBF9F; margin-bottom:6px;}
.crumbs a{color:#CDBF9F;} .crumbs a:hover{color:var(--gold-soft);}
.crumbs span{color:rgba(205,191,159,.55);}

/* ── Final CTA band ───────────────────────────────────────────────────── */
.final{text-align:center; position:relative; overflow:hidden;}
.final .glow-bg{position:absolute; inset:0;
  background:radial-gradient(720px 400px at 50% 0,rgba(201,154,59,.26),transparent 60%),
    radial-gradient(620px 380px at 50% 120%,rgba(185,28,28,.20),transparent 60%);}
.final h2{font-size:clamp(30px,4.4vw,50px); color:#fff;}
.final p{color:#D8CBB0; margin:16px auto 0; max-width:560px; font-size:16.5px;}
.final .hero-cta{margin-top:30px;}
.final .resp{margin-top:18px; font-size:13px; color:#B6A988;}

@media(max-width:560px){
  .hero{padding:72px 0 60px;}
}

/* ===== Contrast fix: .choose/.ccard + commercial-segments cards sit on light
   (section--warm) backgrounds on the service pages, but their default near-white
   text is built for dark sections. On warm sections, use dark, legible text.
   Higher specificity (.section--warm ...) so it wins over the base .ccard rules. */
.section--warm .ccard{background:#FCF5E7; border-color:var(--parch-border);}
.section--warm .ccard h3{color:var(--head-brown);}
.section--warm .ccard p{color:var(--text-muted);}
.section--warm .ccard .more{color:#C8282C;} /* #193 — match homepage red card links */
/* #212/#68/#216 — lighting-type card names in all caps, standard ink;
 * only the Learn More link stays red (#193). */
.choose--types .ccard h3{text-transform:uppercase; font-size:17px; letter-spacing:.06em;}
.section--warm .choose-cta{color:var(--text-muted);}
.section--warm .choose-cta a,
.section--warm .choose-2nd a{color:var(--gold-hover);}

/* ===== Contrast fix: dark-section "areas" pills. global.css styles .pill white
   (background:#fff) for the homepage's light context, but the area / whole-house /
   HOA "where we work" pills live on dark section--night/--dusk backgrounds and only
   override the text color to cream — leaving cream text on a white pill (illegible).
   Restore the intended transparent, gold-outlined pill on dark sections.
   aria-current keeps its highlighted fill (equal specificity, defined later). */
.section--night .pill,
.section--dusk .pill{background:transparent;}