/* Squeaky Clean Duct Cleaning. Mostly white, navy text, teal brand, one orange accent for buttons. */
:root {
  --navy: #0f2a44;
  --ink: #142b42;
  --muted: #4d6073;
  --line: #dfe5eb;
  --soft: #f3f6f8;
  --teal: #0b7a83;
  --teal-dark: #075e66;
  --accent: #f7841e;      /* buttons only; navy text on it */
  --accent-dark: #e06f0a;
  --radius: 8px;
  --max: 1140px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; color: var(--ink); background: #fff; line-height: 1.55; padding-bottom: 68px; }
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { color: var(--navy); line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
s { color: inherit; opacity: .75; }

.skip { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: .5rem 1rem; z-index: 1000; }
.skip:focus { left: 0; }
.wrap { width: min(100% - 2rem, var(--max)); margin-inline: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem 1.2rem;
  border-radius: var(--radius); border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn-lg { min-height: 54px; padding: .75rem 1.5rem; font-size: 1.1rem; }
.btn-block { display: flex; width: 100%; }
.btn-accent { background: var(--accent); color: var(--navy); }
.btn-accent:hover { background: var(--accent-dark); color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #1b3d5f; color: #fff; }

/* Top bar */
.topbar { background: var(--navy); color: #fff; font-size: .95rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 1rem; }
.topbar-note { display: none; color: #c9d6e2; }
.topbar-phone { color: #fff; text-decoration: none; margin-inline: auto; }
.topbar-phone strong { font-size: 1.1rem; letter-spacing: .01em; }
.topbar-phone:hover { color: var(--accent); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.nav { display: none; margin-left: auto; gap: 1.5rem; }
.nav .nav-book { color: var(--teal-dark); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--teal); }
.header-call { display: none; margin-left: auto; min-height: 42px; padding: .45rem .9rem; }

/* Hero */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--navy); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,25,41,.86) 0%, rgba(10,25,41,.62) 55%, rgba(10,25,41,.35) 100%); }
.hero h1, .lead, .kicker { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero-grid { display: grid; gap: 1.75rem; padding: 2.25rem 0 2rem; }
.kicker { font-weight: 700; color: #ffd2a6; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: .6rem; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: .8rem; }
.lead { font-size: 1.2rem; color: #e3ebf2; max-width: 34rem; }
.lead strong { color: #fff; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Deal card */
.deal { background: #fff; color: var(--ink); border-radius: 10px; padding: 1.25rem; border-top: 6px solid var(--accent); box-shadow: 0 12px 32px rgba(0,0,0,.28); align-self: center; }
.deal-label { font-size: .9rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.deal-badge { display: inline-block; background: var(--navy); color: #fff; padding: .1rem .45rem; border-radius: 4px; margin-right: .35rem; }
.deal-title { font-size: 1.3rem; font-weight: 800; margin-bottom: .6rem; }
.deal-title span { font-weight: 600; color: var(--muted); font-size: 1rem; }
.deal-title span { display: block; margin-top: .15rem; }
.deal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .75rem; margin-bottom: .5rem; }
.price-now { font-size: 2.8rem; font-weight: 800; color: var(--navy); line-height: 1; }
.price-reg { color: var(--muted); font-size: 1.05rem; }
.price-off { background: #e6f4f1; color: var(--teal-dark); font-weight: 800; padding: .15rem .5rem; border-radius: 4px; }
.deal-rating { margin-bottom: .2rem; }
.deal-rating .stars { margin-right: .3rem; vertical-align: -1px; }
.deal-bought { font-weight: 700; color: var(--teal-dark); margin-bottom: .6rem; }
.deal-alt { font-size: .98rem; border-top: 1px solid var(--line); padding-top: .6rem; margin-bottom: .9rem; }
.deal-fine { font-size: .85rem; color: var(--muted); margin: .7rem 0 0; }

/* Stars: 5 glyphs, filled to --rating out of 5 */
.stars { --rating: 5; display: inline-block; font-size: 1.15rem; line-height: 1; letter-spacing: 2px;
  background: linear-gradient(90deg, #f5a623 calc(var(--rating) / 5 * 100%), #cfd6dd 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars::before { content: "★★★★★"; }

/* Trust bar */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust-row p { margin: 0; padding: .9rem .5rem; text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.25; }
.trust-row strong { display: block; color: var(--navy); font-size: 1.35rem; font-weight: 800; }

/* Sections */
.section { padding: 2.75rem 0; }
.section-soft { background: var(--soft); }
.section-lead { color: var(--muted); max-width: 44rem; margin-bottom: 1.4rem; }
.fine { font-size: .88rem; color: var(--muted); }

/* Prices */
.price-layout { display: grid; gap: 1.25rem; align-items: start; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table thead th { background: var(--navy); color: #fff; font-size: .9rem; font-weight: 700; }
.price-table tbody th { font-weight: 600; color: var(--navy); }
.price-table small { display: block; font-weight: 400; color: var(--muted); font-size: .88rem; }
.price-table td { white-space: nowrap; }
.price-table td[colspan] { white-space: normal; }
.p-strong { font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.example { background: var(--soft); border-left: 5px solid var(--teal); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.example-head { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark); margin-bottom: .2rem; }
.example-sum { font-weight: 700; color: var(--navy); font-size: 1.15rem; margin-bottom: .2rem; }
.example-math { font-size: 1.1rem; }
.example-math strong { font-size: 1.4rem; color: var(--navy); }
.example .fine { margin: .7rem 0 0; }

/* Service cards */
.cards { display: grid; gap: 1.25rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--muted); }
.card-link { margin-top: auto; font-weight: 700; color: var(--teal-dark); }

/* Process */
.process-grid { display: grid; gap: 1.5rem; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: .9rem; }
.steps li { counter-increment: s; position: relative; padding-left: 3rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; display: grid; place-items: center; }
.steps h3 { margin-bottom: .15rem; }
.steps p { color: var(--muted); margin: 0; }
.process-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.process-photos figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: grid; place-items: center; }
.process-photos img { max-height: 360px; width: auto; height: auto; object-fit: contain; }
.process-photos figure[hidden] { display: none; }
.process-photos:not(:has(figure:not([hidden]))) { display: none; }

/* Gallery */
.gallery { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery li { aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #d9dee3; }
.gallery .shot-big { grid-column: span 2; grid-row: span 2; }
.gallery a, .gallery img { display: block; width: 100%; height: 100%; }
.gallery img { object-fit: cover; transition: transform .2s; }
.gallery a:hover img { transform: scale(1.03); }

/* Reviews */
.reviews { display: grid; gap: 1rem; }
.review { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.review p { font-size: 1.1rem; color: var(--navy); }
.review footer { color: var(--muted); font-size: .92rem; font-weight: 600; }
#reviews .section-lead { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Booking (v7): two booking-page buttons, arrival note, call/text fallback */
.book-grid { display: grid; gap: 1rem; }
.book-card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; }
.book-card-noon { border-top-color: var(--navy); }
.book-tag { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark); margin-bottom: .15rem; }
.book-card h3 { font-size: 1.25rem; margin-bottom: .7rem; }
.book-times { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.book-times li { border: 1px solid #b9c6d2; border-radius: 4px; padding: .2rem .6rem; font-weight: 700; color: var(--navy); background: var(--soft); }
.book-desc { color: var(--muted); margin-bottom: 1rem; }
.book-btn { margin-top: auto; }
.book-btns { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.book-btns .book-btn { margin-top: 0; }
.btn-navy-outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-navy-outline:hover { background: var(--navy); color: #fff; }
.book-arrival { margin: 1.1rem 0 .6rem; padding: .75rem .9rem; background: #fff; border-left: 5px solid var(--accent); border-radius: var(--radius); max-width: 52rem; }
.book-arrival strong { color: var(--navy); }
.book-alt { color: var(--muted); max-width: 52rem; margin: 0; }
.book-alt a { display: inline-block; padding-block: 10px; margin-block: -10px; font-weight: 600; }
.pk-book { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; }

/* Area + FAQ */
.area-faq { display: grid; gap: 2rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .8rem 0; font-weight: 700; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--teal); }
.faq[open] summary::after { content: "–"; }
.faq p { color: var(--muted); }

/* Footer */
.site-footer { background: var(--navy); color: #c9d6e2; padding: 1.75rem 0; font-size: .95rem; }
.site-footer strong { color: #fff; }
.site-footer a { color: #fff; }
.footer-inner { display: grid; gap: 1rem; }

/* Mobile sticky bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .5rem;
  padding: .5rem; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.mobile-bar .btn { min-height: 48px; font-size: 1.1rem; }

/* Lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lb::backdrop { background: rgba(5,15,25,.92); }
.lb[open] { display: grid; place-items: center; }
.lb-img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.lb-btn { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; margin: 0; }
body.lb-open { overflow: hidden; }

/* Hero lead links (the v4-v10 "How the Groupon deal works" section was removed in v11) */
.lead a { color: #fff; font-weight: 700; }

/* Book-direct picker */
.picker { display: grid; gap: 1.25rem; align-items: start; }
.pk-group { margin: 0 0 1rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.pk-group legend { float: left; width: 100%; padding: .6rem .9rem; background: var(--navy); color: #fff; font-weight: 700; font-size: 1rem; }
.pk-group legend + * { clear: both; }
.pk-hint { clear: both; margin: 0; padding: .55rem .9rem; font-size: .92rem; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--soft); }
.pk-items { clear: both; list-style: none; margin: 0; padding: 0; }
.pk-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem .75rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.pk-item:last-child { border-bottom: 0; }
.pk-item.is-on { background: #fff6ec; }
.pk-has-qty { grid-template-columns: 1fr auto auto; }
.pk-label { display: flex; align-items: center; gap: .7rem; cursor: pointer; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.pk-label, .step-btn { -webkit-user-select: none; user-select: none; }
.pk-check input { width: 22px; height: 22px; flex: none; accent-color: var(--teal); margin: 0; }
.pk-text { display: flex; flex-direction: column; line-height: 1.25; }
.pk-name { font-weight: 600; color: var(--navy); }
.pk-note { font-size: .88rem; color: var(--muted); }
.pk-price { font-weight: 700; color: var(--navy); white-space: nowrap; text-align: right; }
.pk-price s { font-weight: 400; color: var(--muted); font-size: .9rem; }
.pk-tbd { color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1px solid #b9c6d2; border-radius: var(--radius); overflow: hidden; background: #fff; }
.step-btn { width: 40px; height: 40px; border: 0; background: var(--soft); color: var(--navy); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.step-btn:hover { background: #e3eaf0; }
.step-input { width: 2.8rem; height: 40px; border: 0; border-inline: 1px solid var(--line); text-align: center; font: inherit; font-weight: 700; color: var(--navy); -moz-appearance: textfield; appearance: textfield; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pk-extra { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; gap: .5rem .75rem; padding: .1rem 0 .35rem 2.15rem; }
.pk-field label, .pk-note-label { display: block; font-size: .88rem; font-weight: 600; color: var(--navy); margin-bottom: .2rem; }
.pk-opt { font-weight: 400; color: var(--muted); }
.pk-field select, .pk-field input, .pk-note-row input { width: 100%; min-height: 44px; padding: .45rem .6rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #b9c6d2; border-radius: var(--radius); }
.pk-note-row { display: block; padding: .6rem .9rem .75rem; }
.pk-noscript { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }

.pk-summary { background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.pk-summary h3 { margin-bottom: .5rem; }
.pk-empty { color: var(--muted); }
.pk-selected { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .97rem; }
.pk-selected li { padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.pk-sel-top { display: flex; justify-content: space-between; gap: .75rem; }
.pk-sel-top span:nth-child(2) { white-space: nowrap; font-weight: 600; }
.pk-sel-detail { display: block; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.pk-sel-note .pk-sel-top { font-weight: 600; color: var(--navy); }
.pk-total { margin: .4rem 0 .6rem; }
.pk-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin: 0; font-weight: 700; color: var(--navy); }
.pk-total-amt { font-size: 1.9rem; font-weight: 800; }
.pk-total-tbd { margin: 0; font-size: .92rem; color: var(--muted); text-align: right; }
.pk-warn { background: #fff6ec; border-left: 4px solid var(--accent); padding: .5rem .7rem; font-size: .92rem; }
.pk-voucher { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.pk-voucher input { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; }
.pk-notes-label { display: block; font-weight: 600; margin-top: .25rem; }
.pk-notes-label span { font-weight: 400; color: var(--muted); }
#pk-notes { width: 100%; margin: .3rem 0 .8rem; padding: .55rem .7rem; font: inherit; font-size: 1rem; border: 1px solid #b9c6d2; border-radius: var(--radius); resize: vertical; }
.pk-actions { display: grid; gap: .55rem; }
.pk-groupon { text-align: center; font-weight: 700; padding: .35rem 0; }
.pk-foot { margin: .8rem 0 .4rem; }
.pk-clear { background: none; border: 0; padding: .4rem 0; font: inherit; font-size: .92rem; color: var(--teal-dark); text-decoration: underline; cursor: pointer; }
.pk-mini { position: sticky; bottom: 76px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: .5rem .6rem .5rem .9rem; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.pk-mini[hidden] { display: none; }
.pk-mini-amt { font-size: 1.3rem; color: var(--navy); }
.pk-mini-count { color: var(--muted); font-size: .92rem; margin-left: .3rem; }
.pk-mini .btn { min-height: 42px; padding: .4rem .9rem; }

/* Replacement guide */
.guide-table td { white-space: normal; }
.guide-table td:nth-child(2) { font-weight: 700; color: var(--navy); white-space: nowrap; }
.guide-src { margin-top: .8rem; }

@media (max-width: 559px) {
  .guide-table thead { display: none; }
  .guide-table tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); }
  .guide-table tbody tr:last-child { border-bottom: 0; }
  .guide-table th, .guide-table td { border-bottom: 0; }
  .guide-table td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; color: var(--muted); font-size: .95rem; }
  .pk-has-qty { grid-template-columns: 1fr auto; }
  .pk-has-qty .pk-label { grid-column: 1 / -1; }
  .pk-extra { grid-template-columns: 1fr; padding-left: 0; }
}
@media (min-width: 700px) {
  .book-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
  .picker { grid-template-columns: 1.55fr 1fr; gap: 2rem; }
  .pk-summary { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .pk-mini { display: none !important; }
}

/* Phones: compact side-by-side service cards */
@media (max-width: 699px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
  .card-img img { height: 100%; aspect-ratio: auto; }
  .card-body { padding: .8rem .9rem .9rem; }
  .card-body p { font-size: .98rem; margin-bottom: .5rem; }
  .process-photos img { max-height: 220px; }
  .section { padding: 2.25rem 0; }
}

/* Larger screens */
@media (min-width: 700px) {
  .topbar-note { display: inline; }
  .header-call { display: inline-flex; }
  .topbar-phone { margin-inline: 0; }
  .trust-row { grid-template-columns: repeat(4, 1fr); }
  .trust-row p + p { border-left: 1px solid var(--line); }
  .cards, .reviews { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery li { aspect-ratio: 4 / 3; }
  .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (min-width: 940px) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
  .nav { display: flex; }
  .header-call { margin-left: 1rem; font-size: 1.05rem; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; padding: 4rem 0; min-height: 520px; align-items: center; }
  .price-layout { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
  .process-grid { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
  .process-grid:not(:has(figure:not([hidden]))) { grid-template-columns: 1fr; }
  .process-photos { position: sticky; top: 90px; }
  .area-faq { grid-template-columns: 1fr 1.4fr; gap: 3rem; }
  .section { padding: 3.5rem 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .gallery img { transition: none; } }

/* v6 (2026-10-06 button audit): every tap target at least 44px tall on phones. Sizes only, same look. */
.topbar-phone { display: inline-block; line-height: 44px; }
.brand { min-height: 44px; }
.step-btn { width: 44px; height: 44px; }
.step-input { height: 44px; }
.pk-mini .btn { min-height: 44px; }
.pk-clear { min-height: 44px; }
.pk-groupon { display: flex; align-items: center; justify-content: center; min-height: 44px; }
/* bigger hit area for the service-card links without moving the text (padding offset by a negative margin) */
.card-link { padding-block: 9px; margin-bottom: -9px; }
/* v7: phones get a full-width "Book online" button, then Call + Text side by side */
@media (max-width: 559px) {
  .hero-ctas { display: grid; grid-template-columns: 1fr auto; }
  .hero-ctas .btn:first-child { grid-column: 1 / -1; }
  .hero-ctas .btn { padding-inline: 1rem; }
}
/* v7: phone service cards - the photo fills the card height but no longer sets it, so nothing shifts when the
   lazy photo loads (a late layout shift was stopping iPhone Safari's smooth scroll short of #book) */
@media (max-width: 699px) {
  .card-img { position: relative; min-height: 140px; }
  .card-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* v9: header logo is /logo.svg (one file to swap when the final logo is picked) */
.brand-logo { height: 40px; width: auto; }

/* v9: rebrand banner at the very top: [Igloo HVAC logo] -> [our logo] + one line of copy.
   Light strip so it doesn't merge with the navy top bar. Fixed image sizes, so no layout shift. */
.rebrand { background: #e7f4f3; border-bottom: 1px solid #cfe7e5; color: var(--navy); font-size: .95rem; line-height: 1.3; }
.rebrand-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1rem; padding: .45rem 0; text-align: center; }
.rebrand-logos { display: inline-flex; align-items: center; gap: .55rem; flex: none; }
.rebrand-old { display: inline-flex; background: var(--navy); border-radius: 5px; padding: 5px 8px; }
.rebrand-old img { height: 18px; width: auto; }
.rebrand-arrow { color: var(--teal); flex: none; }
.rebrand-new { height: 26px; width: auto; }
.rebrand-text { margin: 0; }
.rebrand-name { font-weight: 700; }
/* phones: logos on line 1, short copy on line 2; the name-change sentence stays for screen readers */
@media (max-width: 699px) {
  .rebrand { font-size: .9rem; }
  .rebrand-inner { flex-direction: column; gap: .25rem; padding: .4rem 0 .45rem; }
  .rebrand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* v9: single-photo lightbox (card photos not in the gallery) has no prev/next */
.lb-single .lb-prev, .lb-single .lb-next { display: none; }
/* v9: footer logo (white version of the duck logo) */
.footer-logo { height: 44px; width: auto; margin-bottom: .5rem; }

/* v11: book-direct hero card (replaces the Groupon deal card; same .deal box) */
.deal-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; }
.deal-alt strong { font-size: 1.25rem; color: var(--navy); }
.deal-alt .price-reg { font-size: .95rem; }
.deal-pay { font-weight: 700; color: var(--teal-dark); margin-bottom: .8rem; }
.deal-voucher { margin: .7rem 0 .55rem; text-align: center; font-size: .95rem; color: var(--muted); }
.deal-voucher a { display: inline-block; padding-block: 10px; margin-block: -10px; font-weight: 700; }
.deal-rating { border-top: 1px solid var(--line); padding-top: .6rem; margin: 0; font-size: .95rem; color: var(--muted); }
.deal-rating strong { color: var(--navy); }

/* v11: whole-home duct cleaning row in the picker (vents / furnaces / high-efficiency set the price) */
.pk-home-item { align-items: start; }
.pk-home { grid-column: 1 / -1; margin: .1rem 0 .35rem; padding: .75rem .85rem .2rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); }
.pk-home-note { font-size: .92rem; color: var(--muted); margin-bottom: .65rem; }
.pk-home-fields { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: .6rem 1.1rem; }
.pk-count .stepper { display: inline-flex; }
.pk-field.pk-count .step-input { width: 3.2rem; min-height: 0; height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--line); border-radius: 0; background: #fff; }
.pk-he { align-self: end; justify-self: start; gap: .6rem; min-height: 44px; }
.pk-he .pk-price { margin-left: .6rem; }
.pk-home-total { margin: .65rem 0 .5rem; padding-top: .5rem; border-top: 1px dashed #c9d3dc; color: var(--navy); }
.pk-home-total strong { font-size: 1.15rem; }
.pk-sel-sub { padding-left: .9rem !important; font-size: .93rem; color: var(--muted); }
.pk-sel-sub .pk-sel-top span:nth-child(2) { color: var(--ink); }
@media (max-width: 559px) {
  .pk-home { padding: .7rem .7rem .15rem; }
  .pk-home-fields { grid-template-columns: 1fr; gap: .5rem; }
  .pk-count { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
  .pk-count label { margin: 0; font-size: .95rem; }
  .pk-count .stepper { flex: none; }
  .pk-he { justify-self: stretch; }
  .pk-he .pk-price { margin-left: auto; }
}

/* v11: price table rows that depend on the home */
.price-table .pt-group th { background: var(--soft); color: var(--navy); font-weight: 700; padding-top: .55rem; padding-bottom: .55rem; }
.price-table .pt-group small { display: inline; margin-left: .35rem; }
.price-table .pt-sub th { padding-left: 1.6rem; font-weight: 500; }
.section-soft .table-wrap { background: #fff; }
.section-soft .example { background: #fff; }
.example-math { font-size: 1rem; margin-bottom: .5rem; }
.example-math strong { font-size: 1.1rem; }

/* v11: #book is now a white section (it follows the picker), so its notes get the soft background */
#book .book-card { background: var(--soft); border-color: #d5dde4; }
#book .book-times li { background: #fff; }
#book .book-arrival { background: var(--soft); }
.book-voucher { margin: .9rem 0 0; max-width: 52rem; }
/* v11: the "Prefer Groupon?" link stays, but low-key */
.pk-groupon { font-weight: 500; font-size: .92rem; color: var(--muted); }