/* =========================================================================
   The Oak Blokes — Specialist Heritage Builder
   Brand-lock: #f0a830 oak/amber + heritage neutrals
   Niche: specialist-heritage-builder (editorial-scrim)
   ========================================================================= */

:root {
  /* Brand */
  --brand-primary: #f0a830;        /* logo extract — oak/amber gold */
  --brand-primary-deep: #c87a14;   /* darker oak shade for hover/active */
  --brand-accent: #6b4a2b;         /* deep oak brown */

  /* Heritage neutrals */
  --ink: #1a1d24;                  /* charcoal — body text + section bg */
  --ink-soft: #2a2e36;             /* one step lighter for cards on dark */
  --cream: #f6f1e7;                /* parchment — alt section bg */
  --cream-soft: #fbf8f1;           /* lightest paper tone */
  --line: #d9d2c2;                 /* divider on cream */
  --line-dark: #353941;            /* divider on ink */
  --muted: #5d6470;                /* body grey for sub-copy on cream */
  --muted-light: #b6bcc8;          /* sub-copy on ink */
  --moss: #4f5a3e;                 /* sub-accent */

  /* Type */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Geometry */
  --nav-h: 76px;
  --container-pad: clamp(1.25rem, 4vw, 3.25rem);
  --section-pad-y: clamp(4.5rem, 10vh, 9rem);
  --max-w: 1240px;
  --max-w-wide: 1440px;
  --r-card: 14px;
  --r-pill: 999px;
}


/* -- Universal floor -------------------------------------------------------- */
html { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* NOTE: no `overflow-x: clip/hidden` on html/body — it breaks position:fixed on
   iOS WebKit (the sticky nav scrolls away, fixed menus open off-screen). The
   carousel rail and marquee clip themselves via their own containers, so the
   page has no horizontal overflow without a root clip. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}
img, video, picture { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; }
input, textarea, select, button {
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
}
button, .btn, a.btn, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
button:active, .btn:active { transform: scale(0.96); }

@media (scripting: none) {
  .reveal-up, .reveal-fade, .reveal-stagger > *, .reveal-section, .section-head {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal-up, .reveal-fade, .reveal-stagger > *, .reveal-section, .section-head {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
}

.bottom-cta, .fixed-cta-bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Designed placeholder */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border: 1.5px dashed currentColor;
  border-radius: var(--r-card);
  opacity: 0.7;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
}
.placeholder--photo {
  aspect-ratio: 4/5;
  background: rgba(107,74,43,0.06);
  color: var(--brand-accent);
}

/* -- Container -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--container-pad); }
.container--wide { max-width: var(--max-w-wide); }
.container--narrow { max-width: 960px; }
.section { padding-block: var(--section-pad-y); }

/* -- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--brand-primary);
  color: var(--ink);
  border-color: var(--brand-primary);
}
.btn--primary:hover {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(246,241,231,0.55);
}
.btn--ghost-light:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.btn--lg { padding: 1.1rem 2rem; font-size: 0.98rem; }

/* -- Nav (full-width top bar; transparent over hero; solid on scroll) ------ */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--container-pad);
  background: transparent;
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, box-shadow 280ms ease, transform 320ms ease;
  color: var(--cream);
}
/* Mobile reveal-on-scroll-up: nav tucks away on scroll-down, slides back on
   scroll-up (class toggled by stickyNav() in animations.js). Only ever added
   on phones, and only while .is-scrolled (fixed), so desktop is untouched. */
.nav.is-scrolled.nav--hidden { transform: translateY(-100%); }
.nav.is-scrolled {
  position: fixed;
  background: rgba(20,18,14,0.93);
  border-bottom: 1px solid rgba(246,241,231,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  margin-right: 0;
  order: 1;
}
.nav__brand img {
  height: 46px;
  width: auto;
  display: block;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.nav__brand-sub {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nav__menu {
  display: flex;
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav__menu li { margin: 0; padding: 0; max-width: none; }
.nav__menu a {
  text-decoration: none;
  color: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}
@media (max-width: 1180px) { .nav__menu { gap: 1.25rem; } }
.nav__menu a:hover { color: var(--brand-primary); }
.nav__menu a.is-active { color: var(--brand-primary); }
.nav__cta {
  margin-left: 1.8rem;
}
.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.nav__hamburger svg { width: 22px; height: 22px; }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;                       /* fills the viewport in ANY iOS toolbar state; no vh/svh */
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: var(--container-pad);
  padding-top: calc(var(--nav-h) + 1rem);
  padding-bottom: calc(var(--container-pad) + env(safe-area-inset-bottom) + 1.25rem);
  display: none;
  flex-direction: column;
  overflow: hidden;               /* links flex to fill; CTA pinned bottom; no scroll */
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--cream);
  border-radius: 8px;
  color: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;    /* links grouped at the top */
  flex: 1 1 auto;                 /* grows to push the CTA to the bottom */
  min-height: 0;
  gap: 0.25rem;
}
.mobile-menu__links li:last-child a { border-bottom: none; }  /* no trailing rule into the void */
.mobile-menu__links a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 500;
  text-decoration: none;
  color: var(--cream);
  line-height: 1.15;
  border-bottom: 1px solid rgba(246,241,231,0.1);
}
.mobile-menu__contact {
  flex: 0 0 auto;                  /* pinned to the bottom */
  margin-top: 2rem;
  padding-top: 0;                  /* no stray divider above the CTA */
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-light);
}
.mobile-menu__contact a { color: var(--cream); text-decoration: none; }
.mobile-menu__cta { margin-top: 1.5rem; }

@media (max-width: 980px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  .nav__brand-text { display: none; }
  .nav__brand img { height: 42px; }
}

/* -- HERO (editorial-scrim) ----------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(20,18,14,0.62) 0%,
      rgba(20,18,14,0.32) 50%,
      rgba(20,18,14,0.72) 100%
    );
}
.hero__inner {
  width: 100%;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 4rem) var(--container-pad) 4rem;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: end;
}
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 1.4rem;
}
.hero__kicker::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--brand-primary);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 1.4rem;
  color: var(--cream);
}
.hero h1 .accent {
  color: var(--brand-primary);
  font-style: italic;
}
.hero__sub {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(246,241,231,0.86);
  max-width: 44ch;
  margin: 0 0 2rem;
}
.hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.hero__right {
  align-self: end;
}
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(246,241,231,0.18);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hero__meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}
.hero__meta-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
}
.hero__meta-value small {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  display: block;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 0.15rem;
}
.hero__meta-awards {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.3rem;
}
.hero__meta-awards img {
  height: 54px;
  width: auto;
  display: block;
  background: rgba(248,245,239,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}

@media (max-width: 980px) {
  .hero { min-height: 92dvh; align-items: end; }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding: calc(var(--nav-h) + 3rem) var(--container-pad) 2.6rem;
  }
  .hero__meta { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.4rem; }
  .hero__meta-value { font-size: 1.15rem; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.1rem); }
  .hero__sub { font-size: 1rem; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* -- PAGE-HERO (smaller, for sub-pages) ---------------------------------- */
.page-hero {
  position: relative;
  min-height: 56vh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  color: var(--cream);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,14,0.52) 0%, rgba(20,18,14,0.30) 50%, rgba(20,18,14,0.72) 100%);
}
.page-hero__inner {
  width: 100%;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 3.5rem) var(--container-pad) 3rem;
}
.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.92;
}
.page-hero__kicker::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--brand-primary);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  line-height: 1.06;
  margin: 0 0 1.1rem;
  color: var(--cream);
  max-width: 22ch;
}
/* .page-hero h1 is (0,1,1) and .accent is (0,1,0), so the heading's own colour
   wins and the accent silently renders cream. Match the .hero h1 .accent rule. */
.page-hero h1 .accent { color: var(--brand-primary); font-style: italic; }
.page-hero__sub {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 56ch;
  color: rgba(246,241,231,0.86);
  margin: 0 0 1.6rem;
}
.page-hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* -- SEO heading: the build sheet heading, sitting quietly under the H1 ---
   Quiet, never hidden. Google's spam policy names font-size or opacity 0 as
   hidden text, so this stays at a readable size and a readable contrast. */
.page-hero__seo,
.hero__seo {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(246,241,231,0.80);
  margin: -0.35rem 0 1.15rem;
  max-width: 52ch;
}
@media (max-width: 720px) {
  .page-hero__seo,
  .hero__seo { font-size: 0.94rem; margin: -0.1rem 0 1rem; }
}
@media (max-width: 720px) {
  .page-hero { min-height: 60vh; }
  .page-hero__inner { padding: calc(var(--nav-h) + 2.5rem) var(--container-pad) 2.2rem; }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* -- Section-head (kicker + H2 + intro) ---------------------------------- */
.section-head {
  margin-bottom: 3.5rem;
  max-width: 64rem;
}
.section-head--center { text-align: center; margin-inline: auto; }
/* Header row: title left, "see all" link right (aligned to content's right edge); tighter gap pulls cards up */
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; text-align: left; margin-bottom: 1.6rem; max-width: none; width: 100%; }
.section-head--row > div { min-width: 0; }
.section-head__link {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em;
  color: var(--brand-primary-deep); text-decoration: none;
  border-bottom: 2px solid var(--brand-primary); padding-bottom: 4px;
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; flex: none;
  transition: color .2s ease, border-color .2s ease;
}
.section-head__link span { transition: transform .2s ease; }
.section-head__link:hover { color: var(--brand-primary); }
.section-head__link:hover span { transform: translateX(3px); }
@media (max-width: 640px) {
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.section-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 1rem;
}
.section-head__kicker::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--brand-primary);
}
.section-head h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  letter-spacing: -0.005em;
}
.section-head h2 .accent { color: var(--brand-primary-deep); font-style: italic; }
.section-head__sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}
.section-head--center .section-head__sub { margin-inline: auto; }
.feature-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.feature-band__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; }
.feature-band__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .feature-band { grid-template-columns: 1fr; } }
/* YouTube facade (testimonials + home) */
.yt-facade { position: relative; overflow: hidden; cursor: pointer; background: var(--ink); border-radius: inherit; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.045); }
.yt-facade__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border: 0; border-radius: 50%; background: rgba(240,168,48,.94); color: var(--ink); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Video testimonial: label ABOVE the player (was an overlay that covered the
   YouTube controls). Player uses the padding-bottom ratio hack — iOS WebKit
   collapses an aspect-ratio-sized iframe box to ~150px. */
.testimonial-card--video { padding: 1.6rem 1.7rem; overflow: visible; position: relative; display: flex; flex-direction: column; gap: 0.9rem; }
.testimonial-card.testimonial-card--video::before { content: none; }
.testimonial-card--video .yt-facade { position: relative; inset: auto; width: 100%; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; }
.testimonial-video__cap { display: block; padding: 0; background: none; color: var(--brand-primary); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; line-height: 1.3; pointer-events: auto; }
.footer__social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--cream); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.footer__social a:hover { background: var(--brand-primary); color: var(--ink); border-color: var(--brand-primary); }
/* Socials sit right of the brand (left group); nav + CTA stay on the right. */
.nav__social { order: 2; display: flex; align-items: center; gap: 0.35rem; margin-left: 1.1rem; }
.nav__social a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.5rem; color: var(--cream); opacity: 0.72; transition: opacity .2s ease, color .2s ease; }
.nav__social a:hover { opacity: 1; color: var(--brand-primary); }
.nav > nav { order: 3; margin-left: auto; }
.nav__cta { order: 4; }
.nav__hamburger { order: 5; margin-left: auto; }
@media (max-width: 1080px) { .nav__social { display: none; } }
@media (max-width: 720px) {
  .section-head { margin-bottom: 2.4rem; }
  .section-head h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
}

/* Section variants */
.section--ink {
  background: var(--ink);
  color: var(--cream);
}
.section--ink .section-head h2 { color: var(--cream); }
.section--ink .section-head__sub { color: var(--muted-light); }
.section--ink .section-head__kicker { color: var(--brand-primary); }
.section--cream { background: var(--cream); }
.section--cream-soft { background: var(--cream-soft); }

/* -- Trust rail (hero-trust scroll-velocity) ----------------------------- */
.hero-trust-rail {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: 1.6rem 0;
  border-top: 1px solid rgba(246,241,231,0.08);
  border-bottom: 1px solid rgba(246,241,231,0.08);
  overflow: hidden;
}
.hero-trust-rail .rail-track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.hero-trust-rail__item {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-trust-rail__item .dot {
  width: 4px; height: 4px;
  background: var(--brand-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-trust-rail__item img {
  height: 38px;
  width: auto;
  display: inline-block;
}
.hero-trust-rail__item strong {
  font-weight: 600;
  color: var(--brand-primary);
}

/* -- Featured projects rail (scroll-velocity) ---------------------------- */
.featured-projects-rail {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) rgba(255,255,255,0.12);
}
.featured-projects-rail::-webkit-scrollbar { height: 8px; }
.featured-projects-rail::-webkit-scrollbar-track { background: rgba(255,255,255,0.12); border-radius: 4px; }
.featured-projects-rail::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 4px; }
.featured-projects-rail .rail-track {
  display: flex;
  gap: 1.5rem;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.featured-projects-rail .project-card { scroll-snap-align: start; }
.project-card {
  flex: 0 0 460px;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
  background: #211d17;
  border-radius: var(--r-card);
  overflow: hidden;
}
.project-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 0;
  background: var(--ink-soft);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__media::after { display: none; }
.project-card__overlay {
  position: static;
  padding: 1.05rem 1.35rem 1.3rem;
  color: var(--cream);
}
.project-card__tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.45rem;
}
.project-card__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
  color: var(--cream);
}
.project-card__sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(246,241,231,0.78);
  margin-top: 0.35rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .project-card { flex: 0 0 320px; }
  .project-card__title { font-size: 1.25rem; }
}

/* -- Services 1+2 editorial split --------------------------------------- */
.services-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.4rem;
  align-items: stretch;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-soft);
  color: var(--cream);
  text-decoration: none;
  min-height: 360px;
}
.service-card__media {
  position: relative;
  flex: 1;
  min-height: 280px;
  overflow: hidden;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.service-card:hover .service-card__media img { transform: scale(1.04); }
.service-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.8rem;
  background: linear-gradient(180deg, transparent 0%, rgba(20,18,14,0.88) 60%, rgba(20,18,14,0.95) 100%);
  z-index: 2;
}
.service-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--brand-primary);
  margin-bottom: 0.55rem;
}
.service-card h3 {
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0 0 0.55rem;
  color: var(--cream);
  line-height: 1.18;
}
.service-card__body p {
  font-size: 0.95rem;
  color: rgba(246,241,231,0.82);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
}
.service-card__link::after {
  content: '→';
  font-size: 1rem;
  transition: transform 220ms ease;
}
.service-card:hover .service-card__link::after { transform: translateX(4px); }
.services-split__right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
}
.services-split__right .service-card { min-height: 260px; }
.services-split__right .service-card__media { min-height: 200px; }
@media (max-width: 900px) {
  .services-split {
    grid-template-columns: 1fr;
  }
  .services-split__right { grid-template-rows: auto; gap: 1.5rem; }
}

/* -- Services list page ------------------------------------------------- */
.services-list { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.service-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}
.service-row:nth-child(even) { direction: rtl; }
.service-row:nth-child(even) > * { direction: ltr; }
.service-row__media {
  position: relative;
  aspect-ratio: 5/4;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--ink-soft);
}
.service-row__media img { width: 100%; height: 100%; object-fit: cover; }
.service-row__body {
  padding: 1rem 0;
}
.service-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--brand-primary-deep);
  margin-bottom: 0.6rem;
}
.service-row h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  margin: 0 0 1rem;
  line-height: 1.1;
}
.service-row p {
  font-size: 1.04rem;
  color: var(--ink);
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 50ch;
}
.service-row__bullets {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.2rem;
}
.service-row__bullets li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
}
.service-row__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
}

/* A line of internal links in the hero: same size, a touch quieter, tighter
   above so it reads as a footnote to the lede rather than a second paragraph. */
.page-hero__links {
  margin-top: -0.9rem;
  font-size: 0.98rem;
  color: rgba(246,241,231,0.78);
}

/* -- Hero titles run wide, not crammed into a narrow left column (Jekan, 2026-09-23) ----
   Home: the title spans the full container above the stat strip, which only fills the bottom
   of the right column. The paragraph under it stays in the left column, level with the strip.
   Inner pages: the title runs to the container edge, the text beneath it a readable measure. */
@media (min-width: 1025px) {
  .hero h1 { width: max-content; max-width: calc(min(var(--max-w-wide), 100vw) - 2 * var(--container-pad)); }
  /* The three stats stack one above another on the right, each with the column's full width, so
     none is squashed. The title, text and buttons sit higher on the photo. */
  .hero__right { justify-self: end; width: min(100%, 420px); }
  .hero__meta { grid-template-columns: 1fr; gap: 1.3rem; border-top: none; padding-top: 0; }
  .hero__meta-item + .hero__meta-item { padding-top: 1.3rem; border-top: 1px solid rgba(246,241,231,0.14); }
  .hero__left { align-self: center; }
  .hero__sub { max-width: 56ch; }
}
/* Readable text on a light photo: darken the photo on the left, where the text sits, and give the
   letters a soft shadow. The right-hand side of the photo stays bright. */
.page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(20,18,14,0.66) 0%, rgba(20,18,14,0.42) 45%, rgba(20,18,14,0.08) 85%),
    linear-gradient(180deg, rgba(20,18,14,0.40) 0%, rgba(20,18,14,0.18) 50%, rgba(20,18,14,0.60) 100%);
}
.page-hero h1, .page-hero__seo, .page-hero__sub, .page-hero__kicker { text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
@media (max-width: 720px) {
  .page-hero__scrim { background: linear-gradient(180deg, rgba(20,18,14,0.55) 0%, rgba(20,18,14,0.45) 50%, rgba(20,18,14,0.78) 100%); }
}
.page-hero h1 { max-width: none; }
.page-hero__sub { max-width: 72ch; }
.page-hero__seo, .hero__seo { max-width: 72ch; }

/* -- SEO page components ------------------------------------------------------
   about-snap--long: the photo keeps its column width when the text beside it runs
   long. Without it, the grid stretches the 4:3 photo to the text's height, which
   forces it wider than its column and over the text. */
.about-snap.about-snap--long { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
/* two classes, so it beats the base .about-snap rule, which sits later in this file */
@media (max-width: 900px) { .about-snap.about-snap--long { grid-template-columns: 1fr; } }

/* feature-band had no text styling of its own; match the about-snap copy. */
.feature-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feature-band h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; margin: 0 0 1.4rem; }
.feature-band p { font-size: 1.08rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.2rem; max-width: 56ch; }
@media (max-width: 900px) { .feature-band { grid-template-columns: 1fr; } }

/* Two neighbouring sections of the same colour: only one lot of padding between them. */
.section.section--flush-top { padding-top: 0; }

/* A list section: left-aligned heading, spaced paragraphs running full width, then the list. */
.list-prose p { font-size: 1.08rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.1rem; }
.list-prose p:last-child { margin-bottom: 0; }
.list-band { margin: 1.8rem 0 0; max-width: 860px; }  /* two columns across the full 1300px left a wide gap between them (Avara, Lime Render, 2026-09-23) */
/* copy that follows a list (sections now render in copy order) keeps the same gap below the list */
.list-band + .list-prose { margin-top: 1.8rem; }
/* On the new SEO pages a list of short items (build.py adds --short) sizes its two columns to the items, so four short items no longer sit
   either side of a wide gap (Avara, Lime Render, 2026-09-23). Long items still wrap: minmax(0, ...). */
@media (min-width: 901px) {
  .service-row__bullets.service-row__bullets--short {
    grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 3rem;
  }
}
/* the same copy on the dark ink band needs light text */
.section--ink .list-prose p, .section--ink .list-band li { color: rgba(246,241,231,0.82); }

/* Related projects: columns follow the number of projects, so a row never looks one short.
   One project sits as a wide card, photo beside its text. Four sit two by two. */
.related-projects.related-projects--2,
.related-projects.related-projects--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-projects.related-projects--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-projects.related-projects--1 { grid-template-columns: 1fr; }
/* One project: a feature, photo beside large text on the page's own background, not a dark box. */
.related-projects--1 .project-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); background: transparent; overflow: visible; }
.related-projects--1 .project-card__media { border-radius: var(--r-card); }
.related-projects--1 .project-card__overlay { padding: 0; color: var(--ink); }
.related-projects--1 .project-card__title { color: var(--ink); font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 1rem; }
.related-projects--1 .project-card__sub { color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.related-projects--1 .project-card__tag { color: var(--brand-primary-deep); }
.project-card__more { display: inline-block; margin-top: 1.2rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--brand-primary); padding-bottom: 2px; }

/* The photo is always exactly as tall as the text beside it: the row stretches to the text and the
   photo fills it, cropped to fit. A floor stops a very short text leaving a sliver of photo. */
.about-snap.about-snap--long, .feature-band { align-items: stretch; }
.about-snap.about-snap--long .about-snap__media,
.feature-band .feature-band__media { aspect-ratio: auto; height: 100%; min-height: 240px; position: relative; }
/* the image is pinned inside its frame so its own size never sets the row height; the text does */
.about-snap.about-snap--long .about-snap__media img,
.feature-band .feature-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-band > div:not(.feature-band__media),
.about-snap.about-snap--long .about-snap__copy { align-self: center; }
@media (max-width: 900px) {
  .related-projects.related-projects--2, .related-projects.related-projects--3,
  .related-projects.related-projects--4 { grid-template-columns: 1fr; }
  .related-projects--1 .project-card { grid-template-columns: 1fr; }
  .about-snap.about-snap--long .about-snap__media, .feature-band .feature-band__media { aspect-ratio: 4/3; height: auto; min-height: 0; }
  .about-snap.about-snap--long .about-snap__media img, .feature-band .feature-band__media img { position: static; }
}

/* -- Gallery intro: the page's own words above the photographs ------------- */
.gallery-intro {
  /* Runs the full width of the container, as the house rule requires of text
     under a heading: a thin wide block, never a narrow column. */
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.gallery-intro p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.gallery-intro p:last-child { margin-bottom: 0; }
.gallery-intro a { color: var(--ink); border-bottom: 1px solid var(--brand-primary); text-decoration: none; }
.gallery-intro a:hover { color: var(--brand-primary-deep); }

/* -- Services index: the eight services as a directory, not loose bullets ----
   Sits under the four discipline cards and carries the links to each service
   page. Two columns on desktop, one on a phone. */
.services-index {
  margin: 2.6rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(33,29,23,0.12);
  gap: 0.85rem 2.4rem;
}
.services-index li { font-size: 0.98rem; padding-left: 0; }
.services-index li::before { display: none; }
.services-index a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-primary);
  padding-bottom: 1px;
}
.services-index a:hover { color: var(--brand-primary-deep); }
.services-index__label {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.6rem 0 -1.4rem;
}
@media (max-width: 720px) {
  .services-index { grid-template-columns: 1fr; gap: 0.7rem; }
}
@media (max-width: 900px) {
  .service-row { grid-template-columns: 1fr; gap: 1.6rem; direction: ltr !important; }
  .service-row:nth-child(even) { direction: ltr; }
  .service-row__bullets { grid-template-columns: 1fr; }
}

/* -- About snapshot section --------------------------------------------- */
.about-snap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: stretch;
}
.about-snap__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-card);
}
.about-snap__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.about-snap__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-snap__copy h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1.4rem;
}
.about-snap__copy p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1.2rem;
  max-width: 56ch;
}
.about-snap__cite {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--brand-accent);
}
@media (max-width: 900px) {
  .about-snap { grid-template-columns: 1fr; gap: 1.6rem; }
  .about-snap__media { aspect-ratio: 4/3; }
}

/* -- About page founder narrative --------------------------------------- */
.story-chapter {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: start;
  padding-block: 3rem;
  border-bottom: 1px solid var(--line);
}
.story-chapter:last-child { border-bottom: none; }
.story-chapter__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brand-primary-deep);
  margin-bottom: 0.4rem;
}
.story-chapter h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 1rem;
  line-height: 1.12;
}
.story-chapter p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.1rem;
  max-width: 56ch;
}
@media (max-width: 800px) {
  .story-chapter { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem; }
}

/* Founders trio */
.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.founder-card {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.founder-card__photo {
  width: 100%;
  aspect-ratio: 4/5;
  background: rgba(107,74,43,0.07);
  border-radius: calc(var(--r-card) - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-accent);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}
.founder-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.founder-card h3 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 500;
}
.founder-card__role {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary-deep);
}
.founder-card p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 800px) {
  .founders { grid-template-columns: 1fr; gap: 1rem; }
}

/* -- Awards band -------------------------------------------------------- */
.awards-band {
  background: var(--cream-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.awards-band__inner {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 2rem;
  align-items: center;
}
.awards-band__copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0 0 0.4rem;
  line-height: 1.18;
}
.awards-band__copy p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--muted);
}
.awards-band__copy small {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary-deep);
  margin-bottom: 0.6rem;
}
.awards-band img {
  height: 120px;
  width: auto;
}
@media (max-width: 720px) {
  .awards-band__inner { grid-template-columns: 1fr; text-align: center; gap: 1.4rem; justify-items: center; }
  .awards-band img { height: 96px; }
}

/* -- Testimonials --------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--ink-soft);
  color: var(--cream);
  padding: 2rem 2.2rem;
  border-radius: var(--r-card);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem;
  left: 1.6rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.5;
}
.testimonial-card blockquote {
  margin: 0 0 1.4rem;
  padding-top: 2.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--cream);
  position: relative;
  z-index: 1;
}
.testimonial-card cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
@media (max-width: 800px) {
  .testimonials { grid-template-columns: 1fr; }
  .testimonial-card blockquote { font-size: 1.05rem; }
}

/* -- Affiliates rail (constant marquee) --------------------------------- */
.affiliates-rail {
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0;
  overflow: hidden;
  position: relative;
}
.affiliates-rail__label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 1.6rem;
}
.affiliates-rail .rail-track {
  display: flex;
  gap: 3.5rem;
  align-items: center;
  animation: marquee 90s linear infinite;
  width: max-content;
}
.affiliates-rail:hover .rail-track { animation-play-state: paused; }
.affiliates-rail__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 56px;
}
.affiliates-rail__item img {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 250ms ease, opacity 250ms ease;
  mix-blend-mode: multiply;
}
.affiliates-rail__item span[aria-hidden="true"] {
  filter: grayscale(1);
  opacity: 0.85;
  mix-blend-mode: multiply;
  transition: filter 250ms ease, opacity 250ms ease;
}
.affiliates-rail__item:hover img,
.affiliates-rail__item:hover span[aria-hidden="true"] { filter: grayscale(0); opacity: 1; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .affiliates-rail .rail-track { animation: none; }
}

/* -- Affiliates grid page ----------------------------------------------- */
.affiliates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.affiliates-grid__cell {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.affiliates-grid__cell:hover {
  transform: translateY(-4px);
  border-color: var(--brand-primary);
  box-shadow: 0 1px 2px rgba(26,29,36,0.05), 0 14px 32px rgba(26,29,36,0.10);
}
.affiliates-grid__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 1.4rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.affiliates-grid__logo img {
  max-height: 82px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.affiliates-grid__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.3rem 1.5rem 1.5rem;
  flex: 1;
}
.affiliates-grid__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.affiliates-grid__desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.affiliates-grid__cta {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.affiliates-grid__cta::after { content: '\2192'; transition: transform .2s ease; }
a.affiliates-grid__cell:hover .affiliates-grid__cta::after { transform: translateX(4px); }
.affiliates-grid__cell--nolink { cursor: default; }
@media (max-width: 800px) {
  .affiliates-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .affiliates-grid { grid-template-columns: 1fr; }
}

/* === Projects rail — clickable arrows + infinite loop (no scroll-lock) == */
.rail-wrap { position: relative; }
.featured-projects-rail { -ms-overflow-style: none; scrollbar-width: none; }
.featured-projects-rail::-webkit-scrollbar { display: none; }
.rail-arrow {
  position: absolute; top: 44%; transform: translateY(-50%);
  z-index: 5; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(246,241,231,0.25); background: rgba(20,18,14,0.72);
  color: var(--cream); display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.rail-arrow svg { width: 22px; height: 22px; }
.rail-arrow:hover { background: var(--brand-primary); color: var(--ink); border-color: var(--brand-primary); }
.rail-arrow--prev { left: clamp(0.5rem, 1.5vw, 1.5rem); }
.rail-arrow--next { right: clamp(0.5rem, 1.5vw, 1.5rem); }
@media (max-width: 767px) { .rail-arrow { display: none; } }

/* Swiper projects carousel — seamless loop, flick on touch, arrows on desktop */
.featured-projects-rail.swiper { overflow: hidden; padding: 0; }
.featured-projects-rail .swiper-wrapper { align-items: stretch; }
.featured-projects-rail .swiper-slide { width: 460px; height: auto; display: flex; }
.featured-projects-rail .swiper-slide .project-card { width: 100%; flex: none; }
@media (max-width: 767px) {
  /* Mobile: Swiper is NOT initialised (see index.html). Drive the rail with
     native CSS scroll-snap so it snaps card-to-card the way iOS expects. */
  .featured-projects-rail.swiper {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-pad);
    -webkit-overflow-scrolling: touch;
  }
  .featured-projects-rail .swiper-slide { width: min(82vw, 340px); scroll-snap-align: start; }
  /* Trailing spacer: lets the LAST card scroll to the same start-aligned rest
     (small left gutter + right breathing) as the others. iOS drops flex
     trailing padding, so a real flex item is the reliable fix. Mobile-only,
     so desktop Swiper (which counts .swiper-slide children) is untouched. */
  .featured-projects-rail .rail-track::after {
    content: '';
    flex: 0 0 calc(100vw - var(--container-pad) - min(82vw, 340px));
  }
}
/* Arrows stay static — keep vertical centering in every state (the global
   button:active scale was wiping translateY(-50%) and dropping the arrow). */
.rail-arrow,
.rail-arrow:hover,
.rail-arrow:focus,
.rail-arrow:active { transform: translateY(-50%); }

/* === Services No. IV wide card ======================================== */
.service-card--wide { margin-top: 1.5rem; height: 380px; min-height: 0; }
.service-card--wide .service-card__media { min-height: 0; }
.service-card--wide .service-card__media img { object-position: center 60%; }
@media (max-width: 760px) { .service-card--wide { height: 300px; } }

/* Sub-page project gallery heading */
.project-photos__head {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  margin: 2.4rem 0 1.3rem;
}

/* -- CTA strip (heavy full-bleed) ---------------------------------------- */
.cta-strip {
  position: relative;
  padding: var(--section-pad-y) 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
  text-align: center;
}
.cta-strip__media { position: absolute; inset: 0; z-index: -2; }
.cta-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-strip__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,14,0.72) 0%, rgba(20,18,14,0.62) 100%);
}
.cta-strip__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.cta-strip__kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 1rem;
}
.cta-strip h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 1.2rem;
  color: var(--cream);
}
.cta-strip p {
  font-size: 1.08rem;
  color: rgba(246,241,231,0.86);
  margin: 0 0 2rem;
  max-width: 50ch;
  margin-inline: auto;
  line-height: 1.6;
}
.cta-strip__actions {
  display: inline-flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .cta-strip__actions { width: 100%; flex-direction: column; }
  .cta-strip__actions .btn { width: 100%; }
}

/* -- Projects index grid ------------------------------------------------ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.projects-grid .project-card { flex: none; }
.projects-grid .project-card__media { aspect-ratio: 4/3; }
@media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projects-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid .project-card,
  .projects-grid .project-card:nth-child(1),
  .projects-grid .project-card:nth-child(2),
  .projects-grid .project-card:nth-child(3),
  .projects-grid .project-card:nth-child(4),
  .projects-grid .project-card:nth-child(5),
  .projects-grid .project-card:nth-child(6),
  .projects-grid .project-card:nth-child(7) { grid-column: span 1; }
  .projects-grid .project-card .project-card__media { aspect-ratio: 4/3; }
}
@media (max-width: 600px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* -- Project sub-page narrative ----------------------------------------- */
.project-body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: start;
}
.project-body__meta {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.project-body__meta-item {
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.project-body__meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 0.4rem;
}
.project-body__meta-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}
.project-body__prose p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.4rem;
  max-width: 64ch;
}
.project-body__prose p:first-child {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-style: italic;
  color: var(--brand-accent);
  line-height: 1.5;
  border-left: 2px solid var(--brand-primary);
  padding-left: 1.4rem;
}
.project-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 2.4rem 0;
}
.project-photos figure { margin: 0; overflow: hidden; border-radius: var(--r-card); }
.project-photos figure:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.project-photos figure { aspect-ratio: 4/3; }
.project-photos img { width: 100%; height: 100%; object-fit: cover; }
/* In-column project video: iOS-safe padding-bottom 16:9 box (aspect-ratio on an
   in-flow box collapses the iframe on iOS WebKit). Sits between write-up + gallery. */
.project-video__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0 0 2.4rem;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
}
.project-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 800px) {
  .project-body { grid-template-columns: 1fr; gap: 1.4rem; }
  .project-body__meta { position: static; }
  .project-photos { grid-template-columns: 1fr; }
  .project-photos figure { aspect-ratio: 4/3; }
}

/* Related projects */
.related-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
@media (max-width: 800px) {
  .related-projects { grid-template-columns: 1fr; }
}

/* -- Gallery masonry ---------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 1rem;
  grid-auto-flow: dense;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  position: relative;
  cursor: pointer;
}
.gallery-grid figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.gallery-grid figure:hover img { transform: scale(1.03); }
.gallery-grid figure:nth-child(3n+1) { grid-row: span 2; }
.gallery-grid figure:nth-child(5n+3) { grid-column: span 2; }
@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .gallery-grid figure:nth-child(5n+3) { grid-column: span 1; }
}
@media (max-width: 500px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-grid figure:nth-child(3n+1) { grid-row: span 1; }
}

/* -- Gallery lightbox ---------------------------------------------------
   Full-screen photo viewer for .gallery-grid, swipeable on touch and driven
   by arrows / arrow keys elsewhere. The markup does not exist in gallery.html
   at all: /assets/gallery.js builds it on load. */
.gallery-grid figure:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(12, 13, 17, 0.985);
  color: var(--cream);
  overscroll-behavior: contain;
}
/* Wins on specificity over .lightbox above, so the UA [hidden] rule is not
   silently overridden by anything this block sets. */
.lightbox[hidden] { display: none; }
.lightbox__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: zoom-out;
  /* Horizontal gestures come to the swipe handler; pinch-to-zoom stays with
     the browser. */
  touch-action: pan-y pinch-zoom;
}
.lightbox__track {
  display: flex;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  will-change: transform;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lightbox__track.is-instant { transition: none; }
.lightbox__slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.75rem, 9vh, 6rem) clamp(1rem, 7vw, 6rem);
}
.lightbox__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(246, 241, 231, 0.28);
  border-radius: 50%;
  background: rgba(26, 29, 36, 0.55);
  color: var(--cream);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.lightbox__btn:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--ink);
}
.lightbox__btn:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
.lightbox__btn--close {
  top: calc(clamp(0.75rem, 2vh, 1.4rem) + env(safe-area-inset-top));
  right: clamp(0.75rem, 2vw, 1.6rem);
}
.lightbox__btn--prev,
.lightbox__btn--next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__btn--prev { left: clamp(0.75rem, 2vw, 1.6rem); }
.lightbox__btn--next { right: clamp(0.75rem, 2vw, 1.6rem); }
.lightbox__btn--next svg { transform: rotate(180deg); }
/* The global `button:active { transform: scale(0.96) }` replaces the whole
   transform, so a pressed arrow loses its translateY(-50%), drops 26px out
   from under the cursor and never receives the click. Same trap the projects
   rail hit (.rail-arrow above); restate the centring here. */
.lightbox__btn:active { transform: scale(0.96); }
.lightbox__btn--prev:active,
.lightbox__btn--next:active { transform: translateY(-50%) scale(0.96); }
.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  padding: 0.9rem clamp(1rem, 4vw, 2rem) calc(0.9rem + env(safe-area-inset-bottom));
  text-align: center;
  /* A caption must never swallow a tap meant to close the viewer. */
  pointer-events: none;
}
.lightbox__caption {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(246, 241, 231, 0.82);
}
.lightbox__count {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.55);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* Swipe is the gesture on a phone; arrows over the photo are just clutter. */
  .lightbox__btn--prev,
  .lightbox__btn--next { display: none; }
  .lightbox__slide { padding: 4rem 0.75rem 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__track { transition: none; }
}

/* ---- Mobile fixes (2026-07) ---- */
@media (max-width: 767px) {
  /* Scroll-velocity hero rail is JS-gated off on mobile -> autonomous CSS marquee.
     Track carries 2 duplicated item sets, so translateX(-50%) loops seamlessly. */
  .hero-trust-rail .rail-track { animation: hero-rail-drift 40s linear infinite; }
  /* Tap targets to the 44px floor */
  .footer__social a { width: 44px; height: 44px; }
  .section-head__link { min-height: 44px; display: inline-flex; align-items: center; }
  /* Nav menu fits one screen: drop redundant phone/email, links flex-distribute */
  .mobile-menu__contact p { display: none; }
  .mobile-menu__links { margin: 0; }
  .mobile-menu__links a { padding: 0.55rem 0; font-size: clamp(1.5rem, 5.8vw, 2.05rem); }
  .mobile-menu__contact { margin-top: 1.25rem; padding-top: 0; }
}
/* Projects carousel — slim progress bar under the rail (senior pick over 9 dots) */
#projProgress { position: relative; height: 3px; max-width: 220px; margin: 1.5rem auto 0; background: rgba(107,74,43,0.18); border-radius: 2px; overflow: hidden; }
#projProgress .swiper-pagination-progressbar-fill { background: var(--brand-primary); border-radius: 2px; }
/* Mobile (no Swiper): our own fill, scaled from scroll position via JS. */
#projProgress .rail-progress__fill { display: block; position: absolute; inset: 0; background: var(--brand-primary); border-radius: 2px; transform-origin: left center; transform: scaleX(0.12); transition: transform 0.12s linear; }
@keyframes hero-rail-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-trust-rail .rail-track { animation: none !important; transform: none !important; }
}

/* -- Videos grid (placeholder) ----------------------------------------- */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.video-card {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
}
.video-card__poster {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.video-card__poster img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;
}
.video-card__poster.yt-facade { cursor: pointer; }
.video-card__play {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(240,168,48,0.92);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  z-index: 2;
  border: 2px solid var(--cream);
}
.video-card__body { padding: 1.2rem 1.4rem 1.6rem; }
.video-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.3rem;
}
.video-card__sub {
  font-size: 0.85rem;
  color: var(--muted-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-card__supply {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  border: 1px dashed rgba(240,168,48,0.5);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}
@media (max-width: 720px) {
  .videos-grid { grid-template-columns: 1fr; }
}

/* -- Contact page ------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: stretch;
}
.contact-form label:has(textarea) { flex: 1; }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--cream-soft);
  padding: 2.2rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
}
.contact-form label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--brand-accent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 16px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}
.contact-form textarea { flex: 1; min-height: 130px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
.contact-form__error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid #8C2C1F;
  background: rgba(140, 44, 31, 0.06);
  color: #8C2C1F;
  font-weight: 600;
  font-size: 0.95rem;
}
.contact-form__legal { margin: 0.9rem 0 0; font-size: 0.78rem; opacity: 0.65; }
.contact-form__legal a { color: inherit; }
.cf-turnstile { margin: 0 0 1rem; }
.contact-form__submit {
  margin-top: 0.6rem;
}
.contact-info {
  padding: 0.6rem 0;
}
.contact-info h3 {
  font-size: 1.4rem;
  margin: 0 0 1.2rem;
}
.contact-info__item {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.contact-info__item:last-child { border-bottom: none; }
.contact-info__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 0.4rem;
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: 1.32rem;
  color: var(--ink);
  text-decoration: none;
  display: block;
  min-height: 44px;
  padding: 0.3rem 0;
}
.contact-info__value:hover { color: var(--brand-primary-deep); }
.contact-info__value small {
  font-family: var(--font-body);
  font-size: 0.78rem;
  display: block;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* -- Materials inventory ------------------------------------------------ */
.materials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.material-tile {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.4rem 1.2rem;
  text-align: left;
}
.material-tile__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--brand-primary-deep);
  margin-bottom: 0.6rem;
}
.material-tile h4 {
  font-size: 1.08rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.18;
}
.material-tile p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .materials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .materials { grid-template-columns: 1fr; }
}

/* -- Footer -------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 4rem 0 2rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(246,241,231,0.1);
}
.footer__brand {
  display: flex; flex-direction: column; gap: 1rem;
  margin-top: -1.1rem; /* lift so 'The Oak Blokes' sits in line with the section headers */
}
.footer__brand-row {
  display: flex; align-items: center; gap: 0.7rem;
}
.footer__brand-row img { height: 50px; width: auto; }
.footer__brand-row .name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
}
.footer__brand p {
  font-size: 0.92rem;
  color: var(--muted-light);
  margin: 0;
  max-width: 36ch;
  line-height: 1.6;
}
/* Column shrinks to its content so the header underline spans exactly the
   content width (Explore's line reaches the 'Testimonials' edge). */
.footer__col { width: fit-content; }
.footer__col h2, .footer__col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 0.95rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(246,241,231,0.16);
  font-family: var(--font-body);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
/* Explore links: 2 columns x 3 rows so the column height matches the others */
.footer__col ul.footer__links--cols { display: grid; grid-template-columns: auto auto; column-gap: 1.75rem; }
.footer__col li { margin-bottom: 0.15rem; }
.footer__col a {
  text-decoration: none;
  color: var(--cream);
  font-size: 0.93rem;
  opacity: 0.85;
  display: inline-block;
  padding: 0.45rem 0;
  min-height: 44px;
  line-height: 1.4;
}
.footer__col a:hover { color: var(--brand-primary); opacity: 1; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  font-size: 0.8rem;
  color: var(--muted-light);
  flex-wrap: wrap;
  gap: 0.8rem;
}
.footer__bottom a { color: inherit; text-decoration: none; margin-left: 1.2rem; }
.footer__bottom a:hover { color: var(--brand-primary); }
.footer__credit { margin-left: 1.2rem; }
.footer__bottom .footer__credit a { color: var(--brand-primary); margin-left: 0; padding-inline: 0; min-width: 0; }
.footer__bottom .footer__credit a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 500px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* -- Cookie banner ------------------------------------------------------ */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 250;
  background: var(--ink);
  color: var(--cream);
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}
.cookie-banner__text {
  font-size: 0.85rem;
  flex: 1;
  min-width: 240px;
  color: rgba(246,241,231,0.86);
}
.cookie-banner__text a {
  color: var(--brand-primary);
}
.cookie-banner__actions {
  display: inline-flex;
  gap: 0.6rem;
}
.cookie-banner__actions .btn { padding: 0.85rem 1.3rem; font-size: 0.82rem; min-height: 44px; }

/* -- 404 page ----------------------------------------------------------- */
.error-page {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  padding: var(--container-pad);
}
.error-page__inner { text-align: center; max-width: 540px; }
.error-page__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5rem, 16vw, 9rem);
  color: var(--brand-primary);
  line-height: 1;
  margin-bottom: 1rem;
}
.error-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; color: var(--cream); }
.error-page p { color: var(--muted-light); margin-bottom: 2rem; font-size: 1.05rem; }

/* -- Prose pages (privacy/terms/thank-you) ------------------------------ */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 4rem) var(--container-pad) 5rem;
}
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.4rem; }
.prose .lede { font-size: 1rem; color: var(--muted); margin-bottom: 2.5rem; letter-spacing: 0.04em; }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.8rem; }
.prose p { font-size: 1rem; line-height: 1.7; color: var(--ink); margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; line-height: 1.6; }

/* -- Thank-you ---------------------------------------------------------- */
.thank-you {
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: var(--container-pad);
  text-align: center;
}
.thank-you__inner { max-width: 540px; }
.thank-you__check {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 1.6rem;
}

/* -- Utility ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-accent { color: var(--brand-primary-deep); font-style: italic; }

/* Tap-target compliance: nav__brand on mobile (>=44h) */
@media (max-width: 980px) {
  .nav__brand { min-height: 48px; align-items: center; }
  .nav__brand img { height: 44px; }
}

/* Tap-target compliance: prose inline anchors + footer__bottom links + thank-you links */
.prose a, .footer__bottom a, .thank-you a, .mobile-menu__contact a {
  display: inline-block;
  padding: 0.4rem 0.2rem;
  min-height: 44px;
  line-height: 1.45;
}
/* Specific exceptions: btn class shouldn't get double-padding */
.prose a.btn, .footer__bottom a.btn, .thank-you a.btn, .mobile-menu__contact a.btn { padding: 1.1rem 2rem; }


/* Tap-target compliance: cookie banner inline link */
.cookie-banner a {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0.2rem;
  line-height: 1.4;
}

/* Tap-target compliance: footer__col anchors min-width for short labels */
.footer__col a { min-width: 44px; padding: 0.45rem 0.3rem; }
.footer__col li { padding-left: 0; }


/* Tap-target compliance: footer__bottom short anchors min-width */
.footer__bottom a { min-width: 44px; padding-inline: 0.55rem; text-align: center; }

/* Contact — Call the team photos */
.call-team { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.4rem; }
.call-team__row { display: flex; align-items: center; gap: 0.75rem; }
.call-team__photo { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-soft); }
.call-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-team__who { display: flex; flex-direction: column; line-height: 1.25; }
.call-team__who small { opacity: 0.72; font-size: 0.8rem; }

/* -- Questions and answers (FAQs, Site Map): question left, answer right, hairline between rows -- */
.qa-list { border-top: 1px solid var(--line); }
.qa-item { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: 3rem;
  padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.qa-item h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; margin: 0; }
.qa-item__a p { font-size: 1.05rem; line-height: 1.7; color: var(--muted); margin: 0 0 1rem; }
.qa-item__a > :last-child { margin-bottom: 0; }
.qa-item__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .qa-item { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.6rem 0; }
}

/* -- Short hero for pages that carry only their name (FAQs, Areas We Cover, Site Map) -- */
.page-hero.page-hero--compact { min-height: 36vh; }

/* -- FAQs: click-to-open list (T&H Logs pattern) ------------------------------------- */
.faq-acc { border-top: 1px solid var(--line); }
.faq-acc__item { border-bottom: 1px solid var(--line); }
.faq-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none; }
.faq-acc__item summary::-webkit-details-marker { display: none; }
.faq-acc__q { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; margin: 0; transition: color .18s ease; }
.faq-acc__item summary:hover .faq-acc__q { color: var(--brand-primary-deep); }
.faq-acc__item summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }
.faq-acc__chev { flex: none; color: var(--brand-primary-deep); transition: transform .2s ease; }
.faq-acc__item[open] .faq-acc__chev { transform: rotate(180deg); }
.faq-acc__a { padding: 0 0 1.6rem; max-width: 72ch; }
.faq-acc__a p { font-size: 1.05rem; line-height: 1.7; color: var(--muted); margin: 0 0 1rem; }
.faq-acc__a > :last-child { margin-bottom: 0; }
.faq-acc__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-more { margin: 1.6rem 0 0; }
.faq-more a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* -- Home: the eight services as a grid of tiles instead of a two-column list (2026-09-23) --
   Same words; each tile is clickable through the service name's own link (anchor text unchanged). */
.services-index.services-index--tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.services-index--tiles li {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem 1.4rem 1.3rem; margin: 0; line-height: 1.55; color: var(--muted); font-size: 0.98rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
}
.services-index--tiles li::after { content: "\2192"; display: block; margin-top: auto; padding-top: 1rem; color: var(--brand-primary-deep); font-size: 1.1rem; }
.services-index--tiles a { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; border-bottom: 0; }
.services-index--tiles a::after { content: ""; position: absolute; inset: 0; }
.services-index--tiles li:hover { background: var(--cream-soft); }
.services-index--tiles li:hover a { color: var(--brand-primary-deep); }
.services-index--tiles li::before { display: none; }
@media (max-width: 900px) { .services-index.services-index--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .services-index.services-index--tiles { grid-template-columns: 1fr; } }

/* Home: the services tiles as their own section (2026-09-23), so no top rule or margin from the old in-section list */
.services-all .services-index.services-index--tiles { margin-top: 0; }
.services-all .section-head { margin-bottom: 2rem; }

/* -- Menu dropdowns: About and Services (2026-09-23) ------------------------------------- */
.nav__menu .has-sub { position: relative; }
.nav__menu .has-sub > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__caret { transition: transform .2s ease; opacity: .8; }
.nav__menu .has-sub:hover .nav__caret, .nav__menu .has-sub:has(:focus-visible) .nav__caret { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: 100%; left: -1.1rem; min-width: 15.5rem; margin: 0; padding: 0.7rem 0;
  list-style: none; background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20,18,14,.22);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  z-index: 60;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav__menu .has-sub:hover > .nav__sub, .nav__menu .has-sub:has(:focus-visible) > .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease;
}
.nav__sub li { display: block; }
.nav__sub a { display: block; padding: 0.6rem 1.1rem; font-size: 0.9rem; color: var(--ink); white-space: nowrap; line-height: 1.3; }
.nav__sub a:hover, .nav__sub a:focus-visible { color: var(--brand-primary-deep); background: rgba(33,29,23,0.04); }

/* Phone menu: tap a group name to open it, one open at a time (house standard) */
.m-sub__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; background: none; border: 0; border-bottom: 1px solid rgba(246,241,231,0.1);
  font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 500; line-height: 1.15;
  color: var(--cream); text-align: left; cursor: pointer;
}
.m-sub__toggle .nav__caret { width: 18px; height: 18px; flex: none; }
.m-sub__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.m-sub__list { list-style: none; margin: 0; padding: 0.3rem 0 0.8rem 0.2rem; display: none; }
.m-sub.is-open .m-sub__list { display: block; }
.mobile-menu__links .m-sub__list a { font-family: var(--font-body); font-size: 1.05rem; padding: 0.55rem 0; border-bottom: 0; color: var(--muted-light); }
.mobile-menu__links .m-sub__list li:first-child a { color: var(--brand-primary); }
@media (max-width: 720px) {
  .m-sub__toggle { padding: 0.55rem 0; font-size: clamp(1.5rem, 5.8vw, 2.05rem); }
}

/* An opened group makes the phone menu taller than the screen: let the panel scroll and keep the
   links from being squeezed under the pinned Book a call button */
.mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-menu__links { flex: 1 0 auto; }

/* -- Home: each discipline card carries the service pages that belong to it (2026-09-23) --------
   The card was one big link; the service links now sit inside it, so the card's own link is a cover
   layer behind the body and the body lets clicks through except on its links. */
.service-card--links .service-card__cover { position: absolute; inset: 0; z-index: 1; }
.service-card--links .service-card__body { pointer-events: none; }
.service-card--links .service-card__body a { pointer-events: auto; position: relative; z-index: 3; }
.service-card--links:hover .service-card__media img { transform: scale(1.04); }
.service-card__services { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.service-card__services a {
  font-size: 0.95rem; font-weight: 500; color: var(--cream); text-decoration: none; line-height: 1.5;
  border-bottom: 1px solid var(--brand-primary); padding-bottom: 1px; transition: color .18s ease;
}
.service-card__services a:hover, .service-card__services a:focus-visible { color: var(--brand-primary); }

/* Home: the What we do heading and its two lines run the full width of the section */
.section-head.section-head--full { max-width: none; }
.section-head--full .section-head__sub { max-width: none; }
.section-head__sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* -- Dropdown motion (Avara 2026-09-24: "some ease in ... so it feels more premium") ----------------
   Panel eases down and fades in from its top edge; items follow in a short stagger. Closing waits
   120ms so a slightly wobbly mouse path does not snap it shut. Off for reduced-motion users. */
.nav__sub {
  transform-origin: top left; transform: translateY(4px) scale(.98);
  transition: none;   /* closing is instant (Avara 2026-09-24: "it should disappear when you hover off") */
}
.nav__menu .has-sub:hover > .nav__sub, .nav__menu .has-sub:has(:focus-visible) > .nav__sub {
  transform: translateY(10px) scale(1);
  transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.nav__sub li { opacity: 0; transform: translateY(-4px); transition: none; }
.nav__menu .has-sub:hover > .nav__sub li, .nav__menu .has-sub:has(:focus-visible) > .nav__sub li { transition: opacity .2s ease, transform .2s ease; }
.nav__menu .has-sub:hover > .nav__sub li, .nav__menu .has-sub:has(:focus-visible) > .nav__sub li { opacity: 1; transform: none; }
.nav__menu .has-sub:hover > .nav__sub li:nth-child(1) { transition-delay: 0.015s } .nav__menu .has-sub:hover > .nav__sub li:nth-child(2) { transition-delay: 0.030s }
.nav__menu .has-sub:hover > .nav__sub li:nth-child(3) { transition-delay: 0.045s } .nav__menu .has-sub:hover > .nav__sub li:nth-child(4) { transition-delay: 0.060s }
.nav__menu .has-sub:hover > .nav__sub li:nth-child(5) { transition-delay: 0.075s } .nav__menu .has-sub:hover > .nav__sub li:nth-child(6) { transition-delay: 0.090s }
.nav__menu .has-sub:hover > .nav__sub li:nth-child(7) { transition-delay: 0.105s } .nav__menu .has-sub:hover > .nav__sub li:nth-child(8) { transition-delay: 0.120s }
.nav__menu .has-sub:hover > .nav__sub li:nth-child(n+9) { transition-delay: .135s }
.nav__sub a { transition: color .18s ease, background-color .18s ease, padding-left .22s cubic-bezier(.22,.61,.36,1); }
.nav__sub a:hover, .nav__sub a:focus-visible { padding-left: 1.35rem; }
.m-sub__list { display: block; max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0;
  transition: max-height .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, padding .35s ease; }
.m-sub.is-open .m-sub__list { display: block; max-height: 40rem; opacity: 1; padding-top: .3rem; padding-bottom: .8rem; }
@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__sub li, .nav__sub a, .m-sub__list { transition: none !important; }
}

/* Moving from one dropdown to its neighbour: the one being left closes at once, so two panels never
   overlap (Avara 2026-09-24, About's ghost panel showing behind Services). */
.nav__menu:has(.has-sub:hover) .has-sub:not(:hover) > .nav__sub {
  opacity: 0; visibility: hidden; transition: none;
}

/* -- Areas We Cover: opening lines beside the areas map (2026-09-24) ------------------------------ */
.map-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.map-intro__map { margin: 0; }
.map-intro__map img { width: 100%; height: auto; display: block; }
.map-intro__copy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .map-intro { grid-template-columns: 1fr; gap: 2rem; } }
/* area names in the rows: links, but quiet, like the site's headings */
.qa-item h2 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brand-primary); }
.qa-item h2 a:hover { color: var(--brand-primary-deep); }

/* Home: Where we work. The areas sentence set as the section's heading, area names linked */
.map-intro__copy .section-head { margin-bottom: 1.6rem; }
.map-intro__copy .section-head__sub { max-width: none; margin-top: 1.2rem; }
.map-intro__copy .section-head__sub a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brand-primary); }
.map-intro__copy .section-head__sub a:hover { color: var(--brand-primary-deep); }
.areas-link { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary-deep); text-decoration: none; }
.areas-link::after { content: " \2192"; }
.areas-link:hover { color: var(--ink); }
.map-credit { margin-top: .6rem; font-size: .72rem; color: var(--muted); text-align: right; }

/* -- Areas We Cover: area cards and discipline tiles (2026-09-24) ----------------------------- */
.area-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.area-card { position: relative; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 2rem 2rem 1.8rem; transition: border-color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
.area-card h2 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin: 0 0 .8rem; line-height: 1.15; }
.area-card h2 a { color: var(--ink); text-decoration: none; }
.area-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.area-card h2 a::before { content: "\2192"; position: absolute; right: 2rem; top: 2.1rem; font-family: var(--font-body);
  font-size: 1.1rem; color: var(--brand-primary-deep); transition: transform .25s ease; }
.area-card p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 46ch; }
.area-card:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,18,14,.08); }
.area-card:hover h2 a { color: var(--brand-primary-deep); }
.area-card:hover h2 a::before { transform: translateX(4px); }
.work-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
.work-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; text-decoration: none; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.work-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20,18,14,.85)); }
.work-tile span { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 1; color: var(--cream);
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.work-tile:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .area-cards { grid-template-columns: 1fr; } .work-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .area-card, .work-tile img { transition: none; } }

/* -- Areas We Cover, final layout (Avara 2026-09-24) ------------------------------------------ */
.areas-cols { columns: 2; column-gap: 4rem; margin-bottom: 3rem; }
.areas-cols p { break-inside: avoid; }
.areas-cols a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.areas-live { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.areas-live__map { margin: 0; }
.areas-live__map svg { width: 100%; height: auto; display: block; }
.areas-live .area { transition: fill-opacity .25s ease; }
.areas-live__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.areas-live__list li { border-bottom: 1px solid var(--line); }
.areas-live__list a { display: block; padding: 1.2rem .4rem; text-decoration: none; transition: background-color .2s ease, padding .25s cubic-bezier(.22,.61,.36,1); }
.areas-live__list h3 { font-size: 1.6rem; margin: 0 0 .3rem; color: var(--ink); }
.areas-live__list p { margin: 0; color: var(--muted); line-height: 1.55; }
.areas-live__list li:hover a { background: var(--cream); padding-left: 1rem; }
.areas-live__list li:hover h3 { color: var(--brand-primary-deep); }
.areas-live:has(li[data-area="west-sussex"]:hover) .area--west-sussex, .areas-live:has(li[data-area="east-sussex"]:hover) .area--east-sussex,
.areas-live:has(li[data-area="surrey"]:hover) .area--surrey, .areas-live:has(li[data-area="brighton"]:hover) .area--brighton { fill-opacity: .7; }
.work-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.work-links { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.work-links a { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.35rem; }
.work-links a::after { content: "\2192"; color: var(--brand-primary-deep); font-family: var(--font-body); font-size: 1rem; transition: transform .2s ease; }
.work-links a:hover { color: var(--brand-primary-deep); } .work-links a:hover::after { transform: translateX(4px); }
.award-panel { background: var(--ink); color: var(--cream); border-radius: var(--r-card); padding: 2.4rem; }
.award-panel span { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brand-primary); }
.award-panel strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 2.1rem; margin: .6rem 0 .8rem; }
.award-panel p { margin: 0; color: rgba(246,241,231,.8); line-height: 1.6; }
@media (max-width: 900px) { .areas-cols { columns: 1; } .areas-live, .work-split, .work-links { grid-template-columns: 1fr; } }
/* Areas We Cover: the opening lines as one paragraph under the heading (Avara 2026-09-24) */
.section-head .areas-lede { max-width: 70ch; margin-top: 1.4rem; }
.areas-lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.areas-lede + * { margin-top: 0; }

/* -- Site Map: every page as a link, in columns (2026-09-24) -------------------------------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
.sitemap-col h2 { font-size: 1.5rem; margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap-col li { margin: 0; }
.sitemap-col a { display: block; padding: .42rem 0; color: var(--ink); text-decoration: none; line-height: 1.4; transition: color .18s ease, padding-left .22s ease; }
.sitemap-col a:hover { color: var(--brand-primary-deep); padding-left: .35rem; }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sitemap-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Contact: confirmation shown in place of the form (2026-09-24). [hidden] must win over the form's own display. */
.contact-form[hidden], .contact-sent[hidden] { display: none !important; }
.contact-sent { padding: 2rem; background: var(--cream-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand-primary); border-radius: var(--r-card); }
.contact-sent h3 { margin: 0 0 .6rem; font-size: 1.6rem; }
.contact-sent p { margin: 0; color: var(--muted); line-height: 1.6; }
.contact-sent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-sent:focus { outline: none; }
.contact-sent { align-self: start; height: auto; }

/* Blog articles (2026-09-24): the project page layout, with headings, a list and photos inside the prose. */
.article h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; margin: 2.6rem 0 1rem; max-width: 30ch; }
.article__list { margin: 0 0 1.6rem; padding-left: 1.2rem; max-width: 64ch; }
.article__list li { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 0.6rem; }
.article__figure { margin: 2rem 0 2.2rem; }
.article__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.article a:not(.btn), .project-body__meta-value a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article a:not(.btn):hover, .project-body__meta-value a:hover { color: var(--brand-primary-deep); }
.project-body__read a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Dropdowns hang flush from the bottom edge of the header, square, in the header's own charcoal
   (Avara 2026-09-24, after navbar.gallery / Browserbase: "removing the rounded corners and having it below the
   header"). The panel's top sits exactly on the header's bottom edge: the item is centred in the 76px bar. */
.nav__sub {
  top: calc(50% + var(--nav-h) / 2); left: -1.4rem; min-width: 0; padding: 0.55rem 0 0.7rem;
  background: rgba(20,18,14,.96); border: 1px solid rgba(246,241,231,.10); border-top: 0; border-radius: 0;
  box-shadow: 0 18px 36px rgba(0,0,0,.28); transform: none; transform-origin: top left;
}
.nav__sub::before { top: calc(16px - var(--nav-h) / 2); height: calc(var(--nav-h) / 2 - 16px); } /* hover bridge from under the link to the panel, never over the link itself */
.nav__menu .has-sub:hover > .nav__sub, .nav__menu .has-sub:has(:focus-visible) > .nav__sub { transform: none; }
.nav__sub a { padding: 0.62rem 1.4rem; color: var(--cream); font-size: 0.9rem; }
.nav__sub li:first-child a { color: var(--brand-primary); }
.nav__sub a:hover, .nav__sub a:focus-visible { color: var(--brand-primary); background: rgba(246,241,231,.05); padding-left: 1.6rem; }
.article__band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0.4rem 0 1rem; }
.article__band figure { margin: 0; }
.article__band img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; display: block; }
@media (max-width: 600px) { .article__band { grid-template-columns: 1fr 1fr; } .article__band figure:first-child { grid-column: 1 / -1; } .article__band figure:first-child img { aspect-ratio: 3 / 2; } }

/* At the top of the page the header is see-through over the hero, so an open dropdown hung in mid-air. The header
   takes its scrolled look (same colour, line, shadow) as soon as the mouse is anywhere over it, so the bar is already
   there before a dropdown opens, then clears again when the mouse leaves (Avara 2026-09-24: "it looks weird when it
   just spawns it when you hover over services"). Desktop only: the phone menu is a separate panel. */
@media (hover: hover) and (min-width: 981px) { .nav:hover { background: rgba(20,18,14,0.93); border-bottom-color: rgba(246,241,231,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.nav:has(.nav__menu .has-sub:focus-visible) {
  background: rgba(20,18,14,0.93);
  border-bottom-color: rgba(246,241,231,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* The header's hover fill eases in over ~0.45s (Avara 2026-09-24: "so it's not as harsh"). The blur is animated too,
   so it no longer snaps on ahead of the colour. It clears a little faster than it arrives. */
@media (hover: hover) and (min-width: 981px) {
  .nav { transition: background-color .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease, box-shadow .45s ease,
         backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease, transform 320ms ease; }
  .nav:not(:hover) { transition-duration: .3s; }
}

/* Footer Explore: nine pages in three columns of three, so the column is no taller than before (2026-09-24). */
.footer__col ul.footer__links--cols.footer__links--3 { grid-template-columns: auto auto auto; }
.footer__col ul.footer__links--3 a { white-space: nowrap; }
.footer__bottom .footer__credit { white-space: nowrap; }

/* Areas We Cover: each area row is a link to its area page, so it shows an arrow at rest, like the area cards
   (Jekan 2026-09-24: "where are the location pages linked here?"). */
.areas-live__list a { position: relative; padding-right: 2.6rem; }
.areas-live__list a::after { content: "\2192"; position: absolute; right: .6rem; top: 1.25rem; font-size: 1.35rem; line-height: 1;
  color: var(--brand-primary-deep); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.areas-live__list li:hover a::after { transform: translateX(4px); }

/* Services overview: each discipline links to its service pages (2026-09-24, Jekan: the overview led nowhere). */
.service-row__pages { font-size: .95rem; color: var(--muted); margin: 0 0 1.4rem; }
.service-row__pages a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.service-row__pages a:hover { color: var(--brand-primary-deep); }
.page-hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Hover bridge, second fix (2026-09-24, Avara: "every now and then ... the drop down disappears"). The panel's own
   bridge started ~3px below the link, so a slow move down crossed a strip that belonged to nothing and the menu
   closed. The bridge now hangs off the menu item itself, from its bottom edge to the panel, a little wider than the
   panel's left inset so a diagonal move stays inside it. It never covers the link. */
.nav__menu > li.has-sub::after {
  content: ""; position: absolute; top: 100%; left: -1.4rem; right: -1.4rem;
  height: calc(var(--nav-h) / 2 - 12px); display: none;
}
.nav__menu > li.has-sub:hover::after { display: block; }

/* Footer, rebuilt 2026-09-24 (Avara): Services (all eight), Explore, Contact (phones, email, Book a call). The awards
   stay in the brand line, so the separate Awarded column that repeated them is gone. Every heading rule runs the full
   column width, the lists are one column, and on desktop the links sit closer than the 44px phone tap height. */
@media (min-width: 981px) { .footer__inner { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
@media (max-width: 980px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__col--contact { grid-column: 1 / -1; }
}
.footer__col { width: auto; }
.footer__col ul { display: block; }
.footer__col--contact a[href^="mailto"] { word-break: break-all; }
.footer__cta { margin-top: 1.1rem; }
@media (min-width: 981px) and (hover: hover) {
  .footer__col a { min-height: 0; padding: 0.3rem 0; }
  .footer__col li { margin-bottom: 0.1rem; }
}
/* The footer's link rule is more specific than .btn, so the Book a call button needs its own (the .prose a trap). */
.footer__col a.btn { display: inline-flex; align-items: center; padding: 0.85rem 1.6rem; min-height: 0; color: var(--ink); opacity: 1; font-weight: 600; }
.footer__col a.btn:hover { color: var(--ink); }

/* Footer contact: all three numbers, each with its name as on the Contact page; bottom-row links separated by dots
   (Avara 2026-09-24). */
.footer__col--contact li { display: flex; align-items: baseline; gap: .6rem; }
.footer__col--contact small { font-size: .8rem; color: var(--muted-light); }
.footer__bottom .footer__dot { color: var(--muted-light); opacity: .6; margin: 0 .15rem; }
.footer__bottom a { margin-left: 0; }
.footer__bottom .footer__credit { margin-left: 0; padding-left: 0.55rem; }

/* Footer mirrors the menu (Avara 2026-09-24): Services, then Projects with About under it, then the plain menu links. */
@media (min-width: 981px) { .footer__inner { grid-template-columns: 1.25fr 1fr .8fr .8fr 1.1fr; gap: 2.4rem; } }
.footer__col .footer__h--second { margin-top: 1.6rem; }
/* The names beside the numbers use the same colour as every other footer link (Avara: "why is the text a different colour") */
.footer__col--contact small { color: var(--cream); opacity: .85; font-size: .93rem; }
.footer__col--contact a[href^="mailto"] { word-break: normal; overflow-wrap: normal; }

/* Blog article, full width (Jekan 2026-09-24): no side column; one centred reading column, byline under the title. */
.article-wrap { max-width: 46rem; margin: 0 auto; }
.article__byline { font-size: .9rem; color: var(--muted); margin: 0 0 1.6rem; letter-spacing: .01em; }
.article__byline a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-wrap .project-body__prose p, .article-wrap .article__list { max-width: none; }
.article-wrap .article__band { margin: 2rem 0 1.6rem; }

/* Blog article (Avara 2026-09-24): the text runs the full container width, the byline sits in the hero under the title,
   and the opening answer is a normal paragraph, not the italic pull-quote the project pages use (it read as a quote). */
.article-wrap { max-width: none; }
.article-wrap .project-body__prose p:first-child { font-family: inherit; font-size: 1.05rem; font-style: normal; color: var(--ink);
  border-left: 0; padding-left: 0; line-height: 1.7; }
.page-hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Read more on phones (assets/readmore.js, Avara 2026-09-25). Text stays in the page; only its height is folded. */
.rm-toggle { display: none; }
@media (max-width: 767px) {
  .rm-clamp:not(.rm-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  p.rm-clamp { margin-bottom: 0; }
  .rm-toggle { display: inline-block; margin: 0.1rem 0 1rem; padding: 0.5rem 0; min-height: 44px; background: none; border: 0;
    font: inherit; font-size: 0.95rem; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  /* Phones show Awarded and Discipline, not Established (Avara 2026-09-25: the awards matter most). Discipline stays
     because its "Renovation" is the home page's third use of that keyword; Established carries no keyword. */
  .hero__meta-item--established { display: none; }
  /* The hero text folds to 2 lines rather than 3 (Avara 2026-09-25: still too much text on a phone). */
  .hero__sub.rm-clamp:not(.rm-open) { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Phone hero and award strip, less crowded (Avara 2026-09-25). No words change; spacing and sizes only. */
@media (max-width: 767px) {
  .hero-trust-rail { padding: 0.85rem 0; }
  .hero-trust-rail .rail-track { gap: 2rem; }
  .hero-trust-rail__item { font-size: 0.74rem; gap: 0.6rem; }
  .hero__actions .btn--lg { padding: 0.85rem 1.5rem; }
  /* The two hero buttons sit side by side, both kept as buttons (Avara 2026-09-25). */
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; padding: 0.85rem 1rem; font-size: 0.92rem; white-space: nowrap; }
  .hero__meta { gap: 0.9rem; padding-top: 1.1rem; }
  .hero__meta-item + .hero__meta-item { padding-top: 0.9rem; }
  .hero__meta-value { font-size: 1.05rem; }
}

/* Phone hero: label and top space sized for a phone (Avara 2026-09-25). The phone hero photo is a portrait crop
   of the same image (index.html <picture>), because the landscape file was being stretched to fill a tall box. */
.hero__media picture { display: contents; }
@media (max-width: 767px) {
  .hero__kicker { font-size: 0.66rem; letter-spacing: 0.16em; gap: 0.55rem; }
  .hero__kicker::before { width: 22px; }
}

/* Phones: the service card grows to fit its text instead of clipping it (Avara 2026-09-25). The photo sits behind
   the whole card and the text keeps its dark fade over the photo, as on desktop. */
@media (max-width: 767px) {
  .service-card, .services-split__right .service-card { min-height: 0; }
  .service-card__media, .services-split__right .service-card__media { position: absolute; inset: 0; min-height: 0; }
  .service-card__body { position: relative; inset: auto; padding-top: 9rem; }
}
@media (max-width: 767px) { .service-card--wide { height: auto; } }

/* Phones: links a thumb taps get a 44px target (Apple's floor; Avara 2026-09-25). Nothing moves; the tap area is invisible. */
@media (max-width: 767px) {
  /* An invisible tap area around the link, so its underline stays tight under the words. */
  .service-card__services a, .sitemap-col li a, .call-team__who a, .faq-more a, .areas-link { position: relative; }
  .service-card__services a::before, .sitemap-col li a::before, .call-team__who a::before, .faq-more a::before,
  .areas-link::before { content: ''; position: absolute; inset: -13px -6px; }
}

/* Phone map labels: enlarged by a rule inside assets/areas-map.svg (Avara 2026-09-25). */

/* Phone review fixes (Avara 2026-09-25: every section of every page reviewed at 393px in WebKit). */
@media (max-width: 767px) {
  /* Sections carry padding top and bottom, so neighbours doubled into ~170px gaps; halve it on phones. */
  :root { --section-pad-y: 3.25rem; }
  /* Projects carousel: show a real slice of the next card (photo, not a single letter) as the swipe hint. */
  .featured-projects-rail .swiper-slide { width: 74vw; }
  /* Small uppercase labels: tighter tracking so they fit one line more often. */
  .page-hero__kicker, .project-card__tag, .section-head__kicker, .service-card__num { letter-spacing: 0.1em; }
  /* Page heroes: a darker overlay behind the text, so white words stay readable over pale plaster or sky. */
  .page-hero__scrim { background: linear-gradient(180deg, rgba(20,18,14,0.62) 0%, rgba(20,18,14,0.58) 45%, rgba(20,18,14,0.84) 100%); }
  /* Page hero buttons side by side when both labels fit; a long label ("Discuss a similar project") takes its own
     full-width row instead of being clipped (phone review round 2). */
  .page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; width: 100%; }
  .page-hero__actions .btn { flex: 1 1 auto; padding: 0.85rem 1rem; font-size: 0.92rem; white-space: nowrap; }
  /* Bullet lists at the same size as the paragraphs around them. */
  .project-body__prose ul, .project-body__prose li, .section ul li { font-size: inherit; }
  /* Project galleries: the first photo keeps the same shape as the rest on a phone. */
  .project-photos figure:first-child { aspect-ratio: 4/3; }
  /* Contact form: less side padding, so the fields use the width of the screen. */
  .contact-form { padding: 1.4rem 1.1rem; }
  .hero__actions .btn--ghost-light { padding-inline: 0.9rem; }
}

@media (max-width: 767px) {
  /* The paragraph before a Read more link keeps no bottom margin, so the link sits close under it. */
  p.rm-last { margin-bottom: 0; }
}

/* Links inside a sentence stay inline: the tap-target padding above made gaps either side of them and before the full
   stop ("Office ."). Links within text are exempt from the 44px target (WCAG 2.5.8, inline exception). */
.prose p a, .thank-you p a { display: inline; padding: 0; min-height: 0; }
@media (max-width: 767px) {
  /* Sections that run on from the one before get a little space above their heading on phones. */
  .section--flush-top { padding-top: 1.25rem; }
  /* No extra band after a project gallery; the section's own padding is enough. */
  .project-photos { margin-bottom: 0; }
  /* A little more shade in the middle of page heroes, where pale beams and plaster sit behind the text. */
  .page-hero__scrim { background: linear-gradient(180deg, rgba(20,18,14,0.66) 0%, rgba(20,18,14,0.66) 45%, rgba(20,18,14,0.86) 100%); }
}

/* Pages with no hero photo (privacy, terms, 404, thank-you): the see-through top bar vanished on the cream page,
   taking the menu button and logo with it. It is solid from the start there, as it is once scrolled elsewhere. */
body:not(:has(.hero)):not(:has(.page-hero)) .nav { background: rgba(20,18,14,0.93); border-bottom: 1px solid rgba(246,241,231,0.08); }