/* ============================================================================
   Smith & Co Carpet Fitting — mockups.umera.uk/smith-and-co-carpets
   Brand-lock from James's logo (2026-10-12): navy #0A1628 for text and the logo only, copper #8A5420 for
   buttons and accents, pale sand from the carpet roll for light sections, warm brown tint on photos.
   James asked for less blue and a more neutral page (2026-10-11).
   Fonts (v3): Cormorant Garamond (headings) + Jost (body), self-hosted in assets/fonts (latin subset, the
   variable files Google Fonts serves, downloaded 2026-10-12) so no third-party stylesheet blocks first paint.
   ==========================================================================*/

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jost-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;
}

:root {
  --brand-primary: #0A1628;
  --brand-accent: #8A5420;
  --font-display: 'Marcellus', 'Georgia', serif;
  --font-body: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-lockup: 'Cinzel', 'Georgia', serif;
  --navy-deep: #07111F;
  --navy-ink: #050D19;
  --wash: #F7F0E6;
  --gold-tint: #F0E3D0;
  --gold-bright: #D4A46E;
  --copper-deep: #6E4318;
  --brown-ink: #1E140B;
  --ink: #1A1D24;
  --ink-soft: #4A5262;
  --line: rgba(10, 22, 40, 0.14);
  --radius-card: 18px;
  --radius-inner: 10px;
  --nav-h: 96px;
}
@media (max-width: 767px) { :root { --nav-h: 72px; } }

html { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: #1a1d24; background: #fff; }
img, video, picture { max-width: 100%; display: block; }
/* Parallax surfaces clip + cover so the scroll shift can never expose the box edge. */
.hero__media, .page-hero__media, .cta-strip__media, .about__media, .gallery-grid figure, .service-card__media, .testimonial-card__photo, .review-card__photo, .parallax, [data-parallax] { overflow: hidden; }
.parallax img, [data-parallax] img { width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0 0 0.5em; line-height: 1.15; font-weight: 400; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: inherit; }
input, textarea, select, button { font-family: inherit; font-size: 16px; min-height: 44px; }
button, .btn, a.btn, [role="button"] { min-height: 44px; min-width: 44px; cursor: pointer; }
button:active, .btn:active { transform: scale(0.96); }
[data-count] { font-variant-numeric: tabular-nums; }
@media (scripting: none) { .reveal-up, .reveal-fade, .reveal-stagger > *, .reveal-section { opacity: 1 !important; visibility: visible !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.placeholder { display: block; padding: 1.25rem; border: 1px dashed currentColor; border-radius: 12px; opacity: 0.65; text-align: center; }
.bottom-cta, .fixed-cta-bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* === Mobile build floor (mobile-web-build SSOT — single 767px gate) === */
@media (max-width: 767px) {
  h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
  .hero__sub, .page-hero__sub, .lede { font-size: clamp(1rem, 4vw, 1.0625rem); line-height: 1.5; }
  p, li { max-width: 38ch; }
  .container, .container--wide { padding: 0 clamp(1.25rem, 5vw, 1.5rem); }
}
@media (max-width: 420px) {
  h1 { font-size: clamp(1.875rem, 9vw, 2.5rem); }
  .hero__actions, .page-hero__actions { flex-direction: column; gap: 12px; }
  .hero__actions .btn, .page-hero__actions .btn { width: 100%; }
}
/* Mobile rail keyframe — scroll-velocity rails fall back to continuous CSS marquee */
@media (max-width: 767px) {
  .rail--scroll-velocity .rail-track,
  .testimonial-rail .rail-track,
  .review-rail .rail-track,
  .rail--proof .rail-track {
    animation: mobile-rail-drift 40s linear infinite;
  }
  .rail--scroll-velocity .rail-track:hover,
  .testimonial-rail .rail-track:hover,
  .review-rail .rail-track:hover,
  .rail--proof .rail-track:hover { animation-play-state: paused; }
}
@keyframes mobile-rail-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none !important; } /* no transform:none here: the rail JS never runs under reduced motion */
}
/* Mobile nav strip-down + hamburger menu overlay (handler lives in animations.js) */
.nav__toggle { display: none; background: none; border: 0; padding: 0.5rem; min-width: 44px; min-height: 44px; cursor: pointer; color: currentColor; }
.nav__toggle-bar { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform 0.3s, opacity 0.3s; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__toggle[aria-expanded="true"] { position: relative; z-index: 1001; color: var(--brand-primary); }
.nav__menu { /* desktop default — overridden below */ }
@media (max-width: 900px) {
  .nav__toggle { display: inline-block; margin-left: auto; }
  .nav__links, .nav__actions, .nav__tel, .nav__brand-text span { display: none; }
  .nav__menu {
    position: fixed; inset: 0;
    width: 100vw; height: 100svh; height: 100dvh;
    background: #fff; color: var(--brand-primary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.1rem; padding: 2rem;
    transform: translateX(100%); transition: transform 0.35s ease;
    z-index: 1000;
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__menu a { font-family: var(--font-display); font-size: clamp(1.5rem, 8vw, 2.5rem); padding: 0.5rem 0; color: inherit; text-decoration: none; }
  .nav__menu .nav__menu-cta { margin-top: 1rem; padding: 0.875rem 1.5rem; border: 1px solid var(--brand-accent); border-radius: 999px; color: var(--brand-accent); font-family: var(--font-body); font-size: 1.05rem; letter-spacing: 0.04em; }
}
body.menu-open { position: fixed; width: 100%; overflow: hidden; }

/* ============================================================================
   Layout primitives
   ==========================================================================*/
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container--wide { max-width: 1320px; }
.section { padding: clamp(4rem, 9vh, 7rem) 0; }
.section--wash { background: var(--wash); }
.section--navy { background: var(--brand-primary); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: rgba(255, 255, 255, 0.85); }

.kicker {
  display: inline-block;
  font-family: var(--font-lockup);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 1rem;
}
.section--navy .kicker { color: var(--gold-bright); }
.section-head { max-width: 640px; margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.section-head h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); color: var(--brand-primary); margin-bottom: 0.4em; }
.section--navy .section-head h2 { color: #fff; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.7rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0.03em;
  text-decoration: none; border: 1px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
  white-space: nowrap;
}
.btn svg { flex: 0 0 auto; }
.btn--gold { background: var(--brand-accent); color: #fff; }
.btn--gold:hover { background: var(--copper-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn--ghost:hover { border-color: #fff; }
.btn--navy { background: var(--brand-accent); color: #fff; }
.btn--navy:hover { background: var(--copper-deep); }
.btn--ghost-ink { background: transparent; color: var(--brand-primary); border-color: rgba(10, 22, 40, 0.4); }
.btn--ghost-ink:hover { border-color: var(--brand-primary); }

/* ============================================================================
   Nav
   ==========================================================================*/
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  color: var(--brand-primary);
  transition: background 0.3s, box-shadow 0.3s;
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-scrolled { background: #fff; box-shadow: 0 6px 24px rgba(30, 20, 11, 0.08); }
.nav__inner {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  height: var(--nav-h);
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.nav__logo { height: calc(var(--nav-h) - 16px); width: auto; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav__brand-text strong { font-family: var(--font-lockup); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.14em; }
.nav__brand-text strong em { font-style: normal; color: var(--gold-bright); }
.nav__brand-text span { font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav__links li { margin: 0; }
.nav__links a { font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; opacity: 0.85; transition: opacity 0.2s; white-space: nowrap; }
.nav__links a:hover { opacity: 1; }
.nav__actions { display: flex; align-items: center; }
.nav__actions .btn { padding: 0.6rem 1.3rem; font-size: 0.92rem; min-height: 40px; }

/* Mobile menu extras */
.nav__menu { display: none; }
@media (max-width: 900px) { .nav__menu { display: flex; } }
.nav__menu-contact { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; margin-top: 1.5rem; }

/* ============================================================================
   Hero (HERO-ALT: centred-minimalist on navy — no photo exists in source)
   ==========================================================================*/
.hero {
  position: relative;
  min-height: 100svh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(210, 156, 66, 0.12) 0%, rgba(210, 156, 66, 0) 55%),
    linear-gradient(180deg, var(--brown-ink) 0%, #2B1D11 58%, var(--brown-ink) 100%);
  color: #fff;
  padding: calc(var(--nav-h) + 3rem) 0 0;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 120px);
  pointer-events: none;
}
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.hero__mark { width: clamp(96px, 10vw, 124px); height: auto; margin-bottom: 1.4rem; }
.hero__kicker {
  font-family: var(--font-lockup); font-size: clamp(0.72rem, 1.2vw, 0.88rem); font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-bright);
  margin-bottom: 1.1rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  max-width: 15ch;
  margin: 0 auto 0.45em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(30, 20, 11, 0.45);
}
.hero__sub { font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: rgba(255, 255, 255, 0.82); max-width: 46ch; margin: 0 auto 2rem; }
.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero__meta { display: flex; gap: clamp(1.1rem, 3vw, 2.2rem); justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.hero__meta li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.72); }
.hero__meta svg { width: 15px; height: 15px; color: var(--gold-bright); }

/* Hero trust rail — slow ambient drift below the hero content */
.hero-trust-rail { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.1rem 0; overflow: hidden; }
.rail-track { display: flex; align-items: center; gap: 0; width: max-content; will-change: transform; }
.rail-item {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding: 0 1.6rem;
  font-family: var(--font-lockup); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.rail-item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-accent); flex: 0 0 auto; }

/* ============================================================================
   How it works
   ==========================================================================*/
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { position: relative; padding: 2rem 1.75rem 1.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); }
.step__num {
  font-family: var(--font-lockup); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.18em;
  color: var(--brand-accent);
  display: inline-block; margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.3rem; color: var(--brand-primary); margin-bottom: 0.35em; }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.99rem; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================================
   Why Smith & Co — 4 icon tiles (flyer labels verbatim)
   ==========================================================================*/
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.why-tile { text-align: center; padding: 2.1rem 1.4rem 1.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); }
.why-tile__icon {
  width: 58px; height: 58px; margin: 0 auto 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gold-tint); color: var(--brand-accent);
}
.why-tile__icon svg { width: 27px; height: 27px; }
.why-tile h3 { font-family: var(--font-lockup); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 0.5em; line-height: 1.4; }
.why-tile p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Services — asymmetric 1 feature + 2 photo cards + 2 text cards
   ==========================================================================*/
.services-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
.service-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 520px; border-radius: var(--radius-card); overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--brand-primary) 0%, var(--navy-deep) 100%);
}
.service-feature__media { position: absolute; inset: 0; overflow: hidden; }
.service-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.service-feature__body {
  position: relative; padding: 5.5rem 2.2rem 2.2rem;
  background: linear-gradient(180deg, rgba(5, 13, 25, 0) 0%, rgba(5, 13, 25, 0.72) 42%, rgba(5, 13, 25, 0.94) 100%);
}
.service-feature__body .kicker { color: var(--gold-bright); margin-bottom: 0.6rem; }
.service-feature__body h3 { font-size: 1.7rem; color: #fff; margin-bottom: 0.3em; text-shadow: 0 1px 12px rgba(10, 20, 34, 0.55); }
.service-feature__body p { color: rgba(255, 255, 255, 0.9); margin: 0; max-width: 44ch; text-shadow: 0 1px 10px rgba(10, 20, 34, 0.5); }
.services-side { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, auto); gap: clamp(1.25rem, 2.5vw, 2rem); }
.service-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.service-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 1.3rem 1.4rem 1.4rem; }
.service-card h3 { font-size: 1.12rem; color: var(--brand-primary); margin-bottom: 0.35em; }
.service-card p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; }
.service-card__body { display: flex; flex-direction: column; justify-content: center; flex: 1; }
@media (max-width: 900px) {
  .services-layout { grid-template-columns: 1fr; }
  .service-feature { min-height: 420px; }
}
@media (max-width: 767px) {
  .services-side { grid-template-columns: 1fr; }
  .service-feature { min-height: 340px; }
}

/* ============================================================================
   Featured projects rail — photo marquee (ribboned placeholders)
   ==========================================================================*/
.featured-projects-rail { overflow: hidden; margin-top: 0.5rem; }
.featured-projects-rail .rail-item { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0 0.9rem; letter-spacing: normal; text-transform: none; }
.project-tile { display: block; width: clamp(240px, 26vw, 340px); border-radius: var(--radius-inner); overflow: hidden; }
.project-label { display: block; }
/* height:auto is REQUIRED — the <img height> attribute is a presentational hint that
   resolves the height, which cancels aspect-ratio and renders the tile full-height. */
.project-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.project-label { font-family: var(--font-body); font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.rail-note { font-size: 0.85rem; color: var(--ink-soft); opacity: 0.75; margin-top: 1.4rem; }

/* ============================================================================
   CTA band (mirrors the flyer's bottom banner)
   ==========================================================================*/
.cta-band { position: relative; background: var(--gold-tint); color: var(--brand-primary); text-align: center; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(138, 84, 32, 0.035) 0 1px, transparent 1px 120px);
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--brand-primary); max-width: 18ch; margin: 0 auto 0.4em; }
.cta-band .kicker { color: var(--brand-accent); }
.cta-band p { color: var(--ink-soft); font-size: 1.08rem; max-width: 46ch; margin: 0 auto 2rem; }
.cta-band__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--ghost, .utility-hero .btn--ghost { color: var(--brand-primary); border-color: rgba(10, 22, 40, 0.4); }
.cta-band .btn--ghost:hover, .utility-hero .btn--ghost:hover { border-color: var(--brand-primary); }
@media (max-width: 420px) { .cta-band__actions { flex-direction: column; align-items: stretch; } }

/* ============================================================================
   Page hero (sub-pages — navy band, small)
   ==========================================================================*/
.page-hero {
  background: var(--wash);
  color: var(--brand-primary);
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vh, 4.5rem)) 0 clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}
.page-hero__kicker { font-family: var(--font-lockup); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 0.9rem; display: block; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); color: var(--brand-primary); max-width: 20ch; margin: 0 auto 0.35em; }
.page-hero__sub { color: var(--ink-soft); max-width: 50ch; margin: 0 auto; font-size: 1.05rem; }

/* ============================================================================
   Contact page
   ==========================================================================*/
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.5rem); }
.contact-form h2 { font-size: 1.5rem; color: var(--brand-primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; color: var(--brand-primary); margin-bottom: 0.35rem; }
.field input, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--radius-inner);
  background: var(--wash); color: var(--ink);
  font-size: 16px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; border-color: transparent; }
.field textarea { min-height: 130px; resize: vertical; }
.contact-form .btn { width: 100%; margin-top: 0.4rem; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.9rem; margin-bottom: 0; }
.contact-cards { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-card { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.4rem 1.5rem; }
.contact-card__icon { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--brand-accent); border: 1px solid var(--line); }
.contact-card__icon svg { width: 21px; height: 21px; }
.contact-card h3 { font-size: 1.05rem; color: var(--brand-primary); margin-bottom: 0.15em; }
.contact-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.contact-card a { color: var(--brand-primary); font-weight: 500; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================================
   Utility pages (thank-you, 404, legal)
   ==========================================================================*/
.utility-hero { min-height: 60vh; display: flex; align-items: center; text-align: center; background: var(--wash); color: var(--brand-primary); padding: calc(var(--nav-h) + 3rem) 0 3rem; }
.utility-hero .container { display: flex; flex-direction: column; align-items: center; }
.utility-hero h1 { color: var(--brand-primary); font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
.utility-hero p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.8rem; }
.utility-hero .hero__actions { margin-bottom: 0; }
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: 1.35rem; color: var(--brand-primary); margin-top: 2em; }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 0.98rem; }
.legal-note { background: var(--gold-tint); border-radius: var(--radius-inner); padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--brand-primary); }

/* ============================================================================
   Footer
   ==========================================================================*/
.footer { background: var(--wash); border-top: 1px solid var(--line); color: var(--ink-soft); padding: clamp(3rem, 7vh, 4.5rem) 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); margin-bottom: 2.5rem; }
.footer__logo { width: clamp(170px, 18vw, 210px); height: auto; }
.footer__brand strong { display: block; font-family: var(--font-lockup); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.14em; color: #fff; }
.footer__brand strong em { font-style: normal; color: var(--gold-bright); }
.footer__tagline { font-family: var(--font-lockup); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-bright); margin: 0.5rem 0 0; }
.footer__col h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.9em; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.6em; font-size: 0.95rem; }
.footer__col a { color: var(--brand-primary); text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-soft); }
.footer__credit a { color: var(--brand-accent); text-decoration: none; }
.footer__credit a:hover { text-decoration: underline; }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } }

/* ============================================================================
   Cookie banner
   ==========================================================================*/
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 850; /* below .nav (900): the mobile menu overlay lives inside .nav's stacking context and must paint above this banner */
  max-width: 520px; margin: 0 auto;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(30, 20, 11, 0.18);
  padding: 1.1rem 1.25rem;
}
.cookie-banner p { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--ink-soft); }
.cookie-banner a { color: var(--brand-primary); }
.cookie-banner__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.5rem 1.1rem; font-size: 0.88rem; min-height: 44px; }

/* Reveal initial states are set by GSAP; static fallback covered by floor rules. */

/* ============================================================================
   Mobile overrides — MUST stay last in file. The component rules above
   (.nav__links { display:flex }, .nav__actions { display:flex }) are written
   after the mobile floor, so at equal specificity they win on source order.
   Re-assert the mobile strip-down here at the end so it always applies.
   ==========================================================================*/
.nav__brand-text strong { white-space: nowrap; }
@media (max-width: 767px) {
  .nav__links, .nav__actions, .nav__tel, .nav__brand-text span { display: none; }
  .nav__toggle { display: inline-block; margin-left: auto; }
  /* 44px touch hit areas (Apple HIG floor) — links keep their visual size,
     the hit box grows via min-height/min-width or padding+negative margin */
  .nav__brand { min-height: 44px; }
  .footer__col a, .footer__credit a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .footer__col li { margin-bottom: 0; }
  .cookie-banner p a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
  .contact-card a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .contact-card p { margin: 0; }
  .legal-body p a { display: inline-block; padding: 11px 3px; margin: -11px -3px; }
}

/* ============================================================================
   Photo hero (statement-overlay — the niche's locked hero_type)
   ==========================================================================*/
.hero--photo { background: var(--brown-ink); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30,20,11,0.62) 0%, rgba(30,20,11,0.42) 45%, rgba(30,20,11,0.78) 100%),
    radial-gradient(85% 65% at 50% 42%, rgba(30,20,11,0.32) 0%, rgba(30,20,11,0.64) 100%);
}
.hero--photo .hero__inner { position: relative; z-index: 2; }
.hero--photo h1, .hero--photo .hero__sub { text-shadow: 0 2px 22px rgba(30,20,11,0.6); }

/* ============================================================================
   Sub-page hero with photo
   ==========================================================================*/
.page-hero--photo { position: relative; overflow: hidden; background: var(--brown-ink); color: #fff; }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo .page-hero__sub { color: rgba(255, 255, 255, 0.82); }
.page-hero--photo .page-hero__kicker { color: var(--gold-bright); }
.page-hero__media { position: absolute; inset: 0; overflow: hidden; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.page-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,20,11,0.7) 0%, rgba(30,20,11,0.54) 50%, rgba(30,20,11,0.84) 100%);
}
.page-hero--photo .container { position: relative; z-index: 2; }
.page-hero--photo h1, .page-hero--photo .page-hero__sub { text-shadow: 0 2px 18px rgba(30,20,11,0.55); }

/* ============================================================================
   Services page — alternating editorial rows
   ==========================================================================*/
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.svc-row:last-child { margin-bottom: 0; }
.svc-row--reverse .svc-row__media { order: 2; }
.svc-row__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-row__body h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--brand-primary); margin-bottom: 0.35em; }
.svc-row__body p { color: var(--ink-soft); font-size: 1.03rem; margin: 0 0 1rem; }
.svc-row__body p:last-of-type { margin-bottom: 0; }
.svc-row__points { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.svc-row__points li { position: relative; padding-left: 1.6rem; margin-bottom: 0.5em; color: var(--ink-soft); font-size: 0.98rem; }
.svc-row__points li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); }
@media (max-width: 767px) {
  .svc-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .svc-row--reverse .svc-row__media { order: 0; }
}

/* ============================================================================
   Split band (mobile showroom page)
   ==========================================================================*/
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.split__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { color: var(--brand-primary); font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.split__body p { color: var(--ink-soft); font-size: 1.03rem; }
.section--navy .split__body h2 { color: #fff; }
.section--navy .split__body p { color: rgba(255,255,255,0.85); }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ============================================================================
   Portfolio grid — designed slots awaiting the client's own photos
   ==========================================================================*/
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.75rem); }
.portfolio-slot { position: relative; }
.portfolio-slot--wide { grid-column: span 2; grid-row: span 2; }
.portfolio-slot__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  height: 100%; min-height: 190px; aspect-ratio: 4 / 3;
  padding: 1.5rem 1.25rem; text-align: center;
  background: var(--gold-tint);
  border: 1px dashed rgba(138, 84, 32, 0.55);
  border-radius: var(--radius-card);
  color: var(--brand-primary);
}
.portfolio-slot--wide .portfolio-slot__inner { aspect-ratio: auto; }
.portfolio-slot__icon { width: 34px; height: 34px; color: var(--brand-accent); }
.portfolio-slot__icon svg { width: 100%; height: 100%; }
.portfolio-slot__label { font-family: var(--font-lockup); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; }
.portfolio-slot--wide .portfolio-slot__label { font-size: 1.02rem; }
.portfolio-slot__meta { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-accent); margin: 0; }
.portfolio-note { margin-top: clamp(1.75rem, 4vh, 2.75rem); padding: 1.25rem 1.5rem; background: var(--wash); border-left: 3px solid var(--brand-accent); border-radius: var(--radius-inner); }
.portfolio-note p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.portfolio-note strong { color: var(--brand-primary); }
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-slot--wide { grid-column: span 1; grid-row: span 1; }
  .portfolio-slot--wide .portfolio-slot__inner { aspect-ratio: 4 / 3; }
}

/* Teaser card linking to a full page */
.teaser-foot { margin-top: clamp(1.75rem, 4vh, 2.5rem); text-align: center; }

/* ============================================================================
   v3 (2026-10-12): high-end pass. Avara: v2 "looks better" but the sand-filled
   boxes read "tacky and cheap". Modelled on Woven & Woods and Roger Oates:
   square corners, no filled boxes, hairline rules, white page, bigger
   photography (James's own jobs), no moving strips, one refined serif.
   Brand colours unchanged: navy for text and logo, copper for actions,
   sand only in the footer.
   ==========================================================================*/
:root {
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-lockup: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  --radius-card: 0;
  --radius-inner: 0;
  --stone: #F4F2EE;
  --line: rgba(10, 22, 40, 0.12);
}

/* Type */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.005em; }
.kicker, .hero__kicker, .page-hero__kicker {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.section-head h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.08; }
.section-head p { max-width: 52ch; }
.section-head--center { margin-left: 0; margin-right: 0; text-align: left; }
.teaser-foot { text-align: left; }
/* a kicker inside a block whose paragraphs are styled must keep its own size and colour */
main p.kicker { font-size: 0.74rem; color: var(--brand-accent); margin: 0 0 1rem; max-width: none; }
.section { padding: clamp(5rem, 11vh, 8.5rem) 0; }
.section--wash { background: var(--stone); }

/* Buttons: rectangular, small capitals */
.btn {
  border-radius: 0; padding: 1rem 1.7rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.btn svg { width: 15px; height: 15px; }
.btn--ghost-ink { border-color: rgba(10, 22, 40, 0.35); }
.btn--ghost-ink:hover { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--brand-primary); }
.nav__actions .btn { padding: 0.8rem 1.3rem; font-size: 0.74rem; }
.cookie-banner { border-radius: 0; }
.cookie-banner .btn { font-size: 0.72rem; }

/* Header */
.nav__links a { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 1; }
.nav__links a:hover { color: var(--brand-accent); }
@media (max-width: 900px) {
  .nav__menu .nav__menu-cta { border-radius: 0; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.14em; }
}

/* Home hero: text left over the photo, darker on the text side.
   It fills exactly one screen on every device (100svh = the screen's height with the browser bars showing).
   Type and spacing scale with the screen's height as well as its width, so the words, both buttons and the
   ticks always fit inside that screen. It only grows past one screen where nothing readable would fit
   (a phone turned sideways). Checked 2026-10-13 from 375x548 (iPhone SE in Safari) to 2560x1300. */
.hero { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-h) + clamp(1rem, 5.3svh, 3rem)); }
.hero__inner { align-items: flex-start; text-align: left; padding-bottom: clamp(1.25rem, calc(11svh - 2rem), 5.5rem); }
.hero__kicker { margin-bottom: clamp(0.6rem, 1.95svh, 1.1rem); }
.hero h1 { font-size: clamp(2.6rem, min(5.8vw, 9.2svh), 5rem); line-height: 1.02; max-width: 14ch; margin: 0 0 0.35em; }
.hero__sub { font-size: clamp(1rem, min(1.6vw, 2.9svh), 1.22rem); margin: 0 0 clamp(1rem, 3.9svh, 2.2rem); max-width: 44ch; }
.hero__actions { margin-bottom: clamp(0.9rem, 3.9svh, 2.2rem); }
.hero__actions, .hero__meta { justify-content: flex-start; }
.hero__meta li { color: rgba(255, 255, 255, 0.82); }
/* The photo starts under the fixed header and shows from its top edge, so the van's roof is in view rather than
   hidden behind the header (Avara picked this, 2026-10-13). The computer's slight zoom (animations.js sets
   scale 1.06 inline) grows downwards from the top edge, hence !important on the origin. */
.hero__media { top: var(--nav-h); }
.hero__media img { object-position: 50% 0; transform-origin: 50% 0 !important; }
/* James's van (option A, his pick 2026-10-13): the van is white, so the words side is darker than it was */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(30,20,11,0.9) 0%, rgba(30,20,11,0.78) 36%, rgba(30,20,11,0.35) 64%, rgba(30,20,11,0.12) 100%),
    linear-gradient(180deg, rgba(30,20,11,0.2) 0%, rgba(30,20,11,0) 40%, rgba(30,20,11,0.45) 100%);
}
/* Phones: an even wash over the van, and the same height scaling with phone-sized limits.
   Buttons never go below the 44px tap height. */
@media (max-width: 767px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(30,20,11,0.62) 0%, rgba(30,20,11,0.78) 45%, rgba(30,20,11,0.88) 100%); }
  .hero { padding-top: calc(var(--nav-h) + clamp(0.5rem, 2.4svh, 1.25rem)); }
  .hero__inner { padding-bottom: clamp(1rem, 3.6svh, 1.5rem); }
  .hero__kicker { font-size: clamp(0.66rem, 1.75svh, 0.74rem); margin-bottom: clamp(0.5rem, 1.95svh, 0.8rem); }
  .hero h1 { font-size: clamp(2.05rem, min(11.6vw, 6.9svh), 2.9rem); }
  .hero__sub { font-size: clamp(0.95rem, 2.5svh, 1.02rem); line-height: 1.45; margin-bottom: clamp(0.8rem, 3.3svh, 1.4rem); }
  .hero__actions { gap: clamp(8px, 1.6svh, 12px); margin-bottom: clamp(0.75rem, 3.1svh, 1.3rem); }
  .hero__actions .btn { padding-top: clamp(0.6rem, 1.9svh, 0.85rem); padding-bottom: clamp(0.6rem, 1.9svh, 0.85rem); }
  .hero__meta { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
  .hero__meta li { font-size: clamp(0.74rem, 2svh, 0.8rem); gap: 0.35rem; }
}

/* How it works: three columns under a hairline, no boxes */
.steps { gap: clamp(1.5rem, 3vw, 3rem); }
.step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.6rem 0 0; }
.step__num { font-family: var(--font-body); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.step h3 { font-size: 1.65rem; }

/* Four promises: typographic columns divided by hairlines */
.why-grid { gap: 0; }
.why-tile { text-align: left; background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0.3rem 1.6rem; }
.why-tile:first-child { border-left: 0; padding-left: 0; }
.why-tile__icon { width: auto; height: auto; margin: 0 0 1.2rem; justify-content: flex-start; background: none; border-radius: 0; }
.why-tile__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.why-tile h3 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.16em; }
@media (max-width: 1024px) {
  .why-grid { gap: 2rem 0; }
  .why-tile:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .why-tile, .why-tile:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
  .why-tile:first-child { border-top: 0; padding-top: 0; }
}

/* What we fit: photo then text, no card */
.service-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.service-card__media { aspect-ratio: 4 / 5; }
.service-card__body { padding: 1.3rem 0 0; justify-content: flex-start; }
.service-card h3 { font-size: 1.7rem; }

/* Rooms we fit and recent work: still photographs with captions */
.rooms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.work-item { margin: 0; }
.work-item img { width: 100%; height: auto; object-fit: cover; }
.rooms-grid .work-item img { aspect-ratio: 3 / 4; }
.work-grid .work-item img { aspect-ratio: 4 / 5; }
.work-item figcaption { margin-top: 0.85rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
/* portfolio: James's upright photos four to a row, then the wide ones two to a row (built by
   clients/Smith-and-Co/tools/recent_work.py, 2026-10-15) */
.work-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); }
.work-wall .work-item { grid-column: span 3; }
.work-wall .work-item img { aspect-ratio: 4 / 5; }
.work-wall .work-item--wide { grid-column: span 6; }
.work-wall .work-item--wide img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .work-wall .work-item { grid-column: span 6; }
  .work-wall .work-item--wide { grid-column: span 12; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-wall { grid-template-columns: 1fr; }
  .work-wall .work-item, .work-wall .work-item:nth-child(n+4) { grid-column: auto; }
}

/* Get a quote: text only, centred, on white under a hairline (Avara 2026-10-12: no photo needed here) */
.cta-split { border-top: 1px solid var(--line); text-align: center; }
.cta-split__inner { max-width: 760px; margin: 0 auto; }
.cta-split__body h2 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); color: var(--brand-primary); margin-bottom: 0.3em; }
.cta-split__body p { color: var(--ink-soft); font-size: 1.06rem; margin: 0 auto 2rem; max-width: 46ch; }
.cta-split .cta-band__actions { justify-content: center; }

/* Page tops: plain pages white with a hairline, photo pages keep the warm tint; all left aligned */
.page-hero { background: #fff; border-bottom: 1px solid var(--line); text-align: left; }
.page-hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.9rem); line-height: 1.05; margin: 0 0 0.35em; max-width: 18ch; }
.page-hero__sub { margin: 0; }
.page-hero--photo { border-bottom: 0; padding-top: calc(var(--nav-h) + clamp(4rem, 12vh, 7.5rem)); }
.utility-hero { background: #fff; }

/* Services and showroom rows */
.svc-row__body h2, .split__body h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.svc-row__media, .split__media { aspect-ratio: 4 / 5; }
.svc-row__points li::before { border-radius: 0; width: 10px; height: 1px; top: 0.8em; }

/* Contact: white fields and a plain list instead of filled cards */
.contact-form { border: 0; padding: 0; background: none; }
.contact-form h2 { font-size: 2rem; }
.field input, .field textarea { background: #fff; border: 1px solid rgba(10, 22, 40, 0.22); border-radius: 0; }
.field input:focus, .field textarea:focus { outline: 1px solid var(--brand-accent); border-color: var(--brand-accent); }
.contact-cards { gap: 0; }
.contact-card { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.5rem 0; }
.contact-card:last-child { border-bottom: 1px solid var(--line); }
.contact-card__icon { width: auto; height: auto; background: none; border: 0; border-radius: 0; padding-top: 0.2rem; }
.contact-card h3 { font-size: 1.45rem; }
.legal-note { background: var(--stone); }
/* the home "What we fit" grid sets three columns inline, which beat the phone rule and squeezed the cards */
@media (max-width: 767px) { .services-side { grid-template-columns: 1fr !important; } }

/* v3 round 2 (2026-10-12, Avara): the moving "Rooms we fit" strip is back, with square corners and v3 captions */
.featured-projects-rail { margin-top: 0; }
.featured-projects-rail .rail-item { gap: 0.85rem; padding: 0 0.85rem; }
.project-label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-soft); }
/* phones: a tap must never stop a moving strip (Avara, 2026-10-07) */
@media (hover: none), (max-width: 767px) {
  .rail--scroll-velocity .rail-track,
  .rail--scroll-velocity .rail-track:hover { animation-play-state: running !important; }
}

/* Contact top (option C, Avara 2026-10-12): no photo, heading on white with James's number set large beside it */
.call-top { padding: calc(var(--nav-h) + clamp(3.5rem, 9vh, 5.5rem)) 0 clamp(3rem, 8vh, 5rem); border-bottom: 1px solid var(--line); }
.call-top .container { display: block; }
.call-top .kicker { display: block; margin-bottom: 1rem; }
.call-top h1 { font-size: clamp(2.5rem, 4.6vw, 3.8rem); line-height: 1.05; color: var(--brand-primary); margin: 0 0 0.35em; max-width: 18ch; }
.call-top p { color: var(--ink-soft); margin: 0; max-width: 46ch; font-size: 1.05rem; }
.call-top__phone { border-left: 1px solid var(--line); padding-left: 2rem; }
.call-top__phone span { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 0.6rem; }
.call-top__phone a { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--brand-primary); text-decoration: none; white-space: nowrap; }
.call-top__phone a:hover { color: var(--brand-accent); }
@media (max-width: 767px) {
  .call-top .container { grid-template-columns: 1fr; gap: 1.5rem; }
  .call-top__phone { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.2rem; }
}

/* Contact: 'Call James' starts level with 'Request a quote' (Avara 2026-10-12); the number is no longer repeated in the top */
.contact-card:first-child { border-top: 0; padding-top: 0; }
.contact-form h2 { margin-top: 0; }

/* Current page in the menus (Avara 2026-10-12): copper with a fine underline, desktop links and the phone menu */
.nav__links a[aria-current="page"] { color: var(--brand-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.75em; }
.nav__menu a[aria-current="page"] { color: var(--brand-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* Instagram in the footer as the icon only, linked (Avara 2026-10-12) */
.footer__social a { display: inline-flex; align-items: center; color: var(--brand-primary); }
.footer__social a:hover { color: var(--brand-accent); }

/* Home top photo sits in a <picture> (phones load a centre crop, 2026-10-12); let it fill the box like the bare img did */
.hero__media picture { display: block; width: 100%; height: 100%; }
.footer__social { display: flex; gap: 1.1rem; }

/* Contact (Avara 2026-10-12): the right column starts AND ends level with the form. The column stretches to the
   form's height and the four entries share it evenly, so the last line sits level with the bottom of the form. */
@media (min-width: 901px) {
  .contact-layout { align-items: stretch; }
  .contact-cards { height: 100%; }
  .contact-card { flex: 1 1 0; padding: 1.15rem 0; }
  .contact-card:first-child { padding-top: 0; }
}
/* Tablets held upright (768 to 900 wide) use the phone menu too: the full menu row left no room for the
   logo, which was squashed to 28px wide at 768 (Avara 2026-10-13). The menu rules above now run to 900px;
   this re-asserts the strip-down after the header's own display rules, which come later in the file. */
@media (max-width: 900px) {
  .nav__links, .nav__actions, .nav__tel, .nav__brand-text span { display: none; }
  .nav__toggle { display: inline-block; margin-left: auto; }
}

/* Phone check 2026-10-13: 'How the mobile showroom works' ran 10px off a 360-wide phone (nowrap label wider than the
   column). Phones: narrower side padding, and the label may wrap rather than leave the screen. */
@media (max-width: 767px) {
  .teaser-foot .btn { padding-left: 1rem; padding-right: 1rem; max-width: 100%; white-space: normal; text-align: center; }
}
/* Privacy and terms now open on a heading (the mockup note above it was removed), so its top margin stacked on the
   section's own padding and left a big gap under the page title. */
.legal-body > h2:first-child { margin-top: 0; }
/* What we fit sections are linked to by id (the home Stair Runners section's 'See stair runners' button goes to
   #stair-runners): land below the fixed header rather than under it. */
.svc-row[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

/* Home: Stair Runners section, after How it works (James, 14 Oct 2026: 'I specialise in stair runner work, if you
   could make a point of that on main page'; Avara picked the framed pair layout and its place, 15 Oct). */
.home-runners { scroll-margin-top: var(--nav-h); }
.home-runners__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 7vw, 6.5rem); align-items: center; }
.home-runners__media { position: relative; padding: 0 22% 16% 0; }
.home-runners__media figure { margin: 0; overflow: hidden; }
.home-runners__media img { width: 100%; height: 100%; object-fit: cover; }
.home-runners__main { width: 100%; aspect-ratio: 4 / 5; }
.home-runners__inset { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4; outline: 10px solid #fff; }
.home-runners h2 { color: var(--brand-primary); font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.08; margin-bottom: 0.45em; }
.home-runners__lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; margin: 0 0 0.4rem; }
.home-runners .svc-row__points { margin-bottom: 2rem; }
@media (max-width: 767px) {
  .home-runners__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-runners__media { padding: 0 18% 18% 0; }
  .home-runners__inset { width: 48%; outline-width: 6px; }
}

/* Binding colours: What we fit Stair Runners section and home palette (James's own samples, Avara 20 Oct 2026) */
/* binding colours card in the What we fit Stair Runners row */
#stair-runners .svc-row__media { aspect-ratio: auto; overflow: visible; }
.bind-card { background: var(--stone); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.bind-card__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.1; color: var(--brand-primary); margin: 0 0 1rem; }
main .bind-card__group { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 0.65rem; max-width: none; }
.bind-card__grid + .bind-card__group { margin-top: 1.1rem; }
.bind-card__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem 0.6rem; }
.bind-card__grid li { margin: 0; padding: 0; max-width: none; }
.svc-row__media .bind-card__grid img { width: 100%; height: auto; aspect-ratio: 82 / 50; object-fit: fill; filter: drop-shadow(0 1px 2px rgba(20, 14, 8, .14)); }
.bind-card__grid span { display: block; margin-top: 0.32rem; font-size: 0.7rem; line-height: 1.25; letter-spacing: 0.02em; color: var(--ink); }
.bind-card__grid b { font-weight: 400; color: var(--ink-soft); }
@media (max-width: 767px) {
  .bind-card__grid { gap: 0.7rem 0.45rem; }
  .bind-card__grid span { font-size: 0.64rem; }
  .bind-card__grid b { display: block; }
}
/* home: unlabelled palette as the smaller overlapping picture */
/* the card takes its height from its swatches (no fixed shape, no stretching rows), so every browser draws it the same:
   an earlier version that filled a fixed 3:4 box showed a gap and cut-off rows on James's phone (21 Oct) */
.home-runners__inset { aspect-ratio: auto; }
.home-runners__inset .bind-mini { display: block; background: var(--stone); padding: 1.1rem 1rem 1.15rem; }
.bind-mini__title { display: block; font-family: var(--font-display); font-size: clamp(0.85rem, 1.25vw, 1.1rem); line-height: 1; color: var(--brand-primary); margin: 0 0 0.75rem; }
.bind-mini__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.home-runners__media .bind-mini img { display: block; width: 100%; height: auto; aspect-ratio: 80 / 92; filter: drop-shadow(0 1px 1.5px rgba(20, 14, 8, .14)); }

.srx .srx-photo { margin: 0; }
.srx .srx-photo img { width: 100%; height: auto; aspect-ratio: 946 / 1262; display: block; }
.srx figcaption { font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-soft); margin: 0.7rem 0 0; }
.srx h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--brand-primary); margin: 0 0 0.45em; line-height: 1.08; }
.srx .srx-lede { color: var(--ink-soft); font-size: 1.05rem; margin: 0; max-width: 46ch; }
.srx .svc-row__points { margin: 1rem 0 0; }
.srx5 { background: var(--stone); margin: 0 calc(50% - 50vw) clamp(3rem, 7vh, 5rem); padding: clamp(3rem, 7vh, 5rem) 0; }
.srx5__inner { max-width: 1064px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); box-sizing: content-box; display: grid;
  grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.srx5__text { margin-bottom: 1.8rem; }
.srx5 .bind-card { background: #fff; }
@media (max-width: 767px) {
  .srx5__inner { grid-template-columns: 1fr; }
  .srx5__inner > .srx-photo { order: 2; }
}


/* smaller card: narrower, labels as code over name like the sample book */
.srx5 .svc-row__media { max-width: 450px; }
.srx5 .bind-card { padding: 1.4rem 1.5rem 1.5rem; }
.srx5 .bind-card__title { font-size: 1.35rem; margin-bottom: 0.8rem; }
.srx5 .bind-card__grid { gap: 0.7rem 0.5rem; }
.srx5 .bind-card__grid span { font-size: 0.68rem; margin-top: 0.28rem; }
.srx5 .bind-card__grid b { display: block; }
@media (max-width: 767px) {
  .srx5 .bind-card { padding: 1.1rem 1rem 1.2rem; }
  .srx5 .bind-card__grid { gap: 0.65rem 0.4rem; }
  .srx5 .bind-card__grid span { font-size: 0.62rem; letter-spacing: 0; }
}
/* the photo stays in view beside the card while the right column scrolls, and its bottom (not its caption's) lines
   up with the card's bottom: the caption hangs below the photo, outside the box that is lined up (Avara, 20 Oct) */
@media (min-width: 768px) {
  .srx5 .srx5__inner > .srx-photo { position: relative; align-self: end; }
  .srx5 .srx5__inner > .srx-photo figcaption { position: absolute; top: 100%; left: 0; right: 0; }
}
@media (min-width: 768px) and (min-height: 700px) {
  .srx5 .srx5__inner > .srx-photo { position: sticky; top: calc(var(--nav-h) + 1.75rem); align-self: start; }
}


section[aria-label="Services"] { background: var(--stone); }
.srx5 { background: transparent; padding-top: 0; }