/* ==========================================================================
   Evergreen Landscapes — design tokens
   Source: Figma "LBG Portfolio - Lawn Version 1", frames 5:4943 (desktop)
   and 285:1882 (mobile), read via get_variable_defs. Values are verbatim.

   NOTE: these supersede the older styles.js export, which drifts on several
   colours and omits the five shadow effects. See TOKEN-DRIFT.md.

   Type and line-height interpolate between the file's mobile and desktop
   modes with clamp() across 360px-1440px: exact at both ends.
   ========================================================================== */

:root {
  /* Brand */
  --primary: #09511f;
  --primary-muted: #09511f99;
  --secondary: #5dbb3f;
  --accent: #ffb800;

  /* Neutrals */
  --white: #ffffff;
  --neutral-500: #6b7280;
  --neutral-900: #0a0a0a;
  --warm-50: #f3f3ee;
  --warm-100: #ecede9;
  --warm-border: #c2c4c9;

  /* Alpha overlays */
  --white-90: #ffffffe5;
  --white-80: #ffffffcc;
  --white-70: #ffffffb2;
  --white-50: #ffffff80;
  --white-40: #ffffff66;
  --white-20: #ffffff33;
  --white-10: #ffffff1a;
  --black-50: #0a0a0a80;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f9fafb;
  --bg-warm: #ecede9;

  /* Text */
  --text: #09511f;
  --text-secondary: #4a5565;
  --text-tertiary: #364153;
  --text-inverse: #ffffff;
  --text-muted: #99a1af;

  /* Borders */
  --border: #e5e7eb;
  --border-subtle: #f3f4f6;
  --border-medium: #d1d5dc;
  --border-strong: #6b7280;

  /* Shadows */
  --shadow-card: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-dropdown: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-floating: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --shadow-elevated: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --shadow-overlay: 0 25px 50px -12px #00000040;

  /* Spacing */
  --space-none: 0; /* 0px */
  --space-3xs: 0.125rem; /* 2px */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.375rem; /* 6px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 0.625rem; /* 10px */
  --space-base: 0.75rem; /* 12px */
  --space-lg: 1rem; /* 16px */
  --space-xl: 1.25rem; /* 20px */
  --space-2xl: 1.5rem; /* 24px */
  --space-3xl: 2rem; /* 32px */
  --space-4xl: 2.5rem; /* 40px */
  --space-5xl: 3rem; /* 48px */
  --space-6xl: 3.75rem; /* 60px */
  --space-7xl: 4rem; /* 64px */
  --space-8xl: 5rem; /* 80px */
  --space-section: 8.125rem; /* 130px */

  /* Radius / stroke */
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --stroke-thin: 1px;

  /* Fonts */
  --font-heading: "Arsenal", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Font sizes (fluid) */
  --text-hero: clamp(2.25rem, 1.8333rem + 1.8519vw, 3.5rem); /* 36 -> 56px */
  --h1: clamp(1.875rem, 1.625rem + 1.1111vw, 2.625rem); /* 30 -> 42px */
  --h3: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem); /* 22 -> 28px */
  --h4: clamp(1.25rem, 1.2083rem + 0.1852vw, 1.375rem); /* 20 -> 22px */
  --text-l: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem); /* 17 -> 18px */
  --text-m: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem); /* 15 -> 16px */
  --text-s: 0.875rem; /* 14 -> 14px */
  --text-nav: 0.875rem; /* 14 -> 14px */
  --text-btn: 1rem; /* 16 -> 16px */
  --text-label-l: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 -> 18px */
  --text-label-m: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem); /* 15 -> 16px */
  --text-label-s: clamp(
    0.8125rem,
    0.7917rem + 0.0926vw,
    0.875rem
  ); /* 13 -> 14px */
  --text-eyebrow: clamp(
    0.8125rem,
    0.7917rem + 0.0926vw,
    0.875rem
  ); /* 13 -> 14px */
  --text-caption: 0.75rem; /* 12 -> 12px */

  /* Line heights (fluid) */
  --lh-hero: clamp(2.625rem, 2.1458rem + 2.1296vw, 4.0625rem); /* 42 -> 65px */
  --lh-h1: clamp(2.25rem, 1.9167rem + 1.4815vw, 3.25rem); /* 36 -> 52px */
  --lh-h3: clamp(1.75rem, 1.6667rem + 0.3704vw, 2rem); /* 28 -> 32px */
  --lh-h4-tight: clamp(1.5rem, 1.4583rem + 0.1852vw, 1.625rem); /* 24 -> 26px */
  --lh-h4-loose: clamp(1.5rem, 1.4167rem + 0.3704vw, 1.75rem); /* 24 -> 28px */
  --lh-l: clamp(1.625rem, 1.5833rem + 0.1852vw, 1.75rem); /* 26 -> 28px */
  --lh-m: clamp(1.5rem, 1.4583rem + 0.1852vw, 1.625rem); /* 24 -> 26px */
  --lh-m-tight: clamp(1.375rem, 1.3333rem + 0.1852vw, 1.5rem); /* 22 -> 24px */
  --lh-s: 1.25rem; /* 20 -> 20px */
  --lh-s-relaxed: 1.375rem; /* 22 -> 22px */
  --lh-s-compact: 1.2188rem; /* 19.5 -> 19.5px */
  --lh-label-l: clamp(1.5rem, 1.4583rem + 0.1852vw, 1.625rem); /* 24 -> 26px */
  --lh-nav: clamp(1.375rem, 1.3646rem + 0.0463vw, 1.4062rem); /* 22 -> 22.5px */
  --lh-caption: 1rem; /* 16 -> 16px */
  --lh-caption-relaxed: 1.2188rem; /* 19.5 -> 19.5px */

  /* Letter spacing (constant across modes) */
  --ls-heading: 0.3691px;
  --ls-body: -0.1504px;
  --ls-body-tight: -0.3125px;
  --ls-label-tight: -0.4395px;
  --ls-caption-wide: 0.3px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  background: var(--bg);
  background-color: var(--warm-50);
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Label for the newsletter input: the design shows only a placeholder, which
   is not a label for assistive tech. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--stroke-thin) solid var(--accent);
  outline-offset: 3px;
}

/* Self-hosted fonts; Inter is a variable font. */
@font-face {
  font-family: "Arsenal";
  src: url("assets/fonts/Arsenal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arsenal";
  src: url("assets/fonts/Arsenal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-VariableFont-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Layout primitives — Bricks-style section > container
   --------------------------------------------------------------------------
   .lbg-section   full-bleed band. Owns vertical rhythm and background.
   .lbg-container centres content at 1440 and owns the horizontal padding.

   The 1440 is the OUTER box: it includes the 16px inner padding, so content
   sits at 1408. That matches the Figma container (w-1440, px-16) and means
   the header bar — which is 1440 edge to edge — is itself a container rather
   than something nested inside one.
   ========================================================================== */

:root {
  --content-max: 90rem; /* 1440px */

  /* The horizontal gutter and the sections' vertical rhythm are variables so
     the breakpoints can retune them once rather than per component. The
     carousel inset reads --gutter too, so a track never drifts out of line
     with the heading above it. */
  --gutter: var(--space-lg); /* 16px */
  --section-y: var(--space-8xl); /* 80px */
  --section-y-tight: var(--space-4xl); /* 40px */
}

.lbg-section {
  position: relative;
  width: 100%;
}

/* The header is fixed, so an anchored section would otherwise land under it. */
.lbg-section[id] {
  scroll-margin-top: 7rem;
}

.lbg-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Header  (Figma 5:4949 — floats over the hero, does not push it down)
   ========================================================================== */

.site-header {
  position: fixed;
  z-index: 10;
  top: var(--space-xl); /* y=20 */
  left: 0;
  right: 0;
  padding-inline: var(--gutter);
  transition: translate var(--dur) var(--ease);
}

/* Set by the scroll handler: past 300px and still heading down. The extra
   --space-xl clears the bar's own top offset so it leaves cleanly. */
.site-header[data-hidden] {
  translate: 0 calc(-100% - var(--space-xl));
}

/* The bar is the container: 1440 wide, flush with the section edge.
   Its horizontal padding comes from .lbg-container. */
.site-header__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  background: var(--black-50);
  border: var(--stroke-thin) solid var(--white-20);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}

.site-header__nav {
  width: 100%;
  padding: var(--space-base) var(--space-lg);
  /* Effect/Floating, applied as drop-shadow so it follows the glyph edges
     the way the Figma layer effect does, not the box. */
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))
    drop-shadow(0 10px 7.5px rgb(0 0 0 / 0.1));
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* --- brand ---------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
}

/* The source image is cropped inside the circle in Figma: scaled to 136.3%
   and nudged up/left. Reproduced rather than object-fit:cover, which would
   centre it and lose the crop. */
.brand__mark img {
  width: 136.3%;
  height: 136.3%;
  max-width: none;
  margin-left: -18.15%;
  margin-top: -15.54%;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-l);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-label-tight);
  color: var(--text-inverse);
}

.brand__sub {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption-wide);
  color: var(--text-inverse);
}

/* --- nav toggle (no Figma source — Bricks-style hamburger) ---------------- */

/* Declared here, with the rest of the header, rather than after the
   responsive block: media-query rules carry no extra specificity, so a later
   `display: none` beat the breakpoint's `display: flex` and the hamburger
   never rendered. Anything that a breakpoint overrides has to be declared
   before it. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-inverse);
  flex-shrink: 0;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

/* --- primary nav ---------------------------------------------------------- */

.nav {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--weight-medium);
  font-size: var(--text-nav);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-body);
  color: var(--text-inverse);
  white-space: nowrap;
}

.nav__link svg {
  width: 14px;
  height: 14px;
}

/* --- CTA ------------------------------------------------------------------ */

/* Lives in the collapsed menu and only appears once .btn-quote is dropped. */
.nav__cta-item {
  display: none;
}

.btn-quote {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  background: var(--primary);
  font-size: var(--text-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-body);
  color: var(--text-inverse);
  white-space: nowrap;
}

/* ==========================================================================
   Hero  (Figma 5:5014)
   --------------------------------------------------------------------------
   Full-bleed photo with the content column bottom-aligned over it. The frame
   is 792.9 tall; the photo layer is 1680x944 anchored to the bottom edge, so
   it crops from the top as the viewport narrows.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 49.5563rem; /* 792.898px */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__inner {
  padding-block: var(--space-7xl) var(--space-8xl);
  display: flex;
  gap: var(--space-7xl);
  align-items: flex-start;
}

/* 804 of the 1440 content width */
.hero__col {
  flex: 804 0 0;
  min-width: 0;
  max-width: 50.25rem;
}

/* --- rating badge --------------------------------------------------------- */

.badge {
  /* 58px row in the frame: a 32px badge with 26px of space beneath it. */
  margin-bottom: 1.625rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--white-10);
  backdrop-filter: blur(6px);
  border: 1px solid var(--white-20);
}

.badge__stars {
  display: flex;
}
.badge__stars svg {
  width: 13px;
  height: 13px;
}

.badge__stars svg path {
  fill: var(--accent);
}

.badge__text {
  font-size: var(--text-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-body);
  color: var(--white-90);
  white-space: nowrap;
}

/* --- copy ----------------------------------------------------------------- */

.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  letter-spacing: 0; /* Display/XL is explicitly 0, not --ls-heading */
  color: var(--text-inverse);
  text-wrap: balance;
}

.hero__lede {
  margin: 0;
  padding-top: var(--space-lg);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body-tight);
  color: var(--white-80);
  text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
  text-wrap: pretty;
}

/* --- actions -------------------------------------------------------------- */

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-3xl);
}

.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--text-btn);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
}

.btn--solid {
  gap: var(--space-sm);
  padding: var(--space-base) var(--space-2xl);
  background: var(--bg);
  color: var(--text);
}

/* Arrow disc. One component for every button that carries the 9x8 arrow:
   the header CTA, the hero CTA, the About button and the two Get a Free
   Quote / Send Now buttons. Fixed 24x24 with white-alpha-20 behind it, as
   the frame draws it. aspect-ratio guards the circle against being squashed
   by the flex row when the label wraps. */
.btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--white-20);
  color: var(--text-inverse);
}

.btn__arrow svg {
  width: 9px;
  height: 8px;
}

/* The one exception: on the white hero button there is no white to tint,
   so the disc is the full-strength brand green. */
.btn--solid .btn__arrow {
  background: var(--primary);
  color: var(--text-inverse);
}

/* Phone pill: 5px of padding around a 40px disc, 13px on the text side. */
.btn--phone {
  gap: var(--space-base);
  padding: 5px 13px 5px 5px;
  border: var(--stroke-thin) solid var(--white);
  color: var(--text-inverse);
}

.btn--phone .btn__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex-shrink: 0;
  /* Stated rather than inherited: the button's own colour flips to green on
     hover, and a green glyph on the green disc would vanish. */
  color: var(--text-inverse);
}

.btn--phone .btn__disc svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Why Choose Us  (Figma 5:5134)
   --------------------------------------------------------------------------
   Two 600fr columns, 48px apart. The left column is a 450px image with two
   overlapping thumbnails and a centred play button layered over it.
   ========================================================================== */

.why {
  padding-block: var(--section-y);
}

.why__inner {
  display: flex;
  gap: var(--space-5xl);
  align-items: flex-start;
}

.why__col {
  flex: 600 0 0;
  min-width: 0;
}
.why__col--media {
  position: relative;
}

.why__figure {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.why__figure img {
  width: 100%;
  height: 28.125rem; /* 450px */
  object-fit: cover;
}

.why__thumbs {
  position: absolute;
  top: 23.6875rem;
  display: flex;
  gap: var(--space-2xl);
  left: 28px;
}

/* Two 167x125 cards overlapping the bottom of the photo, at x=24 and x=207. */
.why__thumb {
  width: 10.4375rem; /* 167px */
  height: 7.8125rem; /* 125px */
  background: var(--white-10);
  border: var(--stroke-thick, 4px) solid var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}

.why__thumb--a {
  left: 1.5rem;
} /* 24px */
.why__thumb--b {
  left: 12.9375rem;
} /* 207px */

.why__thumb img {
  width: 100%;
  height: 8.5rem; /* 136px — taller than the box, so it crops */
  object-fit: cover;
}

.why__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--primary);
  filter: drop-shadow(0 8px 5px rgb(0 0 0 / 0.1))
    drop-shadow(0 20px 12.5px rgb(0 0 0 / 0.1));
}

/* The export is 16x20; Figma draws it inside a 24x24 icon box. */
.why__play svg {
  width: 16px;
  height: 20px;
}

/* --- shared eyebrow ------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-body);
  color: var(--text);
}

.eyebrow__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  flex-shrink: 0;
}

.eyebrow__dot svg {
  width: 8px;
  height: 8px;
}

/* --- copy ----------------------------------------------------------------- */

/* No heading/h2 variable exists in the file; this heading is bound to
   heading/h1, and its colour is text/secondary rather than text/primary. */
.why__title {
  margin: 0;
  padding-top: var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.why__lede {
  margin: 0;
  padding-top: var(--space-xl);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body-tight);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- feature cards -------------------------------------------------------- */

.why__cards {
  display: flex;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

.feature-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: var(--space-base);
  align-items: flex-start;
  padding: var(--space-lg);
  background: var(--bg-alt);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  flex-shrink: 0;
}

.feature-card__icon svg {
  width: 20px;
  height: 20px;
}

.feature-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

.feature-card__body {
  margin: 0;
  padding-top: var(--space-2xs);
  font-size: var(--text-s);
  line-height: var(--lh-s);
  letter-spacing: 0; /* Body/Small-Zero */
  color: var(--text-secondary);
}

/* --- checklist ------------------------------------------------------------ */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-2xl) 0 var(--space-3xl);
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--weight-medium);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

.checklist__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  flex-shrink: 0;
}

.checklist__dot svg {
  width: 9px;
  height: 7px;
}

/* --- green pill button ---------------------------------------------------- */

.btn--primary {
  gap: var(--space-sm);
  padding: var(--space-base) var(--space-2xl);
  background: var(--primary);
  color: var(--text-inverse);
}

/* ==========================================================================
   Services  (Figma 5:5226)
   --------------------------------------------------------------------------
   Header block sits in the normal container. The carousel deliberately
   breaks out: it starts at the container's content edge and bleeds off the
   right of the viewport with no right padding, exactly as the frame does.
   ========================================================================== */

.services {
  padding-block: 0 var(--section-y);
}

.services__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* This eyebrow uses letter-spacing/heading, unlike the Why Choose Us one
   which uses letter-spacing/body. Both are as bound in the file. */
.eyebrow--wide {
  letter-spacing: var(--ls-heading);
}

/* Written in sentence case in the markup and cased here, so the text stays
   readable and translatable. Not every eyebrow is uppercase in the frame —
   Process and FAQ are sentence case — hence the modifier. */
.eyebrow--upper {
  text-transform: uppercase;
}

.eyebrow--center {
  justify-content: center;
}

/* --- arrows --------------------------------------------------------------- */

/* The fill reports availability rather than direction: green means that
   direction can still be scrolled, outlined means it cannot. The JS sets
   [disabled] from the carousel's real index, so the pair reads as a state
   at a glance. This departs from the frame, which draws prev outlined and
   next green as fixed styles. */

.services__arrows {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.services__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
  padding: 2px;
  border: var(--stroke-default, 2px) solid transparent;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
}

.services__arrow svg {
  width: 5px;
  height: 9px;
}

.services__arrow[disabled] {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--text-secondary);
  cursor: default;
}

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

.services__intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6xl);
  padding-top: var(--space-xl);
}

.services__title {
  margin: 0;
  flex-shrink: 0;
  width: 38.875rem; /* 622px */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.services__lede {
  margin: 0;
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- carousel ------------------------------------------------------------- */

.services__carousel {
  padding-top: var(--space-4xl);
}

/* Left inset for the carousel track. Resolves to exactly the container's
   content edge at any width, so the first card lines up with the heading
   above it: half the leftover gutter, plus the container's own padding.

   This is NOT applied here — Splide writes the track's padding as an inline
   style and would overwrite it, and padding it cannot see breaks its scroll
   maths. It is passed to Splide as an option instead (see index.html). */
.services {
  --carousel-inset: calc(
    (100% - min(100%, var(--content-max))) / 2 + var(--gutter)
  );
}

.services__carousel .splide__track {
  overflow: hidden;
}

.services__carousel .splide__list {
  align-items: stretch;
}

.services__carousel {
  overflow: hidden;
}

/* --- card ----------------------------------------------------------------- */

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.service-card__media {
  position: relative;
  height: 23.75rem; /* 380px */
  flex-shrink: 0;
}

.service-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge sits 15.9px above the bottom edge of the photo. In the frame this
   is expressed as a different offset per card because it is measured from
   the card bottom and the copy blocks differ in height; measured from the
   image it is constant. */
.service-card__badge {
  position: absolute;
  left: 12px;
  bottom: 15.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: var(--bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}

.service-card__badge img,
.service-card__badge svg {
  width: 42px;
  height: 42px;
}

.service-card__body {
  padding: var(--space-3xl) var(--space-lg) var(--space-lg);
}

.service-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h4);
  line-height: var(--lh-h4-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.service-card__text {
  margin: 0;
  padding-block: var(--space-sm) var(--space-base);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-3xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-heading);
  color: var(--text);
}

.service-card__link svg {
  width: 9px;
  height: 8px;
}

/* ==========================================================================
   Section rule  (Figma 28:343)
   --------------------------------------------------------------------------
   A 1680x20 frame holding a single 1px line inset 130px on both sides, with
   spacing/md above and below it. Sits between Services and Process.
   ========================================================================== */

.rule {
  padding-block: var(--space-md);
}

.rule__line {
  margin: 0;
  border: 0;
  border-top: var(--stroke-thin) solid var(--border-strong);
}

/* ==========================================================================
   Process  (Figma 5:5334)
   --------------------------------------------------------------------------
   Three equal columns, 80px apart, with a hairline connecting the three step
   numbers and an arrow sitting in each gap. Below it, a before/after
   comparison slider.
   ========================================================================== */

.process {
  padding-block: var(--section-y);
}

.process__title {
  margin: 0;
  padding-top: var(--space-base);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  text-align: center;
}

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

.process__steps {
  --process-gap: var(--space-8xl);
  --process-col: calc((100% - 2 * var(--process-gap)) / 3);
  --process-figure-h: 16.25rem; /* 260px */

  position: relative;
  display: flex;
  gap: var(--process-gap);
  align-items: flex-start;
  margin-top: var(--space-5xl);
}

/* Hairline joining the three step numbers. In the frame it is a fixed 988px
   centred line; expressed here as centre-of-first-column to centre-of-last so
   it stays correct at any width. Sits at the vertical centre of the number
   discs. Declared before the columns so the discs paint over it. */
.process__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--process-col) / 2);
  width: calc(100% - var(--process-col));
  top: calc(var(--process-figure-h) + var(--space-xl) + 20px);
  height: var(--stroke-thin);
  /* Dashed. Drawn with a gradient rather than border-style: dashed, which
     renders a different dash length in every engine. The 6/6 rhythm is
     eyeballed — Figma flattened the line to an SVG, so the real dash array
     is not readable from the file. */
  background-image: repeating-linear-gradient(
    to right,
    var(--border-strong) 0 6px,
    transparent 6px 12px
  );
}

.process__step {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.process__figure {
  width: 100%;
  height: var(--process-figure-h);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* The photo renders at 328px inside a 260px box, top-aligned — so it is
   cropped from the bottom, not centred. */
.process__figure img {
  width: 100%;
  height: 20.5rem; /* 328px */
  object-fit: cover;
}

.process__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--primary);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-heading);
  color: var(--text-inverse);
}

.process__step-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h4);
  line-height: var(--lh-h4-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.process__step-text {
  margin: 0;
  font-size: var(--text-s);
  line-height: var(--lh-s-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Arrow in the gap after steps 1 and 2. Centred in the 80px gap; the frame
   puts it 2.66px right of centre. */
.process__arrow {
  position: absolute;
  top: 130px;
  left: calc(100% + (var(--process-gap) - 40px) / 2);
  width: 40px;
  height: 20px;
  color: var(--border-strong);
}

.process__arrow svg {
  width: 40px;
  height: 20px;
}

/* --- before / after ------------------------------------------------------- */

.process__compare {
  /* INVENTED VALUE: the reference element borders the handle with
     --secondary-ultra-light. We have no pale tint of --secondary in the
     token set, so this is mixed from it. Swap for --warm-border or
     --border-default if you would rather stay inside the tokens. */
  --compare-handle-border: color-mix(
    in oklch,
    var(--secondary) 18%,
    var(--white)
  );

  position: relative;
  margin-top: var(--space-5xl);
  background: var(--white-10);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.process__compare img-comparison-slider {
  display: block;
  width: 100%;
  height: 37.5rem; /* 600px */

  /* Host variables exposed by the component (v8). The reference element uses
     a 6px bar with a 15px soft glow; height comes from the slider, not the
     reference's fixed 650px. */
  --divider-width: 6px;
  --divider-color: var(--white);
  --divider-shadow: 0 0 15px 0 rgb(0 0 0 / 0.5);
}

/* Custom drag handle, adapted from the reference element.
   Its box-shadow is the Floating effect from our own token set — the
   reference's two-layer shadow is the same values. */
.compare__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: var(--stroke-thin) solid var(--compare-handle-border);
  box-shadow: var(--shadow-floating);
  color: var(--warm-800);
  cursor: ew-resize;
}

.compare__handle svg {
  width: 24px;
  height: 24px;
}

.process__compare img-comparison-slider img {
  width: 100%;
  height: 37.5rem;
  object-fit: cover;
}

/* ==========================================================================
   Product logo strip  (Figma 34:218)
   ========================================================================== */

.logo-strip {
  padding-block: 0 var(--section-y);
}

.logo-strip__head {
  display: flex;
  justify-content: center;
  padding-top: var(--space-xl);
}

/* Heading/H3, not H1 like the other section titles. Sits in a fixed 571px
   column that is centred in the container. */
.logo-strip__title {
  margin: 0;
  text-align: center;
  max-width: 45ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  overflow-wrap: break-word;
}

.logo-strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8xl);
  padding-top: var(--space-4xl);
}

/* Each logo has its own width from the frame; height is a constant 50px. */
.logo-strip__item {
  flex-shrink: 0;
  flex: 1;
  aspect-ratio: 3/2;
  min-height: 50px;
}

.logo-strip__item img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  object-fit: contain;
  object-position: center;
}

/* ==========================================================================
   Portfolio  (Figma 5:5417)
   --------------------------------------------------------------------------
   Warm-background section. Unlike the Services carousel, this track is NOT
   aligned to the container — it starts at a flat 32px from the viewport edge
   and bleeds off the right.
   ========================================================================== */

.portfolio {
  background: var(--bg-warm);
  padding-block: var(--section-y);
}

/* Bottom-aligned: the arrows sit level with the last line of the paragraph. */
.portfolio__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.portfolio__intro {
  width: 53.75rem; /* 860px */
  max-width: 100%;
}

/* The eyebrow is absolutely placed 3px down inside a 35px box, so the gap
   below it is not a simple margin. */
.portfolio__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.portfolio__lede {
  margin: 0;
  padding-top: var(--space-xl);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- arrows --------------------------------------------------------------- */

/* 40px with 18px icons here; the Services arrows are 36px with 16px icons.
   Both are as drawn in the file. */
.portfolio__arrows {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.portfolio__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  padding: 2px;
  border: var(--stroke-default, 2px) solid transparent;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
}

.portfolio__arrow svg {
  width: 5px;
  height: 9px;
}

.portfolio__arrow[disabled] {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--text-secondary);
  cursor: default;
}

/* --- carousel ------------------------------------------------------------- */

.portfolio__carousel {
  padding-top: var(--space-4xl);
  overflow: hidden;
}

/* Flat 32px inset, passed to Splide as an option so it stays part of the
   component's scroll maths. */
.portfolio__carousel .splide__track {
  overflow: hidden;
}

.portfolio-card {
  width: 18.125rem; /* 290px */
  height: 26.25rem; /* 420px */
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.portfolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slides 2 and 3 are not centre-cropped in the frame: the photo is scaled to
   217.24% and pushed left, so a specific part of it shows. Reproduced with
   per-card offsets. These are tied to the original assets — if your
   replacements are framed differently, drop the modifier and the card falls
   back to object-fit: cover. */
.portfolio-card--offset {
  position: relative;
}

.portfolio-card--offset img {
  position: absolute;
  top: 0;
  left: var(--crop-x);
  width: var(--crop-w, 217.24%);
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ==========================================================================
   Testimonials  (Figma 5:5458)
   ========================================================================== */

.testimonials {
  padding-block: var(--section-y) var(--section-y-tight);
}

/* Bottom-aligned like the Portfolio head. */
.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

.testimonials__intro {
  flex: 1 0 0;
  min-width: 0;
}

.testimonials__title {
  margin: 0;
  width: 34rem; /* 544px */
  max-width: 100%;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

/* --- arrows --------------------------------------------------------------- */

/* Unlike Services and Portfolio, BOTH arrows here are solid green — there is
   no outlined variant. Sizes match Portfolio: 40px with 18px icons. */
.testimonials__arrows {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.testimonials__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  padding: 2px;
  border: var(--stroke-default, 2px) solid transparent;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
}

.testimonials__arrow svg {
  width: 5px;
  height: 9px;
}

.testimonials__arrow[disabled] {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--text-secondary);
  cursor: default;
}

/* --- carousel ------------------------------------------------------------- */

.testimonials__carousel {
  padding-top: var(--space-4xl);
}

.testimonials__carousel .splide__list {
  align-items: stretch;
}

/* --- card ----------------------------------------------------------------- */

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 16.125rem; /* 258px */
  padding: var(--space-2xl);
  background: var(--bg-alt);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.review-card__stars {
  display: flex;
  gap: var(--space-3xs);
}

.review-card__stars svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}

.review-card__quote {
  margin: 0;
  width: 21.875rem; /* 350px */
  max-width: 100%;
  padding-block: var(--space-lg) var(--space-2xl);
  font-size: var(--text-l);
  line-height: var(--lh-l);
  letter-spacing: var(--ls-body);
  color: var(--text-tertiary);
  text-wrap: pretty;
}

.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-base);
}

/* Avatar colour differs per card and is set inline via --avatar-bg. */
.review-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--avatar-bg, var(--text-tertiary));
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-heading);
  color: var(--text-inverse);
}

.review-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  white-space: nowrap;
}

.review-card__role {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
  white-space: nowrap;
}

.review-card__source {
  width: 48px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

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

/* The supplied SVG is the full lockup (mark + wordmark), so it replaces
   .brand__mark / .brand__name / .brand__sub entirely. */
.brand__logo {
  width: 136px;
  height: 40px;
  flex-shrink: 0;
}

/* ==========================================================================
   Areas served  (Figma 5:5576)
   ========================================================================== */

.areas {
  padding-block: var(--section-y);
}

.areas__title {
  margin: 0;
  padding-top: var(--space-base);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  text-align: center;
}

/* --- map ------------------------------------------------------------------ */

.areas__map-wrap {
  padding-top: var(--space-4xl);
}

/* 384px outer frame; the 1px "padding" in the frame is the border itself. */
.areas__map {
  position: relative;
  height: 24rem; /* 384px */
  background: var(--white-10);
  border: var(--stroke-thin) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

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

/* The frame carries a black-alpha/50 background AND the image sits under a
   second black-alpha/50 overlay. Two layers, not one — that double wash is
   what mutes the map to the grey in the design. */
.areas__map::before,
.areas__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-50);
  pointer-events: none;
}

.areas__map::before {
  z-index: 0;
}

.areas__map::after {
  z-index: 1;
}

.areas__pin {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--primary);
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))
    drop-shadow(0 10px 7.5px rgb(0 0 0 / 0.1));
}

.areas__pin::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg);
}

/* Inter Bold here, not the Arsenal used by the chips below. */
.areas__pin span {
  font-weight: var(--weight-bold);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-inverse);
  white-space: nowrap;
}

/* --- area chips ----------------------------------------------------------- */

.areas__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-base);
  margin: 0;
  padding: var(--space-3xl) 0 0;
  list-style: none;
}

.areas__chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--bg);
  border: var(--stroke-thin) solid var(--primary);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* The dot is the muted primary, not the full-strength border colour. */
.areas__chip::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--primary-muted);
}

/* ==========================================================================
   FAQ  (Figma 5:5633)
   --------------------------------------------------------------------------
   Native <details>/<summary> accordion — no JS. Only one item is open in the
   frame, but nothing there forces exclusivity, so items open independently.
   ========================================================================== */

.faq {
  padding-block: var(--section-y);
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl);
}

.faq__intro {
  width: 31.875rem; /* 510px */
  flex-shrink: 0;
}

.faq__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.faq__lede {
  margin: 0;
  padding-block: var(--space-lg) var(--space-2xl);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The arrow here is a text glyph in a translucent pill, not an icon — so this
   is a different button from .btn--primary. */
.btn--quote {
  gap: var(--space-sm);
  padding: var(--space-base) var(--space-2xl);
  background: var(--primary);
  color: var(--text-inverse);
}

/* --- accordion ------------------------------------------------------------ */

.faq__list {
  flex: 816 0 0;
  min-width: 0;
}

.faq__item {
  border: var(--stroke-thin) solid var(--warm-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq__item + .faq__item {
  margin-top: var(--space-base);
}

/* Open items swap to a white surface with the full-strength green border. */
.faq__item[open] {
  background: var(--bg);
  border-color: var(--primary);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-l);
  line-height: var(--lh-label-l);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* 24px disc: grey with a plus when closed, green with a minus when open.
   Built from two bars so it needs no icon file. */
.faq__toggle {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: var(--space-base);
  border-radius: var(--radius-full);
  background: var(--border);
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  translate: -50% -50%;
  border-radius: 1px;
  background: var(--border-strong);
}

.faq__toggle::after {
  rotate: 90deg;
}

.faq__item[open] .faq__toggle {
  background: var(--primary);
}

.faq__item[open] .faq__toggle::before {
  background: var(--text-inverse);
}

/* The minus: the upright bar of the plus is dropped when open. */
.faq__item[open] .faq__toggle::after {
  display: none;
}

/* The divider above the answer is green-500, a lighter green than the
   item border. */
.faq__answer {
  padding: var(--space-base) var(--space-xl) var(--space-lg);
  border-top: var(--stroke-thin) solid var(--secondary);
  margin: 0;
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text);
  text-wrap: pretty;
}

/* The "A." prefix is Arsenal with heading tracking; the answer body is Inter
   with body tracking. Two typefaces inside one paragraph. */
.faq__answer b {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-heading);
}

/* Height animation only where the browser supports animating to auto. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.3s ease,
      content-visibility 0.3s allow-discrete;
  }

  .faq__item[open]::details-content {
    block-size: auto;
  }
}

/* ==========================================================================
   Contact  (Figma 5:5715)
   --------------------------------------------------------------------------
   The form is presentational: no action, no backend. Submission is blocked
   in JS so the page never navigates.
   ========================================================================== */

.contact {
  padding-block: var(--section-y-tight) var(--section-y);
}

.contact__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl);
}

.contact__col {
  flex: 780 0 0;
  min-width: 0;
}

.contact__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.contact__lede {
  margin: 0;
  padding-top: var(--space-lg);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The photo column is a fixed 420px and stretches to the form's height. */
.contact__figure {
  width: 26.25rem;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

/* --- form card ------------------------------------------------------------ */

.contact__card {
  margin-top: var(--space-3xl);
  padding: var(--space-3xl);
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.contact__card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--h4);
  line-height: var(--lh-h4-loose);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.contact__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
}

.contact__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.field {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
}

/* Labels are Arsenal Bold with heading tracking — the same treatment as the
   headings, not a body-text label. */
.field__label {
  padding-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-heading);
  color: var(--text-secondary);
}

.field__control {
  width: 100%;
  padding: var(--space-md) var(--space-base);
  background: var(--bg);
  border: var(--stroke-thin) solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-s);
  line-height: var(--lh-s);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}

.field__control::placeholder {
  color: var(--black-50);
}

input.field__control {
  height: 2.625rem; /* 42px */
}

textarea.field__control {
  height: 6.375rem; /* 102px */
  resize: vertical;
}

/* The select is padded lg/base, not base/md like the text inputs — wider
   and taller than its neighbours in the frame. */
select.field__control {
  padding: var(--space-base) var(--space-lg);
  color: var(--black-50);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-opacity='0.5' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-lg) center;
  background-size: 24px 24px;
  padding-right: calc(var(--space-lg) * 2 + 24px);
}

/* Once a real option is chosen the text takes the normal input colour. */
select.field__control:valid {
  color: var(--text-secondary);
}

.contact__submit {
  padding-top: var(--space-xl);
}

/* ==========================================================================
   Footer  (Figma 5:5834)
   --------------------------------------------------------------------------
   Dark band on text/tertiary. Body copy sits at white-alpha/50 and the legal
   strip drops again to white-alpha/40.
   ========================================================================== */

.site-footer {
  padding-block: var(--space-7xl) var(--space-3xl);
  background: var(--text-tertiary);
}

.site-footer__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl);
  flex-wrap: wrap;
  justify-content: space-between;
}

/* The brand column is a fixed 550; the three link columns share the rest. */
.site-footer__brand-col {
  flex-shrink: 0;
}

.site-footer__col {
  min-width: 0;
}

.site-footer__blurb {
  margin: 0;
  width: 27.5rem; /* 440px */
  max-width: 100%;
  padding-top: var(--space-lg);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--white-50);
  text-wrap: pretty;
}

/* --- newsletter ----------------------------------------------------------- */

/* One pill split in two: the input rounds on the left, the button on the
   right, and they meet flush in the middle. */
.newsletter {
  display: flex;
  align-items: stretch;
  width: 27.5rem;
  max-width: 100%;
  margin-top: var(--space-xl);
}

.newsletter__input {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--space-sm) var(--space-base);
  background: var(--white-10);
  border: var(--stroke-thin) solid var(--white-20);
  border-right: 0;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-inverse);
}

.newsletter__input::placeholder {
  color: var(--white-50);
}

.newsletter__button {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-lg);
  background: var(--primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--text-inverse);
  white-space: nowrap;
}

/* --- link columns --------------------------------------------------------- */

.site-footer__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-label-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-heading);
  color: var(--text-inverse);
}

.site-footer__list {
  margin: 0;
  padding: var(--space-lg) 0 0;
  list-style: none;
  font-size: var(--text-m);
  line-height: var(--lh-m);
  letter-spacing: var(--ls-body);
  color: var(--white-50);
}

/* The first item sits flush; the rest are spaced by 10px. */
.site-footer__list li + li {
  padding-top: var(--space-md);
}

/* The contact list is spaced 12px instead of 10 and its rows carry icons. */
.site-footer__list--contact li + li {
  padding-top: var(--space-base);
}

.site-footer__list--contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* 2px nudge so the 13px glyph sits on the cap height of the first line. */
.site-footer__icon {
  width: 13px;
  height: 13px;
  aspect-ratio: 1;
  flex-shrink: 0;
  margin-top: calc(var(--space-3xs) + 6px);
  color: var(--white);
}

.site-footer__socials {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
  flex-wrap: wrap;
}

.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border: var(--stroke-thin) solid var(--white-20);
  border-radius: var(--radius-full);
  color: var(--white-70);
}

/* The four marks are four different intrinsic sizes inside a common 12x12
   icon box in the frame, so each is sized on its own rather than being
   stretched to a single square. */
.site-footer__social svg {
  flex-shrink: 0;
}

.site-footer__social--fb svg {
  width: 13px;
  height: 13px;
}

.site-footer__social--li svg {
  width: 13px;
  height: 13px;
}

.site-footer__social--yt svg,
.site-footer__social--x svg {
  width: 13px;
  height: 13px;
}

/* --- legal strip ---------------------------------------------------------- */

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-5xl);
  padding-top: var(--space-2xl);
  border-top: var(--stroke-thin) solid var(--white-10);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
  color: var(--white-40);
}

.site-footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* The pipes are larger and fainter than the links they separate. */
.site-footer__sep {
  font-size: var(--text-m);
  line-height: var(--lh-m-tight);
  color: var(--white-20);
}

/* ==========================================================================
   Interaction states
   --------------------------------------------------------------------------
   Nothing in the Figma file specifies hover, focus or active, so this whole
   section is INVENTED. It is built on two rules so it stays quiet:

   1. Only the pill CTAs animate their fill. Everything else gets a single
      cheap change — a colour, a lift, a nudge. One loud gesture per screen.
   2. Hover never introduces a colour that is not already in the token set.
      The buttons invert between the two they already wear; nothing tints,
      darkens or lightens to a value the designer did not pick.

   The fill is a background-image sized from 0% to 100% rather than a
   pseudo-element, so the label always paints above it and the pill's
   border-radius clips it for free — no z-index or overflow needed.

   Everything here is neutralised by the prefers-reduced-motion block at the
   end of the file, which zeroes every transition on the page.
   ========================================================================== */

:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 320ms;
  --dur-fast: 180ms;
}

/* --- pill CTAs ------------------------------------------------------------ */

/* The fill wipes left to right, following the arrow. */
.btn,
.btn-quote,
.areas__chip {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    background-size var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible,
.btn-quote:hover,
.btn-quote:focus-visible {
  background-size: 100% 100%;
}

/* The disc and its arrow invert with the button, and the arrow steps toward
   the edge it points at. */
.btn__arrow,
.btn__disc {
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn__arrow svg,
.btn-quote svg {
  transition: translate var(--dur) var(--ease);
}

.btn:hover .btn__arrow svg,
.btn:focus-visible .btn__arrow svg,
.btn-quote:hover .btn__arrow svg,
.btn-quote:focus-visible .btn__arrow svg {
  translate: 2px 0;
}

/* Green -> white. Header CTA, About, Get a Free Quote, Send Now. */
.btn-quote,
.btn--primary,
.btn--quote {
  background-image: linear-gradient(var(--white), var(--white));
}

.btn-quote:hover,
.btn-quote:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--quote:hover,
.btn--quote:focus-visible {
  color: var(--text);
}

/* The disc was white-alpha-20, which would vanish on the white fill, so it
   takes the button's own green. */
.btn-quote:hover .btn__arrow,
.btn-quote:focus-visible .btn__arrow,
.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow,
.btn--quote:hover .btn__arrow,
.btn--quote:focus-visible .btn__arrow {
  background: var(--primary);
  color: var(--text-inverse);
}

/* White -> green. The hero CTA is the mirror image of the above. */
.btn--solid {
  background-image: linear-gradient(var(--primary), var(--primary));
}

.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--text-inverse);
}

.btn--solid:hover .btn__arrow,
.btn--solid:focus-visible .btn__arrow {
  background: var(--white);
  color: var(--text);
}

/* Outlined phone pill: fills white, the disc keeps its green. */
.btn--phone {
  background-image: linear-gradient(var(--white), var(--white));
}

.btn--phone:hover,
.btn--phone:focus-visible {
  color: var(--text);
}

/* --- primary nav ---------------------------------------------------------- */

/* A rule that grows from the left, in the bright green so it reads against
   the dark bar without introducing a new colour. */
.nav__link {
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: var(--stroke-thin);
  background: var(--secondary);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  scale: 1 1;
}

/* --- carousel arrows ------------------------------------------------------ */

.services__arrow,
.portfolio__arrow,
.testimonials__arrow {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    opacity 0.2s;
}

.services__arrow svg,
.portfolio__arrow svg,
.testimonials__arrow svg {
  transition: translate var(--dur-fast) var(--ease);
}

/* The fill already carries the enabled/disabled state, so hover must not
   change it. An available arrow lifts on a shadow; a disabled one is inert. */
.services__arrow:not([disabled]):hover,
.services__arrow:not([disabled]):focus-visible,
.portfolio__arrow:not([disabled]):hover,
.portfolio__arrow:not([disabled]):focus-visible,
.testimonials__arrow:not([disabled]):hover,
.testimonials__arrow:not([disabled]):focus-visible {
  box-shadow: var(--shadow-floating);
}

.services__arrow--prev:not([disabled]):hover svg,
.portfolio__arrow--prev:not([disabled]):hover svg,
.testimonials__arrow--prev:not([disabled]):hover svg {
  translate: -2px 0;
}

.services__arrow--next:not([disabled]):hover svg,
.portfolio__arrow--next:not([disabled]):hover svg,
.testimonials__arrow--next:not([disabled]):hover svg {
  translate: 2px 0;
}

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

.service-card,
.review-card {
  transition:
    translate var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.service-card__media > img,
.portfolio-card img,
.why__figure img,
.logo-strip__item img {
  transition:
    scale var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.service-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-elevated);
}

.service-card:hover .service-card__media > img {
  scale: 1.04;
}

.review-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-dropdown);
}

.portfolio-card:hover img {
  scale: 1.05;
}

/* Learn More: the rule and the arrow move together. */
.service-card__link {
  position: relative;
}

.service-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--stroke-thin);
  background: var(--primary);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur) var(--ease);
}

.service-card__link svg {
  transition: translate var(--dur) var(--ease);
}

.service-card:hover .service-card__link::after,
.service-card__link:hover::after,
.service-card__link:focus-visible::after {
  scale: 1 1;
}

.service-card:hover .service-card__link svg,
.service-card__link:hover svg,
.service-card__link:focus-visible svg {
  translate: 3px 0;
}

/* --- play button ---------------------------------------------------------- */

.why__play {
  transition: scale var(--dur) var(--ease);
}

.why__play:hover,
.why__play:focus-visible {
  scale: 1.08;
}

.why__col--media:hover .why__figure img {
  scale: 1.03;
}

/* --- product logos -------------------------------------------------------- */

/* The strip is greyscale by design; hovering one returns it to colour. */
.logo-strip__item:hover img {
  filter: grayscale(0%);
}

/* --- area chips ----------------------------------------------------------- */

/* Same wipe as the CTAs, at chip scale. The dot goes solid white so it does
   not disappear into the fill. */
.areas__chip {
  background-image: linear-gradient(var(--primary), var(--primary));
}

.areas__chip::before {
  transition: background-color var(--dur) var(--ease);
}

.areas__chip:hover {
  background-size: 100% 100%;
  color: var(--text-inverse);
}

.areas__chip:hover::before {
  background: var(--white);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq__item,
.faq__toggle,
.faq__toggle::before,
.faq__toggle::after {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

/* Only closed items react — an open one already carries the green border. */
.faq__item:not([open]):hover {
  border-color: var(--primary-muted);
}

.faq__item:not([open]) .faq__question:hover .faq__toggle {
  background: var(--border-medium);
}

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

.site-footer__list a,
.site-footer__legal-links a {
  transition: color var(--dur-fast) var(--ease);
  line-break: anywhere;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible,
.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus-visible {
  color: var(--white);
}

.site-footer__social {
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    translate var(--dur-fast) var(--ease);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: var(--white);
  border-color: var(--white-50);
  translate: 0 -2px;
}

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   No mobile design exists in the Figma file, so this follows Bricks Builder
   conventions: desktop is the base, breakpoints step down at the Bricks
   defaults, and the nav collapses at 991 (Bricks' default mobile-menu point).
   Type and spacing are already fluid via clamp(320px - 1366px), so these
   rules only handle layout reflow.
   ========================================================================== */

/* Tablet landscape */
@media (max-width: 1279px) {
  .nav {
    gap: var(--space-lg);
  }
  .hero__inner {
    gap: var(--space-4xl);
  }
}

/* Tablet portrait — nav collapses */
@media (max-width: 991px) {
  :root {
    --gutter: var(--space-xl); /* 20px */
    --section-y: var(--space-6xl); /* 60px */
    --section-y-tight: var(--space-3xl); /* 32px */
  }

  .lbg-section[id] {
    scroll-margin-top: 6rem;
  }

  .services__intro {
    flex-direction: column;
    gap: var(--space-2xl);
  }
  .services__title {
    width: 100%;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
    padding: var(--space-base);
    background: var(--black-50);
    border: var(--stroke-thin) solid var(--white-20);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(12px);
  }

  .site-header:has(.nav-toggle[aria-expanded="true"]) .nav {
    display: flex;
  }

  /* 44px rows: the desktop links are 20px tall, which is not a touch target. */
  .nav__link {
    padding-block: var(--space-base);
    padding-inline: var(--space-sm);
    min-height: 44px;
  }

  /* The underline is a desktop affordance; in a stacked menu it reads as a
     divider, so it is dropped rather than restyled. */
  .nav__link::after {
    display: none;
  }

  .site-header__row {
    position: relative;
  }
  .hero {
    min-height: 0;
  }

  .why__inner {
    flex-direction: column;
  }

  .portfolio__head,
  .testimonials__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xl);
  }
  .portfolio__intro,
  .testimonials__title {
    width: 100%;
  }

  /* The 258px card height assumes three columns; below this the quotes
     need room to breathe. */
  .review-card {
    height: auto;
    min-height: 16.125rem;
  }

  .areas__map {
    height: 18rem;
  }

  .faq__inner,
  .contact__inner {
    flex-direction: column;
    gap: var(--space-3xl);
  }

  .contact__col,
  .contact__figure {
    width: 100%;
    flex: 1 1 auto;
  }

  .contact__figure {
    height: 20rem;
  }

  .site-footer__cols {
    flex-wrap: wrap;
    gap: var(--space-3xl);
  }

  .site-footer__brand-col {
    width: 100%;
  }

  .faq__intro,
  .faq__list {
    width: 100%;
    flex: 1 1 auto;
  }

  .logo-strip__row {
    flex-wrap: wrap;
    gap: var(--space-5xl);
  }

  .process__steps {
    flex-direction: column;
    gap: var(--space-5xl);
  }
  /* The connector and gap arrows only make sense across a row. */
  .process__steps::before,
  .process__arrow {
    display: none;
  }
  .process__compare img-comparison-slider,
  .process__compare img-comparison-slider img {
    height: 25rem;
  }
  .why__col {
    flex: 1 1 auto;
    width: 100%;
  }
  .hero__inner {
    padding-block: calc(var(--space-section) + var(--space-3xl))
      var(--space-5xl);
  }
  .hero__col {
    max-width: none;
  }
}

/* Mobile landscape */
@media (max-width: 767px) {
  :root {
    --gutter: var(--space-2xl); /* 24px */
    --section-y: var(--space-5xl); /* 48px */
    --section-y-tight: var(--space-2xl); /* 24px */
  }

  .lbg-section[id] {
    scroll-margin-top: 5.5rem;
  }

  /* The bar cannot hold the brand, the toggle and a CTA at this width — the
     CTA overflowed the viewport. It moves into the collapsed menu instead. */
  .btn-quote {
    display: none;
  }

  .nav__cta-item {
    display: block;
    margin-top: var(--space-sm);
  }

  .nav__cta {
    justify-content: center;
    width: 100%;
  }

  .logo-strip__row {
    gap: var(--space-3xl);
  }

  .services__title {
    width: 100%;
  }

  /* Stacked and left aligned: the buttons keep their own width rather than
     stretching, so their labels stay on the text's left edge. */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .why__cards,
  .contact__row {
    flex-direction: column;
  }

  /* .contact__row aligns to flex-start, which in a column is the cross axis —
     so the fields sized to their content instead of the card. */
  .contact__row {
    align-items: stretch;
  }

  .field {
    width: 100%;
  }

  /* The two thumbnails are pinned to a 600px-wide composition; below this
     they would collide with the photo edge, so they are dropped. No design
     exists for this breakpoint. */
  .why__thumb {
    display: none;
  }

  .contact__card {
    padding: var(--space-xl);
  }

  /* 16px is the floor that stops iOS zooming the page on focus, and 48px is
     the minimum comfortable touch target. */
  .field__control,
  .newsletter__input {
    font-size: 1rem;
  }

  input.field__control,
  select.field__control {
    height: 3rem; /* 48px */
  }

  textarea.field__control {
    height: 7.5rem;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .site-footer__cols {
    gap: var(--space-2xl);
  }

  .site-footer__col {
    width: 100%;
  }

  .areas__map {
    height: 15rem;
  }

  .process__compare img-comparison-slider,
  .process__compare img-comparison-slider img {
    height: 18rem;
  }

  .service-card__media {
    height: 15rem;
  }

  .portfolio-card {
    height: 22rem;
  }
}

/* Mobile portrait */
@media (max-width: 478px) {
  .badge {
    flex-wrap: wrap;
  }

  .logo-strip__row {
    gap: var(--space-2xl);
  }

  .areas__list {
    gap: var(--space-sm);
  }

  /* One pill per row would be tidier, but the split newsletter field is a
     single control in the design, so it keeps its shape and just shrinks. */
  .newsletter__button {
    padding-inline: var(--space-base);
  }

  .site-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: var(--space-base);
  }

  .site-footer__legal-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-base);
  }

  .review-card {
    min-height: 0;
  }

  .compare__handle {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}