/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  --c-dark:   rgb(30, 30, 30);
  --c-bronze: rgb(180, 106, 44);
  /* Accessible pairings for the brand bronze. It hits only 4.17:1 on white and
     4.00:1 on --c-dark, both under the WCAG AA 4.5:1 floor for small text, so
     small bronze text picks the variant that matches its surface. --c-bronze
     itself stays the brand colour for large text, icons, rules and fills. */
  --c-bronze-deep:  rgb(162,  95, 40);   /* on white 5.00:1, on --c-light 4.58:1 */
  --c-bronze-light: rgb(194, 114, 48);   /* on --c-dark            — 4.56:1 */
  /* Secondary text on dark surfaces. The footer previously used white at 0.25–0.4
     alpha, which composites to 2.27–3.78:1 against --c-dark. This reads 5.6:1. */
  --c-on-dark: rgba(255, 255, 255, 0.55);
  --c-light:  rgb(245, 245, 245);
  --c-cream:  rgb(250, 232, 219);
  --c-white:  #ffffff;
  /* Was rgb(143,143,143), which measured only 3.23:1 on white — below the WCAG AA
     4.5:1 floor. This reads 5.02:1 on white and 4.61:1 on --c-light, the two
     surfaces it actually appears on. */
  --c-muted:  rgb(111, 111, 111);
  --c-border: rgb(219, 219, 219);
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-head:  'Raleway', Arial, sans-serif;
  --ff-body:  'Lato', Arial, sans-serif;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  /* Scroll reveals need a gentler curve than --ease. easeOutQuint covers ~80%
     of its travel in the first third of the duration, which reads as a snap
     rather than a settle — fine for a 0.25s hover, wrong for a 0.7s entrance.
     This is the same curve the about-image wipe already uses. */
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h:    108px;
  --section-pad: 120px;

  /* Derived from the brand colours above, not new brand colours. */
  --c-paper:  rgb(252, 246, 241);        /* --c-cream thinned toward white — hero, process, quote panels */
  --c-bronze-darker: rgb(138, 80, 33);   /* primary button hover; white on it reads 6.3:1 */
  --c-text-soft: rgb(66, 62, 58);        /* body copy on paper/white — 10:1 */

  /* Spacing steps. New sections use these rather than one-off pixel values. */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;

  /* Depth: base surfaces carry no shadow, cards are "elevated", things that sit
     over other content (the form, the photo caption, the mobile bar) "float".
     Shadows are tinted toward the bronze-brown of the palette, never pure black. */
  --shadow-elevated: 0 1px 2px rgba(60, 36, 16, 0.06), 0 10px 28px -14px rgba(60, 36, 16, 0.22);
  --shadow-floating: 0 2px 6px rgba(60, 36, 16, 0.08), 0 24px 48px -18px rgba(60, 36, 16, 0.34);

  /* Redesign-preview placeholders. Deliberately off-brand yellow so nothing
     awaiting the client can be mistaken for finished copy. build-deploy.mjs
     refuses to publish any page that still contains one. */
  --c-ph: #fff1b8;
  --c-ph-line: #a07c00;
  --c-ph-text: #4a3900;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Form controls don't inherit font-family by default — keep them on-brand */
button, input, textarea, select, ::placeholder { font-family: var(--ff-body); }
html { scroll-behavior: smooth; overflow-x: clip; }
/* The nav is fixed and 108px tall, so an in-page jump (#services, #contact, the
   hero's scroll cue) landed the target's top underneath it and the section
   heading was hidden. scroll-margin-top offsets the landing point instead. */
section[id], main[id], footer[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--ff-body);
  color: var(--c-dark);
  background: var(--c-white);
  overflow-x: clip;
}

/* Base typography — single source of truth shared by every page (incl. inline
   <style> blocks, which cascade these defaults). Component classes still win,
   so this only sets the on-brand fallback and never overrides existing styles:
   display headings → serif, supporting headings → sans, body/controls → Lato. */
h1, h2, h3 { font-family: var(--ff-display); }
h4, h5, h6 { font-family: var(--ff-head); }
/* Every <img> carries width/height attributes so the browser can reserve space
   before the file loads (prevents layout shift). Those attributes also act as
   presentational hints, which would otherwise become the *used* height and beat
   any `aspect-ratio` sizing. `height: auto` neutralises the hint and hands sizing
   back to CSS; component rules that set an explicit height still win on specificity. */
img { display: block; max-width: 100%; height: auto; }
/* Text for screen readers and crawlers only — lets a short visible label like
   "Read More" carry the context that makes it descriptive out of context. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Scroll reveal — settles up from below ──────────────────────────────
   Distances and durations were both cut. At 28px over 1.1s an element was
   still moving well after the reader reached it, and anyone scrolling at a
   normal pace outran the animation. 18px over 0.72s reads as the content
   arriving and settling, and is finished by the time it is properly in view. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s var(--ease-reveal), transform 0.72s var(--ease-reveal);
}
/* "none" rather than translateY(0): identical on screen, but lets the browser
   drop the animation layer afterwards, so the text goes back to normal crisp
   (subpixel) rendering instead of staying slightly soft. */
.reveal.visible { opacity: 1; transform: none; }

/* Why-section only: slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.72s var(--ease-reveal), transform 0.72s var(--ease-reveal);
}
.reveal-left.visible { opacity: 1; transform: none; }

/* Why-section only: slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.72s var(--ease-reveal), transform 0.72s var(--ease-reveal);
}
.reveal-right.visible { opacity: 1; transform: none; }

/* Stagger tightened to match the shorter duration — the old 0.4s delay on top
   of a 1.1s transition meant the last item in a group took 1.5s to arrive. */
.reveal-delay-1, .reveal-left.reveal-delay-1, .reveal-right.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2, .reveal-left.reveal-delay-2, .reveal-right.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3, .reveal-left.reveal-delay-3, .reveal-right.reveal-delay-3 { transition-delay: 0.21s; }
.reveal-delay-4, .reveal-left.reveal-delay-4, .reveal-right.reveal-delay-4 { transition-delay: 0.28s; }

/* ── Section entrance — fade only ────────────────────────────────────────
   This used to translate the section by 18px as well. Because almost every
   .sect-anim section also contains .reveal children that translate on their
   own trigger, the content was being moved twice, by two observers firing at
   different points — which is what made sections look like they jumped as
   they came in. The section now only fades; the children carry the movement. */
.sect-anim {
  opacity: 0;
  transition: opacity 0.6s var(--ease-reveal);
}
.sect-anim.in-view {
  opacity: 1;
}

/* ── Nav ────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { margin-left: -18px; }
.nav-logo img { height: 84px; width: auto; transition: opacity 0.2s; }
.nav-logo:hover img { opacity: 0.8; }
.nav-links { display: flex; align-items: center; gap: 44px; }
.nav-links a {
  font-family: var(--ff-body);
  font-size: 13.5px; font-weight: 400;
  letter-spacing: 0.04em; color: var(--c-dark);
  position: relative; transition: color 0.2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--c-bronze);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover { color: var(--c-bronze-deep); }
.nav-links a:hover::after { width: 100%; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px; cursor: pointer; padding: 6px;
  /* It is a <button> for keyboard access — strip the UA chrome, keep the look. */
  background: none; border: 0; -webkit-appearance: none; appearance: none;
}
.nav-hamburger:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 3px; }
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-dark);
  transition: transform 0.3s var(--ease), opacity 0.3s, background 0.2s;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ────────────────────────────────────────────────────── */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu-panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--c-white);
  padding: calc(var(--nav-h) + 16px) 32px 40px;
  transform: translateY(-100%);
  transition: transform 0.38s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
#mobile-menu.open .mobile-menu-panel { transform: translateY(0); }
.mobile-menu-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-border);
}
.mobile-menu-panel ul li { border-bottom: 1px solid var(--c-border); }
.mobile-nav-link {
  display: block;
  padding: 16px 0;
  font-family: var(--ff-head);
  font-size: 16px; font-weight: 700;
  color: var(--c-dark); letter-spacing: 0.04em;
  transition: color 0.2s, padding-left 0.2s;
}
.mobile-nav-link:hover { color: var(--c-bronze-deep); padding-left: 8px; }
.mobile-cta {
  margin-top: 28px;
  padding: 16px 32px;
  background: var(--c-dark); color: var(--c-white);
  text-align: center; font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--c-dark);
  transition: background 0.25s, color 0.25s;
}
.mobile-cta:hover { background: transparent; color: var(--c-dark); }

/* ── Section divider ────────────────────────────────────────────────── */
.section-sep { width: 100%; height: 1px; background: var(--c-border); }

/* ── Services ───────────────────────────────────────────────────────── */
#services { background: var(--c-light); padding: var(--section-pad) 48px; }
.services-header { text-align: center; margin-bottom: 72px; }
.services-label {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-bronze-deep); margin-bottom: 14px;
}
.services-title { font-family: var(--ff-display); font-size: clamp(34px, 3.9vw, 52px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; color: var(--c-dark); margin-bottom: 16px; }
.services-subtitle { font-size: 15px; font-weight: 300; color: var(--c-muted); max-width: 520px; margin: 0 auto; line-height: 1.75; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto 64px; }
.service-card {
  background: var(--c-white); padding: 44px 36px 40px;
  position: relative; text-align: center;
  border-radius: 12px; border: 1px solid var(--c-border);
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease), border-color 0.38s;
  overflow: hidden;
}
/* One hover for both cards. The six cards this grid used to hold each moved a
   different way; with two side by side that read as a glitch. */
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-floating); border-color: var(--c-bronze); }
.service-card:active { transform: translateY(-1px); }
.service-card-icon {
  width: 72px; height: 72px; background: var(--c-cream); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  transition: background 0.35s, transform 0.35s var(--ease);
}
.service-card:hover .service-card-icon { background: var(--c-bronze); transform: scale(1.1); }
.service-card-icon svg {
  width: 32px; height: 32px; stroke: var(--c-bronze); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s;
}
.service-card:hover .service-card-icon svg { stroke: var(--c-white); }
.service-card:hover .service-card-icon img { filter: brightness(0) invert(1) !important; }
.service-card-title { font-family: var(--ff-display); font-size: 24px; font-weight: 600; color: var(--c-dark); margin-bottom: 14px; line-height: 1.15; letter-spacing: -0.005em; }
.service-card-divider { width: 32px; height: 2px; background: var(--c-bronze); margin: 0 auto 16px; transition: width 0.4s var(--ease); }
.service-card:hover .service-card-divider { width: 52px; }
/* Was weight 300 in rgb(100,100,100): thin strokes at 13.5px read fainter than
   the contrast ratio suggests. Regular weight, slightly darker. */
.service-card-desc { font-size: 14px; font-weight: 400; color: rgb(84,84,84); line-height: 1.75; }

/* ── Footer ─────────────────────────────────────────────────────────── */
#footer { background: var(--c-dark); padding: 80px 48px 44px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
/* Five columns since the Services links became real service pages and an
   "Areas We Cover" column was added — the brand column keeps the extra width. */
.footer-top { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo-img { height: 64px; width: auto; filter: invert(1) brightness(2); margin-bottom: 20px; }
.footer-desc { font-size: 13px; line-height: 1.82; color: var(--c-on-dark); font-weight: 300; margin-bottom: 26px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); transition: border-color 0.25s, color 0.25s;
}
.footer-social a:hover { border-color: var(--c-bronze); color: var(--c-bronze-light); }
.footer-social svg { width: 15px; height: 15px; }
.footer-col-title { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-white); margin-bottom: 24px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
/* Only `a` was styled, so plain-text entries such as the address line inherited
   the body's dark colour and rendered invisibly against the dark footer. */
/* The email address is one long unbroken token and the columns got narrower
   when the fifth was added, so let it wrap rather than overflow the grid cell. */
.footer-links li { font-size: 13px; color: var(--c-on-dark); font-weight: 300; overflow-wrap: anywhere; }
.footer-links a { font-size: 13px; color: var(--c-on-dark); transition: color 0.2s; font-weight: 300; }
.footer-links a:hover { color: var(--c-bronze-light); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 36px; }
.footer-copy { font-size: 12px; color: var(--c-on-dark); }
.footer-copy a { color: var(--c-bronze-light); }

/* ── Responsive: tablet ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section-pad: 72px; --nav-h: 80px; }

  .nav-inner { padding: 0 20px; }
  .nav-logo { margin-left: -8px; }
  .nav-logo img { height: 56px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  #mobile-menu { display: block; }


  #services { padding: 72px 16px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 28px 24px; }


  #footer { padding: 56px 20px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── Responsive: phone ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --nav-h: 72px; }
  .nav-logo img { height: 48px; }
  .footer-top { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Landing pages — area (/painters-decorators-*.html) and service
   (/interior-painting.html etc.) pages.

   Purely additive: every rule is namespaced under .lp-, so none of it
   reaches the existing pages. The visual language is deliberately the one
   already used by the project case studies (.proj-hero / .proj-specs /
   .proj-cta) and the portfolio hub — dark hero with the bronze radial wash,
   light breadcrumb strip, copy column beside a bordered aside, dark CTA.
   Nothing new is introduced; these shared rules just need to live somewhere
   other than eight duplicated <style> blocks.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────── */
.lp-hero {
  margin-top: var(--nav-h);
  background: var(--c-dark);
  padding: 72px 48px 64px;
  position: relative;
  overflow: hidden;
}
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 60%, rgba(180,106,44,0.13) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(180,106,44,0.07) 0%, transparent 55%);
  pointer-events: none;
}
.lp-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.lp-hero-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-bronze-light); margin-bottom: 16px;
}
.lp-hero-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 2px; background: var(--c-bronze);
}
.lp-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400; letter-spacing: -0.015em; color: var(--c-cream);
  line-height: 1.06; margin-bottom: 22px; max-width: 18ch;
}
.lp-hero-sub {
  font-size: 16px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.72); max-width: 62ch; margin-bottom: 28px;
}
.lp-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-hero-tag {
  padding: 6px 16px;
  border: 1px solid rgba(180,106,44,0.4); border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  font-family: var(--ff-body);
}

/* ── Breadcrumb strip ───────────────────────────────────────────────── */
.lp-breadcrumb {
  background: var(--c-light);
  padding: 14px 48px;
  font-size: 13px;
  color: var(--c-muted);
}
.lp-breadcrumb a { color: var(--c-bronze-deep); }
.lp-breadcrumb a:hover { text-decoration: underline; }
.lp-breadcrumb a:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }
.lp-breadcrumb span { margin: 0 8px; }

/* ── Body: copy column + aside ──────────────────────────────────────── */
.lp-body { background: var(--c-white); padding: 88px 48px; }
.lp-body-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px;
  gap: 72px; align-items: start;
}

.lp-prose { font-size: 15px; line-height: 1.85; color: rgb(90,90,90); font-weight: 300; }
.lp-prose > p + p { margin-top: 16px; }
.lp-prose h2 {
  font-family: var(--ff-display); font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400; letter-spacing: -0.01em; color: var(--c-dark);
  line-height: 1.12; margin: 52px 0 18px;
}
.lp-prose > h2:first-child { margin-top: 0; }
.lp-prose h3 {
  font-family: var(--ff-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-dark); margin: 36px 0 14px;
}
.lp-prose ul { margin-top: 16px; }
.lp-prose li { position: relative; padding-left: 22px; }
.lp-prose li + li { margin-top: 10px; }
.lp-prose li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 10px; height: 1px; background: var(--c-bronze);
}
.lp-prose strong { font-weight: 700; color: var(--c-dark); }
/* In-copy links: the global rule is color:inherit with no underline, so body
   links need their own treatment to be visible and keyboard-reachable. */
.lp-prose a {
  color: var(--c-bronze-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.lp-prose a:hover, .lp-prose a:active { color: var(--c-dark); }
.lp-prose a:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }

/* ── Aside: quote card ──────────────────────────────────────────────── */
.lp-aside {
  background: var(--c-light); padding: 32px;
  border-top: 3px solid var(--c-bronze);
  position: sticky; top: calc(var(--nav-h) + 24px);
}
.lp-aside-title {
  font-family: var(--ff-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-dark); margin-bottom: 22px;
}
.lp-aside-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0; border-bottom: 1px solid var(--c-border);
}
.lp-aside-row:first-of-type { padding-top: 0; }
.lp-aside-key { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.lp-aside-val { font-size: 15px; font-weight: 400; color: var(--c-dark); }
.lp-aside-val a { color: var(--c-dark); }
.lp-aside-val a:hover { color: var(--c-bronze-deep); }
.lp-aside-val a:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }
.lp-aside .btn-dark { display: block; text-align: center; margin-top: 26px; padding: 15px 20px; }
.lp-aside .btn-dark:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 3px; }

/* ── Proof: linked case study ───────────────────────────────────────── */
.lp-proof { background: var(--c-light); padding: 72px 48px; }
.lp-proof-inner { max-width: 1200px; margin: 0 auto; }
.lp-proof-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-bronze-deep); margin-bottom: 14px;
}
.lp-proof-title {
  font-family: var(--ff-display); font-size: clamp(26px, 3vw, 38px);
  font-weight: 400; letter-spacing: -0.01em; color: var(--c-dark); margin-bottom: 32px;
}
.lp-proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Three case studies (wallpaper page). Declared here, above the phone rule that
   stacks .lp-proof-grid, so that rule still wins on small screens. */
.lp-proof-grid--three { grid-template-columns: repeat(3, 1fr); }
.lp-proof-card {
  display: block; background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.lp-proof-card:hover { border-color: var(--c-bronze); transform: translateY(-3px); }
.lp-proof-card:active { transform: translateY(-1px); }
.lp-proof-card:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 3px; }
.lp-proof-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.lp-proof-card-body { padding: 22px 24px 26px; }
.lp-proof-card-title {
  font-family: var(--ff-head); font-size: 15px; font-weight: 700;
  color: var(--c-dark); margin-bottom: 6px;
}
.lp-proof-card-sub { font-size: 13px; font-weight: 300; color: var(--c-muted); }

/* ── CTA ────────────────────────────────────────────────────────────── */
.lp-cta {
  background: var(--c-dark); padding: 72px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.lp-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(180,106,44,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.lp-cta-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-bronze-light); margin-bottom: 14px;
  position: relative;
}
.lp-cta-title {
  font-family: var(--ff-display); font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400; letter-spacing: -0.01em; color: var(--c-cream);
  margin-bottom: 12px; position: relative;
}
.lp-cta-sub {
  font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.7);
  max-width: 56ch; margin: 0 auto 30px; line-height: 1.75; position: relative;
}
.lp-cta .btn-light { position: relative; }
.lp-cta .btn-light:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 3px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero { padding: 56px 20px 48px; }
  .lp-breadcrumb { padding: 12px 20px; }
  .lp-body { padding: 60px 20px; }
  .lp-body-inner { grid-template-columns: 1fr; gap: 40px; }
  .lp-aside { position: static; }
  .lp-proof { padding: 56px 20px; }
  .lp-cta { padding: 56px 20px; }
}
@media (max-width: 600px) {
  .lp-hero { padding: 44px 16px 40px; }
  .lp-hero-title { max-width: none; }
  .lp-hero-tag { font-size: 10px; padding: 5px 10px; }
  .lp-body { padding: 48px 16px; }
  .lp-aside { padding: 24px 20px; }
  .lp-proof { padding: 48px 16px; }
  .lp-proof-grid { grid-template-columns: 1fr; }
  .lp-cta { padding: 48px 16px; }
}

/* Service cards on the homepage now summarise a full service page. The link
   picks up the same uppercase bronze eyebrow treatment as .services-label so
   the card reads unchanged apart from the added line. */
.service-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--ff-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-bronze-deep);
  transition: gap 0.25s var(--ease), color 0.2s;
}
.service-card-link span { transition: transform 0.25s var(--ease); }
.service-card:hover .service-card-link { gap: 12px; }
.service-card-link:hover { color: var(--c-dark); text-decoration: underline; text-underline-offset: 4px; }
.service-card-link:active { color: var(--c-bronze); }
.service-card-link:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   Landing-page layout variants

   All eight new pages were built from a single layout, which made them read
   as one page with the nouns swapped. Each page now carries a variant class
   on <body> so the structure a reader meets genuinely differs, while type,
   colour and spacing stay on the same brand system.

     .lp-a  copy column with a sticky fact card on the right   (Chelsea)
     .lp-b  horizontal fact strip under the hero, one centred
            measure of text, oversized opening paragraph        (Kensington)
     .lp-c  centred hero, fact card on the LEFT, hairline rule
            above each section heading                          (Notting Hill)
     .lp-d  full measure, numbered sections, fact card inline
            in the flow rather than pinned                      (Fulham)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variant B ──────────────────────────────────────────────────────── */
.lp-b .lp-hero-sub { max-width: 68ch; }
.lp-b .lp-body-inner { grid-template-columns: minmax(0, 76ch); justify-content: center; }
/* Opening paragraph is set larger — a lede, so the page does not start flat. */
.lp-b .lp-prose > p:first-of-type {
  font-size: 18.5px; line-height: 1.72; color: rgb(70,70,70); font-weight: 300;
}
.lp-facts { background: var(--c-light); border-top: 3px solid var(--c-bronze); }
.lp-facts-inner {
  max-width: 1200px; margin: 0 auto; padding: 30px 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px;
}
.lp-fact-key {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 6px;
}
.lp-fact-val { font-size: 15px; color: var(--c-dark); line-height: 1.5; }
.lp-fact-val a { color: var(--c-dark); }
.lp-fact-val a:hover { color: var(--c-bronze-deep); }
.lp-fact-val a:focus-visible { outline: 2px solid var(--c-bronze); outline-offset: 2px; }

/* ── Variant C ──────────────────────────────────────────────────────── */
.lp-c .lp-hero { text-align: center; }
.lp-c .lp-hero-title, .lp-c .lp-hero-sub { margin-left: auto; margin-right: auto; }
.lp-c .lp-hero-tags { justify-content: center; }
.lp-c .lp-hero-label { justify-content: center; }
.lp-c .lp-hero-label::before { width: 40px; }
.lp-c .lp-body-inner { grid-template-columns: 320px minmax(0, 1fr); }
.lp-c .lp-aside { order: -1; border-top: 0; border-left: 3px solid var(--c-bronze); }
.lp-c .lp-prose h2 { padding-top: 26px; border-top: 1px solid var(--c-border); }
.lp-c .lp-prose > h2:first-child { padding-top: 0; border-top: 0; }

/* ── Variant D ──────────────────────────────────────────────────────── */
.lp-d .lp-body-inner { grid-template-columns: minmax(0, 80ch); justify-content: center; }
/* The fact card sits in the flow instead of being pinned to the side. */
.lp-inline-card {
  background: var(--c-light); border-left: 3px solid var(--c-bronze);
  padding: 30px 34px; margin: 44px 0;
}
.lp-inline-card-title {
  font-family: var(--ff-head); font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-dark); margin-bottom: 20px;
}
.lp-inline-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; }
.lp-inline-card .lp-fact-val { font-size: 14.5px; }

/* ── Variant E — photographic hero ──────────────────────────────────────
   The other variants all open on a flat dark panel. This one opens on the
   work itself, with the same bronze wash laid over it so the type still
   reads. Used where the subject is visual enough to carry it. */
.lp-e .lp-hero { background: var(--c-dark); }
.lp-e .lp-hero-media {
  position: absolute; inset: 0; overflow: hidden;
}
.lp-e .lp-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.34;
}
.lp-e .lp-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(30,30,30,0.92) 0%, rgba(30,30,30,0.55) 60%, rgba(30,30,30,0.35) 100%);
}
.lp-e .lp-hero { padding-top: 96px; padding-bottom: 88px; }
@media (max-width: 600px) {
  .lp-e .lp-hero { padding-top: 56px; padding-bottom: 52px; }
  .lp-e .lp-hero-media img { opacity: 0.26; }
}

/* ── Responsive for the variants ────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-facts-inner { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; }
  .lp-c .lp-body-inner { grid-template-columns: 1fr; }
  .lp-c .lp-aside { order: 0; }
  .lp-b .lp-prose > p:first-of-type { font-size: 17px; }
}
@media (max-width: 600px) {
  .lp-facts-inner { grid-template-columns: 1fr; gap: 18px; padding: 22px 16px; }
  .lp-inline-grid { grid-template-columns: 1fr; }
  .lp-inline-card { padding: 24px 20px; margin: 32px 0; }
  .lp-d .lp-prose h2::before { margin-bottom: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Conversion redesign (preview branch)

   One primary action everywhere — the copper "Get a free quote" button —
   with quieter supporting links, a homepage that leads with finished work,
   and a shorter labelled quote form. Homepage-only rules are scoped by the
   section ids they style; the button system, nav button, mobile quote bar
   and placeholder markers are shared by every page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Keyboard focus, site-wide ─────────────────────────────────────────
   Zero-specificity default so every link, button and disclosure gets a
   visible ring; components that define their own ring still win. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-bronze-deep);
  outline-offset: 3px;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 17px 34px;
  background: var(--c-bronze-deep); color: var(--c-white);
  font-family: var(--ff-head); font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
  border: 1px solid var(--c-bronze-deep); cursor: pointer;
  box-shadow: 0 1px 2px rgba(92, 52, 18, 0.2), 0 10px 24px -12px rgba(162, 95, 40, 0.55);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary:hover {
  background: var(--c-bronze-darker); border-color: var(--c-bronze-darker);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(92, 52, 18, 0.2), 0 18px 32px -14px rgba(162, 95, 40, 0.6);
}
.btn-primary:active {
  background: rgb(118, 68, 28); border-color: rgb(118, 68, 28);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(92, 52, 18, 0.25);
}
/* White ring inside a dark ring: visible on the paper, white and dark
   surfaces the button now sits on. */
.btn-primary:focus-visible {
  outline: 2px solid var(--c-white); outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--c-dark);
}
.btn-primary[aria-busy="true"] { cursor: progress; transform: none; }
.btn-block { display: flex; width: 100%; }

/* Existing secondary buttons get the pressed state they were missing. */
.btn-dark:active, .btn-light:active { transform: translateY(0); }

/* Quiet supporting link: "View our work", "See all projects". */
.link-quiet {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-size: 14px; font-weight: 700;
  color: var(--c-dark);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(162, 95, 40, 0.55); text-underline-offset: 5px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.link-quiet span { transition: transform 0.25s var(--ease); }
.link-quiet:hover { color: var(--c-bronze-deep); text-decoration-color: currentColor; }
.link-quiet:hover span { transform: translateX(4px); }
.link-quiet:active { color: var(--c-bronze-darker); }

/* ── Header quote button ───────────────────────────────────────────── */
.nav-links { margin-left: auto; }
.nav-cta {
  margin-left: 40px;
  display: inline-flex; align-items: center;
  padding: 13px 22px;
  background: var(--c-bronze-deep); color: var(--c-white);
  font-family: var(--ff-head); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--c-bronze-deep);
  box-shadow: 0 1px 2px rgba(92, 52, 18, 0.18), 0 8px 18px -10px rgba(162, 95, 40, 0.55);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-cta:hover { background: var(--c-bronze-darker); border-color: var(--c-bronze-darker); transform: translateY(-1px); }
.nav-cta:active { background: rgb(118, 68, 28); transform: translateY(0); box-shadow: none; }
.nav-cta:focus-visible { outline: 2px solid var(--c-white); outline-offset: 1px; box-shadow: 0 0 0 5px var(--c-dark); }
.mobile-cta { background: var(--c-bronze-deep); border-color: var(--c-bronze-deep); }
.mobile-cta:hover { background: var(--c-bronze-darker); color: var(--c-white); padding-left: 32px; }
.mobile-cta:active { background: rgb(118, 68, 28); }

/* ── Shared section furniture ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--ff-head); font-size: 11px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-bronze-deep); margin-bottom: var(--sp-2);
}
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(34px, 3.9vw, 52px); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.03em;
  color: var(--c-dark); text-wrap: balance;
}
.section-head {
  max-width: 1200px; margin: 0 auto var(--sp-5);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.section-head--stacked { display: block; }
.section-cta { text-align: center; }

/* ── Placeholders (preview only) ───────────────────────────────────── */
.ph {
  background: var(--c-ph); color: var(--c-ph-text);
  outline: 1px dashed var(--c-ph-line); outline-offset: 1px;
  padding: 0 4px; border-radius: 2px; font-style: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-note {
  display: flex; gap: 10px; align-items: baseline;
  margin: var(--sp-2) 0;
  padding: 8px 12px;
  background: var(--c-ph); color: var(--c-ph-text);
  border: 1px dashed var(--c-ph-line);
  font-size: 13px; line-height: 1.5;
}
.ph-note::before {
  content: 'Needs Modernus';
  font-family: var(--ff-head); font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.ph-frame {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(-45deg, #fff8d9 0 12px, var(--c-ph) 12px 24px);
  outline: 1px dashed var(--c-ph-line); outline-offset: -1px;
  color: var(--c-ph-text);
  font-family: var(--ff-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Hero: paper panel + finished project ─────────────────────────── */
#hero {
  margin-top: var(--nav-h);
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  min-height: min(calc(100svh - var(--nav-h)), 820px);
  background: var(--c-paper);
}
.hero-panel {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-6) var(--sp-5) var(--sp-4) max(48px, calc((100vw - 1280px) / 2 + 48px));
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(250, 232, 219, 0.95) 0%, rgba(250, 232, 219, 0) 62%),
    radial-gradient(80% 70% at 100% 100%, rgba(180, 106, 44, 0.08) 0%, rgba(180, 106, 44, 0) 60%),
    var(--c-paper);
}
/* Paper grain — the same noise used before, at a whisper. */
.hero-panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.hero-copy { max-width: 620px; margin: auto 0; }
.hero-copy > * { animation: heroRise 0.8s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.26s; }
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(40px, 4vw, 60px); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--c-dark); margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.hero-lede {
  font-size: 17px; line-height: 1.7; color: var(--c-text-soft);
  max-width: 46ch; margin-bottom: var(--sp-4);
}
.hero-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5);
}
.hero-review { margin: 0; max-width: 48ch; padding-left: var(--sp-3); border-left: 2px solid var(--c-bronze); }
.hero-review blockquote p {
  font-family: var(--ff-display); font-style: italic;
  font-size: 21px; line-height: 1.4; color: var(--c-dark);
}
.hero-review figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
.hero-areas {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid rgba(30, 30, 30, 0.1);
  font-size: 13.5px; line-height: 1.7; color: var(--c-muted); max-width: 62ch;
}
.hero-areas a {
  color: var(--c-dark);
  text-decoration: underline; text-decoration-color: rgba(162, 95, 40, 0.5); text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.hero-areas a:hover { color: var(--c-bronze-deep); text-decoration-color: currentColor; }
.hero-areas a:active { color: var(--c-bronze-darker); }

.hero-photo { position: relative; margin: 0; overflow: hidden; background: var(--c-dark); }
/* Absolutely placed so a portrait photo fills the column without setting the
   hero's height; the copy panel decides that. */
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  animation: heroSettle 1.4s var(--ease) both;
}
/* Colour treatment + a short gradient that only seats the caption. Kept light
   on purpose: the point of this image is that the finish can be inspected. */
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(180, 106, 44, 0.06); mix-blend-mode: multiply;
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 34%);
}

/* The signature: a caption pinned to the photo like the label on a colour card. */
.work-tag {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  max-width: calc(100% - 2 * var(--sp-4));
  padding: 12px 18px 12px 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-floating);
}
.work-tag-chip {
  flex-shrink: 0; width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--c-bronze) 0 50%, var(--c-cream) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.work-tag-text { font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.work-tag-text strong {
  display: block; color: var(--c-dark);
  font-family: var(--ff-head); font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
}
.work-tag-link {
  padding-left: 16px; border-left: 1px solid var(--c-border);
  font-family: var(--ff-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-bronze-deep);
  transition: color 0.2s;
}
.work-tag-link:hover { color: var(--c-dark); text-decoration: underline; text-underline-offset: 4px; }
.work-tag-link:active { color: var(--c-bronze-darker); }

@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Transform only — the photo is the LCP element, so it must never start transparent. */
@keyframes heroSettle { from { transform: scale(1.04); } to { transform: none; } }

/* ── Trust strip ───────────────────────────────────────────────────── */
.trust-strip { background: var(--c-dark); }
.trust-list {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.trust-list li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 26px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-list li:first-child { padding-left: 0; border-left: 0; }
.trust-list strong {
  font-family: var(--ff-display); font-size: 25px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em; color: var(--c-cream);
}
.trust-list span { font-size: 13px; line-height: 1.5; color: var(--c-on-dark); }
.trust-list .ph { color: var(--c-ph-text); }

/* ── Selected projects ─────────────────────────────────────────────── */
#portfolio { padding: var(--section-pad) 48px; background: var(--c-white); }
.projects-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
}
.project-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-white); box-shadow: var(--shadow-elevated);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-floating); }
.project-card:focus-within { box-shadow: var(--shadow-floating), 0 0 0 2px var(--c-bronze-deep); }
.project-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.project-card:hover .project-media img { transform: scale(1.04); }
.project-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(180, 106, 44, 0.06); mix-blend-mode: multiply;
}
.project-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 40%);
}
.project-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.project-meta {
  margin-bottom: 10px;
  font-family: var(--ff-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-bronze-deep);
}
.project-title {
  margin-bottom: 10px;
  font-family: var(--ff-display); font-size: 26px; font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em;
}
.project-title a {
  color: var(--c-dark);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease), color 0.2s;
}
/* Whole card is the link target; the heading link stays the one tab stop. */
.project-title a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.project-title a:focus-visible { outline: none; }
.project-card:hover .project-title a { color: var(--c-bronze-deep); background-size: 100% 1px; }
.project-card:active { transform: translateY(-1px); }
.project-detail { font-size: 14.5px; line-height: 1.7; color: rgb(80, 80, 80); }

.before-after {
  max-width: 960px; margin: var(--sp-5) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.before-after figure { margin: 0; }
.before-after figcaption {
  margin-top: 10px;
  font-family: var(--ff-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-dark);
}
.before-after-caption { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; }

/* ── Services ──────────────────────────────────────────────────────────
   Three services. Wallpaper hanging is the specialism, so it gets a full-width
   surface with a finished job on it and sits one layer above the two painting
   cards, which follow as a pair. */
#services .services-grid { margin-bottom: var(--sp-5); }

.service-feature {
  max-width: 1200px; margin: 0 auto var(--sp-3);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--c-white);
  border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
}
.service-feature-media { position: relative; margin: 0; min-height: 460px; overflow: hidden; background: var(--c-dark); }
.service-feature-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%;
  transition: transform 0.6s var(--ease);
}
.service-feature:hover .service-feature-media img { transform: scale(1.03); }
/* Same light treatment as the project photos: the paper has to stay inspectable. */
.service-feature-media::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(180, 106, 44, 0.06); mix-blend-mode: multiply;
}
.service-feature-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 38%);
}
.service-feature-media .work-tag { left: var(--sp-3); bottom: var(--sp-3); max-width: calc(100% - 2 * var(--sp-3)); }

.service-feature-body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.service-feature-title {
  margin-bottom: var(--sp-2);
  font-family: var(--ff-display); font-size: clamp(32px, 3.2vw, 42px); font-weight: 600;
  line-height: 1.08; letter-spacing: -0.03em; color: var(--c-dark);
}
.service-feature-desc {
  max-width: 46ch; margin-bottom: var(--sp-3);
  font-size: 15.5px; line-height: 1.75; color: var(--c-text-soft);
}
.service-feature-points { align-self: stretch; margin-bottom: var(--sp-3); border-top: 1px solid var(--c-border); }
.service-feature-points li {
  position: relative; padding: 12px 0 12px var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  font-size: 14.5px; line-height: 1.6; color: var(--c-dark);
}
.service-feature-points li::before {
  content: ''; position: absolute; left: 0; top: 23px;
  width: 12px; height: 2px; background: var(--c-bronze);
}
.service-feature .service-card-link { margin-top: 0; }
.service-feature .service-card-link:hover span { transform: translateX(4px); }

/* The pair: icon beside the copy, left-aligned, so two wide cards don't each
   carry a short centred column. */
.services-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-grid--pair .service-card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--sp-3); align-content: start;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: left;
}
.services-grid--pair .service-card-icon { grid-row: 1 / span 4; margin: 0; }
.services-grid--pair .service-card > :not(.service-card-icon) { grid-column: 2; }
.services-grid--pair .service-card-divider { margin: 0 0 var(--sp-2); }
.services-grid--pair .service-card-link { justify-self: start; }

/* ── Meet the team + how we work ───────────────────────────────────── */
#about { padding: var(--section-pad) 48px; background: var(--c-white); }
.team-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6); align-items: start;
}
.team-photos {
  position: sticky; top: calc(var(--nav-h) + var(--sp-4));
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.team-person { margin: 0; }
.team-person:nth-child(2) { margin-top: var(--sp-6); }
.team-person img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  box-shadow: var(--shadow-elevated);
}
.team-person figcaption { margin-top: 12px; }
.team-person strong { display: block; font-family: var(--ff-head); font-size: 15px; font-weight: 700; color: var(--c-dark); }
.team-person figcaption span { font-size: 13px; color: var(--c-muted); }
.team-intro { margin: var(--sp-3) 0 var(--sp-5); font-size: 16.5px; line-height: 1.75; color: var(--c-text-soft); }
.team-subhead {
  margin-bottom: var(--sp-2);
  font-family: var(--ff-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-dark);
}
.standards { margin-bottom: var(--sp-2); }
.standards li {
  padding: 16px 0; border-top: 1px solid var(--c-border);
  font-size: 15px; line-height: 1.65; color: rgb(70, 70, 70);
}
.standards li:last-child { border-bottom: 1px solid var(--c-border); }
.standards strong { color: var(--c-dark); }
.team-copy .link-quiet { margin-top: var(--sp-3); }

/* ── How quoting works ─────────────────────────────────────────────── */
#process { padding: var(--section-pad) 48px; background: var(--c-paper); }
.process-inner { max-width: 1200px; margin: 0 auto; }
.process-steps {
  list-style: none;
  margin-bottom: var(--sp-5);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4);
}
.process-steps li { padding-top: var(--sp-3); border-top: 2px solid var(--c-bronze); }
.process-steps h3 {
  margin-bottom: 8px;
  font-family: var(--ff-display); font-size: 25px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--c-dark);
}
.process-steps p { font-size: 14.5px; line-height: 1.7; color: rgb(80, 80, 80); }
.quote-includes {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-3);
  padding: var(--sp-4); background: var(--c-white); box-shadow: var(--shadow-elevated);
}
.quote-includes h3 {
  font-family: var(--ff-display); font-size: 25px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--c-dark);
}
.quote-includes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--sp-3); }
.quote-includes li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.6; color: rgb(70, 70, 70); }
.quote-includes li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--c-bronze); border-bottom: 2px solid var(--c-bronze);
  transform: rotate(-45deg);
}

/* ── Reviews ───────────────────────────────────────────────────────── */
#testimonials { padding: var(--section-pad) 48px; background: var(--c-light); }
#testimonials > .ph-note { max-width: 1200px; margin: calc(-1 * var(--sp-3)) auto var(--sp-3); }
.rating-summary { font-size: 14px; }
.rating-star { font-style: normal; color: var(--c-bronze); }
/* Inline link to the Google profile from a review credit or the trust strip. */
.review-link {
  color: inherit;
  text-decoration: underline; text-decoration-color: rgba(162, 95, 40, 0.5); text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.review-link:hover { color: var(--c-bronze-deep); text-decoration-color: currentColor; }
.review-link:active { color: var(--c-bronze-darker); }
.trust-list .review-link { text-decoration-color: rgba(194, 114, 48, 0.7); }
.trust-list .review-link:hover, .trust-list .review-link:active { color: var(--c-bronze-light); }
/* Five reviews: three Google reviews across the top, the two direct ones wider
   beneath. Desktop only, so the spans never fight the one-column phone grid. */
@media (min-width: 901px) {
  /* Doubled class: .testimonials-grid is declared just below and would win otherwise. */
  .testimonials-grid.testimonials-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .testimonials-grid--five > * { grid-column: span 2; }
  .testimonials-grid--five > :nth-child(n+4) { grid-column: span 3; }
}
.testimonials-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
}
.testimonial-card {
  margin: 0; padding: var(--sp-4);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  background: var(--c-white); box-shadow: var(--shadow-elevated);
}
.t-text {
  font-family: var(--ff-display); font-style: italic;
  font-size: 20px; line-height: 1.45; color: var(--c-dark);
}
.t-name {
  font-family: var(--ff-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dark);
}
.t-loc { margin-top: 4px; font-size: 13px; color: var(--c-muted); }

/* ── FAQ ───────────────────────────────────────────────────────────── */
#faq { padding: var(--section-pad) 48px; background: var(--c-white); }
.faq-inner { max-width: 880px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--c-border); }
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 48px 22px 0;
  /* Cormorant has hairline strokes; at this size, tightened tracking crowds
     them and they shimmer while scrolling. Normal tracking and a touch more
     size give the strokes room. */
  font-family: var(--ff-display); font-size: 24px; font-weight: 600;
  line-height: 1.3; letter-spacing: 0; color: var(--c-dark);
  text-rendering: optimizeLegibility; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 10px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--c-bronze-deep); border-bottom: 2px solid var(--c-bronze-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-item summary:hover { color: var(--c-bronze-deep); }
.faq-item summary:active { color: var(--c-bronze-darker); }
.faq-answer { padding: 0 48px var(--sp-3) 0; font-size: 15.5px; line-height: 1.75; color: rgb(70, 70, 70); }
.faq-answer > * + * { margin-top: 10px; }

/* ── Quote form ────────────────────────────────────────────────────── */
#contact { padding: var(--section-pad) 48px; background: var(--c-paper); }
.contact-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-6); align-items: start;
}
.contact-sub { margin: var(--sp-2) 0 var(--sp-4); font-size: 16px; line-height: 1.7; color: var(--c-text-soft); }
.next-steps { margin-bottom: var(--sp-4); padding: var(--sp-3); background: var(--c-white); box-shadow: var(--shadow-elevated); }
.next-steps h3 {
  margin-bottom: 14px;
  font-family: var(--ff-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-dark);
}
.next-steps ol { list-style: none; counter-reset: ns; }
.next-steps li {
  counter-increment: ns; position: relative;
  padding-left: 36px; font-size: 14.5px; line-height: 1.6; color: rgb(70, 70, 70);
}
.next-steps li + li { margin-top: 12px; }
.next-steps li::before {
  content: counter(ns);
  position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-cream); color: var(--c-bronze-darker);
  font-family: var(--ff-head); font-size: 12px; font-weight: 800; line-height: 24px; text-align: center;
}
.contact-details { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-detail { display: flex; align-items: flex-start; gap: 16px; }
.contact-detail-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white); color: var(--c-bronze-deep); box-shadow: var(--shadow-elevated);
}
.contact-detail-label {
  margin-bottom: 4px;
  font-family: var(--ff-head); font-size: 10px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-muted);
}
.contact-detail-value { font-size: 14.5px; line-height: 1.6; color: var(--c-dark); overflow-wrap: anywhere; }
.contact-detail-value a { transition: color 0.2s; }
.contact-detail-value a:hover { color: var(--c-bronze-deep); text-decoration: underline; text-underline-offset: 3px; }
.contact-detail-value a:active { color: var(--c-bronze-darker); }

.quote-form { padding: var(--sp-5); background: var(--c-white); box-shadow: var(--shadow-floating); }
.field { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-2); }
.field--short { max-width: 240px; }
.field label {
  margin-bottom: 6px;
  font-family: var(--ff-head); font-size: 13px; font-weight: 700; color: var(--c-dark);
}
.field-optional { font-weight: 400; color: var(--c-muted); }
.field-hint { margin: -2px 0 8px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.form-input, .form-textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--ff-body); font-size: 15px; font-weight: 400; color: var(--c-dark);
  background: var(--c-white);
  /* 3.3:1 against white — the WCAG floor for a control boundary. */
  border: 1px solid rgb(140, 140, 140); border-radius: 2px;
  appearance: none; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form-input:hover, .form-textarea:hover { border-color: var(--c-dark); }
.form-input:focus, .form-textarea:focus {
  border-color: var(--c-bronze-deep);
  box-shadow: 0 0 0 3px rgba(180, 106, 44, 0.22);
}
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: rgb(176, 36, 24); }
.form-input[aria-invalid="true"]:focus, .form-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(176, 36, 24, 0.18); }
.field-error {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 13px; font-weight: 700; color: rgb(166, 33, 22);
}
.field-error[hidden] { display: none; }
.field-error::before {
  content: '!'; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgb(166, 33, 22); color: var(--c-white);
  font-size: 11px; line-height: 16px; text-align: center;
}
.quote-form .btn-primary { margin-top: var(--sp-1); }
.form-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--c-muted); text-align: center; }
.form-status { margin-top: 10px; font-size: 14px; line-height: 1.6; text-align: center; }
.form-status:empty { display: none; }
.form-status--error { padding: 12px 14px; background: rgb(253, 238, 236); color: rgb(140, 28, 18); text-align: left; }
.form-status--error a { text-decoration: underline; }
.btn-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: var(--c-white);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { padding: var(--sp-5); background: var(--c-white); box-shadow: var(--shadow-floating); }
.form-success h3 {
  margin-bottom: 12px;
  font-family: var(--ff-display); font-size: 32px; font-weight: 600;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--c-dark);
}
.form-success p { font-size: 15.5px; line-height: 1.7; color: var(--c-text-soft); }
.form-success p + p { margin-top: 10px; }
.form-success:focus { outline: none; }

/* ── Project galleries: captions + keyboard-usable controls ────────── */
.slider-caption {
  margin-top: 14px;
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78);
}
.slider-expand { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; color: var(--c-white); text-decoration-color: rgba(194, 114, 48, 0.8); }
.slider-expand:hover { color: var(--c-bronze-light); }
.slider-expand:focus-visible { outline-color: var(--c-bronze-light); }
.slider-caption strong { color: var(--c-white); font-weight: 700; }
.slider-thumb:focus-visible, .slider-dot:focus-visible { outline: 2px solid var(--c-bronze-light); outline-offset: 3px; }

/* ── Project galleries: the whole photo, never enlarged ────────────────
   The stage was a 16:7 strip filled edge to edge (object-fit: cover). A
   portrait photo was scaled up about 1.8x and cropped to a third of itself,
   so it looked soft in the stage and sharp in the full-screen viewer. The
   stage is now taller and each photo sits whole inside it at or below its
   natural size — the same rule the viewer uses — over a blurred copy of
   itself, so the space beside a portrait photo is not empty.

   Every selector carries .proj-gallery to outrank the inline <style> on each
   project page. assets/js/script.js supplies --slide-img for the photo on show. */
.proj-gallery .slider-stage { aspect-ratio: 3 / 2; max-height: 76vh; }
.proj-gallery .slider-slide { cursor: zoom-in; }
.proj-gallery .slider-slide::before {
  content: ''; position: absolute; inset: -48px;
  background: var(--slide-img, none) center / cover no-repeat;
  filter: blur(32px) brightness(0.42) saturate(1.15);
}
.proj-gallery .slider-slide img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 28px 60px -24px rgba(0, 0, 0, 0.75);
}
/* Phones. The stage was 4:3 and cropped a portrait photo to about half; most
   of these photos are portrait, so the stage stands upright here and the
   landscape ones sit in the middle of it. The dots are 7px and the "View full
   screen" link is one line of text, so both get a larger touch area without
   changing how they look. */
@media (max-width: 600px) {
  .proj-gallery .slider-stage { aspect-ratio: 4 / 5; max-height: 70vh; }
  .proj-gallery .slider-dots { gap: 17px; }
  .proj-gallery .slider-dot { position: relative; }
  .proj-gallery .slider-dot::after { content: ''; position: absolute; inset: -16px -8px; }
  .proj-gallery .slider-expand { padding: 12px 0; margin: -12px 0; }
}

/* ── Mobile quote bar ──────────────────────────────────────────────── */
.quote-bar { display: none; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links { gap: 28px; }
  .nav-cta { margin-left: 28px; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-cta { display: none; }
  .nav-hamburger { margin-left: auto; }

  /* Phones: headline and quote button first, then the photo, then the
     review and areas. The panel wrappers step aside (display: contents) so
     their children can be ordered around the photo. */
  #hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-panel, .hero-copy { display: contents; }
  .hero-copy > *, .hero-areas { margin-left: 20px; margin-right: 20px; }
  .hero-copy > .hero-title { margin-top: var(--sp-5); }
  .hero-actions { margin-bottom: var(--sp-4); }
  .hero-photo { order: 1; aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: 50% 68%; }
  .hero-review { order: 2; margin-top: var(--sp-4); }
  .hero-areas { order: 3; margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
  .work-tag { left: 16px; bottom: 16px; max-width: calc(100% - 32px); }

  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px; }
  .trust-list li, .trust-list li:first-child { padding: 20px 16px; border-left: 0; }
  .trust-list li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .trust-list li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .trust-list li:nth-child(odd) { padding-left: 0; }

  #portfolio, #about, #process, #testimonials, #faq, #contact { padding: var(--section-pad) 20px; }
  .projects-grid, .testimonials-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .service-feature, .services-grid--pair { grid-template-columns: 1fr; }
  .service-feature { margin-bottom: var(--sp-2); }
  .service-feature-media { min-height: 0; aspect-ratio: 4 / 3; }
  .service-feature-media .work-tag { left: 16px; bottom: 16px; max-width: calc(100% - 32px); }
  .service-feature-body { padding: var(--sp-4) var(--sp-3); }
  .services-grid--pair .service-card { padding: var(--sp-4) var(--sp-3); }
  .team-inner, .contact-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .team-photos { position: static; }
  .team-person:nth-child(2) { margin-top: var(--sp-4); }
  .quote-includes { grid-template-columns: 1fr; }

  /* Fixed bar with the one action that matters, plus a call option. */
  .quote-bar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -1px 0 var(--c-border), 0 -14px 30px -18px rgba(60, 36, 16, 0.4);
    transition: transform 0.3s var(--ease), visibility 0.3s;
  }
  .quote-bar.is-hidden { transform: translateY(110%); visibility: hidden; }
  .quote-bar-cta { flex: 1; padding: 14px 16px; }
  .quote-bar-call {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px;
    border: 1px solid var(--c-dark); color: var(--c-dark); background: var(--c-white);
    font-family: var(--ff-head); font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s;
  }
  .quote-bar-call:hover { background: var(--c-dark); color: var(--c-white); }
  .quote-bar-call:active { background: rgb(0, 0, 0); color: var(--c-white); }
  /* Keep the end of the page clear of the bar. */
  body:has(.quote-bar) #footer { padding-bottom: calc(32px + 80px); }
}
@media (max-width: 600px) {
  .hero-title { font-size: clamp(34px, 9.4vw, 44px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { margin-bottom: var(--sp-4); }
  .hero-review blockquote p { font-size: 19px; }
  .work-tag-link { padding-left: 0; border-left: 0; }
  .trust-list strong { font-size: 21px; }
  .process-steps { grid-template-columns: 1fr; gap: var(--sp-3); }
  .quote-includes ul { grid-template-columns: 1fr; }
  .quote-form, .form-success { padding: var(--sp-3) 20px; }
  .field-row { grid-template-columns: 1fr; }
  .field--short { max-width: none; }
  .before-after { grid-template-columns: 1fr; }
  .services-grid--pair .service-card { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--sp-2); }
  .services-grid--pair .service-card-icon { width: 56px; height: 56px; }
  .faq-item summary { font-size: 21px; }
  .faq-answer { padding-right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion — MUST REMAIN THE LAST BLOCK IN THIS FILE

   A visitor who has asked their OS to reduce motion gets the finished state
   with no movement at all. assets/js/script.js reads the same preference and applies
   the end state directly, so nothing waits on an observer.

   Position matters. An earlier version of this block sat higher up the file
   and silently did nothing for the about-image: `.about-img.revealed` is
   declared further down with the same specificity, so the later rule won and
   the 1.5s clip-path wipe still ran. Anything added here must stay after the
   rules it overrides.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Scroll reveals and section entrances — visible, no movement, no delay. */
  .reveal, .reveal-left, .reveal-right,
  .reveal.visible, .reveal-left.visible, .reveal-right.visible,
  .sect-anim, .sect-anim.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }


  /* Landing-page and case-study surfaces built on the shared components. */
  .lp-proof-card, .service-card, .port-card {
    transition: none !important;
  }
  .lp-proof-card:hover, .service-card:hover, .port-card:hover {
    transform: none !important;
  }

  /* Redesign: hero entrance, card lift and the quote bar slide. */
  .hero-copy > *, .hero-photo img { animation: none !important; opacity: 1 !important; transform: none !important; }
  .project-card, .project-media img, .service-feature-media img, .btn-primary, .nav-cta, .quote-bar { transition: none !important; }
  .project-card:hover, .project-card:hover .project-media img, .service-feature:hover .service-feature-media img, .btn-primary:hover { transform: none !important; }
  .btn-spinner { animation-duration: 2s; }
}