/* ==========================================================================
   EMBURY — Design · Build · Interiors
   Shared stylesheet for every page except holding.html (which inlines a
   small subset so it can stand alone).

   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1.  Design tokens (:root)
   2.  Reset & base elements
   3.  Typography helpers (eyebrows, meta lines, rules, section numbers)
   4.  Layout helpers (container, section, section header, visually hidden)
   5.  Buttons & text links
   6.  Icons
   7.  Skip link & focus styles
   8.  Top bar, header & desktop navigation
   9.  Mobile menu overlay
   10. Hero (homepage)
   11. Trust bar
   12. Project cards & grid
   13. How We Work (process timeline)
   14. Service cards (homepage row)
   15. Testimonial carousel
   16. Local expertise band
   17. Final CTA band
   18. Footer
   19. Scroll reveal
   20. Responsive — tablet (≤1279px), hamburger (≤1199px), mobile (≤767px)
   21. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Every colour used on the site is defined here. No hardcoded colours
   should appear anywhere else in this file.
   ========================================================================== */
:root {
  /* Brand (from brief) */
  --gold: #B5945A;            /* accent: lines, icons, dividers, large text, text on dark */
  --cream: #F9F6F1;           /* main background */
  --charcoal: #1C1C1C;        /* text, footer, dark sections */
  --text-secondary: #6B6B6B;
  --border: #E0D9D0;

  /* Supporting (added for the mockup look and WCAG AA) */
  --stone: #F1ECE4;           /* alternate section background (How We Work, testimonial band) */
  --stone-dark: #D9D1C5;      /* image placeholder / loading colour */
  --gold-deep: #8C6D3F;       /* gold BUTTONS with white text (4.8:1) */
  --gold-deep-hover: #7A5E35;
  --gold-text: #836634;       /* SMALL gold text on light backgrounds (4.9:1 on cream) */
  --white: #FFFFFF;
  --overlay-30: rgba(28, 28, 28, 0.30);
  --overlay-60: rgba(28, 28, 28, 0.60);
  --cream-muted: rgba(249, 246, 241, 0.72);
  --line-on-dark: rgba(249, 246, 241, 0.16);
  --shadow-soft: 0 6px 24px rgba(28, 28, 28, 0.07);

  /* Derived (kept here so no colour is hardcoded below) */
  --overlay-0: rgba(28, 28, 28, 0);
  --overlay-45: rgba(28, 28, 28, 0.45);
  --overlay-75: rgba(28, 28, 28, 0.75);
  --header-bg: rgba(249, 246, 241, 0.96);
  --header-bg-scrolled: rgba(249, 246, 241, 0.99);
  --white-line: rgba(255, 255, 255, 0.85);
  --white-faint: rgba(255, 255, 255, 0.45);
  --glass-bg: rgba(28, 28, 28, 0.40);            /* charcoal at 40% (hero card) */
  --glass-border: rgba(249, 246, 241, 0.25);     /* cream at 25% */
  --glass-border-hover: rgba(249, 246, 241, 0.50);
  --shadow-glass: 0 16px 40px rgba(28, 28, 28, 0.18);
  --overlay-12: rgba(28, 28, 28, 0.12);
  --overlay-15: rgba(28, 28, 28, 0.15);
  --overlay-55: rgba(28, 28, 28, 0.55);
  --overlay-62: rgba(28, 28, 28, 0.62);
  --cream-80: rgba(249, 246, 241, 0.80);
  --cream-85: rgba(249, 246, 241, 0.85);

  /* Type */
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'DM Sans', sans-serif;

  /* Layout */
  --max-width: 1280px;
  --section-padding: 100px 40px;
  --section-padding-compact: 72px 40px;
  --gutter: 40px;
  --top-bar-height: 32px;
  --header-height: 88px;
  --header-height-scrolled: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.4s;
}


/* ==========================================================================
   2. RESET & BASE ELEMENTS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  /* Cormorant defaults to old-style figures; lining figures read better in UI */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Body scroll lock while the mobile menu is open */
body.menu-open {
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  color: var(--charcoal);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

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

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

img {
  height: auto;
}

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

figure,
blockquote {
  margin: 0;
}

address {
  font-style: normal;
}

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


/* ==========================================================================
   3. TYPOGRAPHY HELPERS
   ========================================================================== */

/* Small uppercase gold label, often followed by a thin gold rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Optional trailing rule: "FEATURED PROJECT ———" */
.eyebrow--rule::after {
  content: "";
  width: 56px;
  height: 1px;
  background-color: var(--gold);
}

/* Eyebrow on dark/image backgrounds */
.eyebrow--light {
  color: var(--cream);
}

/* Meta line: "REFURBISHMENT | RICHMOND" */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.meta__sep {
  width: 1px;
  height: 11px;
  background-color: var(--border);
}

/* Short gold rule used under headings and before attributions */
.rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 24px 0;
  border: 0;
  background-color: var(--gold);
}

/* Large serif section number: "01 | Heading" (inner-page intros) */
.section-number {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.section-number__num {
  font-family: var(--font-serif);
  font-size: 88px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--gold);
}

.section-number__divider {
  align-self: stretch;
  width: 1px;
  min-height: 72px;
  background-color: var(--gold);
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.section {
  padding: var(--section-padding);
}

.section--compact {
  padding: var(--section-padding-compact);
}

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

/* Section header: h2 left, link or label right */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 40px;
}

.section-header__title {
  font-size: 44px;
  font-weight: 400;
}

.section-header__label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Accessible hiding (keeps text for screen readers and SEO) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Image wrappers: stone background so a missing image still looks intended */
.img-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--stone-dark);
}

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


/* ==========================================================================
   5. BUTTONS & TEXT LINKS
   Square corners. Arrow nudges right on hover.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.btn__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}

/* Primary: deep gold fill, white text (WCAG AA) */
.btn--primary {
  background-color: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--gold-deep-hover);
  border-color: var(--gold-deep-hover);
}

/* Secondary on light backgrounds: charcoal outline */
.btn--outline {
  background-color: transparent;
  border-color: var(--charcoal);
  color: var(--charcoal);
}

.btn--outline:hover {
  background-color: var(--charcoal);
  color: var(--cream);
}

/* Secondary on image/dark backgrounds: white outline */
.btn--outline-light {
  background-color: transparent;
  border-color: var(--white-line);
  color: var(--white);
}

.btn--outline-light:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Small underlined text link with arrow: "View All Projects →" */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

.text-link__label {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--charcoal);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.text-link .btn__arrow {
  width: 14px;
  height: 14px;
}

.text-link:hover .text-link__label {
  color: var(--gold-text);
  border-color: var(--gold);
}

.text-link:hover .btn__arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   6. ICONS
   Thin-line gold outline icons, inline SVG.
   ========================================================================== */
.icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.icon--lg {
  width: 36px;
  height: 36px;
}

/* Arrow glyph used in buttons, cards and links */
.arrow-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   7. SKIP LINK & FOCUS STYLES
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background-color: var(--charcoal);
  color: var(--cream);
  font-size: 14px;
  transform: translateY(-120%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translateY(16px);
}

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

/* Keep a clear focus ring on dark backgrounds too */
.site-footer :focus-visible,
.hero :focus-visible,
.local-band :focus-visible {
  outline-color: var(--gold);
}


/* ==========================================================================
   8. TOP BAR, HEADER & DESKTOP NAVIGATION
   Top bar: slim charcoal strip that scrolls away normally.
   Header: solid cream, sticky. main.js adds .is-scrolled after 80px.
   ========================================================================== */
.top-bar {
  background-color: var(--charcoal);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* One line: left and right groups on opposite sides, never wrapping */
.top-bar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  height: var(--top-bar-height);
  margin-inline: auto;
  padding-inline: var(--gutter);
  white-space: nowrap;
}

.top-bar__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.top-bar__icon {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-bar__link:hover {
  color: var(--gold);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.site-header.is-scrolled {
  background-color: var(--header-bg-scrolled);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: height var(--duration) var(--ease);
}

.site-header.is-scrolled .site-header__inner {
  height: var(--header-height-scrolled);
}

/* Logo: client wordmark, trimmed tight. Charcoal version in the header
   (images/embury-logo-dark), white version in the footer (embury-logo-white). */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.logo picture {
  display: block;
}

.logo__img {
  display: block;
  width: auto;
  height: 44px;
  transition: height var(--duration) var(--ease);
}

.site-header.is-scrolled .logo__img {
  height: 38px;
}

/* Centre navigation */
.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* Thin gold underline: grows on hover, stays on the current page */
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}

.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after,
.main-nav__toggle[aria-expanded="true"]::after,
.main-nav__toggle.is-current::after {
  transform: scaleX(1);
}

/* Services dropdown */
.main-nav__item--dropdown {
  position: relative;
}

.main-nav__toggle {
  gap: 7px;
}

/* Underline the label only, not the chevron (10px + 7px gap) */
.main-nav__toggle::after {
  right: 17px;
}

.main-nav__chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}

.main-nav__toggle[aria-expanded="true"] .main-nav__chevron {
  transform: rotate(180deg);
}

.main-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 10;
  min-width: 240px;
  padding: 12px 0;
  background-color: var(--cream);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    visibility 0s linear 0.2s;
}

.main-nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease),
    visibility 0s;
}

.main-nav__dropdown-link {
  display: block;
  padding: 10px 24px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--charcoal);
  white-space: nowrap;
  transition: color var(--duration) var(--ease);
}

.main-nav__dropdown-link:hover,
.main-nav__dropdown-link[aria-current="page"] {
  color: var(--gold-text);
}

.main-nav__dropdown-link:focus-visible {
  outline-offset: -3px;
}

.site-header__cta {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 13px;
}

/* Hamburger toggle (hidden on desktop) */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.menu-toggle__bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 1.5px;
  background-color: var(--charcoal);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.menu-toggle__bar:nth-child(1) { top: 15px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 27px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   9. MOBILE MENU OVERLAY
   Full-screen cream overlay with large serif links. Toggled by main.js.
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--top-bar-height) + var(--header-height) + 32px) var(--gutter) 40px;
  background-color: var(--cream);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), visibility 0s linear var(--duration);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration) var(--ease), visibility 0s;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 40px;
}

.mobile-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--charcoal);
  transition: color var(--duration) var(--ease);
}

.mobile-menu__link:hover,
.mobile-menu__link[aria-current="page"] {
  color: var(--gold-text);
}

/* Services group: small label, services indented beneath */
.mobile-menu__heading {
  margin: 16px 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.mobile-menu__sublist {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.mobile-menu__link--sub {
  min-height: 44px;
  font-size: 24px;
}

.mobile-menu__contact {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}

.mobile-menu__contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--charcoal);
}


/* ==========================================================================
   10. HERO (homepage)
   Full-width image, 30% overlay + left-to-right gradient, left-aligned copy.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  /* Account for the top bar and sticky header so the hero fills the first screen */
  min-height: calc(100vh - var(--top-bar-height) - var(--header-height));
  min-height: calc(100svh - var(--top-bar-height) - var(--header-height));
  padding: 96px var(--gutter);
  overflow: hidden;
  background-color: var(--charcoal);
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--stone-dark);
}

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

/* Left-weighted overlay. 62% charcoal holds behind the text column (to
   700px in from the content edge, i.e. past the headline), then fades to 15%
   by 1080px and 12% at the far right, so the right of the photo stays bright.
   A soft bottom fade keeps the project card and scroll cue readable. Tuned so all
   hero text meets WCAG AA on every carousel image. Below 1200px the text
   spans the full width, so a full-width overlay is used (responsive section). */
.hero__media::after {
  --hero-text-edge: max(var(--gutter), (100% - var(--max-width)) / 2);
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--overlay-55) 0%, var(--overlay-30) 25%, var(--overlay-0) 50%),
    linear-gradient(90deg,
      var(--overlay-62) 0%,
      var(--overlay-62) calc(var(--hero-text-edge) + 700px),
      var(--overlay-15) calc(var(--hero-text-edge) + 1080px),
      var(--overlay-12) 100%);
}

/* Background carousel. Slides stack and crossfade: the incoming slide fades
   in on top while the outgoing one stays fully visible underneath, so there
   is no dip in brightness. isolation keeps the slides below the overlay. */
.hero__slides {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero__slide.is-active {
  z-index: 2;
  opacity: 1;
}

.hero__slide.is-leaving {
  z-index: 1;
  opacity: 1;
  transition: none;
}

/* Drone video (replaces the carousel later; see index.html) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* Small pause/play button, bottom-right */
.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--white-faint);
  border-radius: 50%;
  background-color: var(--overlay-30);
  color: var(--white);
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.hero__toggle:hover,
.hero__toggle:focus-visible {
  opacity: 1;
  background-color: var(--overlay-60);
}

.hero__toggle[hidden] {
  display: none;
}

.hero__toggle-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__toggle-icon--play {
  display: none;
  fill: currentColor;
}

.hero__toggle.is-paused .hero__toggle-icon--pause {
  display: none;
}

.hero__toggle.is-paused .hero__toggle-icon--play {
  display: block;
}

/* Floating project card (bottom-right, follows the carousel).
   Frosted glass: translucent charcoal + backdrop blur. Below 1200px it
   drops into the normal flow under the buttons (see responsive section). */
.hero-card {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--max-width)) / 2));
  bottom: 88px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 350px;
  padding: 22px 24px 20px;
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 2px;
  box-shadow: var(--shadow-glass);
  color: var(--cream);
  transition:
    transform 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.hero-card:hover,
.hero-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
}

.hero-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

/* Parts that change with the slide. main.js adds .is-swapping to fade them
   out (0.2s), swaps the text, then fades them back in (0.2s). */
.hero-card__swap {
  transition: opacity 0.2s ease-in-out;
}

.hero-card.is-swapping .hero-card__swap {
  opacity: 0;
}

.hero-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--cream);
}

.hero-card__meta {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cream-85);
}

.hero-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  font-size: 12.5px;
  line-height: 1.4;
}

.hero-card__cta {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--cream);
}

/* Gold stays on the dot and arrow; small text is cream so it stays
   readable on the lighter glass over bright photos */
.hero-card__arrow {
  width: 14px;
  height: 14px;
  color: var(--gold);
  transition: transform 0.3s var(--ease);
}

.hero-card:hover .hero-card__arrow,
.hero-card:focus-visible .hero-card__arrow {
  transform: translateX(4px);
}

/* Scroll cue, bottom centre: a thin line with a gold dot travelling down */
.hero__scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-80);
  transform: translateX(-50%);
  transition: color var(--duration) var(--ease);
}

.hero__scroll:hover {
  color: var(--cream);
}

/* Letter-spacing adds space after the last letter; balance it */
.hero__scroll-label {
  padding-left: 0.3em;
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 40px;
  background-color: var(--cream-muted);
}

.hero__scroll-dot {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--gold);
  animation: hero-scroll-dot 2.4s ease-in-out infinite;
}

@keyframes hero-scroll-dot {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(35px); }
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.hero__eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__title {
  max-width: 760px;
  margin-bottom: 28px;
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--white);
}

.hero__subtitle {
  max-width: 520px;
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--white);
}


/* ==========================================================================
   11. TRUST BAR
   Four items, icon left of label, thin vertical dividers.
   ========================================================================== */
.trust-bar {
  padding: 36px var(--gutter);
  background-color: var(--cream);
  border-bottom: 1px solid var(--border);
}

.trust-bar__list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: 32px;
  border-left: 1px solid var(--border);
}

.trust-bar__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.trust-bar__item:last-child {
  padding-right: 0;
}

.trust-bar__item .icon {
  width: 34px;
  height: 34px;
}

.trust-bar__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
}

.trust-bar__text {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}


/* ==========================================================================
   12. PROJECT CARDS & GRID
   ========================================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Cards in a row stretch to the same height. Titles and arrows sit at the
   top of the body and the meta line is pinned to the bottom, so they line up
   across the row even when one title wraps. */
.project-grid > li {
  display: flex;
}

.project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--charcoal);
}

.project-card__media {
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
}

.project-card__media img {
  transition: transform 0.9s var(--ease);
}

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

.project-card__body {
  display: flex;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
}

.project-card__body > div {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.project-card__body .meta {
  margin-top: auto;
}

.project-card__title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.project-card__arrow {
  width: 20px;
  height: 20px;
  margin-top: 6px;
  flex-shrink: 0;
  color: var(--charcoal);
  transition: transform var(--duration) var(--ease), color var(--duration) var(--ease);
}

.project-card:hover .project-card__arrow {
  transform: translateX(4px);
  color: var(--gold-text);
}


/* ==========================================================================
   13. HOW WE WORK (process timeline)
   Desktop: six steps in a row joined by a thin continuous line.
   ========================================================================== */
.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  counter-reset: step;
}

/* The connecting line runs between the first and last circle centres */
.process::before {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background-color: var(--stone-dark);
}

.process__step {
  position: relative;
  text-align: center;
}

.process__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 22px;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  background-color: var(--stone);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--charcoal);
}

.process__title {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 500;
}

.process__text {
  max-width: 190px;
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}


/* ==========================================================================
   14. SERVICE CARDS (homepage row)
   Six slightly portrait cards. On hover: dark overlay + circular arrow.
   ========================================================================== */
.service-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.service-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--white);
  color: var(--charcoal);
  transition: box-shadow var(--duration) var(--ease);
}

.service-tile:hover {
  box-shadow: var(--shadow-soft);
}

.service-tile__media {
  aspect-ratio: 1 / 1.02;
}

.service-tile__media img {
  transition: transform 0.9s var(--ease);
}

/* Soft dark overlay */
.service-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-45);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

/* Circular outlined arrow, centred */
.service-tile__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--white);
  border-radius: 50%;
  color: var(--white);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.service-tile__circle svg {
  width: 20px;
  height: 20px;
}

.service-tile:hover .service-tile__media img,
.service-tile:focus-visible .service-tile__media img {
  transform: scale(1.05);
}

.service-tile:hover .service-tile__media::after,
.service-tile:focus-visible .service-tile__media::after {
  opacity: 1;
}

.service-tile:hover .service-tile__circle,
.service-tile:focus-visible .service-tile__circle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.service-tile__body {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 14px 18px;
}

.service-tile__title {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.service-tile__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: transform var(--duration) var(--ease);
}

.service-tile:hover .service-tile__arrow {
  transform: translateX(3px);
}


/* ==========================================================================
   15. TESTIMONIAL CAROUSEL
   Split band: image left (~1/3), quote right. Controls bottom right.
   ========================================================================== */
.testimonial-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  background-color: var(--stone);
}

.testimonial-band__media {
  min-height: 320px;
}

.testimonial-band__media img {
  position: absolute;
  inset: 0;
}

.carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px clamp(40px, 6vw, 96px);
}

.carousel__viewport {
  display: grid;
}

/* Slides stack in the same grid cell so they can crossfade */
.carousel__slide {
  grid-area: 1 / 1;
  display: flex;
  gap: 20px;
  max-width: 800px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--ease), visibility 0s linear 0.8s;
}

.carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s var(--ease), visibility 0s;
}

.carousel__mark {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 0.75;
  color: var(--gold);
}

.carousel__quote p {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--charcoal);
}

.carousel__quote .rule {
  margin: 28px 0 18px;
  width: 40px;
}

.carousel__cite {
  font-style: normal;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 32px;
}

.carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--charcoal);
  transition: color var(--duration) var(--ease);
}

.carousel__btn:hover {
  color: var(--gold-text);
}

.carousel__btn svg {
  width: 18px;
  height: 18px;
}

.carousel__counter {
  min-width: 40px;
  margin-left: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}


/* ==========================================================================
   16. LOCAL EXPERTISE BAND
   Full-width riverside image, ~60% overlay stronger on the left.
   ========================================================================== */
.local-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: 96px var(--gutter);
  overflow: hidden;
  background-color: var(--charcoal);
  color: var(--cream);
}

.local-band__media {
  position: absolute;
  inset: 0;
  background-color: var(--stone-dark);
}

.local-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 55%;
}

.local-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--overlay-75) 0%, var(--overlay-60) 40%, var(--overlay-30) 75%, var(--overlay-0) 100%);
}

.local-band__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.local-band__inner {
  max-width: 640px;
}

.local-band__text {
  max-width: 540px;
}

.local-band .eyebrow {
  color: var(--gold);
}

.local-band__title {
  font-size: 56px;
  font-weight: 400;
  line-height: 1.08;
  color: var(--cream);
}

.local-band__text {
  margin-bottom: 36px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--cream);
}


/* ==========================================================================
   17. FINAL CTA BAND
   Text left, buttons right, decorative foliage bottom-right.
   ========================================================================== */
.cta-band {
  position: relative;
  padding: 96px var(--gutter);
  overflow: hidden;
  background-color: var(--cream);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px 64px;
  max-width: var(--max-width);
  margin-inline: auto;
}

.cta-band__text {
  max-width: 600px;
}

.cta-band__title {
  margin-bottom: 16px;
  font-size: 48px;
  font-weight: 400;
}

.cta-band__text p {
  font-size: 16px;
  color: var(--text-secondary);
}

.cta-band .btn-group {
  flex-shrink: 0;
  /* Leave room for the foliage on wide screens */
  margin-right: clamp(0px, 6vw, 120px);
}

/* Decorative foliage cropped into the bottom-right corner.
   multiply blends the white photo background into the cream band. */
.cta-band__foliage {
  position: absolute;
  right: -24px;
  bottom: -48px;
  width: 360px;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
}


/* ==========================================================================
   18. FOOTER
   Charcoal, four columns with thin vertical dividers.
   ========================================================================== */
.site-footer {
  padding: 72px var(--gutter) 0;
  background-color: var(--charcoal);
  color: var(--cream);
  font-size: 14px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-bottom: 56px;
}

.site-footer__col {
  padding-inline: 40px;
  border-left: 1px solid var(--line-on-dark);
}

.site-footer__col:first-child {
  padding-left: 0;
  border-left: 0;
}

.site-footer__col:last-child {
  padding-right: 0;
}

.site-footer__heading {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__contact a,
.site-footer__contact span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--cream);
  transition: color var(--duration) var(--ease);
}

.site-footer__contact a:hover {
  color: var(--gold);
}

/* Two sub-columns, filled top-to-bottom so DOM order = reading order */
.site-footer__nav {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  justify-content: start;
  gap: 0 40px;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--cream-muted);
  transition: color var(--duration) var(--ease);
}

.site-footer__nav a:hover {
  color: var(--gold);
}

.social {
  display: flex;
  gap: 8px;
  margin: -10px 0 16px -10px;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cream);
  transition: color var(--duration) var(--ease);
}

.social a:hover {
  color: var(--gold);
}

.social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer__tagline {
  max-width: 220px;
  color: var(--cream-muted);
}

/* Bottom bar */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 22px 0 28px;
  border-top: 1px solid var(--gold);
  font-size: 12px;
  color: var(--cream-muted);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom a {
  color: var(--cream);
  transition: color var(--duration) var(--ease);
}

.site-footer__bottom a:hover {
  color: var(--gold);
}


/* ==========================================================================
   19. SCROLL REVEAL
   Only active once main.js adds .js to <html>, so content stays visible
   if JavaScript fails.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

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


/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* ---------- Tablet: 768px–1279px ---------- */
@media (max-width: 1279px) {
  :root {
    --section-padding: 80px 32px;
    --section-padding-compact: 64px 32px;
    --gutter: 32px;
  }

  .hero__title {
    font-size: 68px;
  }

  /* Trust bar: 2×2 */
  .trust-bar__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }

  .trust-bar__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .trust-bar__item:nth-child(3) {
    padding-left: 0;
  }

  /* Featured projects: 2 columns, third spans full width */
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-grid--featured > :nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Process: 3×2 grid, no horizontal line */
  .process {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 48px;
  }

  .process::before {
    display: none;
  }

  /* Services: 3 columns */
  .service-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .local-band__title {
    font-size: 48px;
  }

  /* Footer: 2×2 */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }

  .site-footer__col:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band .btn-group {
    margin-right: 0;
  }
}

/* ---------- Hamburger below 1200px ---------- */
@media (max-width: 1199px) {
  .main-nav,
  .site-header__cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  /* Hero text spans the full width here: full-width overlay */
  .hero__media::after {
    background:
      linear-gradient(180deg, var(--overlay-30) 0%, var(--overlay-60) 100%),
      var(--overlay-30);
  }

  /* Hero card drops into the flow under the buttons so it can never
     cover the headline or buttons */
  .hero {
    flex-direction: column;
    justify-content: center;
  }

  .hero-card {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-start;
    width: 100%;
    max-width: 360px;
    margin-top: 48px;
  }
}

/* ---------- Smaller tablets ---------- */
@media (max-width: 960px) {
  .service-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-band {
    grid-template-columns: 1fr;
  }

  .testimonial-band__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* ---------- Mobile: below 768px ---------- */
@media (max-width: 767px) {
  :root {
    --section-padding: 72px 20px;
    --section-padding-compact: 56px 20px;
    --gutter: 20px;
    --header-height: 72px;
    --header-height-scrolled: 64px;
  }

  body {
    font-size: 15px;
  }

  .logo__img {
    height: 36px;
  }

  .site-header.is-scrolled .logo__img {
    height: 32px;
  }

  /* Top bar: one line, short labels */
  .top-bar__wide {
    display: none;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .section-header__title {
    font-size: 34px;
  }

  /* Stacked, full-width buttons */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
    white-space: normal;
  }

  /* Hero */
  .hero {
    padding-block: 72px;
  }

  .hero__title {
    font-size: 48px;
  }

  .hero__subtitle {
    font-size: 16px;
  }

  .hero__scroll {
    display: none;
  }

  .hero-card {
    max-width: none;
    margin-top: 40px;
    padding: 16px 18px 14px;
  }

  .hero-card__eyebrow {
    margin-bottom: 10px;
  }

  .hero-card__title {
    font-size: 20px;
  }

  .hero-card__footer {
    margin-top: 12px;
    padding-top: 12px;
  }

  /* Trust bar: 2×2, icon above text */
  .trust-bar {
    padding-block: 28px;
  }

  .trust-bar__list {
    column-gap: 16px;
  }

  .trust-bar__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 0 16px;
  }

  .trust-bar__item .icon {
    width: 28px;
    height: 28px;
  }

  .trust-bar__label {
    font-size: 17px;
  }

  .trust-bar__text {
    font-size: 12px;
  }

  /* Single-column grids */
  .project-grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .project-card__title {
    font-size: 22px;
  }

  /* Process: vertical, line runs down the left */
  .process {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .process::before {
    display: block;
    top: 22px;
    bottom: 22px;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .process__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 20px;
    text-align: left;
  }

  .process__num {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .process__title {
    margin-top: 10px;
    font-size: 21px;
  }

  .process__text {
    max-width: none;
    margin: 0;
  }

  .service-row {
    grid-template-columns: 1fr;
  }

  .service-tile__media {
    aspect-ratio: 4 / 3;
  }

  /* Testimonial */
  .carousel {
    padding: 56px 20px;
  }

  .carousel__slide {
    flex-direction: column;
    gap: 8px;
  }

  .carousel__mark {
    font-size: 60px;
  }

  .carousel__quote p {
    font-size: 22px;
  }

  /* Local band */
  .local-band {
    min-height: 0;
    padding-block: 80px;
  }

  .local-band__media::after {
    background: var(--overlay-60);
  }

  .local-band__title {
    font-size: 38px;
  }

  /* CTA: stacked and centred */
  .cta-band {
    padding-block: 72px 120px;
    text-align: center;
  }

  .cta-band__inner {
    align-items: center;
  }

  .cta-band__title {
    font-size: 38px;
  }

  .cta-band__foliage {
    width: 180px;
    right: -50px;
    bottom: -50px;
  }

  /* Footer: stacked */
  .site-footer {
    padding-top: 56px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .site-footer__col {
    padding: 0;
    border-left: 0;
  }

  .site-footer__col + .site-footer__col {
    padding-top: 32px;
    border-top: 1px solid var(--line-on-dark);
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .section-number__num {
    font-size: 64px;
  }

  .mobile-menu__link {
    font-size: 30px;
  }

  .mobile-menu__link--sub {
    font-size: 22px;
  }
}


/* ==========================================================================
   21. REDUCED MOTION
   Disable reveals, zooms and long transitions.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* Scroll cue: dot sits still at the top of the line */
  .hero__scroll-dot {
    animation: none;
  }

  /* Hero card: no lift or arrow nudge */
  .hero-card:hover,
  .hero-card:focus-visible,
  .hero-card:hover .hero-card__arrow,
  .hero-card:focus-visible .hero-card__arrow {
    transform: none;
  }

  /* Hero: first image only, no slideshow */
  .hero__slide:not(:first-child) {
    display: none;
  }

  .project-card:hover .project-card__media img,
  .service-tile:hover .service-tile__media img {
    transform: none;
  }
}