/* ---------- fonts ----------
   Newsreader and Outfit, served from this site rather than Google Fonts so
   phones don't wait on two extra servers before showing the page (Ed, 14 Nov
   2026). The same Google files (variable, latin and latin-ext), in /fonts/. */
/* Newsreader, latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader, latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Outfit, latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit, latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The London Building Company: shared styles for every page */

:root {
  --paper: #F3EDE3;   /* warm off white: Freddie found pure white too clinical */
  --stone: #E9E1D4;
  --card: #FAF6EF;    /* boxes sitting on paper, a shade lighter */
  --ink: #1C1C1A;
  --body: #45423C;
  --dark: #1A1917;
  --dark-2: #16150F;
  --gold: #B08D57;
  --gold-dark: #99794a;
  --gold-soft: #D2AA70;   /* headings on dark and photos, a touch richer like Hawksmoor's */
  --gold-deep: #94733F;   /* headings on paper */
  --muted: #6E6B65;
  --line: rgba(28, 28, 26, 0.14);
  --line-light: rgba(250, 248, 245, 0.18);

  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  --gutter: clamp(24px, 5vw, 72px);
  --max: 1280px;
  --section: clamp(88px, 11vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
strong { font-weight: 500; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--wide { max-width: 1680px; padding: 0 clamp(10px, 1.6vw, 28px); }
.section { padding: var(--section) 0; }
.section--compact { padding: clamp(72px, 8vw, 116px) 0; }
.section--soft { background: var(--stone); }
.section--dark { background: var(--dark); color: var(--paper); }

/* ---------- type ---------- */
.eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
/* big headings: a light serif in sentence case, set slightly tight. Deep gold
   on the cream sections, white on photos and dark bands, where gold is hard to
   read. Small headings stay in Outfit capitals. */
h1, h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 340;  /* between Light and Regular: elegant, still readable on photos */
  letter-spacing: -0.02em;
  color: var(--gold-deep);
}
h1 { font-size: clamp(46px, 5.8vw, 86px); line-height: 1.02; }
h2 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.06; }
h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.16em;
  font-weight: 400;
  color: var(--ink);
}
.stats dt, .contact__phone, .tile__area, .card h3, .menu__links > a, .menu__group > summary {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 300;
}
.tile__area, .card h3, .menu__links a { letter-spacing: -0.01em; text-transform: none; }
.section--dark h2, .hero h1, .hero h2, .showcase h2, .cta h2 { color: var(--gold-soft); }
.section--dark h3, .showcase h3 { color: var(--paper); }

.lede { font-size: 17.5px; line-height: 1.75; max-width: 62ch; color: var(--body); }
.section--dark .lede, .section--dark p { color: #fff; }
.body-text { max-width: 64ch; font-size: 17px; line-height: 1.8; color: var(--body); }
.body-text p + p { margin-top: 1.2em; }

.head { max-width: 920px; }
.head h2 { max-width: 16ch; text-wrap: balance; }
.head .lede { margin-top: 26px; }
.head--center { max-width: 820px; margin: 0 auto; text-align: center; }
.head--center h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.head--center .lede { margin-left: auto; margin-right: auto; }

/* square buttons, set like Hawksmoor's: small, spaced capitals */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 34px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn--gold { background: #fff; color: var(--gold-deep); font-weight: 500; }
.btn--gold:hover { background: var(--gold-deep); color: #fff; }
.btn--outline { border-color: rgba(250, 248, 245, 0.5); color: #FAF8F5; }
.btn--outline:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
.btn--quiet { border-color: rgba(176, 141, 87, 0.6); color: var(--gold-deep); }
.btn--quiet:hover { border-color: var(--gold); }
.section--dark .btn--quiet { color: var(--gold-soft); }
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(176, 141, 87, 0.6);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: border-color .25s ease;
}
.text-link:hover { border-color: var(--gold-deep); }

.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars svg { width: 14px; height: 14px; display: block; }

/* ---------- header: menu left, logo centred, Freddie's number right ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 20px 0;
  color: #FAF8F5;
  transition: background-color .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
/* once past the hero: a dark frosted bar, like Hawksmoor's, that stays dark over
   the cream sections and fades softly into the page below rather than ending
   on a hard line */
.header.is-solid {
  background: rgba(22, 21, 15, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  padding: 12px 0;
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 26px;
  background: linear-gradient(to bottom, rgba(22, 21, 15, 0.32), rgba(22, 21, 15, 0));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.header.is-solid::after { opacity: 1; }

.logo { display: inline-flex; align-items: center; gap: 15px; }
.logo__mark { flex: none; width: 60px; height: 60px; }
.logo__words { display: flex; flex-direction: column; }
.logo__name { font-size: 17px; font-weight: 500; line-height: 1.14; letter-spacing: 0; }
.logo__name--underlined {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1.2px solid currentColor;
}
.logo__tag {
  margin-top: 7px;
  font-size: 7.6px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}

.burger {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.burger__lines { display: flex; flex-direction: column; gap: 6px; width: 26px; }
.burger__lines span { display: block; height: 1px; background: currentColor; transition: width .3s ease; }
.burger__lines span:nth-child(1) { width: 26px; }
.burger__lines span:nth-child(2) { width: 18px; }
.burger:hover .burger__lines span:nth-child(2) { width: 26px; }

.phone { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; }
.phone__label { font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; line-height: 1.2; }
.phone__num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: color .2s ease;
}
.phone__num svg { display: none; color: currentColor; }
.phone:hover .phone__num { color: var(--gold); }

/* the menu slides in from the left, under the burger */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(10, 9, 7, 0.55);
  opacity: 0;
  transition: opacity .6s ease;
}
.menu-backdrop.is-open { opacity: 1; }
.menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(480px, 100%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(28px, 6vw, 60px) var(--gutter);
  background: var(--dark);
  color: var(--paper);
  transform: translateX(-100%);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
}
.menu.is-open { transform: none; }
.menu__links > *,
.menu__foot {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.menu.is-open .menu__links > *,
.menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-open .menu__links > :nth-child(1) { transition-delay: .12s; }
.menu.is-open .menu__links > :nth-child(2) { transition-delay: .17s; }
.menu.is-open .menu__links > :nth-child(3) { transition-delay: .22s; }
.menu.is-open .menu__links > :nth-child(4) { transition-delay: .27s; }
.menu.is-open .menu__links > :nth-child(5) { transition-delay: .32s; }
.menu.is-open .menu__links > :nth-child(6) { transition-delay: .37s; }
.menu.is-open .menu__foot { transition-delay: .44s; }
.menu__close {
  position: absolute;
  top: 22px; left: clamp(20px, 5vw, 52px);
  width: 44px; height: 44px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 30px; font-weight: 300; line-height: 1;
}
.menu__links { display: grid; gap: 2px; }
.menu__links > a, .menu__group > summary {
  display: block;
  font-size: clamp(30px, 6vw, 40px);
  line-height: 1.2;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-light);
}
.menu__links > a { transition: color .2s ease, opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.menu__links > a:hover, .menu__links > a.is-current,
.menu__group > summary:hover, .menu__group > summary.is-current { color: var(--gold-soft); }
/* Services opens in place to list the four service pages. site.js slides the
   list open and the links ease in one after another, like the menu's own. */
.menu__group { border-bottom: 1px solid var(--line-light); }
.menu__group > summary { display: flex; justify-content: space-between; align-items: center; border-bottom: 0; list-style: none; cursor: pointer; transition: color .2s ease; }
.menu__group > summary::-webkit-details-marker { display: none; }
/* a plus whose upright bar turns flat into a minus */
.menu__toggle { position: relative; width: 17px; height: 17px; flex: none; }
.menu__toggle::before, .menu__toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: var(--gold); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.menu__toggle::after { transform: rotate(90deg); }
.menu__group.is-expanded .menu__toggle::after { transform: rotate(180deg); }
.menu__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow: hidden; }
.menu__sub.is-animating { transition: height .7s cubic-bezier(.16, 1, .3, 1); }
.menu__sub li:first-child { padding-top: 2px; }
.menu__sub li:last-child { padding-bottom: 16px; }
.menu__sub a { display: block; padding: 6px 0; font-size: 17px; font-weight: 300; letter-spacing: 0.02em; color: rgba(250, 248, 245, 0.8); transition: color .2s ease; }
.menu__sub a:hover, .menu__sub a.is-current { color: var(--gold-soft); }
.js .menu__sub li { opacity: 0; transform: translateX(-16px); transition: opacity .25s ease, transform .3s ease; }
.js .menu__group.is-expanded .menu__sub li { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.js .menu__group.is-expanded .menu__sub li:nth-child(1) { transition-delay: .1s; }
.js .menu__group.is-expanded .menu__sub li:nth-child(2) { transition-delay: .16s; }
.js .menu__group.is-expanded .menu__sub li:nth-child(3) { transition-delay: .22s; }
.js .menu__group.is-expanded .menu__sub li:nth-child(4) { transition-delay: .28s; }
.menu__foot { margin-top: 40px; display: grid; gap: 12px; font-size: 15px; color: rgba(250, 248, 245, 0.75); }
.menu__foot a:hover { color: var(--gold-soft); }
body.is-locked { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #FAF8F5;
  background: #201F1C;
  overflow: hidden;
}
.hero--page { min-height: 72vh; min-height: 72svh; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
/* homepage slideshow: the slides stack, and each new one fades in over the one
   before it (which stays solid underneath, so the picture never dips to dark).
   No zoom: Ed wants the photos left still, and a moving photo makes the browser
   draw the dark overlay on its own, in visible vertical steps. site.js runs it. */
.hero__slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
/* on the slideshow each photo carries its own dark overlay, so the browser
   blends the two together. A separate overlay over a fading photo gets drawn
   on its own, and shows as faint vertical lines while the fade runs. */
.hero__slide::after { content: ""; }
.hero__media[data-slideshow] ~ .hero__overlay { display: none; }
.hero__overlay, .hero__slide::after {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(24, 22, 17, 0.55) 0%, rgba(24, 22, 17, 0) 30%),
    linear-gradient(90deg, rgba(24, 22, 17, 0.9) 0%, rgba(24, 22, 17, 0.76) 40%, rgba(24, 22, 17, 0.54) 76%, rgba(24, 22, 17, 0.4) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 72px;
}
.hero--page .hero__inner { align-items: flex-end; padding-bottom: clamp(56px, 7vw, 96px); }
.hero__content { max-width: 1060px; }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; color: #fff; }
.hero h1 { max-width: 17ch; }
.hero__lede {
  max-width: 60ch;
  margin-top: 30px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.75;
  color: #fff;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }

.hero__trust { position: relative; z-index: 2; border-top: 1px solid var(--line-light); }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.trust li {
  padding: 22px 26px;
  border-left: 1px solid var(--line-light);
  font-size: 14px;
  color: #fff;
}
.trust li:first-child { padding-left: 0; border-left: 0; }
.trust small {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- projects, labelled by postcode ---------- */
.projects__head { margin-bottom: clamp(48px, 6vw, 84px); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 0.8vw, 12px); }
/* two small, then one full width, repeating (Hawksmoor's pattern) */
.gallery > .tile:nth-child(3n) { grid-column: 1 / -1; }
@media (min-width: 1001px) { .gallery > .tile:nth-child(3n) .tile__area { font-size: clamp(34px, 3.4vw, 56px); } }
.tile { position: relative; display: block; margin: 0; overflow: hidden; background: #2A2926; aspect-ratio: 3 / 2; color: #fff; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 11, 9, 0.85) 0%, rgba(12, 11, 9, 0.5) 26%, rgba(12, 11, 9, 0) 55%);
  transition: background-color .4s ease;
  pointer-events: none;
}
/* .tile--cta and .card--cta: the homepage tiles and cards show the hover state
   of a link before their pages exist */
a.tile:hover::after, .tile--cta:hover::after { background-color: rgba(12, 11, 9, 0.22); }
.tile__caption {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 2.8vw, 46px);
  right: clamp(22px, 2.8vw, 46px);
  bottom: clamp(20px, 2.6vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
}
.tile__name { display: flex; align-items: baseline; gap: 14px; }
.tile__area {
  font-size: clamp(30px, 2.8vw, 44px);
  line-height: 1;
  color: #fff;
}
.tile__code { font-size: 12px; font-weight: 400; letter-spacing: 0.24em; color: var(--gold-soft); }
.tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
a.tile:hover .tile__cta, a.tile:focus-visible .tile__cta, .tile--cta:hover .tile__cta { opacity: 1; transform: none; }
a.tile:hover .tile__cta, .tile--cta:hover .tile__cta { background: var(--gold); border-color: var(--gold); color: #17160F; }
@media (hover: none) { .tile__cta { opacity: 1; transform: none; } }
.gallery__action { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

/* projects page: a dark intro band, then one wide tile per house */
.hero--band { min-height: 0; background: var(--dark); }
.hero--band .hero__inner { padding-top: clamp(150px, 16vw, 210px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero--band h1 { max-width: 22ch; text-wrap: balance; }
.projects-list { padding-bottom: clamp(8px, 0.8vw, 12px); }
/* projects page: one wide tile per house */
.stack { display: grid; gap: clamp(8px, 0.8vw, 12px); }
.stack .tile { aspect-ratio: 21 / 9; }
.stack .tile__area { font-size: clamp(32px, 3.6vw, 56px); }

/* project page photo grid, after Hawksmoor's */
.photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 0.8vw, 12px); }
.photos picture { display: block; overflow: hidden; background: #E6DED1; aspect-ratio: 3 / 2; }
.photos .photos__full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos--gallery { margin-top: clamp(40px, 5vw, 64px); }
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 0.8vw, 12px); margin-top: clamp(40px, 5vw, 64px); }
.more .tile__area { font-size: clamp(26px, 2.2vw, 34px); }
/* small tiles: name above, the button underneath it */
.more .tile__caption { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.more .tile__cta { padding: 11px 18px; font-size: 11px; }
.back-link { margin-top: 34px; }
/* project page: heading and the project details on the left, the write up on
   the right (13 Nov); the client's review has its own band between the photos */
.project-intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(44px, 7vw, 120px); align-items: start; }
.project-intro h2 { margin-top: 18px; }
.project-intro > .body-text { padding-top: 38px; }
.project-facts { margin: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid var(--line); }
.project-facts div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.project-facts dt { padding-top: 3px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.project-facts dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.review-band__inner { display: flex; flex-direction: column; align-items: center; max-width: 860px; margin: 0 auto; text-align: center; }
.review-band blockquote { margin: 26px 0 0; }
.review-band blockquote p { font-family: var(--display); font-weight: 300; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.55; color: var(--ink); }
.review-band figcaption { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 30px; }
.hero .text-link { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hero .text-link:hover { border-color: var(--gold-soft); }

/* ---------- contained image + text ---------- */
.feature { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(44px, 7vw, 112px); align-items: stretch; }
.feature--text-first { grid-template-columns: 6fr 5fr; }
.feature__media {
  position: relative;
  overflow: hidden;
  background: #E6DED1;
  min-height: clamp(380px, 44vw, 640px);
}
.feature__media picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* Freddie's head is near the top of his photo, so crops keep the top */
.feature__media img.portrait { object-position: 50% 22%; }
.feature__body { align-self: center; }
.feature__body > .body-text, .feature__body > .lede { margin-top: 30px; }
.feature__body > .text-link { margin-top: 34px; }

.sign { margin-top: 26px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; }
.sign span { font-weight: 300; color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin-top: clamp(40px, 5vw, 58px);
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.stats div { padding: 0 clamp(22px, 3vw, 46px); border-left: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; border-left: 0; }
.stats dt {
  font-size: clamp(44px, 4.2vw, 60px);
  line-height: 1;
  color: var(--gold-deep);
}
.stats dd {
  max-width: 17ch;
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-star { width: 0.58em; height: 0.58em; margin-left: 0.07em; vertical-align: 0.16em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- services ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2vw, 30px);
  margin-top: clamp(48px, 6vw, 84px);
}
.card {
  position: relative;
  display: block;
  overflow: hidden;
  background: #24231F;
  aspect-ratio: 4 / 3;
  color: var(--paper);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 11, 9, 0.84) 0%, rgba(12, 11, 9, 0.42) 36%, rgba(12, 11, 9, 0) 64%);
}
.card__text {
  position: absolute;
  left: clamp(22px, 2.6vw, 40px);
  right: clamp(22px, 2.6vw, 40px);
  bottom: clamp(22px, 2.6vw, 38px);
}
.card h3 {
  margin: 0 0 12px;
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.05;
  color: #fff;
}
.card p { max-width: 46ch; font-size: 15.5px; line-height: 1.7; color: #fff; }
.card__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: border-color .25s ease, color .25s ease;
}
.card__more svg { transition: transform .25s ease; }
a.card:hover .card__more, .card--cta:hover .card__more { border-color: var(--gold-soft); color: var(--gold-soft); }
a.card:hover .card__more svg, .card--cta:hover .card__more svg { transform: translateX(3px); }
a.card:hover .card__scrim, .card--cta:hover .card__scrim { background-color: rgba(12, 11, 9, 0.18); }
.card__scrim { transition: background-color .4s ease; }
/* New Builds: lettered vans sit behind the words, so a little more shade at
   the bottom only (phones already have the deeper shading for every card) */
@media (min-width: 761px) {
  .card--deep .card__scrim { background-image: linear-gradient(to top, rgba(12, 11, 9, 0.9) 0%, rgba(12, 11, 9, 0.6) 38%, rgba(12, 11, 9, 0) 66%); }
}

/* ---------- reviews ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(48px, 6vw, 76px);
}
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--paper);
  border: 1px solid rgba(28, 28, 26, 0.09);
}
.quote__mark { width: 30px; height: 22px; color: var(--gold); opacity: 0.85; }
.quote blockquote { margin: 22px 0 0; flex: 1; }
.quote blockquote p { font-size: 16.5px; font-weight: 300; line-height: 1.8; color: #2E2C28; }
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(28, 28, 26, 0.12);
}
.quote__name { font-size: 14.5px; font-weight: 500; letter-spacing: 0.04em; }
.quote__job { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* side by side, the three cards share their rows, so the dividers, stars and
   names line up whatever the length of each review or caption (Ed, 14 Nov) */
@media (min-width: 1001px) {
  .quotes { grid-template-rows: auto 1fr auto; }
  .quote { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .quote figcaption { align-self: start; }
}

.dots { display: none; justify-content: center; gap: 10px; margin-top: 26px; }
.dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid rgba(28, 28, 26, 0.35);
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.dots button.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }

/* ---------- why, over a photograph ---------- */
.showcase { position: relative; color: var(--paper); background: var(--dark-2); overflow: hidden; }
.showcase__bg { position: absolute; inset: 0; }
.showcase__bg img { width: 100%; height: 100%; object-fit: cover; }
/* lighter behind the big heading, a little heavier behind the small text */
.showcase__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(24, 22, 17, 0.62) 0%, rgba(24, 22, 17, 0.7) 34%, rgba(24, 22, 17, 0.78) 100%);
}
.showcase__inner { position: relative; z-index: 2; }
.showcase .lede { color: #fff; }

.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(40px, 6vw, 96px);
  margin-top: clamp(44px, 5vw, 76px);
}
.reason { padding: 32px 0; border-top: 1px solid var(--line-light); }
.reason p { margin-top: 12px; max-width: 46ch; font-size: 16px; font-weight: 400; line-height: 1.7; color: #fff; }

/* ---------- process: six boxes of equal height ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--card);
  border: 1px solid rgba(28, 28, 26, 0.08);
}
.step__num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(176, 141, 87, 0.55);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
/* the numbers fill with gold one after another as the section comes in */
.steps.is-in .step__num { background: var(--gold); border-color: var(--gold); color: #fff; }
.steps.is-in .step:nth-child(2) .step__num { transition-delay: .15s; }
.steps.is-in .step:nth-child(3) .step__num { transition-delay: .3s; }
.steps.is-in .step:nth-child(4) .step__num { transition-delay: .45s; }
.steps.is-in .step:nth-child(5) .step__num { transition-delay: .6s; }
.steps.is-in .step:nth-child(6) .step__num { transition-delay: .75s; }
.step h3 { margin-top: 26px; }
.step p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--body); }

/* ---------- faq, compact ---------- */
.faq__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 20px; font-weight: 300; color: var(--gold); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 20px; max-width: 62ch; font-size: 16px; line-height: 1.75; color: var(--body); }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(44px, 7vw, 120px); align-items: start; }
.contact__call { margin-top: 38px; }
.contact__who {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact__phone { display: inline-block; font-size: clamp(36px, 3.2vw, 48px); }
.contact__phone:hover { color: var(--gold-soft); }
.form__title { margin-bottom: 8px; }
.form__sub { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.form { margin-top: 30px; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: 11.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,248,245,0.6); margin-bottom: 8px; }
.form input, .form textarea {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form textarea { min-height: 120px; resize: vertical; }
.form .btn { margin-top: 6px; justify-self: start; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn:disabled { opacity: .6; cursor: default; }
.form__status { margin: 0; font-size: 15px; line-height: 1.6; }
.form__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form__status--bad { color: #A33A2A; }
.form.is-sent > :not(.form__status) { display: none; }
.form.is-sent .form__status { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; color: var(--ink); }

/* ---------- site visit: the popup, and the same panel on the contact page ---------- */
.visit { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .35s ease; }
.visit.is-open { opacity: 1; }
.visit[hidden] { display: none; }
.visit__backdrop { position: absolute; inset: 0; background: rgba(16, 15, 12, 0.76); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.visit__dialog { position: relative; width: min(1080px, 100%); outline: none; transform: translateY(18px); transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.visit.is-open .visit__dialog { transform: none; }
.visit__panel { position: relative; display: grid; grid-template-columns: 5fr 7fr; background: var(--paper); }
.visit .visit__panel { max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow: auto; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); }
.visit__panel--page { background: var(--card); box-shadow: 0 30px 90px rgba(28, 28, 26, 0.12); }
.visit__media { position: relative; min-height: 560px; background: var(--dark); }
.visit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.visit__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 21, 15, 0.95) 0%, rgba(22, 21, 15, 0.84) 38%, rgba(22, 21, 15, 0.3) 60%, rgba(22, 21, 15, 0) 74%); }
.visit__who { position: absolute; left: 40px; right: 40px; bottom: 38px; z-index: 1; color: #FAF8F5; }
.visit__name { margin: 0; font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1; color: var(--gold-soft); }
.visit__role { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 248, 245, 0.7); }
.visit__phone { display: inline-block; margin-top: 26px; font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 1; color: #fff; transition: color .2s ease; }
.visit__phone:hover { color: var(--gold-soft); }
.visit__ig { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 0.08em; color: rgba(250, 248, 245, 0.82); transition: color .2s ease; }
.visit__ig:hover { color: var(--gold-soft); }
.visit__facts { margin: 26px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line-light); display: grid; gap: 8px; font-size: 13.5px; font-weight: 300; color: rgba(250, 248, 245, 0.82); }
.visit__body { padding: 62px 64px 56px; }
.visit__body h2 { color: var(--gold-deep); font-size: clamp(34px, 3vw, 46px); }
.visit__sub { margin: 14px 0 0; font-size: 15.5px; color: var(--body); }
.visit__panel .form { margin-top: 34px; gap: 26px; }
.visit__panel .form__row { gap: 28px; }
.visit__panel .form label { color: var(--muted); margin-bottom: 4px; }
.visit__panel .form input, .visit__panel .form textarea { padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(28, 28, 26, 0.24); color: var(--ink); font-weight: 400; }
.visit__panel .form input:focus, .visit__panel .form textarea:focus { border-bottom-color: var(--gold); }
.visit__panel .form textarea { min-height: 84px; }
.visit__panel .form .btn { margin-top: 8px; background: var(--ink); color: #fff; }
.visit__panel .form .btn:hover { background: var(--gold-deep); }
.visit__close {
  position: absolute; top: 18px; right: 18px; z-index: 3; width: 46px; height: 46px;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; transition: border-color .25s ease, color .25s ease;
}
.visit__close:hover { border-color: var(--gold); color: var(--gold-deep); }
@media (max-width: 760px) {
  /* phones: the popup fills the screen, Freddie becomes a small round photo at the top */
  /* one row exactly the popup's height (it used to grow with the form, taller than
     the screen, so nothing could scroll); the panel scrolls inside it, and
     site.js shrinks the popup to the space above the keyboard (Ed, 14 Nov 2026) */
  .visit { padding: 0; place-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .visit__dialog { width: 100%; height: 100%; min-height: 0; }
  .visit .visit__panel { height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .visit__panel { display: block; }
  .visit__media { min-height: 0; display: flex; align-items: center; gap: 16px; padding: 18px 76px 18px 24px; }
  .visit__panel--page .visit__media { padding-right: 24px; }
  .visit__media img { position: static; width: 58px; height: 58px; border-radius: 50%; flex: none; }
  .visit__media::after { display: none; }
  .visit__who { position: static; display: flex; flex-direction: column; }
  .visit__name { font-size: 24px; }
  .visit__role { margin-top: 6px; font-size: 10.5px; }
  .visit__phone { order: 3; margin-top: 8px; font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; color: var(--gold-soft); }
  .visit__facts { display: none; }
  .visit__ig { order: 4; margin-top: 6px; font-size: 11.5px; }
  .visit__ig-label { display: none; }
  .visit__close { top: 24px; right: 20px; border-color: var(--line-light); color: #fff; }
  .visit__body { padding: 34px 24px 40px; }
  .visit__body h2 { font-size: 34px; }
  .visit__panel .form__row { grid-template-columns: 100%; gap: 26px; }
  .visit__panel .form .btn { width: 100%; justify-self: stretch; padding: 18px 16px; font-size: 12px; letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .visit, .visit__dialog { transition: none; }
  .menu__sub.is-animating, .js .menu__sub li, .menu__toggle::after { transition: none !important; }
}

/* ---------- call to action band (inner pages) ---------- */
.cta { text-align: center; }
.cta .lede { margin: 24px auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
/* hollow call button beside the site visit one: CALL US, then the number */
.btn--call span { letter-spacing: 0.14em; }

/* ---------- service pages ---------- */
.service__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(44px, 7vw, 120px); align-items: start; }
.service__grid .body-text { margin-top: 30px; }
.includes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.includes li { padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line); position: relative; font-size: 16px; color: var(--body); }
.includes li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 1px; background: var(--gold); }
.includes__title { margin-bottom: 20px; }

/* ---------- service pages: the longer writing, below the gallery ----------
   heading on the left (it stays in view on wide screens), short numbered
   blocks on the right, so the words read as a list rather than a wall */
.topics { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(44px, 7vw, 120px); align-items: start; }
.topics__head { position: sticky; top: 140px; }
.topics__head .lede { margin-top: 26px; }
.topics__list { border-top: 1px solid var(--line); }
.topic { display: grid; grid-template-columns: 64px 1fr; padding: clamp(28px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--line); }
.topic__num { grid-row: 1 / 3; font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.1; color: var(--gold); }
.topic p { margin-top: 14px; max-width: 62ch; font-size: 16.5px; line-height: 1.8; color: var(--body); }
/* links inside the writing */
.body-text a, .topic p a, .faq details p a, .project-facts a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: rgba(176, 141, 87, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .3s ease;
}
.body-text a:hover, .topic p a:hover, .faq details p a:hover, .project-facts a:hover { text-decoration-color: var(--gold-deep); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 0.8vw, 12px); margin-top: clamp(40px, 5vw, 64px); }
.strip picture { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #2A2926; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- areas page ---------- */
.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(18px, 2vw, 30px);
  margin-top: clamp(48px, 6vw, 84px);
}
.area { scroll-margin-top: 120px; }
.area__media { overflow: hidden; background: #E6DED1; aspect-ratio: 3 / 2; }
.area__media img { width: 100%; height: 100%; object-fit: cover; }
.area__title { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; }
.area__title h2 { font-size: clamp(30px, 2.6vw, 38px); }
.area__media { display: block; }
.area .text-link { margin-top: 16px; }
.area__code { font-size: 12px; font-weight: 400; letter-spacing: 0.24em; color: var(--muted); }
.area p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--body); }

/* ---------- footer ---------- */
.footer { background: var(--dark-2); color: var(--paper); padding: clamp(64px, 7vw, 104px) 0 40px; }
.footer__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 3fr; gap: clamp(28px, 3.4vw, 56px); }
.footer__tag { margin-top: 26px; max-width: 40ch; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.footer h4 { margin: 0 0 18px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.footer a:hover { color: var(--gold-soft); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin-top: clamp(48px, 6vw, 88px); padding-top: 26px;
  border-top: 1px solid var(--line-light);
  font-size: 12.5px; color: rgba(250, 248, 245, 0.5);
}

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .step__num { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .service__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .faq__grid, .contact__grid, .topics, .project-intro { grid-template-columns: 1fr; }
  .project-intro > .body-text { padding-top: 0; }
  .topics__head { position: static; }
  /* one project per row on tablets and phones, as Hawksmoor does */
  .gallery { grid-template-columns: 1fr; }
  .quotes {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 100%; scroll-snap-align: center; }
  .dots { display: flex; }

  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .feature, .feature--text-first { grid-template-columns: 1fr; gap: 34px; }
  .feature--text-first .feature__body { order: 2; }
  .feature__media { min-height: 0; aspect-ratio: auto; max-width: 540px; }
  .feature__media picture { position: static; display: block; }
  .feature__media img { height: auto; aspect-ratio: 4 / 5; }
  .cards, .reasons { grid-template-columns: 1fr; }
  .card { aspect-ratio: 4 / 5; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust li { padding: 18px 0; border-left: 0; }
  .trust li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-light); }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--line-light); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats div { padding: 0 14px; }
  .stats dd { max-width: none; font-size: 10px; letter-spacing: 0.12em; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; }
  /* on phones the photo only sits behind the words; the trust strip gets its own
     dark band underneath, so the photo isn't stretched to cover both. The photo
     and shade are placed in the first grid row, which becomes their frame. */
  .hero:not(.hero--page):not(.hero--project):not(.hero--band) { display: grid; grid-template-columns: 100%; }
  .hero:not(.hero--page):not(.hero--project):not(.hero--band) > .hero__media,
  .hero:not(.hero--page):not(.hero--project):not(.hero--band) > .hero__overlay,
  .hero:not(.hero--page):not(.hero--project):not(.hero--band) > .hero__inner { grid-row: 1 / 2; grid-column: 1 / 2; }
  .hero__trust { grid-row: 2; grid-column: 1; background: #1A1813; }
  /* on phones the words cover the whole photo, so the shade is even and stronger */
  .hero__overlay, .hero__slide::after { background: linear-gradient(to bottom, rgba(24, 22, 17, 0.7) 0%, rgba(24, 22, 17, 0.8) 55%, rgba(24, 22, 17, 0.86) 100%); }
  .hero__inner { padding-top: 124px; padding-bottom: 52px; }
  /* inner page heroes on phones: taller, words at the bottom, photo left clear at the top */
  .hero--page, .hero--project { min-height: 80svh; }
  .hero--page .hero__inner, .hero--project .hero__inner { align-items: flex-end; padding-bottom: 44px; }
  .hero--page .hero__overlay, .hero--project .hero__overlay {
    background:
      linear-gradient(to bottom, rgba(24, 22, 17, 0.55) 0%, rgba(24, 22, 17, 0) 20%),
      linear-gradient(to top, rgba(24, 22, 17, 0.94) 0%, rgba(24, 22, 17, 0.8) 38%, rgba(24, 22, 17, 0.3) 70%, rgba(24, 22, 17, 0.12) 100%);
  }
  .hero h1 { font-size: 42px; max-width: none; }
  .hero__lede { font-size: 16.5px; margin-top: 22px; }
  .hero__actions { margin-top: 32px; gap: 12px; }
  .gallery, .areas, .photos, .more, .strip { grid-template-columns: 1fr; }
  .tile__caption { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .stack .tile { aspect-ratio: 4 / 5; }
  /* taller on phones so the name and button don't crowd the photo */
  .gallery .tile, .more .tile { aspect-ratio: 1 / 1; }
  .photos .photos__full { aspect-ratio: 3 / 2; }
  .tile figcaption { gap: 12px; }
  /* the button sits under the name on phones, so the shade has to reach higher */
  .tile::after { background: linear-gradient(to top, rgba(12, 11, 9, 0.88) 0%, rgba(12, 11, 9, 0.62) 38%, rgba(12, 11, 9, 0) 72%); }
  .card__scrim { background: linear-gradient(to top, rgba(12, 11, 9, 0.92) 0%, rgba(12, 11, 9, 0.74) 45%, rgba(12, 11, 9, 0.2) 78%, rgba(12, 11, 9, 0.05) 100%); }
  /* Why choose us is very tall on phones: stretching the photo over all of it
     turned it into a blur, so it sits as a band behind the heading and fades
     into the dark section the reasons sit on */
  .showcase__bg, .showcase__overlay { bottom: auto; height: 620px; }
  .showcase__overlay { background: linear-gradient(to bottom, rgba(22, 21, 15, 0.62) 0%, rgba(22, 21, 15, 0.8) 55%, var(--dark-2) 100%); }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  /* on phones the number sits beside the heading and the text runs full width */
  .topic { grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
  .topic__num { grid-row: auto; font-size: 18px; }
  .topic p { grid-column: 1 / -1; }
  .header__inner { gap: 8px; }
  .burger__label { display: none; }
  .logo { gap: 10px; }
  .logo__name { font-size: 14px; white-space: nowrap; }
  .logo__mark { width: 46px; height: 46px; }
  .logo__tag { margin-top: 5px; font-size: 6.2px; letter-spacing: 0.15em; }
  .phone__label { display: none; }
  .phone__num { font-size: 0; gap: 0; }
  .phone__num svg { display: block; width: 20px; height: 20px; }
  .card { aspect-ratio: 3 / 4; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .logo__name { font-size: 13px; }
  .logo__mark { width: 42px; height: 42px; }
  .logo__tag { margin-top: 4px; font-size: 5.8px; }
}