/* style.css — Forty Group homepage mockup */

.wrap { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-8); }
@media (max-width: 640px) { .wrap { padding-inline: var(--space-5); } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: transparent;
  transition: background 260ms ease, box-shadow 260ms ease;
}
.site-header.on-dark {
  background: var(--color-header-bg);
  box-shadow: var(--shadow-header-scrolled);
  border-bottom: 1px solid var(--color-header-bg-active);
}
.site-header.is-scrolled {
  background: var(--color-header-bg);
  box-shadow: var(--shadow-header-scrolled);
  border-bottom: 1px solid var(--color-header-bg-active);
}
.logo-lockup { display: flex; align-items: center; gap: var(--space-3); }
.logo-img-wrap { position: relative; display: inline-block; height: 26px; }
.logo-img { height: 100%; width: auto; display: block; }
.logo-img-dark { position: absolute; inset: 0; opacity: 0; transition: opacity 260ms ease; }
.logo-img-light { transition: opacity 260ms ease; }
.site-header.is-scrolled .logo-img-light { opacity: 1; }
.site-header.is-scrolled .logo-img-dark { opacity: 0; }
.site-header.on-light .logo-img-light { opacity: 0; }
.site-header.on-light .logo-img-dark { opacity: 1; }
.site-header.on-light.is-scrolled .logo-img-light { opacity: 1; }
.site-header.on-light.is-scrolled .logo-img-dark { opacity: 0; }
.footer-brand .logo-img-wrap { height: 30px; }

.main-nav { display: flex; align-items: center; gap: var(--space-8); }
.main-nav ul { display: flex; gap: var(--space-6); list-style: none; }
.main-nav a:not(.btn) {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); font-weight: 500; color: var(--color-text-inverse);
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  transition: color 260ms ease, opacity 200ms ease; opacity: 0.86;
}
.site-header.is-scrolled .main-nav a:not(.btn) { color: var(--color-text-inverse); }
.site-header.on-light .main-nav a:not(.btn) { color: var(--color-header-bg); }
.site-header.on-light.is-scrolled .main-nav a:not(.btn) { color: var(--color-text-inverse); }
.site-header.is-scrolled .btn-ghost-light { border-color: color-mix(in oklab, var(--color-text-inverse) 55%, transparent); color: var(--color-text-inverse); }
.site-header.is-scrolled .btn-ghost-light:hover { border-color: var(--color-text-inverse); background: color-mix(in oklab, var(--color-text-inverse) 14%, transparent); }
.main-nav a:not(.btn):hover { opacity: 1; }
.main-nav a:not(.btn)::before {
  content: '';
  flex: 0 0 9px;
  align-self: center;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg) scale(0.72);
  transform-origin: 50% 50%;
  transition: transform 220ms ease;
}
.main-nav a:not(.btn):hover::before { transform: translateY(-2px) rotate(45deg) scale(0.72); }
.main-nav a:not(.btn)[aria-current] { opacity: 1; }
.main-nav a:not(.btn)[aria-current]::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(8% 22%, 92% 22%, 50% 82%);
  transform: none;
}
.main-nav a:not(.btn)[aria-current]:hover::before { transform: none; }

/* ---------- Mobile nav toggle + drawer ---------- */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.site-header.on-light .nav-toggle { color: var(--color-header-bg); }
.site-header:not(.on-light) .nav-toggle { color: var(--color-text-inverse); }
.site-header.is-scrolled .nav-toggle { color: var(--color-text-inverse); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer-backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: color-mix(in oklab, var(--color-ink) 55%, transparent);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.nav-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(420px, 86vw);
  background: var(--color-header-bg);
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-8) var(--space-10);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-10); }
.nav-drawer-head .logo-img-wrap { height: 22px; }
.nav-drawer-close {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; line-height: 1; color: var(--color-text-inverse); background: transparent; border: 0;
}
.nav-drawer-list { list-style: none; margin: 0; padding: 0; counter-reset: navitem; }
.nav-drawer-list li {
  counter-increment: navitem;
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(246,242,234,0.14);
}
.nav-drawer-list li:first-child { border-top: 1px solid rgba(246,242,234,0.14); }
.nav-drawer-list li::before {
  content: counter(navitem, decimal-leading-zero);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-highlight); letter-spacing: 0.08em;
}
.nav-drawer-list a {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-text-inverse);
}
.nav-drawer-list a[aria-current] { color: var(--color-accent-highlight); }
.nav-drawer-cta { margin-top: var(--space-8); align-self: flex-start; }
html.nav-drawer-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; padding: 0.7em 1.35em;
  border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.btn-primary { background: var(--color-accent); color: #FBF3ED; }
.btn-primary:hover { background: #2B1910; }
.hero .btn-primary { background: var(--color-header-bg); }
.hero .btn-primary:hover { background: #2B1910; }
.btn-ghost-light { border-color: color-mix(in oklab, var(--color-text-inverse) 45%, transparent); color: var(--color-text-inverse); }
.btn-ghost-light:hover { border-color: #2B1910; background: #2B1910; color: var(--color-text-inverse); }
.btn-outline { border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-ink); background: var(--color-surface-2); }
.btn-icon { width: 1em; height: 1em; }

/* ---------- Hero ---------- */
.hero {
  position: fixed; inset: 0; z-index: 0;
  height: 100vh; height: 100dvh;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  color: var(--color-text-inverse); overflow: hidden;
}
.page-stack {
  position: relative; z-index: 1;
  margin-top: 100vh; margin-top: 100dvh;
  background: var(--color-surface-offset);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 7% 62%; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-header-bg) 22%, transparent) 0%,
    color-mix(in oklab, var(--color-header-bg) 22%, transparent) 30%,
    color-mix(in oklab, var(--color-header-bg) 72%, transparent) 82%,
    color-mix(in oklab, var(--color-header-bg) 84%, transparent) 100%);
}
.hero-inner { padding: 0 var(--space-8); max-width: var(--content-wide); margin-inline: auto; width: 100%; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: #FFFFFF; margin-bottom: var(--space-6);
  text-shadow: 0 0 1px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);
}
.hero-kicker::before {
  content: ''; display: inline-block; width: 6.4px; height: 6.4px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  box-shadow: 0 0 1px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}

.hero h1 {
  font-size: var(--text-hero); font-weight: 500; max-width: 30ch; letter-spacing: -0.01em;
}
.hero h1 em { font-style: italic; color: var(--color-accent-highlight); font-weight: 400; text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.35); }
.hero-sub {
  margin-top: var(--space-8); font-size: var(--text-lg); max-width: 78ch; color: var(--color-text-inverse-muted);
  font-weight: 400; line-height: 1.55;
}
.hero-actions { display: flex; gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap; }

/* ---------- Page header (standalone secondary pages) ---------- */
.page-header {
  background: var(--color-page-header);
  color: var(--color-text);
  padding-top: calc(var(--header-offset) + var(--section-pad-y));
  padding-bottom: var(--section-pad-y);
  min-height: calc(var(--header-offset) + (var(--section-pad-y) * 2) + var(--page-hero-copy));
  box-sizing: border-box;
}
.page-header .wrap {
  max-width: var(--content-wide);
}
.page-header .section-head {
  margin-bottom: 0;
}
.page-header .eyebrow {
  color: var(--color-header-bg);
}
.page-header .section-title {
  color: var(--color-text);
  max-width: none;
}
.page-header .section-desc {
  color: #3F352C;
  max-width: none;
}

/* ---------- Stats band ---------- */
.stats-band { background: var(--color-surface-offset); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.stats-infographic {
  position: relative;
  aspect-ratio: 5666 / 1018;
}
.stats-infographic > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.stats-grid {
  position: absolute;
  inset: 0;
}
.stat-item {
  position: absolute;
  top: 50%;
  width: 17%;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.stat-item:nth-child(1) { left: 13.2%; color: #705840; }
.stat-item:nth-child(2) { left: 37.82%; color: #987048; }
.stat-item:nth-child(3) { left: 62.17%; color: #a09080; }
.stat-item:nth-child(4) { left: 86.78%; color: #b8a088; }
.stat-figure {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 3vw, 2.875rem);
  font-weight: 700;
  color: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-label {
  margin-top: var(--space-3);
  max-width: 100%;
  color: inherit;
  font-size: clamp(0.625rem, 0.9vw, var(--text-xs));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Phone-only plain stat list: hidden by default (tablet/desktop use
   the .stats-infographic grid above instead). Shown and styled inside
   the phone-only media block below. */
.stats-list-mobile { display: none; }

/* ---------- Section scaffolding ---------- */
section { padding-block: var(--section-pad-y); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8); margin-bottom: var(--space-16); }
.section-head > div { width: 100%; }
.eyebrow {
  display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); width: fit-content;
  line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ''; display: inline-block; width: 6.4px; height: 6.4px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

.section-title { font-size: var(--text-2xl); font-weight: 500; max-width: none; }
.section-desc { max-width: 70ch; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.65; margin-top: var(--space-2); }
.stats-band .section-desc { max-width: 102ch; }
.method .section-desc { max-width: 97ch; }
#services .section-desc { max-width: 113ch; }
#projects .section-desc { max-width: 125ch; }

/* ---------- Method / PLAN CREATE DELIVER ---------- */
.stats-band,
.method,
#services,
#projects,
.partners,
.cta-band {
  position: relative;
  z-index: 2;
}
#services,
#projects { background: var(--color-surface-offset); }
.method { background: var(--color-surface-offset); }
.method-infographic {
  position: relative;
  aspect-ratio: 4159 / 816;
  margin-top: var(--space-12);
}
.method-infographic > img:not(.method-mobile-graphic) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.method-mobile-graphic { display: none; }
.method-stage { display: none; }
.method-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8% 10%;
  text-align: center;
}
.method-card:nth-child(1) {
  color: #765b47;
  transform: translateX(-4%);
}
.method-card:nth-child(2) {
  color: #9d704f;
}
.method-card:nth-child(3) {
  color: #a69080;
  transform: translateX(4%);
}
.method-heading {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: var(--space-2);
}
.method-card h3 {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 3vw, 2.875rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.method-card p {
  max-width: none;
  color: inherit;
  font-size: clamp(0.75rem, 1vw, var(--text-sm));
  line-height: 1.2;
}
.method-card p span {
  display: block;
  white-space: nowrap;
}

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-4); }
.service-card {
  background: var(--color-surface); border: 2px solid #9d704f; border-radius: 10px; padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5);
  min-height: 190px; text-align: center; text-decoration: none; color: inherit; cursor: pointer;
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.service-card h3 { font-size: var(--text-lg); font-weight: 700; font-family: var(--font-body); color: #9d704f; transition: color 220ms ease; }
.service-card p { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-header-bg) 78%, white 22%); line-height: 1.2; }
.service-card:hover { box-shadow: 0 20px 40px -12px color-mix(in oklab, var(--color-ink) 22%, transparent); transform: translateY(-4px); border-color: var(--color-header-bg-active); }
.service-card:hover h3 { color: var(--color-header-bg-active); }

/* ---------- Projects: large-stage gallery with thumbnails ---------- */
.project-gallery { margin-top: var(--space-2); }
.project-gallery-main { display: flex; align-items: center; gap: var(--space-5); }
.project-gallery-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-offset);
}
.project-gallery-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}
.project-gallery-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
.project-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-gallery-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in oklab, var(--color-ink) 65%, transparent) 0%, transparent 40%); }
.project-gallery-slide figcaption {
  position: absolute; left: var(--space-6); bottom: var(--space-5); z-index: 1;
  color: var(--color-text-inverse); font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .project-gallery-slides { transition: none; }
  .project-gallery--split .project-gallery-slide { transition: none; }
  .gallery-rail-track { transition: none; }
}
.gallery-nav {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--color-text); cursor: pointer;
  box-shadow: var(--shadow-md); transition: background 160ms ease;
}
.gallery-nav:hover { background: var(--color-surface-offset); }

.project-gallery-thumbs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.project-gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  background: none;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--color-accent); }

/* Homepage: featured image on the right, vertical thumbs at the wrap edge */
.project-gallery--split .project-gallery-board {
  position: relative;
  min-height: 0;
}
.project-gallery--split .project-gallery-stage {
  width: calc(100% - 168px);
  margin-left: 0;
  margin-right: 168px;
  aspect-ratio: 16 / 9;
  background: var(--color-header-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.project-gallery--split .project-gallery-slides {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform: none;
  transition: none;
}
.project-gallery--split .project-gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 400ms ease;
}
.project-gallery--split .project-gallery-slide.is-center {
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.project-gallery--split .project-gallery-slide::after { display: none; }
.project-gallery--split .project-gallery-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}
.project-gallery--split .project-gallery-slide.is-center .project-gallery-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.project-gallery--split .project-gallery-tint { opacity: 0; }
.project-gallery-rail {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 152px;
  overflow: visible;
}
.gallery-rail-arrow {
  position: absolute;
  left: 0;
  width: 100%;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-header-bg);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-rail-arrow--up { top: 0; transform: translateY(-50%); }
.gallery-rail-arrow--down { bottom: 0; transform: translateY(50%); }
.gallery-rail-arrow svg {
  width: 16px;
  height: 10px;
  display: block;
}
.gallery-rail-arrow:hover { color: var(--color-header-bg-active); }
.gallery-rail-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
.gallery-rail-window {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  right: 0;
  overflow: hidden;
  container-type: size;
}
.gallery-rail-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform 320ms ease;
}
.gallery-rail-thumb {
  position: relative;
  flex: 0 0 calc((100cqh - (3 * var(--space-3))) / 4);
  height: calc((100cqh - (3 * var(--space-3))) / 4);
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: var(--color-header-bg);
}
.gallery-rail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(0.72) contrast(1.12);
  transform: scale(1.04);
}
.gallery-rail-tint {
  position: absolute;
  inset: 0;
  background: var(--color-header-bg);
  mix-blend-mode: color;
  pointer-events: none;
}
.gallery-rail-thumb.is-active {
  border-color: var(--color-accent);
}
.gallery-rail-thumb.is-active img {
  filter: none;
  transform: none;
}
.gallery-rail-thumb.is-active .gallery-rail-tint { opacity: 0; }
.gallery-rail-thumb:hover:not(.is-active) img { filter: grayscale(0.4) brightness(0.88); }
.project-gallery--split .project-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.project-gallery--split .project-gallery-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in oklab, var(--color-ink) 65%, transparent) 0%, transparent 40%);
  pointer-events: none;
}
.project-gallery--split .project-gallery-slide figcaption {
  left: 0;
  right: 0;
  bottom: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Projects: below-image navigation (home page) ---------- */
.project-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.gallery-counter {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  min-width: 52px;
  text-align: center;
}
.gallery-counter-sep { margin: 0 0.35em; color: var(--color-border); }
#galleryCounterCurrent { color: var(--color-text); }

@media (max-width: 860px) {
  .project-gallery-main { gap: var(--space-2); }
  .gallery-nav { width: 40px; height: 40px; font-size: 18px; }
  .gallery-thumb { width: 80px; }
  .project-gallery-controls { gap: var(--space-3); margin-top: var(--space-4); }
}

/* ---------- Quote / pull quote ---------- */
.pull-quote {
  position: sticky;
  top: var(--header-offset, 3.7rem);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(5.76rem, 12.96vw, 11.52rem);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.pull-quote-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.22;
}
.pull-quote .wrap {
  position: relative; z-index: 1; max-width: 920px; text-align: center;
  opacity: 0;
  transform: translateX(-100vw);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pull-quote.is-visible .wrap { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .pull-quote .wrap { opacity: 1; transform: none; transition: none; }
}
.pull-quote blockquote { font-family: var(--font-display); font-style: normal; font-size: var(--text-xl); line-height: 1.4; font-weight: 300; }

/* Pull-quote background: duotone tint */
.pull-quote--duotone .pull-quote-bg-parallax {
  position: absolute;
  inset: 0;
}
.pull-quote--duotone .pull-quote-bg-parallax .pull-quote-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1) brightness(0.7) contrast(1.15);
  pointer-events: none;
}
.pull-quote--duotone .pull-quote-tint {
  position: absolute;
  inset: 0;
  background: var(--color-header-bg);
  mix-blend-mode: color;
  pointer-events: none;
}

/* ---------- Partners ---------- */
.partners {
  /* Deeper beige, a step darker than the offset band above it but well short
     of the original tan. */
  background: #E5DAC9;
  color: var(--color-text);
}
.partners .section-desc { max-width: none; color: #3F352C; }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 14px;
  row-gap: 14px;
  align-items: center;
  justify-items: center;
  overflow: visible;
}
.partners-grid img {
  width: 198px;
  height: 68px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0);
  opacity: 0.78;
  transform: scale(1);
  transform-origin: center center;
  border: 1px solid rgba(63, 53, 44, 0.35);
  padding: 10px;
  box-sizing: border-box;
}
.partners-grid img[src*="reading.png"],
.partners-grid img[src*="wandle.png"],
.partners-grid img[src*="henley-homes.png"],
.partners-grid img[src*="hadley.png"],
.partners-grid img[src*="engie.png"],
.partners-grid img[src*="st-mungos.png"] {
  padding-block: 15px;
}
.partners-grid img.is-breathe {
  animation: partner-breathe 1800ms cubic-bezier(0.37, 0, 0.63, 1) both;
}
@keyframes partner-breathe {
  0% { transform: scale(1); }
  32% { transform: scale(0.965); }
  68% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-grid img.is-breathe {
    transform: none;
    animation: none;
  }
}


/* ---------- CTA ---------- */
.cta-band { position: relative; background: var(--color-ink); color: var(--color-text-inverse); overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: url('../img/street-scene-1.jpg'); background-size: cover; background-position: center;
  mix-blend-mode: luminosity; opacity: 0.22;
}
.cta-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.cta-band h2 { font-size: var(--text-2xl); max-width: 16ch; }
.cta-contact { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cta-contact a { font-size: var(--text-lg); font-family: var(--font-display); }
.cta-clients {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8);
  margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(246,242,234,0.14);
}
.cta-clients .clients-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-inverse-muted); }
.cta-clients .client-logo { height: 20px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.7; }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 2; background: var(--color-header-bg-active); color: var(--color-text-inverse-muted); padding-top: var(--space-16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-10); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(246,242,234,0.12); }
.footer-intro { padding-bottom: var(--space-12); border-bottom: 1px solid rgba(246,242,234,0.12); }
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(246,242,234,0.12);
}
.footer-brand-logo .logo-img-wrap { height: 48px; }
.footer-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.footer-bottom-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: right;
  margin-left: auto;
}
.footer-brand .footer-mantra {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-mantra .mantra-plan,
.footer-mantra .mantra-colon-1 { color: #9d704f; }
.footer-mantra .mantra-deliver,
.footer-mantra .mantra-colon-2 { color: #c0a088; }
.footer-mantra .mantra-manage { color: #cdb89a; }
.footer-legal {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}
.copy-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.copy-columns-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-right: var(--space-8);
}
.copy-columns-col + .copy-columns-col {
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-divider);
}
.copy-columns p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.services-page,
.inner-page {
  background: var(--color-surface-offset);
  padding-block: var(--section-pad-y);
}
.services-page .services-grid { margin-top: var(--space-12); }
.service-card { scroll-margin-top: 6.5rem; }

.service-details {
  background: var(--color-bg);
  padding-block: var(--section-pad-y);
}
.service-directory {
  --service-panel-line: #c4b09a;
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  background: transparent;
  border: 0;
}
.service-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: var(--color-surface-offset);
  border: 2px solid var(--service-panel-line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
}
.service-tab {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 5.1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--service-panel-line);
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  cursor: pointer;
}
.tab-icon {
  display: block;
  width: 2.75rem;
  height: 2.5rem;
  object-fit: contain;
}
.service-tab:first-child {
  border-top-left-radius: 8px;
}
.service-tab:last-child {
  border-bottom: 0;
  border-bottom-left-radius: 8px;
}
.service-tab:hover {
  color: #9d704f;
}
.service-tab[aria-selected="true"] {
  z-index: 3;
  color: #9d704f;
  background: var(--color-surface);
  margin-right: -2px;
  padding-right: calc(1rem + 2px);
}
.service-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 4px;
  background: var(--color-surface);
}
.service-shell {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border: 2px solid var(--service-panel-line);
  border-radius: 0 10px 10px 10px;
  padding: var(--space-10);
}
.service-panel {
  display: none;
  scroll-margin-top: 6.5rem;
}
.service-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
  align-items: start;
}
.service-panel h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--color-text);
}
.service-includes {
  padding-left: 0;
}
.service-includes h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.service-includes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.service-includes li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.05rem;
  border: 0;
  background: none;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text);
}
.service-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--service-panel-line);
}
.service-teaser {
  display: none;
}
.service-detail-copy {
  max-width: none;
}
.service-detail-copy p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.service-detail-copy p + p {
  margin-top: var(--space-3);
}

/* ---------- Team page (zig-zag layout matching testimonials page) ---------- */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.team-member {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: stretch;
  padding-block: var(--space-10);
  border-bottom: 1px solid color-mix(in oklab, var(--color-header-bg) 20%, transparent 80%);
}
.team-member:last-child {
  border-bottom: none;
}
.team-member--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
}
.team-member--reverse .team-photo { order: 2; }
.team-member--reverse .team-info { order: 1; }
.team-photo {
  display: flex;
  overflow: hidden;
  border-radius: 10px;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.team-info h2 {
  margin: 0;
  font-family: var(--font-body-nunito);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
}
.team-info h2 .team-nominal {
  font-family: var(--font-body-nunito);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.team-position {
  margin: 0.2em 0 0;
  font-family: var(--font-body-nunito);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
}
.team-bio {
  margin: var(--space-6) 0 0;
  font-family: var(--font-body-nunito);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-header-bg);
}
@media (max-width: 860px) {
  .team-member,
  .team-member--reverse {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .team-member--reverse .team-photo,
  .team-member--reverse .team-info { order: initial; }
  .team-photo img { max-width: 260px; height: auto; aspect-ratio: 1 / 1; }
  .team-grid {
    max-width: 480px;
    margin-inline: auto;
  }
}
@media (max-width: 480px) {
  .team-member {
    flex-direction: column;
  }
  .team-photo {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }
}

/* ---------- Testimonials page (zig-zag layout matching live fortygroup.co.uk/testimonials) ---------- */
.testimonial-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.testimonial-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: stretch;
  padding-block: var(--space-10);
  border-bottom: 1px solid color-mix(in oklab, var(--color-header-bg) 20%, transparent 80%);
}
.testimonial-row:last-child {
  border-bottom: none;
}
.testimonial-row--reverse {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
}
.testimonial-row--reverse .testimonial-photo { order: 2; }
.testimonial-row--reverse .testimonial-copy { order: 1; }
.testimonial-photo {
  display: flex;
}
.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.testimonial-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.testimonial-copy blockquote {
  margin: 0;
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-header-bg);
}
.testimonial-meta {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.testimonial-meta strong {
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}
.testimonial-meta .testimonial-role {
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
}
@media (max-width: 860px) {
  .testimonial-row,
  .testimonial-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .testimonial-row--reverse .testimonial-photo,
  .testimonial-row--reverse .testimonial-copy { order: initial; }
  .testimonial-photo img { max-width: 260px; height: auto; aspect-ratio: 1 / 1; }
}

.page-header.has-filters {
  min-height: 0;
}
.properties-page {
  padding-top: calc(var(--header-offset) + var(--section-pad-y));
}
.properties-title {
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: calc(var(--text-lg) * 1.15);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-header-bg);
  margin: 0 0 var(--space-12);
}
.property-filters {
  display: grid;
  grid-template-columns: auto minmax(16rem, 1.6fr) repeat(3, minmax(10rem, 1fr));
  align-items: center;
  gap: 0.85rem 0.95rem;
  margin-bottom: var(--space-10);
}
.filter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-header-bg);
  white-space: nowrap;
}
.filter-label span {
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
  color: var(--color-header-bg);
}
.filter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-header-bg);
}
.property-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.property-filters span {
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-header-bg);
}
.property-filters input,
.property-filters select {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.3;
  padding: 0.75rem 0.9rem;
  border-radius: 9px;
}
.property-filters select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) calc(50% - 0.12rem), calc(100% - 0.75rem) calc(50% - 0.12rem);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.property-filters input:focus,
.property-filters select:focus {
  outline: 2px solid color-mix(in oklab, var(--color-header-bg) 35%, transparent);
  outline-offset: 1px;
}
.property-count {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-6);
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: calc(var(--text-xl) * 0.5);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-header-bg);
  background: var(--color-surface-2);
  border: 1px solid color-mix(in oklab, var(--color-text-muted) 30%, white 70%);
  border-radius: 7px;
  padding: 0.35em 1em;
}
.property-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}
.property-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: 0 3px 14px 2px rgba(43, 43, 43, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.property-card:hover {
  box-shadow: 0 8px 22px 3px rgba(43, 43, 43, 0.16);
  transform: translateY(-6px);
}
.property-card-media {
  position: relative;
  aspect-ratio: 400 / 259;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface-offset) 70%, #cdb89a 30%);
}
.property-card-media img,
.property-card-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.property-status,
.property-pdf {
  display: inline-block;
  margin: 0;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.32em 0.62em;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
}
.property-status {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: #448361;
}
.property-status.is-to-let { background: #448361; color: #fff; }
.property-status.is-under-offer { background: #CB912F; color: #fff; }
.property-status.is-let { background: #787774; color: #fff; }
.property-status.is-withdrawn { background: #D44C47; color: #fff; }
.property-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.82rem 0.86rem 0.9rem;
  min-width: 0;
}
.property-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-header-bg);
}
.property-address {
  margin: 0;
  font-family: "Nunito Sans", var(--font-body), sans-serif;
  font-size: calc(var(--text-sm) * 0.9);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-header-bg);
}
.property-blurb {
  margin: 0.54rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text);
}
.property-facts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.68rem 0 0;
}
.property-facts div {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: start;
  min-width: 0;
}
.property-facts dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}
.property-facts dt::after { content: ':'; }
.property-facts dd {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text);
}
.property-pdf {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  background: #E10600;
  color: #fff;
  text-decoration: none;
}
.property-pdf:hover {
  background: #B80500;
  color: #fff;
}
.property-empty,
.property-loading {
  margin: 0;
  padding: 2rem 0;
  color: var(--color-text-muted);
}
@media (max-width: 980px) {
  .property-filters { grid-template-columns: 1fr 1fr; }
  .filter-label { grid-column: 1 / -1; }
  .property-filters label:first-of-type { grid-column: 1 / -1; }
  .property-list { grid-template-columns: 1fr; }
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.contact-card {
  background: var(--color-surface);
  border: 2px solid #9d704f;
  border-radius: 10px;
  padding: var(--space-8);
  text-decoration: none;
  color: inherit;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-header-bg-active);
  box-shadow: 0 20px 40px -12px color-mix(in oklab, var(--color-ink) 22%, transparent);
}
.contact-card span {
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9d704f;
}
.contact-card strong {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-header-bg);
}
.contact-address {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}
.contact-address p {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-header-bg);
}
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.footer-contact-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-inverse-muted);
  line-height: 1;
}
.footer-contact-value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-text-inverse);
  transition: color 160ms ease;
}
.footer-contact-item:hover .footer-contact-value {
  color: var(--color-accent-highlight);
}
.footer-brand .logo-lockup { color: var(--color-text-inverse); margin-bottom: var(--space-5); }
.footer-brand p:not(.footer-mantra) { max-width: 32ch; font-size: var(--text-sm); line-height: 1.6; }
.footer-address {
  margin: 0;
  max-width: none;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-inverse-muted);
}
.footer-logo { color: var(--color-text-inverse); }
.footer-bottom .logo-img-wrap { height: 30px; }
.footer-col h5 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-inverse); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.footer-col a { font-size: var(--text-sm); }
.footer-col a:hover { color: var(--color-text-inverse); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-6); font-size: var(--text-xs); flex-wrap: wrap; gap: var(--space-3); }
.footer-bottom .footer-address { text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .main-nav ul { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .stats-infographic { aspect-ratio: auto; }
  .stats-infographic > img { display: none; }
  .stats-grid { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .stat-item {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    min-height: 0;
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-top: 3px solid currentColor;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transform: none;
  }
  .method-infographic { aspect-ratio: auto; }
  .method-infographic > img:not(.method-mobile-graphic) { display: none; }
  .method-grid { position: static; grid-template-columns: 1fr; gap: var(--space-5); }
  .method-card {
    min-height: 220px;
    padding: var(--space-8);
    border: 6px solid var(--color-header-bg);
    border-radius: 24px;
    transform: none;
  }
  .method-card p span { white-space: normal; }
  .method-card:nth-child(2) { border-color: color-mix(in oklab, var(--color-header-bg) 72%, var(--color-accent) 28%); }
  .method-card:nth-child(3) { border-color: var(--color-accent); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile/tablet only: drop the homepage "Projects Past & Present"
     gallery and the "Who we work with" partner-logo section from the
     bottom of every page. Both stay on desktop; on mobile the client
     logos live on their own dedicated Clients page instead, reachable
     via the nav drawer. */
  #projects:not(.projects-sheets) { display: none; }
  #partners { display: none; }

  /* Tablet only (701-980px): the dedicated Clients page's own logo
     grid (6 columns on desktop) is too cramped to read. Drop to 3
     columns and give each logo more room so the brand marks are
     legible. Phone gets its own 2-column version below; desktop
     keeps the original 6-column grid. */
  .partners-grid img {
    width: 100%;
    height: 92px;
    padding: 16px;
  }

  /* Mobile/tablet only: center the footer brand block, contact
     details and copyright, and drop the street address line. Desktop
     keeps the original left/right split layout with the address. */
  .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-brand p:not(.footer-mantra) { margin-inline: auto; }
  .footer-aside {
    align-items: center;
    text-align: center;
  }
  .footer-contact {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6) var(--space-8);
  }
  .footer-contact-item { align-items: center; }
  .footer-address { display: none; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Tablet-only band: Clients page logo grid at 3 columns (phone gets
   its own 2-column version in the phone-only block below; desktop
   keeps the original 6-column grid). */
@media (min-width: 701px) and (max-width: 980px) {
  .partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .stat-item { padding: var(--space-5) var(--space-4); }
  .stat-figure { font-size: clamp(1.375rem, 6vw, 1.875rem); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Phone-only simplifications ---------- */
@media (max-width: 700px) {
  /* Tighten vertical rhythm on the light-background content sections
     (stats, method, services, projects, partners, and the plain
     inner-page sections). Section top/bottom padding and the gap
     between a section's title/subtext and the content below it were
     both far too generous on phone. Dark sections (hero, pull-quotes)
     keep their own explicit padding and are untouched. */
  section {
    padding-block: var(--space-10);
  }
  .services-page,
  .inner-page,
  .service-details {
    padding-block: var(--space-10);
  }
  .section-head {
    margin-bottom: var(--space-8);
  }

  /* Subtext line-spacing: slightly tighter on phone for the hero
     sub-paragraph and every section's section-desc copy. Hero
     subtext is also switched to white on phone for contrast. */
  .hero-sub {
    line-height: 1.4;
    color: #fff;
    font-weight: 300;
  }
  .section-desc {
    line-height: 1.45;
  }

  /* Clients page logo grid at phone width: 2 columns (tablet gets
     its own 3-column version above; desktop keeps 6 columns). */
  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  /* Hero eyebrow: at full size + letter-spacing it wraps to two lines
     on phone widths, and white text washes out against the brighter
     part of the hero photo. Shrink it to fit one line and switch to
     brand brown with a light halo so it reads on any part of the photo. */
  .hero-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    gap: var(--space-2);
    color: var(--color-header-bg);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.45);
    white-space: nowrap;
  }

  /* Hero photo on phone: the source photo is a very wide landscape
     crop, so object-fit: cover against a tall/narrow phone screen
     forces a heavily zoomed-in vertical sliver of it (only ~16% of
     its width shows). Widen the media box well beyond the viewport
     (clipped cleanly by .hero's own overflow: hidden) so the same
     cover math reveals noticeably more of the skyline either side of
     the h1 text, giving a zoomed-out feel without any letterboxing
     or layout shift. */
  .hero-media {
    left: -110%;
    right: -110%;
  }

  /* Phone only: drop the three hero buttons (Services, Available
     Properties, Get in Touch). The hero's parent already uses
     display:flex; flex-direction:column; justify-content:center, so
     once the buttons are removed from the flow, the remaining
     kicker/heading/subhead block automatically re-centers as a
     shorter block, achieving true vertical-middle alignment in the
     viewport with no extra positioning needed. Tablet and desktop
     keep the buttons unchanged. */
  .hero-actions {
    display: none;
  }

  /* Services page: drop the tab/chip directory entirely on phone in
     favour of a plain, left-aligned accordion list matching the
     homepage services teaser -- title always visible, a short
     summary shown collapsed, replaced by the full detail copy and
     services-include list when tapped open. Only one service is
     open at a time. Tablet and desktop keep the original chip-row +
     shell layout untouched. */
  .service-directory {
    grid-template-columns: 1fr;
  }
  .service-tabs {
    display: none;
  }
  .service-shell {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
  .service-panels {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }
  .service-panel,
  .service-panel.is-active {
    display: block;
  }
  .service-panel:not(:first-child) {
    position: relative;
  }
  .service-panel:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--space-10) / -2);
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(157, 112, 79, 0.45);
  }
  .service-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
  }
  .service-panel-head h2 {
    font-size: var(--text-lg);
  }
  .service-panel-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #9d704f;
    transition: transform 220ms ease;
  }
  .service-panel.is-expanded .service-panel-chevron {
    transform: rotate(180deg);
  }
  .service-teaser {
    display: block;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: color-mix(in oklab, var(--color-header-bg) 78%, white 22%);
  }
  .service-panel.is-expanded .service-teaser {
    display: none;
  }
  .service-detail-copy,
  .service-includes {
    display: none;
    margin-top: var(--space-4);
  }
  .service-panel.is-expanded .service-detail-copy,
  .service-panel.is-expanded .service-includes {
    display: block;
  }

  /* Home page "Headline Stats": on phone, drop the bordered-card
     2-col grid (tablet keeps it) in favour of a plain, left-aligned,
     single-column list -- each stat is just a bold figure line and a
     muted description line, stacked with generous spacing. */
  .stats-band .stats-infographic { display: none; }
  .stats-list-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  .stat-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    text-align: left;
  }
  .stat-text { min-width: 0; }
  /* Per-stat colours matching the desktop and tablet stats (navy, green,
     amber, red), carried through to the figure number and the vertical line. */
  .stat-row:nth-child(1) { color: #041F66; }
  .stat-row:nth-child(2) { color: #1E7F22; }
  .stat-row:nth-child(3) { color: #A96800; }
  .stat-row:nth-child(4) { color: #AE0001; }
  .stat-line {
    flex-shrink: 0;
    width: 3px;
    align-self: stretch;
    background: currentColor;
    border-radius: 2px;
  }
  .stat-figure-m {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.05;
    color: inherit;
  }
  .stat-unit {
    font-size: var(--text-lg);
    font-weight: 700;
  }
  .stat-label-m {
    margin: var(--space-1) 0 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }

  /* Home page "How we work" method cards: on phone, drop the
     oversized graphic in favour of plain left-aligned text -- no
     card box, no border, no centering. Each of the 3 steps is just
     a "Stage N" eyebrow, a title, and a description, stacked and
     left-aligned, overriding the bordered-card look that the shared
     980px block below gives tablet. */
  .method-infographic { aspect-ratio: auto; margin-top: var(--space-6); }
  .method-grid { gap: var(--space-8); }
  .method-card {
    min-height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-2);
  }
  .method-card:nth-child(1),
  .method-card:nth-child(3) {
    transform: none;
  }
  .method-heading {
    place-items: start;
    text-align: left;
    gap: var(--space-4);
  }
  .method-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: var(--space-1) var(--space-3);
    border-radius: 0;
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-inverse);
    opacity: 1;
  }
  .method-card:nth-child(1) .method-stage { background: #765b47; }
  .method-card:nth-child(2) .method-stage { background: #9d704f; }
  .method-card:nth-child(3) .method-stage { background: #a69080; }
  .method-card h3 {
    font-family: var(--font-body-nunito);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.25rem, 8vw, 3rem);
  }
  .method-card p {
    text-align: left;
    font-size: var(--text-base);
    line-height: 1.3;
  }
  .method-card p span { display: block; white-space: normal; }

  /* Home page section order, phone only, via flex order (source HTML
     order untouched, so tablet/desktop are unaffected). Hero sits
     outside .page-stack and is unaffected. Resulting order: How We
     Work, pull-quote 1, Headline Stats, pull-quote 2, Services, ... */
  .page-stack { display: flex; flex-direction: column; }
  .page-stack > section:nth-of-type(1) { order: 3; } /* stats-band, between the two quotes */
  .page-stack > section:nth-of-type(2) { order: 2; } /* pull-quote 1, unchanged */
  .page-stack > section:nth-of-type(3) { order: 1; } /* method */
  .page-stack > section:nth-of-type(4) { order: 4; } /* pull-quote 2 */
  .page-stack > section:nth-of-type(5) { order: 5; }
  .page-stack > section:nth-of-type(6) { display: none; } /* pull-quote 3 (street bg), last quote -- dropped on phone */
  .page-stack > section:nth-of-type(7) { order: 7; }
  .page-stack > section:nth-of-type(8) { order: 8; }

  /* Home page services teaser: on phone, drop the bordered-card grid
     entirely in favour of a plain, left-aligned, single-column list --
     title, always-visible description, and an outlined "More Details"
     button per service. Tablet keeps its 2-up card grid, desktop keeps
     its 3-up card grid, both untouched. */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-top: var(--space-6);
  }
  .service-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-3);
  }
  .service-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* Feint dashed divider between each service, pale brown to match
     the service accent colour, no line before the first item.
     Positioned via a pseudo-element sitting in the vertical middle
     of the grid gap, rather than flush against the next card, so it
     reads as a centred separator between items. */
  .service-card:not(:first-child) {
    position: relative;
  }
  .service-card:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--space-10) / -2);
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(157, 112, 79, 0.45);
  }
  .service-card-head h3 {
    margin: 0;
    font-size: var(--text-lg);
  }
  .service-card-chevron {
    display: none;
  }
  .service-card-panel {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 0;
  }
  .service-card-panel p {
    margin: 0;
    line-height: 1.5;
  }
  .service-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-1);
    padding: 0.3em 0.7em;
    border: 1px solid #9d704f;
    border-radius: var(--radius-sm);
    background: #9d704f;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FBF3ED;
    transition: background 200ms ease, border-color 200ms ease;
  }
  .service-card:hover .service-more-btn,
  .service-card:active .service-more-btn {
    background: #2B1910;
    border-color: #2B1910;
  }

  /* Footer, phone only: drop the email item, keeping the remaining
     two contact items (label above number, as before) sitting side
     by side horizontally -- shrink the text slightly and bold the
     numbers so both columns fit comfortably. Mantra
     ("PLAN: DELIVER: MANAGE") sized up slightly for phone. */
  .footer-contact-item:nth-child(3) { display: none; }
  .footer-contact-label {
    font-size: 0.625rem;
  }
  .footer-contact-value {
    font-size: var(--text-base);
    font-weight: 700;
  }
  .footer-brand .footer-mantra {
    font-size: 1.5rem;
  }

  /* Drop the copyright/legal row and its divider line entirely on
     phone -- the address is already hidden above at 980px, so this
     removes the now-empty bottom bar and the border above it. */
  .footer-main {
    border-bottom: none;
  }
  .footer-bottom {
    display: none;
  }
}

/* ---------- Fixed back / top / next mobile footer bar ---------- */
.mobile-page-footer {
  display: none;
}
@media (max-width: 980px) {
  .mobile-page-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--color-header-bg);
    padding: 0.6rem var(--space-4);
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }
  .mobile-page-footer-link,
  .mobile-page-footer-link.is-disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .mobile-page-footer-link.mobile-page-footer-next {
    justify-self: end;
  }
  .mobile-page-footer-link.mobile-page-footer-back {
    justify-self: start;
  }
  .mobile-page-footer-link svg {
    width: 14px;
    height: 14px;
    flex: none;
  }
  .mobile-page-footer-link.is-disabled {
    opacity: 0.32;
    pointer-events: none;
  }
  .mobile-page-footer-top {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid rgba(245, 241, 232, 0.35);
    background: transparent;
    color: var(--color-text-inverse);
    cursor: pointer;
  }
  .mobile-page-footer-top svg {
    width: 16px;
    height: 16px;
  }
  body {
    padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------- Projects page: factsheet sheets + involved grid ---------- */
#projects.projects-sheets {
  background: var(--color-bg);
}
.project-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-20);
}
.project-sheet {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.project-sheet-media {
  margin: 0 0 var(--space-6);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-offset);
}
.project-sheet-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-sheet h2 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
.project-sheet > p {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}
.project-sheet-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-sheet-facts div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.project-sheet-facts dt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}
.project-sheet-facts dt::after { content: ':'; }
.project-sheet-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.projects-also {
  background: var(--color-surface-offset);
}
.projects-also .section-head {
  margin-bottom: var(--space-10);
}
.project-involved-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
.project-involved {
  margin: 0;
  min-width: 0;
}
.project-involved img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--color-surface);
}
.project-involved figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.project-involved p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text);
}
@media (max-width: 980px) {
  .project-sheet-grid { grid-template-columns: 1fr; row-gap: var(--space-16); }
  .project-involved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hero-header removal: lead section spacing (must load after .inner-page/.service-details/.projects-sheets/.properties-page) ---------- */
.section-lead-offset {
  padding-top: calc(var(--header-offset) + var(--section-pad-y)) !important;
}
.section-lead-offset .section-desc {
  max-width: none;
}
.properties-page .section-desc {
  max-width: none;
}

/* ---------- Contact page: map + enquiry forms ---------- */
.contact-map {
  margin-bottom: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 380px;
}
.enquiry-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}
.enquiry-form-head h2 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-header-bg);
  margin: 0 0 var(--space-2);
}
.enquiry-form-head p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.tel-inline {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.enquiry-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.enquiry-form .required-mark {
  color: #9d704f;
  margin-left: 0.15em;
}
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  resize: vertical;
}
.enquiry-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B675E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}
.enquiry-form input:focus,
.enquiry-form textarea:focus,
.enquiry-form select:focus {
  outline: none;
  border-color: var(--color-header-bg);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-header-bg) 18%, transparent);
}
.enquiry-form .btn {
  align-self: flex-start;
}
.enquiry-form-status {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--text-sm);
}
.enquiry-form-status.is-success {
  color: var(--color-secondary);
  font-weight: 600;
}
.enquiry-form-status.is-error {
  color: #A13544;
  font-weight: 600;
}
@media (max-width: 900px) {
  .enquiry-forms { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Page transition ---------- */
/* Fixed brand-brown veil that fades out on load (page appears) and fades
   back in before navigating (page covered), so pages dissolve through the
   brand colour with no white flash. Guarded by html.pt-ready, added by JS,
   so with JS off the veil never shows. Also lets the native View Transitions
   API run a true cross-document crossfade where supported. */
@view-transition { navigation: auto; }
#pt-veil {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--color-header-bg);
  opacity: 0; pointer-events: none; will-change: opacity;
}
html.pt-ready #pt-veil { opacity: 1; }
html.pt-ready.pt-in #pt-veil { opacity: 0; transition: opacity 300ms ease; }
html.pt-ready.pt-out #pt-veil { opacity: 1; transition: opacity 300ms ease; }
@media (prefers-reduced-motion: reduce) {
  #pt-veil,
  html.pt-ready #pt-veil,
  html.pt-ready.pt-in #pt-veil,
  html.pt-ready.pt-out #pt-veil { opacity: 0 !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; }

/* ---------- Properties page, phone only (<= 700px) ----------
   Three mobile-only treatments, all scoped so tablet and desktop keep the
   existing filter grid and 3-up / 1-up photo cards untouched:
   1. Compact horizontal row cards that expand on tap (single-open).
   2. The filter fields move into a bottom sheet behind a Filter listings button.
   3. Ten listings render at a time behind a Load more button.
   The wrappers added to the markup are inert above 700px: .property-filter-shell
   and .property-card-panel use display: contents, and the sheet chrome,
   trigger button, meta line and chevron are display: none. */
.property-filter-shell { display: contents; }
.property-card-panel { display: contents; }
.property-filter-trigger,
.property-sheet-backdrop,
.property-sheet-head,
.property-sheet-actions,
.property-meta,
.property-card-chevron,
.property-load-more { display: none; }

@media (max-width: 700px) {
  /* --- Filter trigger button --- */
  .property-filters { display: none; }
  .property-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-6);
    padding: 0.7rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    font-family: "Nunito Sans", var(--font-body), sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-header-bg);
    cursor: pointer;
  }
  .property-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--color-header-bg);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
  }
  .property-filter-badge[hidden] { display: none; }

  /* --- Bottom sheet --- */
  .property-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(20, 13, 8, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }
  .property-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .property-filter-shell {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    max-height: 82vh;
    overflow-y: auto;
    padding: 0 var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 28px rgba(20, 13, 8, 0.28);
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  .property-filter-shell.is-open { transform: translateY(0); }
  .property-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-5) 0 var(--space-4);
    background: var(--color-bg);
  }
  .property-sheet-title {
    font-family: "Nunito Sans", var(--font-body), sans-serif;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-header-bg);
  }
  .property-sheet-close {
    border: 0;
    background: none;
    padding: 0 0.25rem;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-header-bg);
    cursor: pointer;
  }
  /* Inside the sheet the fields stack full width and the inline "Filters:"
     label is redundant, since the sheet has its own heading. */
  .property-filter-shell .property-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin: 0;
  }
  .property-filter-shell .filter-label { display: none; }
  .property-filter-shell .property-filters input,
  .property-filter-shell .property-filters select { font-size: 1rem; }
  .property-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.7rem;
    margin-top: var(--space-5);
  }
  .property-sheet-clear,
  .property-sheet-apply {
    padding: 0.85rem 1rem;
    border-radius: 9px;
    font-family: "Nunito Sans", var(--font-body), sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
  }
  .property-sheet-clear {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-header-bg);
  }
  .property-sheet-apply {
    border: 1px solid var(--color-header-bg);
    background: var(--color-header-bg);
    color: #fff;
  }

  /* --- Load more --- */
  .property-load-more {
    display: block;
    width: 100%;
    margin-top: var(--space-6);
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-header-bg);
    border-radius: 9px;
    background: transparent;
    font-family: "Nunito Sans", var(--font-body), sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-header-bg);
    cursor: pointer;
  }
  .property-load-more[hidden] { display: none; }
}

/* ---------- Services page, phone only: drop the opening lede sentence ---------- */
@media (max-width: 700px) {
  .section-desc-lede,
  .section-desc-tail { display: none; }
}

/* ---------- Services page, phone only: beige band behind the services list ----------
   Reuses the projects page band colour (--color-surface-offset). The title area
   above it keeps the page background. Negative inline margins cancel the .wrap
   gutter so the band bleeds edge to edge, then the gutter is restored as padding. */
@media (max-width: 700px) {
  .service-details .service-directory {
    background: var(--color-surface-offset);
    margin-inline: calc(var(--space-8) * -1);
    padding: var(--space-8);
  }
}
@media (max-width: 640px) {
  .service-details .service-directory {
    margin-inline: calc(var(--space-5) * -1);
    padding: var(--space-6) var(--space-5);
  }
}

/* ---------- Testimonials page, phone only: photo + attribution header row ----------
   Small square photo top left with the name, company and job title stacked beside
   it, then the quote full width underneath. Above 700px nothing changes: the
   company / separator / job spans stay inline so the role reads as one line. */
@media (max-width: 700px) {
  .testimonial-row,
  .testimonial-row--reverse {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "photo meta"
      "quote quote";
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    padding-block: var(--space-8);
    align-items: start;
  }
  .testimonial-photo {
    grid-area: photo;
    width: 76px;
    height: 76px;
  }
  .testimonial-photo img {
    max-width: none;
    width: 76px;
    height: 76px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }
  /* Let the blockquote and the attribution become grid items of the row. */
  .testimonial-copy { display: contents; }
  .testimonial-copy blockquote { grid-area: quote; line-height: 1.45; }
  .testimonial-meta {
    grid-area: meta;
    align-self: center;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    gap: 0.15em;
    min-width: 0;
  }
  .testimonial-meta strong { font-size: 1.1875rem; line-height: 1.2; }
  .testimonial-meta .testimonial-role {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }
  .t-sep { display: none; }
  .t-company {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }
  .t-job {
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: nowrap;
    color: color-mix(in oklab, var(--color-text) 82%, transparent);
  }
}

/* ---------- Testimonials page, phone only: alternating full-bleed bands ----------
   Every other row picks up the beige band colour so the list reads as separate
   blocks and lifts away from the title area above it. Bleeds edge to edge by
   cancelling the .wrap gutter, then restoring it as padding. */
@media (max-width: 700px) {
  .testimonial-list {
    margin-inline: calc(var(--space-8) * -1);
  }
  .testimonial-row,
  .testimonial-row--reverse {
    padding-inline: var(--space-8);
    border-bottom: none;
  }
  .testimonial-row:nth-of-type(odd) {
    background: var(--color-surface-offset);
  }
  .testimonial-row:last-child {
    border-bottom: none;
  }
}
@media (max-width: 640px) {
  .testimonial-list {
    margin-inline: calc(var(--space-5) * -1);
  }
  .testimonial-row,
  .testimonial-row--reverse {
    padding-inline: var(--space-5);
  }
}

/* ---------- Copy swap utilities: same slot, different wording per breakpoint ---------- */
.only-phone { display: none; }
@media (max-width: 700px) {
  .only-wide { display: none; }
  .only-phone { display: inline; }
}

/* ---------- Testimonials page, phone only: white / beige alternation ----------
   The title block reads as the first white band, the first testimonial is beige,
   and the rest alternate. Scoped to .testimonials-page so no other page moves. */
@media (max-width: 700px) {
  .testimonials-page .inner-page {
    background: var(--color-surface-2);
  }
  .testimonials-page .testimonial-row:nth-of-type(even) {
    background: var(--color-surface-2);
  }
}

/* Phone: drop the section's bottom padding so the last testimonial band runs
   straight into the partners section instead of leaving a white strip. */
@media (max-width: 700px) {
  .testimonials-page .inner-page { padding-bottom: 0; }
}

/* Phone: spaced colons in the footer strapline, in the gold stat accent. */
@media (max-width: 700px) {
  .footer-mantra .mantra-colon {
    color: #D4A574;
    margin-inline-start: 0.3em;
  }
}

/* ---------- Menu icon: supplied burger-menu.png?v=2 ----------
   The artwork is used as a mask so it still inherits the header's colour
   (dark on light, cream on dark and when scrolled). The three bar spans stay
   in the markup and are revealed only in the open state, so the existing
   cross animation is unchanged. The toggle only exists below 980px, so
   desktop is unaffected. */
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("../img/icons/burger-menu.png?v=2") no-repeat center / 25px auto;
  mask: url("../img/icons/burger-menu.png?v=2") no-repeat center / 25px auto;
  transition: opacity 160ms ease;
}
.nav-toggle[aria-expanded="false"] .nav-toggle-bar { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { opacity: 0; }

/* ---------- Guard: phone-only accordion chevrons must never render wider ----------
   The chevron SVGs in the service card and service panel headings exist purely
   for the phone accordions and were only sized inside the 700px block, so above
   that width they had no dimensions and stretched to fill their container.
   Hidden by default everywhere and switched on only at phone width. */
.service-card-chevron,
.service-panel-chevron {
  display: none;
}
@media (max-width: 700px) {
  .service-panel-chevron {
    display: block;
  }
}

/* Guard: the phone-only "More Details" button on the homepage service cards was
   styled only inside the 700px block, so above that width it rendered as stray
   plain text. Hidden by default, shown only at phone width. */
.service-more-btn {
  display: none;
}
@media (max-width: 700px) {
  .service-more-btn {
    display: inline-flex;
  }
}

/* ---------- Properties page, phone only: results counter and filter button ----------
   Sit side by side on one row, counter first, matched heights. Achieved by
   laying out the page wrap on a two-column grid at phone width only, so the
   desktop DOM order (filters, then counter) is untouched. */
@media (max-width: 700px) {
  .properties-page .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.6rem;
  }
  .properties-page .section-head,
  .properties-page .property-list,
  .properties-page .property-load-more,
  .properties-page .property-empty {
    grid-column: 1 / -1;
  }
  .properties-page .property-count {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--space-6);
    padding: 0.7rem 0.9rem;
    border-radius: 9px;
    font-size: var(--text-sm);
    line-height: 1.2;
    text-align: center;
  }
  .properties-page .property-filter-trigger {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    margin: 0 0 var(--space-6);
  }
}

/* ---------- Inner pages, phone only: white hero band ----------
   The lead block on every inner page sits on white, with the rest of the page
   keeping its own background. Negative inline margins cancel the .wrap gutter
   and the negative top margin pulls the band up under the fixed header, then
   both are restored as padding so the copy stays put. */
@media (max-width: 700px) {
  .section-lead-offset > .wrap > .section-head {
    background: var(--color-surface-2);
    margin-top: calc((var(--header-offset) + var(--section-pad-y)) * -1);
    padding-top: calc(var(--header-offset) + var(--section-pad-y));
    margin-inline: calc(var(--space-8) * -1);
    padding-inline: var(--space-8);
    padding-bottom: var(--space-8);
  }
}
@media (max-width: 640px) {
  .section-lead-offset > .wrap > .section-head {
    margin-inline: calc(var(--space-5) * -1);
    padding-inline: var(--space-5);
    padding-bottom: var(--space-5);
  }
}

/* ---------- Team page, phone only: testimonials-style rows ----------
   Small square photo on the left with the name and job title stacked beside it
   and vertically centred against the photo, then the bio full width underneath.
   Rows bleed edge to edge and alternate beige / white, exactly as the
   testimonials list does. Nothing above 700px changes. */
@media (max-width: 700px) {
  .team-grid {
    max-width: none;
    margin-inline: calc(var(--space-8) * -1);
  }
  .team-member,
  .team-member--reverse {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "photo name"
      "photo role"
      "bio bio";
    column-gap: var(--space-4);
    row-gap: 0;
    padding-block: var(--space-8);
    padding-inline: var(--space-8);
    border-bottom: none;
    align-items: start;
  }
  .team-photo {
    grid-area: photo;
    align-self: center;
    width: 76px;
    height: 76px;
    border-radius: 8px;
  }
  .team-photo img {
    max-width: none;
    width: 76px;
    height: 76px;
    aspect-ratio: 1 / 1;
  }
  /* Let the name, position and bio become grid items of the row. */
  .team-info { display: contents; }
  .team-info h2 {
    grid-area: name;
    align-self: end;
    font-size: 1.1875rem;
    line-height: 1.2;
  }
  .team-position {
    grid-area: role;
    align-self: start;
    margin: 0.15em 0 0;
    font-size: 0.8125rem;
    line-height: 1.3;
  }
  .team-bio {
    grid-area: bio;
    margin: var(--space-4) 0 0;
    line-height: 1.45;
  }
  .team-member:nth-of-type(odd) {
    background: var(--color-surface-offset);
  }
  .team-member:nth-of-type(even) {
    background: var(--color-surface-2);
  }
}
@media (max-width: 640px) {
  .team-grid {
    margin-inline: calc(var(--space-5) * -1);
  }
  .team-member,
  .team-member--reverse {
    padding-inline: var(--space-5);
  }
}

/* ---------- Contact page, phone only: keep the forms inside the screen ----------
   The property select is populated with full property addresses, and its
   intrinsic width was sizing the whole single-column grid track, pushing both
   forms wider than the viewport. Every field is pinned to the form width and
   the select truncates instead of stretching. */
@media (max-width: 700px) {
  .enquiry-forms {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .enquiry-form {
    min-width: 0;
    max-width: 100%;
    padding: var(--space-6);
  }
  .enquiry-form label {
    min-width: 0;
    max-width: 100%;
  }
  .enquiry-form input,
  .enquiry-form textarea,
  .enquiry-form select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .enquiry-form select {
    text-overflow: ellipsis;
  }
}

/* ---------- Contact page: collapsible enquiry headings ----------
   The toggles only exist on phone. They are hidden and their chevron is given
   fixed dimensions outside the media query, so nothing can render unstyled or
   stretch on tablet or desktop. */
.enquiry-toggle { display: none; }
.enquiry-toggle-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform 200ms ease;
}
@media (max-width: 700px) {
  .enquiry-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    margin: 0;
    padding: 0.95rem var(--space-6);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body-nunito);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-header-bg);
    text-align: left;
    cursor: pointer;
  }
  .enquiry-toggle[aria-expanded="true"] .enquiry-toggle-chevron {
    transform: rotate(180deg);
  }
  /* Collapsed by default, revealed by the toggle. */
  .enquiry-form { display: none; }
  .enquiry-form.is-open { display: flex; }
  /* The toggle already names the form, so drop the duplicate heading. */
  .enquiry-form-head h2 { display: none; }
  .enquiry-forms { gap: var(--space-5); }
}

/* ---------- Projects page, phone only: dashed divider between the four schemes ----------
   Same treatment as the homepage services list: a feint pale brown dashed rule
   sitting in the vertical middle of the row gap, with no line above the first
   project. Phone only, so the desktop two column grid is untouched. */
@media (max-width: 700px) {
  .project-sheet-grid { row-gap: var(--space-16); }
  .project-sheet:not(:first-child) { position: relative; }
  .project-sheet:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--space-16) / -2);
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(157, 112, 79, 0.45);
  }
}

/* ---------- Projects page, phone only: stacked project facts ----------
   Label on its own line with the value directly underneath, instead of the
   desktop two column label / value split, so long values use the full width.
   Applies to all four schemes. Desktop is untouched. */
@media (max-width: 700px) {
  .project-sheet-facts div {
    display: block;
    grid-template-columns: none;
  }
  .project-sheet-facts dt {
    display: block;
    margin-bottom: 0.15em;
  }
  .project-sheet-facts dd {
    display: block;
    margin: 0;
  }
}

/* ---------- Slide-out menu: Nunito Sans links ----------
   The drawer sits behind the hamburger only, so this never touches the desktop
   header nav. */
.nav-drawer-list a {
  font-family: var(--font-body);
  font-weight: 600;
}

/* ---------- Headline Stats: bar layout (10 Oct 2026) ----------
   Desktop and tablet (701px and up). Replaces the ellipse infographic with
   four left-aligned columns, each with a coloured vertical rule, a large
   figure and an uppercase label in the same colour. Tablet is the same
   layout scaled down. Phone keeps its own stacked list (same colours). */
@media (min-width: 701px) {
  .stats-infographic { aspect-ratio: auto; }
  .stats-infographic > img { display: none; }
  .stats-grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.2vw, 2rem);
  }
  .stat-item,
  .stat-item:nth-child(n) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    padding: 0.35rem 0 0.35rem clamp(1.1rem, 2.4vw, 2.25rem);
    background: none;
    border: 0;
    border-left: 5px solid currentColor;
    border-radius: 0;
    box-shadow: none;
  }
  .stat-item:nth-child(1) { color: #041F66; }
  .stat-item:nth-child(2) { color: #1E7F22; }
  .stat-item:nth-child(3) { color: #A96800; }
  .stat-item:nth-child(4) { color: #AE0001; }
  .stat-figure {
    font-size: clamp(2.4rem, 4.2vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .stat-label {
    margin-top: clamp(0.75rem, 1.25vw, 1.125rem);
    font-size: clamp(0.8rem, 1.2vw, 1.15rem);
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
}
/* Narrow tablet (701px to 919px): same bar design, arranged 2 x 2 so the
   labels stay at a readable size instead of shrinking to fit four across. */
@media (min-width: 701px) and (max-width: 919px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
    row-gap: var(--space-10);
  }
  .stat-item,
  .stat-item:nth-child(n) { padding-left: var(--space-6); }
  .stat-figure { font-size: clamp(2.75rem, 7vw, 3.5rem); }
  .stat-label { margin-top: clamp(0.75rem, 1.8vw, 1rem); font-size: clamp(0.95rem, 2vw, 1.1rem); }
}

/* ---------- How We Work: stage layout (10 Oct 2026) ----------
   Desktop and tablet (701px and up). Replaces the arrow infographic with
   the phone treatment (Stage N tag, large uppercase title, left-aligned
   copy) with the three stages side by side. Colours (navy, teal, green)
   apply at every width, including phone, via the block after this one. */
@media (min-width: 701px) {
  .method-infographic { aspect-ratio: auto; }
  .method-infographic > img:not(.method-mobile-graphic) { display: none; }
  .method-grid {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .method-card,
  .method-card:nth-child(n) {
    transform: none;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-3);
  }
  .method-heading {
    place-items: start;
    text-align: left;
    gap: var(--space-4);
  }
  .method-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: calc(var(--space-1) * 0.8) calc(var(--space-3) * 0.8);
    border-radius: 0;
    font-size: calc(var(--text-xs) * 0.8);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-inverse);
  }
  .method-card h3 {
    font-family: var(--font-body-nunito);
    font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  }
  .method-card p {
    text-align: left;
    font-size: clamp(0.95rem, 1.15vw, 1.125rem);
    line-height: 1.35;
  }
}

/* Tablet (701px to 980px): same three-across layout, scaled down. */
@media (min-width: 701px) and (max-width: 980px) {
  .method-grid { column-gap: clamp(1.25rem, 3vw, 2rem); }
  .method-card h3 { font-size: clamp(1.9rem, 4.3vw, 2.6rem); }
  .method-card p { font-size: clamp(0.9rem, 1.7vw, 1rem); }
  .method-card p span { display: inline; }
}

/* How We Work colours at every width: navy, teal, green (navy and green
   shared with Headline Stats). Tag text stays white. */
.method-card:nth-child(1) { color: #041F66; }
.method-card:nth-child(2) { color: #007A7A; }
.method-card:nth-child(3) { color: #1E7F22; }
.method-card:nth-child(1) .method-stage { background: #041F66; }
.method-card:nth-child(2) .method-stage { background: #007A7A; }
.method-card:nth-child(3) .method-stage { background: #1E7F22; }

/* ---------- Services page: desktop service cards (10 Oct 2026) ----------
   Desktop only (981px and up). Six stacked cards: label, bullet list and a
   Read more button that expands the full description in place. The image
   sits on the right; its faded left edge matches the card colour, which
   alternates light / darker beige. Tablet and phone keep the tabbed
   directory and accordion. */
.svc-cards { display: none; }
@media (min-width: 981px) {
  .service-details .service-directory { display: none; }
  .svc-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-10);
  }
  .svc-card {
    --card-h: 17.5rem;
    position: relative;
    overflow: hidden;
    min-height: var(--card-h);
    border-radius: 14px;
    background: #efe3cb;
    color: #2e2216;
  }
  .svc-card:nth-child(even) { background: #e2d0ac; }
  .svc-card-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    max-width: 46%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    /* Soft left edge so the photo blends into the card colour. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%);
  }
  .svc-card.is-open .svc-card-img {
    height: var(--card-h);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 12%), linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-composite: intersect;
  }
  .svc-card-body {
    position: relative;
    padding: 2.1rem 2.25rem 2rem;
    max-width: 64%;
  }
  .svc-card h2 {
    font-family: var(--font-body-nunito, 'Nunito Sans', sans-serif);
    font-size: clamp(1.3rem, 1.6vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #3a2a1c;
    margin: 0 0 var(--space-4);
  }
  .svc-card-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.15rem;
    font-size: clamp(0.88rem, 1.05vw, 1.05rem);
    line-height: 1.38;
  }
  .svc-card-list li { padding-left: 0.35rem; }
  .svc-card-list li::marker { color: #2e2216; }
  .svc-card-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }
  .svc-card.is-open .svc-card-more { grid-template-rows: 1fr; }
  .svc-card-more-inner { overflow: hidden; }
  .svc-card-more-inner p {
    max-width: 68ch;
    margin: 0 0 var(--space-4);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.55;
  }
  .svc-card-more-inner p:first-child { margin-top: var(--space-6); }
  .svc-card-toggle {
    margin-top: var(--space-6);
    padding: 0.44rem 0.88rem;
    border: 0;
    border-radius: 2px;
    background: #9e7252;
    color: #fff;
    font-family: var(--font-body-nunito, 'Nunito Sans', sans-serif);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .svc-card-toggle:hover,
  .svc-card-toggle:focus-visible { background: #7f5a40; }
  .svc-card-toggle:focus-visible { outline: 2px solid #3a2a1c; outline-offset: 2px; }
}
@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .svc-card-more { transition: none; }
}
.svc-card.no-anim .svc-card-more { transition: none; }

/* ---------- Testimonials: tablet keeps the desktop zig-zag (10 Oct 2026) ----------
   Tablet (701px to 980px): photo beside the quote, alternating sides as on
   desktop, with a smaller square photo so the quote keeps its width. Overrides
   the old 860px stacking rule. Desktop and phone untouched. */
@media (min-width: 701px) and (max-width: 980px) {
  .testimonial-row {
    grid-template-columns: clamp(130px, 18vw, 170px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .testimonial-row--reverse {
    grid-template-columns: minmax(0, 1fr) clamp(130px, 18vw, 170px);
  }
  .testimonial-row--reverse .testimonial-photo { order: 2; }
  .testimonial-row--reverse .testimonial-copy { order: 1; }
  .testimonial-photo img {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .testimonial-copy { align-self: stretch; }
}

/* ---------- Team: tablet layout (11 Oct 2026) ----------
   Tablet (701px to 980px): every member uses the same left-aligned layout.
   Square photo on the left, name and position to its right, full-width bio
   underneath. Overrides the old 860px stacking rule and its 480px centred
   column. Desktop and phone untouched. */
@media (min-width: 701px) and (max-width: 980px) {
  .team-grid {
    max-width: none;
    margin-inline: 0;
  }
  .team-member,
  .team-member--reverse {
    grid-template-columns: clamp(130px, 18vw, 170px) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas:
      "photo name"
      "photo role"
      "bio   bio";
    column-gap: var(--space-8);
    row-gap: 0;
  }
  .team-member .team-photo,
  .team-member--reverse .team-photo { grid-area: photo; order: initial; }
  .team-member .team-info,
  .team-member--reverse .team-info { display: contents; }
  .team-photo img {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .team-info h2 { grid-area: name; align-self: end; margin: 0; text-align: left; }
  .team-position { grid-area: role; align-self: start; margin: 0; padding-top: 0.35em; text-align: left; }
  .team-bio { grid-area: bio; margin: var(--space-6) 0 0; text-align: left; }
}