/* ==========================================================================
   Kitch Switch — Design tokens
   ========================================================================== */

:root {
  /* Colour — Kitch Switch green (#468B6A, from the logo's switch) on
     off-white and charcoal. */
  --brand: #468b6a;
  --brand-dark: #387155;        /* hover / pressed */
  --brand-deep: #18191b;        /* deepest tone, for full sections — same
                                    value as --charcoal, deliberately */
  --brand-light: #7fbd9f;       /* brand green on charcoal, for contrast */
  --brand-tint: #e6f0eb;        /* pale green surface, selected states */

  --charcoal: #18191b;
  --charcoal-soft: #4c5661;     /* body copy */
  --grey: #7c868f;              /* muted labels */
  --grey-line: #dde3e8;         /* hairlines */

  --white: #ffffff;
  --paper: #f7f5f2;             /* off-white page background */
  --paper-dim: #efece6;         /* alternating section background, off-white toned */
  --line: rgba(24, 25, 27, 0.12);

  /* Small accent colours, used sparingly against the blue/charcoal base for
     spots that need to stand apart — an icon chip, a stat, a highlight.
     Gold echoes the aftercare seal; sage is already one of the finish
     swatches; teal is the calm one, used on the
     aftercare moments specifically, not just decoration. */
  --accent-gold: #b8894a;
  --accent-gold-tint: #f6ecda;
  --accent-sage: #6f8168;
  --accent-sage-tint: #e7ece5;
  --accent-teal: #2f7d74;
  --accent-teal-dark: #235e57;
  --accent-teal-tint: #e3f0ee;

  /* Placeholder flags — deliberately off-brand so unfinished
     content is obvious. Every amber dashed box needs your content. */
  --flag: #b4884a;
  --flag-dark: #8a6737;
  --flag-tint: #f8f0e2;
  --flag-stripe: #f0e3cd;

  /* Type */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", monospace;

  /* Layout */
  --container: 1180px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --header-h: 74px;   /* measured at runtime, see js/script.js */
  --radius-s: 3px;
  --radius-m: 8px;
  --radius-l: 16px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

html {
  background: var(--charcoal);
}

/* Lock the page to the screen width so it can't be dragged sideways on a
   phone. `clip` (unlike `hidden`) doesn't break the sticky header; `hidden`
   is the fallback for older browsers. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font-family: inherit;
}

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

h1, h2, h3, h4, p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: var(--section-pad);
  scroll-margin-top: 4.5rem;
}

.section--dim {
  background: var(--paper-dim);
}

.section--charcoal {
  background: var(--charcoal);
  color: var(--paper);
}

/* A section in full brand blue, for the ones that should stand apart */
.section--brand {
  background: var(--brand);
  color: var(--white);
}

.section--brand .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.section--brand .section-lede {
  color: rgba(255, 255, 255, 0.82);
}

.section--brand .btn-primary {
  background: var(--white);
  color: var(--brand-dark);
}

.section--brand .btn-primary:hover {
  background: var(--brand-tint);
}

.section--brand .btn-ghost {
  color: var(--white);
}

.section--brand .btn-ghost:hover {
  background: var(--white);
  color: var(--brand-dark);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;      /* lets it break onto a second line on narrow screens
                            instead of overflowing past the edge */
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}

/* Keeps the flag and the word together as one item inside the flex eyebrow,
   so the gap doesn't open up between them. */
.with-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* The hero's eyebrow is the one that wraps to two lines on narrow screens
   (the others are always short enough to fit on one). Scoped to the hero so
   left-aligned eyebrows elsewhere on the page aren't affected — full-width
   plus justify-content:center centres each wrapped line independently,
   which plain text-align on the parent can't do for a wrapped flex box. */
.hero-copy .eyebrow {
  display: flex;
  width: 100%;
  justify-content: center;
}

@media (min-width: 900px) {
  .hero-copy .eyebrow {
    justify-content: flex-start;
  }
}

.flag-scotland {
  width: 1.1em;
  height: auto;
  flex-shrink: 0;
  opacity: 0.85;
}

.section--charcoal .eyebrow {
  color: var(--white);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.1vw + 1rem, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.section-lede {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--charcoal-soft);
  max-width: 52ch;
}

.section--charcoal .section-lede {
  color: rgba(255, 255, 255, 0.72);
}

.section-head--center .section-lede {
  margin-inline: auto;
}

/* Phones: every section heading and its intro sit on a centre line, matching
   the hero. The eyebrow is inline-flex, so it centres from its parent. */
@media (max-width: 779px) {
  .section-head,
  .guarantee > div:first-child,
  .about.about--text > div,
  .booking-aside,
  .materials-intro,
  .landlord-intro {
    text-align: center;
  }

  .section-head .section-lede,
  .guarantee .section-lede,
  .booking-aside .section-lede,
  .materials-intro .section-lede,
  .landlord-intro .section-lede {
    margin-inline: auto;
  }

  /* The spec rows read better left-aligned inside a centred block — it
     leads with a marker. */
  .spec {
    text-align: left;
  }

  /* The list of points under the booking heading reads better left-aligned,
     but the block itself stays centred. */
  .booking-points {
    text-align: left;
  }

  .guarantee-badge {
    margin-inline: auto;
  }

  /* The pull quote and the name centre; the story stays left-aligned. Long
     paragraphs set centred are hard to read — the eye loses the line start. */
  .about.about--text .about-bio {
    text-align: left;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 0.95em 1.6em;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.site-header .btn-primary,
.hero .btn-primary {
  background: var(--white);
  color: var(--charcoal);
}

.site-header .btn-primary:hover,
.hero .btn-primary:hover {
  background: var(--paper-dim);
}

.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--charcoal);
}

.btn-ghost:hover {
  background: var(--charcoal);
  color: var(--paper);
}

.section--charcoal .btn-ghost {
  color: var(--paper);
}

.section--charcoal .btn-ghost:hover {
  background: var(--paper);
  color: var(--charcoal);
}

.btn-block {
  width: 100%;
}

.btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ==========================================================================
   Placeholder tagging
   ========================================================================== */

.placeholder {
  position: relative;
  border: 1px dashed var(--flag);
  border-radius: var(--radius-s);
  background: repeating-linear-gradient(
    135deg,
    var(--flag-tint),
    var(--flag-tint) 8px,
    var(--flag-stripe) 8px,
    var(--flag-stripe) 16px
  );
}

.placeholder[data-label=""]::after {
  display: none;
}

.placeholder::after {
  content: attr(data-label);
  position: absolute;
  top: -0.7em;
  left: 0.75em;
  background: var(--paper);
  color: var(--flag-dark);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  line-height: 1.4;
}

.placeholder-text {
  color: var(--flag-dark);
  background: var(--flag-tint);
  border: 1px dashed var(--flag);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-weight: 700;
  white-space: nowrap;
}

.section--charcoal .placeholder-text,
.site-footer .placeholder-text {
  background: transparent;
  color: var(--flag);
  border-color: rgba(180, 136, 74, 0.7);
}

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  min-height: 100%;
  color: var(--flag-dark);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--charcoal);   /* fully opaque now, so no backdrop-filter
                                     blur needed — nothing shows through */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-price,
.header-actions .btn {
  padding: 0.7em 1.25em;
  font-size: 0.82rem;
  white-space: nowrap;
}

.header-book {
  color: var(--paper);
  text-transform: uppercase;
}

.header-book:hover {
  background: var(--paper);
  color: var(--charcoal);
}

/* Not enough room for the full label next to the price button on a phone,
   so it shortens to "Book now". */
.header-book-short {
  display: none;
}

@media (max-width: 599px) {
  .header-book-long {
    display: none;
  }

  .header-book-short {
    display: inline;
  }

  .site-header .container {
    gap: 0.5rem;
  }

  .header-actions {
    gap: 0.5rem;
  }
}

@media (max-width: 430px) {
  .header-price,
  .header-actions .btn {
    font-size: 0.68rem;
    padding: 0.7em 0.8em;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Solid brand colour instead of a full-bleed photo background — the photo
   itself sits inline as .hero-photo, between the copy and the CTAs. */
.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--paper);
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}

/* On a laptop/desktop window, the top padding scales off viewport height so
   the hero eases off on shorter windows without being cramped on ordinary
   ones. */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(4rem, 12vh, 8rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
    gap: clamp(1.25rem, 3vh, 2.25rem);
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  color: var(--white);
  font-size: 0.75rem;
}

/* Single column, capped width on phones/tablets — copy, then the
   before/after card, then the button, all stacked and centred. From
   900px up this switches to a two-column layout: copy and the button on
   the left, the before/after card on the right. */
.hero .container {
  width: 100%;   /* .hero's align-items: center makes flex-item containers
                     shrink-wrap by default — without this, a 100%-width
                     child (like the CTA button) has nothing solid to
                     resolve its percentage against */
  max-width: 54rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}

@media (min-width: 900px) {
  .hero .container {
    max-width: 82rem;
    display: grid;
    grid-template-columns: 0.9fr 1.2fr;
    grid-template-areas: "copy compare";
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .hero-copy {
    grid-area: copy;
  }

  .hero-compare {
    grid-area: compare;
  }

  .hero-ctas {
    grid-area: ctas;
    margin-top: 0.5rem;
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}

/* Tighter spacing around the title specifically on phones — the eyebrow
   and subtitle were sitting too far from it. */
@media (max-width: 899px) {
  .hero-copy {
    gap: clamp(1rem, 2.5vh, 1.5rem);
  }

  .hero-copy .eyebrow {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 900px) {
  .hero-copy {
    align-items: flex-start;
    text-align: left;
    gap: clamp(1.25rem, 3vh, 2.25rem);
  }
}

.hero-title-word {
  color: var(--white);
}

.hero-title-bracket {
  color: var(--white);
}


.hero-ctas {
  justify-content: center;
}

@media (min-width: 900px) {
  .hero-ctas {
    justify-content: flex-start;
  }
}

.hero-compare {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

/* On wider screens the hero has far more room than the mobile-sized 30rem
   card uses — let it grow so it carries the same visual weight it has on
   phones instead of floating small in a lot of empty space. */
@media (min-width: 900px) {
  .hero-compare {
    max-width: none;
    margin-inline: 0;
  }

  .hero-compare .switch-photo {
    aspect-ratio: 3 / 2;
  }
}

.hero-compare .switch-photo {
  box-shadow: 0 30px 60px -35px rgba(20, 26, 31, 0.35);
}

/* ---- Finish switcher ----------------------------------------------------
   A drawn cabinet that repaints itself when a swatch is chosen. One custom
   property, --door, carries the colour; the grain lines fade in for wood. */

.finish-picker {
  /* Each finish switches these on or off; see js/script.js */
  --grain: 0;
  --gloss: 0;
  --speckle: 0;
  max-width: 24rem;
  margin-inline: auto;
}

.finish-cabinet {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 30px 60px -35px rgba(20, 26, 31, 0.35);
}

.finish-cabinet svg {
  width: 100%;
  height: auto;
  display: block;
}

.finish-cabinet .worktop {
  fill: #c9d0d6;
}

.fronts rect {
  fill: var(--door);
  stroke: rgba(0, 0, 0, 0.16);
  stroke-width: 1;
  transition: fill 0.4s ease;
}

/* Light falling down the unit — on for every finish */
.shade {
  fill: url(#lightFall);
}

/* Woodgrain, in two passes */
.grain path {
  fill: none;
  stroke-linecap: round;
  opacity: var(--grain);
  transition: opacity 0.4s ease;
}

.grain--coarse path {
  stroke: rgba(0, 0, 0, 0.13);
  stroke-width: 1.1;
}

.grain--fine path {
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 0.7;
}

/* Aggregate in the concrete finishes */
.speckle {
  opacity: var(--speckle);
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}

/* The reflection that only a gloss film gives you */
.gloss {
  fill: url(#glossSheen);
  opacity: var(--gloss);
  transition: opacity 0.4s ease;
}

/* Brushed steel, light enough to read on dark and pale finishes alike */
.handles rect {
  fill: #97a1a9;
}

/* Light on the top edge of each front */
.edges path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.finish-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  border: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.swatch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.swatch {
  cursor: pointer;
  line-height: 0;
}

.swatch > span:first-of-type {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 0 0 0 var(--brand);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.swatch:hover > span:first-of-type {
  transform: translateY(-2px);
}

.swatch:has(input:checked) > span:first-of-type {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
}

.swatch:has(input:focus-visible) > span:first-of-type {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.finish-caption {
  margin-top: 1.1rem;
  text-align: center;
  line-height: 1.5;
}

.finish-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.finish-caption span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey);
}

.hero-title {
  font-family: var(--font-body);
  font-weight: 800;          /* Montserrat needs weight to carry at this size */
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;  /* and tightening, or it reads loose */
  text-transform: uppercase;
  color: var(--paper);
}

/* The logo stands in for the headline text. The h1 stays for search engines
   and screen readers; its alt text carries the wording. */
.hero-title--logo img {
  width: clamp(11rem, 48vw, 17rem);
  height: auto;
}

@media (min-width: 900px) {
  .hero-title--logo img {
    width: clamp(15rem, 26vw, 22rem);
  }
}

/* The two-column hero layout gives the headline a narrower column than
   the old single-column one did, so the width-based clamp above (tuned
   for the full hero width) runs too large and wraps too hard here. */
@media (min-width: 900px) {
  .hero-title {
    font-size: clamp(2.05rem, 2.6vw + 1rem, 3.1rem);
  }
}

/* Narrow phones: pull the headline size down further so "Revive your
   (KITCHEN)" fits on one line instead of breaking mid-phrase. */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.5rem, 7.2vw, 1.9rem);
  }
}

/* Sits below the headline, roughly midway in scale between it and body
   copy, in the same muted tone as the eyebrow above — a subheading rather
   than a second headline competing with the first. */
.hero-subtitle {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw + 0.7rem, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
}

@media (max-width: 899px) {
  .hero-subtitle {
    margin-top: 0.5rem;
  }
}

.hero-subtitle em {
  font-style: italic;
}

.hero-subtitle.eyebrow-style {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: normal;
}

.hero-ctas {
  /* Spacing above this comes from .hero .container's gap, not a margin here —
     it needs to hold whether the buttons are centred under the headline
     (short screens) or pinned to the bottom of a full-height hero. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  /* Sized directly, the same way .hero-compare is — .hero's align-items:
     center makes flex-item ancestors shrink-wrap, so a width set here is
     what the button's own 100% actually has to resolve against. */
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .hero-ctas {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }
}

.hero-ctas .btn {
  width: 100%;              /* fills .hero-ctas, which is what's sized to
                                match .hero-compare */
  padding: 1.05em 1.8em;
  font-size: 0.95rem;
  border-radius: 999px;
}

@media (min-width: 900px) {
  .hero-ctas .btn {
    width: auto;
  }
}

.hero-note {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

/* Hero consultation card — what the visitor gets for booking */

.consult-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: 0 30px 60px -35px rgba(20, 26, 31, 0.35);
}

.consult-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.consult-card-head span:last-child {
  color: var(--brand-dark);
}

.consult-list {
  margin: 0 0 1.6rem;
}

.consult-list > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.consult-list dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.consult-list dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--charcoal);
}

/* Stacked under the hero copy, the card's button would sit a few centimetres
   below an identical one. The hero CTA covers it on small screens. */
@media (max-width: 959px) {
  .consult-card .btn,
  .consult-card-foot {
    display: none;
  }

  .consult-list {
    margin-bottom: 0;
  }

  .consult-list > div:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.consult-card-foot {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ==========================================================================
   Comparison slider (before / after)
   ========================================================================== */

.compare {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  touch-action: pan-y;
  background: var(--grey-line);
}

.compare-layer {
  position: absolute;
  inset: 0;
}

.compare-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-after {
  background: linear-gradient(150deg, #edf3f8, #d7e3ee);
}

.compare-before {
  background: linear-gradient(150deg, #d8dce0, #b6bdc4);
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Marks an empty photo slot. Delete these spans once real photos are in. */
.compare-note {
  position: absolute;
  top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flag-dark);
  border: 1px dashed var(--flag);
  border-radius: 2px;
  padding: 0.25em 0.5em;
  background: rgba(255, 255, 255, 0.75);
}

.compare-note--before {
  left: 0.7rem;
}

.compare-note--after {
  right: 0.7rem;
}

.compare-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare-slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.compare-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* A narrow thumb keeps the handle under the pointer as you drag. */
  width: 4px;
  height: 100%;
  border-radius: 0;
  background: transparent;
}

.compare-slider::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.compare-slider::-moz-range-thumb {
  width: 4px;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: none;
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--white);
  pointer-events: none;
  transform: translateX(-1px);
}

.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px -6px rgba(20, 26, 31, 0.5);
}

.compare-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 12px;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%2337493f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2L3 6l4 4M13 2l4 4-4 4'/%3E%3C/svg%3E");
}

.compare-label {
  position: absolute;
  bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20, 26, 31, 0.75);
  color: var(--white);
  padding: 0.3em 0.6em;
  border-radius: 2px;
  pointer-events: none;
}

.compare-label--before {
  left: 0.7rem;
}

.compare-label--after {
  right: 0.7rem;
}

/* Gallery grid — used by snippets/before-after-gallery.html. Kept in place so
   the section works the moment you paste it back into index.html. */

.gallery-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-card-caption {
  margin-top: 0.9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.gallery-card-caption .case-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-dark);
  white-space: nowrap;
}

.gallery-card-caption p {
  font-size: 0.9rem;
  color: var(--charcoal-soft);
}

.gallery-cta {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.steps {
  display: grid;
  gap: 1.5rem;
  list-style: none;   /* the number sits above each card instead */
  padding: 0;
}

.step {
  display: flex;
  flex-direction: column;
}

.step-number {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--brand);
  margin-bottom: 0.8rem;
}

/* --brand doesn't have enough contrast against charcoal (it's tuned for
   white/off-white backgrounds) — brand-light is the token used everywhere
   else on this page for a brand accent that needs to sit on charcoal. */
.section--charcoal .step-number {
  color: var(--brand-light);
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.5rem;
  position: relative;
  flex: 1;            /* cards stay level when the copy runs to different lengths */
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--charcoal);   /* explicit — the card is always white regardless
                                of the section colour behind it, so its text
                                can't just inherit the section's colour */
}

.step-card p {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
}

@media (min-width: 1080px) {
  .step {
    position: relative;
  }

  /* A hairline joining one step to the next, level with the numbers */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.72rem;
    right: -0.9rem;
    width: 0.8rem;
    height: 1px;
    background: var(--grey-line);
  }
}

/* ==========================================================================
   Why transform (comparison)
   ========================================================================== */

.compare-table {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  background: var(--paper);
}

.compare-row.head {
  background: var(--charcoal);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare-row.head div:nth-child(3) {
  font-weight: 700;
  color: var(--brand-light);
}

.compare-row > div {
  padding: 1rem 1.1rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-row:not(.head) > div:first-child {
  color: var(--charcoal-soft);
  font-size: 0.85rem;
}

.compare-row:not(.head) > div:nth-child(3) {
  font-weight: 700;
  color: var(--brand);
  background: var(--white);
}

/* On small screens the row label moves above its two values so the
   comparison stays readable instead of squeezing into three columns. */
@media (max-width: 640px) {
  .compare-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 0;
  }

  .compare-row.head > div:first-child {
    display: none;
  }

  .compare-row > div {
    padding: 0.85rem 0.9rem;
    font-size: 0.84rem;
    align-items: flex-start;
  }

  .compare-row:not(.head) > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey);
  }
}

/* Mid-page call to action */

.inline-cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.inline-cta p {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: clamp(1.05rem, 1.5vw + 0.7rem, 1.35rem);
  color: var(--charcoal);
  max-width: 34ch;
}

/* Phones: the line and the button both sit on the centre. This has to come
   after .inline-cta above, or its space-between wins and the button, alone on
   its wrapped line, gets pushed to the left. */
@media (max-width: 779px) {
  .inline-cta {
    justify-content: center;
    text-align: center;
  }

  .inline-cta p {
    margin-inline: auto;
  }
}

/* ==========================================================================
   What we do
   ========================================================================== */

/* Three across, two rows on a wide screen; the icon is the signature — each
   card earns a distinct glyph rather than repeating a tick six times. */
.what-we-do-grid {
  display: grid;
  align-items: start;   /* the "1-3 days"/"No mess" stack is taller than a
                            single card — without this, grid stretches every
                            card in its row to match, puffing them out */
  gap: 1.5rem;
}

@media (min-width: 700px) {
  .what-we-do-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* "1-3 days" and "No mess" share a grid cell, stacked, rather than each
   being their own top-level card. */
.what-we-do-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.what-we-do-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.75rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.what-we-do-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(20, 26, 31, 0.35);
}

.what-we-do-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-s);
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 1.25rem;
}

/* A little colour variety across the grid instead of six identical blue
   chips — still just the two accents, so it reads as considered rather
   than random. */
.what-we-do-icon--gold {
  background: var(--accent-gold-tint);
  color: var(--accent-gold);
}

.what-we-do-icon--sage {
  background: var(--accent-sage-tint);
  color: var(--accent-sage);
}

.what-we-do-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.what-we-do-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.45rem;
}

.what-we-do-card p {
  font-size: 0.92rem;
  color: var(--charcoal-soft);
}

/* ==========================================================================
   Landlords
   ========================================================================== */

/* A ticked list on colour rather than a third grid of cards */
.landlord-layout {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}

.landlord-cta {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .landlord-layout {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
      "intro  points"
      "cta    points";
    align-items: start;
  }

  .landlord-intro {
    grid-area: intro;
  }

  .landlord-points {
    grid-area: points;
  }

  .landlord-cta {
    grid-area: cta;
    justify-content: flex-start;
  }
}

.landlord-intro .btn {
  margin-top: 2rem;
}

.landlord-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .landlord-points {
    grid-template-columns: 1fr 1fr;
  }
}

.landlord-points li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.4rem 1.1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-m);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.landlord-points svg {
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
  color: var(--white);
}

.landlord-points strong {
  color: var(--white);
  font-weight: 700;
}

/* ==========================================================================
   Materials
   ========================================================================== */

/* This section follows another white one, so a hairline keeps the two from
   reading as one very long block. */
.section--rule {
  border-top: 1px solid var(--line);
}

/* Two columns rather than another row of cards: the argument on one side,
   the specification on the other. */
.materials-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .materials-layout {
    grid-template-columns: 0.95fr 1.05fr;
    /* stretch (the default) rather than start — lets .materials-left grow
       to the row's full height, which is set by the taller specs column,
       so the note box inside it can be pushed down to meet its bottom. */
  }

  /* A flex column so margin-top: auto on the note box can push it all the
     way down to the bottom of the stretched-height wrapper — which, since
     the wrapper matches the grid row's height, lines it up with the bottom
     of the specs list next to it. */
  .materials-left {
    display: flex;
    flex-direction: column;
  }

  .material-note {
    margin-top: auto;
  }
}

.materials-intro .section-lede {
  max-width: 46ch;
}

.material-note {
  margin-top: 2rem;
  background: var(--accent-gold-tint);
  border-radius: var(--radius-m);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  display: grid;
  gap: 0.8rem;
  text-align: center;
}

.material-note-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.material-note p {
  font-size: 0.94rem;
  color: var(--charcoal-soft);
}

/* A specification sheet, hairline-ruled, with the blue tick doing the work */
.spec-list {
  margin: 0;
  border-top: 1px solid var(--line);
}

.spec {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.spec dt {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.spec dt::before {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand);
}

.spec dd {
  margin: 0 0 0 1.25rem;
  font-size: 0.94rem;
  color: var(--charcoal-soft);
}

/* ==========================================================================
   Finishes
   ========================================================================== */

.finishes-figure {
  margin: 0;
  max-width: 40rem;      /* the samples are cut out, so no frame to fill */
  margin-inline: auto;
}

.finishes-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.finishes-figure figcaption {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--charcoal-soft);
  max-width: 48ch;
  margin-inline: auto;
}

/* Still works if the section is ever moved onto a dark background */
.section--charcoal .finishes-figure figcaption {
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Estimator
   ========================================================================== */

.estimator {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .estimator {
    grid-template-columns: 1.35fr 1fr;
    gap: 2rem;
  }
}

.estimator-form {
  background: var(--white);
  border: 1px solid var(--line);
  /* The section behind it is white now, so the card needs a lift of its own */
  box-shadow: 0 24px 50px -34px rgba(20, 26, 31, 0.3);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: 1.75rem;
}

.est-field {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;          /* fieldsets don't shrink without this */
}

.est-field legend {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0;
  margin-bottom: 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--charcoal);
}

.est-step {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.est-options {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.est-options--stack {
  flex-direction: column;
  gap: 0.5rem;
}

/* Two illustrated choices side by side — the drawing does the explaining. */
.est-options--visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.est-option.est-option--visual {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  padding: 1.1rem 0.9rem;
  color: var(--charcoal-soft);
}

.est-option-art {
  display: block;
  width: 54px;
  color: var(--grey);
  transition: color 0.15s ease;
}

.est-option-art svg {
  width: 100%;
  height: auto;
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.est-option.est-option--visual:has(input:checked) .est-option-art {
  color: var(--brand);
}

@media (max-width: 380px) {
  .est-options--visual {
    grid-template-columns: 1fr;
  }
  .est-option.est-option--visual {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: 1rem;
  }
  .est-option-art {
    width: 40px;
  }
}

/* Radio and checkbox inputs stay real for keyboard and screen readers;
   the label around them carries the visuals. */
.est-option input,
.est-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.est-option {
  display: block;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-m);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.est-option:hover {
  border-color: var(--brand);
}

.est-option-body {
  display: grid;
  gap: 0.2rem;
}

.est-option-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.est-option-note {
  font-size: 0.85rem;
  color: var(--charcoal-soft);
}

.est-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.est-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--grey-line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.est-pill:hover {
  border-color: var(--brand);
}

.est-pill:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

.est-option:has(input:focus-visible),
.est-pill:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.est-counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.est-counter-btn {
  width: 42px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--grey-line);
  background: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* Stops iOS Safari treating two fast taps as a double-tap-to-zoom
     gesture — without this, tapping +/- quickly zooms the page in. */
  touch-action: manipulation;
}

.est-counter-btn:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.est-counter-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--charcoal);
  background: transparent;
  border: none;
  padding: 0;
  -moz-appearance: textfield;
}

/* The +/- buttons do the stepping, so the browser's own spinners are noise. */
.est-counter-value::-webkit-outer-spin-button,
.est-counter-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.est-counter-btn {
  flex-shrink: 0;
}


.est-hint {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--grey);
}

.est-subfield {
  margin-top: 1.1rem;
}

.est-subfield label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.est-subfield select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-s);
}

/* Result panel */

.est-result-inner {
  background: var(--charcoal);
  color: var(--white);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

@media (min-width: 900px) {
  .est-result {
    position: sticky;
    top: 5.5rem;
  }
}

.est-result-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.est-result-figure {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.5rem;
  color: var(--white);
}

.est-result-days {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.est-breakdown {
  margin: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.est-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
}

.est-breakdown li span:last-child {
  color: var(--brand-light);
  font-weight: 700;
  white-space: nowrap;
}

.est-included {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.est-included strong {
  color: var(--white);
}

.est-smallprint {
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* Phone-only bar so the figure stays visible while you change the answers.
   It replaces the site-wide booking bar for as long as it's up. */
.est-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--pad);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.est-sticky[data-visible="true"] {
  transform: translateY(0);
}

.est-sticky-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.est-sticky-figure {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--white);
}

body[data-estimator-bar="true"] .mobile-cta {
  display: none;
}

@media (min-width: 900px) {
  .est-sticky {
    display: none;
  }
}

.est-flag {
  display: block;
  width: fit-content;
  margin: 1.5rem auto 0;
  font-size: 0.78rem;
  white-space: normal;
  text-align: center;
}

/* ==========================================================================
   Pricing — used by snippets/pricing-cards.html
   ========================================================================== */

.pricing-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 780px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.price-card--featured {
  border-color: var(--brand);
  box-shadow: 0 24px 48px -30px rgba(70, 139, 106, 0.45);
  position: relative;
}

.price-card--featured::before {
  content: "Most Popular";
  position: absolute;
  top: -0.85rem;
  left: 1.75rem;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 2px;
}

.price-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.price-value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--brand-dark);
}

.price-value .placeholder-text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--brand-dark);
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}

.price-list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--charcoal-soft);
  align-items: flex-start;
}

.price-list svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--brand);
}

.pricing-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grey);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 700px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stars {
  display: flex;
  gap: 0.2rem;
  color: var(--brand);
}

.stars svg {
  width: 1rem;
  height: 1rem;
}

.testimonial-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.testimonial-quote::before {
  content: open-quote;
}
.testimonial-quote::after {
  content: close-quote;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.testimonial-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.testimonial-avatar .img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 0.5rem;
  padding: 0;
}

.testimonial-name {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.9;
}

.testimonial-detail {
  line-height: 1.9;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ==========================================================================
   Guarantee
   ========================================================================== */

.guarantee {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .guarantee {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

/* Gold reads as "certified" in a way the brand blue can't, and it's the
   only warm colour on the page. */
.guarantee-badge {
  width: 8rem;
}

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

/* Centred above the eyebrow on phones, matching the rest of the column's
   centred text there. */
.guarantee-badge--top {
  margin: 0 auto 2.5rem;
}

/* Desktop: the column itself is left-aligned, so the badge sits flush
   with the eyebrow/heading instead of floating centred above them. */
@media (min-width: 900px) {
  .guarantee-badge--top {
    margin: 0 0 1.75rem;
  }
}

.guarantee-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 480px) {
  .guarantee-list {
    grid-template-columns: 1fr 1fr;
  }
}

.guarantee-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.4rem 1.1rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-m);
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.guarantee-list svg {
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
  color: var(--white);
}

/* ==========================================================================
   About
   ========================================================================== */


.about {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* Text-only until there's a photo to sit beside it. Defined after .about so
   it overrides the two-column grid. */
.about.about--text {
  display: block;
  max-width: 46rem;
}

.about.about--text .about-bio {
  font-size: 1.05rem;
}

.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  max-width: 320px;
}

.about-photo .img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-l);
}

.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.25rem, 2.2vw + 0.5rem, 1.6rem);
  line-height: 1.4;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
}

.about-name {
  font-weight: 700;
}

.about-role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-top: 0.2rem;
}

.about-bio {
  margin-top: 1.25rem;
  color: var(--charcoal-soft);
  max-width: 56ch;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.35rem 0.25rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--charcoal);
}

.faq-question svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  color: var(--brand);
  transition: transform 0.2s ease, color 0.2s ease;
}

.faq-item[data-open="true"] .faq-question svg {
  color: var(--accent-gold);
  transform: rotate(45deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  padding: 0 0.25rem 1.4rem;
  color: var(--charcoal-soft);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* ==========================================================================
   Booking form
   ========================================================================== */

.booking {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 940px) {
  .booking {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.booking-aside .section-title {
  font-size: clamp(1.9rem, 3vw + 1rem, 2.4rem);
}

.booking-points {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.booking-points li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--charcoal-soft);
}

.booking-points svg {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  color: var(--brand);
  margin-top: 0.1em;
}

/* Three ways to get in touch, as tappable rows inside one card. The icon
   sits in a fixed-size tinted box rather than floating loose, so all three
   rows line up on a column whatever shape the icon is. */
.contact-list {
  margin-top: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;         /* keeps the row hover fill inside the corners */
}

/* Desktop: the survey form on the right is taller than the copy on the
   left, so push the contact card down to sit flush with the form's own
   bottom edge instead of floating right under the lede. */
@media (min-width: 940px) {
  .booking-aside {
    display: flex;
    flex-direction: column;
  }

  .contact-list {
    margin-top: auto;
  }
}

.contact-list li + li {
  border-top: 1px solid var(--line);
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--charcoal);
  transition: background 0.15s ease;
}

.contact-list a:hover {
  background: var(--paper-dim);
}

.contact-list a:hover .contact-icon {
  background: var(--brand);
  color: var(--white);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  transition: background 0.15s ease, color 0.15s ease;
}

.contact-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.contact-text {
  flex: 1;
  min-width: 0;
}

.contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

.contact-value {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  word-break: break-word;
}

.contact-chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--grey);
}

.booking-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 1.5rem;
  display: block;
}

.form-row {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 560px) {
  .form-row--split {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  min-width: 0;   /* let the column shrink past the input's natural width */
}

.field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--charcoal);
}

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

.field input,
.field select,
.field textarea {
  /* Without this an input keeps its default ~20-character width and drags
     the whole page wider than the screen. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85em 1em;
  border: 1px solid var(--grey-line);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--charcoal);
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.form-disclaimer {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--grey);
  text-align: center;
}

.form-error {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: #b3261e;
}

.form-error a {
  text-decoration: underline;
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}

.form-success[data-visible="true"] {
  display: block;
}

.form-success svg {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--brand);
  margin-bottom: 1rem;
}

.form-success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.form-success p {
  color: var(--charcoal-soft);
  font-size: 0.92rem;
}

.booking-form[data-submitted="true"] .booking-form-fields {
  display: none;
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */

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

.final-cta .section-title {
  max-width: 20ch;
  margin-inline: auto;
}

.final-cta .btn {
  margin-top: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.75);
  padding-block: 3.5rem 2rem;
}

/* Stacked below the breakpoint, three columns evenly spread above it — one
   clean jump rather than letting flex-wrap create a lopsided two-then-one
   state in between. */
.footer-top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 860px) {
  .footer-top {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-logo img {
  height: 48px;
  width: auto;   /* the width attribute would otherwise stretch it */
}

.footer-tagline {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  max-width: 34ch;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 1rem;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.92rem;
}

.footer-list a {
  text-decoration: none;
}

.footer-list a:hover {
  color: var(--paper);
}

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem var(--pad);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  background: var(--charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.mobile-cta[data-visible="true"] {
  transform: translateY(0);
}

.mobile-cta .btn {
  flex-grow: 1;
}

.mobile-cta .btn-ghost {
  color: var(--paper);
}

.mobile-cta .btn-ghost:hover {
  background: var(--paper);
  color: var(--charcoal);
}

.mobile-cta-icon {
  flex-grow: 0;
  flex-shrink: 0;
  width: 2.9rem;
  padding: 0;
}

.mobile-cta-icon svg {
  width: 1.25em;
  height: 1.25em;
}

@media (max-width: 779px) {
  /* Room for the sticky bar so it never sits on top of the footer. */
  body {
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 780px) {
  .mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   Scroll-reveal (mobile only)
   ========================================================================== */

/* Content fades and lifts in as it's scrolled into view — phones only,
   since it's a scroll-driven effect that mainly reads on a tall, one-column
   layout. .is-visible is added by IntersectionObserver in js/script.js. */
@media (max-width: 779px) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ---- Flip the switch (hero) ---------------------------------------------
   The "before" photo sits dim and desaturated with the lights off. Flipping
   the wall switch fades the "after" photo in at full brightness. State lives
   in data-state on .switch-hero ("off" | "on"), set from js/script.js. */

.switch-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* Air between the photo and the switch. */
}

.wall-switch {
  margin-top: 0.75rem;
}

.switch-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--charcoal);
}

.switch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease, filter 0.7s ease;
}

.switch-img--before {
  filter: brightness(0.5) saturate(0.45);
}

.switch-img--after {
  opacity: 0;
  filter: brightness(0.9);
}

.switch-hero[data-state="on"] .switch-img--after {
  opacity: 1;
  filter: brightness(1);
}

.switch-tag {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20, 26, 31, 0.75);
  color: var(--white);
  padding: 0.3em 0.6em;
  border-radius: 2px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.switch-tag--after,
.switch-hero[data-state="on"] .switch-tag--before {
  opacity: 0;
}

.switch-hero[data-state="on"] .switch-tag--after {
  opacity: 1;
}

.wall-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wall-switch:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 6px;
  border-radius: 12px;
}

.wall-switch-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  aspect-ratio: 1 / 1.45;
  background: #f4f2ee;
  border-radius: 10px;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--grey-line);
}

.wall-switch-rocker {
  position: relative;
  width: 44%;
  height: 72%;
  background: #8b9298;
  border-radius: 3px;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  transform-origin: 50% 50%;
}

/* The white slot echoes the switch in the logo. It sits low when the switch
   is off and rides up when it is on. */
.wall-switch-slot {
  position: absolute;
  left: 22%;
  width: 56%;
  height: 34%;
  bottom: 12%;
  background: #f4f2ee;
  border-radius: 1px;
  transition: bottom 0.3s ease;
}

.switch-hero[data-state="on"] .wall-switch-rocker {
  background: var(--brand);
  box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.14), 0 0 22px 4px rgba(70, 139, 106, 0.6);
}

.switch-hero[data-state="on"] .wall-switch-slot {
  bottom: 54%;
}

.wall-switch-cue {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A soft pulse invites the first flip. */
.switch-hero[data-state="off"] .wall-switch-plate {
  animation: switch-invite 2.2s ease-in-out infinite;
}

@keyframes switch-invite {
  0%, 100% { box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(70, 139, 106, 0.7); }
  50%      { box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(70, 139, 106, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .switch-hero[data-state="off"] .wall-switch-plate {
    animation: none;
  }

  .switch-img,
  .wall-switch-rocker,
  .wall-switch-slot,
  .switch-tag {
    transition: none;
  }
}

/* ---- Desktop hero tweaks -------------------------------------------------
   Phones keep the stacked layout above. From 900px the switch moves to the
   right of the photo and the copy block sits a little higher. */
@media (min-width: 900px) {
  /* The hero fills the first screen: everything below the header. */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    justify-content: center;
  }

  .hero-copy {
    transform: translateY(-2.5rem);
  }

  .switch-hero {
    flex-direction: row;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .switch-photo {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .wall-switch {
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* Desktop: no photo or switch — just the copy, centred in the full-screen hero. */
@media (min-width: 900px) {
  .hero-compare {
    display: none;
  }

  .hero .container {
    grid-template-columns: 1fr;
    grid-template-areas: "copy";
    justify-items: center;
  }

  .hero-copy {
    align-items: center;
    text-align: center;
    transform: none;
  }
}