/* Fernhill Home Cleaning. Shared styles for all pages. */

:root {
  --ink: #14262B;
  --lagoon: #1B6F72;
  --glove: #F4C21F;
  --glove-dark: #D9A90B;
  --mist: #E4EFEE;
  --chalk: #F7FAFA;
  --line: #C3D6D4;
  --muted: #455A5E;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter: 20px;
  --max: 1160px;
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--lagoon); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.band-ink :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.skip:hover { color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: 64px; }
.band-chalk { background: var(--chalk); }
.band-mist { background: var(--mist); }
.band-ink { background: var(--ink); color: #fff; }
.band-glove { background: var(--glove); }
.section-head { max-width: 62ch; display: grid; gap: 12px; margin-bottom: 36px; }
.section-head p { color: var(--muted); }
.band-ink .section-head p { color: #B9CFCD; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px;
  background: var(--ink); color: #fff;
  font: 700 1.05rem var(--body);
  border: 2px solid var(--ink); border-radius: 12px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--lagoon); border-color: var(--lagoon); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.header-inner { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; margin-right: auto; }
.brand img { width: 36px; height: 36px; }
.brand-text { display: grid; line-height: 1; }
.brand-text strong { font: 800 1.35rem var(--display); letter-spacing: -0.03em; }
.brand-text span { font-size: .72rem; font-weight: 500; color: var(--muted); margin-top: 3px; }
.site-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 10px; }
.site-nav a:hover { background: var(--mist); }
.site-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--glove); border-radius: 10px 10px 0 0; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }
.header-phone img { width: 20px; height: 20px; }
.header-cta { display: none; min-height: 44px; padding: 8px 18px; font-size: 1rem; white-space: nowrap; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform .2s, top .2s, opacity .2s; }
.nav-toggle span { top: 19px; }
.nav-toggle span::before { top: -7px; left: 0; right: 0; }
.nav-toggle span::after { top: 7px; left: 0; right: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Forced colors (Windows High Contrast): backgrounds are replaced, so draw the menu icon with a system colour. */
@media (forced-colors: active) {
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background-color: CanvasText; forced-color-adjust: none; }
}

/* The header switches layout at 62.5em (1000px at the default text size), so larger browser text switches to the menu sooner.
   Em units in a media query follow the browser's default font size. The first query is the exact complement of the second. */
@media not all and (min-width: 62.5em) {
  .js .nav-toggle { display: block; }
  .js .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); display: none; padding: 8px var(--gutter) 16px; box-shadow: 0 18px 24px rgba(20,38,43,.08); max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
  .js .site-nav[data-open="true"] { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.1rem; }
  .js .site-nav a[aria-current="page"] { box-shadow: none; color: var(--lagoon); }
  .site-nav { order: 5; width: 100%; }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
  /* Without JavaScript the wrapped nav makes the header too tall to stay stuck: it would cover anchor targets. */
  html:not(.js) .site-header { position: static; }
  .header-phone { min-width: 44px; justify-content: center; }
  .header-phone span { display: none; }
}
@media (min-width: 62.5em) {
  .header-cta { display: inline-flex; }
}

/* ---------- Hero (home) ---------- */
.hero { background: var(--chalk); }
.hero .wrap { display: grid; gap: 32px; padding-block: 36px 88px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.lead { font-size: 1.2rem; max-width: 46ch; color: var(--muted); }
.proofs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proofs li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.proofs img { width: 22px; height: 22px; flex: none; }
.hero-photo { position: relative; }
.hero-photo > img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 22%; border-radius: 24px; }
.float-card {
  position: static; margin-top: 12px;
  background: #fff; border-radius: 14px; padding: 14px 16px;
  border: 1.5px solid var(--line);
  display: flex; gap: 12px; align-items: flex-start; font-size: .95rem;
}
.float-card img { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.float-card strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.01em; }
.float-card span { color: var(--muted); }

/* ---------- Price bar ---------- */
.quote-wrap { position: relative; z-index: 2; margin-top: -56px; padding-bottom: 8px; }
.quote-bar {
  background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--glove);
  padding: 22px; display: grid; gap: 16px 20px; grid-template-columns: 1fr;
}
.quote-bar h2 { font-size: 1.6rem; letter-spacing: -0.02em; }
.field { display: grid; gap: 6px; align-content: start; }
label, legend { font-weight: 700; font-size: .95rem; }
select, input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid #7D989A; border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
select:hover, input:hover, textarea:hover { border-color: var(--ink); }
select:disabled, select:disabled:hover { background: var(--chalk); color: var(--muted); border-color: #7D989A; cursor: not-allowed; }
textarea { resize: vertical; }
.segments { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segments legend { grid-column: 1 / -1; padding: 0; margin-bottom: 2px; }
.segments label { position: relative; font-weight: 500; }
.segments input { position: absolute; opacity: 0; inset: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.segments span { display: grid; place-items: center; text-align: center; min-height: 48px; padding: 8px 6px; border: 1.5px solid #7D989A; border-radius: 10px; background: #fff; font-size: .95rem; line-height: 1.2; }
.segments input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.segments input:focus-visible + span { outline: 3px solid var(--lagoon); outline-offset: 2px; }
@media (forced-colors: active) {
  .segments input:checked + span { border-width: 4px; padding: 5.5px 3.5px; text-decoration: underline; }
}

.qb-panel { background: var(--glove); border-radius: 16px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.qb-panel > div[aria-live] { display: grid; gap: 6px; }
/* Without JavaScript the price cannot update, so hide it; the <noscript> note under it explains. */
html:not(.js) .qb-panel > div[aria-live] { display: none; }
.qb-panel .total-note a { color: var(--ink); }
.total-label { font-weight: 700; font-size: .95rem; }
.qb-panel output { font: 800 3.2rem/1 var(--display); letter-spacing: -0.04em; }
.qb-panel output.tick { animation: tick .45s cubic-bezier(.2, .8, .2, 1); }
/* v2: the price flips up like a card when it changes (3D), instead of a small nudge. */
.qb-panel output.tick { transform-origin: 50% 100%; }
@keyframes tick { from { transform: perspective(500px) rotateX(-75deg); opacity: .2; } to { transform: none; opacity: 1; } }
.total-note { font-size: .95rem; }
.promise { font-size: .9rem; display: flex; gap: 8px; align-items: flex-start; }
.promise img { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.fineprint { font-size: .86rem; color: var(--muted); }
.qb-panel .fineprint { color: var(--ink); opacity: .85; }

@media (min-width: 900px) {
  .quote-bar { grid-template-columns: repeat(3, 1fr) 310px; padding: 28px; }
  .qb-title, .qb-type, .qb-fine { grid-column: 1 / 4; }
  .qb-panel { grid-column: 4; grid-row: 1 / 5; }
  .quote-bar { align-content: start; }
}

/* ---------- Commitments band ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.stats li { display: grid; gap: 4px; align-content: start; }
.stats strong { font: 800 clamp(2.2rem, 6vw, 3.4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--glove); }
.stats span { color: #D7E6E4; max-width: 24ch; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ---------- Services layout (asymmetric) ---------- */
.service-grid { display: grid; gap: 20px; }
.tile { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.tile-body p { color: var(--muted); }
.price-tag { font: 800 1.15rem var(--display); }
.price-tag small { font: 500 .9rem var(--body); color: var(--muted); }
.link-arrow { font-weight: 700; }
.tile-photo { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .service-grid { grid-template-columns: 1fr 1.15fr; grid-template-rows: 1fr 1fr; }
  .tile-tall { grid-row: 1 / 3; }
  .tile-tall .tile-photo { aspect-ratio: 4 / 4.3; }
  .tile-wide { grid-template-columns: 0.8fr 1.2fr; }
  .tile-wide .tile-photo { aspect-ratio: auto; min-height: 100%; }
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-left: 64px; max-width: 46ch; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 1.2rem var(--display); }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
  .steps li { padding-left: 0; padding-top: 64px; }
  .steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--ink); opacity: .2; }
  .steps li::before { z-index: 1; }
}

/* ---------- Tabs / checklist ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split img { border-radius: var(--radius); width: 100%; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.reverse > :first-child { order: 2; }
  .split.top { align-items: start; }
}
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tablist button { font: 600 1rem var(--body); min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.tablist button[aria-selected="true"] { background: var(--ink); color: #fff; }
/* Forced colors drop the dark fill that marks the selected tab, so mark it with a thicker border and an underline. */
@media (forced-colors: active) {
  .tablist button[aria-selected="true"] { border-width: 4px; padding-inline: 15.5px; text-decoration: underline; }
}
.js .tabpanel[hidden] { display: none; }
/* Without JavaScript the tabs cannot switch, so show every checklist under its room name and hide the buttons. */
html:not(.js) .tablist { display: none; }
html:not(.js) .tabpanel[hidden] { display: block; }
html:not(.js) .tabpanel::before { display: block; font: 700 1.1rem var(--display); margin: 20px 0 10px; }
html:not(.js) #panel-kitchen::before { content: "Kitchen"; margin-top: 0; }
html:not(.js) #panel-bath::before { content: "Bathrooms"; }
html:not(.js) #panel-bed::before { content: "Bedrooms"; }
html:not(.js) #panel-living::before { content: "Living areas"; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 6px; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5l3.5 3.5 7.5-8.5' fill='none' stroke='%231B6F72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tabnote { margin-top: 18px; color: var(--muted); font-size: .95rem; }

/* ---------- Reviews (placeholder layout) ---------- */
.expect-grid { display: grid; gap: 20px; }
.expect-card { margin: 0; padding: 26px; background: #fff; border-radius: var(--radius); border: 1.5px solid var(--line); display: grid; gap: 10px; align-content: start; }
.expect-card h3 { font: 600 1.25rem/1.2 var(--display); letter-spacing: -0.01em; }
.expect-card p { color: var(--muted); }
.expect-feature { background: var(--ink); color: #fff; border-color: var(--ink); }
.expect-feature h3 { font-size: 1.5rem; }
.expect-feature p { color: #B9CFCD; }
@media (min-width: 900px) {
  .expect-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* ---------- Areas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 500; }
.zip { display: grid; gap: 10px; max-width: 420px; }
.zip-row { display: flex; gap: 10px; }
.zip-row input { flex: 1; }
.zip-result { min-height: 1.6em; font-weight: 700; }
.zip-result.ok { color: var(--lagoon); }
.zip-result.no { color: #9A3412; }

/* Without JavaScript the checker cannot answer: hide it and let the <noscript> line under it point to the phone. */
html:not(.js) form[data-zip] { display: none; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 600 1.6rem var(--display); color: var(--lagoon); }
details[open] summary::after { content: "\2212"; }
details p { padding: 0 0 18px; color: var(--muted); max-width: 62ch; }

/* ---------- CTA band ---------- */
.cta { display: grid; gap: 20px; align-items: center; }
.cta p { max-width: 46ch; }
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; gap: 48px; } }

/* ---------- Inner pages ---------- */
.page-head { background: var(--mist); padding-block: 44px 52px; }
.page-head .wrap { display: grid; gap: 14px; }
.crumbs { font-size: .92rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.page-head p.lead { color: var(--ink); opacity: .8; }

.price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.price-table th, .price-table td { text-align: left; padding: 16px 18px; vertical-align: top; }
.price-table thead th { background: var(--mist); font-size: .95rem; }
.price-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.price-table tbody th { font: 600 1.15rem var(--display); white-space: nowrap; }
.price-table td { color: var(--muted); }
.price-table td:last-child, .price-table thead th:last-child { text-align: right; white-space: nowrap; }
.price-table td:last-child { color: var(--ink); font: 800 1.35rem var(--display); }
@media (max-width: 599px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table, .price-table tbody { display: block; }
  .price-table tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 16px 18px; }
  .price-table tbody tr + tr { border-top: 1px solid var(--line); }
  .price-table tbody tr + tr > * { border-top: 0; }
  .price-table tbody tr > * { padding: 0; }
  .price-table tbody th { grid-column: 1; grid-row: 1; }
  .price-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .price-table td:last-child { grid-column: 2; grid-row: 1; font-size: 1.25rem; }
}
.dl-rows { margin: 0; display: grid; }
.dl-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dl-rows dt { font-weight: 700; }
.dl-rows dd { margin: 0; color: var(--muted); text-align: right; }
.dl-rows dd strong { color: var(--ink); font-family: var(--display); }

.service-block { padding-block: 64px; }
.service-block + .service-block { border-top: 1px solid var(--line); }
.service-block h2 { margin-bottom: 12px; }
.service-block .price-tag { margin: 6px 0 18px; }
.check-cols { display: grid; margin: 20px 0 28px; }
.addon-note { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }

.cards-3 { display: grid; gap: 20px; }
.value { display: grid; gap: 10px; align-content: start; }
.value img { width: 36px; height: 36px; }
.value p { color: var(--muted); }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.notice { background: var(--mist); border-left: 4px solid var(--lagoon); border-radius: 0 12px 12px 0; padding: 16px 18px; }

/* ---------- Forms ---------- */
.booking { display: grid; gap: 16px; }
.hp { position: absolute; left: -9999px; }
.contact-grid { display: grid; gap: 40px; }
.contact-card { display: grid; gap: 18px; align-content: start; }
.contact-card > div { display: flex; gap: 14px; align-items: flex-start; }
.contact-card img { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.contact-card p { color: var(--muted); }
.contact-card strong { display: block; color: var(--ink); }
.estimate-line { background: var(--glove); border-radius: 12px; padding: 12px 16px; font-weight: 700; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.2fr .8fr; gap: 72px; }
  .booking { grid-template-columns: 1fr 1fr; }
  .booking .wide, .booking .btn, .booking .estimate-line { grid-column: 1 / -1; }
  .booking .btn { justify-self: start; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #D7E6E4; padding-block: 56px 36px; }
.footer-grid { display: grid; gap: 32px; }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer li a { display: inline-block; padding: 6px 0; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer h2 { font: 700 1rem var(--body); letter-spacing: 0; color: #fff; margin-bottom: 10px; }
.footer-brand { display: grid; gap: 12px; max-width: 34ch; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand-text span { color: #B9CFCD; }
.footer-note { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; color: #B9CFCD; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }

.thanks { max-width: 680px; margin: 0 auto; padding: 72px var(--gutter); display: grid; gap: 18px; }

/* ---------- Mobile bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 719px) {
  body { padding-bottom: 76px; }
  html { scroll-padding-bottom: 80px; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(247,250,250,.97); border-top: 1px solid var(--line); }
  .mobile-bar a { display: grid; place-items: center; min-height: 52px; border-radius: 12px; font-weight: 700; text-decoration: none; }
  .mb-call { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
  .mb-quote { background: var(--glove); color: var(--ink); }
  .mb-quote:hover { background: var(--glove); color: var(--ink); }
}

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .band { padding-block: 88px; }
  .expect-grid, .cards-3 { gap: 24px; }
}
@media (min-width: 960px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 64px; padding-block: 64px 120px; }
  .hero-photo > img { aspect-ratio: 4 / 4.6; object-position: center 40%; }
  .float-card { position: absolute; left: -28px; bottom: 32px; max-width: 300px; margin-top: 0; border: 0; box-shadow: 0 14px 34px rgba(20,38,43,.2); }
  .quote-wrap { margin-top: -72px; }
}

/* ---------- Compact phone layout ----------
   Phones get tighter spacing and somewhat smaller headings, so less of the screen goes to spacing and fixed bars.
   Body text stays at 16px: smaller is harder to read, and form fields under 16px make iOS zoom the page on focus.
   Tap targets stay at 44px or more. Nothing here applies at 720px and wider. */
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  /* On phones the header scrolls away with the page (only the bottom bar stays fixed), which frees about 55px of screen.
     It stays "relative" so the open menu can still position itself under it. */
  .site-header { position: relative; }
  /* The header is no longer pinned to the top of the screen, so leave room for the header and the bottom bar. */
  .js .site-nav { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
  html { scroll-padding-top: 16px; scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body { font-size: 1rem; line-height: 1.55; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.1rem; }
  .lead { font-size: 1.05rem; }

  .header-inner { padding-block: 5px; gap: 8px; }
  .brand { min-height: 44px; }
  .brand img { width: 30px; height: 30px; }
  .brand-text strong { font-size: 1.2rem; }
  .brand-text span { font-size: .68rem; margin-top: 2px; }

  .mobile-bar { gap: 8px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); }
  .mobile-bar a { min-height: 44px; font-size: .95rem; }

  .band { padding-block: 40px; }
  .section-head { gap: 8px; margin-bottom: 24px; }
  .page-head { padding-block: 28px 32px; }
  .page-head .wrap { gap: 10px; }
  .service-block { padding-block: 40px; }
  .service-block .price-tag { margin: 4px 0 14px; }
  .check-cols { margin: 14px 0 22px; }
  .btn { min-height: 48px; padding: 10px 20px; font-size: 1rem; }
  .btn-row { gap: 8px; }
  .hero-copy .btn-row .btn { padding: 10px 14px; font-size: .92rem; }

  .hero .wrap { gap: 20px; padding-block: 24px 64px; }
  .hero-copy { gap: 14px; }
  .proofs { gap: 8px; font-size: .95rem; }
  .proofs img { width: 20px; height: 20px; }
  .hero-photo > img { aspect-ratio: 16 / 10; object-position: center 30%; border-radius: 18px; }
  .float-card { margin-top: 10px; padding: 12px 14px; font-size: .9rem; }
  .float-card img { width: 24px; height: 24px; }
  .quote-wrap { margin-top: -40px; }

  .quote-bar { padding: 16px; gap: 12px; border-radius: 18px; box-shadow: 5px 5px 0 var(--glove); }
  .quote-bar h2 { font-size: 1.25rem; }
  label, legend { font-size: .9rem; }
  select, input[type="text"], input[type="tel"], input[type="email"], textarea { min-height: 44px; padding: 9px 12px; }
  .segments span { min-height: 44px; font-size: .9rem; }
  .qb-panel { padding: 14px; gap: 8px; }
  .qb-panel output { font-size: 2.6rem; }
  .total-note, .promise { font-size: .88rem; }
  .fineprint { font-size: .8rem; }

  .stats { gap: 22px 16px; }
  .stats strong { font-size: 2rem; }
  .stats span { font-size: .92rem; }

  .service-grid { gap: 14px; }
  .tile-photo { aspect-ratio: 16 / 10; }
  .tile-body { padding: 16px; gap: 8px; }
  .price-tag { font-size: 1.05rem; }

  .steps { gap: 18px; }
  .steps li { padding-left: 50px; }
  .steps li::before { width: 34px; height: 34px; font-size: 1rem; }

  .split { gap: 20px; }
  .split img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
  .ticks { gap: 10px; }
  .tablist { margin-bottom: 14px; }
  .tablist button { font-size: .95rem; }
  .tabnote { margin-top: 14px; font-size: .9rem; }

  .expect-grid { gap: 14px; }
  .expect-card { padding: 18px; gap: 8px; }
  .expect-card h3 { font-size: 1.1rem; }
  .expect-feature h3 { font-size: 1.25rem; }

  .chips { gap: 8px; }
  .chips li { padding: 6px 12px; font-size: .95rem; }
  summary { padding: 14px 34px 14px 0; }
  details p { padding-bottom: 14px; }
  .cta { gap: 14px; }

  .dl-rows > div { padding: 10px 0; }
  .cards-3 { gap: 18px; }
  .value img { width: 30px; height: 30px; }
  .notice { padding: 12px 14px; }
  .contact-grid { gap: 28px; }
  .contact-card { gap: 14px; }
  .booking { gap: 12px; }
  .thanks { padding-block: 40px; }

  .site-footer { padding-block: 36px 28px; }
  /* Services and Company sit side by side; the brand block (first) and the contact block (last) span both columns. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .site-footer li a { padding: 4px 0; }
  .footer-note { margin-top: 24px; padding-top: 14px; font-size: .85rem; }
}

/* On phones of 360px and wider, bedrooms and bathrooms sit side by side in the price bar to save height.
   They are the 2nd and 3rd children of the bar; if that markup order changes, update these selectors. */
@media (min-width: 360px) and (max-width: 719px) {
  .quote-bar { grid-template-columns: 1fr 1fr; }
  .quote-bar > * { grid-column: 1 / -1; }
  .quote-bar > .field:nth-child(2), .quote-bar > .field:nth-child(3) { grid-column: auto; }
}

/* ---------- Type effects (v2): 3D extruded headlines and animated word reveals ----------
   Headlines get a stacked-shadow "extrusion" so the letters look solid. On a screen with a mouse the extrusion and a
   slight tilt follow the pointer over the hero (motion.js sets --sx, --sy and the transform). On phones the extrusion is
   shallower and static. Headings are split into words by motion.js and flip up one by one the first time they are seen.
   Everything animated is switched off when the visitor asks for reduced motion (motion.js never starts, and no
   hidden starting states are set), and the page works without any of it. */
main h1 {
  --sx: 1; --sy: 1;
  text-shadow:
    calc(var(--sx) * 1px) calc(var(--sy) * 1px) 0 var(--glove),
    calc(var(--sx) * 2px) calc(var(--sy) * 2px) 0 var(--glove),
    calc(var(--sx) * 3px) calc(var(--sy) * 3px) 0 var(--glove),
    calc(var(--sx) * 4px) calc(var(--sy) * 4px) 0 var(--glove),
    calc(var(--sx) * 5px) calc(var(--sy) * 5px) 0 var(--glove),
    calc(var(--sx) * 6px) calc(var(--sy) * 6px) 0 var(--glove),
    calc(var(--sx) * 8px) calc(var(--sy) * 10px) 16px rgba(20, 38, 43, .22);
}
.hero h1 { transform-origin: 30% 60%; transition: transform .25s ease-out; }
.stats strong {
  text-shadow: 1px 1px 0 #A87F00, 2px 2px 0 #A87F00, 3px 3px 0 #A87F00, 4px 5px 8px rgba(0, 0, 0, .35);
}
@media (max-width: 719px) {
  main h1 {
    text-shadow:
      calc(var(--sx) * 1px) calc(var(--sy) * 1px) 0 var(--glove),
      calc(var(--sx) * 2px) calc(var(--sy) * 2px) 0 var(--glove),
      calc(var(--sx) * 3px) calc(var(--sy) * 3px) 0 var(--glove),
      calc(var(--sx) * 5px) calc(var(--sy) * 6px) 10px rgba(20, 38, 43, .2);
  }
  .stats strong { text-shadow: 1px 1px 0 #A87F00, 2px 2px 0 #A87F00, 3px 4px 6px rgba(0, 0, 0, .35); }
}
@media (forced-colors: active) {
  main h1, .stats strong { text-shadow: none; }
}

@keyframes wordIn {
  from { opacity: 0; transform: perspective(700px) rotateX(-70deg) translateY(.4em); }
  to { opacity: 1; transform: none; }
}
/* The first paint of a hero headline waits for motion.js to split it; if the script never runs, the headline still
   appears after 3 seconds (pure CSS, no script needed). */
@keyframes unhide { to { opacity: 1; } }
.motion main h1:not(.type-split) { opacity: 0; animation: unhide .01s 3s forwards; }
.motion-on .type-split .mw { display: inline-block; transform-origin: 50% 100%; }
.motion-on .type-split:not(.is-in) .mw { opacity: 0; transform: perspective(700px) rotateX(-70deg) translateY(.4em); }
.motion-on .type-split.is-in .mw { animation: wordIn .65s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 55ms); }
.motion-on .stats:not(.is-in) strong { opacity: 0; transform: perspective(600px) rotateX(-70deg) translateY(.3em); transform-origin: 50% 100%; }
.motion-on .stats.is-in strong { transform-origin: 50% 100%; animation: wordIn .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); }

/* Printing: show every heading in its final state, even ones the visitor never scrolled to. */
@media print {
  .motion main h1:not(.type-split), .motion-on .type-split .mw, .motion-on .stats strong {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 { transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  .qb-panel output.tick { animation: none; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: none; }
}