/* Lee's Air, Plumbing, Heating & Roofing, redesign design system */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --navy: #0f3448;
  --navy-2: #16455d;
  --navy-3: #1d5773;
  --gold: #b6aa72;
  --gold-light: #d2c894;
  --cream: #f5f2e6;
  --cream-2: #efe9d9;
  --white: #ffffff;
  --text-dark: #12303f;
  --text-muted: #4a616e;
  --text-on-dark: #f3f1e8;
  --text-on-dark-muted: #b9c2cf;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(16,35,63,0.15);
  --max-w: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Work Sans', -apple-system, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: 'Inter', -apple-system, 'Work Sans', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.022em;
}
/* Display face, reserved for full-bleed hero type sitting over video. */
.display,
.videopage .hero-copy h1,
.video-hero h1 {
  font-family: 'Archivo Black', 'Work Sans', sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: var(--text-on-dark-muted);
  font-size: 13px;
}
.topbar .wrap { display: flex; justify-content: flex-end; gap: 22px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: var(--text-on-dark); font-weight: 600; }
.topbar span { opacity: .7; margin-right: 4px; }

/* ---------- Nav ---------- */
nav.mainnav {
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  position: sticky;
  top: 0;
  z-index: 70;
}
nav.mainnav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 18px;
  max-width: 1320px;
}
.brand img { height: 44px; width: auto; }
.navlinks { display: flex; gap: 28px; align-items: center; flex-wrap: nowrap; font-size: 15px; font-weight: 600; color: var(--text-on-dark); }
.navlinks .navitem { position: relative; padding: 10px 0; cursor: default; white-space: nowrap; }
.navlinks .navitem > a:hover { color: var(--gold-light); }
.navlinks .navitem > a::after { content: '▾'; font-size: 10px; margin-left: 5px; opacity: .55; }
.navlinks .navitem.nocaret > a::after { content: ''; }
.megamenu {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 22px; min-width: 240px; border: 1px solid rgba(16,35,63,.06);
  z-index: 80;
}
.navlinks .navitem:last-child .megamenu,
.navlinks .navitem:nth-last-child(2) .megamenu { left: auto; right: 0; transform: none; }
.navitem:hover .megamenu { display: block; }
.megamenu a { display: block; padding: 7px 4px; font-size: 14px; font-weight: 500; color: var(--text-dark); border-radius: 8px; }
.megamenu a:hover { background: var(--cream); color: var(--navy); }
.topbar { border-bottom: 1px solid rgba(255,255,255,0.06); }
.navcta {
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 13.5px;
  padding: 11px 18px; border-radius: 8px; white-space: nowrap;
}
.navcta:hover { background: var(--gold-light); }

/* ---------- Video hero, pinned/sticky scroll pattern ----------
   Outer wrapper is taller than the viewport (--pin-scroll-range extra height).
   The inner .video-hero sticks to top:0 for that whole range, so the video+text
   stay visually locked in place while the user keeps scrolling, only releasing
   to the next section once the wrapper's extra height has been scrolled past. */
.video-hero-wrapper {
  position: relative;
  height: 400vh; /* 100vh visible + 300vh split across 3 text/overlay steps while video stays pinned */
}
.video-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy); /* solid fallback, always present, no invisible-text flash */
}
.video-hero .video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;
}
.video-hero .video-bg video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.video-hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(16,35,63,.92) 0%, rgba(16,35,63,.72) 45%, rgba(16,35,63,.35) 100%);
}
.video-hero .unmute-btn {
  position: absolute; top: 26px; right: 26px; z-index: 3;
  background: rgba(16,35,63,.55); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px);
}
.video-hero .unmute-btn:hover { background: rgba(16,35,63,.8); }
.video-hero .content { position: relative; z-index: 2; padding: 90px 0; }
.hero-step {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
  pointer-events: none;
}
.hero-step.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.hero-progress { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hero-progress .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s, width .3s; }
.hero-progress .dot.active { background: var(--gold); width: 22px; border-radius: 5px; }
@media (max-width: 700px) {
  /* Pinning is disorienting on small screens with limited scroll room, disable there */
  .video-hero-wrapper { height: auto; }
  .video-hero { position: relative; }
}
.video-hero h1 {
  color: var(--text-on-dark);
  font-size: clamp(36px, 5.2vw, 64px);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  max-width: 760px;
}
.video-hero .sub {
  color: var(--text-on-dark-muted);
  font-size: 18px; margin-top: 16px; max-width: 560px;
  font-weight: 500;
}
.video-hero .cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* ---------- Full-page video background pattern ----------
   The video is THE page background: fixed, always visible, audio available.
   Content lives in full-viewport snap sections that scroll over it one at a
   time (scroll-snap-stop keeps each section held until a real scroll past it).
   No other background assets, sections use translucent glass panels. */
.page-video-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--navy); /* solid fallback before video loads */
}
.page-video-bg video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(.85); /* calm the footage so content leads */
}
.page-video-bg .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,40,.8) 0%, rgba(11,22,40,.66) 50%, rgba(11,22,40,.84) 100%);
}
html.videopage { scroll-snap-type: y mandatory; }
.snap-main { position: relative; z-index: 1; }
.snap-section {
  min-height: 100vh;
  display: flex; align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 110px 0 70px;
}
.glass {
  background: rgba(10,20,37,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 42px 46px;
  color: var(--text-on-dark);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.glass h2.section-title { color: var(--text-on-dark); }
.glass .lede { color: var(--text-on-dark-muted); }
.glass .eyebrow { color: var(--gold-light); }
/* Talking-head videos: drop the hero copy to a lower-third so it never covers
   a center-framed face. Applied per-page on heroes whose footage has people. */
.snap-section.hero-bottom { align-items: flex-end; padding-bottom: 7vh; }
.snap-section.hero-bottom .hero-copy { max-width: 640px; padding: 30px 36px; }
.snap-section.hero-bottom h1 { font-size: clamp(30px, 3.6vw, 46px) !important; }

/* Hero copy, no box. Readability comes from the page scrim, strong type, and
   deep text shadows, so the text sits IN the scene instead of on a card. */
.hero-copy {
  display: block;
  max-width: 760px;
  background: none; border: none; box-shadow: none;
  padding: 0;
}
.hero-copy h1 { text-shadow: 0 3px 28px rgba(0,0,0,.65), 0 1px 6px rgba(0,0,0,.5); }
.hero-copy > div { text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.hero-copy .btn { text-shadow: none; }

.sound-toggle {
  position: fixed; top: 118px; right: 22px; z-index: 60;
  background: rgba(16,35,63,.6); color: var(--text-on-dark); border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px);
}
.sound-toggle:hover { background: rgba(16,35,63,.85); }
footer { position: relative; z-index: 1; scroll-snap-align: start; }
@media (max-width: 700px) {
  html.videopage { scroll-snap-type: none; } /* snap is hostile on small screens */
  .snap-section { min-height: auto; padding: 70px 0 40px; }
  .glass { padding: 28px 22px; }
}

/* ---------- Content pages (no dedicated video) ----------
   Service and utility pages: solid dark theme (cohesive with the video pages,
   no sudden white), real service photo as the hero, normal scrolling, and the
   focus on that page's own content instead of a replayed brand video. */
body.contentpage { background: linear-gradient(180deg, #10233f 0%, #0b1a30 55%, #10233f 100%); }
.contentpage main { position: relative; }
.contentpage section { padding: 56px 0; }
.photo-hero {
  position: relative; min-height: 54vh; display: flex; align-items: flex-end;
  background-color: var(--navy); /* solid fallback, never invisible text */
  background-size: cover; background-position: center; overflow: hidden;
}
.photo-hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,40,.3) 0%, rgba(11,22,40,.5) 55%, rgba(11,22,40,.94) 100%);
}
.photo-hero .wrap { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 54px; }
.photo-hero h1 { color: var(--text-on-dark); font-size: clamp(34px, 4.6vw, 56px); text-shadow: 0 3px 26px rgba(0,0,0,.6); }
.photo-hero .sub { color: var(--text-on-dark-muted); font-size: 17px; margin-top: 14px; max-width: 620px; font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
/* Dark card variant inside glass panels (matches the dark tcard treatment) */
.glass .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
.glass .card h3 { color: var(--text-on-dark); }
.glass .card p { color: var(--text-on-dark-muted); }
.glass .card .link { color: var(--gold-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { border: 2px solid var(--text-on-dark); color: var(--text-on-dark); }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-navy { background: var(--navy); color: var(--white); }

/* ---------- Section helpers ---------- */
section { padding: 72px 0; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy); color: var(--text-on-dark); }
.eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin-bottom: 10px; }
.section-navy .eyebrow { color: var(--gold-light); }
h2.section-title { font-size: clamp(26px, 3.2vw, 40px); color: var(--navy); }
.section-navy h2.section-title { color: var(--text-on-dark); }
.lede { font-size: 17px; color: var(--text-muted); max-width: 680px; margin-top: 14px; }
.section-navy .lede { color: var(--text-on-dark-muted); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 18px rgba(16,35,63,.08); border: 1px solid rgba(16,35,63,.05);
}
.card img { width: 100%; height: 170px; object-fit: cover; }
.card .body { padding: 18px 20px 22px; }
.card h3 { font-size: 17px; color: var(--navy); }
.card p { font-size: 14px; color: var(--text-muted); margin: 8px 0 14px; }
.card .link { color: var(--gold); font-weight: 700; font-size: 14px; }

.pill-card {
  background: var(--navy-2); color: var(--text-on-dark); border-radius: 12px;
  padding: 16px 18px; font-weight: 700; font-size: 14.5px;
}
.pill-card:hover { background: var(--navy-3); }

/* ---------- Checklist ---------- */
.check-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 14.5px; }
.check-list li::before { content: '✓'; color: var(--gold); font-weight: 900; flex-shrink: 0; }

/* ---------- Testimonials strip ---------- */
.tcard { background: var(--white); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 4px 16px rgba(16,35,63,.07); color: var(--text-dark); }
.tcard p { color: var(--text-muted); }
.tcard .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; }
.tcard .name { font-weight: 700; color: var(--navy); margin-top: 10px; }
/* Dark variant inside glass panels, cohesive with the video theme, no white blocks */
.glass .tcard { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); box-shadow: none; color: var(--text-on-dark); }
.glass .tcard p { color: var(--text-on-dark-muted); }
.glass .tcard .stars { color: var(--gold-light); }
.glass .tcard .name { color: var(--text-on-dark); }
.verified-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gold-light); margin-top: 8px; }
/* Award badges: small individual chips instead of one big white slab */
.badge-row { display: flex; gap: 14px; align-items: stretch; margin-top: 26px; flex-wrap: wrap; }
.badge-chip { background: rgba(255,255,255,.92); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; }
.badge-chip img { height: 42px; width: auto; }
/* Stat blocks (About etc.) */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.stat-block { border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 20px 14px; text-align: center; background: rgba(255,255,255,.05); }
.stat-block .num { font-family: 'Archivo Black', sans-serif; font-size: 28px; color: var(--gold-light); }
.stat-block .lbl { font-size: 13px; color: var(--text-on-dark-muted); font-weight: 600; margin-top: 6px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.rating-summary { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.rating-summary .score { font-family: 'Archivo Black', sans-serif; font-size: 54px; color: var(--text-on-dark); line-height: 1; }
.rating-summary .stars-big { color: var(--gold-light); font-size: 24px; letter-spacing: 3px; }
.rating-summary .count { color: var(--text-on-dark-muted); font-size: 15px; font-weight: 600; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--white); border-top: 1px solid rgba(16,35,63,.07); border-bottom: 1px solid rgba(16,35,63,.07); padding: 26px 0; }
.trust-strip .wrap { display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.trust-strip img { height: 56px; width: auto; opacity: .9; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid rgba(16,35,63,.1); }
.faq-q { padding: 18px 4px; font-weight: 700; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 15.5px; }
.faq-a { max-height: 0; overflow: hidden; color: var(--text-muted); font-size: 14.5px; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 16px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-q .chev { transition: transform .2s; color: var(--gold); }

/* ---------- Footer ---------- */
footer { background: var(--navy); color: var(--text-on-dark-muted); padding: 60px 0 30px; font-size: 14px; }
footer .grid-4 { gap: 30px; }
footer h4 { color: var(--text-on-dark); font-family: 'Work Sans'; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
footer a { display: block; padding: 5px 0; color: var(--text-on-dark-muted); }
footer a:hover { color: var(--gold-light); }
footer .bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* ---------- Chat widget (replacement) ---------- */
.ai-chat-launcher {
  position: fixed; bottom: 22px; right: 22px; z-index: 100;
  background: var(--gold); color: var(--navy); border-radius: 8px;
  padding: 14px 20px; font-weight: 700; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}

@media (max-width: 1150px) {
  .navlinks { overflow-x: auto; scrollbar-width: none; }
  .navlinks::-webkit-scrollbar { display: none; }
}
@media (max-width: 860px) {
  .navlinks { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Play / video-testimonial cards ---------- */
.play-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; background: var(--navy-2) center/cover no-repeat;
  box-shadow: 0 4px 18px rgba(16,35,63,.12); border: 1px solid rgba(16,35,63,.05);
}
.play-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,35,63,.05) 40%, rgba(16,35,63,.85) 100%); }
.play-card .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(247,243,233,.94);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(16,35,63,.35);
}
.play-card .play-btn::after { content: ''; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--navy); margin-left: 4px; }
.play-card .play-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px;
  color: var(--text-on-dark); font-weight: 700; font-size: 14.5px;
}
.play-card .play-label span { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-on-dark-muted); margin-top: 2px; }

/* ---------- Charity / partner cards ---------- */
.charity-card {
  background: var(--white); border-radius: var(--radius); padding: 26px 24px;
  box-shadow: 0 4px 18px rgba(16,35,63,.08); border: 1px solid rgba(16,35,63,.05);
  text-align: center;
}
.charity-card img { height: 64px; width: auto; margin: 0 auto 18px; object-fit: contain; }
.charity-card h3 { font-size: 16px; color: var(--navy); font-family: 'Work Sans'; font-weight: 700; }
.charity-card p { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* ---------- Anniversary badge ---------- */
.anniv-badge { display: flex; align-items: center; gap: 16px; }
.anniv-badge img { width: 84px; height: auto; flex-shrink: 0; }

/* ---------- Coupon card ---------- */
.coupon-card {
  background: var(--white); border: 2px dashed var(--gold); border-radius: var(--radius);
  padding: 28px 24px; text-align: center; box-shadow: 0 4px 18px rgba(16,35,63,.08);
}
.coupon-card .amount { font-family: 'Archivo Black'; font-size: 40px; color: var(--navy); line-height: 1; }
.coupon-card .amount-sub { color: var(--gold); font-weight: 700; letter-spacing: .06em; font-size: 13px; margin-top: 6px; text-transform: uppercase; }
.coupon-card .fine { font-size: 12px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }

/* ---------- Map placeholder ---------- */
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--cream-2); }
.map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Blog cards ---------- */
.blog-tag {
  display: inline-block; background: var(--cream-2); color: var(--navy); font-weight: 700;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-radius: 5px;
}
.blog-date { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.card .meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* ==========================================================================
   Content pages, light theme
   --------------------------------------------------------------------------
   The video pages stay cinematic and dark because the footage carries them.
   Everything else is a light, calm product surface: off-white ground, white
   cards on hairline borders, small refined type, gold used once or twice per
   screen rather than everywhere. The dark navy nav sits on top of both and is
   what holds the two halves together.
   ========================================================================== */

body.contentpage {
  --ink:        #0f3448;   /* headings */
  --ink-soft:   #47606d;   /* body copy */
  --ink-faint:  #8895a8;   /* meta, captions */
  --paper:      #f7f6f3;   /* page ground */
  --surface:    #ffffff;   /* cards */
  --hairline:   #e8e5dd;
  --gold-ink:   #6f6733;   /* the logo khaki, darkened to hold on white */
  background: var(--paper);
  color: var(--ink-soft);
}

.contentpage section { padding: 68px 0; }
.contentpage section:last-of-type { padding-bottom: 88px; }

/* ---- Hero: photo stays, but the type stops shouting ---- */
.contentpage .photo-hero { min-height: 46vh; }
.contentpage .photo-hero .hero-scrim {
  /* Weighted to the left so the copy has a dark bed while the photo stays visible */
  background:
    linear-gradient(100deg, rgba(9,19,35,.92) 0%, rgba(9,19,35,.72) 38%, rgba(9,19,35,.28) 68%, rgba(9,19,35,.15) 100%),
    linear-gradient(180deg, rgba(9,19,35,.5) 0%, rgba(9,19,35,.1) 40%, rgba(9,19,35,.35) 100%);
}
.contentpage .photo-hero .wrap { padding-top: 72px; padding-bottom: 46px; }
.contentpage .photo-hero .eyebrow {
  color: #efe2c2; font-size: 11.5px; letter-spacing: .14em; opacity: .95;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.contentpage .photo-hero h1 {
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.015em;
  max-width: 17ch; text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.contentpage .photo-hero .sub {
  font-size: 16px; max-width: 46ch; color: rgba(255,255,255,.88); font-weight: 400;
}

/* ---- Panels ---- */
.contentpage .glass {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,35,63,.04), 0 8px 28px rgba(16,35,63,.05);
  backdrop-filter: none;
  padding: 40px 42px;
  color: var(--ink-soft);
}
.contentpage .glass h2.section-title,
.contentpage h2.section-title { color: var(--ink); }
.contentpage .glass .lede,
.contentpage .lede { color: var(--ink-soft); }
.contentpage .glass .eyebrow,
.contentpage .eyebrow { color: var(--gold-ink); }

.contentpage h2.section-title {
  font-size: clamp(23px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -.012em;
}
.contentpage h3 { color: var(--ink); letter-spacing: -.005em; }
.contentpage .eyebrow { font-size: 11.5px; letter-spacing: .13em; }
.contentpage .lede { font-size: 16px; line-height: 1.65; max-width: 66ch; }
.contentpage p { color: var(--ink-soft); }

/* ---- Cards ---- */
.contentpage .card,
.contentpage .glass .card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,35,63,.03);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.contentpage .card:hover,
.contentpage .glass .card:hover {
  border-color: #d8d2c4;
  box-shadow: 0 2px 4px rgba(16,35,63,.04), 0 14px 34px rgba(16,35,63,.08);
  transform: translateY(-2px);
}
.contentpage .card img { height: 158px; }
.contentpage .card .body { padding: 20px 22px 24px; }
.contentpage .card h3,
.contentpage .glass .card h3 { color: var(--ink); font-size: 16.5px; }
.contentpage .card p,
.contentpage .glass .card p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.contentpage .card .link,
.contentpage .glass .card .link { color: var(--gold-ink); font-size: 13.5px; }
.contentpage .card .link:hover { color: var(--ink); }

/* Nested panel-in-panel reads as clutter on light, so flatten it */
.contentpage .glass > .grid > .card { box-shadow: none; }

/* ---- Review cards ---- */
.contentpage .glass .tcard {
  background: #fbfaf7; border: 1px solid var(--hairline); color: var(--ink-soft);
  border-radius: 14px;
}
.contentpage .glass .tcard p { color: var(--ink-soft); }
.contentpage .glass .tcard .name { color: var(--ink); }
.contentpage .stars, .contentpage .stars-big { color: #c99a2e; }

/* ---- Stats ---- */
.contentpage .stat-block { background: #fbfaf7; border: 1px solid var(--hairline); border-radius: 14px; }
.contentpage .stat-block .num { color: var(--ink); }
.contentpage .stat-block .lbl { color: var(--ink-faint); }

/* ---- FAQ accordions ---- */
.contentpage .faq-item {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.contentpage .faq-q { color: var(--ink); font-size: 15.5px; }
.contentpage .faq-a { color: var(--ink-soft); }
.contentpage .chev { color: var(--ink-faint); }

/* ---- Lists ---- */
.contentpage .check-list li { color: var(--ink-soft); font-weight: 500; }
.contentpage .check-list li::before { color: var(--gold-ink); }

/* ---- Buttons on light ---- */
.contentpage .btn-outline { border: 1px solid #cfc8b8; color: var(--ink); }
.contentpage .btn-outline:hover { background: #fff; border-color: var(--ink); }
.contentpage .photo-hero .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.contentpage .photo-hero .btn-outline:hover { background: rgba(255,255,255,.14); }
.contentpage .btn-navy { background: var(--ink); color: #fff; }

/* ---- Footer keeps the dark bookend ---- */
.contentpage footer { background: var(--navy); }

/* ---- Facts rail beside the intro copy ----
   Placed with CSS grid on the panel itself rather than wrapper divs. The intro
   paragraph tops out near 66 characters for readability, which left roughly
   470px of dead space on a 1130px panel; the rail fills it with the trust
   points and the phone number, where someone is already reading. */
.contentpage .glass:has(> aside.facts) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  column-gap: 44px;
  align-content: start;
}
/* Intro copy holds column one; everything after the rail spans the full width. */
.contentpage .glass > aside.facts { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.contentpage .glass:has(> aside.facts) > .eyebrow,
.contentpage .glass:has(> aside.facts) > h2.section-title,
.contentpage .glass:has(> aside.facts) > .lede { grid-column: 1; }
.contentpage .glass:has(> aside.facts) > *:not(.eyebrow):not(h2):not(.lede):not(aside.facts) {
  grid-column: 1 / -1;
}

.contentpage .facts {
  background: #fbfaf7; border: 1px solid var(--hairline); border-radius: 14px;
  padding: 22px 22px 24px;
}
.contentpage .facts h4 {
  margin: 0 0 14px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700; font-family: 'Work Sans', sans-serif;
}
.contentpage .facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contentpage .facts li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13.8px; line-height: 1.45; color: var(--ink-soft);
}
.contentpage .facts li svg { width: 15px; height: 15px; margin-top: 2px; color: var(--gold-ink); }
.contentpage .facts li b { color: var(--ink); font-weight: 650; }
.contentpage .facts .call {
  display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.contentpage .facts .call span {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #5a6a76; font-weight: 700; margin-bottom: 5px;
}
.contentpage .facts .call a {
  font-size: 19px; font-weight: 750; color: var(--ink); letter-spacing: -.01em;
  font-family: 'Inter', sans-serif;
}
.contentpage .facts .call a:hover { color: var(--gold-ink); }
.contentpage .facts .btn { display: block; text-align: center; margin-top: 14px; padding: 12px 18px; font-size: 14px; }

@media (max-width: 940px) {
  .contentpage .glass:has(> aside.facts) { display: block; }
  .contentpage .facts { margin-top: 26px; }
}
}

/* ---- Odds and ends on the light pages ---- */

/* Inline-styled panels from the first build carry a heavy shadow and a hard
   max-width, which leaves a gap on a 1130px surface. Normalise them. */
.contentpage .glass > div[style*="max-width:560px"] {
  max-width: none !important;
  box-shadow: none !important;
  border: 1px solid var(--hairline);
  background: #fbfaf7 !important;
  border-radius: 14px !important;
  padding: 28px 30px !important;
}
.contentpage .glass > div[style*="max-width:560px"] > div:first-child { margin-bottom: 4px; }

/* A lone card in a multi-column grid leaves the row half empty. */
.contentpage .grid > *:only-child { grid-column: 1 / -1; }

/* One card in the AC grid is a line icon rather than a photograph, and its
   cyan reads as a foreign accent next to the gold. Present it as an icon tile
   on purpose and pull the saturation back toward the palette. */
.contentpage .card img[src*="Tech-Clean-air"] {
  object-fit: contain;
  background: #f2f5f7;
  padding: 26px;
  filter: saturate(.35) brightness(.92);
}

/* Section headings outside panels need the same restraint as inside them. */
.contentpage section > .wrap > .eyebrow { color: var(--gold-ink); }

/* A card with no photograph should look deliberate rather than broken. */
.contentpage .card:not(:has(img)) .body { padding-top: 24px; }
.contentpage .card:not(:has(img)) {
  background: linear-gradient(180deg, #fbfaf7 0%, #ffffff 42%);
}

/* ---- Gold that has to hold its own on white ----
   The brand khaki is designed to sit on navy. At 1.6:1 on white it reads as a
   smudge, so anything gold on a light surface uses the darkened ink version. */
.contentpage .stars,
.contentpage .stars-big,
.contentpage .tcard .stars,
.contentpage .coupon-card .amount-sub,
.contentpage .verified-tag,
.contentpage .faq-q .chev,
.contentpage .card .link { color: var(--gold-ink); }

.contentpage .coupon-card { border-color: #d8d2be; }
.contentpage .coupon-card .amount { color: var(--ink); }
.contentpage .facts .call span { color: #5a6a76; }

/* Form fields on a light card */
.contentpage input,
.contentpage select,
.contentpage textarea {
  background: #fff; border: 1px solid #d9d4c7; color: var(--ink);
  border-radius: 8px;
}
.contentpage input:focus,
.contentpage select:focus,
.contentpage textarea:focus { outline: none; border-color: var(--ink); }
.contentpage input::placeholder, .contentpage textarea::placeholder { color: #9aa5b1; }

/* A 38px price beside its unit label had nowhere to go at 390px. */
.contentpage .glass div[style*="align-items:baseline"] { flex-wrap: wrap; }

/* ---- Home hero: get the copy off the video's own title card ----
   The brand film carries its own centred titles and a logo lockup. Our copy sat
   straight on top of both. Moving it to the lower left leaves the film's own
   frame readable and gives the type a darker bed to sit on. */
.video-hero .content { padding: 90px 0 0; }
.video-hero .hero-step { text-align: left; }
.video-hero .hero-step h1 { max-width: 15ch; }
.video-hero .hero-step .sub { max-width: 44ch; }
.video-hero .scrim {
  /* Enough to seat the type, not so much that the film disappears. Weighted
     left and to the bottom, which is where the copy actually sits. */
  background:
    linear-gradient(90deg, rgba(7,20,30,.72) 0%, rgba(7,20,30,.44) 34%, rgba(7,20,30,.06) 64%, rgba(7,20,30,0) 100%),
    linear-gradient(180deg, rgba(7,20,30,.28) 0%, rgba(7,20,30,0) 30%, rgba(7,20,30,.5) 100%);
}
@media (min-width: 900px) {
  .video-hero .content { display: flex; align-items: flex-end; min-height: 76vh; padding-bottom: 8vh; }
}

/* ---- Orphan rows ----
   Four cards in a three-across grid leaves the fourth alone with half the row
   empty beside it, which is the single most common "this looks broken" fault.
   A twelve-column base lets the last row redistribute to fill the width. */
.contentpage .grid-2,
.contentpage .grid-3,
.contentpage .grid-4 { grid-template-columns: repeat(12, 1fr); }

.contentpage .grid-2 > * { grid-column: span 6; }
.contentpage .grid-3 > * { grid-column: span 4; }
.contentpage .grid-4 > * { grid-column: span 3; }

/* Last row with one item left over: take the whole width. */
.contentpage .grid-2 > *:nth-child(2n+1):nth-last-child(1),
.contentpage .grid-3 > *:nth-child(3n+1):nth-last-child(1),
.contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(1) { grid-column: span 12; }

/* Two left over: half each. */
.contentpage .grid-3 > *:nth-child(3n+1):nth-last-child(2),
.contentpage .grid-3 > *:nth-child(3n+1):nth-last-child(2) ~ *,
.contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(2),
.contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(2) ~ * { grid-column: span 6; }

/* Three left over in a four-across grid: thirds. */
.contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(3),
.contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(3) ~ * { grid-column: span 4; }

@media (max-width: 900px) {
  .contentpage .grid-2 > *, .contentpage .grid-3 > *, .contentpage .grid-4 > * { grid-column: span 6; }
  .contentpage .grid-2 > *:nth-child(2n+1):nth-last-child(1),
  .contentpage .grid-3 > *:nth-child(3n+1):nth-last-child(1),
  .contentpage .grid-4 > *:nth-child(4n+1):nth-last-child(1) { grid-column: span 12; }
}
@media (max-width: 600px) {
  .contentpage .grid-2 > *, .contentpage .grid-3 > *, .contentpage .grid-4 > * { grid-column: span 12; }
}

/* Tablet: two per row, so an odd count leaves the last one alone. The desktop
   nth-child maths is tied to three and four columns and misses this case. */
@media (max-width: 900px) {
  .contentpage .grid-2 > *:nth-child(odd):last-child,
  .contentpage .grid-3 > *:nth-child(odd):last-child,
  .contentpage .grid-4 > *:nth-child(odd):last-child { grid-column: span 12; }
}

/* Grid children default to min-content width, which is what pushes a form's
   inner grid wider than the form itself on a narrow screen. */
.contentpage .grid > *, .contentpage .glass > * { min-width: 0; }
.contentpage form, .contentpage form * { max-width: 100%; }

/* Inline max-widths from the first build leave a gap on a full-width panel. */
.contentpage .glass > div[style*="max-width:560px"],
.contentpage .glass > div[style*="max-width: 560px"] { max-width: none !important; }

/* Mobile: drop the twelve-column base entirely. Eleven 22px gaps eat 242px of
   a 342px container, which starved the form fields down to a sliver. */
@media (max-width: 600px) {
  .contentpage .grid-2,
  .contentpage .grid-3,
  .contentpage .grid-4 { grid-template-columns: 1fr; }
  .contentpage .grid-2 > *,
  .contentpage .grid-3 > *,
  .contentpage .grid-4 > * { grid-column: auto !important; }
}