/* ==========================================================================
   Stone & Willow Landscaping
   Design system + site styles.

   Brief: "simple, heritage". Rich dark colours, refined elegance implying a
   long-established brand, modern simplicity. No plant/nature gimmick icons.
   Fine rules and inset borders are used deliberately as the decorative
   language, because they also steer the eye down the page.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* Rich, blue-cast darks. Deliberately not pure black: pure black on a screen
     reads cheap and crushes the photography. */
  --ink-900: #080D11;
  --ink-850: #0B1218;
  --ink-800: #0E161C;
  --ink-700: #121D25;
  --ink-600: #17242D;
  --ink-500: #1E2E38;

  --bone: #EDE7DB;
  --bone-70: rgba(237, 231, 219, 0.70);
  --bone-50: rgba(237, 231, 219, 0.50);
  --bone-30: rgba(237, 231, 219, 0.30);

  --brass: #B7975C;
  --brass-soft: #C9AE79;
  --sage: #9DB396;

  --line: rgba(237, 231, 219, 0.14);
  --line-strong: rgba(237, 231, 219, 0.26);
  --brass-line: rgba(183, 151, 92, 0.42);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1220px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(76px, 9vw, 132px);

  --nav-h: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-800);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Scroll-jump targets must clear the fixed header. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--banner-h, 0px) + 18px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

::selection { background: var(--brass); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--brass-soft);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--bone); color: var(--ink-900);
  padding: 10px 18px; border-radius: 2px; font-size: 14px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0;
}
h1 { font-size: clamp(2.9rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-line), transparent);
  max-width: 120px;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 1; height: 1px; max-width: 120px;
  background: linear-gradient(270deg, var(--brass-line), transparent);
}

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: var(--bone-70);
  line-height: 1.72;
  max-width: 62ch;
}
.muted { color: var(--bone-50); }
.small { font-size: 0.86rem; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); position: relative; }

/* Alternating section grounds, per the brief's request that each block be
   distinguishable as you scroll. */
.section--deep  { background: var(--ink-900); }
.section--raise { background: var(--ink-700); }
.section--mid   { background: var(--ink-850); }

.section-head { max-width: 700px; margin-bottom: clamp(44px, 5vw, 68px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 22px; }

/* A hairline rule used as the connective decorative motif. */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-size: 0.83rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brass);
  color: var(--ink-900);
  border-color: var(--brass);
  font-weight: 600;
}
.btn--primary:hover { background: var(--brass-soft); border-color: var(--brass-soft); }

.btn--ghost { border-color: var(--line-strong); color: var(--bone); background: transparent; }
.btn--ghost:hover { border-color: var(--bone); background: rgba(237, 231, 219, 0.06); }

.btn--wide { width: 100%; }

/* Text link with an underline that draws in on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  font-size: 0.79rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.4s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow span[aria-hidden] { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover span[aria-hidden] { transform: translateX(4px); }

/* ==========================================================================
   header
   ========================================================================== */
.site-header {
  position: fixed; inset: var(--banner-h, 0px) 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              height 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(11, 18, 24, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* Clicking the logo returns to the top of the page (per brief). */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); flex-shrink: 0; }
.brand img, .brand svg {
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__wordmark { height: 26px; width: auto; }
/* 30/34. Scaled rather than resized, so the sticky header does not reflow
   its contents on every scroll toggle. */
.site-header.is-stuck .brand img, .site-header.is-stuck .brand svg { transform: scale(0.8824); }

.nav { display: flex; align-items: center; gap: clamp(18px, 1.9vw, 30px); }
.nav a {
  text-decoration: none;
  font-size: 0.76rem; font-weight: 450;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--bone-70);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--bone); }
.nav a.is-active::after, .nav a:hover::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone {
  text-decoration: none; font-size: 0.85rem; letter-spacing: 0.04em;
  color: var(--bone-70); transition: color 0.3s var(--ease); white-space: nowrap;
}
.header-phone:hover { color: var(--bone); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; color: var(--bone);
}
.nav-toggle span {
  display: block; height: 1px; background: currentColor; margin: 6px 0;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) { .header-phone { display: none; } }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8, 13, 17, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 28px;
    transform: translateY(-12px);
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    max-height: calc(100dvh - var(--nav-h) - var(--banner-h, 0px)); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 22px; }
}
@media (min-width: 1001px) { .nav .btn { display: none; } }

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--banner-h, 0px) + 40px);
  padding-bottom: clamp(36px, 5vw, 64px);
  overflow: hidden;
  background: var(--ink-900);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two stacked scrims: a vertical one so the headline sits on near-solid ground,
   and a soft vignette so the photo does not fight the type at the edges. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,13,17,0.80) 0%, rgba(8,13,17,0.34) 32%, rgba(8,13,17,0.88) 82%, var(--ink-900) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(8,13,17,0.55) 100%);
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero__inner { max-width: 900px; }
/* Logo lockup with the founding year, 2026-09-24. Sam asked for the logo near
   the top of the page and a more visible "Est. 2026", without the location. */
.hero__brand {
  display: flex; align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0 0 clamp(22px, 3vw, 32px);
}
.hero__brand img { width: clamp(76px, 9vw, 108px); height: auto; flex: none; }
.hero__est {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem); font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-soft);
}
.hero__est::before { content: ""; width: 34px; height: 1px; background: var(--brass-line); }
.hero h1 { margin-bottom: 26px; }
.hero h1 em {
  font-style: italic;
  color: var(--brass-soft);
}
.hero .lede { font-size: clamp(1.1rem, 1.7vw, 1.32rem); color: rgba(237,231,219,0.82); max-width: 56ch; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 38px;
}

/* Reassurance directly under the CTA, where hesitation actually happens. */
.hero__reassure {
  margin-top: 20px; font-size: 0.86rem; color: var(--bone-50);
  display: flex; align-items: center; gap: 9px;
}

.hero__trust {
  margin-top: clamp(40px, 6vw, 70px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 54px);
}
.hero__trust div { min-width: 130px; }
.hero__trust dt {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 7px;
}
.hero__trust dd { margin: 0; font-family: var(--font-display); font-size: 1.32rem; line-height: 1.25; }

/* ==========================================================================
   scroll-spy rail (brief: "scrollable sidebar to move between sections")
   ========================================================================== */
.railnav {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 70;
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.railnav.is-visible { opacity: 1; pointer-events: auto; }
.railnav a {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  text-decoration: none; padding: 6px 0;
  color: var(--bone-50);
}
.railnav__label {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transform: translateX(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
}
.railnav a:hover .railnav__label,
.railnav a.is-active .railnav__label { opacity: 1; transform: none; }
.railnav__tick {
  width: 22px; height: 1px; background: currentColor; flex-shrink: 0;
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out), background 0.35s var(--ease);
}
/* 32/22, as a scale so the flex row is not relaid out on hover. */
.railnav a:hover .railnav__tick { transform: scaleX(1.4545); }
.railnav a.is-active { color: var(--brass); }
.railnav a.is-active .railnav__tick { width: 40px; background: var(--brass); }
@media (max-width: 1240px) { .railnav { display: none; } }

/* ==========================================================================
   trust strip
   ========================================================================== */
.trustbar { background: var(--ink-700); border-block: 1px solid var(--line); }
.trustbar .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trustbar__cell {
  padding: clamp(26px, 3.4vw, 40px) clamp(16px, 2.4vw, 30px);
  text-align: center;
  border-left: 1px solid var(--line);
}
.trustbar__cell:first-child { border-left: 0; }
@media (max-width: 720px) {
  .trustbar__cell:nth-child(odd) { border-left: 0; }
  .trustbar__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.trustbar__cell strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin-bottom: 8px;
}
.trustbar__cell span {
  font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-50);
}
@media (max-width: 720px) { .trustbar .wrap { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   services
   ========================================================================== */
.services {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px)  { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1140px) { .services { grid-template-columns: repeat(4, 1fr); } }
.service {
  background: var(--ink-800);
  padding: 0 0 clamp(28px, 3vw, 38px);
  display: flex; flex-direction: column;
  transition: background 0.45s var(--ease);
  position: relative;
}

/* Full garden transformation is the offer the other seven feed into, so it
   takes the whole first row with the only photograph in the group. The rest
   are text only, which suits the fine-line look and avoids seven more stock
   photos standing in for work that is not photographed yet. */
.service--feature { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .service--feature {
    display: grid; grid-template-columns: 1.05fr 1fr;
    align-items: stretch; padding-bottom: 0;
  }
  .service--feature .service__media { aspect-ratio: auto; height: 100%; }
  .service--feature .service__body {
    padding: clamp(34px, 3.4vw, 52px);
    justify-content: center;
  }
}
@media (min-width: 860px) {
  .service--flip { grid-template-columns: 1fr 1.05fr; }
  .service--flip .service__media { order: 2; }
}
/* Full garden transformation closes the list (Sam, 2026-09-24): a full-row
   text card that points back at the services above it. */
.service--wide { grid-column: 1 / -1; }
.service--wide .service__body { padding: clamp(30px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px) 0; max-width: 880px; }
.service--feature h3, .service--wide h3 { font-size: clamp(1.7rem, 2.3vw, 2.3rem); }
.service--wide .eyebrow { margin-bottom: 12px; }
.service--feature .eyebrow { margin-bottom: 12px; }

.service--compact .service__body { padding-bottom: 4px; }
.service--compact h3 { font-size: 1.15rem; }

.service--cta { background: var(--ink-700); }
.service--cta h3 { font-size: 1.15rem; color: var(--brass); }
.service:hover { background: var(--ink-700); }
.service__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.service__media picture { display: block; width: 100%; height: 100%; }
.service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease);
  filter: saturate(0.82) brightness(0.82);
}
.service:hover .service__media img { transform: scale(1.05); filter: saturate(0.95) brightness(0.95); }
.service__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14,22,28,0.72) 100%);
}
.service__body { padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px) 0; flex: 1; display: flex; flex-direction: column; }
.service h3 { margin-bottom: 14px; }
.service p { color: var(--bone-70); font-size: 0.95rem; }
.service__list {
  list-style: none; padding: 0; margin: 18px 0 24px;
  font-size: 0.88rem; color: var(--bone-50);
}
.service__list li { padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid var(--line); }
.service__list li:last-child { border-bottom: 0; }
.service__list li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px; background: var(--brass);
}
.service .link-arrow { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   before / after
   ========================================================================== */
.work-grid { display: grid; gap: clamp(30px, 4vw, 52px); align-items: stretch; }
@media (min-width: 900px) { .work-grid { grid-template-columns: 1fr 1fr; } }

.ba {
  border: 1px solid var(--line);
  background: var(--ink-900);
  display: flex;
  flex-direction: column;
}
.ba figcaption { display: flex; flex: 1; flex-direction: column; }
.ba__frame {
  position: relative; overflow: hidden;
  /* Portrait, not 3:2. Every real project photo is a phone shot at 3:4, and a
     3:2 cover-crop of one throws away half its height. 3:4 shows the whole
     frame. The one landscape pair opts out with .ba--wide below. */
  aspect-ratio: 3 / 4;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
}
/* The bike garden was shot landscape on both sides, so it keeps a wide frame. */
.ba--wide .ba__frame { aspect-ratio: 4 / 3; }

.ba__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
/* The "after" layer is revealed by an inset clip driven from JS, which animates
   on its own while the card is in view and takes over from the pointer on drag. */
.ba__after {
  clip-path: inset(0 0 0 var(--pos, 50%));
  will-change: clip-path;
}
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 1px; background: var(--bone);
  pointer-events: none;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.55);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--bone);
  background: rgba(11, 18, 24, 0.55);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  color: var(--bone);
}
.ba__grip svg { width: 20px; height: 20px; }
.ba__tag {
  position: absolute; bottom: 14px;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(8, 13, 17, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; color: var(--brass); border-color: var(--brass-line); }

.ba__meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 22px clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.ba__meta h3 { font-size: 1.32rem; }
.ba__meta span { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-50); white-space: nowrap; }
.ba__scope { flex: 1; padding: 0 clamp(18px, 2.2vw, 26px) 24px; color: var(--bone-50); font-size: 0.88rem; margin: 0; }

.ba__hint {
  text-align: center; font-size: 0.8rem; color: var(--bone-50);
  margin-top: 30px;
}

/* ==========================================================================
   process
   ========================================================================== */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--ink-850); padding: clamp(30px, 3.2vw, 42px); }
.step__n {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--brass); opacity: 0.55; margin-bottom: 18px;
}
.step h3 { font-size: 1.28rem; margin-bottom: 12px; }
.step p { color: var(--bone-50); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   about teaser
   ========================================================================== */
.about-split { display: grid; gap: clamp(34px, 5vw, 70px); align-items: center; }
@media (min-width: 900px) { .about-split { grid-template-columns: 0.85fr 1fr; } }
.about-split__media { position: relative; }
.about-split__media picture { display: block; }
.about-split__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* Inset hairline over the image: the "borders and lining" detail the brief asks
   for, doing real work by framing the subject. */
.about-split__media::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(237, 231, 219, 0.28);
  pointer-events: none;
}
.values { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.values li { background: var(--ink-800); padding: 18px 0 18px 22px; position: relative; }
.values li strong { font-family: var(--font-display); font-size: 1.16rem; font-weight: 400; display: block; margin-bottom: 3px; }
.values li span { color: var(--bone-50); font-size: 0.9rem; }
.values li::before { content: ""; position: absolute; left: 0; top: 26px; width: 10px; height: 1px; background: var(--brass); }

/* the partner acknowledgment the brief asks for */
.partner {
  margin-top: 40px; padding: 26px;
  border: 1px solid var(--line);
  background: var(--ink-900);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.partner img { width: 148px; flex-shrink: 0; }
.partner p { margin: 0; font-size: 0.9rem; color: var(--bone-50); flex: 1; min-width: 220px; }
/* Trusted partners section, 2026-09-24. One panel today; the Evolution Gardens
   panel waits in a PARTNER-PENDING comment in index.html. */
.partners { display: grid; gap: 24px; max-width: 880px; margin: 0 auto; }
.partners .partner { margin-top: 0; }
@media (max-width: 480px) { .partner { padding: 22px; } .partner p { min-width: 0; } }

/* ==========================================================================
   testimonials
   ========================================================================== */
.quotes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { background: var(--ink-800); padding: clamp(30px, 3.2vw, 42px); display: flex; flex-direction: column; }
.quote__stars { color: var(--brass); letter-spacing: 0.24em; font-size: 0.82rem; margin-bottom: 20px; }
.quote blockquote {
  margin: 0 0 24px; font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.6vw, 1.38rem); line-height: 1.5; color: var(--bone);
}
.quote figcaption { margin-top: auto; font-size: 0.82rem; color: var(--bone-50); }
.quote figcaption strong { color: var(--bone-70); font-weight: 500; display: block; }

/* ==========================================================================
   faq
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 26px 44px 26px 0; position: relative;
  font-family: var(--font-display); font-size: clamp(1.16rem, 1.8vw, 1.4rem);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-soft); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { padding: 0 60px 28px 0; color: var(--bone-70); }
.faq__body p { font-size: 0.96rem; }

/* ==========================================================================
   quote form
   ========================================================================== */
.quote-section { position: relative; overflow: hidden; background: var(--ink-900); }
.quote-section__media { position: absolute; inset: 0; z-index: 0; }
.quote-section__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.30; }
.quote-section__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink-900) 0%, rgba(8,13,17,0.86) 40%, var(--ink-900) 100%);
}
.quote-section .wrap { position: relative; z-index: 1; }

.quote-layout { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 940px) { .quote-layout { grid-template-columns: 0.82fr 1fr; } }

.quote-aside dl { margin: 30px 0 0; }
.quote-aside dt {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass); margin-top: 24px; margin-bottom: 6px;
}
.quote-aside dd { margin: 0; }
.quote-aside dd a { text-decoration: none; }
.quote-aside dd a:hover { color: var(--brass-soft); }

.form {
  background: rgba(18, 29, 37, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: clamp(26px, 3.2vw, 42px);
}
.form__grid { display: grid; gap: 20px; }
@media (min-width: 620px) { .form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-70); }
.field label .req { color: var(--brass); }
.field input, .field select, .field textarea {
  background: rgba(8, 13, 17, 0.55);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 13px 15px;
  font-size: 0.97rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brass); background: rgba(8, 13, 17, 0.78); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(237,231,219,0.30); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone-50) 50%), linear-gradient(135deg, var(--bone-50) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field select option { background: var(--ink-700); color: var(--bone); }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #C9705E; }
.field__err { font-size: 0.78rem; color: #E29383; display: none; }
.field--invalid .field__err { display: block; }

/* honeypot: hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.83rem; color: var(--bone-50); }
.form__consent input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brass); }
.form__note { font-size: 0.8rem; color: var(--bone-50); text-align: center; margin: 0; }
.form__status { padding: 14px; border: 1px solid var(--brass-line); background: rgba(183,151,92,0.10); font-size: 0.9rem; display: none; }
.form__status.is-shown { display: block; }
.form__status.is-error { border-color: #C9705E; background: rgba(201,112,94,0.12); }

/* ==========================================================================
   nudge (brief: "small non-aggressive prompt")
   ========================================================================== */
.nudge {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  width: min(360px, calc(100vw - 32px));
  background: rgba(18, 29, 37, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  padding: 24px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(20px); opacity: 0;
  pointer-events: none; visibility: hidden;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
}
.nudge.is-shown { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.nudge h4 { font-family: var(--font-display); font-size: 1.34rem; font-weight: 400; margin: 0 0 8px; }
.nudge p { font-size: 0.88rem; color: var(--bone-50); margin: 0 0 18px; }
.nudge__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nudge__actions .btn { padding: 11px 18px; font-size: 0.74rem; flex: 1; }
.nudge__close {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; background: none; border: 0;
  color: var(--bone-50); cursor: pointer; font-size: 19px; line-height: 1;
  transition: color 0.3s var(--ease);
}
.nudge__close:hover { color: var(--bone); }
@media (max-width: 620px) { .nudge { right: 12px; left: 12px; bottom: calc(var(--mobilebar-h, 64px) + 12px); width: auto; } }

/* Persistent mobile action bar: on a phone the CTA must never be more than a
   thumb away, which is most of what lifts mobile enquiry rates. */
.mobilebar {
  position: fixed; inset: auto 0 0 0; z-index: 92;
  display: none;
  background: rgba(11, 18, 24, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 9px;
}
.mobilebar .btn { flex: 1; padding: 13px 8px; font-size: 0.72rem; letter-spacing: 0.1em; }
@media (max-width: 780px) { .mobilebar { display: flex; } body { padding-bottom: 68px; } }

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer { background: var(--ink-900); border-top: 1px solid var(--line); padding-top: clamp(56px, 6vw, 84px); }
.footer-grid { display: grid; gap: clamp(32px, 4vw, 52px); }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer-grid h4 {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 20px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 11px; font-size: 0.92rem; color: var(--bone-70); line-height: 1.5; }
.footer-grid a { text-decoration: none; color: var(--bone-70); font-size: 0.92rem; transition: color 0.3s var(--ease); }
.footer-grid a:hover { color: var(--brass-soft); }
.footer-brand img, .footer-brand svg { height: 120px; width: auto; margin-bottom: 22px; }
.footer-brand p { font-size: 0.9rem; color: var(--bone-50); max-width: 34ch; }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--bone-70);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.socials a:hover { border-color: var(--brass); color: var(--brass); background: rgba(183,151,92,0.08); }
.socials svg { width: 17px; height: 17px; }
.socials a[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.badges img { width: 152px; border: 1px solid var(--line); }

.footer-legal {
  margin-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--line);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  justify-content: space-between; align-items: center;
  font-size: 0.79rem; color: var(--bone-50);
}
.footer-legal a { text-decoration: none; color: var(--bone-50); }
.footer-legal a:hover { color: var(--bone-70); }
.footer-legal__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ==========================================================================
   scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   interior pages
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--nav-h) + var(--banner-h, 0px) + clamp(70px, 9vw, 120px));
  padding-bottom: clamp(50px, 6vw, 80px);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); margin-bottom: 22px; }

.prose { max-width: 68ch; }
.prose h2 { margin: 52px 0 18px; }
.prose h3 { margin: 36px 0 12px; }
.prose ul { padding-left: 20px; color: var(--bone-70); }
.prose li { margin-bottom: 9px; }
.prose a { color: var(--brass-soft); }
/* Styled bullets for prose lists, matching the service lists: brass hairline
   markers and fine rules. Added 2026-09-24 for the About page. */
.prose ul.ticklist {
  list-style: none; padding: 0; margin: 4px 0 26px;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) { .prose ul.ticklist { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.prose ul.ticklist li {
  margin: 0; padding: 11px 0 11px 22px; position: relative;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.16rem; color: var(--bone);
}
.prose ul.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 1px; background: var(--brass);
}
.about-page-photo { display: block; margin-bottom: 12px; }
.about-page-photo img { width: 100%; height: auto; border: 1px solid var(--line); }
/* .prose a is more specific than .btn--primary, so it was repainting the
   button's label brass-on-brass (1.29:1, effectively unreadable). Buttons are
   not prose links, so the link colour is held back off them and the button's
   own ink-on-brass returns (7.06:1). Scoped to .prose so no other button on
   the site moves. */
.prose a.btn--primary { color: var(--ink-900); }

/* Same bug, second place, and worse. .nav a sets --bone-70 and outspecifies
   .btn--primary too, so the "Free quote" button inside the mobile nav drawer
   computed bone-on-brass at 1.80:1. It is hidden above 1000px, which is why it
   went unnoticed, but it affects every page for anyone opening the menu on a
   phone, which is most of this site's traffic. Same remedy, same result. */
.nav a.btn--primary { color: var(--ink-900); }

.callout {
  border: 1px solid var(--brass-line);
  background: rgba(183, 151, 92, 0.07);
  padding: 24px 26px;
  margin: 32px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--brass-soft); }

/* ============================================================ quote form v2
   Three steps rather than one long column. Sam wants eight questions, which
   is a lot to face at once, so step 1 asks only for name, postcode and a way
   to reply. If someone abandons after that, the enquiry is still worth having.
   ========================================================================= */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form__span { grid-column: 1 / -1; }
.field__hint { color: var(--bone-50); font-size: 0.85rem; margin-top: -4px; }
.field .label {
  display: block; font-size: 0.8rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bone-70); margin-bottom: 12px;
}

.form__head { margin-bottom: clamp(22px, 2.4vw, 30px); }
.form__promise {
  font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  color: var(--bone); margin-bottom: 16px;
}
.fsteps {
  display: flex; gap: 18px; list-style: none; margin: 0 0 10px; padding: 0;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-50); flex-wrap: wrap;
}
.fsteps__item { transition: color 0.3s var(--ease); }
.fsteps__item.is-current { color: var(--brass); }
.fsteps__item.is-done { color: var(--bone-70); }
.fsteps__bar { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.fsteps__bar span {
  position: absolute; inset: 0 0 0 0; width: 100%;
  transform: scaleX(0.3333); transform-origin: left center;
  background: var(--brass); transition: transform 0.45s var(--ease);
}

/* Steps are removed from the flow entirely, not just hidden, so a collapsed
   step cannot be tabbed into by keyboard. */
.fstep { border: 0; padding: 0; margin: 0; display: none; }
.fstep.is-active { display: block; animation: stepIn 0.4s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fstep.is-active { animation: none; } }
.fstep__nav { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.fstep__nav .btn--wide { flex: 1; min-width: 220px; }
.fstep__nav .btn img { margin-right: 10px; vertical-align: -4px; opacity: 0.8; }

.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 560px) { .ticks { grid-template-columns: 1fr; } }
.tick {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--ink-800); padding: 13px 15px; font-size: 0.92rem;
  color: var(--bone-70); transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.tick:hover { background: var(--ink-700); color: var(--bone); }
.tick input { accent-color: var(--brass); width: 16px; height: 16px; flex: none; }
.tick:has(input:checked) { background: var(--ink-700); color: var(--bone); }
.tick:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: -2px; }

.drop { display: block; cursor: pointer; position: relative; }
.drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.drop__inner {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  border: 1px dashed var(--line-strong, var(--line)); background: var(--ink-800);
  padding: clamp(22px, 3vw, 32px); transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.drop:hover .drop__inner { border-color: var(--brass); background: var(--ink-700); }
.drop input:focus-visible + .drop__inner { outline: 2px solid var(--brass); outline-offset: 2px; }
.drop__inner strong { color: var(--brass); font-weight: 500; letter-spacing: 0.04em; }
.drop__hint { color: var(--bone-50); font-size: 0.85rem; }
.drop__list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.86rem; color: var(--bone-70); }
.drop__list li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.drop__list li:last-child { border-bottom: 0; }
.drop__list .bad { color: #e0a89a; }
/* The filename takes whatever room is left and truncates, so a long name
   never pushes the size or the remove control off the row. */
.drop__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop__size { flex: 0 0 auto; }

/* Take a photo back out. A real <button type="button">, so it is reachable by
   keyboard and cannot submit the form. 26px square gives it a hit area on
   touch that the 14px glyph alone would not. */
.drop__remove {
  flex: none;
  width: 26px; height: 26px;
  margin: -4px 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--bone-70);
  font: inherit; font-size: 1.05rem; line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.drop__remove:hover { color: var(--brass); border-color: var(--brass); background: var(--ink-700); }
.drop__remove:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
  color: var(--brass); border-color: var(--brass);
}

/* The upload zone is itself a <label>, so it inherits .field label's uppercase
   tracking. That is right for a field caption and wrong for a sentence. */
.field label.drop { font-size: 1rem; letter-spacing: normal; text-transform: none; }
.drop__inner strong { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; }
.drop__hint { text-transform: none; letter-spacing: normal; }

/* ========================================================== cookie consent
   Sits above the mobile action bar but below the nav. Deliberately a strip
   rather than a modal: it must not block the page, because a cookie wall is
   not valid consent under UK rules. Accept and decline are the same size and
   weight, for the same reason.
   ======================================================================== */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 97;
  background: rgba(11, 18, 24, 0.97);
  border-top: 1px solid var(--brass-line);
  padding: clamp(16px, 2vw, 22px) 0;
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-out);
  backdrop-filter: blur(6px);
}
.consent.is-shown { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

.consent__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.consent__text {
  margin: 0; flex: 1 1 320px;
  font-size: 0.92rem; line-height: 1.6; color: var(--bone-70);
}
.consent__text a { color: var(--brass-soft); }
.consent__actions { display: flex; gap: 10px; flex: 0 0 auto; }
/* Equal weight is the point, and it is a compliance point rather than a
   stylistic one: under UK rules refusing must be as easy as accepting. So
   both buttons get an identical box and identical type weight, and neither
   is allowed to grow with its label. */
.consent__actions .btn {
  padding: 12px 22px; font-size: 0.78rem;
  width: 156px; flex: 0 0 156px; font-weight: 600;
}

@media (max-width: 620px) {
  .consent { padding-bottom: calc(clamp(16px, 2vw, 22px) + 68px); }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; min-width: 0; }
}