/* ==========================================================================
   VeltHaven — Reusable components
   Loads after base.css. Implements the locked Visual Design System (02_design/).
   Mobile-first. Floors enforced in base.css: 16px / 4.5:1 / 48px touch.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  background: var(--anthracite-deep);
  color: #fff;
  padding-block: var(--sp-6);
  overflow: clip;
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-7); } }
.hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 18ch; }
.hero h1.display { font-size: var(--fs-display); }
.hero p { color: var(--ink-on-dark-2); font-size: var(--fs-lg); max-width: 54ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__media {
  position: relative;
  margin-top: var(--sp-5);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: end start;
  color: var(--ink-on-dark-2);
  padding: var(--sp-3);
  box-shadow: var(--shadow-md);
}

/* ---- Image placeholder stand-ins (replaced at Phase 3.7 by real renders) ---- */
.ph {
  position: relative;
  border-radius: var(--radius);
  display: grid;
  place-items: end start;
  color: rgba(255,255,255,.85);
  padding: var(--sp-2);
  min-height: 160px;
  font-size: var(--fs-sm);
  overflow: clip;
  background:
    radial-gradient(120% 90% at 78% 88%, rgba(201,168,106,.40) 0%, rgba(201,168,106,0) 42%),
    linear-gradient(180deg, #46505C 0%, #333A42 46%, #23272C 100%);
}
.ph--garden {
  background:
    radial-gradient(110% 80% at 72% 92%, rgba(201,168,106,.35) 0%, rgba(201,168,106,0) 40%),
    linear-gradient(180deg, #5A6471 0%, #3C444D 55%, #2A3035 100%);
}
.ph--interior {
  background:
    radial-gradient(130% 110% at 50% 100%, rgba(201,168,106,.55) 0%, rgba(160,120,70,.18) 45%, rgba(201,168,106,0) 70%),
    linear-gradient(180deg, #3A3F45 0%, #2B2F33 60%, #1F2326 100%);
}
.ph--detail {
  background: linear-gradient(135deg, #4A4138 0%, #6B5A45 45%, #3A332B 100%);
}
.ph--light {
  background: linear-gradient(180deg, #B9C0C6 0%, #8F979E 60%, #6E767D 100%);
  color: rgba(255,255,255,.95);
}
.ph[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.ph[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.ph[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.ph__caption {
  position: relative;
  z-index: 1;
  font-weight: 500;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* "Visualisation" chip — sits top-left on every image placeholder */
.viz-label {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(31,35,38,.62);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .25rem .7rem;
}
.viz-label::before { content: "◐"; color: var(--accent-on-dark); }

/* ---- Cards ---- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out);
}
.card h3 { margin-bottom: var(--sp-1); }
.card > .ph,
.opt > .ph {
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2);
  border-radius: var(--radius) var(--radius) 0 0;
  min-height: 140px;
}
/* §15 — a card/option image must never collapse to a thin letterboxed strip.
   When a .ph has no explicit data-ratio, give it a generous 4:3 so the
   building/product reads clearly at every breakpoint. Scoped with :not() so
   it never overrides an explicitly declared ratio (e.g. 16x9 upgrade cards). */
.card > .ph:not([data-ratio]),
.opt > .ph:not([data-ratio]) {
  aspect-ratio: 4 / 3;
}
/* §12b/§14 — per-model card gallery: a lead image + a thumbnail strip,
   click-to-open carousel (grouped by the data-gallery key on .model-gallery). */
.card > .model-gallery {
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2);
}
.model-gallery > .ph {
  border-radius: var(--radius) var(--radius) 0 0;
}
.model-thumbs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--line);
}
.model-thumbs > .ph {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
}
.model-gallery .ph img { cursor: zoom-in; }
.gallery-badge {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  z-index: 1;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  background: rgba(20, 22, 24, .72);
  padding: .25rem .65rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.gallery-badge::before { content: "▦"; margin-right: .35rem; opacity: .85; }
.card .price {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--anthracite);
  margin-bottom: var(--sp-2);
}
.card .price small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.card .btn { margin-top: auto; }

/* Featured / recommended card — exactly ONE per page (§2 one-★ rule) */
.card--featured {
  border: 2px solid var(--anthracite);
  box-shadow: var(--shadow-md);
  position: relative;
}
a.card, .card--hover:hover { text-decoration: none; }
.card--hover { cursor: pointer; }
@media (hover: hover) {
  .card--hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.path-card { overflow: clip; }
.path-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.path-card__body .btn { margin-top: var(--sp-2); }

/* ---- Badges / chips ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
}
.badge--recommended {
  background: var(--accent-50);
  color: var(--accent-600);
  border: 1px solid var(--accent-400);
}
.badge--star::before { content: "★"; color: var(--star); }
.card--featured > .badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  background: var(--accent-50);
}
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: .15rem .3rem .15rem 0;
  background: var(--bg-2);
  color: var(--ink-2);
}

/* ---- Trust strip ---- */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: center;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.trust__item::before {
  content: "●";
  color: var(--accent-600);
  font-size: .55em;
}
.section--dark .trust__item { color: var(--ink-on-dark-2); }
.section--dark .trust__item::before { color: var(--accent-on-dark); }

/* Left-aligned vertical bullet list — used inside "Who does what" cards */
.trust--list {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--sp-2);
}
.trust--list .trust__item {
  font-weight: 500;
}

/* 2×2 responsive grid for longer trust items (4 items that would otherwise orphan 3+1) */
.trust--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
  gap: var(--sp-2) var(--sp-5);
}
@media (max-width: 640px) {
  .trust--grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Trust card grid (About page) ---- */
.trust-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }

/* 4-item variant: 1→2×2→4 across viewports (how-it-works guarantees section) */
@media (min-width: 560px)  { .trust-grid--2col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust-grid--2col { grid-template-columns: repeat(4, 1fr); } }

.trust-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(43,47,51,.10);
}
.trust-card__icon {
  color: var(--accent-600);
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-bottom: .25rem;
}
.trust-card strong {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.trust-card p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.65;
}

/* ---- Ticklist ---- */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .7rem;
}
.ticklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-600);
  font-weight: 800;
}

/* ---- Steps strip ---- */
.steps-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  counter-reset: step;
}
@media (min-width: 768px) {
  .steps-strip { grid-template-columns: repeat(4, 1fr); }
}
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  counter-increment: step;
}
.step-card::before {
  content: counter(step);
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--anthracite);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.step-card h3 { font-size: var(--fs-lg); }
.step-card p  { font-size: var(--fs-base); color: var(--ink-2); margin: 0; }

/* ---- Journey steps (vertical numbered list) ---- */
.journey { display: flex; flex-direction: column; gap: var(--sp-4); }
.journey__step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.journey__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--anthracite);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.journey__body h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.journey__body p  { margin: 0 0 var(--sp-1); }
.journey__body p:last-child { margin-bottom: 0; }

/* ---- Use-case / lifestyle trio ---- */
.usecase {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .usecase { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .usecase--rev > :first-child { order: 2; }
}

/* ---- Design gallery ---- */
.gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .ph { min-height: 200px; }

/* ---- Installations gallery ---- */
.install-gallery {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .install-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .install-gallery { grid-template-columns: repeat(3, 1fr); } }
/* Two-column variant — for sections where exactly 2 images are shown */
@media (min-width: 600px)  { .install-gallery--two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .install-gallery--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } }
.install-tile { margin: 0; }
.install-tile .ph { min-height: 200px; }
.install-tile figcaption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--sp-1);
}

/* ---- Hero redesign: fill the empty right side ---- */
/* When the hero has a media block, split into two columns on desktop so the
   image sits beside the copy instead of leaving the right half empty. */
@media (min-width: 980px) {
  .hero:has(.hero__media) > .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: var(--sp-5);
    align-content: center;
  }
  .hero:has(.hero__media) > .container > :not(.hero__media) { grid-column: 1; }
  .hero:has(.hero__media) h1,
  .hero:has(.hero__media) p { max-width: 40ch; }
  .hero:has(.hero__media) .hero__media {
    grid-column: 2;
    grid-row: 1 / 50;        /* span every text row so the image fills the right column */
    align-self: center;
    margin-top: 0;
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
  }
  /* Heroes with no image: a large, faint brand monogram fills the right side. */
  .hero:not(:has(.hero__media)) { position: relative; }
  .hero:not(:has(.hero__media)) > .container { position: relative; z-index: 1; }
  .hero:not(:has(.hero__media))::after {
    content: "V";
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(14rem, 26vw, 24rem);
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    user-select: none;
  }
}

/* ---- Make recommendation badge reliably centred on any featured card/option ---- */
.opt { position: relative; }
.card--featured > .badge,
.opt.card--featured > .badge,
.opt > .badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  background: var(--accent-50);
}

/* ---- Lightbox (click to expand gallery images) ---- */
.install-gallery .ph img,
.gallery .ph img { cursor: zoom-in; }
.vh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(20, 22, 24, .92);
}
.vh-lightbox[hidden] { display: none; }
.vh-lightbox__fig {
  margin: 0;
  max-width: min(1100px, 94vw);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.vh-lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.vh-lightbox__cap { color: #fff; font-size: var(--fs-sm); text-align: center; }
.vh-lightbox__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.vh-lightbox__close:hover { background: rgba(255, 255, 255, .24); }
/* Carousel controls (§12a) */
.vh-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vh-lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.vh-lightbox__nav[hidden] { display: none; }
.vh-lightbox__nav--prev { left: var(--sp-2); }
.vh-lightbox__nav--next { right: var(--sp-2); }
.vh-lightbox__counter {
  position: absolute;
  bottom: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: rgba(20, 22, 24, .6);
  padding: .2rem .7rem;
  border-radius: 999px;
}
.vh-lightbox__img { opacity: 0; transition: opacity .2s ease; }
.vh-lightbox__img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vh-lightbox__img { transition: none; opacity: 1; }
}

/* ---- Configurator colour swatches ----
   The colour dot + ring is the visual control, so the native radio is
   visually hidden (but kept focusable). Padding is scoped under .swatch-grid
   so it wins over the generic .opt card padding defined later in this file. */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--sp-1);
  max-width: 780px;
}
.swatch-grid .opt--swatch {
  align-items: center;
  text-align: center;
  gap: .25rem;
  padding: var(--sp-1);
  min-height: 44px;            /* keep the tap target — shrink the visual, not the hit area */
}
.opt--swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.opt--swatch .swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  margin: 0 auto;
}
.opt--swatch input:checked ~ .swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--anthracite);
}
/* The input is visually hidden, so surface keyboard focus on the whole tile. */
.opt--swatch:focus-within {
  border-color: var(--anthracite);
  box-shadow: 0 0 0 3px var(--accent-600);
}
.swatch-name { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; }

/* ---- Before / after ---- */
.beforeafter {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .beforeafter { grid-template-columns: 1fr 1fr; } }
.beforeafter .ph { min-height: 220px; }
.beforeafter figcaption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: .5rem;
  font-weight: 600;
}

/* ---- ROI grid ---- */
.roi-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .roi-grid { grid-template-columns: repeat(3, 1fr); } }
.roi-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  border-top: 3px solid var(--accent-400);
}
.roi-card .stat {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--anthracite);
  margin-bottom: var(--sp-1);
}

/* ---- Honesty framework (empty portfolio/reviews — DMCC Act 2024 compliance) ---- */
.framework {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  color: var(--ink-2);
}
.framework strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-lg);
  margin-bottom: .5rem;
  font-family: var(--font-head);
}
.framework__note { max-width: 48ch; margin-inline: auto; }

/* ---- Founder section ---- */
.founder {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
}
@media (min-width: 768px) {
  .founder { grid-template-columns: auto 1fr; gap: var(--sp-5); }
}
.founder .ph {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  place-items: center;
  text-align: center;
}
.founder__photo {
  width: 280px;
  height: 224px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
}

/* ---- Capture / guide-funnel form block ---- */
.capture {
  background: #fff;
  border: 2px solid var(--anthracite);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .capture { grid-template-columns: 1.2fr .8fr; align-items: center; }
}
.capture h2 { font-size: var(--fs-h3); }
.capture input[type="email"] {
  width: 100%;
  min-height: var(--tap-comfort);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  padding: .6rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
  background: #fff;
  color: var(--ink);
}
.capture input[type="email"]:focus { border-color: var(--anthracite); outline: none; }
.capture input[type="email"]::placeholder { color: var(--ink-2); }

/* Form feedback message */
.vh-form-success {
  font-weight: 600;
  color: var(--success);
  margin: 0;
  padding: var(--sp-2) 0;
}

/* ---- Stacked form with visible labels (price request / contact) ---- */
.vh-form { display: grid; gap: var(--sp-3); }
.vh-form .field { display: grid; gap: .4rem; }
.vh-form label { font-weight: 600; color: var(--ink); }
.vh-form label .optional { font-weight: 400; color: var(--ink-2); font-size: var(--fs-sm); }
.vh-form input[type="text"],
.vh-form input[type="email"],
.vh-form input[type="tel"],
.vh-form select,
.vh-form textarea {
  width: 100%;
  min-height: var(--tap-comfort);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  padding: .6rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
  background: #fff;
  color: var(--ink);
}
.vh-form textarea { min-height: 7rem; resize: vertical; }
.vh-form input:focus,
.vh-form select:focus,
.vh-form textarea:focus { border-color: var(--anthracite); outline: none; }
.vh-form ::placeholder { color: var(--ink-2); }

/* ---- CTA band ---- */
.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; }
.cta-band p  { margin-inline: auto; }
.cta-band > .container > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.cta-band .btn { margin: 0; }

/* ---- Breadcrumb (used on inner pages; defined here so the rule ships once) ---- */
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-2); padding-block: var(--sp-2); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0;
}
.breadcrumb li { margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: .4rem; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--anthracite); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---- Sticky mobile CTA (product pages — hidden ≥768px) ---- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: .6rem var(--gutter);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
}
.sticky-cta strong { font-family: var(--font-head); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---- Article / long-form page header ---- */
.article-header {
  padding-block: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.article-header__h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.article-header__lead {
  font-size: var(--fs-lg);
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: var(--sp-2);
}
.article-meta {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
}

/* ---- Article ToC ---- */
.article-toc {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.article-toc__heading {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-body);
}
.article-toc ol { margin: 0; padding-left: 1.4em; }
.article-toc li { margin-bottom: .3rem; font-size: var(--fs-sm); }
.article-toc a { color: var(--anthracite); }

/* ---- Prose section — constrain headings/lists to readable measure ---- */
.prose h2, .prose h3,
.prose ul, .prose ol { max-width: 68ch; }

/* ---- FAQ accordion (used on product + how-it-works pages) ---- */
.faq-mini details { border-bottom: 1px solid var(--line); padding: .25rem 0; }
.faq-mini summary {
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap-comfort);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  list-style: none;
}
.faq-mini summary::-webkit-details-marker { display: none; }
.faq-mini summary::after {
  content: "+";
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--accent-600);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-mini details[open] summary::after { transform: rotate(45deg); }
.faq-mini p { color: var(--ink-2); }


/* ---- Responsive table wrapper ---- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- Spec / pricing table ---- */
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  min-width: 420px;
}
.spec caption {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-align: left;
  padding: .5rem .5rem .75rem;
  caption-side: bottom;
}
.spec thead th {
  background: var(--anthracite);
  color: #fff;
  padding: .75rem 1rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
}
.spec tbody th,
.spec tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody th {
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: var(--bg-2);
  white-space: nowrap;
}
.spec tbody td {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.spec tbody tr.is-total th,
.spec tbody tr.is-total td {
  background: var(--accent-50);
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--accent-400);
  border-bottom: 0;
}

/* ---- Content-note: user-facing caveat / annotation ---- */
.content-note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-400);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-top: var(--sp-3);
  max-width: 100%;
}
.content-note strong { color: var(--ink); }

/* Dark sections: tick marks switch to on-dark accent */
.section--dark .ticklist li::before { color: var(--accent-on-dark); }

/* ---- Configurator components (Phase 3.4+; defined here to avoid a later rewrite) ---- */
/* Option card (radio/checkbox label) */
.opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: #fff;
  cursor: pointer;
  transition:
    border-color     var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);
}
.opt:hover { border-color: var(--anthracite-soft); }
.opt:has(input:checked) { border-color: var(--anthracite); background: var(--accent-50); box-shadow: 0 0 0 2px var(--anthracite), var(--shadow-sm); }
.opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Keyboard focus: ring the whole card, not just the small radio inside it. */
.opt:has(input:focus-visible) { outline: 3px solid var(--accent-600); outline-offset: 3px; }
.opt input:focus-visible { outline: none; }
.opt input { width: 1.25rem; height: 1.25rem; accent-color: var(--anthracite); margin: 0 0 .25rem; }
.opt strong { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 650; }
.opt .price { font-family: var(--font-head); font-weight: 650; color: var(--anthracite); margin-top: .25rem; }
.opt .gate-note { font-size: var(--fs-sm); color: var(--ink-2); }
/* "Learn more" deep-link to an add-on's info page. It is interactive content
   inside the label, so clicking it navigates without toggling the checkbox
   (HTML label activation skips interactive descendants). 44px tap target. */
.opt__learn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: var(--sp-1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--anthracite);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.opt__learn:hover { text-decoration: none; }
.opt.is-gated .gate-note {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--anthracite);
  background: rgba(43,47,51,.08);
  border: 1px solid rgba(43,47,51,.18);
  border-radius: var(--radius-sm);
  padding: .3rem .7rem;
  margin-top: var(--sp-1);
}
.brandtag { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-600); text-transform: uppercase; }
.chooser { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .chooser { grid-template-columns: repeat(3, 1fr); } }

/* Detail strip — 4 thumbnail details (spa design story section) */
.detail-strip { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .detail-strip { grid-template-columns: repeat(4, 1fr); } }
/* These thumbnails carry their own aspect-ratio, so the global .ph 160px
   min-height floor is redundant here — and at 2 cols on a 375px screen that
   floor forces a 213px (160×4/3) min width per tile, causing horizontal
   overflow. Let aspect-ratio size them. */
.detail-strip .ph { min-height: 0; }

/* Step label (step N of Y heading) */
.step-label { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.step-label .eyebrow { margin: 0; }
.step-label h2 { margin: 0; }

/* Live estimate bar (sticky bottom, configurator) */
.estimate-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--anthracite);
  color: #fff;
  padding: .6rem var(--gutter);   /* slim single-line bar (~56–60px) */
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
/* Price + label + VAT note sit on one baseline-aligned row. */
.estimate-bar .est-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  min-width: 0;
}
.estimate-bar .est-figure {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.estimate-bar small { color: var(--ink-on-dark-2); font-size: .8125rem; }
.estimate-bar .est-side { display: flex; align-items: center; gap: .5rem; flex: none; }
.estimate-bar a { color: #fff; font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }
/* Mobile-only sticky "Continue" — desktop keeps the in-flow step nav */
.est-next { display: none; }
@media (max-width: 600px) {
  .estimate-bar { gap: var(--sp-2); }
  /* Keep the bar one slim line on mobile: drop the label + VAT note (carried by the
     in-flow reassurance line above) and the secondary "Save my design" button (still
     available on the deposit step). The figure + primary Continue action remain. */
  .estimate-bar .est-main small { display: none; }
  .estimate-bar #est-save-btn { display: none !important; }
  .est-next:not([hidden]) { display: inline-flex; }
}

/* Product-aware reassurance line under the progress steps (relocated out of the
   slim sticky price bar). 16px floor for readability; hidden until JS fills it. */
.cfg-reassure {
  margin: var(--sp-2) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.cfg-reassure:empty { display: none; }

/* ---- Configurator: progress steps ---- */
.c-prog {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-prog__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  flex: 1;
  min-width: 3rem;
  position: relative;
  padding: .5rem .25rem;
  cursor: default;
}
.c-prog__step + .c-prog__step::before {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: calc(-50% + 1.1rem);
  right: calc(50% + 1.1rem);
  height: 2px;
  background: var(--line);
  transition: background var(--dur-base) var(--ease-out);
}
.c-prog__step.is-done + .c-prog__step::before { background: var(--anthracite); }
.c-prog__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.c-prog__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-base);
}
.c-prog__step.is-active .c-prog__num  { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.c-prog__step.is-active .c-prog__label { color: var(--anthracite); }
.c-prog__step.is-done   .c-prog__num  { background: var(--accent-50); border-color: var(--accent-600); color: var(--accent-600); }
.c-prog__step.is-done   .c-prog__label { color: var(--ink-2); }
/* back-navigation: done steps become clickable */
.c-prog__step.is-done { cursor: pointer; }
@media (max-width: 479px) { .c-prog__label { display: none; } }

/* ---- Configurator: step nav buttons ---- */
.c-step-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
/* The "Next:" action is the primary CTA on each step — make it clearly visible
   (the bare .btn has no fill and blends into the cream step background). */
.c-step-nav .btn[data-next-step] {
  background: var(--anthracite);
  color: #fff;
  border-color: var(--anthracite);
}
.c-step-nav .btn[data-next-step]:hover {
  background: var(--anthracite-soft);
  box-shadow: var(--shadow-sm);
}
.c-step-nav .btn[data-next-step][disabled],
.c-step-nav .btn[data-next-step][aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Configurator: order summary lines ---- */
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
}
.summary-line:last-child { border-bottom: 0; }
.summary-line__price {
  font-family: var(--font-head);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--anthracite);
}

/* ---- Configurator: gated (locked) option ---- */
.opt.is-gated {
  opacity: .62;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---- Card border-only variant (info boxes, no shadow) ---- */
.card--border {
  box-shadow: none;
  background: var(--bg-2);
}

/* ---- Inline field validation error ---- */
.field-error {
  color: var(--error);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: .5rem 0;
}

/* ---- General form feedback band (success or error) ---- */
.form-feedback {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink);
  border-left: 3px solid var(--accent-600);
}

/* ---- Legal documents (privacy, cookie, terms, deposit, installation) ---- */
.legal-doc { max-width: 72ch; }
.legal-doc h1 { margin-bottom: var(--sp-2); }
.legal-doc__meta { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.legal-doc__body { color: var(--ink); }
.legal-doc__body h2 { font-size: var(--fs-h3); margin-top: var(--sp-5); }
.legal-doc__body h3 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.legal-doc__body ul,
.legal-doc__body ol { padding-left: 1.5rem; margin-bottom: var(--sp-2); }
.legal-doc__body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
.legal-doc__body a { color: var(--accent-600); }
.legal-doc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
  display: block;
  overflow-x: auto;
}
.legal-doc__body th,
.legal-doc__body td {
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal-doc__body th { background: var(--bg-2); font-weight: 600; color: var(--ink); }
.legal-doc__statutory {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-style: italic;
}

/* ---- Deposit-consent checkbox (configurator checkout) ---- */
.field--consent { margin-top: var(--sp-3); }
.consent-label {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}
.consent-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--anthracite);
}
.consent-label a { color: var(--accent-600); }

/* ==========================================================================
   ROOF TYPE VISUALISER (Steel Garages) — mobile-first
   ========================================================================== */
.roof-vis {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 720px;
  margin-inline: auto;
}
.roof-vis__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rv-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
/* The flex display above overrides the [hidden] attribute's display:none, so the
   roof-profile (steel) and roof-type (insulated) fields can't be toggled without
   this. Restore hidden behaviour. */
.rv-field[hidden] { display: none; }
.rv-field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

/* Shared option-card look (size + roof). */
.rv-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rv-group--roof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.rv-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 44px;
  min-width: 64px;
  padding: var(--sp-2);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rv-group--size .rv-opt { flex: 1 1 0; }
.rv-opt__icon svg { display: block; width: 48px; height: 32px; color: var(--anthracite); }
.rv-opt__label { font-size: var(--fs-sm); line-height: 1.2; text-align: center; }
.rv-opt[aria-checked="true"] {
  border-color: var(--anthracite);
  box-shadow: inset 0 0 0 1px var(--anthracite);
}
.rv-opt:hover { border-color: var(--anthracite-soft); }

/* Finish swatches — pill with colour dot.
   Mobile: 2-column grid so pills snap to even rows.
   Wider: free-wrap centred flex. */
.rv-group--finish {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.rv-swatch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;            /* keep the tap target — shrink the visual, not the hit area */
  width: 100%;
  padding: 4px 12px 4px 4px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rv-swatch__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(31, 35, 38, .18);
  flex: none;
}
@media (min-width: 560px) {
  .rv-group--finish {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rv-swatch { width: auto; }
}
.rv-swatch[aria-checked="true"] {
  border-color: var(--anthracite);
  box-shadow: inset 0 0 0 1px var(--anthracite);
}
.rv-swatch:hover { border-color: var(--anthracite-soft); }

/* Keyboard focus — visible on every selectable control. */
.rv-opt:focus-visible,
.rv-swatch:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}

/* Preview. The container shrink-wraps the wall render (width:fit-content) so the
   absolutely-positioned door overlay always matches the wall's box exactly. The
   wall image carries the size cap (max-width/height) and its own aspect, so steel
   (1200×896) and insulated (1200×509) each stay un-distorted with no per-collection
   class needed. */
.rv-preview {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.rv-caption {
  margin: var(--sp-2) auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.rv-note {
  margin: var(--sp-1) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-600);
}

@media (min-width: 560px) {
  .rv-group--roof { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-opt, .rv-swatch { transition: none; }
}

/* Planning-permission note for the taller apex insulated roof. */
.rv-permit-note {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2);
  background: var(--paper-2, #f4f2ed);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---- Stacked preview layers (wall render + transparent door overlay) ---- */
.rv-preview { position: relative; }
/* Wall is the in-flow sizer: it keeps its own aspect (width/height auto) and is
   capped to fit the screen — ~500px wide, ~42vh tall, never wider than the viewport. */
.rv-layer--wall {
  display: block;
  width: auto;
  height: auto;
  max-width: min(500px, 92vw);
  max-height: 42vh;
}
.rv-layer--door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* ---- Step-4 colour area: two columns on desktop for garages + rooms ----
   Single column by default (mobile + spas). JS adds --garages or --rooms modifier.
   Garages: swatch + controls left, sticky preview right.
   Rooms:   swatch left, sticky preview right (no controls row). */
@media (min-width: 900px) {
  /* Shared two-column base */
  .cfg-colour-area--garages,
  .cfg-colour-area--rooms {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: var(--sp-4) var(--sp-5);
    align-items: start;
  }

  /* Garages: two rows (swatch+controls stack on left, preview spans right) */
  .cfg-colour-area--garages {
    grid-template-areas:
      "swatch   preview"
      "controls preview";
  }
  .cfg-colour-area--garages .cfg-colour-area__swatch   { grid-area: swatch; }
  .cfg-colour-area--garages .cfg-colour-area__controls { grid-area: controls; }

  /* Rooms: single row (swatch left, preview right) */
  .cfg-colour-area--rooms {
    grid-template-areas: "swatch preview";
  }
  .cfg-colour-area--rooms .cfg-colour-area__swatch { grid-area: swatch; }
  .cfg-colour-area--rooms .cfg-colour-area__preview--rooms { grid-area: preview; }

  /* Shared sticky preview behaviour (garages + rooms) — fills viewport between
     the sticky header (~59px) and the slim price bar (~67px), centres the
     image+caption group so the left column can scroll without riding the render
     up under the header or behind the price bar. */
  .cfg-colour-area--garages .cfg-colour-area__preview,
  .cfg-colour-area--rooms   .cfg-colour-area__preview--rooms {
    position: sticky;
    top: 59px;
    height: calc(100svh - 59px - 67px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .cfg-colour-area--garages .cfg-colour-area__preview { grid-area: preview; }

  /* Rooms preview figure: cap width (a touch smaller than garages — the garden
     scene reads heavier than the studio renders) + fill column, stays centred. */
  .cfg-colour-area--rooms .room-colour-preview { max-width: 440px; width: 100%; margin-inline: auto; }

  /* Garages: let controls fill their column; keep preview capped + centred. */
  .cfg-colour-area--garages .roof-vis    { max-width: none; margin: 0; }
  .cfg-colour-area--garages .rv-preview  { margin-inline: auto; }
  .cfg-colour-area--garages .rv-field__label { text-align: left; }
  .cfg-colour-area--garages .rv-group--finish { justify-content: flex-start; }
}

/* ---- RAL colour palette (garage doors) ---- */
.ral-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.ral-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ral-swatch__chip {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}
.ral-swatch__chip--signature {
  outline: 2px solid var(--anthracite);
  outline-offset: 2px;
}
.ral-swatch__ral {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.ral-swatch__name {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--ink-2);
  line-height: 1.3;
}
.ral-palette__note {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* ---- FAQ list (dl/dt/dd — for page-specific FAQ sections) ---- */
.faq-list {
  margin: var(--sp-4) 0 0;
}
.faq-list dt {
  font-weight: 650;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.faq-list dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.faq-list dd {
  margin: var(--sp-1) 0 0;
  color: var(--ink-2);
  line-height: 1.65;
}
.faq-list dd a {
  color: var(--anthracite);
  text-underline-offset: 2px;
}

/* ==========================================================================
   SPEC DRAWER — native <details> "Full specifications" inside product cards
   ========================================================================== */
.c-spec-drawer {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.c-spec-drawer__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  min-height: 44px;
}
.c-spec-drawer__toggle::-webkit-details-marker { display: none; }
.c-spec-drawer__toggle::after {
  content: "+";
  color: var(--anthracite);
  font-size: 1.25em;
  line-height: 1;
  transition: transform .2s ease;
}
.c-spec-drawer[open] .c-spec-drawer__toggle::after { content: "\2013"; } /* en dash */
.c-spec-drawer__toggle:focus-visible {
  outline: 3px solid var(--accent-600);
  outline-offset: 2px;
}
.c-spec-drawer__body { padding-bottom: var(--sp-2); }
.c-spec-drawer .spec { font-size: var(--fs-sm); }
.c-spec-drawer .spec th { white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .c-spec-drawer__toggle::after { transition: none; }
}

/* ==========================================================================
   Premium-lift refinements (2026-06-20) — execution-level only, brand locked.
   1. Homepage hero split layout   2. How-it-works timeline   3. Hover image
   zoom   4. Warm accent on the CTA band. All transform/opacity; reduced-motion
   honoured. Hero + timeline scoped to homepage modifier classes so the 27 inner
   heroes / 3 steps-strip pages are untouched.
   ========================================================================== */

/* ---- 1. Hero — split (copy left / building right on desktop) ----
   Wrapper-agnostic: works whether the copy is bare siblings of .hero__media
   or wrapped in .hero__text. On desktop the container becomes a 2-col grid;
   .hero__media takes column 2 and spans the copy's rows, everything else
   flows down column 1. Stacks to one column below 900px. */
.hero__grid { display: grid; gap: var(--sp-5); }
.hero--split .hero__media { margin-top: 0; } /* grid gap replaces the stacked margin */
@media (min-width: 900px) {
  .hero--split .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--sp-6);
    align-items: center;
  }
  .hero--split .hero__grid > .hero__media {
    grid-column: 2;
    grid-row: 1 / -1;        /* span the copy column's rows */
    align-self: center;
    aspect-ratio: 4 / 3;     /* read large beside the copy, not a thin strip */
  }
}

/* ---- Hero — full-bleed cover (single immersive product hero) ----
   One unified section: the product photo fills the hero and the copy overlays
   on an anthracite scrim — replaces the split "copy block + image block" on the
   four product pages (steel, insulated, garden rooms, garden spas). Mobile: copy
   sits low over a bottom-weighted scrim. ≥768px it centres and an added
   left-to-right wash keeps the copy legible while the building shows on the
   right. Colour/opacity only — no motion. */
.hero--cover {
  position: relative;
  display: flex;
  align-items: flex-end;    /* copy sits low over the image on mobile */
  padding-block: 0;
  min-height: clamp(30rem, 76vh, 46rem);
}
.hero--cover > .hero__media {
  position: absolute;       /* fill the whole hero; .ph img is inset:0 inside it */
  inset: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
  min-height: 0;
}
.hero--cover > .hero__media::after {        /* legibility scrim */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20,22,24,.92) 0%, rgba(20,22,24,.62) 40%,
    rgba(20,22,24,.32) 76%, rgba(20,22,24,.24) 100%);
}
.hero--cover > .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--sp-5);
}
.hero--cover .hero__content { display: grid; gap: var(--sp-3); }
.hero--cover .hero__content .hero__actions { margin-top: var(--sp-1); }
.hero--cover h1 { max-width: 20ch; }
.hero--cover p  { color: rgba(255,255,255,.93); max-width: 46ch; }
@media (min-width: 768px) {
  .hero--cover { align-items: center; }  /* copy vertically centred on larger screens */
  .hero--cover .hero__content { max-width: 38rem; }
  .hero--cover > .hero__media::after {
    background:
      linear-gradient(100deg,
        rgba(20,22,24,.90) 0%, rgba(20,22,24,.64) 38%,
        rgba(20,22,24,.28) 66%, rgba(20,22,24,.06) 100%),
      linear-gradient(to top, rgba(20,22,24,.45) 0%, rgba(20,22,24,0) 38%);
  }
}

/* ---- 2. How-it-works — connected timeline (homepage only, ≥768px) ----
   Borderless centred steps with a hairline joining each number to the next,
   so the four steps read as one journey instead of four repeated cards. */
@media (min-width: 768px) {
  .steps-strip--timeline { gap: var(--sp-4); }
  .steps-strip--timeline .step-card {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: center;
  }
  .steps-strip--timeline .step-card::before {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    margin-bottom: var(--sp-2);
    box-shadow: 0 0 0 6px var(--bg-2); /* mask the rail where it meets the circle (section is --alt) */
  }
  /* the rail: from this circle's centre to the next circle's centre */
  .steps-strip--timeline .step-card::after {
    content: "";
    position: absolute;
    top: 1rem;                          /* vertical centre of the 2rem number circle */
    left: 50%;
    width: calc(100% + var(--sp-4));    /* reach across the column gap to the next centre */
    height: 2px;
    background: var(--line);
    z-index: 0;
  }
  .steps-strip--timeline .step-card:last-child::after { display: none; }
}

/* ---- 3. Hover image zoom — tactile, transform-only, off under reduced motion ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card--hover .ph img,
  .gallery .ph img {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .card--hover:hover .ph img { transform: scale(1.04); }
  .gallery .ph:hover img     { transform: scale(1.05); }
}

/* ---- 4. Warm accent — a single bronze halo behind the final CTA headline ---- */
.cta-band {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,168,106,.16) 0%, rgba(201,168,106,0) 55%),
    var(--anthracite);
}

/* Configurator use-case presets — share the .opt card look, single-line label */
.opt--usecase { text-align: left; cursor: pointer; min-height: 44px; }
.opt--usecase[aria-pressed="true"] { outline: 2px solid var(--anthracite); outline-offset: 2px; }

/* Garden-rooms extras — 3-state sections (included / add / upgrade) */
.rx-section { margin-bottom: var(--sp-4); }
.rx-section > h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.rx-state { display: block; }
.rx-state--included { font-weight: 600; color: var(--anthracite, #2B2F33); }
.rx-state--included [aria-hidden] { color: #3f6e28; }     /* decorative check, text stays full-contrast */
.rx-state--upgrade { color: var(--ink-2, #4B5563); font-weight: 500; }
/* Included/upgrade cards aren't selectable: hide the checkbox + price, calm background */
.rx-item--included { background: var(--paper-2, #f4f2ed); }
.rx-item--included input[type="checkbox"],
.rx-item--upgrade  input[type="checkbox"] { display: none; }

/* Garage upgrades — locked cards (in the "Available once you add electrics" group)
   aren't selectable yet, so hide their checkbox; the section header explains the gate. */
[data-gx-grid="locked"] input[type="checkbox"] { display: none; }

/* Sauna spec-page technical floor plan (catalogue drawing, dimensions in cm) */
.spec-plan { margin: var(--sp-3) 0 0; text-align: center; }
.spec-plan img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; background: #fff; border-radius: var(--radius-sm); }
.spec-plan figcaption { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-1); }