/* ============================================================
   Shared stylesheet — teal & white design system
   Self-contained: system fonts, no external requests.
   Sections: tokens · base · a11y utils · header · hero · sections
             · components · pages · responsive · print
   ============================================================ */

:root {
  color-scheme: light;

  --teal-900: #083d40;
  --teal-800: #0a4a4e;
  --teal-700: #0e6b70;
  --teal-600: #0f7278;   /* text-safe: 5.2:1 on warm tint, 5.6:1 on white */
  --teal-100: #d9edee;
  --teal-50:  #edf6f6;
  --ink:      #1d2b2c;
  --ink-soft: #46595a;
  --paper:    #ffffff;
  --paper-warm: #f7f5f0;
  --amber:    #e8a33d;
  --amber-text: #8a5a12; /* accessible amber for small text on light bg */
  --radius: 14px;
  --shadow: 0 6px 24px rgba(8, 61, 64, 0.10);
  --shadow-lg: 0 12px 40px rgba(8, 61, 64, 0.16);
  --header-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scroll-padding-bottom: 5rem; /* clears the fixed mobile call bar */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1120px, 92%); margin: 0 auto; }
.container-narrow { width: min(760px, 92%); margin: 0 auto; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3.5vw, 2.25rem); font-weight: 700; margin-bottom: 0.5em; }
h3 { font-size: 1.15rem; font-weight: 700; }

a { color: var(--teal-700); }

/* ---------- Accessibility utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--teal-800);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Visible focus for everything interactive */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 2px;
  border-radius: 6px;
}
.section-dark a:focus-visible,
.page-hero a:focus-visible,
.quote-result a:focus-visible {
  outline-color: #ffd9a0;
}

/* Inline text links on dark backgrounds. Without this they inherit the default
   dark teal, which is unreadable on the dark teal panels. Buttons are excluded
   because they carry their own colours. */
.section-dark a:not(.btn),
.page-hero a:not(.btn),
.quote-result a:not(.btn) {
  color: #ffd9a0;
  text-decoration: underline;
}
/* Breadcrumbs and the language switch stay neutral. */
.page-hero .breadcrumbs a:not(.btn),
.section-dark .breadcrumbs a:not(.btn) {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.72em 1.4em;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 0.9em 1.7em; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--teal-700); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--teal-600); }

.btn-accent { background: var(--amber); color: var(--teal-900); box-shadow: var(--shadow); }
.btn-accent:hover { background: #f0b155; }

.btn-ghost { background: transparent; color: var(--teal-800); border-color: var(--teal-700); }
.btn-ghost:hover { background: var(--teal-50); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); }

.text-link { font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--teal-100);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.8rem 0;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--teal-800);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.brand-mark { width: 26px; height: 26px; color: var(--teal-700); flex-shrink: 0; }

.main-nav { display: flex; gap: 1.15rem; margin-left: auto; align-items: center; }
.main-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.93rem;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--teal-700); }
.main-nav a[aria-current="page"] { color: var(--teal-800); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Nav dropdowns ---------- */
.nav-group { position: relative; display: flex; align-items: center; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.nav-trigger:hover { color: var(--teal-700); }
.nav-trigger svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.nav-group.open .nav-trigger { color: var(--teal-700); }
.nav-group.open .nav-trigger svg { transform: rotate(180deg); }
/* the page you're on lives in this menu */
.nav-trigger[data-section-current] {
  color: var(--teal-800);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--teal-100);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  list-style: none;
  display: none;
  z-index: 110;
}
.nav-panel::before { /* hover bridge so the gap doesn't close the menu */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-group.open .nav-panel,
/* Hover works without JavaScript for pointer users. Keyboard users with JS
   disabled are covered by the <noscript> block in each page's <head>, which
   flattens the menus — :focus-within cannot help here, because links inside a
   display:none panel are not focusable in the first place. */
.nav-group:hover .nav-panel { display: block; }

.main-nav .nav-panel a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.main-nav .nav-panel a:hover { background: var(--teal-50); color: var(--teal-800); }
.main-nav .nav-panel a[aria-current="page"] {
  background: var(--teal-50);
  color: var(--teal-800);
  text-decoration: none;
}
.nav-panel .nav-panel-sep {
  border-top: 1px solid var(--teal-50);
  margin: 0.35rem 0.3rem;
}
.main-nav .nav-panel a.nav-panel-all {
  color: var(--teal-700);
  font-size: 0.88rem;
}

.lang-switch {
  border: 1.5px solid var(--teal-100);
  border-radius: 999px;
  padding: 0.25em 0.75em !important;
  font-weight: 700 !important;
  color: var(--teal-700) !important;
  font-size: 0.85rem !important;
}
.lang-switch:hover { background: var(--teal-50); }

.header-actions { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--teal-800);
  text-decoration: none;
  font-size: 0.93rem;
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; flex-shrink: 0; }
.header-phone:hover { color: var(--teal-600); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  background: var(--teal-800);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Notices ---------- */
.notice {
  background: #fdf3e0;
  border-bottom: 1px solid #f0dcb4;
  color: #6b4a10;
  font-size: 0.92rem;
  text-align: center;
  padding: 0.7rem 1rem;
}
.notice a { color: #6b4a10; font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--teal-100) 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 110%, #f3ead9 0%, transparent 55%),
    var(--paper-warm);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  padding: 4.5rem 0 4rem;
}
.hero-eyebrow {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal-600);
  margin-bottom: 0.8rem;
}
.hero-sub {
  font-size: 1.13rem;
  color: var(--ink-soft);
  margin: 1.1rem 0 1.6rem;
  max-width: 34em;
}
.accent-underline { background: linear-gradient(transparent 68%, rgba(232,163,61,.55) 68%); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }

.hero-price-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.8rem;
  border-top: 5px solid var(--amber);
  transform: rotate(1.2deg);
}
.hpc-label {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-600);
}
.hpc-price { font-size: 3rem; font-weight: 800; color: var(--teal-900); line-height: 1.1; }
.hpc-price span { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
.hpc-note { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0.9rem; }
.hpc-list { list-style: none; margin-bottom: 1.2rem; }
.hpc-list li { padding-left: 1.5em; position: relative; font-size: 0.95rem; margin-bottom: 0.3rem; }
.hpc-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-600); font-weight: 800; }

/* ---------- Hero widget (sliders + frequency + live price) ---------- */
.hero-widget {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  border-top: 5px solid var(--amber);
  width: 100%;
}
.hw-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.hw-slider label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-900);
  margin-bottom: 0.35rem;
}
.hw-slider output {
  font-weight: 800;
  color: var(--teal-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hw-slider input[type="range"] {
  width: 100%;
  accent-color: var(--teal-700);
  height: 1.4rem;
  cursor: pointer;
}
.hw-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.hw-freq {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.hw-freq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  border: 1.5px solid var(--teal-100);
  border-radius: 10px;
  padding: 0.65rem 0.5rem 0.6rem;
  cursor: pointer;
  background: var(--paper-warm);
}
.hw-freq-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hw-freq-card:has(input:checked) {
  background: var(--teal-800);
  border-color: var(--teal-800);
}
.hw-freq-card:has(input:checked) .hw-freq-name { color: #fff; }
.hw-freq-card:has(input:focus-visible) {
  outline: 3px solid var(--teal-600);
  outline-offset: 2px;
}
.hw-freq-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--teal-900);
  line-height: 1.2;
}
.hw-freq-off {
  font-weight: 800;
  font-size: 0.72rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--teal-100);
  color: var(--teal-900);
}
.hw-freq-card:has(input:checked) .hw-freq-off {
  background: var(--amber);
  color: var(--teal-900);
}
.hw-freq-pop {
  position: absolute;
  top: -0.62rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--teal-900);
  color: #fff;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
}
.hw-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  background: var(--teal-900);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.95rem 1.15rem;
  box-shadow: var(--shadow);
}
.hw-cta:hover { background: var(--teal-800); }
.hw-cta-label {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.hw-cta-price { font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.hw-cta-price .hw-per { font-weight: 600; font-size: 0.85rem; opacity: 0.85; }
.hw-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.7rem; }

/* ---------- Booking page ---------- */
.bk-progress {
  list-style: none;
  display: none;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  padding: 0;
  flex-wrap: wrap;
}
.bk-js .bk-progress { display: flex; }
.bk-progress li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: var(--paper-warm);
  border: 1.5px solid var(--teal-100);
}
.bk-progress li.active { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }
.bk-progress li.done { border-color: var(--teal-600); color: var(--teal-800); }
.bk-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-900);
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
}
.bk-progress li.active .bk-dot { background: var(--amber); }
.bk-progress li.done .bk-dot { background: var(--teal-600); color: #fff; }

.bk-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 2rem;
  align-items: start;
}
#booking-form {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.bk-step { border: 0; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
/* Progressive enhancement: without JavaScript the booking form is one long
   page — every step visible, no step buttons, one submit at the end. The JS
   adds `bk-js` to <body> and only then does it become a wizard. Doing it this
   way round means a failed/blocked script leaves a usable form instead of
   stranding the visitor on step 1 with a dead Next button.
   Note: an author `display` rule beats the hidden attribute's UA
   `display: none`, so hiding a step needs this explicit rule. */
.bk-js .bk-step[hidden] { display: none; }
.bk-step-h { margin-bottom: 0; }
.bk-step-h:focus, .bk-step-h:focus-visible,
.bk-done h2:focus, .bk-done h2:focus-visible { outline: none; }
.bk-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bk-freq-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.bk-disabled .hw-freq-card:not(:has(input:checked)) { opacity: 0.45; cursor: not-allowed; }
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.qf-field input[type="text"],
.qf-field input[type="tel"],
.qf-field input[type="email"],
.qf-field input[type="date"],
.qf-field textarea {
  width: 100%;
  padding: 0.65em 0.8em;
  border-radius: 10px;
  border: 1.5px solid var(--teal-100);
  background: var(--paper-warm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.qf-field textarea { resize: vertical; }
.bk-nav-btns { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
/* Only the step-navigation buttons are JS-gated. The submit button must
   always render, or a blocked script leaves a form that can't be sent. */
.bk-nav-btns [data-next], .bk-nav-btns [data-back] { display: none; }
.bk-js .bk-nav-btns [data-next], .bk-js .bk-nav-btns [data-back] { display: inline-flex; }
.bk-review { display: grid; gap: 0.4rem; margin: 0; }
.bk-review-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--teal-50);
}
.bk-review-row dt { font-weight: 700; font-size: 0.88rem; color: var(--teal-800); }
.bk-review-row dd { margin: 0; font-size: 0.95rem; }
.bk-fine { font-size: 0.85rem; color: var(--ink-soft); }
.bk-fallback-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.6rem; }

/* Card on file — only rendered for a recurring frequency. It asks for more
   trust than anything else on the page, so it reads as a considered block
   rather than one more field: tinted, bordered, and explicit about what is
   and isn't being agreed to. */
.bk-card-panel {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--teal-50);
  border: 1.5px solid var(--teal-100);
  border-left: 5px solid var(--teal-700);
  border-radius: var(--radius-sm, 10px);
}
.bk-card-panel h3 {
  font-size: 1.05rem;
  color: var(--teal-800);
  margin: 0 0 0.5rem;
}
.bk-card-panel > p { font-size: 0.92rem; margin: 0 0 0.8rem; }
.bk-card-panel .bk-fine { margin: 0.7rem 0 0; }

/* The authorization itself: a checkbox against a full paragraph, so it can't
   use the one-line .qf-check layout. */
.qf-check.bk-consent {
  align-items: flex-start;
  gap: 0.7rem;
  background: #fff;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
}
.qf-check.bk-consent .qf-check-name {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink);
}
.qf-check.bk-consent input { margin-top: 0.15rem; }

/* Booking confirmation pages: running prose under the two policy cards. */
.confirm-body > p + p { margin-top: 1.1rem; }

.bk-summary {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--amber);
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}
.bk-summary-h { font-size: 1.1rem; margin-bottom: 0.2rem; }
.bk-sum-label { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.bk-sum-lines { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.bk-sum-lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.92rem;
  color: var(--ink);
}
.bk-sum-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--teal-100);
  padding-top: 0.7rem;
  font-weight: 800;
  color: var(--teal-900);
}
.bk-sum-total { font-size: 1.9rem; font-weight: 800; color: var(--teal-900); }
.bk-sum-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }
.bk-sum-fine { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.7rem; }

.bk-done {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--amber);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.bk-done h2 { outline: none; }
.bk-done p { margin-top: 0.8rem; }

@media (max-width: 900px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-summary { position: static; order: -1; }
  .bk-freq-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  #booking-form { padding: 1.3rem; }
  .bk-sliders, .bk-two { grid-template-columns: 1fr; }
  .bk-nav-btns { flex-direction: column-reverse; }
  .bk-nav-btns .btn { width: 100%; }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--teal-900), var(--teal-700));
  color: #fff;
  padding: 3rem 0 3.2rem;
}
.page-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); }
.page-hero p { color: rgba(255,255,255,.9); max-width: 46em; margin-top: 0.8rem; font-size: 1.08rem; }
.page-hero .hero-eyebrow { color: var(--amber); }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

.breadcrumbs { font-size: 0.88rem; margin-bottom: 1rem; color: rgba(255,255,255,.75); }
.breadcrumbs a { color: rgba(255,255,255,.9); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin: 0 0.4rem; }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-tint { background: var(--paper-warm); }
.section-dark { background: linear-gradient(135deg, var(--teal-900), var(--teal-800)); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-eyebrow {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--teal-600);
  margin-bottom: 0.5rem;
}
.eyebrow-light { color: var(--amber); }
.section-lead { color: var(--ink-soft); font-size: 1.06rem; max-width: 44em; margin-bottom: 2.2rem; }
.section-dark .section-lead, .section-dark p { color: rgba(255,255,255,.9); }

/* Long-form prose blocks on subpages */
.prose > p, .prose > ul, .prose > ol { margin-bottom: 1rem; color: var(--ink-soft); }
.prose > h3 { margin: 1.8rem 0 0.6rem; color: var(--teal-800); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); }

/* ---------- Cards / grids ---------- */
.card-grid { display: grid; gap: 1.4rem; }
.services-grid { grid-template-columns: repeat(3, 1fr); }

.service-card {
  background: #fff;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}

/* ---------- Photography ----------
   Stock imagery, used decoratively. Never captioned as our own work —
   see assets/IMAGE-CREDITS.md. Swap for real job photos when available. */
.card-photo {
  display: block;
  /* Bleed past the card's 1.8rem padding to meet its edges. The card is a
     flex column, so flex-shrink must be off or the extra width gets squeezed. */
  flex: none;
  width: calc(100% + 3.6rem);
  max-width: none;                 /* beats the global img { max-width: 100% } */
  margin: -1.8rem -1.8rem 0.3rem;
  height: 170px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--teal-50);
}

.page-hero-photo {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 300px);
  object-fit: cover;
  object-position: center;
  background: var(--teal-50);
}

.service-card-featured { border: 2px solid var(--teal-700); box-shadow: var(--shadow-lg); }
.featured-badge {
  position: absolute;
  top: -13px;
  left: 1.4rem;
  background: var(--amber);
  color: var(--teal-900);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.service-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--teal-50);
  color: var(--teal-700);
  display: grid;
  place-items: center;
}
.service-icon svg { width: 26px; height: 26px; }
.service-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.service-card p { color: var(--ink-soft); font-size: 0.97rem; }
.service-card .service-price { margin-top: auto; color: var(--ink); }
.service-price strong { font-size: 1.25rem; color: var(--teal-800); }

/* ---------- Hard water ---------- */
.hw-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
/* No photo column — let the copy use the full width instead of leaving a gap. */
.hw-inner-solo { grid-template-columns: 1fr; }
.hw-inner-solo .hw-copy { max-width: 62ch; }
.hw-copy p { margin-bottom: 1rem; }
.hw-list { list-style: none; margin: 0 0 1.2rem; }
.hw-list li { padding-left: 1.6em; position: relative; margin-bottom: 0.45rem; color: rgba(255,255,255,.9); }
.hw-list li::before { content: "\2726"; position: absolute; left: 0; color: var(--amber); }
.section-dark .hw-price { font-weight: 800; font-size: 1.2rem; color: var(--amber); margin-bottom: 1.2rem; }

.pp-before { background: linear-gradient(160deg, #4a6a6c, #375456); }
.pp-after { background: linear-gradient(160deg, var(--teal-600), var(--teal-700)); border-style: solid; border-color: var(--amber); }

/* ---------- Quote calculator ---------- */
.quote-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--teal-100);
}
.quote-form { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-content: start; }
.qf-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35rem; color: var(--teal-800); }
.qf-field select {
  width: 100%;
  padding: 0.65em 0.8em;
  border-radius: 10px;
  border: 1.5px solid var(--teal-100);
  background: var(--paper-warm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.qf-field select:disabled { opacity: 0.5; cursor: not-allowed; background: #eee; }
.qf-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.3rem; }

/* Add-ons. The fieldset needs all four borders explicitly cleared — the
   global reset does not touch borders, so the UA default would otherwise
   leave a grey box around this block. */
.qf-addons {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid var(--teal-100);
  margin: 0;
  padding: 1rem 0 0;
  min-width: 0; /* fieldsets refuse to shrink inside grid without this */
}
/* A legend positions itself over the fieldset border by default; floating it
   makes it behave like a normal block heading. */
.qf-addons legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.6rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--teal-800);
}
.qf-addons legend .qf-optional {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-left: 0.45rem;
}

/* Two columns of add-on rows on desktop, one on narrow screens. Keeps a long
   add-on menu from burying the price panel. */
.qf-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
  /* The legend above is floated (to escape the fieldset's border notch), so
     without this the grid gets zero available width and its columns overflow. */
  clear: both;
}

/* The less-common add-ons live behind this disclosure so the default view
   stays short — everything is still selectable. */
.qf-more { margin-top: 0.6rem; clear: both; }
.qf-more > summary {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--teal-700);
  cursor: pointer;
  list-style: none;
  padding: 0.35rem 0;
}
.qf-more > summary::-webkit-details-marker { display: none; }
/* Non-breaking space so the gap survives white-space collapsing. */
.qf-more > summary::before {
  content: "+\00a0";
  font-weight: 800;
}
.qf-more[open] > summary::before { content: "\2013\00a0"; }
.qf-more > summary:hover { text-decoration: underline; }
.qf-more .qf-addon-grid { margin-top: 0.5rem; }

/* Each add-on is a selectable row: whole row is the click target, price
   right-aligned like a menu. */
.qf-check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--teal-100);
  border-radius: 10px;
  background: var(--paper-warm);
  font-size: 0.93rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.qf-check:hover { background: var(--teal-50); border-color: #bfdedf; }
.qf-check:focus-within {
  outline: 3px solid var(--teal-600);
  outline-offset: 2px;
}
/* Progressive enhancement — the native checkbox already reads as checked
   where :has() is unsupported. */
.qf-check:has(:checked) {
  border-color: var(--teal-600);
  background: var(--teal-50);
}
.qf-check input {
  accent-color: var(--teal-700);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}
.qf-check-name { color: var(--ink); }
/* Interior windows are priced per opening, so this row carries a count
   instead of a checkbox. */
.qf-count {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--teal-100);
  border-radius: 10px;
  background: var(--paper-warm);
  font-size: 0.93rem;
}
.qf-count:focus-within { outline: 3px solid var(--teal-600); outline-offset: 2px; }
.qf-count select {
  width: auto;
  min-width: 4.4rem;
  padding: 0.3em 0.4em;
  border-radius: 8px;
  border: 1.5px solid var(--teal-100);
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}
.qf-count .qf-check-price { padding-left: 0.4rem; }
.qf-check-price {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--teal-800);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Add-ons a deep clean or move-out already covers: locked on, priced at $0.
   The row stays legible but reads as settled rather than selectable. */
.qf-check.is-included,
.qf-count.is-included {
  border-color: var(--teal-600);
  background: var(--teal-50);
  cursor: default;
}
.qf-check.is-included:hover { background: var(--teal-50); border-color: var(--teal-600); }
.qf-check.is-included input,
.qf-count.is-included select {
  cursor: default;
  opacity: 0.75;
}
.qf-check.is-included .qf-check-price,
.qf-count.is-included .qf-check-price {
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: var(--teal-700);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quote-result {
  background: linear-gradient(160deg, var(--teal-800), var(--teal-700));
  color: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.qr-label { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-100); }
.qr-price { font-size: 3.1rem; font-weight: 800; line-height: 1.05; }
.qr-price.qr-price-blocked { font-size: 1.5rem; line-height: 1.25; }
.qr-sub { color: rgba(255,255,255,.88); font-size: 0.95rem; }
.qr-notes { list-style: none; margin-top: 0.6rem; }
.qr-notes li {
  color: #ffd9a0;
  font-size: 0.88rem;
  font-weight: 600;
  padding-left: 1.1em;
  position: relative;
  margin-bottom: 0.2rem;
}
.qr-notes li::before { content: "\2022"; position: absolute; left: 0; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.qr-actions .btn-primary { background: #fff; color: var(--teal-800); }
.qr-actions .btn-primary:hover { background: var(--teal-50); }
.qr-actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.qr-actions .btn-ghost:hover { background: rgba(255,255,255,.12); }
.qr-fineprint { font-size: 0.82rem; color: rgba(255,255,255,.85); margin-top: 0.8rem; }

/* ---------- Tables ---------- */
.table-wrap { margin-bottom: 2.5rem; }
.table-wrap h3 { margin-bottom: 0.8rem; color: var(--teal-800); }
.table-scroll { overflow-x: auto; padding: 4px; }
.table-scroll:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 2px; border-radius: var(--radius); }
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 0.97rem;
  min-width: 480px;
}
caption {
  text-align: left;
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
}
th, td { padding: 0.75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--teal-50); }
thead th {
  background: var(--teal-800);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:nth-child(even) { background: var(--teal-50); }
tbody th[scope="row"], tbody td:first-child { font-weight: 650; }
.row-highlight td, .row-highlight th { background: #fdf3e0; font-weight: 700; }
.popular-tag {
  display: inline-block;
  background: var(--amber);
  color: var(--teal-900);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.addons-table { min-width: 420px; }
.addons-table td:last-child { font-weight: 700; color: var(--teal-800); white-space: nowrap; }
.table-note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.6rem; }
.scroll-hint { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.4rem; }

.callout {
  background: var(--teal-50);
  border-left: 5px solid var(--teal-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.5rem;
  color: var(--ink-soft);
}
.callout-warm { background: #fdf3e0; border-left-color: var(--amber); color: #6b4a10; }

/* ---------- Checklist ---------- */
.checklist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 1.6rem; }
.check-col {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--teal-600);
}
.check-col h3 { margin-bottom: 0.8rem; color: var(--teal-800); }
.check-col ul { list-style: none; }
.check-col li {
  padding-left: 1.6em;
  position: relative;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.check-col li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-600); font-weight: 800; }
.check-col li strong { color: var(--ink); }

.not-included {
  background: #fff;
  border: 1px dashed var(--teal-100);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
  color: var(--ink-soft);
}
.not-included summary { font-weight: 700; cursor: pointer; color: var(--teal-800); }
.not-included p { margin-top: 0.7rem; font-size: 0.93rem; }

/* ---------- Why us ---------- */
.why-grid { grid-template-columns: repeat(4, 1fr); }
.why-card { background: var(--paper-warm); border-radius: var(--radius); padding: 1.5rem; border: 1px solid #ece7dc; }
.why-card h3 { color: var(--teal-800); margin-bottom: 0.5rem; font-size: 1.05rem; }
.why-card p { font-size: 0.93rem; color: var(--ink-soft); }

/* ---------- Launch offer (replaces placeholder reviews pre-launch) ---------- */
.launch-box {
  background: #fff;
  border: 2px solid var(--teal-700);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2rem;
  align-items: center;
}
.launch-box h3 { font-size: 1.35rem; color: var(--teal-900); margin-bottom: 0.6rem; }
.launch-box p { color: var(--ink-soft); margin-bottom: 0.7rem; }
.launch-steps { list-style: none; }
.launch-steps li {
  padding-left: 1.7em;
  position: relative;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.launch-steps li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-600); font-weight: 800; }
.launch-badge {
  background: var(--amber);
  color: var(--teal-900);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
}
.launch-badge strong { display: block; font-size: 2.2rem; line-height: 1.1; font-weight: 800; }
.launch-badge span { font-size: 0.9rem; font-weight: 700; }

/* Real review cards — used once real reviews exist */
.reviews-grid { grid-template-columns: repeat(3, 1fr); }
.review-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.stars { color: var(--amber-text); letter-spacing: 0.15em; font-size: 1.05rem; }
.review-card blockquote { font-size: 0.96rem; color: var(--ink-soft); font-style: italic; }
.review-card figcaption { font-weight: 700; font-size: 0.9rem; color: var(--teal-800); margin-top: auto; }

/* ---------- Zones ---------- */
.zone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.zone-card { border-radius: var(--radius); padding: 1.4rem; background: var(--paper-warm); border: 1px solid #ece7dc; }
.zone-card h3 { font-size: 0.95rem; color: var(--teal-600); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.zone-card p { font-weight: 600; }
.zone-card small { font-weight: 500; color: var(--ink-soft); display: block; margin-top: 0.3rem; }
.zone-card a { font-size: 0.88rem; }
.zone-home { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }
.zone-home h3 { color: var(--amber); }
.zone-home small { color: rgba(255,255,255,.75); }
.zone-home a { color: #ffd9a0; }

/* ---------- FAQ ---------- */
.faq-item {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 0.9rem;
  padding: 1.1rem 1.5rem;
}
.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  color: var(--teal-900);
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--teal-600);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.97rem; }
.faq-item ul { margin-top: 0.6rem; padding-left: 1.3rem; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Policies ---------- */
.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.policy-card { background: #fff; border: 1px solid var(--teal-100); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.policy-card h3 { color: var(--teal-800); margin-bottom: 0.6rem; }
.policy-card p, .policy-card li { color: var(--ink-soft); font-size: 0.96rem; }
.policy-card ul { padding-left: 1.2rem; margin-top: 0.5rem; }
.policy-card li { margin-bottom: 0.35rem; }

/* ---------- Related links ---------- */
.related-grid { grid-template-columns: repeat(3, 1fr); }
.related-card {
  background: #fff;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
  padding: 1.3rem;
  text-decoration: none;
  display: block;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.related-card:hover { transform: translateY(-2px); }
.related-card h3 { color: var(--teal-800); font-size: 1.02rem; margin-bottom: 0.3rem; }
.related-card p { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Contact ---------- */
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.contact-sub { color: rgba(255,255,255,.88); max-width: 30em; margin-top: 0.4rem; }
.contact-actions { display: flex; flex-direction: column; gap: 0.8rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-900); color: rgba(255,255,255,.78); padding: 2.5rem 0 5.5rem; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-bottom: 1.8rem; }
.footer-grid h3 { color: #fff; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.35rem; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,.65);
}

/* ---------- Mobile call bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--teal-100);
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.mobile-bar .btn { flex: 1; font-size: 0.92rem; padding: 0.7em 0.6em; }

/* ============================================================
   Responsive
   ============================================================ */

/* Mid widths — brand + 4 nav items + phone + CTA is a tight row. Drop the
   phone digits to the icon alone (the link and its screen-reader label stay)
   so the full nav survives ~200px lower than it otherwise would. */
@media (max-width: 1040px) {
  .header-phone .phone-display { display: none; }
  .header-phone svg { width: 21px; height: 21px; }
  .main-nav { gap: 0.95rem; }
}

/* Tablet and down — collapse to the hamburger. Measured: brand + nav + phone
   + CTA needs ~815px of the row, so 900px is where it stops fitting. */
@media (max-width: 900px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--teal-100);
    box-shadow: var(--shadow);
    padding-bottom: 0.5rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav > a { padding: 0.9rem 1.4rem; border-top: 1px solid var(--teal-50); }
  .lang-switch { margin: 0.7rem 1.4rem 0; align-self: flex-start; }
  .nav-toggle { display: flex; }
  /* CSS-only fallback so the menu still opens with JS disabled */
  .main-nav:target { display: flex; }

  /* Dropdowns flatten into always-open labelled groups — nothing to tap twice.
     The trigger becomes a plain section heading. */
  .nav-group { display: block; border-top: 1px solid var(--teal-50); }
  .nav-trigger {
    width: 100%;
    padding: 0.9rem 1.4rem 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal-600);
    cursor: default;
    pointer-events: none;
  }
  .nav-trigger svg { display: none; }
  .nav-trigger[data-section-current] { text-decoration: none; color: var(--teal-600); }
  .nav-panel {
    position: static;
    transform: none;
    display: block;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0.5rem;
    background: none;
  }
  .nav-panel::before { display: none; }
  .main-nav .nav-panel a {
    padding: 0.6rem 1.4rem 0.6rem 2rem;
    border-radius: 0;
    font-weight: 600;
  }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; padding: 3rem 0; }
  .hero-card { display: flex; justify-content: center; }
  .hero-price-card { max-width: 340px; transform: none; }
  .hero-widget { max-width: 460px; }
  .services-grid, .reviews-grid, .checklist-grid, .related-grid { grid-template-columns: 1fr 1fr; }
  .why-grid, .zone-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .hw-inner, .quote-box, .launch-box, .policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .header-actions .btn-primary { display: none; }
  .header-phone .phone-display { display: none; }
  .header-phone svg { width: 22px; height: 22px; }

  .services-grid, .reviews-grid, .checklist-grid, .related-grid,
  .why-grid, .zone-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .quote-form { grid-template-columns: 1fr; padding: 1.4rem; }
  .quote-result { padding: 1.6rem 1.4rem; }
  .section { padding: 3rem 0; }
  .hero-ctas .btn, .page-hero-ctas .btn { width: 100%; }
  .mobile-bar { display: flex; }
  .contact-actions, .contact-actions .btn { width: 100%; }
}

/* Very narrow phones — prevent horizontal overflow */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .qr-price { font-size: 2.6rem; }
  .launch-box, .policy-card, .check-col { padding: 1.2rem; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
  .related-card:hover { transform: none; }
  .nav-trigger svg { transition: none; }
}

/* ============================================================
   Print — the price sheet and checklist are meant to be printed.
   Forces dark-on-white and expands every collapsed section.
   ============================================================ */
@media print {
  :root { --shadow: none; --shadow-lg: none; }

  .site-header, .mobile-bar, .nav-toggle, .skip-link, .notice,
  .hero-ctas, .page-hero-ctas, .qr-actions, .contact-actions,
  .main-nav, .lang-switch, .launch-badge, .nav-panel, .nav-trigger,
  /* The calculator is interactive — useless on paper, and it eats a whole page.
     The price tables below it carry the same numbers. */
  .quote-box { display: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 11pt; }

  .section, .section-sm { padding: 0.6rem 0 !important; }
  .container, .container-narrow { width: 100% !important; }

  /* Kill every dark background so white text isn't lost on paper */
  .section-dark, .quote-result, .page-hero, .site-footer,
  .zone-home, .launch-badge, .hero, .section-tint, thead th, .pp-before, .pp-after {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  .section-dark h2, .section-dark h3, .section-dark p, .section-dark li,
  .page-hero h1, .page-hero p, .quote-result *, .site-footer *,
  .zone-home *, .hw-list li, .qr-notes li, .qr-fineprint {
    color: #000 !important;
  }
  thead th { border-bottom: 2px solid #000 !important; }
  .section-eyebrow, .hero-eyebrow { color: #333 !important; }

  /* Expand all collapsed content */
  details { display: block !important; }
  details > summary { display: block !important; font-weight: 700; }
  details > *:not(summary) { display: revert !important; }
  .faq-item summary::after { content: "" !important; }

  table { min-width: 0 !important; box-shadow: none !important; page-break-inside: avoid; }
  .table-scroll { overflow: visible !important; }
  th, td { border-bottom: 1px solid #999 !important; padding: 0.35rem 0.5rem !important; }
  tbody tr:nth-child(even) { background: #f2f2f2 !important; }
  .row-highlight td, .row-highlight th { background: #e8e8e8 !important; }

  .service-card, .check-col, .why-card, .policy-card, .faq-item, .callout, .launch-box {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .checklist-grid, .services-grid, .policy-grid { grid-template-columns: 1fr 1fr !important; }
  /* Decorative photography never prints — it wastes ink on a price sheet. */
  .card-photo, .page-hero-photo { display: none !important; }
  h2 { page-break-after: avoid; }

  /* Expand link targets so a printed page is still actionable */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="mailto:"]::after,
  a[href^="#"]::after, a[href$=".html"]::after { content: ""; }
}