/*
|| RESET
*/

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

body {
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  overflow-wrap: break-word;
}

/*
|| TOKENS — mirror of docs/DESIGN.md. Change there first.
*/

:root {
  --colour-ink: #0e4377;
  --colour-bg: #ffffff;
  --colour-bg-near-black: #050505;
  --colour-bg-navy: #16375a;
  --colour-accent: #48aadb;
  /* Same blue darkened to 36% lightness — the bright accent is only
     2.3:1 on --colour-surface, so accent *text* on light uses this. */
  --colour-accent-ink: #1e7099;
  --colour-surface: #f0f0f0;
  /* Darker than the sampled #c3c3c3 — that value fails contrast on white for body text. */
  --colour-muted: #6b6b6b;
  --colour-white: #ffffff;

  /* Michroma ships weight 400 only — heading rules don't set font-weight. */
  --font-display: "Michroma", sans-serif;
  --font-body: "Inter", sans-serif;

  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 5rem;

  --radius-card: 12px;
  --radius-pill: 999px;

  --measure: 65ch;

  /* Fluid type scale: scales continuously between the mobile and desktop
     sizes in docs/DESIGN.md's Type scale table, over a 400px–1440px
     viewport range (1440 matches the mock's sampled width), instead of
     jumping at a single breakpoint. */
  --font-size-h1: clamp(2rem, 1.5192rem + 1.9231vw, 3.25rem);
  --font-size-h2: clamp(1.625rem, 1.3365rem + 1.1538vw, 2.375rem);

  /* Subtle accent bleed over the navy sections (gallery, footer) — kept
     as a translucent overlay rather than a full navy-to-accent sweep so
     footer text stays comfortably above contrast minimums. */
  --gradient-navy-accent: linear-gradient(
      135deg,
      color-mix(in srgb, var(--colour-accent) 35%, transparent) 0%,
      transparent 55%
    ),
    var(--colour-bg-navy);
}

/*
|| BASE
*/

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--colour-ink);
  background: var(--colour-bg);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.1;
}

/* No underline on any link, anywhere — per-component hover treatments
   (nav-link, text-link, button) supply their own feedback instead. */
a {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

/*
|| UTILITIES
*/

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

/* Single source of truth for standard section spacing — change here,
   every section using it changes together. Hero, trust strip, and
   footer have genuinely different spacing so they don't use this. */
.section {
  padding-block: var(--space-xl);
  padding-inline: var(--space-m);
  /* Keeps jump-link targets clear of the fixed header on scroll. */
  scroll-margin-block-start: var(--space-xl);
}

/* Single source of truth for section-heading measure — every H2 wraps
   at the same width instead of each section picking its own. */
.section-intro {
  max-width: 55ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-l);
}

/* Reveal-on-scroll: static by default, animated only when JS opts in
   and the user hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 0.6s ease, translate 0.6s ease;
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

/*
|| SITEWIDE
*/

/* Sticky nav: hidden over the hero, revealed once it scrolls out of
   view (see js/main.js). Transform/opacity only — no layout shift. */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: var(--colour-bg-near-black);
  padding: var(--space-s) var(--space-m);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
}

.site-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Pages with no hero (privacy) have nothing for the reveal to key off,
   so the bar is permanently visible there — and sticky rather than
   fixed, so it takes up layout space and the page below needs no
   compensating top padding. */
.site-header--pinned {
  position: sticky;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.site-header__nav {
  position: relative;
  display: flex;
  align-items: center;
  /* Pins the burger to the far edge on mobile: the panel is position:
     absolute there (out of flow), so without this the toggle would sit
     right next to the logo instead of at the opposite end of the bar. */
  justify-content: space-between;
  gap: var(--space-m);
  max-width: 1200px;
  margin-inline: auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--colour-white);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.site-header__logo-mark {
  color: var(--colour-white);
}

/* Burger toggle: hidden until JS confirms it can drive the panel (see
   .js on <html>, js/main.js) — a button that does nothing is worse than
   no button. Hidden again at 700px+, where the bar has room for the
   links and CTA inline instead. Both rules re-declared inside the
   min-width query at the same `.js …` specificity so they win on source
   order rather than losing to the mobile rule below them. */
.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
}

.js .site-header__toggle {
  display: inline-flex;
}

@media (min-width: 700px) {
  .js .site-header__toggle {
    display: none;
  }
}

.site-header__toggle-bar {
  width: 1.25rem;
  height: 1.5px;
  background: var(--colour-white);
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__toggle-bar {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
}

/* Open state driven entirely by aria-expanded — one source of truth for
   assistive tech and the visuals, no separate JS-managed class. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Panel: visible by default so the menu still works with JS disabled
   (see CLAUDE.md progressive enhancement rule) — .js collapses it, the
   toggle's aria-expanded state reopens it. Becomes the plain inline bar
   again at 700px+, regardless of JS or open state. */
.site-header__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-l);
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--colour-bg-near-black);
  padding: var(--space-l) var(--space-m);
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.js .site-header__panel {
  display: none;
}

.js .site-header__toggle[aria-expanded="true"] ~ .site-header__panel {
  display: flex;
}

@media (min-width: 700px) {
  .site-header__panel,
  .js .site-header__panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    background: none;
    padding: 0;
    border: none;
    flex: 1;
    min-width: 0;
  }
}

.site-header__links {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .site-header__links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
  }
}

.nav-link {
  display: inline-block;
  color: var(--colour-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: letter-spacing 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.nav-link:hover,
.nav-link:focus-visible {
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.site-footer {
  background: var(--gradient-navy-accent);
  color: var(--colour-white);
  padding: var(--space-xl) var(--space-m) var(--space-l);
  /* Footer is the Contact nav link's target — same header clearance the
     .section utility gives every other jump target. */
  scroll-margin-block-start: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-footer__col p + p {
  margin-block-start: var(--space-m);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-block-end: var(--space-s);
}

/* Companies Act trading disclosure — a limited company has to show its
   registered name, number, place of registration, and office address on
   the site, so it lives in the footer and appears on every page. Fine
   print by intent: legally required, but not what anyone came to read. */
.site-footer__legal {
  max-width: 55ch;
  font-size: 0.8rem;
  color: var(--colour-surface);
}

.site-footer__instagram-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--colour-white);
}

.site-footer__bottom {
  /* Stretched to the footer's full width so the divider still spans it,
     even though the column above is centred. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-display);
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--colour-surface);
  text-align: center;
  padding-block-start: var(--space-l);
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__bottom p {
  margin: 0;
}

@media (min-width: 768px) {
  /* Copyright flush left, credit line true-centred in its own track,
     Instagram icon flush right. */
  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }

  .site-footer__copyright {
    grid-column: 1;
  }

  .site-footer__credit {
    grid-column: 2;
    text-align: center;
  }

  .site-footer__instagram-icon {
    grid-column: 3;
    justify-self: end;
  }
}

/*
|| BUTTONS (shared across sections)
*/

.button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid transparent;
  width: fit-content;
}

.button--outline {
  background: transparent;
  border-color: var(--colour-ink);
  color: var(--colour-ink);
}

.button--outline:hover {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.button--fill {
  background: var(--colour-accent);
  color: var(--colour-bg-near-black);
  width: 100%;
  justify-content: center;
}

.button--fill:hover {
  filter: brightness(0.95);
}

/* Arrow is hidden and zero-width at rest, reveals on hover/focus across
   every button — component-wide, not styled per instance. */
.button__arrow {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: no-preference) {
  .button__arrow {
    transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out,
      transform 0.25s ease-in-out, margin-inline-start 0.25s ease-in-out;
  }
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
  width: 1em;
  opacity: 1;
  transform: translateX(0);
  margin-inline-start: var(--space-s);
}

/* Full-width like any other .button--fill while it sits in the mobile
   burger panel — bigger tap target, consistent with the rest of the
   site. Sized to its own label only once it's back in the inline
   700px+ bar, where full-width would stretch across the header. */
@media (min-width: 700px) {
  .site-header__cta {
    flex-shrink: 0;
    width: fit-content;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
  }
}

/*
|| CARDS (shared across sections)
*/

.card {
  border-radius: var(--radius-card);
}

.card--surface {
  background: var(--colour-surface);
}

/* Darker + blurred backing keeps text legible over busy background
   photos (process, features). */
.card--dark {
  background: rgba(5, 5, 5, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/*
|| LINKS (shared across sections)
*/

.text-link {
  color: var(--colour-ink);
  transition: opacity 0.2s ease-in-out;
}

.text-link:hover,
.text-link:focus-visible {
  opacity: 0.7;
}

/* Accent only where it passes 4.5:1 — it does on the near-black/navy
   backgrounds this modifier is used on (~8:1 / ~4.7:1), fails on white
   (~2.6:1), so plain .text-link keeps the ink colour there instead. */
.text-link--on-dark {
  color: var(--colour-accent);
}

/*
|| COOKIE NOTICE (sitewide)
*/

.cookie-notice {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--colour-bg-near-black);
  border-block-start: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--colour-white);
  font-size: 0.85rem;
}

@media (min-width: 600px) {
  .cookie-notice {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-l);
    padding-inline: var(--space-l);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-notice {
    animation: cookie-notice-rise 0.4s ease-out;
  }

  @keyframes cookie-notice-rise {
    from {
      translate: 0 100%;
    }
  }
}

.cookie-notice__text {
  max-width: var(--measure);
  text-align: center;
}

@media (min-width: 600px) {
  .cookie-notice__text {
    text-align: start;
  }
}

.cookie-notice__actions {
  display: flex;
  gap: var(--space-m);
  flex-shrink: 0;
}

/* Accept and Decline carry equal visual weight by design — a
   de-emphasised Decline is a dark pattern (see DESIGN.md #24). */
.cookie-notice__actions .button {
  width: fit-content;
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
}

.cookie-notice__actions .button--outline {
  border-color: var(--colour-white);
  color: var(--colour-white);
}

.cookie-notice__actions .button--outline:hover {
  background: var(--colour-white);
  color: var(--colour-bg-near-black);
}

/* Footer "Cookies" control — a button because it reopens the notice
   rather than navigating, styled to sit inline with the links beside it. */
.cookie-settings {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/*
|| HERO
*/

.hero {
  position: relative;
  overflow: hidden;
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  background: var(--colour-bg-near-black);
  color: var(--colour-white);
}

.hero__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.75) 0%,
    rgba(5, 5, 5, 0.1) 28%,
    rgba(5, 5, 5, 0.35) 50%,
    rgba(5, 5, 5, 0.94) 100%
  );
}

.hero__logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding-block-start: var(--space-l);
}

.hero__logo img {
  color: var(--colour-white);
}

.hero__wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.hero__content {
  position: relative;
  z-index: 2;
  /* Equal auto margins centre this vertically in the space left below
     the logo, rather than pinning it to the hero's bottom edge. */
  margin-block: auto;
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-m);
}

.hero__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  line-height: 1.1;
}

.hero__body {
  font-size: 1.125rem;
  max-width: 32ch;
}

.hero__cta {
  /* .button--fill defaults to full-width for form contexts; the hero
     CTA should size to its own label instead. */
  width: fit-content;
}

@media (min-width: 768px) {
  .hero__heading {
    /* Constrained so the heading breaks onto two lines ("...Valeting" / "& Detailing"), as in the mock, rather than spanning full width. */
    max-width: 660px;
  }

  .hero__body {
    font-size: 1.25rem;
  }
}

/*
|| TRUST STRIP
*/

.trust-strip {
  background: var(--colour-bg-near-black);
  color: var(--colour-white);
  font-family: var(--font-display);
  padding: var(--space-l);
}

.trust-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  font-size: 0.9rem;
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .trust-strip__list {
    flex-direction: row;
    justify-content: space-between;
  }
}

/*
|| SERVICES
*/

.services {
  background: var(--colour-bg);
}

.services__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--colour-ink);
  margin-block-end: var(--space-s);
}

.services__subhead {
  color: var(--colour-ink);
}

.service-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  max-width: 1200px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .service-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.service-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* order: -1 puts the image first regardless of DOM order, so all four
   cards lead with a photo on mobile — matches the two `--reverse` cards,
   which already had the image first in markup. Reset at 500px+, where
   flex-direction: row/row-reverse (below) takes over and DOM order is
   what alternates which side the photo sits on. */
.service-card__image {
  order: -1;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.service-card__text {
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

@media (min-width: 500px) {
  .service-card {
    flex-direction: row;
  }

  .service-card--reverse {
    flex-direction: row-reverse;
  }

  .service-card__image {
    order: 0;
    width: 45%;
    height: auto;
  }

  .service-card__text {
    flex: 1;
  }
}

.service-card__title {
  font-family: var(--font-display);
  color: var(--colour-ink);
  font-size: 1.3rem;
}

.service-card__price {
  color: var(--colour-accent-ink);
  font-weight: 700;
}

.service-card__description {
  color: var(--colour-ink);
}

.service-card__meta {
  color: var(--colour-muted);
  font-size: 0.9rem;
}

.service-card .button {
  margin-block-start: var(--space-s);
}

/*
|| GALLERY / BEFORE-AFTER
*/

.gallery {
  background: var(--gradient-navy-accent);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.before-after--wide {
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}

.before-after-row {
  display: grid;
  gap: var(--space-m);
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 700px) {
  .before-after-row {
    grid-template-columns: 1fr 1fr;
  }
}

.before-after {
  position: relative;
  border: 6px solid var(--colour-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  touch-action: pan-y;
}

.before-after__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after__image--after {
  clip-path: inset(0 0 0 50%);
}

/* Fixed corner labels, independent of the divider — a client-requested
   cue so it's unambiguous which side is which without having to first
   understand the drag interaction. pointer-events: none keeps them out
   of the divider's drag hit-testing regardless of stacking order. */
.before-after__label {
  position: absolute;
  inset-block-start: var(--space-s);
  background: rgba(5, 5, 5, 0.6);
  color: var(--colour-white);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.before-after__label--before {
  inset-inline-start: var(--space-s);
}

.before-after__label--after {
  inset-inline-end: var(--space-s);
}

/* inset-inline-start: 50% is the no-JS/initial-paint default only. With
   JS active, initBeforeAfter() (js/main.js) clamps this element's
   rendered position a few px inside the true 0-100% range so the handle
   never sits close enough to this container's overflow: hidden edge to
   get clipped — the underlying image's clip-path still runs the full
   true range regardless. */
.before-after__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 3px;
  background: var(--colour-white);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flex-shrink: 0 — without it the browser squeezes this down to fit its
   SVG content (~20px) instead of the declared 36px, because it's a flex
   child of the 3px-wide .before-after__divider. That collapsed the drag
   target into a thin sliver everywhere, worst at the clipped edges
   (client-reported: dragging fully to one side made it ungrabbable). */
.before-after__handle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--colour-white);
  color: var(--colour-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
|| PROCESS
*/

.process {
  background-color: var(--colour-bg-near-black);
  /* Photo is already near-black; a light scrim keeps card text legible without hiding it. */
  background-image: linear-gradient(rgba(5, 5, 5, 0.6), rgba(5, 5, 5, 0.6)),
    url("/images/process-background.jpg");
  background-size: cover;
  background-position: center;
  color: var(--colour-white);
}

.process__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  margin-block-end: var(--space-s);
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 640px;
  margin-inline: auto;
}

.process-step {
  padding: var(--space-m) var(--space-l);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-block-end: var(--space-s);
}

.process-step__body {
  color: var(--colour-muted);
}

/*
|| PRICING
*/

.pricing {
  background: var(--colour-bg);
}

.pricing__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--colour-ink);
  margin-block-end: var(--space-s);
}

.pricing__subhead {
  color: var(--colour-ink);
}

.price-tables {
  display: grid;
  gap: var(--space-m);
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .price-tables {
    grid-template-columns: 1fr 1fr;
  }
}

.price-table {
  padding: var(--space-l);
}

.price-table__title {
  font-family: var(--font-display);
  color: var(--colour-ink);
  margin-block-end: var(--space-m);
}

.price-table__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.price-table__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  color: var(--colour-ink);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid rgba(14, 67, 119, 0.12);
}

.price-table__row:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.price-table__row dt {
  font-weight: 400;
}

/* nowrap + no shrink: without these the price wraps onto two lines
   whenever its row's label is long enough to squeeze it (e.g. "Smoke or
   odour treatment") — the label may still wrap, the price never should. */
.price-table__row dd {
  margin: 0;
  color: var(--colour-accent-ink);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.pricing__disclaimer {
  text-align: center;
  color: var(--colour-muted);
  font-size: 0.85rem;
  max-width: 60ch;
  margin: var(--space-l) auto 0;
}

/*
|| FEATURES
*/

.features {
  background-color: var(--colour-bg-near-black);
  background-image: linear-gradient(rgba(5, 5, 5, 0.6), rgba(5, 5, 5, 0.6)),
    url("/images/features-background.jpg");
  background-size: cover;
  background-position: center;
  color: var(--colour-white);
}

.features__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
}

.feature-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .feature-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-card {
  padding: var(--space-l);
}

.feature-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-block-end: var(--space-s);
}

.feature-card__body {
  color: var(--colour-muted);
}

/*
|| BOOKING
*/

.booking {
  background: var(--colour-bg);
}

.booking__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  color: var(--colour-ink);
  margin-block-end: var(--space-s);
}

.booking__subhead {
  color: var(--colour-ink);
}

.booking-panels {
  display: grid;
  gap: var(--space-m);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 800px) {
  .booking-panels {
    grid-template-columns: 1fr 1fr;
  }
}

.booking-panel {
  padding: var(--space-l);
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.booking-form__status {
  background: var(--colour-bg);
  border: 1px solid var(--colour-ink);
  border-radius: var(--radius-card);
  padding: var(--space-s) var(--space-m);
  color: var(--colour-ink);
  font-size: 0.9rem;
}

.booking-form__row {
  display: grid;
  gap: var(--space-m);
}

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

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--colour-ink);
  font-size: 0.9rem;
}

.booking-form__field input,
.booking-form__field select {
  border: 1px solid rgba(14, 67, 119, 0.35);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  background: var(--colour-bg);
  font-size: 1rem;
}

/* Native select chrome differs per OS, so the arrow is drawn here to
   match the text inputs' height and border on every browser. */
.booking-form__field select {
  appearance: none;
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e4377' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  color: var(--colour-ink);
  font-family: var(--font-body);
}

/* Spam trap — off-screen rather than display: none, which some bots
   skip. Never focusable: the input carries tabindex="-1". */
.booking-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-form__privacy {
  text-align: center;
  color: var(--colour-muted);
  font-size: 0.8rem;
}

.booking-panel--contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--colour-ink);
}

.contact-block__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.contact-block__tag {
  color: var(--colour-accent-ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
}

/*
|| LEGAL PAGE (privacy)
*/

.legal {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--colour-ink);
}

.legal__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  margin-block-end: var(--space-m);
}

.legal__updated {
  color: var(--colour-muted);
  font-size: 0.85rem;
  margin-block-end: var(--space-l);
}

.legal__section-heading {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-block: var(--space-l) var(--space-s);
}

.legal p,
.legal ul {
  margin-block-end: var(--space-m);
}

.legal ul {
  padding-inline-start: var(--space-l);
}

/* Page sections follow below, one labelled block each, in page order. */