/* ============================================================
   Hinterland Glassworx — Custom Styles
   Loaded AFTER kilr-framework.css + variables.css.

   Goal: faithful visual clone of the original Duda site, rebuilt
   on the KILR framework (clean code). Components below reproduce
   the original look — simple photo hero, image-top service cards,
   bright-blue "See the Difference" CTA band, dark footer.

   RULES: no px (rem / var(--space-*); hairlines + breakpoints exempt);
   global text classes only — never per-section typography; flex-first;
   box-in-box; BEM for custom; reusable components (.btn-*, .service-card)
   are UI primitives and may set their own type.
   ============================================================ */

/* ============================================================
   1. BRAND-LEVEL GLOBAL TYPOGRAPHY (on the global classes)
   Original: uppercase bold headings (Kumbh Sans), grey body (Inter).
   ============================================================ */
/* v2 (2026-07-23): premium direction drops the uppercase/heavy-weight treatment
   in favour of mixed-case Kumbh Sans + a single Instrument Serif italic accent
   word per heading (see redesign-v2-plan.md). Single source of truth — do not
   re-add per-section heading overrides. */
[class*="heading-"] {
  text-wrap: balance;
  text-transform: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
[class*="sub-heading-"] {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body { color: var(--color-dark); }

/* Combo class — italic serif accent word inside a heading. Never redefines
   size/weight from scratch, only swaps family + style (framework combo-class rule). */
.heading--accent {
  font-family: var(--accent--font-family);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Mobile: give content more width — the framework container keeps a large
   var(--space-s) side padding at all sizes, which squishes content on phones. */
@media (max-width: 768px) {
  [class^="container-"], [class*=" container-"] {
    max-width: 100%;
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}
@media (max-width: 479px) {
  [class^="container-"], [class*=" container-"] {
    padding-left: var(--space-xxs);
    padding-right: var(--space-xxs);
  }
}

/* Reusable colour utilities */
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-white   { color: var(--color-light); }
.text-dark    { color: var(--color-dark); }

/* ============================================================
   2. BUTTONS — pill (matches original)
   ============================================================ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 100vmax;
  padding: 0.9rem 2.1rem;
  font-family: var(--sh--font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-s);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill_icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.btn-pill--white    { background: var(--color-light); color: var(--color-dark); }
.btn-pill--white:hover { filter: brightness(0.94); }

/* v2 contrast gate: brand blue #28C3FB always takes dark text, never white
   (white-on-blue is also a real WCAG contrast failure at this blue's lightness). */
.btn-pill--blue     { background: var(--color-primary); color: #0e2a35; }
.btn-pill--blue:hover { filter: brightness(1.06); }

.btn-pill--outline-dark { background: transparent; color: var(--color-dark); border: 1px solid rgba(0,0,0,0.2); }
.btn-pill--outline-dark:hover { background: var(--color-dark); color: var(--color-light); border-color: var(--color-dark); }

.btn-pill--outline-white { background: transparent; border-color: rgba(255,255,255,0.85); color: #fff; }
.btn-pill--outline-white:hover { background: #fff; color: var(--color-dark); }

/* ============================================================
   3. HEADER / NAV — transparent over hero (kilr-nav system)
   ============================================================ */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--color-dark);
  padding: var(--space-xs) 0;
}
.site-header_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-header_logo { height: 3.1rem; width: auto; display: block; }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav_link {
  color: var(--color-light);
  text-decoration: none;
  font-family: var(--sh--font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-s);
  transition: color 0.2s ease;
}
.site-nav_link:hover { color: var(--color-primary); }

/* Services dropdown */
.site-nav_item--dropdown { position: relative; }
.site-nav_dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sh--font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-s);
  color: var(--color-light);
  transition: color 0.2s ease;
}
.site-nav_dropdown-toggle:hover { color: var(--color-primary); }
.site-nav_caret {
  width: 0; height: 0;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.35rem solid currentColor;
  transition: transform 0.2s ease;
}
.site-nav_dropdown {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  background: var(--color-dark);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.35);
  display: none;
  flex-direction: column;
  z-index: 60;
}
.site-nav_dropdown.is-open { display: flex; }
.site-nav_item--dropdown.is-open .site-nav_caret { transform: rotate(180deg); }
.site-nav_dropdown-link {
  display: block;
  padding: 0.55rem var(--space-s);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: var(--sh--font-family);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.site-nav_dropdown-link:hover { color: var(--color-primary); background: rgba(255,255,255,0.06); }
@media (min-width: 992px) {
  .site-nav_item--dropdown:hover .site-nav_dropdown,
  .site-nav_item--dropdown:focus-within .site-nav_dropdown { display: flex; }
}
@media (max-width: 991px) {
  .site-nav_dropdown {
    position: static;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: var(--space-xxs) 0 var(--space-xxs) var(--space-s);
  }
}

.site-header_hamburger {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.site-header_hamburger span { display: block; width: 1.6rem; height: 0.14rem; background: #fff; border-radius: 0.125rem; }

@media (max-width: 991px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    background: var(--color-dark);
    padding: var(--space-s) var(--space-s) var(--space-m);
  }
  .site-nav.is-open { display: flex; }
  .site-header_hamburger { display: flex; }
  .site-header_wrap { gap: var(--space-s); }
  .site-header_logo { height: 2.4rem; }
}

@media (max-width: 600px) {
  .site-header_wrap { gap: var(--space-s); }
  /* hide the phone pill on small screens so the hamburger is never clipped;
     tap-to-call lives in the open menu + footer + form */
  .site-header .btn-pill--blue { display: none; }
}

/* ============================================================
   4. HERO — full-bleed photo + left-weighted dark gradient
   ============================================================ */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  overflow: hidden;
}
.hero_bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20,18,18,0.82) 0%, rgba(20,18,18,0.6) 42%, rgba(20,18,18,0.15) 100%);
  z-index: 0;
}
.hero_inner { position: relative; z-index: 1; }
.hero_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  max-width: 62rem;
}
/* keep the hero paragraph at a readable width even though the title block is wider */
.hero_content .paragraph-l { max-width: 46rem; }
.hero_content .paragraph-l { color: rgba(255,255,255,0.9); }

/* ============================================================
   5. SERVICES SECTION — centred intro + image-top cards
   ============================================================ */
.services_head {
  max-width: 52rem;
  margin: 0 auto var(--space-l);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: 100%;
}
.service-card_img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}
.service-card_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ============================================================
   6. "SEE THE DIFFERENCE" CTA BAND — bright blue
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--color-primary); }
.cta-band_bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* heavy blue overlay — image stays barely visible behind it */
.cta-band_overlay {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.85;
  z-index: 1;
}
.cta-band > .container-xl { position: relative; z-index: 2; }
.cta-band_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  max-width: 46rem;
  margin: 0 auto;
}
/* single source of spacing = the flex gap (kills stacked framework margins) */
.cta-band_inner > * { margin: 0; }
/* white monogram from the black source via filter */
.cta-band_icon {
  width: 4.5rem;
  height: auto;
  filter: brightness(0) invert(1);
}
.cta-band_inner .paragraph-l { color: rgba(255,255,255,0.92); }

/* ---- Problem / agitator section (empathetic agitation — kilr-copywriting) ---- */
.problem_head { max-width: 52rem; margin: 0 auto var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); }
/* accented "why" points — layout/visual only; typography stays on global classes */
.problem_points { display: flex; flex-direction: column; gap: var(--space-xs); }
.problem_point {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding-left: var(--space-s);
  border-left: 2px solid var(--color-primary);
}
.problem_point p { margin-bottom: 0; }

/* ---- Trust strip (facts under hero — ACL-safe, no fabricated numbers) ---- */
.trust-strip { background: var(--color-card-bg); padding: var(--space-s) 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.trust-strip_item { display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: var(--space-xxs) 0; }
.trust-strip_check { width: 1.35rem; height: 1.35rem; color: var(--color-primary); flex-shrink: 0; }
.trust-strip_stars { color: #FBBC05; font-size: 1.15rem; line-height: 1; flex-shrink: 0; }

/* ---- How It Works (3 steps) ---- */
.steps_head { max-width: 52rem; margin: 0 auto var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); padding: var(--space-s); }
.step_num { font-family: var(--h--font-family); font-size: var(--heading-xxl); font-weight: 700; line-height: 1; color: var(--color-primary); opacity: 0.35; }

/* ---- FAQ (accordion) ---- */
.faq { background: var(--color-dark); }
.faq_head { max-width: 48rem; margin: 0 auto var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); }
.faq_list { max-width: 66rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-xxs); }
.faq_item { background: #f5f5f5; border-radius: 0.85rem; overflow: hidden; }
.faq_trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none;
  padding: 1.5rem var(--space-m); cursor: pointer; text-align: left; gap: var(--space-s);
}
.faq_icon { flex-shrink: 0; width: 1.05rem; height: 1.05rem; position: relative; }
.faq_icon::before, .faq_icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--color-dark); border-radius: 0.125rem; transition: transform 0.3s ease;
}
.faq_icon::before { width: 100%; height: 0.14rem; transform: translate(-50%, -50%); }
.faq_icon::after { width: 0.14rem; height: 100%; transform: translate(-50%, -50%); }
.faq_item--open .faq_icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq_body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq_item--open .faq_body { max-height: 26rem; }
.faq_body p { color: var(--color-dark); padding: 0 var(--space-m) var(--space-s); margin: 0; }
@media (max-width: 600px) {
  .faq_trigger { padding: 1.1rem var(--space-s); gap: var(--space-xs); }
  .faq_body p { padding: 0 var(--space-s) var(--space-s); }
}

/* ---- Image + text split section (e.g. Why Choose, Repair) ---- */
.section-dark { background: var(--color-dark); }
.text-muted-light { color: rgba(255,255,255,0.8); }
.split_img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; display: block; }
/* fill variant — image stretches to match a tall text column on desktop */
.split_img--fill { aspect-ratio: 4 / 5; }
@media (min-width: 992px) {
  .split_img--fill { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
.split_content { display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; }
.split_benefits { display: flex; flex-direction: column; gap: var(--space-xs); }
.split_benefits p { margin-bottom: 0; }

/* ---- Home: linkable service cards + Our Work gallery ---- */
.service-card--link {
  gap: 0;
  background: var(--color-light);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card--link:hover { transform: translateY(-3px); box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,0.12); }
.service-card--link .service-card_img { border-radius: 0; }
.service-card--link .service-card_body { flex: 1 1 auto; padding: var(--space-s); }
.service-card_more {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: auto;
  color: var(--color-primary);
  font-family: var(--sh--font-family); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-s);
}
.service-card--link:hover .service-card_more { gap: 0.65rem; }
.gallery_img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.75rem; display: block; }

/* ---- Reviews (real testimonials) ---- */
/* no padding-bottom here — the gap to Service Areas comes from that
   section's own padding-top, same single-side pattern as every other
   section boundary on this page (avoids double-stacking gaps). */
.reviews { background: var(--color-section); }
.reviews_head { max-width: 52rem; margin: 0 auto var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); }
.review-card {
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: var(--space-m); height: 100%;
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 1rem;
  box-shadow: 0 0.25rem 1.5rem rgba(0,0,0,0.05);
}
.review-card_stars { color: #FBBC05; font-size: var(--text-l); letter-spacing: 0.08em; }
.review-card_quote { font-style: italic; margin: 0; flex: 1; color: var(--color-dark); }
.review-card_name { font-family: var(--sh--font-family); font-weight: 600; font-style: normal; color: var(--color-primary); }

/* Quote form card (white card, used on the blue CTA band) */
.quote-form {
  background: var(--color-light);
  border-radius: 1.25rem;
  padding: var(--space-m);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.22);
  width: 100%;
  max-width: 34rem;
  margin: var(--space-s) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
}
.quote-form_field { display: flex; flex-direction: column; gap: 0.4rem; }
.quote-form_label {
  font-family: var(--sh--font-family);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-dark);
}
.quote-form_input {
  font-family: var(--p--font-family);
  font-size: var(--text-m);
  color: var(--color-dark);
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-form_input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-30);
}
.quote-form_textarea { resize: vertical; min-height: 5rem; }
.quote-form_submit { width: 100%; justify-content: center; margin-top: var(--space-xxs); }
.quote-form_micro { color: var(--color-text-muted); text-align: center; margin: 0; }
.form_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta-band_phone { color: rgba(255,255,255,0.95); }
.cta-band_phone a { color: #fff; text-decoration: underline; }

/* smooth scroll for in-page CTA anchors.
   scroll-padding-top keeps anchor targets (#quote) clear of the sticky header,
   otherwise the jump lands with the heading hidden underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

/* ---- Quote modal (native <dialog>) ---- */
.quote-modal {
  position: fixed;
  inset: 0;
  margin: auto;            /* restores modal centering the global reset strips */
  border: none;
  padding: 0;
  background: transparent;
  width: min(92vw, 38rem);
  height: fit-content;     /* definite height so vertical margin:auto centers */
  max-height: 92vh;
  overflow: visible;
}
.quote-modal::backdrop { background: rgba(0,0,0,0.6); }
/* the form itself is the card — reuse .quote-form, widen a touch for the 2-col rows */
.quote-modal .quote-form {
  position: relative;
  max-width: none;
  margin: 0;
  max-height: 92vh;
  overflow-y: auto;
  gap: var(--space-xs);
}
.quote-modal_head { display: flex; flex-direction: column; gap: 0.3rem; padding-right: 2.5rem; }
/* neutralise the framework paragraph margin so the head->fields gap is just the form gap */
.quote-modal_head > * { margin: 0; }
.quote-form_error { color: #c0392b; text-align: center; margin: 0; }
/* locked service field — shows the page's service but can't be changed */
.quote-form_input[readonly] { background: #ececec; color: var(--color-dark); cursor: default; }
.quote-form_input[readonly]:focus { border-color: rgba(0,0,0,0.12); box-shadow: none; }
.quote-modal_close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #f0f0f0;
  color: var(--color-dark);
  font-size: var(--text-l);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.quote-modal_close:hover { background: #e2e2e2; }
/* selects reuse the input look; add a caret so they don't look empty */
select.quote-form_input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ---- Contact page ---- */
.contact-band { background: var(--color-primary); }
/* intro: even spacing between breadcrumb, title, paragraph */
.contact_intro { display: flex; flex-direction: column; gap: var(--space-s); }
.contact_intro > * { margin: 0; }
/* form: flex column so fields + labels are evenly spaced (not cramped) */
.quote-form > p { margin-bottom: 0; }
.quote-form form { display: flex; flex-direction: column; gap: var(--space-s); }
.contact-logocard {
  background: var(--color-dark);
  border-radius: 1.25rem;
  padding: var(--space-l);
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.contact-logocard img { width: 100%; max-width: 18rem; height: auto; }
.contact_breadcrumb { display: flex; gap: 0.4rem; color: var(--color-text-muted); }
.contact_breadcrumb a { color: var(--color-primary); text-decoration: none; }
.quote-form_row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.quote-form_row .quote-form_field { flex: 1; min-width: 9rem; }
/* the [hidden] attribute's UA default (display:none) loses to the class rule
   above unless restated here — without this, JS-hidden field-sets still render. */
.quote-form_row[hidden],
.quote-form[hidden],
.quote-wizard_emergency-panel[hidden] { display: none; }
.quote-form_file { font-size: var(--text-s); color: var(--color-text-muted); }
.quote-form_file input { display: block; margin-top: 0.3rem; font-size: var(--text-s); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-s); }
.contact-details_block {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.contact-details_block:last-child { padding-bottom: 0; border-bottom: none; }
.contact-details_block .paragraph-m { margin-bottom: 0; }
.contact-details_block > .sub-heading-s { margin-bottom: var(--space-xxs); }
.contact-details_block a { color: #fff; text-decoration: underline; }

/* ---- About page ---- */
.page-intro { display: flex; flex-direction: column; gap: var(--space-s); max-width: 60rem; }
.page-intro > * { margin: 0; }

/* Intro band — extra top padding clears the fixed header on desktop.
   Mobile header is shorter, so the 8rem gap looks like dead space — pull it in. */
.intro-band { background: var(--color-section); padding-top: 8rem; }
@media (max-width: 768px) { .intro-band { padding-top: 5rem; } }
@media (max-width: 479px) { .intro-band { padding-top: 4rem; } }
.about-why { position: relative; overflow: hidden; }
.about-why_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.about-why_overlay { position: absolute; inset: 0; background: rgba(20,18,18,0.82); z-index: 1; }
.about-why > .container-xl { position: relative; z-index: 2; }
.about-why_head { max-width: 52rem; margin: 0 auto var(--space-l); text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); }
.reason-card {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-m); height: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
}
.clearchoice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--space-xxs);
  padding: var(--space-m) var(--space-s);
  height: 100%;
  background: var(--color-card-bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1rem;
}
/* kill the paragraph margin that was inflating the cards vertically */
.clearchoice .paragraph-m, .clearchoice .paragraph-s { margin: 0; }
/* dark sections (e.g. Home) get a translucent card instead of the light-grey one */
.section-dark .clearchoice { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.clearchoice_icon { width: 2.75rem; height: 2.75rem; color: var(--color-primary); margin-bottom: var(--space-xxs); }

/* ============================================================
   7. FOOTER — dark, columns
   ============================================================ */
.site-footer { background: var(--color-dark); padding: var(--space-l) 0 var(--space-m); }
.site-footer_logo { height: 3rem; width: auto; margin-bottom: var(--space-s); }
.site-footer_col { display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer_link {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: var(--text-s);
  transition: color 0.2s ease;
}
.site-footer_link:hover { color: var(--color-primary); }
.site-footer_bottom {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ============================================================
   8. HOME v2 — PREMIUM REDESIGN (2026-07-23)
   New, additive classes only — old `.site-header` / `.hero` / `.cta-band`
   etc. above are left untouched so not-yet-rebuilt pages keep their
   current look until their own build phase (see redesign-v2-plan.md).
   ============================================================ */

/* Matches the framework's generic `[class^="container-"]` wrapper rule (centering,
   edge padding) — only the width differs, so the header reads narrower than main content. */
.container-nav { width: var(--container-nav); }

/* The framework's `.page-wrapper` sets `overflow: hidden` to kill horizontal
   scroll, which also kills `position: sticky` on the header (an overflow-hidden
   ancestor becomes the scroll container). `.allow-sticky` opens it back up.
   `overflow-x: clip` keeps the horizontal-scroll protection without creating a
   scroll container, so sticky still works. `clip` + `visible` is a legal pair;
   `hidden` + `visible` is not (the visible axis would compute to auto). */
.page-wrapper.allow-sticky { overflow-x: clip; overflow-y: visible; }

/* ---- Header v2 (light, flat nav, no dropdown) ----
   Sticky so the nav and the phone number stay reachable the whole way down the
   page. Background must stay opaque or content scrolls through it. The subtle
   bottom border only appears once the page has scrolled (see nav.js), so the
   header still reads flush with the hero at the top of the page. */
.site-header-v2 { position: sticky; top: 0; z-index: 50; background: var(--color-section); padding: var(--space-xs) 0; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.site-header-v2.is-stuck { border-bottom-color: #e8eaec; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.06); }
/* Gaps flex with viewport — the horizontal lockup is ~4x wider than the old
   icon-only mark, so fixed gaps pushed "Service Areas" and "Get a Quote" onto
   two lines between roughly 1100px and 1400px. */
.site-header-v2_wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2.4vw, 2.25rem); }
/* Horizontal lockup (1254x311, ~4:1) — sized by height so the wordmark stays legible. */
.site-header-v2_logo { height: 2.1rem; width: auto; display: block; flex-shrink: 0; }
.nav-v2 { display: flex; align-items: center; gap: clamp(1.15rem, 2.1vw, 2rem); list-style: none; margin: 0; padding: 0; }
/* Header items are single-line labels — never let them wrap mid-label. */
.nav-v2_link, .nav-v2_dropdown-toggle, .header-v2_cta, .header-v2_phone-number { white-space: nowrap; }
.nav-v2_link { color: #33383c; text-decoration: none; font-family: var(--p--font-family); font-weight: 500; font-size: 0.8125rem; transition: color 0.2s ease; }
.nav-v2_link:hover { color: var(--color-primary); }
.header-v2_right { display: flex; align-items: center; gap: clamp(0.9rem, 1.4vw, 1.5rem); }
/* text-decoration must be killed on the <a> itself. Setting it on a descendant
   does not remove an ancestor's underline — it propagates and can't be cancelled
   from below, which is why the number still rendered underlined. */
/* Phone as a filled button, not plain text. Competitor teardown (glassnow.com.au,
   2026-07-31) puts "24/7 CALL US NOW - number" in a high-contrast button at the very
   top of the page; on a phone-driven emergency trade that is the single highest-value
   element. Brand blue so it outranks the dark "Get a Quote" pill beside it. */
.header-v2_phone {
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
  padding: 0.7rem 1.15rem; border-radius: 100vmax;
  background: var(--color-primary); color: #0e2a35;
  text-decoration: none; transition: filter 0.2s ease;
}
.header-v2_phone:hover { filter: brightness(1.07); }
.header-v2_phone-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.header-v2_phone-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.header-v2_phone-number { font-family: var(--h--font-family); font-size: 0.875rem; font-weight: 700; color: #0e2a35; white-space: nowrap; }
.header-v2_cta { padding: 0.75rem 1.35rem; border-radius: 100vmax; background: #16191b; color: var(--color-section); font-family: var(--p--font-family); font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: filter 0.2s ease; }
.header-v2_cta:hover { filter: brightness(1.3); }
/* Services dropdown in the v2 nav (light theme) */
.nav-v2_item--dropdown { position: relative; }
.nav-v2_dropdown-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; font-family: var(--p--font-family); font-size: 0.8125rem; font-weight: 500; color: #33383c; }
.nav-v2_dropdown-toggle:hover { color: var(--color-primary); }
.nav-v2_caret { width: 0; height: 0; border-left: 0.28rem solid transparent; border-right: 0.28rem solid transparent; border-top: 0.32rem solid currentColor; transition: transform 0.2s ease; }
.nav-v2_item--dropdown.is-open .nav-v2_caret { transform: rotate(180deg); }
.nav-v2_dropdown { list-style: none; margin: 0.5rem 0 0; padding: 0.5rem 0; position: absolute; top: 100%; left: 0; min-width: 12rem; background: #fff; border-radius: 0.75rem; box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.12); display: none; flex-direction: column; z-index: 60; }
.nav-v2_dropdown.is-open { display: flex; }
.nav-v2_dropdown-link { display: block; padding: 0.6rem 1rem; color: #33383c; text-decoration: none; font-size: 0.8125rem; font-weight: 500; }
.nav-v2_dropdown-link:hover { color: var(--color-primary); background: #f4f5f6; }
/* Header collapses to the hamburger below 1150px (was 992px). The horizontal
   logo lockup is ~4x wider than the icon-only mark it replaced, so the full
   desktop nav no longer fits between 992px and ~1150px — it overflowed the
   header wrap. Tablet landscape now gets the mobile menu, which is the normal
   pattern at that width. */
@media (min-width: 1150px) {
  .nav-v2_item--dropdown:hover .nav-v2_dropdown,
  .nav-v2_item--dropdown:focus-within .nav-v2_dropdown { display: flex; }
}
@media (max-width: 1149px) {
  .nav-v2_dropdown { position: static; box-shadow: none; background: transparent; min-width: 0; padding: 0.3rem 0 0.3rem 1rem; margin-top: 0; }
}

/* 2.75rem = 44px minimum touch target (front-end-dev ux-standards) — was 32px */
.header-v2_hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: none; border: none; cursor: pointer; padding: 0.5rem; min-width: 2.75rem; min-height: 2.75rem; }
.header-v2_hamburger span { display: block; width: 1.6rem; height: 0.14rem; background: #16191b; border-radius: 0.125rem; }
@media (max-width: 1149px) {
  .nav-v2 {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    background: var(--color-section);
    padding: var(--space-s);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.12);
  }
  .nav-v2.is-open { display: flex; }
  .header-v2_hamburger { display: flex; }
  /* Phone stays visible down to 600px now — it is the general enquiry number,
     not an emergency-only line, so it should survive the nav collapse. */
  .header-v2_phone { display: flex; }
}
@media (max-width: 700px) {
  .header-v2_phone { display: none; }
}
@media (max-width: 600px) {
  .header-v2_cta { display: none; }
}

/* ---- Hero v2 (rounded inset window, not full-bleed) ---- */
.hero-v2 { padding-top: 0.25rem; }
.hero-v2_window { position: relative; width: 100%; min-height: 48rem; border-radius: 1.75rem; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-m); padding: 2.25rem var(--space-xl); }
.hero-v2_h1-line { display: block; }
.hero-v2_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-v2_overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(88deg, rgba(20,20,20,0.84) 0%, rgba(20,20,20,0.5) 55%, rgba(20,20,20,0.1) 100%); }
.hero-v2_rating { align-self: flex-start; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); }
.hero-v2_rating-stars { color: var(--color-star); font-weight: 700; font-size: 0.75rem; }
.hero-v2_rating-text { font-size: 0.75rem; font-weight: 600; color: #16191b; }
.hero-v2_content { display: flex; flex-direction: column; gap: 1.1rem; max-width: 45rem; }
.hero-v2_eyebrow { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.85); }
.hero-v2_content .paragraph-l { color: rgba(255,255,255,0.88); max-width: 34rem; }
.hero-v2_actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.hero-v2_chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip-v2 { padding: 0.45rem 1rem; border-radius: 100vmax; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); font-size: 0.75rem; font-weight: 500; color: #fff; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
/* Only the service-name chips are links (the rest are trust badges and stay spans),
   so the hover state is scoped to anchors. text-decoration:none is on the class
   because an <a> inherits an underline that a descendant cannot cancel. */
a.chip-v2:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.6); }
@media (max-width: 768px) { .hero-v2_window { min-height: 0; padding: var(--space-m); } }

/* ---- Stat band ---- */
.stat-band { padding-top: var(--space-xxs); }
.stat-card { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-s); height: 100%; border-radius: 1.25rem; background: #f4f5f6; }
.stat-card--dark { background: #16191b; }
.stat-card_num { font-family: var(--h--font-family); font-weight: 600; font-size: 2.375rem; line-height: 1.2; color: #16191b; }
.stat-card--dark .stat-card_num { color: var(--color-primary); }
.stat-card_label { font-family: var(--p--font-family); font-size: 0.8125rem; line-height: 1.4; color: #6e757b; }
.stat-card--dark .stat-card_label { color: #b8bdc2; }
/* Clickable stat card. It is an <a>, so kill the inherited underline and give it a
   visible cue plus hover lift, otherwise it is a mystery-meat click target. */
.stat-card--link { text-decoration: none; transition: filter 0.2s ease, transform 0.2s ease; }
.stat-card--link:hover { filter: brightness(1.35); transform: translateY(-2px); }
.stat-card_cue { margin-top: auto; padding-top: 0.5rem; font-family: var(--p--font-family); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); }

/* ---- Services heading + featured cards + ledger ---- */
.services-v2_head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-m); flex-wrap: wrap; }
.services-v2_head-left { display: flex; flex-direction: column; gap: var(--space-xs); }
.pill-eyebrow { align-self: flex-start; padding: 0.45rem 1rem; border-radius: 100vmax; border: 1px solid #d8dbde; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #565d63; }
.services-v2_support { max-width: 24rem; color: #6e757b; }

.featured-card { display: flex; flex-direction: column; border-radius: 1.5rem; background: #f4f5f6; overflow: hidden; height: 100%; }
/* Card image framing — ratio lives on the IMG, not the wrapper.
   `aspect-ratio` is NOT a hard constraint: a child sized by its own intrinsic
   ratio can push the box open, and `height: 100%` on a child of an
   aspect-ratio parent resolves inconsistently. Result was cards in the same row
   rendering at wildly different heights wherever a portrait and a landscape
   photo sat side by side (mirrors: 474px vs 843px). Sizing the img itself with
   width:100% + height:auto + aspect-ratio makes its box fully determined, and
   object-fit crops. Same pattern already proven on .mechanism_photo. This also
   beats the width/height HTML attrs, which are only presentational hints. */
.featured-card_img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.featured-card_img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.featured-card_badge { position: absolute; top: var(--space-xs); left: var(--space-xs); padding: 0.4rem 0.85rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #16191b; }
.featured-card_body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-s) var(--space-m) var(--space-m); flex: 1; }
.featured-card_body .paragraph-s { color: #5a6165; margin: 0; }
.featured-card_link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 0.4rem; }
.featured-card_link-text { font-size: 0.8125rem; font-weight: 600; color: #16191b; }
.circle-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 100vmax; background: var(--color-primary); color: #0e2a35; font-weight: 600; }
.circle-arrow--outline { background: transparent; border: 1.5px solid #16191b; color: #16191b; width: 2.25rem; height: 2.25rem; }

.ledger-row { display: flex; align-items: center; gap: var(--space-s); padding: var(--space-s) 0.5rem; border-bottom: 1px solid #e7e9eb; }
.ledger-row_num { flex-shrink: 0; width: 2.75rem; font-family: var(--h--font-family); font-weight: 600; font-size: 0.9375rem; color: #9aa0a5; }
.ledger-row_title { flex-shrink: 0; width: 17.5rem; font-family: var(--h--font-family); font-weight: 600; font-size: 1.25rem; color: #16191b; }
.ledger-row_desc { flex: 1; font-size: 0.8125rem; color: #6e757b; }
@media (max-width: 768px) {
  .ledger-row { flex-wrap: wrap; row-gap: var(--space-xxxs); }
  .ledger-row_title { width: auto; }
  /* flex-basis must win over the base `flex: 1` (basis 0%) or the desc stays inline */
  .ledger-row_desc { flex: 0 0 100%; order: 3; }
  .ledger-row .circle-arrow { margin-left: auto; }
}

/* ---- Emergency panel (dark, rounded) ---- */
.emergency-panel { padding-top: var(--space-xxl); }
.emergency-panel_inner { display: flex; align-items: center; gap: var(--space-l); border-radius: 1.75rem; background: #16191b; padding: var(--space-l); }
.emergency-panel_content { flex: 1.2; display: flex; flex-direction: column; gap: var(--space-s); }
.pill-eyebrow--dark { border-color: #3a4046; color: var(--color-primary); }
.emergency-panel_content .paragraph-m { color: #b8bdc2; max-width: 30rem; }
.emergency-panel_actions { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.emergency-panel_actions .paragraph-s { color: #8a9096; margin: 0; }
.emergency-panel_media { flex: 1; position: relative; height: 21rem; border-radius: 1.25rem; overflow: hidden; }
.emergency-panel_media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emergency-panel_media-tag { position: absolute; bottom: var(--space-xs); left: var(--space-xs); padding: 0.5rem 1rem; border-radius: 100vmax; background: rgba(22,25,27,0.82); color: #fff; font-size: 0.75rem; font-weight: 600; }
@media (max-width: 900px) { .emergency-panel_inner { flex-direction: column; } .emergency-panel_media { width: 100%; } }

/* ---- Mechanism section (numbered rows + photo) ---- */
.mechanism_row { display: flex; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: 1px solid #e7e9eb; }
.mechanism_row:last-child { border-bottom: none; }
.mechanism_num { flex-shrink: 0; width: 2.25rem; font-family: var(--h--font-family); font-weight: 600; font-size: 0.875rem; color: var(--color-primary); padding-top: 0.2rem; }
.mechanism_row-body { display: flex; flex-direction: column; gap: 0.25rem; }
.mechanism_row-body .paragraph-s { color: #6e757b; margin: 0; }
.mechanism_media { display: flex; flex-direction: column; gap: var(--space-xs); }
/* height:auto is required — the width/height HTML attrs are presentational hints that map
   to CSS width/height; without this the attr height wins over aspect-ratio. Every other
   img class sets an explicit height, so this is the only one that needs it. */
.mechanism_photo { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 1.5rem; display: block; }
.team-strip { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-s); border-radius: 1.25rem; background: #f4f5f6; }
.team-strip_avatars { display: flex; }
.team-strip_avatar { width: 3.25rem; height: 3.25rem; border-radius: 100vmax; border: 2px solid #fff; background: #d3d7da; flex-shrink: 0; }
.team-strip_avatar:not(:first-child) { margin-left: -0.9rem; }
.team-strip_text { display: flex; flex-direction: column; gap: 0.15rem; }
.team-strip_text .paragraph-s { color: #6e757b; margin: 0; }

/* ---- Commercial split ---- */
.commercial-split { padding-top: var(--space-xxl); }
.commercial-split_inner { display: flex; align-items: center; gap: var(--space-m); border-radius: 1.75rem; background: #f4f5f6; padding: var(--space-s); }
.commercial-split_media { flex: 1; position: relative; height: 22.5rem; border-radius: 1.25rem; overflow: hidden; }
.commercial-split_media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.commercial-split_badge { position: absolute; top: var(--space-xs); left: var(--space-xs); padding: 0.4rem 0.85rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #16191b; }
.commercial-split_content { flex: 1.1; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s) var(--space-m) var(--space-s) 0; }
.commercial-split_kicker { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #6e757b; }
.commercial-split_content .paragraph-s { color: #5a6165; max-width: 26rem; }
.commercial-split_actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-pill--dark-sm { padding: 0.8rem 1.6rem; border-radius: 100vmax; background: #16191b; color: #fff; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.btn-pill--outline-sm { padding: 0.8rem 1.6rem; border-radius: 100vmax; border: 1.5px solid #c6cbcf; color: #16191b; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .commercial-split_inner { flex-direction: column; } .commercial-split_media, .commercial-split_content { width: 100%; padding: 0; } }

/* ---- Projects panel (dark) ---- */
.projects-panel { padding-top: var(--space-xxl); }
.projects-panel_inner { border-radius: 1.75rem; background: #16191b; padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-m); }
.projects-panel_head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-s); flex-wrap: wrap; }
.projects-panel_head-left { display: flex; flex-direction: column; gap: var(--space-xs); }
.pill-link--dark { padding: 0.7rem 1.4rem; border-radius: 100vmax; border: 1.5px solid #3a4046; color: #fff; font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.project-card { display: flex; flex-direction: column; border-radius: 1.25rem; background: #22272b; overflow: hidden; height: 100%; }
.project-card_img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden; }
.project-card_img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.project-card_tags { position: absolute; top: var(--space-xs); left: var(--space-xs); display: flex; gap: 0.35rem; }
.project-card_tag { padding: 0.3rem 0.7rem; border-radius: 100vmax; font-size: 0.625rem; letter-spacing: 0.06em; font-weight: 700; background: rgba(255,255,255,0.92); color: #16191b; }
.project-card_tag--suburb { background: rgba(22,25,27,0.75); color: #fff; }
.project-card_body { display: flex; flex-direction: column; gap: 0.3rem; padding: var(--space-s); }
.project-card_body .paragraph-s { color: #8a9096; margin: 0; }

/* ---- Reviews v2 (eyebrow head to match new section rhythm) ---- */
.reviews-v2_head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-s); flex-wrap: wrap; }
.reviews-v2_head-left { display: flex; flex-direction: column; gap: var(--space-xs); }

/* Flat review card — matches Paper (no shadow/border, soft-grey ground) */
.review-card-v2 { display: flex; flex-direction: column; gap: 0.9rem; padding: var(--space-m); height: 100%; background: #f4f5f6; border-radius: 1.25rem; }
.review-card-v2_stars { color: var(--color-star); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.05em; }
.review-card-v2_quote { font-style: normal; margin: 0; flex: 1; color: #33383c; }
.review-card-v2_who { display: flex; align-items: center; gap: 0.6rem; }
.review-card-v2_avatar { width: 2.25rem; height: 2.25rem; border-radius: 100vmax; background: #dde0e3; flex-shrink: 0; }
.review-card-v2_name { font-family: var(--p--font-family); font-weight: 600; font-style: normal; font-size: 0.75rem; color: #16191b; }

/* ---- Service areas ---- */
.service-areas-v2 { padding-top: var(--space-xxl); }
.service-areas-v2_inner { display: flex; align-items: center; gap: var(--space-m); border-radius: 1.75rem; background: #f4f5f6; padding: var(--space-m) var(--space-l); }
.service-areas-v2_content { flex: 1.2; display: flex; flex-direction: column; gap: var(--space-s); }
.service-areas-v2_content .paragraph-s { color: #5a6165; max-width: 28rem; }
.suburb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.suburb-chip { padding: 0.5rem 1.1rem; border-radius: 100vmax; background: #fff; font-size: 0.75rem; font-weight: 500; color: #33383c; text-decoration: none; }
.suburb-chip--all { background: #16191b; color: #fff; font-weight: 600; }
.service-areas-v2_map { flex: 1; height: 20rem; border-radius: 1.25rem; background: #e6e9eb; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-s); }
.service-areas-v2_map span { font-size: 0.75rem; font-weight: 600; color: #9aa0a5; }
@media (max-width: 900px) { .service-areas-v2_inner { flex-direction: column; } }

/* ---- Final CTA v2 (bg image panel + form card) ---- */
.final-cta-v2 { padding: var(--space-xxl) 0; }
.final-cta-v2_inner { position: relative; display: flex; align-items: center; gap: var(--space-l); border-radius: 1.75rem; padding: var(--space-xl) var(--space-l); overflow: hidden; }
.final-cta-v2_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.final-cta-v2_overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(92deg, rgba(18,18,18,0.88) 0%, rgba(18,18,18,0.55) 60%, rgba(18,18,18,0.35) 100%); }
/* space-s left the eyebrow pill floating ~35px clear of the heading, which read as
   two unrelated elements. space-xs groups them as one block. */
.final-cta-v2_content { flex: 1.15; display: flex; flex-direction: column; gap: var(--space-xs); color: #fff; }
.pill-eyebrow--on-dark { border-color: rgba(255,255,255,0.3); color: #fff; }
.final-cta-v2_content .paragraph-m { color: rgba(255,255,255,0.8); }
/* the tel: link in the CTA line was rendering as default browser blue on a dark
   panel. Inherit the panel colour and keep an underline so it still reads as a link. */
.final-cta-v2_content a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }
.final-cta-v2_content a:hover { color: var(--color-primary); }
.final-cta-v2_form { flex: 1; background: var(--color-section); border-radius: 1.25rem; padding: var(--space-m); display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 900px) { .final-cta-v2_inner { flex-direction: column; } }

/* ---- Footer v2 ---- */
.site-footer-v2 { background: #16191b; padding: var(--space-l) 0 var(--space-m); }
.site-footer-v2_logo { height: 2.6rem; width: auto; margin-bottom: var(--space-xs); }
.site-footer-v2_blurb { color: #8a9096; max-width: 20rem; }
.footer-v2_col-head { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #6e757b; margin-bottom: 0.6rem; }
.footer-v2_links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-v2_links a, .footer-v2_links span { color: #b8bdc2; text-decoration: none; font-size: 0.8125rem; }
.footer-v2_links a:hover { color: var(--color-primary); }
.site-footer-v2_bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid #2a2f33; }
.site-footer-v2_bottom span, .site-footer-v2_bottom a { font-size: 0.75rem; color: #6e757b; }
.site-footer-v2_bottom a { text-decoration: none; }
.site-footer-v2_bottom a:hover { color: var(--color-primary); }

/* ---- Compact inline form card (hero callback / inline quote forms on LPs) ---- */
.quote-form--inline { margin: 0; max-width: 27rem; width: 27rem; flex-shrink: 0; box-shadow: none; }
@media (max-width: 900px) { .quote-form--inline { width: 100%; } }

/* ---- Emergency hero (2-col: content + inline callback form) ---- */
/* Applied to LP/Emergency heroes only (not Home, which keeps its own top/middle/bottom
   space-between rhythm) — floats the rating pill so the row can center vertically. */
/* flex-start + the row's auto margins, so the rating pill stays pinned at the top
   instead of being centred with the row. */
.hero-v2_window--center { justify-content: flex-start; }
/* pill joins the flow so it can no longer overlap the eyebrow beneath it */
.hero-v2_window--center .hero-v2_rating--floating { position: static; align-self: flex-start; }
.hero-v2_rating--floating { position: absolute; top: 2.25rem; left: var(--space-xl); z-index: 2; }
.hero-emergency_row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap; width: 100%; }
/* Definitive centering, independent of flex behaviour: absolutely positioned
   at the vertical midpoint of the window's padding box, then pulled back by
   half its own height. An absolutely positioned child's containing block is
   the padding BOX (outer edge, at the border) — not the content box — so
   left/right:0 would sit flush with the card's edge. Restate the window's
   own horizontal padding explicitly to keep the same inset as every other
   element in the hero. */
/* Was position:absolute + translateY(-50%). An absolute child contributes NO height,
   so the window could never grow past `min-height: 48rem` and `overflow: hidden`
   silently clipped whatever did not fit. Measured 2026-07-31 at 1440x900: on SIX of
   the nine --center LPs the eyebrow, the H1 AND the form submit button were cut off
   entirely (emergency clipped 144px top and bottom). `elementFromPoint` at the submit
   button returned null, and the container is overflow:hidden so no user could scroll
   to it. `checkVisibility()` reports true for clipped elements, which is why earlier
   sweeps missed it. The mobile block below fixed the same root cause at <=768px only.
   Back in normal flow, with `margin: auto 0` doing the vertical centring — it absorbs
   spare space when content is short and collapses to 0 when content is tall, so the
   window grows instead of clipping. CLAUDE.md: flex first, absolute last. */
.hero-v2_window--center .hero-emergency_row { position: static; top: auto; left: auto; width: 100%; transform: none; margin: auto 0; }
/* Content and form card are independent now — nudging the text up on its own
   without dragging the form card (which was well-placed at true center). */
.hero-v2_window--center .hero-emergency_content { position: relative; top: 0; }
/* flex 1 1 auto + a sensible min so the copy column YIELDS to the form beside it
   instead of holding its 42rem cap and forcing the form to wrap underneath.
   Widening the inline form 21rem -> 27rem (2026-07-30) pushed content+form+gap to
   1152px against 1109px available at 1440, so every page whose intro copy hit the
   cap dropped the form below the fold. It still wraps below min-width, which is
   correct once there genuinely is not room. */
/* flex-basis 24rem, NOT auto. flex-wrap decides wrapping from each item's
   HYPOTHETICAL main size before any shrinking happens, so `flex: 1 1 auto` still
   measured the copy at its 42rem cap (672px) and wrapped the form underneath.
   A 24rem basis keeps both on one line (384+432+48 = 864 <= 1109 at 1440), then
   flex-grow expands the copy into whatever is left. Still wraps on small screens,
   which is correct. Widening the form 21rem -> 27rem on 2026-07-30 is what pushed
   this over the edge. */
.hero-emergency_content { display: flex; flex-direction: column; gap: 1.1rem; flex: 1 1 24rem; min-width: 0; max-width: 42rem; }
.hero-emergency_content .paragraph-m { color: rgba(255,255,255,0.88); max-width: 36rem; }
.hero-emergency_actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.btn-pill_phone-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ---- Trust card (icon + heading + paragraph, light grey) ---- */
.trust-card-v2 { display: flex; flex-direction: column; gap: 0.9rem; padding: var(--space-s); height: 100%; border-radius: 1.25rem; background: #f4f5f6; }
.icon-tile { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--color-section); }
.icon-tile svg { width: 1.25rem; height: 1.25rem; }
.trust-card-v2_avatars { display: flex; }
.trust-card-v2_avatar { width: 2.75rem; height: 2.75rem; border-radius: 100vmax; background: #d3d7da; border: 2px solid #f4f5f6; flex-shrink: 0; }
.trust-card-v2_avatar:not(:first-child) { margin-left: -0.65rem; }
.trust-card-v2 .paragraph-s { color: #5a6165; margin: 0; }

/* ---- Team strip (photo placeholder + dark testimonial) ---- */
.team-strip-row { display: flex; gap: var(--space-s); align-items: stretch; }
.team-photo-placeholder { flex: 1; min-height: 12.5rem; border-radius: 1.25rem; background: #e9ebec; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-s); }
.team-photo-placeholder span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: #9aa0a5; }
.testimonial-dark-card { width: 21rem; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: var(--space-s); border-radius: 1.25rem; background: #16191b; }
.testimonial-dark-card_stars { color: var(--color-star); font-weight: 700; font-size: 0.8125rem; }
.testimonial-dark-card_quote { font-family: var(--accent--font-family); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: #fff; }
.testimonial-dark-card_by { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.65); }
@media (max-width: 900px) { .team-strip-row { flex-direction: column; } .testimonial-dark-card { width: 100%; } }

/* ---- Process tile (numbered step, light grey) ---- */
.process-tile { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-s); height: 100%; border-radius: 1.25rem; background: #f4f5f6; }
.process-tile_num { font-family: var(--h--font-family); font-weight: 600; font-size: 2.1rem; color: var(--color-primary); }
.process-tile_title { font-family: var(--h--font-family); font-weight: 600; font-size: 1.1rem; color: #16191b; }
.process-tile .paragraph-s { color: #5a6165; margin: 0; }

/* ---- Comparison cards (dark "us" vs outlined "cheap call-out") ---- */
.comparison-card { display: flex; flex-direction: column; gap: 1rem; padding: var(--space-m); height: 100%; border-radius: 1.5rem; }
.comparison-card--dark { background: #16191b; }
.comparison-card--outline { border: 1px solid #e3e5e7; }
.comparison-card_head { display: flex; align-items: center; gap: 0.6rem; }
.comparison-card_icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 100vmax; }
.comparison-card_icon--check { background: var(--color-primary); }
.comparison-card_icon--x { border: 1.5px solid #c6cbce; }
.comparison-card_head-title { font-family: var(--h--font-family); font-weight: 600; font-size: 1.1875rem; }
.comparison-card--dark .comparison-card_head-title { color: var(--color-section); }
.comparison-card--outline .comparison-card_head-title { color: #8a9096; }
.comparison-card_list { display: flex; flex-direction: column; }
.comparison-card_list li { list-style: none; padding-bottom: 0.8rem; margin-bottom: 0.8rem; border-bottom: 1px solid; font-size: 0.875rem; line-height: 1.4; }
.comparison-card_list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.comparison-card--dark .comparison-card_list li { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.12); }
.comparison-card--outline .comparison-card_list li { color: #8a9096; border-color: #eef0f1; }

/* ---- FAQ v2 (two-column: intro left, accordion right; reuses .faq_item/.faq_trigger/.faq_body behavior from faq.js) ---- */
.faq-v2 { display: flex; gap: var(--space-l); }
.faq-v2_intro { width: 23rem; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
/* The 21-23rem sidebar is too narrow for heading-xl at this weight — service
   names like "Shower screens," were wrapping word-by-word. Sized down one
   step so short 2-word phrases sit on one line; genuinely long headings still
   wrap normally instead of overflowing. */
.faq-v2_intro .heading-xl { font-size: var(--heading-l); line-height: 1.15; }
.faq-v2_intro .paragraph-s { color: #6e757b; }
.faq-v2_list { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.faq-v2_list .faq_trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: 1.35rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; }
.faq-v2_q { font-family: var(--h--font-family); font-weight: 600; font-size: 1.0625rem; color: #16191b; }
.faq-v2_list .faq_icon { flex-shrink: 0; width: 1.35rem; height: 1.35rem; position: relative; }
.faq-v2_list .faq_icon::before, .faq-v2_list .faq_icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: #9aa0a5; border-radius: 0.125rem; transition: transform 0.3s ease; }
.faq-v2_list .faq_icon::before { width: 100%; height: 0.13rem; transform: translate(-50%, -50%); }
.faq-v2_list .faq_icon::after { width: 0.13rem; height: 100%; transform: translate(-50%, -50%); }
.faq-v2_list .faq_item--open .faq_icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-v2_list .faq_body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-v2_list .faq_item--open .faq_body { max-height: 20rem; }
.faq-v2_list .faq_body p { padding: 0 1.5rem 1.35rem; margin: 0; color: #6e757b; }
@media (max-width: 900px) { .faq-v2 { flex-direction: column; } .faq-v2_intro { width: 100%; } }

/* ---- Service LP master template (Pool Fencing / Glass Balustrades / …) ---- */

/* Compliance band (dark, rounded — badges + copy) */
.compliance-band_inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); border-radius: 1.5rem; background: #16191b; padding: var(--space-m) var(--space-l); flex-wrap: wrap; }
.compliance-band_content { display: flex; flex-direction: column; gap: 0.5rem; max-width: 48rem; }
.compliance-band_kicker { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--color-primary); }
.compliance-band_content .paragraph-s { color: rgba(255,255,255,0.72); margin: 0; }
.compliance-band_badges { display: flex; gap: 0.6rem; flex-shrink: 0; }
.compliance-badge { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: 0.9rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); text-align: center; font-size: 0.6875rem; font-weight: 700; color: rgba(255,255,255,0.8); padding: 0.3rem; }

/* Agitator (heading + 3 columns, coloured top rule) */
.agitator_columns { display: flex; gap: var(--space-m); flex-wrap: wrap; }
.agitator_col { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1rem; border-top: 3px solid var(--color-primary); }
.agitator_col .paragraph-s { color: #5a6165; margin: 0; }

/* Project cards — light variant (Pool Fencing / service LPs; Home uses the dark .project-card) */
.project-card-v2 { display: flex; flex-direction: column; border-radius: 1.25rem; background: #f4f5f6; overflow: hidden; height: 100%; }
.project-card-v2_img-wrap { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.project-card-v2_img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.project-card-v2_body { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-s); }
.project-card-v2_tags { display: flex; gap: 0.4rem; }
.project-card-v2_tag { padding: 0.25rem 0.65rem; border-radius: 100vmax; border: 1px solid #d8dbde; font-size: 0.625rem; letter-spacing: 0.05em; font-weight: 600; color: #565d63; }
.project-card-v2_body .paragraph-s { color: #6e757b; margin: 0; }

/* Related mesh (internal-linking row — per seo skill's pillar-cluster model) */
.related-mesh { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding-top: var(--space-s); }
.related-mesh_label { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #9aa0a5; }
.related-mesh_link { padding: 0.45rem 1rem; border-radius: 100vmax; border: 1px solid #d8dbde; font-size: 0.75rem; font-weight: 500; color: #565d63; text-decoration: none; }
.related-mesh_link:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---- Commercial hub (services split: featured dark card + row-tile list) ---- */
.commercial-featured { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; background: #16191b; height: 100%; }
.commercial-featured_img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.commercial-featured_img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.commercial-featured_badge { position: absolute; top: var(--space-xs); left: var(--space-xs); padding: 0.4rem 0.85rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); font-size: 0.6875rem; font-weight: 600; color: #16191b; }
.commercial-featured_body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--space-s) var(--space-m) var(--space-m); flex: 1; }
.commercial-featured_body .paragraph-s { color: rgba(255,255,255,0.72); margin: 0; }
.commercial-featured_link { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; color: var(--color-primary); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }

.commercial-tile-list { display: flex; flex-direction: column; gap: 0.85rem; height: 100%; }
.commercial-row-tile { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--space-s) var(--space-m); border-radius: 1rem; background: #f4f5f6; text-decoration: none; }
.commercial-row-tile_title { font-family: var(--h--font-family); font-weight: 600; font-size: 1rem; color: #16191b; }

/* Business-emergency band — blue bg, dark text (contrast gate) */
.compliance-band_inner--blue { background: var(--color-primary); }
.compliance-band_inner--blue .compliance-band_kicker { color: #0e2a35; }
.compliance-band_inner--blue .compliance-band_content h3 { color: #0e2a35; }
.compliance-band_inner--blue .compliance-band_content .paragraph-s { color: rgba(14,42,53,0.75); }
.compliance-band_cta { flex-shrink: 0; padding: 1rem 2rem; border-radius: 100vmax; background: #0e2a35; color: #fff; font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }

/* Visually-hidden but still announced to screen readers — keeps real <label>
   elements (accessibility) while letting the field itself carry the question
   as its placeholder, so Step 2 reads as one compact line per field. */
.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; }

/* ---- Contact page: dynamic 3-step quote wizard ---- */
.quote-wizard { border-radius: 1.75rem; background: #f4f5f6; padding: var(--space-m); display: flex; flex-direction: column; gap: 1.1rem; }
.quote-wizard_step-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.quote-wizard_step-badge { padding: 0.35rem 0.75rem; border-radius: 100vmax; background: #fff; border: 1px solid #d8dbde; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: #565d63; flex-shrink: 0; }
.quote-wizard_step-badge--active { background: var(--color-primary); border-color: transparent; color: #0e2a35; }
.quote-wizard_step-hint { font-size: 0.75rem; color: #9aa0a5; }
.quote-wizard_chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.service-chip { padding: 0.7rem 1.25rem; border-radius: 100vmax; background: #fff; border: 1px solid #d8dbde; font-family: var(--p--font-family); font-size: 0.8125rem; font-weight: 500; color: #33383c; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.service-chip:hover { border-color: var(--color-primary); }
.service-chip--active { background: #16191b; border-color: #16191b; color: #fff; }
.service-chip--emergency { background: var(--color-primary); border-color: transparent; color: #0e2a35; font-weight: 700; }
.service-chip--emergency.service-chip--active { background: #0e2a35; color: #fff; }
.quote-wizard_divider { height: 1px; background: #e3e5e7; border: none; margin: 0; }
.quote-wizard_upload { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.1rem; border-radius: 0.9rem; border: 1.5px dashed #c9ced1; }
.quote-wizard_upload-icon { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 0.65rem; background: #fff; flex-shrink: 0; }
.quote-wizard_upload input[type="file"] { font-size: 0.8125rem; color: #6e757b; max-width: 100%; }
.quote-wizard_footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); flex-wrap: wrap; }
.quote-wizard_footer-note { font-size: 0.75rem; color: #9aa0a5; margin: 0; }
.quote-wizard_emergency-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; padding: var(--space-m); border-radius: 1.25rem; background: #16191b; }
.quote-wizard_emergency-panel p { color: rgba(255,255,255,0.85); margin: 0; }

/* ---- Contact hero (two-path: call vs form) ---- */
.contact-path-card { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-m); border-radius: 1.25rem; }
.contact-path-card--dark { background: #16191b; }
.contact-path-card--light { background: #f4f5f6; }
.contact-path-card_kicker { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.contact-path-card--dark .contact-path-card_kicker { color: var(--color-primary); }
.contact-path-card--light .contact-path-card_kicker { color: #565d63; }
.contact-path-card_phone { font-family: var(--h--font-family); font-weight: 600; font-size: 1.875rem; color: #fff; text-decoration: none; }
.contact-path-card--dark .paragraph-s { color: rgba(255,255,255,0.65); margin: 0; }
.contact-path-card--light .paragraph-s { color: #6e757b; margin: 0; }

/* ---- Details + map ---- */
.contact-details-v2 { display: flex; flex-direction: column; }
.contact-details-v2_row { display: flex; justify-content: space-between; gap: var(--space-s); padding: 0.875rem 0.25rem; border-bottom: 1px solid #e7e9eb; }
.contact-details-v2_row-label { font-size: 0.8125rem; font-weight: 600; color: #8a9096; }
.contact-details-v2_row-value { font-size: 0.84375rem; font-weight: 600; color: #16191b; text-align: right; }
.contact-team-strip { display: flex; align-items: center; gap: 0.85rem; padding-top: var(--space-s); }
.contact-team-strip_avatars { display: flex; }
.contact-team-strip_avatar { width: 3.25rem; height: 3.25rem; border-radius: 100vmax; border: 2px solid #fff; background: #d3d7da; flex-shrink: 0; }
.contact-team-strip_avatar:not(:first-child) { margin-left: -0.75rem; }
.contact-map-panel { flex: 1; min-height: 28rem; border-radius: 1.75rem; background: #e9ebec; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; position: relative; }
.contact-map-panel_label { font-size: 0.75rem; letter-spacing: 0.03em; font-weight: 600; color: #9aa0a5; }
.contact-map-panel_pin { position: absolute; bottom: var(--space-s); left: var(--space-s); padding: 0.45rem 0.9rem; border-radius: 100vmax; background: rgba(255,255,255,0.94); font-size: 0.75rem; font-weight: 600; color: #16191b; }

/* ---- Case study template ---- */
.case-hero_img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 7; border-radius: 1.75rem; overflow: hidden;  }
.case-hero_img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.case-hero_tag { position: absolute; bottom: var(--space-s); left: var(--space-s); padding: 0.5rem 1rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); font-size: 0.75rem; font-weight: 600; color: #16191b; }
.snapshot-band { display: flex; gap: var(--space-s); padding: var(--space-s) var(--space-m); border-radius: 1.25rem; background: #f4f5f6; flex-wrap: wrap; }
.snapshot-item { flex: 1; min-width: 9rem; display: flex; flex-direction: column; gap: 0.25rem; }
.snapshot-item_label { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #9aa0a5; }
.snapshot-item_value { font-family: var(--h--font-family); font-weight: 600; font-size: 0.9375rem; color: #16191b; }
/* Parent was an inline style: flex-wrap with flex:1 (basis 0%) children, so they shrank
   instead of wrapping — the img wrap collapsed to 70px on mobile. Grid instead: equal
   tracks that wrap cleanly, so a wrapped last item can't stretch to full width. */
.photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-s); }
.photo-row_placeholder { display: flex; align-items: center; justify-content: center; height: 15rem; border-radius: 1.25rem; background: #e9ebec; font-size: 0.6875rem; letter-spacing: 0.05em; font-weight: 600; color: #9aa0a5; text-align: center; padding: var(--space-s); }
.photo-row_img-wrap { position: relative; height: 15rem; border-radius: 1.25rem; overflow: hidden; }
.photo-row_img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-row_tag { position: absolute; bottom: var(--space-xs); left: var(--space-xs); padding: 0.35rem 0.85rem; border-radius: 100vmax; background: rgba(255,255,255,0.92); font-size: 0.625rem; letter-spacing: 0.05em; font-weight: 600; color: #16191b; }
.pull-quote-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: var(--space-l) var(--space-m); border-radius: 1.75rem; background: #16191b; }
.pull-quote-panel_stars { color: var(--color-star); font-weight: 700; font-size: 0.8125rem; }
.pull-quote-panel_quote { font-family: var(--accent--font-family); font-style: italic; font-size: 1.5rem; line-height: 1.5; color: #fff; max-width: 44rem; margin: 0; }
.pull-quote-panel_by { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.65); }

/* ---- Section rhythm helper ---- */
/* container-xl already provides the edge gutter — this only sets vertical rhythm. */
.section-v2 { padding-top: var(--space-xxl); }

/* ---- 404 page ---- */
.notfound { max-width: 56rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-l) 0; }
.notfound .paragraph-l { max-width: 44rem; }
.notfound_actions { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin-top: var(--space-s); }
.notfound_links { margin-top: var(--space-l); display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.notfound_links ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); justify-content: center; list-style: none; padding: 0; margin: 0; }
.notfound_links a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.notfound_links a:hover { text-decoration: underline; }

/* ==========================================================================
   MOBILE HORIZONTAL PADDING — panels + nested cards
   --------------------------------------------------------------------------
   Panels carry desktop-scale inset (var(--space-l) ≈ 49px/side at 390px).
   Stacked with the container gutter and each panel's own nested card, that ate
   ~65% of a 390px viewport (final-cta form had 202px of usable width, and the
   submit label clipped). Per CLAUDE.md → "No Double-Padding on Mobile":
   horizontal padding shrinks on mobile; vertical rhythm is left untouched.
   ========================================================================== */
@media (max-width: 600px) {
  /* Panel wrappers — 49px → ~27px per side */
  .projects-panel_inner,
  .emergency-panel_inner  { padding: var(--space-l) var(--space-s); }
  .final-cta-v2_inner     { padding: var(--space-xl) var(--space-s); }
  .service-areas-v2_inner { padding: var(--space-m) var(--space-s); }
  .hero-v2_window         { padding: 2.25rem var(--space-s); }

  /* Cards nested inside those panels — second reduction, vertical preserved */
  .final-cta-v2_form      { padding: var(--space-m) var(--space-xs); }
  .project-card_body      { padding: var(--space-s) var(--space-xs); }
  .featured-card_body     { padding: var(--space-s) var(--space-xs) var(--space-m); }
  .review-card-v2         { padding: var(--space-m) var(--space-xs); }
  .service-areas-v2_map   { padding: var(--space-s) var(--space-xs); }
  .commercial-split_inner { padding: var(--space-s) var(--space-xs); }
  .stat-card              { padding: var(--space-s) var(--space-xs); }
  .team-strip             { padding: var(--space-s) var(--space-xs); }

  /* Long labels were clipping inside narrowed cards — wrap instead of overflow */
  .btn-pill { padding: 0.9rem 1.4rem; white-space: normal; }
}

/* ==========================================================================
   MOBILE — SERVICE-LP HERO COLLAPSE  (.hero-v2_window--center, 9 pages)
   --------------------------------------------------------------------------
   `.hero-v2_window--center .hero-emergency_row` is position:absolute with
   top:50%/translateY(-50%), so it contributes NO height to the window. On
   desktop `min-height: 48rem` hid that; the ≤768px rule sets `min-height: 0`,
   so the window collapsed to 72px of padding and `overflow: hidden` clipped
   the H1, body copy, chips AND the quote form — the entire hero was invisible
   on mobile across all 9 service LPs.

   Fix: put the row back in normal flow so content drives height (CLAUDE.md →
   "Layout Decision Order — flex first, absolute last"). Desktop is untouched.
   ========================================================================== */
@media (max-width: 768px) {
  .hero-v2_window--center { justify-content: flex-start; }

  /* out of absolute, back into the window's flex column */
  .hero-v2_window--center .hero-emergency_row {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-v2_window--center .hero-emergency_content { top: 0; }

  /* badge joins the flow above the content instead of overlapping it */
  .hero-v2_window--center .hero-v2_rating--floating {
    position: static;
    align-self: flex-start;
  }

  /* form spans the hero rather than sitting in a 21rem desktop column */
  .hero-v2_window--center .quote-form--inline { width: 100%; max-width: none; }
}

/* ==========================================================================
   MOBILE — FOOTER TAP TARGETS
   --------------------------------------------------------------------------
   Footer links are unpadded text in a stacked list, so the tap zone was the
   text height only — 20px against the 44px minimum in front-end-dev's
   ux-standards. 128 instances site-wide (footer is on every page). Padding
   replaces the flex gap so the zones sit flush and nothing is dead space.
   Text size and desktop layout are unchanged.
   ========================================================================== */
@media (max-width: 600px) {
  .footer-v2_links { gap: 0; }
  /* spans (hours, area) are padded too — with gap:0 they'd otherwise sit
     flush against the padded links and break the vertical rhythm */
  .footer-v2_links a,
  .footer-v2_links span { display: block; padding: 0.8rem 0; }
}

/* ==========================================================================
   PLACEHOLDER SUPPRESSION — 2026-07-30 (Adrian)
   --------------------------------------------------------------------------
   The v2 build shipped grey "asset to come" boxes: map panels, blank team
   avatars and a team-photo box. They read as broken rather than as design, so
   they're hidden until the real assets land (team shoot + embedded map).

   TO REVERSE: delete this whole block. That restores every placeholder. Then
   swap each one for the real asset:
     · .service-areas-v2_map / .contact-map-panel → embedded map
     · .team-strip / .contact-team-strip / .trust-card-v2_avatars → real headshots
     · .team-photo-placeholder → crew + branded ute photo
     · .review-card-v2_avatar → reviewer photos (or leave hidden — names alone
       read fine, and Google review avatars aren't ours to publish)
   The markup is untouched, so nothing needs rebuilding — only unhiding.
   ========================================================================== */

/* Map panels — home + /service-areas/ (flex sibling, content reflows to full width) */
.service-areas-v2_map { display: none; }

/* Map panels — /contact/ + /service-areas/nerang/. The panel sits in its own
   .col-1-of-2, so the COLUMN is hidden via a marker class on the wrapper —
   hiding only the panel would leave an empty half-width column. The details
   column deliberately stays at 50%: its rows are label-left/value-right, so
   stretching them full-width throws the values to the far edge. */
.placeholder-col-hidden { display: none; }

/* Blank team avatars + their captions */
.team-strip,
.contact-team-strip,
.trust-card-v2_avatars { display: none; }

/* Emergency page team photo box — the testimonial beside it is a fixed 21rem
   and won't reflow on its own, so it goes full width once the box is gone. */
.team-photo-placeholder { display: none; }
.team-strip-row .testimonial-dark-card { width: 100%; }

/* Blank reviewer circles — the name alone reads as intentional */
.review-card-v2_avatar { display: none; }

/* ==========================================================================
   MOBILE ACTION BAR
   --------------------------------------------------------------------------
   Measured 2026-07-30: on a 390px viewport the service LPs had ZERO tappable
   CTAs above the fold — no form field, no tel link, no button. The hero copy
   fills the first screen and the inline quote form starts below it, and the
   header phone is hidden under 700px. The old Duda page it replaces DOES have
   a "Get Quote" button above the fold, so shipping without this would have been
   a straight downgrade on the device most emergency-glass traffic arrives on.

   Fixed rather than in-flow so it's present at every scroll position, which
   also covers the "above the fold" case on every page at once.
   ========================================================================== */
.mobile-action-bar { display: none; }

@media (max-width: 700px) {
  .mobile-action-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70; /* above the sticky header (50) and its dropdown (60) */
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    /* keeps the buttons clear of the iOS home indicator */
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e8eaec;
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.07);
  }
  .mobile-action-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem; /* 48px — clears the 44px touch-target minimum */
    border-radius: 100vmax;
    font-family: var(--p--font-family);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
  }
  .mobile-action-bar_call  { background: #16191b; color: #fff; }
  .mobile-action-bar_quote { background: var(--color-primary); color: #16191b; }

  /* The bar is fixed, so it would otherwise sit on top of the last footer row. */
  .site-footer-v2 { padding-bottom: calc(var(--space-m) + 4.5rem); }
}

/* Privacy / legal pages — readable measure, spaced headings. */
.legal-copy h2 { margin-top: var(--space-m); }
.legal-copy p { margin-top: 0.75rem; }
.legal-list { margin: 0.75rem 0 0 1.1rem; }
.legal-list li { margin-bottom: 0.5rem; }