/* That Kitchen Fitter — design tokens extracted from the WordPress build
   (Elementor global kit), rewritten as plain CSS against semantic markup.
   Two variable fonts, self-hosted: no third-party requests. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* Brand palette, lifted from the Elementor global kit. Note the kit also
     defines #6EC1E4 / #61CE70 / #54595F — those are Elementor factory
     defaults that were never changed, not brand colours. Ignore them. */
  --orange: #ee763e;
  --orange-soft: #f29e6b;
  --navy: #21263c;
  --navy-deep: #1a2340;
  /* #FBF6F2 is the cream actually painted on sections; #FCFBF5 is defined in
     the kit but barely used. */
  --cream: #fbf6f2;
  --grey-100: #f5f5f5;

  /* The live site sets body text to #7A7A7A, which is 4.29:1 on white and
     fails WCAG AA. Darkened for body copy; #7A7A7A is kept only for large
     or secondary text, where 3:1 is the bar. */
  /* Sampled from the live capture. */
  --green: #56cb66; /* CTA fill */
  --tick: #0c8f5e; /* live tick is #0FB677 at 2.63:1 — darkened for 3:1 */
  --card: #ffffff;
  --card-navy: #262a3e; /* stat cards, a shade above the band */

  --ink: #2e3140;
  --muted: #6b6f7d;
  --rule: #e3e1dc;

  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --measure: 64ch;
  --gap: 1rem;
  --gap-lg: clamp(2.5rem, 6vw, 4.5rem);
  /* Widened 18 August 2026 (Andy wanted more breathing room for the style
     cards) — was 1140px, the live site's inner content track; now matches
     what used to be its 1240px outer container instead. */
  --wrap: 1240px;
  --widget-space: 20px;
  --radius: 4px;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--navy);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--orange);
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

/* Sizes below are the live site's actual values. The live H1 is a flat 35px
   with a 1.2rem mobile override — 19px on a phone is almost certainly an
   Elementor slip, so the mobile floor here is 26px instead. */
h1,
.hero-title {
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.1875rem); /* → 35px */
  font-weight: 600;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); /* → 36px */
  font-weight: 600;
}

h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1.1em;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

/* Screen-reader-only — visible to assistive tech, removed from visual
   layout without display:none (which VoiceOver/NVDA also skip). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  left: var(--gap);
  top: var(--gap);
  z-index: 200; /* above .site-header's fixed z-index: 100 */
  padding: 0.6rem 1rem;
  background: var(--navy);
  color: #fff;
}

/* ---------- buttons ---------- */

/* CTAs are green on the live site, not orange. The live build puts white text
   on it at 2.07:1, which fails badly — navy on green is 7.20:1. */
.button {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border-radius: 100px;
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.button:hover {
  filter: brightness(1.07);
  color: var(--navy);
}

/* Icon + label, left-to-right — every other .button is text-only so this
   only overrides what it needs to (inline-block → inline-flex for the gap). */
.button--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.button--whatsapp svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Matches the live footer's real "Find us on Google" button — orange, navy
   text, Google's "G" glyph — read from the live site's rendered DOM
   16 August 2026 (computed styles, not guessed): background rgb(237,117,64)
   ≈ our --orange, text rgb(38,42,62) ≈ our --navy, 10px radius. */
.button--google {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.7rem 1.3rem;
  border-radius: 10px;
  background: var(--orange);
  color: var(--navy);
}

.button--google svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Headings carry an orange italic clause on the live site. */
h1 em,
h2 em {
  font-style: italic;
  color: var(--orange);
}

.band-navy h2 em,
.hero h1 em,
.hero-title em {
  color: var(--orange-soft);
}

/* ---------- header ---------- */

.eyebrow {
  margin-bottom: 0.6rem;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Fixed so it can overlay the hero photo rather than push it down — the
   hero starts at the very top of the viewport, and the header floats above
   it. Solid navy is the resting state (matches the live site); pages with a
   hero (all of them but Cookie Policy — see :has() rule below) start
   semi-transparent instead, then swap to solid once main.js adds
   .is-scrolled a little way into the page. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 1rem var(--gap);
  background: var(--navy);
  transition: background-color 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

body:has(.hero) .site-header:not(.is-scrolled) {
  background: rgba(33, 38, 60, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Open mobile menu: solid, so the hero doesn't show through the links. */
body:has(.hero) .site-header:has(.nav-list.is-open) {
  background: var(--navy);
}

.site-header.is-scrolled {
  padding: 0.4rem var(--gap);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.is-scrolled .header-actions {
  gap: 0.9rem;
}

/* Content that isn't a hero needs room pushed under the fixed header;
   hero pages want the opposite — the photo runs right up to the top edge,
   behind the semi-transparent header above. */
main {
  padding-top: 5.5rem;
}

body:has(.hero) main {
  padding-top: 0;
}

.site-logo {
  order: 1;
}

.site-logo img {
  width: 150px;
  transition: width 0.25s ease;
}

.is-scrolled .site-logo img {
  width: 96px;
}

/* Always-visible actions: phone, CTA, mobile menu toggle. Kept out of
   .nav-list so they can never end up hidden behind the hamburger — they're
   the two things a mobile visitor is most likely to want immediately. */
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  order: 2;
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* Hamburger: three bars that turn into an X while the menu is open. */
.burger {
  position: relative;
  display: block;
  width: 1.3rem;
  height: 1rem;
  margin: auto;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { top: calc(100% - 2px); }

.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.tel-icon,
.nav-cta-mobile {
  display: none;
}

/* .site-nav gets its own full-width row wherever it's allowed to carry
   content (mobile), so an open .nav-list never shares a flex line with the
   logo. Sharing a line is what used to pull the logo down to re-centre
   against the tall open list — see CLAUDE.md build-order notes. */
.site-nav {
  order: 3;
  flex-basis: 100%;
}

@media (min-width: 56rem) {
  .header-actions {
    order: 3;
  }

  .site-nav {
    order: 2;
    flex-basis: auto;
  }
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 500;
}

/* Live nav separates items with vertical rules. */
@media (min-width: 56rem) {
  .nav-list > li + li {
    padding-left: 1.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
}

.nav-list a {
  color: #fff;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--orange-soft);
}

.nav-list [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--orange);
}

.header-actions .tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: font-size 0.25s ease;
}

.header-actions .tel:hover {
  color: var(--orange-soft);
}

/* Small "we're live" signal next to the number — same pulse-badge language
   as the homepage hero eyebrow, borrowed from the Claude Design mockup's
   nav phone pill. Green here (availability), not orange (the hero's is a
   location signal, this one's a contact signal). */
.tel-pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(86, 203, 102, 0.22);
}

.is-scrolled .header-actions .tel {
  font-size: 0.88rem;
}

/* Header CTA is seen on every scroll position of every page, so it gets its
   own (smaller) sizing rather than the full-size .button used for one-off
   hero/section CTAs — and shrinks further once scrolled, same idea as the
   logo and padding above. */
.header-actions .button {
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  transition: padding 0.25s ease, font-size 0.25s ease;
}

.is-scrolled .header-actions .button {
  padding: 0.5rem 1.15rem;
  font-size: 0.82rem;
}

/* ---------- section bands ----------
   Bands are full-bleed; an inner max-width keeps content on one grid. Every
   direct child shares the same left edge — no margin-inline:auto on children,
   which is what previously centred the lede away from its own heading. */

main > section {
  display: grid;
  grid-template-columns:
    1fr
    min(var(--wrap), 100% - (2 * var(--gap)))
    1fr;
  padding: var(--gap-lg) 0;
}

main > section > * {
  grid-column: 2;
}

main > section > * + * {
  margin-top: var(--widget-space);
}

/* Per-section padding measured from the live build. */
.reviews {
  padding: 60px 0 25px;
}

.projects {
  padding: 70px 0 15px;
}

/* ---------- before/after slider (18 August 2026) ----------
   Placeholder image pairing — real before/after photos from a finished
   job to follow once Andy picks a set. Works with JS off: --reveal
   defaults to 50% via inline style, so it degrades to a static split
   image rather than breaking. main.js wires the range input to the
   --reveal custom property that drives the clip-path. */

.transformation > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.7);
}

/* Full width of the section's content column (18 August 2026 — was capped
   at 46rem, leaving dead space next to the full-width .projects grid
   right after it). 16:9 instead of 4:3 so it doesn't get excessively
   tall now that it spans the full ~1240px container. */
.ba-slider {
  position: relative;
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
}

.ba-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--reveal, 50%));
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal, 50%);
  z-index: 2;
  width: 0;
  pointer-events: none;
}

.ba-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(22, 31, 51, 0.2);
}

.ba-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(22, 31, 51, 0.35);
}

.ba-grip svg {
  width: 20px;
  height: 20px;
}

.ba-tag {
  position: absolute;
  top: 1rem;
  z-index: 1;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: rgba(22, 31, 51, 0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ba-tag--before {
  left: 1rem;
}

.ba-tag--after {
  right: 1rem;
}

/* The actual drag control — an invisible native range input stretched
   over the whole slider, so it's keyboard- and touch-accessible without
   custom pointer-event handling. */
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.ba-range::-webkit-slider-thumb {
  appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
}

.ba-range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
}

.ba-range::-moz-range-track {
  background: transparent;
}

.ba-range:focus-visible ~ .ba-handle::before {
  background: var(--orange);
}

.styles,
.services,
.faq {
  padding: 60px 0;
}

/* Three headings are centred on the live site, not left-aligned. */
.styles > h2,
.projects > h2,
.services > h2 {
  max-width: 24ch;
  justify-self: center;
  text-align: center;
}

.styles > .eyebrow,
.projects > .eyebrow,
.services > .eyebrow {
  justify-self: center;
  text-align: center;
}

.styles > p,
.projects > p,
.services > p {
  justify-self: center;
  text-align: center;
}

.projects > p:last-child,
.services > .service-grid,
.services > p:last-child {
  text-align: initial;
}

.projects > p:last-child {
  justify-self: center;
}

/* "Find the kitchen…" is #000 on the live site, not navy. */
.services > h2 {
  color: #000;
}

/* Styles heading now matches the Claude Design mockup's own sizing rather
   than the shared h2 rule (18 August 2026) — bigger, lighter-weight, navy
   instead of flat black, and wide enough to hold the line at ~2 lines
   instead of wrapping into 3-4 short ones at this larger size. */
.styles > h2 {
  max-width: 38ch;
  color: var(--navy);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.5rem + 2vw, 2.875rem);
  letter-spacing: -0.01em;
}

.styles > p {
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.03rem;
}

/* Capped for readability, but still flush to the band's left edge — max-width
   alone would be centred by the grid's stretch default. */
main > section > p {
  max-width: var(--measure);
  justify-self: start;
}

.band-cream {
  background: var(--cream);
}

.band-navy {
  background: var(--navy);
  color: #e8e8ea;
}

.band-navy h2,
.band-navy h3 {
  color: #fff;
}

.band-navy .eyebrow {
  color: var(--orange-soft);
}

.band-navy a {
  color: #fff;
}

/* Full-width award strip, homepage only (18 August 2026, revised same
   day) — restores the visual punch a headline tucked inside .trust-card
   couldn't match, per Andy. First version sat above .hero as a normal
   block, pushing the photo down to clear the fixed header — Andy didn't
   like losing the full-bleed photo start, so this now lives *inside*
   .hero instead: absolutely positioned over the top of the photo, still
   clearing the fixed header itself, and scrolls away with the rest of
   the hero as one unit rather than as a separate section. Needs the same
   grid-span fix .hero-bg needed (see below) — an absolutely-positioned
   child of a `main > section` grid container gets auto-placed into a
   single track otherwise, not the full width. */
/* Corner badge, not a full-width strip (22 August 2026, second revision)
   — the full-width version sat in the exact same row as the eyebrow
   badge, so avoiding an overlap meant pushing all of .hero-inner's
   content down. As a right-aligned badge with no `left` set, it sizes to
   its own content and doesn't compete with the (left-aligned) eyebrow for
   the same horizontal band, so .hero-inner needs no extra top padding at
   all — nothing else has to move. grid-column/row still needed so its
   containing block is the whole hero, not whatever track a
   no-explicit-placement grid item would land in (same fix .hero-bg
   needed) — otherwise `right: 0` wouldn't mean the hero's true right
   edge. */
.award-banner {
  position: absolute;
  /* Kept in lockstep with .hero-inner's own top padding, above. */
  top: calc(5.5rem + 15px);
  /* .award-banner's containing block is the whole .hero (grid-column/row
     1/-1, below), which is full-bleed — but .hero-inner (and everything
     in it, including .trust-card) is capped at --wrap and centred, so
     `right: 0` here sat flush with the viewport edge while .trust-card's
     edge was inset from it, "breaking out of the div" per Andy (22 August
     2026). This mirrors .hero-inner's own inset exactly: half the gap
     between the full-bleed width and --wrap, plus .hero-inner's own
     right padding — the same maths that centres .hero-inner itself. */
  right: calc((100% - min(100%, var(--wrap))) / 2 + clamp(1rem, 4vw, 3rem));
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  margin: 0;
  /* Padding matches .hero-eyebrow exactly, so the two pills read as the
     same height/weight of element despite sitting on opposite corners. */
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  background: var(--orange);
}

.award-banner a {
  display: block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .award-banner a {
    white-space: normal;
  }
}

.award-banner a:hover {
  text-decoration: underline;
}

.award-banner strong {
  font-weight: 900;
}

/* ---------- hero ---------- */

/* Plain navy + a soft orange glow (top-right) — every hero except the
   homepage's. Same radial-glow language the Claude Design mockups used on
   their photo-free heroes. position:relative/overflow:hidden exist for the
   homepage's .hero-bg layer below — harmless on pages that don't use it. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--navy);
  background-image: radial-gradient(closest-side, rgba(238, 118, 62, 0.18), transparent 70%);
  background-position: 88% -10%;
  background-repeat: no-repeat;
  background-size: 65% 140%;
}

/* Homepage-only full-bleed photo layer, pulled from the Claude Design
   mockup 17 August 2026 — replaces the old .hero--photo background-image
   swap. Real photo in the markup, not the mockup's empty image-slot. */
.hero-bg {
  position: absolute;
  inset: 0;
  /* .hero is a `main > section` grid (full-bleed band layout) — an
     absolutely-positioned grid item with no explicit placement is
     auto-placed into a single track instead of spanning the container, so
     inset:0 alone isn't enough to make this cover the whole hero. */
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26, 35, 64, 0.6) 0%,
    rgba(26, 35, 64, 0.32) 35%,
    rgba(26, 35, 64, 0.62) 100%
  );
}

/* padding-top raised +2rem above the plain clamp, found and fixed 23 August
   2026: the fixed header renders ~85.5px tall unscrolled (150px-wide logo +
   its padding), but clamp(2.5rem,6vw,5rem) tops out at 80px even at wide
   viewports and sits well below that at common desktop widths (e.g. 61px at
   ~1020px) — so the first line of every plain hero (about, contact, the
   kitchen style pages, survey pages…) was rendering partly behind the
   header, not just on the new breadcrumb this was caught on. Verified via
   getBoundingClientRect() against .site-header's real bottom edge before
   and after. Not verified on a real mobile viewport — this environment's
   viewport-override trick doesn't reliably change which @media rules
   apply, same limitation noted elsewhere in this file. */
.hero-panel {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-top: calc(clamp(2.5rem, 6vw, 5rem) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.hero h1,
.hero-title {
  margin-bottom: 1.6rem;
  color: #fff;
  text-align: center;
}

/* Service-area pulse badge, from the Claude Design homepage mockup
   (17 August 2026) — replaces the old award-link badge (the award now
   lives in .trust-card below, next to the rest of the credentials). */
/* Real <h1> as of 18 August 2026 (was a <span>) — resets the shared
   h1/h2/h3 heading rule's margin/font-family/line-height so picking up a
   semantic heading tag doesn't change how this still-tiny badge looks. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: initial;
}

.hero-eyebrow .pulse {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(238, 118, 62, 0.25);
}

/* Constrained measure for readability, centred as a block but left-aligned
   within it — a long paragraph set centred reads worse line to line. */
.hero .lede {
  max-width: 62ch;
  margin: 0 auto;
  color: #e8e8ea;
  font-size: 1rem;
  text-align: left;
}

/* ---------- hero variant: centred, no hero-cols (booking confirmation) ---------- */

.hero-panel--center {
  text-align: center;
}

.hero-panel--center .lede {
  max-width: 60ch;
  margin: 0 auto 0.8rem;
  text-align: center;
}

.hero-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.6rem;
  border-radius: 16px;
  background: rgba(86, 203, 102, 0.16);
  color: var(--green);
}

.hero-check svg {
  width: 32px;
  height: 32px;
}

.hero-info-strip {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin: 2rem auto 0;
  grid-template-columns: 1fr 1fr;
  text-align: left;
}

@media (max-width: 40rem) {
  .hero-info-strip {
    grid-template-columns: 1fr;
  }
}

.hero-info-box {
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.hero-info-box .label {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-info-box .val {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.hero-info-box .val a {
  color: #fff;
}

.hero-info-box .val a:hover {
  color: var(--orange-soft);
}

.hero-info-sub {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero-info-sub a {
  color: var(--orange-soft);
}

/* ---------- homepage hero inner layout (17 August 2026, ported from the
   Claude Design mockup — replaces the old credential-banner/hero-trust-badge
   squeeze). Real photo + real Trustindex widget substituted for the
   mockup's empty image-slot and hand-set "5.0". ---------- */

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  /* Cancels main > section > * + * { margin-top: var(--widget-space) } —
     .hero-inner is technically the 3rd child of .hero (after .hero-bg and
     .award-banner, both decorative/positioned layers, not stacked
     content), so that generic sibling-spacing rule was adding an unwanted
     20px on top, misaligning the eyebrow against the award pill. */
  margin-top: 0;
  margin-inline: auto;
  /* Top value bumped +15px past header clearance (22 August 2026) — the
     pills sat too close to the nav bar at the plain clamp(...) value.
     Must stay in lockstep with .award-banner's own `top`, below. */
  padding: calc(clamp(2.5rem, 6vw, 5.5rem) + 15px) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
  display: grid;
  gap: 1.4rem;
}

.hero-inner h1,
.hero-inner .hero-title {
  margin: 0;
  text-align: left;
}

/* Bigger than the shared h1 size other pages' heroes use (18 August
   2026) — scoped to .hero-title specifically rather than growing the
   shared h1 rule, which every other page's real <h1> also uses. Andy
   pointed at the Claude Design mockup's hero heading (clamp(38px,5.4vw,
   68px)) as a size reference but didn't want it that large — this lands
   at a noticeably bigger step up from the old 35px cap without going
   anywhere near the mockup's 68px. */
.hero-title {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.625rem); /* → 42px */
}

.hero-sub {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.05rem;
  line-height: 1.65;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* Shorter than the shared .button (which every other CTA sitewide also
   uses) — scoped to just the hero row rather than changing the shared
   rule's height everywhere. */
.hero-cta-row .button {
  padding: 0.65rem 1.6rem;
}

.hero-card-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.4rem;
  margin-top: 0.6rem;
}

@media (max-width: 55rem) {
  .hero-card-row {
    grid-template-columns: 1fr;
  }
}

.promise-card,
.trust-card {
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  color: #fff;
  /* Frosted glass: keeps the text readable over the brighter parts of the
     photo (most visible on mobile) without a heavy tint. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Same glass as .trust-card beside it (9 Nov 2026, Andy): the left card used
   to be a heavier navy tint. */
.promise-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.promise-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.6;
}

.promise-card p + p {
  margin-top: 0.75rem;
}

/* Plain closing text now (22 August 2026) — was styled as a pill with an
   arrow icon, visually mimicking a CTA button despite being a
   non-interactive <div> with no href. That made 3 "book a survey"
   prompts above the fold (header CTA, hero CTA, this one), the third of
   which looked clickable but wasn't. Kept the sentence, dropped the
   button styling and the arrow. */
.promise-foot {
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
}

.trust-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.bifis-badge {
  flex: 0 0 auto;
  width: 92px;
}

.bifis-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.trust-head h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}

.trust-head h3 small {
  display: block;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  font-weight: 500;
}

.trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
}

.trust-list svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--green);
}

/* Floating card, overlapping into the next section — real live Trustindex
   widget on one side (not the mockup's hand-set "5.0", which would drift
   out of date the moment a new review lands), Andy's name and the
   InstallerSHOW ambassador credential on the other (18 August 2026 — folded
   in from the standalone orange accreditation strip that used to sit here,
   which is now gone; this also brings a named byline back onto the
   homepage after it was dropped from the hero). */
/* Centred on the seam between the hero and the reviews band (9 Nov 2026).
   It used to be a normal block pulled up 2.75rem, so it pushed the reviews
   down and left white slivers either side of it. .rating-seam is a
   zero-height row, so the hero and the reviews butt up against each other and
   the card is centred on that line whatever height the Trustindex widget
   renders at. */
.rating-seam {
  position: relative;
  z-index: 5;
  height: 0;
}

.rating-strip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--wrap), 100% - (2 * var(--gap)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem 1.6rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 20px 40px -20px rgba(22, 31, 51, 0.35);
}

.rating-press {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.rating-press strong {
  display: block;
  color: var(--navy);
  font-size: 1.05rem;
}

.rating-press .rating-role {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.rating-press a {
  display: block;
  margin-top: 0.15rem;
}

/* Small square portrait beside the stacked byline (10 Nov 2026). */
.rating-andy {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 0.4rem;
}

.rating-andy img {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: 14px;
  object-fit: cover;
}

.rating-press a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
}

.rating-press a:hover {
  text-decoration: underline;
}

/* Trustindex injects a block-level wrapper that would otherwise stretch to
   full width. */
.ti-badge {
  flex: 0 0 auto;
  width: auto;
  /* flex, so the wrapper is exactly as tall as the badge: as a plain block it was
     15px taller (inline baseline gap), which pushed the badge towards the top. */
  display: flex;
  align-items: center;
}

.ti-badge > * {
  width: auto !important;
  margin: 0 !important;
}

/* Trustindex puts a 15px bottom margin on the badge's own container: that, not the
   strip's padding, is why the badge sat too close to the top. */
.ti-badge .ti-widget-container {
  margin-bottom: 0 !important;
}

/* The lower half of the strip hangs into the reviews band, so that band
   needs extra headroom to keep its heading clear of the card. */
.rating-seam + .reviews {
  padding-top: calc(var(--gap-lg) + 4rem);
}

/* On mobile the strip wraps to two rows, so it's roughly twice as tall and
   hangs further either side of the seam: more room above and below. */
@media (max-width: 55rem) {
  .hero-inner {
    padding-bottom: 7rem;
  }

  .rating-seam + .reviews {
    padding-top: calc(var(--gap-lg) + 7.5rem);
  }
}

/* ---------- intro band ---------- */

/* Bottom padding tightened to match the Claude Design mockup's gap into
   the styles section below (18 August 2026) — the shared section padding
   alone grew up to 72px on wide viewports, wider than the mockup's fixed
   40px. Top padding is untouched, inherited from main > section. */
.intro {
  padding-bottom: 40px;
  text-align: center;
}

.intro > p {
  justify-self: center;
}

/* Widened and lightened 18 August 2026 to match the Claude Design mockup's
   intro treatment — the old 34ch/600-weight combo read as a short, heavy
   headline; this reads as a relaxed, flowing lead sentence instead
   (content unchanged, just the sizing/measure). */
.intro-lead {
  max-width: 58ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--navy);
  text-wrap: balance;
}

.intro > p:not(.intro-lead) {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- trustindex ---------- */

/* Reserve roughly the widget's rendered height so its async arrival doesn't
   shove the page down and cost CLS. */
.trustindex-widget {
  margin-top: 2rem;
  min-height: 20rem;
}

@media (max-width: 60rem) {
  .trustindex-widget {
    min-height: 26rem;
  }
}

.trust-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 500;
}

.trust-signals li {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
}

.accreditation a {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.accreditation img {
  width: 130px;
}

/* ---------- reviews ---------- */

.review-list {
  display: grid;
  gap: var(--gap);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Plain white cards by default — same recipe as .contact-card/.step-card.
   This is what the Reviews page itself uses (white, 16 August 2026 — the
   Trustindex widget has its own white internal header bar that can't be
   restyled, so the section around it has to match rather than the other
   way round). */
.review-list li {
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
}

/* Homepage teaser is the one exception — it sits on the navy band, so cards
   lighten rather than grey. */
.band-navy .review-list li {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.review-list blockquote {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}

.review-list blockquote p {
  margin: 0;
}

.review-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.83rem;
}

.review-meta span {
  color: var(--orange);
  letter-spacing: 0.1em;
}

/* Short real-review pull-quotes dropped in further down the homepage
   (18 August 2026) — the one full reviews band near the top doesn't
   reinforce trust for the rest of a long scroll, so these sit at the two
   highest-hesitation points instead: right by the services/pricing
   figures, and right before the page's final CTA. */
.review-snippet {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  text-align: center;
}

.review-snippet .stars {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--orange);
  letter-spacing: 0.15em;
}

.review-snippet p {
  margin: 0 0 0.6rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
}

.review-snippet cite {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- style cards ---------- */

.style-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* White rounded cards, photo full-bleed at the top (18 August 2026, from
   the Claude Design mockup — was copy-above-photo with the image inset
   inside the card's own padding). overflow:hidden on the card clips the
   image to the card's radius automatically, so only the top two corners
   round — no need to radius the image itself or the bottom corners. */
.style-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--card);
  text-align: center;
}

/* min-height:0 stops a flexbox quirk where a flex item's default
   min-height:auto lets its content's intrinsic size (here, the photo's own
   width/height HTML attributes) win over aspect-ratio — three photos with
   three different real aspect ratios were rendering at three different
   crop heights instead of the shared 3:2 box. */
.style-img {
  aspect-ratio: 3 / 2;
  min-height: 0;
  overflow: hidden;
  background: var(--cream);
}

.style-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-body {
  padding: 1.6rem 1.6rem 1.8rem;
}

.style-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy);
}

.style-card .strap {
  margin: 0.3rem 0 0.5rem;
  text-align: center;
  color: var(--orange-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Left-aligned (header cluster above stays centred), and reserved up to 6
   lines regardless of actual copy length (the two longest descriptions
   need all 6 at this card width) — 3 different-length descriptions were
   pushing the "View ___ kitchens" links to 3 different heights across the
   row. No truncation: real copy stays fully visible, min-height just holds
   space so the shorter card lines up with the two longest. */
.style-card p:not(.strap) {
  min-height: calc(1.65em * 6);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: left;
}

/* Left-aligned and unlined, matching the mockup's .style-link — a block
   override, since .style-card centres everything else in the body. */
.style-card a {
  display: block;
  margin-top: 1rem;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- services ---------- */

/* White rounded cards with an orange icon and green tick bullets. #F29E6B
   turned out to be the icon colour, not a panel fill. */
.service-grid {
  display: grid;
  gap: 1.8rem;
  margin: 2.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.service-grid article {
  padding: 2.2rem;
  border-radius: 18px;
  background: var(--card);
}

.svc-recommended {
  display: inline-block;
  margin: 0 0 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: var(--cream);
  border: 1px solid var(--rule);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.4rem;
  fill: var(--orange-soft);
}

.service-grid h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: #54595f;
}

/* Real prices, not a hedge — TAYA says a page that dodges cost isn't
   finished. See site.pricing in _data/site.js for where these come from. */
.price-from {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
}

.price-from .price-prefix {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.price-from .price-note {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.ticks {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.95rem;
}

.ticks li {
  position: relative;
  margin-bottom: 0.35rem;
  padding-left: 1.7rem;
}

.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--tick);
  font-weight: 700;
}

/* ---------- survey chooser routes (book-a-free-home-survey) ---------- */

.routes {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.route {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--card);
}

.route-pick {
  /* In the flow, above the card's heading (it used to float top-right and sat on top of the
     kicker text on narrow cards). */
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  background: var(--cream);
  border: 1px solid var(--rule);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.route-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--cream);
  color: var(--orange);
}

.route.alt .route-icon {
  background: rgba(86, 203, 102, 0.14);
  color: var(--tick);
}

.route-icon svg {
  width: 24px;
  height: 24px;
}

.route-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.route h3 {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
}

.route > p {
  font-size: 0.92rem;
  color: var(--muted);
}

.route .ticks {
  margin-bottom: 1.6rem;
}

.route .button {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.reassure {
  margin-top: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.reassure a {
  font-weight: 700;
}

/* ---------- why-choose-us band + testimonial (survey chooser) ---------- */

.band-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 50rem) {
  .band-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial {
  padding: 1.8rem 2.2rem;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.testimonial blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}

.testimonial-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.testimonial-meta span {
  color: var(--orange);
  letter-spacing: 0.1em;
}

/* ---------- hero step cards (navy, translucent) ---------- */

.hero-steps {
  display: grid;
  gap: 1rem;
  max-width: 60rem;
  margin: 2.5rem auto 0;
  /* Two across on a phone, four across from tablet up. auto-fit/minmax(11rem) let the
     row size itself wider than the screen, which pushed the whole hero off the right edge. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}

@media (min-width: 52rem) {
  .hero-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hero-panel {
  min-width: 0;
}

.hero-step {
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.hero-step .step-num {
  margin-bottom: 0.9rem;
}

.hero-step h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.hero-step p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- booking card (survey detail pages) ---------- */

.booking-card {
  padding: 2.2rem 2rem;
  border-radius: 22px;
  background: var(--navy-deep);
  color: #fff;
}

.booking-card .eyebrow {
  color: var(--orange-soft);
}

.booking-card h2 {
  margin: 0.4rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}

.booking-card > p {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
}

.booking-meta {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.booking-meta .row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}

.booking-meta .row svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0.4rem;
  box-sizing: content-box;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--orange-soft);
}

.booking-card .button {
  display: block;
  width: 100%;
  text-align: center;
}

.booking-note {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.booking-note a {
  color: #fff;
  font-weight: 700;
}

/* ---------- survey detail page chrome ---------- */

.survey-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.survey-back:hover {
  color: var(--orange);
}

.survey-hero {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}

@media (max-width: 55rem) {
  .survey-hero {
    grid-template-columns: 1fr;
  }
}

.badge-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  background: var(--cream);
  border: 1px solid var(--rule);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.switch-cta {
  text-align: center;
}

.switch-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
}

.switch-link:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ---------- why / stats ---------- */

.why {
  background: var(--navy);
  color: #e8e8ea;
}

.why h2 {
  max-width: 24ch;
  justify-self: start;
  color: #fff;
}

.why .eyebrow {
  color: var(--orange-soft);
}

/* Live "why" band is two columns: copy left, a 2x2 grid of stat cards right. */
@media (min-width: 60rem) {
  .why {
    align-items: start;
    column-gap: 3rem;
  }

  .why > .eyebrow,
  .why > h2,
  .why > p {
    grid-column: 2;
    width: calc(50% - 1.5rem);
  }

  .why > .stats {
    grid-column: 2;
    justify-self: end;
    width: calc(50% - 1.5rem);
    margin-top: -14rem;
  }

  /* Homepage "why" band: the stat cards sit in the same cells as the copy, on
     the right, centred vertically against the copy's whole height. This
     replaces the fixed -14rem pull-up, which only lined up when the copy was
     exactly the right height. The About page's stats-only strip (no copy)
     keeps the pull-up over its hero above. */
  .why > p ~ .stats {
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
  }

  /* The copy is pinned to rows 1-3 so the stats can share those cells; left
     to auto-placement it would be pushed below them. */
  .why:has(> p ~ .stats) > .eyebrow { grid-row: 1; }
  .why:has(> p ~ .stats) > h2 { grid-row: 2; }
  .why:has(> p ~ .stats) > p { grid-row: 3; }
}

.stats {
  display: grid;
  gap: 1.2rem;
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}

.stats li {
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: var(--card-navy);
}

.stats .figure {
  display: block;
  color: var(--orange-soft);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
}

.stats .stat-label {
  display: block;
  margin-top: 0.5rem;
  color: #d7d8dd;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ---------- projects gallery ---------- */

/* Masonry-style grid with varied tile sizes, from the Claude Design
   mockup (18 August 2026) — was a uniform auto-fit grid of same-size 4:3
   thumbnails. grid-auto-flow:dense fills any gaps the varied spans leave
   behind. Sizes cycle in a repeating pattern of 6 rather than the
   mockup's one-off hardcoded proj-1..proj-7 rules, so it keeps looking
   right as more project photos are added later — not tied to today's
   exact count of 5. */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.project-gallery li:nth-child(6n + 1) {
  grid-column: span 6;
  grid-row: span 2;
}

.project-gallery li:nth-child(6n + 2),
.project-gallery li:nth-child(6n + 3) {
  grid-column: span 3;
  grid-row: span 2;
}

.project-gallery li:nth-child(6n + 4) {
  grid-column: span 4;
  grid-row: span 3;
}

.project-gallery li:nth-child(6n + 5),
.project-gallery li:nth-child(6n) {
  grid-column: span 4;
  grid-row: span 2;
}

@media (max-width: 45rem) {
  .project-gallery li {
    grid-column: span 6 !important;
    grid-row: span 2 !important;
  }
}

.project-gallery a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
}

/* "What and where" caption, bottom-right corner (18 August 2026) —
   deliberately square corners against the card's own rounded ones, white
   background, dark text. Real caption text lives in site.projects. */
.project-caption {
  position: absolute;
  right: 0;
  /* Offset past the card's own 14px border-radius so the caption's square
     corner clears the curve instead of getting rounded off by the card's
     overflow:hidden clip. */
  bottom: 1rem;
  z-index: 1;
  padding: 0.4rem 0.75rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.project-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.project-gallery a:hover img,
.project-gallery a:focus-visible img {
  transform: scale(1.04);
}

/* ---------- lightbox ---------- */

.lightbox {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(15, 18, 28, 0.92);
}

.lightbox-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 4vw, 3rem);
  grid-template-areas: "img";
}

.lightbox-img {
  grid-area: img;
  max-width: min(100%, 1400px);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

.lightbox-caption {
  position: absolute;
  bottom: clamp(1rem, 4vw, 2.4rem);
  left: 50%;
  max-width: 60ch;
  margin: 0;
  padding: 0 1rem;
  transform: translateX(-50%);
  color: #e8e8ea;
  font-size: 0.9rem;
  text-align: center;
}

.lightbox-count {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #9aa0ad;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox button:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-close {
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  font-size: 1.9rem;
}

.lightbox-prev {
  left: clamp(0.5rem, 2vw, 1.6rem);
}

.lightbox-next {
  right: clamp(0.5rem, 2vw, 1.6rem);
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery a:hover img,
  .project-gallery a:focus-visible img {
    transform: none;
  }
}

/* ---------- faq ---------- */

/* The live FAQ heading is Poppins, not Fraunces — the one place the display
   serif is dropped. Manrope stands in for Poppins per Andy. */
.faq > h2 {
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 600;
}

/* Live FAQ is two columns: heading left, accordion right, items as white
   rounded cards with a +/− affordance. */
@media (min-width: 60rem) {
  .faq {
    column-gap: 3rem;
  }

  .faq > .eyebrow,
  .faq > h2,
  .faq > p:not(:last-child) {
    grid-column: 2;
    width: calc(50% - 1.5rem);
  }

  .faq > details,
  .faq > p:last-child {
    grid-column: 2;
    justify-self: end;
    width: calc(50% - 1.5rem);
  }

  .faq > details:first-of-type {
    margin-top: -9rem;
  }
}

.faq details {
  max-width: none;
  margin-bottom: 0.7rem;
  border: 0;
  border-radius: 12px;
  background: var(--card);
}

.faq summary {
  display: flex;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: "+";
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.faq details[open] summary::before {
  content: "–";
}

.faq summary:hover {
  color: var(--orange);
}

.faq details p {
  padding: 0 1.2rem;
  font-size: 0.95rem;
}

.faq details p:last-child {
  padding-bottom: 1.2rem;
}

/* ---------- generic tables ---------- */

main table {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  font-size: 0.9rem;
}

main th,
main td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #e7e1d6;
  text-align: left;
}

main th {
  font-weight: 700;
  color: var(--navy);
}

/* ---------- numbered steps ---------- */

.steps {
  display: grid;
  gap: 1.4rem;
  margin: 2rem 0 0;
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: step;
}

.steps li {
  list-style: none;
  padding-left: 2.6rem;
  position: relative;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
  background: var(--orange);
  color: #0d2412;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}

@media (max-width: 60rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- step cards (booking confirmation "what to expect") ----------
   Same numbered-badge recipe as .steps above, but as cards with room for a
   full paragraph rather than a compact inline list. */

/* auto-fit rather than a hardcoded column count — reused at both 4 cards
   (booking confirmation) and 3 (contact page); a fixed 4-track grid would
   leave a lopsided empty column with only 3 items. */
.steps-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.step-card {
  padding: 1.8rem 1.6rem;
  border-radius: 18px;
  background: var(--card);
}

.step-num {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 1.2rem;
  border-radius: 9px;
  background: var(--orange);
  color: #0d2412;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.step-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
}

.step-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- centred panel CTA (booking confirmation closing section) ---------- */

.cta-panel {
  max-width: 40rem;
  margin-inline: auto;
  padding: 2.2rem 2rem;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--card);
  text-align: center;
}

.cta-panel p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- contact cards ---------- */

.contact-cards {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.contact-card {
  padding: 1.5rem;
  border: 1px solid #e7e1d6;
  border-radius: 18px;
  background: var(--card);
}

.contact-card .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
}

.contact-card .value {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
}

.contact-card .value a {
  color: inherit;
}

.contact-card .sub {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: #6b7280;
}

/* Pre-survey budget qualifier — one link per band, prefilling the same
   WhatsApp message pattern as site.whatsappUrl. See site.budgetBands. */
.budget-card {
  margin-top: 1.5rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: #fff;
}

.budget-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
}

.budget-card p {
  max-width: 46rem;
  margin: 0 0 1rem;
}

.budget-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.budget-picker a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 1.6rem;
  border: 1.5px solid var(--navy);
  border-radius: 14px;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.budget-picker a span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.budget-picker a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.button--call {
  margin-top: 0.4rem;
}

.reviews-source {
  max-width: 46rem;
  margin: 0 auto 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.cta-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

.contact-card .hours-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px dashed #e7e1d6;
  font-size: 0.85rem;
}

.contact-card .hours-row:last-child {
  border-bottom: 0;
}

/* ---------- enquiry form ----------
   Native fields, not yet wired to a real endpoint — see CLAUDE.md Forms.
   Styled ahead of the Zoho webform integration so the visual work isn't
   blocked on Andy pulling the webform URL/field names. */

.form-card {
  padding: 2.2rem 2.2rem 2rem;
  border-radius: 22px;
  border: 1px solid var(--rule);
  background: var(--card);
}

.form-card > p {
  max-width: none;
  color: var(--muted);
  font-size: 0.92rem;
}

.form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 40rem) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.1rem;
}

.field label {
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}

.field .req {
  color: var(--orange);
}

.field input,
.field select,
.field textarea {
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
}

.field input.invalid,
.field textarea.invalid {
  border-color: #d1453b;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.chip input:checked + span {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.4rem;
}

.form-note {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

/* The real <input type=file> stays in the page (keyboard + screen reader
   focus, form semantics) but is visually hidden: the browser's own "No file
   chosen" text never updates because we clear the input after each pick and
   keep the files ourselves. The label is the button; the span is the count. */
.file-pick {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border: 1.5px dashed var(--muted);
  border-radius: 8px;
  background: var(--cream);
}

.file-pick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.file-pick-button {
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.file-pick-input:focus-visible + .file-pick-button {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.file-pick-count {
  font-size: 0.95rem;
  color: var(--ink);
}

.area-note {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: var(--cream);
  border-left: 4px solid var(--orange);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.area-note--out {
  border-left-color: #b3261e;
}

.near-only {
  display: none;
}

body.sent-near .near-only {
  display: block;
}

.upload-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}

.upload-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  background: var(--cream);
  font-size: 0.92rem;
  word-break: break-all;
}

.upload-remove {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.upload-note {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.field-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.field input.invalid + .field-hint {
  color: var(--ink);
  font-weight: 600;
}

.form-error {
  margin: 0.4rem 0 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--orange);
  background: var(--cream);
  color: var(--ink);
  font-size: 0.92rem;
}

.form-error[hidden] {
  display: none;
}

.form-success {
  display: none;
  padding: 1.5rem 0;
  text-align: center;
}

body.sent .form-fields {
  display: none;
}

body.sent .form-success {
  display: block;
}

.form-success .tick {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: rgba(86, 203, 102, 0.16);
  color: var(--green);
}

.form-success .tick svg {
  width: 26px;
  height: 26px;
}

/* ---------- area tags (contact page) ---------- */

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.area-tags li {
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Once a town has a real page, its tag becomes a link — see
   st-helens-kitchen-fitter.njk (23 August 2026), first of the three. */
.area-tags a {
  color: inherit;
  text-decoration: none;
}

.area-tags a:hover {
  color: var(--orange);
}

.addr-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  background: var(--cream);
}

.addr-card svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--orange);
}

.addr-card b {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--navy);
}

.addr-card span {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- timeline ---------- */

.timeline {
  display: grid;
  gap: 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

.timeline li {
  position: relative;
  padding-top: 1.9rem;
  border-top: 2px solid var(--orange);
}

.timeline-year {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--orange);
}

.timeline h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.timeline p {
  font-size: 0.9rem;
  color: #54595f;
}

@media (max-width: 60rem) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 30rem) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

/* ---------- recognition + values (about page) ---------- */

/* Also reused for the survey pages' "before your visit" prep cards —
   auto-fit so it works at both 2 (About recognition) and 3 (prep) items. */
.recog-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.values-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 50rem) {
  .recog-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.recog-card,
.value-card {
  padding: 2rem 1.8rem;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.recog-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.2rem;
  border-radius: 12px;
  background: var(--cream);
  color: var(--orange);
}

.recog-icon svg {
  width: 22px;
  height: 22px;
}

.recog-card h3,
.value-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
}

.recog-card p,
.value-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.value-card .value-num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--orange);
}

/* ---------- footer ---------- */

.site-footer {
  padding: var(--gap-lg) var(--gap) 2rem;
  background: var(--navy-deep);
  color: #c9ccd6;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  gap: var(--gap-lg);
  max-width: var(--wrap);
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.footer-grid h2 {
  margin-bottom: 0.8rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-grid li {
  margin-bottom: 0.4rem;
}

.site-footer a {
  color: #c9ccd6;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--orange-soft);
}

.footer-logo {
  width: 175px;
  margin-bottom: 1.2rem;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.social a:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.social svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.site-footer address {
  font-style: normal;
  line-height: 1.5;
}

.footer-legal {
  max-width: var(--wrap);
  margin: var(--gap-lg) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #9aa0ad;
  font-size: 0.8rem;
}

.footer-legal p {
  margin-bottom: 0.4rem;
}

/* ---------- mobile nav ---------- */

@media (max-width: 56rem) {
  .nav-toggle {
    display: block;
  }

  /* Compact mobile bar: logo left, phone icon + burger right. The text
     number and the Book CTA come out of the bar (CTA moves into the menu). */
  .site-header,
  .site-header.is-scrolled {
    flex-wrap: wrap;
    padding: 0.6rem var(--gap);
    gap: 0;
  }

  .site-logo img,
  .is-scrolled .site-logo img {
    width: 84px;
  }

  .header-actions {
    gap: 0.6rem;
    flex-wrap: nowrap;
  }

  .header-actions > .button,
  .header-actions .tel-text,
  .header-actions .tel-pulse {
    display: none;
  }

  .header-actions .tel {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--orange);
    color: var(--navy);
  }

  .header-actions .tel:hover {
    color: var(--navy);
  }

  .tel-icon {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
  }

  .nav-cta-mobile {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
  }

  .nav-list .nav-cta-mobile .button {
    display: block;
    text-align: center;
    color: var(--navy);
  }

  .nav-list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding-top: var(--gap);
  }

  .nav-list.is-open {
    display: flex;
  }
}

/* ---------- sticky mobile CTA ---------- */

/* WhatsApp, not a call button — 16 August 2026, Andy wants WhatsApp pushed
   over calls since it's the channel that can actually be automated later.
   The phone number itself hasn't gone anywhere; it's still pinned in the
   desktop header and in .header-actions on mobile. This is just the one
   persistent bottom-of-screen action, and it's WhatsApp now, not Call. */
.sticky-cta {
  display: none;
}

@media (max-width: 56rem) {
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.9rem var(--gap);
    background: var(--green);
    color: var(--navy);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
  }

  .sticky-cta svg {
    width: 20px;
    height: 20px;
    fill: var(--navy);
  }

  /* Room for the bar so it doesn't sit over the footer's last line. */
  .site-footer {
    padding-bottom: calc(2rem + 3.5rem);
  }
}

/* ---------- blog index (18 August 2026) ----------
   Ported from Andy's Claude Design mockup, restyled with the site's own
   tokens: navy/orange/cream instead of the mockup's navy/gold, Fraunces/
   Manrope instead of Playfair Display/DM Sans. */

/* Scoped to .blog-hero specifically, not the shared .hero-panel/h1/eyebrow/
   lede rules every other plain-hero page (about, contact, survey pages…)
   also uses. Sizes match the Claude Design blog mockup's own numbers
   exactly (eyebrow/h1/lede) per Andy's ask; top and bottom padding are
   equal and both raised to the increased top value — not the mockup's own
   asymmetric 60px/50px, which conflicted with "even the spacing." */
.blog-hero .hero-panel {
  padding-block: clamp(4rem, 10vw, 7rem);
}

.blog-hero .eyebrow {
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}

.blog-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.15;
}

.blog-hero .lede {
  max-width: 480px;
  font-size: 1rem;
  line-height: 1.7;
}

.blog-categories {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: 1rem var(--gap);
}

.blog-categories-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.blog-pill {
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1.5px solid var(--rule);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.blog-pill--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.blog-pill:not(.blog-pill--active):hover {
  border-color: var(--orange);
  color: var(--navy);
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.blog-card--hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.blog-card--stack:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
}

.blog-card--stack:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26, 35, 64, 0.12);
}

.blog-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.5rem;
  background: var(--cream);
  color: var(--rule);
}

.blog-card-img svg {
  width: 2.25rem;
  height: 2.25rem;
}

.blog-card--hero .blog-card-img {
  height: 23.75rem;
}

.blog-card--hero .blog-card-img svg {
  width: 3rem;
  height: 3rem;
}

.blog-card--stack .blog-card-img {
  height: 11.25rem;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.blog-card--stack .blog-card-body {
  padding: 1.1rem 1.25rem;
}

.blog-card-tag {
  margin-bottom: 0.6rem;
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-card-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.blog-card--hero .blog-card-title {
  font-size: 1.7rem;
}

.blog-card--stack .blog-card-title {
  font-size: 1.05rem;
  margin-bottom: 0;
}

.lower-grid .blog-card-title {
  font-size: 1.1rem;
}

.blog-card-excerpt {
  flex: 1;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.lower-grid .blog-card-excerpt {
  font-size: 0.85rem;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.78rem;
}

.blog-card--stack .blog-card-meta {
  margin-top: 0.5rem;
  padding-top: 0.6rem;
}

.blog-card-author {
  font-weight: 600;
  color: var(--ink);
}

.blog-card-readmore {
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.blog-card:hover .blog-card-readmore {
  color: var(--navy);
}

.blog-section-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.75rem;
}

.blog-section-head h2 {
  margin: 0;
  font-size: 1.4rem;
  white-space: nowrap;
}

.blog-divider {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.lower-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.newsletter-inner {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.newsletter-strip h2 {
  margin: 0 0 0.6rem;
  color: #fff;
}

.newsletter-strip p {
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, 0.65);
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.newsletter-input {
  flex: 1;
  min-width: 12rem;
  padding: 0.8rem 1.1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-input:focus-visible {
  border-color: var(--orange);
}

@media (max-width: 55rem) {
  .magazine-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .blog-card--hero {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .blog-card--stack:nth-of-type(2) {
    grid-column: 1;
    grid-row: auto;
  }

  .blog-card--stack:nth-of-type(3) {
    grid-column: 2;
    grid-row: auto;
  }

  .lower-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lower-grid .blog-card:last-child {
    grid-column: 1 / 3;
  }
}

@media (max-width: 40rem) {
  .blog-categories-inner {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .magazine-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .blog-card--hero,
  .blog-card--stack:nth-of-type(2),
  .blog-card--stack:nth-of-type(3) {
    grid-column: 1;
  }

  .lower-grid .blog-card:last-child {
    grid-column: 1;
  }

  .blog-card--hero .blog-card-img {
    height: 15rem;
  }
}

/* ---------- blog article (18 August 2026) ----------
   Single-post template, built to the TKF-Blog project's written spec —
   no literal mockup HTML existed for this one, only the index page did. */

/* var(--muted) (#6b6f7d) was the original color here, but it's tuned for
   light backgrounds and .hero — including the blog article hero this class
   was first built for — is navy by default, making the breadcrumb nearly
   invisible. rgba(255,255,255,.6) gives 6.3:1 against navy (see CLAUDE.md's
   accessibility floor). Fixed 23 August 2026 while reusing this class as
   the new shared breadcrumb.njk include's styling. */
.breadcrumb {
  margin-bottom: 1.1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, 0.85);
}

.blog-article-hero .blog-card-tag {
  display: inline-block;
  margin-bottom: 0.9rem;
}

.blog-article-hero h1 {
  margin-bottom: 1rem;
  text-align: left;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
}

.article-meta-author {
  color: #fff;
  font-weight: 700;
}

.article-hero-img {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--wrap);
  height: 22rem;
  margin: -2rem auto 0;
  border-radius: 18px;
  background: var(--cream);
  color: var(--rule);
  position: relative;
  z-index: 2;
}

.article-hero-img svg {
  width: 3.5rem;
  height: 3.5rem;
}

@media (max-width: 45rem) {
  .article-hero-img {
    height: 14rem;
    margin-top: 0;
    border-radius: 0;
  }
}

.article-body-inner {
  max-width: var(--measure);
  margin-inline: auto;
}

.article-body-inner .lede {
  margin: 0 0 1.4rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
}

.article-body-inner p {
  margin: 0 0 1.4rem;
  line-height: 1.75;
}

.article-body-inner h2 {
  margin: 2.2rem 0 1rem;
  font-size: 1.5rem;
}

.pull-quote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 3px solid var(--orange);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
}

.article-cta-inner {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.article-cta-inner h2 {
  margin: 0 0 0.6rem;
  color: #fff;
}

.article-cta-inner p {
  margin: 0 0 1.6rem;
  color: rgba(255, 255, 255, 0.7);
}

.author-bio-card {
  display: flex;
  gap: 1.4rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1.8rem;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.author-bio-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.author-bio-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}

.author-bio-role {
  margin: 0.2rem 0 0.7rem;
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.author-bio-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

@media (max-width: 30rem) {
  .author-bio-card {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- mobile hero clearance (9 Nov 2026) ----------
   The mobile header is now a compact ~63px bar (logo + phone + burger), so
   hero content starts a set distance below it instead of relying on the
   desktop clamp()s, which left the first line tucked under the bar. On the
   homepage the award pill spans the width and sits on its own line above the
   service-area badge, rather than overlapping it. Kept last in the file so it
   wins over the desktop rules above; .award-banner's `top` and
   .hero-inner's padding-top must move together. Verified with real 390px
   headless-Chrome screenshots. */
@media (max-width: 56rem) {
  .hero-panel {
    padding-top: 5.75rem;
  }

  .award-banner {
    top: 4.75rem;
    /* Same inset as the content below it: the section's own gutter (--gap) plus
       .hero-inner's padding. It used to be 16px in, so it stuck out past the
       text and the cards and looked off centre. */
    left: calc(var(--gap) + clamp(1rem, 4vw, 3rem));
    right: calc(var(--gap) + clamp(1rem, 4vw, 3rem));
  }

  .award-banner a {
    text-align: center;
  }

  .hero-inner {
    padding-top: 8.25rem;
  }
}

/* ---------- kitchen range pages (9 Nov 2026) ----------
   Used by _includes/range.njk, range-card.njk and kitchens.njk. */

/* Breadcrumbs in their own bar under the hero. */
.breadcrumb-bar {
  padding: 0.85rem var(--gap);
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.breadcrumb-bar .breadcrumb {
  max-width: var(--wrap);
  margin: 0 auto;
  color: var(--muted);
}

.breadcrumb-bar .breadcrumb a {
  color: var(--navy);
}

.breadcrumb-bar .breadcrumb a:hover {
  color: var(--orange);
}

.breadcrumb-bar .breadcrumb [aria-current="page"] {
  color: var(--muted);
}

/* Range hero: kitchen photo on the right fading into navy, name and buttons
   left-aligned over the dark side. The photo is the supplier's catalogue
   image (1191px landscape, some only 596px portrait), so it fills the right
   ~62% rather than the full bleed, which would upscale and soften it. */
.range-hero {
  min-height: 30rem;
}

.range-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 62%;
  height: 100%;
  object-fit: cover;
  /* Soft left edge so the photo has no visible seam against the navy. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

.range-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--navy) 34%,
    rgba(33, 38, 60, 0.82) 48%,
    rgba(33, 38, 60, 0) 72%
  );
  pointer-events: none;
}

.range-hero .range-hero-panel {
  /* margin-inline:auto on a grid item makes it shrink-to-fit and centre; a
     full width keeps the text block on the left edge of the page grid. */
  width: 100%;
  padding-inline: 0;
  position: relative;
  z-index: 1;
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.range-hero-panel > * {
  max-width: 33rem;
  margin-left: 0;
  margin-right: auto;
}

.range-hero h1,
.range-hero .eyebrow,
.range-hero .lede {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.range-hero h1 {
  margin-bottom: 1rem;
}

.range-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.range-tags li {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.range-tags-band strong {
  margin-right: 0.25rem;
  color: var(--orange-soft);
  letter-spacing: 0.05em;
}

.hero-actions,
.range-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* Both buttons the same height and baseline: the plain .button is
   inline-block and .button--whatsapp is inline-flex, which is what made them
   sit at different heights. */
.hero-actions .button,
.range-hero-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1.6rem;
}

@media (max-width: 56rem) {
  .range-hero {
    min-height: 0;
  }

  /* Photo across the top (below the fixed header), fading into navy. */
  .range-hero-img {
    top: 3.9rem;
    bottom: auto;
    width: 100%;
    height: 15rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }

  .range-hero::after {
    display: none;
  }

  .range-hero .range-hero-panel {
    padding-top: 16rem;
    padding-bottom: 2.5rem;
  }

  .hero-actions .button,
  .range-hero-actions .button {
    flex: 1 1 100%;
  }
}

.range-overview {
  display: grid;
  /* row-gap only on mobile: a column gap here would add to the inherited
     3-column band grid and push the page wider than the screen. */
  row-gap: 2.5rem;
  align-items: start;
}

.range-overview > * {
  grid-column: 2;
}

@media (min-width: 56rem) {
  .range-overview {
    grid-template-columns:
      1fr
      minmax(0, calc(var(--wrap) * 0.55 - 1.25rem))
      minmax(0, calc(var(--wrap) * 0.45 - 1.25rem))
      1fr;
    column-gap: 2.5rem;
  }

  .range-overview > .range-about { grid-column: 2; }
  .range-overview > .range-facts { grid-column: 3; }
}

.spec-list {
  margin: 1.2rem 0 0;
  padding: 0;
}

.spec-list > div {
  display: flex;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}

.spec-list dt {
  flex: 0 0 8.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.spec-list dd {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
}

.price-band {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0.1rem 0.6rem;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.finish-name {
  margin: 2rem 0 0.8rem;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.swatches li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 5.2rem;
  text-align: center;
}

.swatch {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.swatch-name {
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--navy);
}

.finish-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.proscons-grid {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Range showcase (9 Nov 2026, Andy): photos and colours straight under the
   hero. Mosaic of mixed rectangles and squares on the left (~62%), colours on
   the right; on mobile the photos come first, then the colours. */
.range-showcase {
  display: grid;
  row-gap: 2.2rem;
  align-items: start;
  /* Close to the hero: the photos are the point of the page. */
  padding-top: 2.2rem;
}

.range-showcase > * {
  grid-column: 2;
}

@media (min-width: 56rem) {
  .range-showcase {
    grid-template-columns:
      1fr
      minmax(0, calc(var(--wrap) * 0.62 - 1.25rem))
      minmax(0, calc(var(--wrap) * 0.38 - 1.25rem))
      1fr;
    column-gap: 2.5rem;
  }

  .range-showcase > .range-showcase-gallery { grid-column: 2; }
  .range-showcase > .range-showcase-colours { grid-column: 3; }
  .range-showcase--colours-only > .range-showcase-colours { grid-column: 2 / 4; }
}

.range-showcase-colours h2 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
}

.range-showcase-colours .finish-name {
  margin: 1.4rem 0 0.7rem;
}

.range-showcase-colours .swatches {
  gap: 0.9rem 0.8rem;
}

.range-showcase-colours .swatches li {
  width: 4.4rem;
}

.range-showcase-colours .swatch {
  width: 2.9rem;
  height: 2.9rem;
}

.mosaic {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 9.5rem;
}

.mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream);
}

.mosaic-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.mosaic-tile:hover img {
  transform: scale(1.04);
}

/* Mobile: the first photo is wide, the rest sit two across. */
.mosaic-tile:first-child {
  grid-column: 1 / -1;
  grid-row: span 2;
}

/* Desktop: a 6-column grid. The 3-, 5- and 7-tile layouts all fill it with no
   gaps; the first tile is always the big one. */
@media (min-width: 56rem) {
  .mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 7.4rem;
  }

  .mosaic .mosaic-tile:first-child {
    grid-column: 1 / 5;
    grid-row: 1 / 4;
  }

  .mosaic--1 .mosaic-tile:first-child { grid-column: 1 / -1; }

  .mosaic > :nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 3; }
  .mosaic > :nth-child(3) { grid-column: 5 / 7; grid-row: 3 / 4; }

  .mosaic--5 > :nth-child(4) { grid-column: 1 / 4; grid-row: 4 / 6; }
  .mosaic--5 > :nth-child(5) { grid-column: 4 / 7; grid-row: 4 / 6; }

  .mosaic--7 > :nth-child(4) { grid-column: 1 / 3; grid-row: 4 / 6; }
  .mosaic--7 > :nth-child(5) { grid-column: 3 / 5; grid-row: 4 / 5; }
  .mosaic--7 > :nth-child(6) { grid-column: 3 / 5; grid-row: 5 / 6; }
  .mosaic--7 > :nth-child(7) { grid-column: 5 / 7; grid-row: 4 / 6; }
}

.range-gallery-all {
  margin-top: 0.9rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--navy);
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.range-gallery-all:hover {
  background: var(--navy);
  color: #fff;
}

.range-gallery-all:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.range-showcase a[hidden] {
  display: none;
}

.range-pto .swatches {
  margin-bottom: 0.4rem;
}

.ticks--caution li::before {
  content: "!";
  color: var(--orange);
}


/* Cards: /kitchens/ index, style pages and "You might also like". */
.range-cards {
  display: grid;
  gap: 1.6rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.range-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.range-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(22, 31, 51, 0.4);
}

.range-card-img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.range-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.range-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.3rem;
}

.range-card-meta {
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.range-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
}

.range-card-text {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- /kitchens/ filters (9 Nov 2026) ---------- */

.range-filter-section {
  padding-block: 1.6rem 1.6rem;
}

.range-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  align-items: flex-start;
  grid-column: 2;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
}

.range-filters[hidden] {
  display: none;
}

.filter-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chip {
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--orange);
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.filter-chip-note {
  font-weight: 400;
  opacity: 0.7;
}

.filter-swatch {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.filter-swatch:hover {
  transform: scale(1.1);
}

.filter-swatch[aria-pressed="true"] {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.filter-chip:focus-visible,
.filter-swatch:focus-visible,
.filter-clear:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

.filter-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-basis: 100%;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.filter-status p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.filter-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.range-card[hidden],
.range-group[hidden],
.range-empty[hidden] {
  display: none;
}

.range-empty p {
  grid-column: 2;
  padding: 2rem 0;
}

/* The homepage hero headline has hand-placed line breaks for desktop; on a
   phone they wrap badly, so let it flow naturally there. */
@media (max-width: 40rem) {
  .hero-br {
    display: none;
  }
}

/* "Ask about this range" panel under the colours (9 Nov 2026). */
.range-ask {
  margin-top: 1.8rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
}

.range-ask h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.range-ask p {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.range-ask-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.range-ask-questions a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--navy);
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.range-ask-questions a:hover {
  background: var(--navy);
  color: #fff;
}

.range-ask .range-ask-alt {
  margin: 0;
  font-size: 0.88rem;
}

.range-ask .range-ask-alt a {
  color: var(--navy);
  font-weight: 700;
}

/* ---------- About page photos (9 Nov 2026) ----------
   Andy's portrait in the hero (text left, photo right), a working shot beside
   "Our story", and the stat strip as a plain row under the hero instead of the
   old -14rem pull-up that tucked its top row behind the hero. */
.about-hero-panel {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}

/* Matches the live site's About hero (Andy likes it): pill badge, large
   headline with an orange italic phrase, a bigger lede, the survey button,
   and a big squarish photo on the right. */
.about-hero-text .hero-eyebrow {
  margin-bottom: 1.3rem;
}

.about-hero-text h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2.3rem, 1.2rem + 3.3vw, 3.7rem);
  font-weight: 600;
  line-height: 1.08;
  text-align: left;
}

.about-hero-text .lede {
  max-width: 34rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  line-height: 1.55;
  text-align: left;
}

.about-hero-photo {
  margin: 0;
  justify-self: center;
  width: min(92%, 28rem);
}

.about-hero-photo img {
  display: block;
  width: 100%;
  /* A squarer crop of the portrait, face at the top, as on the live site. */
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 22px;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.55);
}

@media (min-width: 56rem) {
  .about-hero-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4rem;
    padding-top: 7rem;
    padding-bottom: 3.5rem;
  }

  .about-hero-photo {
    width: 100%;
    justify-self: end;
  }
}

.about-story-photo {
  margin: 0;
}

.about-story-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.about-story > * {
  grid-column: 2;
}

@media (min-width: 56rem) {
  .about-story {
    grid-template-columns:
      1fr
      minmax(0, calc(var(--wrap) * 0.58 - 1.25rem))
      minmax(0, calc(var(--wrap) * 0.42 - 1.25rem))
      1fr;
    column-gap: 2.5rem;
    align-items: center;
  }

  .about-story > .about-story-text { grid-column: 2; }
  .about-story > .about-story-photo { grid-column: 3; }
}

.about-story-text p {
  max-width: 62ch;
}

/* The About stats sit inside the hero (so its orange glow runs behind them
   instead of stopping at the hero's edge), as a plain row aligned with the
   hero's text. */
.about-stats {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 3rem;
}

@media (min-width: 60rem) {
  .about-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- About: BIFIS award section (9 Nov 2026) ----------
   Logo, the award in plain words, and the photo of Andy receiving it. */
.about-award > * {
  grid-column: 2;
}

.about-award-logo {
  display: block;
  width: 50%;
  max-width: 14rem;
  margin-bottom: 1.2rem;
}

.about-award-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.about-award-photo {
  margin: 2rem 0 0;
}

.about-award-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.55);
}

.about-award-photo figcaption {
  margin-top: 0.7rem;
  color: #d7d8dd;
  font-size: 0.85rem;
}

@media (min-width: 56rem) {
  .about-award {
    grid-template-columns:
      1fr
      minmax(0, calc(var(--wrap) * 0.56 - 1.25rem))
      minmax(0, calc(var(--wrap) * 0.44 - 1.25rem))
      1fr;
    column-gap: 3rem;
    align-items: center;
  }

  .about-award > .about-award-text { grid-column: 2; }
  .about-award > .about-award-photo { grid-column: 3; margin: 0; }
}

/* ---------- Kitchens dropdown (9 Nov 2026) ---------- */
.nav-list .caret {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
}

.sub-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-nav a {
  display: block;
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .nav-list > li.has-sub {
    position: relative;
  }

  .sub-nav {
    position: absolute;
    top: 100%;
    left: 0.9rem;
    min-width: 17rem;
    padding: 0.5rem 0;
    margin-top: 0.9rem;
    background: var(--navy);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  }

  /* Invisible bridge so the pointer can cross the gap without closing it. */
  .sub-nav::before {
    content: "";
    position: absolute;
    inset: -1rem 0 100% 0;
  }

  .has-sub:hover > .sub-nav,
  .has-sub:focus-within > .sub-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sub-nav a {
    padding: 0.55rem 1.1rem;
  }

  .sub-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

@media (max-width: 56rem) {
  .sub-nav {
    margin: 0.5rem 0 0 0.9rem;
    padding-left: 0.9rem;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    display: grid;
    gap: 0.6rem;
    font-size: 0.88rem;
    font-weight: 400;
  }

  .nav-list .caret {
    display: none;
  }
}

/* ---------- Photo grid and spec list for the kitchen detail pages (9 Nov 2026) ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.photo-grid figure {
  margin: 0;
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: #fff;
}

.photo-grid figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.spec-list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.7rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line, rgba(33, 38, 60, 0.2));
  border-radius: 100px;
  font-size: 0.9rem;
}

@media (min-width: 40rem) {
  .photo-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.services .photo-grid ~ * {
  text-align: left;
}

/* Desktop: the header must not clip the Kitchens dropdown. The scroll
   behaviour is only needed for the tall open mobile menu. */
@media (min-width: 56rem) {
  .site-header {
    overflow: visible;
  }
}

/* Cabinet spec: numbered list beside a wireframe (9 Nov 2026) */
.cab-spec {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: 1.25rem;
}

@media (min-width: 48rem) {
  .cab-spec {
    grid-template-columns: 1fr minmax(18rem, 26rem);
  }
}

.spec-list--numbered {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  counter-reset: spec;
}

.spec-list--numbered li {
  position: relative;
  padding-left: 2.6rem;
  counter-increment: spec;
}

.spec-list--numbered li::before {
  content: counter(spec);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
}

.cab-diagram {
  margin: 0;
}

.cab-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.cab-diagram .cab-lines {
  stroke: var(--navy);
  stroke-width: 2;
}

.cab-diagram .cab-back,
.cab-diagram .cab-leg {
  stroke: var(--muted);
}

.cab-diagram .cab-rail,
.cab-diagram .cab-shelf {
  fill: rgba(238, 118, 62, 0.14);
}

.cab-diagram .cab-marks path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
}

.cab-diagram .cab-marks circle {
  fill: var(--orange);
}

.cab-diagram .cab-marks text {
  fill: var(--navy);
  font: 700 14px var(--font-body, sans-serif);
  text-anchor: middle;
}

.cab-diagram figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.pair-grid figcaption {
  color: var(--ink);
}

.pair-grid .pair-label {
  display: block;
  margin: 0.35rem 0 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.pair-swatches {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.pair-swatches li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pair-swatches .swatch {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(33, 38, 60, 0.25);
}

/* Colour families on /kitchens/ (9 Nov 2026): a dot plus a name, not 70 swatches. */
.filter-family {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.family-dot {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px solid rgba(33, 38, 60, 0.25);
}

/* About: bigger BIFIS logo; 50% width on a phone, 14rem max on a laptop. */
@media (min-width: 56rem) {
  .about-award-logo {
    width: 14rem;
  }
}

/* /kitchens/ filters: Finish and Price band tucked behind "More filters". */
.filter-more-wrap {
  flex-basis: 100%;
}

.filter-more-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.filter-more-toggle::before {
  content: "+ ";
}

.filter-more-toggle[aria-expanded="true"]::before {
  content: "\2212 ";
}

.filter-more {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  margin-top: 1rem;
}

.filter-more[hidden] {
  display: none;
}

/* Mobile footer: everything centred (9 Nov 2026). */
@media (max-width: 56rem) {
  .site-footer,
  .footer-grid,
  .footer-grid > div,
  .footer-legal {
    text-align: center;
  }

  .footer-grid ul,
  .social {
    justify-content: center;
  }

  .footer-logo,
  .site-footer .button--google {
    margin-inline: auto;
  }

  .site-footer .button--google {
    display: inline-flex;
  }
}

/* "Did you know?" card with the mascot (10 Nov 2026). The picture sits on the
   bottom edge of the card and is clipped by it. */
.mascot-note {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 1.5rem 0 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--cream, #fbf6f2);
}

.mascot-note img {
  flex: none;
  display: block;
  width: 9rem;
  height: auto;
  margin-top: 0.8rem;
}

.mascot-note > div {
  align-self: center;
  padding: 1.2rem 0;
}

.mascot-note-label {
  margin: 0 0 0.3rem;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mascot-note-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

@media (max-width: 40rem) {
  .mascot-note img {
    width: 6.5rem;
  }
}

.contact-note {
  margin-top: 2rem;
}

.range-empty-mascot {
  display: block;
  width: 7rem;
  height: auto;
  margin: 0 auto 0.8rem;
}

/* /kitchens/ top: trust banner and three route cards (10 Nov 2026). */
.kitchens-banner {
  padding-block: 0.9rem;
  background: var(--orange);
  color: var(--navy);
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.kitchens-banner span + span::before {
  content: "\00b7";
  margin: 0 0.7rem;
}

.route-cards {
  display: grid;
  gap: 1.2rem;
  grid-column: 2;
  margin-block: 2.2rem 0.5rem;
}

@media (min-width: 56rem) {
  .route-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.route-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-radius: 18px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(33, 38, 60, 0.7);
}

.route-card .route-tag {
  align-self: flex-start;
  margin: 0 0 0.8rem;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-card h2,
.route-card h3 {
  margin: 0 0 0.4rem;
  color: #fff;
  font-size: 1.35rem;
}

.route-card .route-price {
  margin: 0 0 0.8rem;
  color: var(--orange-soft);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
}

.route-card .route-price small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: #d7d8dd;
}

.route-card p {
  color: #e6e7ec;
}

.route-card .button {
  margin-top: auto;
  align-self: flex-start;
}

.hero .lede a {
  color: var(--orange-soft);
}

/* Cookie choice banner (10 Nov 2026). Sits above the mobile WhatsApp bar. */
.consent {
  position: fixed;
  z-index: 200;
  inset-inline: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.consent[hidden] {
  display: none;
}

.consent p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #e6e7ec;
}

.consent .consent-title {
  margin-bottom: 0.3rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.consent a {
  color: var(--orange-soft);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.consent .button {
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
}

.button--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

@media (min-width: 56rem) {
  .consent {
    inset-inline: auto 1.5rem;
    margin-inline: 0;
  }
}

@media (max-width: 56rem) {
  .consent {
    bottom: 4.6rem;
  }
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Five menu items now: tighten the bar between phone-sized and wide laptops so the
   phone number and the survey button stay on the same row as the logo. */
@media (min-width: 56rem) and (max-width: 76rem) {
  .nav-list {
    gap: 0.9rem;
    font-size: 0.86rem;
  }

  .nav-list > li + li {
    padding-left: 0.9rem;
  }

  .header-actions {
    gap: 0.6rem;
  }

  .header-actions .tel-text {
    font-size: 0.9rem;
  }

  .header-actions > .button {
    padding-inline: 0.9rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 56rem) and (max-width: 66rem) {
  .nav-list {
    gap: 0.55rem;
    font-size: 0.8rem;
  }

  .nav-list > li + li {
    padding-left: 0.55rem;
  }

  .header-actions .tel-pulse {
    display: none;
  }

  .header-actions .tel-text {
    font-size: 0.82rem;
  }

  .header-actions > .button {
    padding-inline: 0.7rem;
    font-size: 0.78rem;
  }

  .site-logo img {
    width: 120px;
  }
}

/* ---------- 10 Nov 2026: mobile tidy-ups from Andy's phone check ---------- */

/* Calendar icon on every "Book a free home survey" button (header, hero, panels,
   survey pages, mobile menu). The icon is a mask, so it takes the button's text colour. */
a.button[href^="/book-a-free-home-survey"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

a.button[href^="/book-a-free-home-survey"]::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bottom of the homepage FAQ band: centre the call button. */
.faq-call {
  text-align: center;
}

/* More air between the BIFIS card and the rating strip. */
.hero-inner {
  padding-bottom: calc(clamp(2.5rem, 6vw, 5.5rem) + 1.5rem);
}

@media (max-width: 55rem) {
  .hero-inner {
    padding-bottom: 9.5rem;
  }

  /* Both hero buttons the same width, so they line up. */
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-row .button {
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }

  /* Rating strip: badge and Andy's byline centred. */
  .rating-strip {
    justify-content: center;
  }

  .rating-andy {
    justify-content: center;
  }
}

/* The calendar-icon rule above is more specific than the mobile "hide the header CTA"
   rule, so it brought the survey button back into the phone header. Hide it again. */
@media (max-width: 56rem) {
  .header-actions > a.button[href^="/book-a-free-home-survey"] {
    display: none;
  }
}

/* The call button under the FAQ: the <p> around it was shrink-wrapped and left-aligned
   by the generic section rules, so text-align had nothing to centre within. */
@media (max-width: 59.99rem) {
  .faq .faq-call {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    text-align: center;
  }
}