/* ==========================================================================
   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
   19b. Inner pages: projects (intro, filter, slider, case study, gallery, lightbox)
   19c. Inner pages: services (cards, split hero, overview, benefits, FAQ)
   19d. Inner pages: about, local areas, contact (form + upload)
   19e. Inner pages: legal (terms, privacy)
   19f. Inner pages: what's included (hero, flat-lay, detail panel, stages)
   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);
  --overlay-95: rgba(28, 28, 28, 0.95);   /* lightbox backdrop */
  --error: #A1342A;                       /* form errors: AA on white and cream */
  --gold-tint: rgba(181, 148, 90, 0.08);  /* soft gold wash */
  --gold-glow: rgba(181, 148, 90, 0.55);  /* design-to-completion line glow */
  --white-glow: rgba(255, 255, 255, 0.70);
  --shadow-paper: 0 1px 2px rgba(28, 28, 28, 0.10), 0 6px 14px rgba(28, 28, 28, 0.08);  /* flat-lay items at rest */
  --shadow-lift: 0 4px 10px rgba(28, 28, 28, 0.10), 0 22px 44px rgba(28, 28, 28, 0.18);  /* flat-lay item lifted */
  --swatch-timber: #9A7653;               /* flat-lay sample board */
  --swatch-timber-dark: #7D5D40;
  --swatch-tile: #74826F;
  --swatch-marble: #EEEAE4;
  --swatch-marble-vein: #C9C1B5;

  /* 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: horizontal lockup (gold E | wordmark). Charcoal wordmark in the header
   (images/logo/embury-logo-header.svg), cream in the footer (embury-logo-footer.svg). */
.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: 50px;
  transition: height var(--duration) var(--ease);
}

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

/* Footer: ~52px tall, shrinks to fit narrow first column (aspect kept via width/height attrs) */
.site-footer .logo__img--footer {
  width: min(100%, 297px);
  height: auto;
}

/* 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;
}

/* "View all services" sits under a hairline at the end of the list */
.main-nav__dropdown-all {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.main-nav__dropdown-link--all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.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__link.mobile-menu__link--all {
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.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);
}

/* Genuine reviews run long, so the quote is set smaller than a pull quote */
.carousel__quote p {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--charcoal);
}

.carousel__slide .rule {
  margin: 24px 0 16px;
  width: 40px;
}

.carousel__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  font-style: normal;
}

/* Rating line + Google link on the left, prev/next on the right */
.carousel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 800px;
  margin-top: 32px;
}

.google-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

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

.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 1.3fr 0.9fr;
  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-family: var(--font-sans);
  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 lists side by side: main pages, then the six services */
.site-footer__navs {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0 32px;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
}

.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);
}

/* Copyright line with the Terms and Privacy links beside it */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}


/* ==========================================================================
   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;
}


/* ==========================================================================
   19b. INNER PAGES: PROJECTS (projects.html + projects/*.html)
   Page intro, featured split, filter bar, design-to-completion slider,
   case-study hero, story, gallery + lightbox, placeholder block,
   related services and previous/next project links.
   Responsive rules for these components live at the end of this section.
   ========================================================================== */

/* ---------- Page intro: "01 | Projects" ---------- */
.page-intro {
  padding: 88px var(--gutter) 56px;
}

.page-intro__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 32px 64px;
  max-width: var(--max-width);
  margin-inline: auto;
}

.page-intro__title {
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
}

.page-intro .lead {
  max-width: 560px;
  margin: 0 0 6px;
}

/* ---------- Featured project: image left, text right ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: 64px;
}

.feature-split__media {
  aspect-ratio: 4 / 3;
}

.feature-split__title {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 400;
}

.feature-split__text {
  margin-bottom: 32px;
  font-size: 17px;
  color: var(--text-secondary);
}

.feature-split__meta {
  margin-bottom: 24px;
}

/* Reversed: text left, media right (design-to-completion on projects.html) */
.feature-split--reverse {
  grid-template-columns: 5fr 7fr;
}

.feature-split--reverse .feature-split__body {
  order: -1;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-bar__btn {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.filter-bar__btn:hover {
  border-color: var(--charcoal);
}

.filter-bar__btn[aria-pressed="true"] {
  background-color: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
}

/* Cards fade out and in when filtered (main.js toggles these) */
.project-grid--filterable > li {
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.project-grid--filterable > li.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

.project-grid--filterable > li[hidden] {
  display: none;
}

/* ---------- Design-to-completion reveal (reusable) ----------
   Markup: <figure class="compare" data-compare> holding a .compare__frame
   with two images of the same size and crop (completed underneath,
   .compare__img--design on top), a toggle button and a live region.
   main.js (6d) sets --pos from 0% (design proposal) to 100% (completed).
   The design image is wiped away from the left with clip-path and the gold
   line follows with a transform, so the sweep stays on the compositor.
   After the reveal a transparent range input over the frame allows
   dragging. Reduced motion: section 21 cuts the transitions to instant. */
.compare {
  --pos: 0%;
  --sweep: 1.2s;
  --sweep-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.compare.is-teasing {
  --sweep: 0.55s;
}

/* After the first drag the line follows the pointer and arrow keys directly */
.compare.is-dragging {
  --sweep: 0s;
}

.compare__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--stone-dark);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.compare[data-state="design"] .compare__frame {
  cursor: pointer;
}

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

.compare__img--design {
  clip-path: inset(0 0 0 var(--pos));
  transition: clip-path var(--sweep) var(--sweep-ease);
}

/* Full-frame track, so translateX(100%) is the frame's width */
.compare__line {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: translateX(var(--pos));
  transition:
    transform var(--sweep) var(--sweep-ease),
    opacity 0.3s var(--ease);
  pointer-events: none;
}

.compare__line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background-color: var(--gold);
  box-shadow:
    0 0 14px 3px var(--gold-glow),
    0 0 3px var(--white-glow);
}

.compare.is-line-visible .compare__line {
  opacity: 1;
}

/* Two stacked labels that crossfade */
.compare__label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: grid;
  justify-items: start;
  pointer-events: none;
}

.compare__label-text,
.compare__hint {
  padding: 6px 12px;
  background-color: var(--glass-bg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
}

.compare__label-text {
  grid-area: 1 / 1;
  transition: opacity 0.4s var(--ease);
}

.compare__label-text--completed,
.compare[data-label="completed"] .compare__label-text--design {
  opacity: 0;
}

.compare[data-label="completed"] .compare__label-text--completed {
  opacity: 1;
}

/* Mid-sweep crossfade */
.compare.is-sweeping .compare__label-text {
  transition-delay: 0.45s;
}

.compare__hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.compare__hint svg {
  width: 16px;
  height: 16px;
}

.compare.is-draggable:not(.has-dragged) .compare__hint {
  opacity: 1;
}

.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare__range[hidden] {
  display: none;
}

/* Keyboard focus shows on the frame, since the input itself is invisible */
.compare__frame:has(.compare__range:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.compare__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 20px;
}

.compare__toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.compare__toggle .compare__toggle-back,
.compare[data-state="completed"] .compare__toggle-reveal {
  display: none;
}

.compare[data-state="completed"] .compare__toggle .compare__toggle-back {
  display: inline-flex;
}

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

/* The toggle needs JS; without it the design proposal simply shows */
html:not(.js) .compare__toggle {
  display: none;
}

.compare-caption {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Case-study hero: full-width image, title overlaid ---------- */
.case-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78vh, 820px);
  padding: 64px var(--gutter);
  overflow: hidden;
  background-color: var(--charcoal);
  color: var(--cream);
}

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

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

/* Bottom-weighted overlay keeps the title and meta at WCAG AA on bright photos */
.case-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--overlay-15) 0%, var(--overlay-0) 30%, var(--overlay-55) 62%, var(--overlay-75) 100%);
}

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

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 20px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--ease);
}

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

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

.case-hero__title {
  max-width: 900px;
  margin-bottom: 20px;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.04;
  color: var(--cream);
}

.case-hero .meta {
  color: var(--cream);
}

.case-hero .meta__sep {
  background-color: var(--gold);
}

.case-hero :focus-visible {
  outline-color: var(--gold);
}

/* ---------- Case-study intro + facts ---------- */
.case-intro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px 96px;
  align-items: start;
}

.case-intro__lead {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.3;
  color: var(--charcoal);
}

.case-facts {
  margin: 0;
  border-top: 1px solid var(--gold);
}

.case-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.case-facts dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.case-facts dd {
  margin: 0;
  font-size: 14px;
  text-align: right;
}

/* ---------- The Brief / The Challenge / What Embury Delivered ---------- */
.case-story {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.case-story__title {
  font-size: 34px;
  font-weight: 400;
}

.case-story__item .rule {
  margin: 20px 0;
}

.case-story__item p {
  color: var(--text-secondary);
}

.tick-list li {
  position: relative;
  padding: 0 0 12px 28px;
  color: var(--text-secondary);
}

/* Short gold dash as the bullet */
.tick-list li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 14px;
  height: 1px;
  background-color: var(--gold);
}

/* ---------- Editorial gallery ----------
   12-column grid. The generator pairs images into rows: a landscape (8)
   with a portrait (4), two landscapes (6 + 6), three portraits (4 each) or a
   single wide image (12). Each item's aspect ratio keeps rows level. */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.gallery__item {
  grid-column: span 12;
}

.gallery__item--w4 { grid-column: span 4; }
.gallery__item--w6 { grid-column: span 6; }
.gallery__item--w8 { grid-column: span 8; }

.gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

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

.gallery__link:hover img,
.gallery__link:focus-visible img {
  transform: scale(1.03);
}

.r-wide { aspect-ratio: 16 / 9; }
.r-land { aspect-ratio: 3 / 2; }
.r-port { aspect-ratio: 3 / 4; }
/* Portrait beside a landscape: stretches to the row height the landscape sets */
.r-fill { height: 100%; }

.gallery-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.photo-credit {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ---------- Lightbox (native <dialog>) ---------- */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--overlay-95);
  color: var(--cream);
}

.lightbox::backdrop {
  background-color: var(--overlay-95);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 176px);
  margin: 0;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  background-color: var(--charcoal);
}

.lightbox__caption {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 14px;
  font-size: 13px;
  color: var(--cream-80);
}

.lightbox__counter {
  flex-shrink: 0;
  letter-spacing: 0.1em;
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 50%;
  color: var(--cream);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.lightbox__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lightbox__btn svg {
  width: 20px;
  height: 20px;
}

.lightbox__btn--close {
  top: 20px;
  right: 20px;
}

.lightbox__btn--prev {
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
}

.lightbox__btn--next {
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}

body.lightbox-open {
  overflow: hidden;
}

/* ---------- Review + "Your project" panel (review text from js/reviews.js) ---------- */
.review-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border);
  background-color: var(--stone);
}

/* Two columns once reviews.js has filled in the review */
.review-panel--has-review {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.review-panel__review {
  padding: 56px clamp(32px, 4.5vw, 64px);
}

.review-panel__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 56px clamp(32px, 4.5vw, 64px);
}

.review-panel--has-review .review-panel__cta {
  border-left: 1px solid var(--border);
  background-color: var(--cream);
}

.review-panel__cta .eyebrow {
  margin-bottom: 14px;
}

.review-panel__title {
  margin-bottom: 16px;
  font-size: 38px;
  font-weight: 400;
}

.review-panel__text {
  max-width: 400px;
  color: var(--text-secondary);
}

.review-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 32px;
}

.review-card {
  margin: 0;
}

.review-card__quote p {
  max-width: 60ch;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--charcoal);
}

.review-card__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.review-card__more {
  margin-top: 12px;
}

/* Shared with the home-page carousel */
.review-stars {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
}

.review-stars__star {
  width: 16px;
  height: 16px;
  fill: var(--gold);
}

.review-card__name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.review-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.review-source__icon {
  width: 15px;
  height: 15px;
}

/* ---------- Placeholder block (before & after, still to come) ---------- */
.placeholder-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px;
  border: 1px dashed var(--gold);
  background-color: var(--stone);
  text-align: center;
}

.placeholder-block__title {
  margin-bottom: 12px;
  font-size: 36px;
  font-weight: 400;
}

.placeholder-block p {
  max-width: 520px;
  color: var(--text-secondary);
}

/* ---------- Related services ---------- */
.related-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-services > li {
  display: flex;
}

.related-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 0 0;
  border-top: 1px solid var(--gold);
  color: var(--charcoal);
}

.related-card__title {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 500;
}

.related-card__text {
  flex-grow: 1;
  margin-bottom: 20px;
  color: var(--text-secondary);
}

.related-card .btn__arrow {
  width: 20px;
  height: 20px;
}

.related-card:hover .btn__arrow,
.related-card:focus-visible .btn__arrow {
  transform: translateX(4px);
  color: var(--gold-text);
}

/* ---------- Previous / next project ---------- */
.project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.project-nav__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px 0;
  color: var(--charcoal);
}

.project-nav__link--next {
  align-items: flex-end;
  padding-left: 32px;
  border-left: 1px solid var(--border);
  text-align: right;
}

.project-nav__link--prev {
  padding-right: 32px;
}

.project-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.project-nav__title {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.15;
  transition: color var(--duration) var(--ease);
}

.project-nav__link:hover .project-nav__title {
  color: var(--gold-text);
}

/* Section titles on inner pages */
.section-title {
  margin-bottom: 40px;
  font-size: 44px;
  font-weight: 400;
}

/* ---------- Inner pages: tablet ---------- */
@media (max-width: 1279px) {
  .page-intro__title,
  .case-hero__title {
    font-size: 60px;
  }

  .feature-split,
  .feature-split--reverse {
    gap: 40px;
  }

  .feature-split__title {
    font-size: 40px;
  }

  .case-intro {
    grid-template-columns: 1fr 280px;
    gap: 48px 56px;
  }

  .case-story {
    grid-template-columns: 1fr 1fr;
  }

  .case-story__item--delivered {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .feature-split,
  .feature-split--reverse {
    grid-template-columns: 1fr;
  }

  /* Review panel: one column, review first */
  .review-panel--has-review {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-panel--has-review .review-panel__cta {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .feature-split--reverse .feature-split__body {
    order: 0;
  }

  .case-intro {
    grid-template-columns: 1fr;
  }

  .related-services {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .lightbox__figure {
    max-width: calc(100vw - 32px);
  }

  /* Arrows move below the image on smaller screens */
  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .lightbox__btn--prev {
    left: calc(50% - 64px);
  }

  .lightbox__btn--next {
    right: calc(50% - 64px);
  }

  .lightbox__img {
    max-height: calc(100vh - 200px);
  }
}

/* ---------- Inner pages: mobile ---------- */
@media (max-width: 767px) {
  .page-intro {
    padding: 56px var(--gutter) 40px;
  }

  .page-intro__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .page-intro__title,
  .case-hero__title {
    font-size: 44px;
  }

  .feature-split__title,
  .section-title {
    font-size: 34px;
  }

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

  .case-hero {
    min-height: 72vh;
    padding-block: 40px;
  }

  .case-intro__lead {
    font-size: 26px;
  }

  .case-story {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-story__title {
    font-size: 30px;
  }

  /* Gallery: two columns, landscapes full width */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery__item,
  .gallery__item--w6,
  .gallery__item--w8 {
    grid-column: span 2;
  }

  .gallery__item--w4 {
    grid-column: span 1;
  }

  .gallery {
    grid-auto-flow: dense;
  }

  .gallery__item .r-wide,
  .gallery__item .r-land {
    aspect-ratio: 3 / 2;
  }

  .gallery__item .r-fill {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .compare__label {
    top: 10px;
    left: 10px;
  }

  .compare__label-text,
  .compare__hint {
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .compare__hint {
    bottom: 10px;
  }

  .review-panel__review,
  .review-panel__cta {
    padding: 40px 20px;
  }

  .review-panel__title {
    font-size: 32px;
  }

  .review-card__quote p {
    font-size: 20px;
  }

  .placeholder-block {
    padding: 48px 20px;
  }

  .placeholder-block__title {
    font-size: 30px;
  }

  .project-nav {
    grid-template-columns: 1fr;
  }

  .project-nav__link {
    padding: 28px 0;
  }

  .project-nav__link--prev {
    padding-right: 0;
  }

  .project-nav__link--next {
    align-items: flex-start;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    text-align: left;
  }

  .project-nav__title {
    font-size: 26px;
  }

  .lightbox__btn--close {
    top: 12px;
    right: 12px;
  }
}


/* ==========================================================================
   19c. INNER PAGES: SERVICES (services.html + services/*.html)
   Service cards, split hero, overview, benefits, FAQ accordion.
   ========================================================================== */

/* ---------- Service cards (services.html grid of six) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
}

.service-grid > li {
  display: flex;
}

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

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

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

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

.service-card__title {
  margin: 22px 0 10px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}

.service-card__text {
  flex-grow: 1;
  margin-bottom: 18px;
  color: var(--text-secondary);
}

.service-card .btn__arrow {
  width: 20px;
  height: 20px;
}

.service-card:hover .btn__arrow,
.service-card:focus-visible .btn__arrow {
  transform: translateX(4px);
  color: var(--gold-text);
}

/* ---------- Service page hero: image one side, text the other ---------- */
.service-hero {
  padding: 56px var(--gutter) 88px;
}

.service-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
  max-width: var(--max-width);
  margin-inline: auto;
}

.service-hero__media {
  aspect-ratio: 6 / 5;
}

.service-hero__title {
  margin-bottom: 24px;
  font-size: 60px;
  font-weight: 400;
  line-height: 1.05;
}

.service-hero .lead {
  margin-bottom: 36px;
}

/* ---------- Overview: heading left, copy right ---------- */
.split-text {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 32px 64px;
}

.split-text__body p {
  font-size: 17px;
  color: var(--text-secondary);
}

.split-text__body .tick-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin-top: 28px;
}

/* ---------- Why clients choose Embury ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}

.benefits__item .icon {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
}

.benefits__title {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
}

.benefits__item p {
  color: var(--text-secondary);
}

/* ---------- FAQ accordion (<details>/<summary>) ---------- */
.faq {
  max-width: 880px;
  border-top: 1px solid var(--gold);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 24px 0;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

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

/* Plus that turns into a minus */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background-color: var(--gold-text);
  transition: transform var(--duration) var(--ease);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

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

.faq__answer {
  max-width: 720px;
  padding: 0 0 28px;
  color: var(--text-secondary);
}

/* ---------- Services: tablet ---------- */
@media (max-width: 1279px) {
  .service-hero__title {
    font-size: 50px;
  }

  .service-hero__inner {
    gap: 48px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .service-hero__inner {
    grid-template-columns: 1fr;
  }

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

  .split-text {
    grid-template-columns: 1fr;
  }
}

/* ---------- Services: mobile ---------- */
@media (max-width: 767px) {
  .service-hero {
    padding: 32px var(--gutter) 64px;
  }

  .service-hero__title {
    font-size: 42px;
  }

  .service-grid,
  .benefits,
  .split-text__body .tick-list {
    grid-template-columns: 1fr;
  }

  .service-grid {
    row-gap: 40px;
  }

  .faq__question {
    font-size: 21px;
    padding: 20px 0;
  }
}


/* ==========================================================================
   19d. INNER PAGES: ABOUT, LOCAL AREAS, CONTACT
   About intro + values, team cards, accreditation certificate cards, area link
   cards (pin + two-line label + chevron), footer areas list, contact layout,
   enquiry form, upload zone and success state.
   ========================================================================== */

/* Tick list followed by a link inside a feature split (about: approach) */
.feature-split__body .tick-list {
  margin-bottom: 24px;
}

/* ---------- Footer: areas we cover (column 1, under the logo) ---------- */
.site-footer__areas {
  margin-top: 36px;
}

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

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

/* ---------- Image placeholder (team photos still to come) ---------- */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background-color: var(--stone-dark);
  text-align: center;
}

.photo-placeholder .icon {
  width: 44px;
  height: 44px;
  stroke: var(--gold-deep);
}

.photo-placeholder__text {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
}

/* ---------- About intro: image left, text + values right ---------- */
.about-intro {
  padding: 56px var(--gutter) 96px;
}

.about-intro__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 72px;
  max-width: var(--max-width);
  margin-inline: auto;
}

.about-intro__media {
  aspect-ratio: 5 / 4;
}

.about-intro__title {
  margin-bottom: 24px;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.08;
}

.about-intro__text {
  margin-bottom: 36px;
  font-size: 17px;
  color: var(--text-secondary);
}

/* 2×2 values with a thin vertical divider between the columns */
.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 0;
  margin-bottom: 40px;
}

.values__item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
}

.values__item:nth-child(odd) {
  padding-right: 24px;
  border-right: 1px solid var(--border);
}

.values__item:nth-child(even) {
  padding-left: 32px;
}

/* ---------- Team cards ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

.team-card__media {
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
}

.team-card__name {
  margin-bottom: 6px;
  font-size: 26px;
  font-weight: 500;
}

.team-card__text {
  margin-top: 12px;
  color: var(--text-secondary);
}

/* ---------- Accreditation certificate cards ---------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cert-card {
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: center;
  gap: 32px;
  padding: 28px;
  border: 1px solid var(--border);
  background-color: var(--white);
}

.cert-card__media {
  display: block;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration) var(--ease);
}

.cert-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.cert-card:hover .cert-card__media {
  transform: translateY(-3px);
}

.cert-card__title {
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 500;
}

.cert-card__text {
  margin-bottom: 14px;
  color: var(--text-secondary);
}

.cert-card__issuer {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Area link cards: pin, two-line label, chevron ---------- */
.area-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.area-link {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  background-color: var(--cream);
  color: var(--charcoal);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.area-link:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

.area-link__label {
  flex-grow: 1;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.area-link__label small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

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

.area-link:hover .area-link__chevron {
  transform: translateX(4px);
}

/* ---------- Contact: intro | form card | tall image ---------- */
.contact-layout {
  padding: 56px var(--gutter) 96px;
}

.contact-layout__inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  align-items: start;
  gap: 32px;
  max-width: var(--max-width);
  margin-inline: auto;
}

.contact-intro__title {
  margin-bottom: 20px;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.05;
}

.contact-intro__text {
  margin-bottom: 28px;
  color: var(--text-secondary);
}

.reassurance {
  margin-bottom: 32px;
  border-top: 1px solid var(--border);
}

.reassurance li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.contact-intro__media {
  aspect-ratio: 5 / 4;
}

.contact-aside {
  position: sticky;
  top: calc(var(--header-height-scrolled) + 24px);
  aspect-ratio: 2 / 3;
}

/* Contact details + areas served */
.contact-details {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 32px 64px;
}

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

.contact-details__value {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
}

a.contact-details__value:hover {
  color: var(--gold-text);
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-list li {
  display: flex;
}

.area-list a,
.area-list span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background-color: var(--cream);
  font-size: 14px;
}

.area-list a {
  border-color: var(--gold);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.area-list a:hover {
  background-color: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
}

/* ---------- Enquiry form ---------- */
.form-card {
  padding: 40px;
  background-color: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.form-card__title {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: 400;
}

.form-card__note {
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-field {
  margin-bottom: 20px;
}

.form-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
}

.form-field__req {
  color: var(--gold-text);
}

.form-field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background-color: var(--cream);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--charcoal);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.form-field__input:hover {
  border-color: var(--stone-dark);
}

.form-field__input:focus {
  border-color: var(--gold);
  background-color: var(--white);
}

.form-field__input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 0;
}

textarea.form-field__input {
  min-height: 140px;
  resize: vertical;
}

/* Custom chevron on selects */
.form-field__select {
  position: relative;
}

.form-field__select select {
  padding-right: 44px;
  appearance: none;
  cursor: pointer;
}

.form-field__select .arrow-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

.form-field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.form-field__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--error);
}

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

/* Optional call or site visit request: a ruled group inside the form */
.form-visit {
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.form-visit__title {
  margin-bottom: 16px;
}

.form-visit__note {
  margin: -8px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

/* Honeypot: off-screen for people, still in the form for bots */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Photos are emailed after sending (no uploads on the site) */
.form-card__photos {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.form-card__photos a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration) var(--ease);
}

.form-card__photos a:hover {
  color: var(--gold-text);
}

/* Send error, shown above the buttons */
.form-status {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--error);
  background-color: rgba(161, 52, 42, 0.06);
  font-size: 14px;
  color: var(--error);
}

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

.form-status:focus {
  outline: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.form-actions .btn {
  flex: 1 1 auto;
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-card__privacy {
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.form-card__privacy a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration) var(--ease);
}

.form-card__privacy a:hover {
  color: var(--gold-text);
}

/* Success state, shown in place of the form */
.form-success[hidden] {
  display: none;
}

.form-success .icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}

.form-success__title {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: 400;
}

.form-success p {
  color: var(--text-secondary);
}

.form-success__title:focus {
  outline: none;
}

/* ---------- About / local / contact: tablet ---------- */
@media (max-width: 1279px) {
  .about-intro__inner {
    gap: 48px;
  }

  .about-intro__title,
  .contact-intro__title {
    font-size: 44px;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-details {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }

  .contact-details__areas {
    grid-column: 1 / -1;
  }
}

/* Drop the tall image first, then stack */
@media (max-width: 1199px) {
  .contact-layout__inner {
    grid-template-columns: 1fr 1.4fr;
  }

  .contact-aside {
    display: none;
  }

  .area-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .cert-grid {
    grid-template-columns: 1fr;
  }

  .about-intro__inner,
  .contact-layout__inner {
    grid-template-columns: 1fr;
  }

  .about-intro__media {
    aspect-ratio: 4 / 3;
  }

  /* Mobile order: intro, form, contact details (brief §11) */
  .contact-intro__media {
    display: none;
  }
}

/* ---------- About / local / contact: mobile ---------- */
@media (max-width: 767px) {
  .about-intro,
  .contact-layout {
    padding: 32px var(--gutter) 64px;
  }

  .about-intro__title,
  .contact-intro__title {
    font-size: 38px;
  }

  .values {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .values__item:nth-child(odd),
  .values__item:nth-child(even) {
    padding: 0;
    border-right: 0;
  }

  .team-grid {
    gap: 32px 16px;
  }

  .team-card__name {
    font-size: 22px;
  }

  .cert-card {
    grid-template-columns: 96px 1fr;
    gap: 20px;
    padding: 20px;
  }

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

  .contact-details {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .form-card {
    padding: 28px 20px;
  }

  .form-field__row {
    grid-template-columns: 1fr;
  }

  .form-actions .btn {
    width: 100%;
  }
}


/* ==========================================================================
   19e. INNER PAGES: LEGAL (terms-and-conditions.html, privacy-policy.html)
   Single reading column: title, version, intro note, contents, clauses.
   ========================================================================== */
.legal {
  padding: 72px var(--gutter) 100px;
}

.legal__inner {
  max-width: 760px;
  margin-inline: auto;
}

.legal__title {
  margin-bottom: 16px;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
}

.legal__subtitle {
  margin-bottom: 24px;
  font-size: 18px;
  color: var(--text-secondary);
}

.legal__meta {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}

.legal__meta strong {
  font-weight: 500;
  color: var(--charcoal);
}

.legal__note {
  margin: 32px 0 48px;
  padding: 24px 28px;
  background-color: var(--stone);
  border-left: 2px solid var(--gold);
  font-size: 15px;
}

.legal__note strong {
  font-weight: 600;
}

/* Contents */
.legal-toc {
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

/* No intro note between header and contents (privacy policy) */
.legal__header + .legal-toc {
  margin-top: 40px;
}

.legal-toc__title {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 400;
}

.legal-toc__list {
  columns: 2;
  column-gap: 40px;
}

.legal-toc__list li {
  break-inside: avoid;
}

.legal-toc__list a {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--charcoal);
  transition: color var(--duration) var(--ease);
}

.legal-toc__list a:hover {
  color: var(--gold-text);
}

.legal-toc__num {
  flex: 0 0 22px;
  color: var(--gold-text);
}

/* Sections and numbered clauses */
.legal__section + .legal__section {
  margin-top: 56px;
}

.legal__heading {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.legal__heading-num {
  flex: 0 0 auto;
  color: var(--gold-text);
}

.legal__clause {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.legal__clause-num {
  flex: 0 0 40px;
  font-weight: 500;
  color: var(--charcoal);
}

/* Unnumbered paragraphs and bullet lists (privacy policy) */
.legal__text {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.legal__list {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.legal__list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
}

.legal__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

.legal__text strong,
.legal__list strong {
  font-weight: 500;
  color: var(--charcoal);
}

.legal__address {
  font-style: normal;
}

.legal__body a,
.legal__note a,
.legal__meta a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__back {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .legal {
    padding: 40px var(--gutter) 72px;
  }

  .legal__title {
    font-size: 40px;
  }

  .legal__note {
    padding: 20px;
  }

  .legal-toc__list {
    columns: 1;
  }

  .legal__heading {
    gap: 12px;
    font-size: 26px;
  }

  .legal__clause {
    gap: 12px;
  }

  .legal__clause-num {
    flex-basis: 34px;
  }
}


/* ==========================================================================
   19f. INNER PAGES: WHAT'S INCLUDED (whats-included.html) + CROSS-LINKS
   Hero, project pack flat-lay with detail panels, stage timeline.
   The FAQ, design-to-completion reveal and CTA band reuse earlier sections.
   ========================================================================== */

/* ---------- Cross-links to the page ---------- */
/* Homepage: under the How We Work steps */
.process__more {
  margin-top: 48px;
  text-align: center;
}

/* design-studio.html: sits above the planner, aligned with its content */
.studio-crosslink {
  display: flex;
  justify-content: flex-end;
  max-width: 1440px;
  margin-inline: auto;
  padding: 12px var(--gutter) 0;
}

/* ---------- Hero ---------- */
.pack-hero {
  padding: 88px var(--gutter) 40px;
}

.pack-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
}

.pack-hero__title {
  max-width: 920px;
  margin-bottom: 28px;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.02;
}

.pack-hero .lead {
  max-width: 640px;
  margin-bottom: 36px;
}

/* ---------- Flat-lay: the pack laid out on a stone surface ----------
   Each item is a <button> placed with custom properties on its <li>:
   --x / --y (top-left, % of the surface), --w (width, % of the surface),
   --r (rotation) and --z (stacking). Hover/focus lifts the item and shows
   its label. At 960px and below the same buttons become a grid of cards. */
.flatlay {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 40px;
  background-color: var(--stone);
  border: 1px solid var(--border);
}

.flatlay__items {
  position: absolute;
  inset: 0;
}

.flatlay__items > li {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: var(--z, 1);
  width: var(--w);
}

.flatlay__items > li:has(:hover, :focus-visible) {
  z-index: 20;
}

.flatlay__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.45s var(--ease);
}

.flatlay__item:hover,
.flatlay__item:focus-visible {
  transform: rotate(calc(var(--r, 0deg) * 0.4)) translateY(-10px) scale(1.035);
}

.flatlay__item:focus-visible {
  outline-offset: 6px;
}

/* Paper, board or print */
.flatlay__sheet {
  display: block;
  background-color: var(--white);
  box-shadow: var(--shadow-paper);
  transition: box-shadow 0.45s var(--ease);
}

.flatlay__item:hover .flatlay__sheet,
.flatlay__item:focus-visible .flatlay__sheet {
  box-shadow: var(--shadow-lift);
}

.flatlay__sheet svg,
.flatlay__sheet img {
  display: block;
  width: 100%;
  height: auto;
}

/* Drawings: the rendering printed with a white border and taped down */
.flatlay__sheet--print {
  position: relative;
  padding: 3.5% 3.5% 9%;
}

.flatlay__sheet--print::before,
.flatlay__sheet--print::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 22%;
  height: 22px;
  background-color: var(--cream-80);
  box-shadow: 0 0 0 1px var(--border);
}

.flatlay__sheet--print::before {
  left: 8%;
  transform: rotate(-4deg);
}

.flatlay__sheet--print::after {
  right: 8%;
  transform: rotate(5deg);
}

/* Title block under the print, like a drawing sheet */
.flatlay__titleblock {
  position: absolute;
  right: 3.5%;
  bottom: 3%;
  left: 3.5%;
  height: 3.5%;
  border-top: 1px solid var(--charcoal);
}

.flatlay__titleblock::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 0;
  width: 28%;
  height: 1px;
  background-color: var(--gold);
}

/* Label pill: appears over the lower part of the item, kept level */
.flatlay__label {
  position: absolute;
  bottom: 14px;
  left: 50%;
  padding: 7px 14px;
  background-color: var(--charcoal);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  opacity: 0;
  transform: translate(-50%, 6px) rotate(calc(var(--r, 0deg) * -0.4));
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.flatlay__item:hover .flatlay__label,
.flatlay__item:focus-visible .flatlay__label {
  opacity: 1;
  transform: translate(-50%, 0) rotate(calc(var(--r, 0deg) * -0.4));
}

/* "View details" only shows on the card layout */
.flatlay__more {
  display: none;
}

/* Decorative pencil, not interactive */
.flatlay__pencil {
  position: absolute;
  right: 3%;
  bottom: 6%;
  width: 22%;
  transform: rotate(-24deg);
  pointer-events: none;
}

.flatlay-hint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Illustration strokes and fills (inline SVG) */
.fl-text {
  fill: none;
  stroke: var(--stone-dark);
  stroke-width: 3;
  stroke-linecap: round;
}

.fl-text--dark {
  stroke: var(--text-secondary);
}

.fl-ink {
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-rule {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.fl-gold-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
}

.fl-gold { fill: var(--gold); }
.fl-gold-deep { fill: var(--gold-deep); }
.fl-charcoal { fill: var(--charcoal); }
.fl-stone { fill: var(--stone); }
.fl-stone-dark { fill: var(--stone-dark); }
.fl-cream { fill: var(--cream); }
.fl-timber { fill: var(--swatch-timber); }
.fl-timber-dark { fill: var(--swatch-timber-dark); }
.fl-tile { fill: var(--swatch-tile); }
.fl-marble { fill: var(--swatch-marble); }

.fl-vein {
  fill: none;
  stroke: var(--swatch-marble-vein);
  stroke-width: 1.2;
}

.fl-grout {
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.5;
}

/* ---------- Detail panel (<dialog>): side panel, bottom sheet on mobile ---------- */
.pack-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--cream);
  color: var(--charcoal);
  box-shadow: var(--shadow-glass);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pack-panel[open] {
  animation: pack-panel-in 0.45s var(--ease);
}

.pack-panel.is-closing {
  animation: pack-panel-out 0.3s var(--ease) forwards;
}

.pack-panel::backdrop {
  background-color: var(--overlay-45);
}

.pack-panel[open]::backdrop {
  animation: pack-backdrop-in 0.45s var(--ease);
}

.pack-panel.is-closing::backdrop {
  animation: pack-backdrop-out 0.3s var(--ease) forwards;
}

/* The page behind stays still while a panel is open */
html:has(.pack-panel[open]) {
  overflow: hidden;
}

.pack-panel__inner {
  padding: 72px 48px 48px;
}

.pack-panel__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--cream);
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.pack-panel__close:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}

.pack-panel__close svg {
  width: 16px;
  height: 16px;
}

.pack-panel__title {
  margin-bottom: 24px;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
}

.pack-panel__figure {
  margin: 0 0 28px;
}

.pack-panel__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--stone-dark);
}

.pack-panel__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pack-panel__body p {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.pack-panel__body .text-link {
  margin-top: 8px;
}

@keyframes pack-panel-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes pack-panel-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes pack-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pack-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ---------- What you receive at each stage (vertical timeline) ---------- */
.stages {
  max-width: 1000px;
}

.stages__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 260px) minmax(0, 1fr);
  gap: 0 36px;
  padding-bottom: 44px;
}

/* Line joining each circle to the next */
.stages__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 22px;
  width: 1px;
  background-color: var(--stone-dark);
}

.stages__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  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;
}

.stages__title {
  padding-top: 6px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.stages__body {
  padding-top: 10px;
}

.stages__body .tick-list li:last-child {
  padding-bottom: 0;
}

.stages__body a {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stages__note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---------- What's Included: tablet ---------- */
@media (max-width: 1279px) {
  .pack-hero__title {
    font-size: 60px;
  }
}

/* ---------- What's Included: card layout below 961px ---------- */
@media (max-width: 960px) {
  .flatlay {
    aspect-ratio: auto;
    border: 0;
    background: none;
  }

  .flatlay__items {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .flatlay__items > li {
    position: static;
    width: auto;
  }

  /* Seven cards: the drawings lead full width, then three rows of two */
  .flatlay__items > li:first-child {
    grid-column: 1 / -1;
    --card-w: 64%;
  }

  .flatlay__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 20px 20px;
    background-color: var(--stone);
    transform: none;
    transition: background-color var(--duration) var(--ease);
  }

  .flatlay__item:hover,
  .flatlay__item:focus-visible {
    transform: none;
    background-color: var(--stone-dark);
  }

  .flatlay__item:focus-visible {
    outline-offset: 3px;
  }

  /* Illustration centred at a size that suits its shape */
  .flatlay__sheet {
    align-self: center;
    width: var(--card-w, 56%);
    margin-bottom: 20px;
  }

  .flatlay__sheet--print::before,
  .flatlay__sheet--print::after {
    top: -6px;
    height: 12px;
  }

  .flatlay__label {
    position: static;
    padding: 0;
    background: none;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: var(--charcoal);
    opacity: 1;
    transform: none;
  }

  .flatlay__item:hover .flatlay__label,
  .flatlay__item:focus-visible .flatlay__label {
    transform: none;
  }

  .flatlay__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-text);
  }

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

  .flatlay__pencil {
    display: none;
  }

  .stages__item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 24px;
  }

  .stages__body {
    grid-column: 2;
  }
}

/* ---------- What's Included: mobile ---------- */
@media (max-width: 767px) {
  .pack-hero {
    padding: 48px var(--gutter) 24px;
  }

  .pack-hero__title {
    font-size: 42px;
  }

  .flatlay__items {
    gap: 12px;
  }

  .flatlay__item {
    padding: 18px 14px 16px;
  }

  .flatlay__label {
    font-size: 18px;
  }

  .stages__title {
    font-size: 24px;
  }

  .studio-crosslink {
    justify-content: flex-start;
  }

  /* Bottom sheet */
  .pack-panel {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
  }

  .pack-panel[open] {
    animation-name: pack-sheet-in;
  }

  .pack-panel.is-closing {
    animation-name: pack-sheet-out;
  }

  .pack-panel__inner {
    padding: 64px 20px 32px;
  }

  .pack-panel__title {
    font-size: 32px;
  }

  @keyframes pack-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes pack-sheet-out {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }
}

/* ---------- What's Included: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .flatlay__item:hover,
  .flatlay__item:focus-visible {
    transform: rotate(var(--r, 0deg));
  }

  .pack-panel[open],
  .pack-panel.is-closing,
  .pack-panel[open]::backdrop,
  .pack-panel.is-closing::backdrop {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 960px) {
  .flatlay__item:hover,
  .flatlay__item:focus-visible {
    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: 36px;
  }

  /* 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: 19px;
  }

  /* 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,
  .service-card:hover .service-card__media img,
  .gallery__link:hover img {
    transform: none;
  }
}