/* ==========================================================================
   Watson & Dalton Bespoke Spaces — site styles (homepage, project + service pages, forms)
   Source: templates/css/site.css → copied to site/css/site.css by build_site.py
   Look & feel: sans headings (Fira Sans) + Cormorant Garamond serif body,
   uppercase serif labels/nav, pill buttons, full-bleed photography, cream pages
   with deep-sage accents and sparing dark green-ink panels.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Client palette */
  --ink: #3a3c1f;
  --ink-soft: #4a4c2a;
  --text: #3d3f25;
  --text-muted: #5c5e45;
  --cream: #f7f5e9;
  --warm-white: #fbfaf3;
  --sand: #ecebe3;
  --mint: #dbd9ca;
  --sage: #868854;
  --sage-deep: #5f6136;
  --sage-hover: #4c4e2b;
  --foam: #dbd9ca;
  --border: #dbd9ca;
  --lime: #ced54d;              /* accent: use sparingly (rules, dots, focus on dark) */
  --olive-2: #707256;
  --stone: #ecebe3;
  --stone-2: #dbd9ca;
  /* Tints/shades of the palette */
  --ink-deep: #2e3018;          /* very dark green-ink for the few dark panels */
  --sage-light: #a5a58e;        /* sage tint for labels on dark backgrounds */
  --on-dark: #f7f5e9;           /* cream text on dark */
  --on-dark-muted: rgba(247,245,233, 0.8);
  /* Type */
  --font-head: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Layout */
  --max-w: 1152px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section: clamp(4.5rem, 8vw, 6.75rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 1.1875rem;          /* 19px — Cormorant runs small */
  font-weight: 500;
  line-height: 1.68;
  color: var(--text);
  background: var(--cream);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.005em; }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--ink); color: var(--on-dark); padding: 0.6rem 1rem; font-family: var(--font-head); font-size: 0.9rem; border-radius: 4px; }
.skip-link:focus { top: 1rem; }

/* ——— Labels & headings ——— */
.label {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage-deep);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.label-on-dark { color: var(--sage-light); }
.section-title { font-size: clamp(1.75rem, 2.4vw, 2.15rem); margin-bottom: 0.9rem; }
.section-intro { max-width: 620px; color: var(--text-muted); }

/* ——— Buttons: pills ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.2; padding: 0.78rem 1.45rem; min-height: 46px;
  border-radius: 100px; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-accent { background: var(--sage-deep); color: #fff; border-color: var(--sage); }
.btn-accent:hover { background: var(--sage-hover); border-color: var(--sage-light); }
.btn-light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-light:hover { background: #fff; border-color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(58,60,31, 0.45); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.btn-outline-light { background: transparent; color: var(--on-dark); border-color: rgba(247,245,233, 0.7); }
.btn-outline-light:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ==========================================================================
   Header — transparent over the hero; slim cream bar once scrolled
   ========================================================================== */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; color: var(--on-dark); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem clamp(1.25rem, 3vw, 2.75rem); }
.brand { position: relative; display: block; line-height: 0; flex: none; }
.brand img { height: 78px; width: auto; transition: height 0.3s var(--ease); }
.brand .brand-dark { position: absolute; inset: 0; opacity: 0; }
.main-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.main-nav a:not(.btn) {
  position: relative; font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: inherit; padding: 0.35rem 0;
}
.main-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.main-nav a:not(.btn):hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.nav-cta-mobile { display: none; }
.header-cta { padding: 0.62rem 1.25rem; min-height: 42px; font-size: 0.88rem; }
.nav-toggle { display: none; position: relative; width: 46px; height: 46px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-header.is-stuck { position: fixed; background: rgba(247,245,233, 0.96); color: var(--ink); box-shadow: 0 1px 0 var(--border), 0 8px 28px rgba(58,60,31, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: header-in 0.45s var(--ease); }
.site-header.is-stuck .header-inner { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.site-header.is-stuck .brand img { height: 56px; }
.site-header.is-stuck .brand-light, .site-header.nav-open .brand-light { opacity: 0; }
.site-header.is-stuck .brand-dark, .site-header.nav-open .brand-dark { opacity: 1; }
@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero { position: relative; min-height: 600px; height: 80vh; max-height: 800px; display: flex; align-items: flex-start; color: var(--on-dark); overflow: hidden; background: var(--ink-deep); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.04); animation: hero-zoom 9s var(--ease) forwards; }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,35,18, 0.66) 0%, rgba(34,35,18, 0.48) 40%, rgba(34,35,18, 0.52) 100%); }
.hero-content { position: relative; z-index: 1; text-align: center; padding-top: clamp(150px, 19vh, 190px); display: flex; flex-direction: column; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.25rem, 3.7vw, 3.35rem); line-height: 1.16; max-width: 900px; margin-bottom: 1.1rem; text-shadow: 0 2px 24px rgba(30,31,15, 0.25); }
.hero-sub { max-width: 640px; font-size: 1.32rem; line-height: 1.5; color: var(--on-dark); margin-bottom: 2rem; }
.hero-eyebrow { margin-bottom: 1rem; color: #f1f0e6; text-shadow: 0 1px 12px rgba(30,31,15, 0.35); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.js .hero-content > * { opacity: 0; transform: translateY(18px); animation: rise 1s var(--ease) forwards; }
.js .hero-content > :nth-child(2) { animation-delay: 0.12s; }
.js .hero-content > :nth-child(3) { animation-delay: 0.24s; }
.js .hero-content > :nth-child(4) { animation-delay: 0.36s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* 22 Oct 2026 (Josh): strip now shown at all widths; desktop styling here, mobile rule below overrides */
.service-strip { display: flex; justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); white-space: nowrap; background: var(--ink-deep); border-top: 1px solid var(--sage); color: var(--on-dark-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1.35rem var(--gutter); }

/* ——— Design → build card (slider + dark panel), overlapping the hero ——— */
.design-build { position: relative; z-index: 2; margin-top: -190px; padding-bottom: var(--section); }
.db-card { display: grid; grid-template-columns: 1.6fr 1fr; background: var(--ink-deep); box-shadow: 0 30px 70px rgba(40,41,22, 0.22); }
.db-media { position: relative; min-height: 560px; }
.db-panel { padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: var(--on-dark-muted); }
.db-panel h2 { color: #fff; font-size: clamp(1.7rem, 2.3vw, 2.1rem); margin-bottom: 1rem; }
.db-panel p { margin-bottom: 1.1rem; }
.db-panel .btn { margin-top: 0.6rem; }
.ba-caption { font-family: var(--font-head); font-size: 0.88rem !important; letter-spacing: 0.04em; color: var(--sage-light); display: flex; align-items: center; gap: 0.55rem; }
.ba-hint { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(165,165,142, 0.6); font-size: 1rem; animation: hint-nudge 2.4s ease-in-out 3s 3; }
@keyframes hint-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }

/* Before/after slider (logic in js/home.js) */
.ba-slider { --pos: 50%; position: absolute; inset: 0; overflow: hidden; background: var(--sand); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(40,41,22, 0.4); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: var(--pos); width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sage-deep); border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-size: 1.9rem; line-height: 1; box-shadow: 0 8px 22px rgba(40,41,22, 0.35); cursor: ew-resize; transition: background 0.2s, transform 0.2s; }
.ba-handle span { margin-top: -4px; }
.ba-slider:hover .ba-handle, .ba-slider.dragging .ba-handle { background: var(--sage-hover); }
.ba-slider.dragging .ba-handle { transform: translate(-50%, -50%) scale(1.08); }
.ba-handle:focus { outline: none; }
.ba-handle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 8px var(--ink), 0 8px 22px rgba(40,41,22, 0.35); }
.ba-label { position: absolute; top: 18px; padding: 0.35rem 0.9rem; border-radius: 100px; font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; transition: opacity 0.25s; }
.ba-label-before { left: 18px; background: rgba(247,245,233, 0.95); color: var(--ink); }
.ba-label-after { right: 18px; background: rgba(46,48,24, 0.85); color: #fff; }
.ba-slider.hide-before .ba-label-before, .ba-slider.hide-after .ba-label-after { opacity: 0; }

/* ——— Intro statement ——— */
.intro { padding: var(--section) 0; } /* 19 Oct 2026: equal gap above/below (Josh) */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6.5rem); align-items: start; }
.intro-statement { position: relative; padding-left: 1.6rem; border-left: 4px solid var(--sage-deep); }
.intro-statement::before { content: ""; position: absolute; right: 100%; top: 50%; width: 100vw; height: 1px; background: var(--foam); margin-right: 4px; }
.intro-statement h2 { font-size: clamp(1.75rem, 2.75vw, 2.5rem); line-height: 1.22; font-weight: 400; }
.intro-copy p { margin-bottom: 1.1rem; }
.area-list { display: flex; flex-wrap: wrap; gap: 0.45rem 1.4rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.area-list li { display: inline-flex; align-items: center; gap: 0.55rem; }
.area-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* ——— Section heads ——— */
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 6.5rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.split-head .section-title { max-width: 480px; margin-bottom: 0; }
.split-copy { color: var(--text-muted); padding-top: 0.2rem; max-width: 470px; }
.center-head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.center-head .section-intro { margin: 0 auto; }

/* ——— Services: staggered grid ——— */
.services { padding: calc(var(--section) * 0.4) 0 calc(var(--section) + 1rem); }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.services-col { display: flex; flex-direction: column; gap: clamp(2.25rem, 4vw, 3.25rem); }
.services-col-offset { margin-top: clamp(4rem, 9vw, 8rem); }
.service-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.service-media.is-tall { aspect-ratio: 4 / 5; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.service:hover .service-media img { transform: scale(1.045); }
.service-body { padding-top: 1.15rem; max-width: 500px; }
.service-body h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.service-body p { color: var(--text-muted); }

/* ——— Featured project: deep-sage split band ——— */
.featured { padding: 0; background: var(--sage-deep); margin: clamp(1rem, 3vw, 2rem) 0 0; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.featured-panel { display: flex; align-items: center; justify-content: flex-end; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 6vw, 6rem) clamp(3rem, 6vw, 5rem) var(--gutter); color: var(--on-dark); }
.featured-inner { width: 100%; max-width: 470px; }
.featured h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 0.8rem; }
.featured-inner > p:not(.label) { font-size: 1.3rem; margin-bottom: 1.4rem; color: var(--on-dark); }
.fp-label { display: inline-flex; align-items: center; gap: 0.7rem; color: #ecebe3; }
.fp-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin-bottom: 2rem; font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fp-meta li { padding: 0 1rem; border-left: 1px solid rgba(247,245,233, 0.45); }
.fp-meta li:first-child { padding-left: 0; border-left: 0; }
.featured-media { position: relative; display: block; margin: -28px 0; min-height: 360px; overflow: hidden; }
.featured-media .ph { position: absolute; inset: 0; transition: transform 1.1s var(--ease); background: linear-gradient(150deg, var(--sand) 0%, var(--mint) 55%, var(--foam) 100%); }
.featured-media .ph::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(95,97,54, 0.35); pointer-events: none; }
.featured:hover .featured-media .ph { transform: scale(1.025); }
.status-dot { position: relative; display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); }
.status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: wd-pulse 2s ease-out infinite; }
@keyframes wd-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }

/* Photo placeholder (until real photos arrive) */
.ph { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; text-align: center; background: linear-gradient(150deg, var(--cream) 0%, var(--sand) 34%, var(--mint) 76%, var(--foam) 100%); color: var(--sage-deep); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 88% 8%, rgba(255,255,255,0.6) 0%, transparent 60%), repeating-linear-gradient(-35deg, transparent 0, transparent 30px, rgba(255,255,255,0.38) 30px, rgba(255,255,255,0.38) 31px); pointer-events: none; }
.ph-icon { position: relative; width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.65; }
.ph-text { position: relative; font-family: var(--font-head); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.ph-sub { position: relative; font-family: var(--font-body); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }
.ph-lg .ph-icon { width: 64px; height: 64px; stroke-width: 1.2; }
.ph-lg .ph-text { font-size: 0.82rem; }

/* ——— Portfolio gallery ——— */
.projects { padding: calc(var(--section) + 1.5rem) 0 var(--section); }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 2.75rem; }
.chip { font-family: var(--font-head); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.6rem 1.15rem; min-height: 42px; border-radius: 100px; border: 1px solid rgba(58,60,31, 0.28); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.chip:hover { border-color: var(--sage-deep); color: var(--ink); }
.chip.active { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem clamp(1rem, 1.8vw, 1.4rem); }
.project-tile { margin: 0; cursor: zoom-in; animation: tile-in 0.6s var(--ease) both; }
.project-tile.hidden { display: none; }
@keyframes tile-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tile-media { display: block; width: 100%; padding: 0; border: 0; background: var(--sand); aspect-ratio: 1 / 1; overflow: hidden; cursor: zoom-in; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter 0.4s; }
.project-tile:hover .tile-media img { transform: scale(1.05); }
.tile-media:focus-visible { outline-offset: 4px; }
.project-body { padding-top: 0.95rem; }
.tile-cat { display: block; font-family: var(--font-head); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.project-body h3 { font-family: var(--font-body); font-size: 1.32rem; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: 0; margin-bottom: 0.45rem; }
.tile-view { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-deep); display: inline-flex; gap: 0.4rem; }
.tile-view span { display: inline-block; transition: transform 0.3s var(--ease); }
.project-tile:hover .tile-view span { transform: translateX(5px); }
.gallery-more { text-align: center; margin-top: 3rem; }
.gallery-more.hidden { display: none; }

/* ——— Why us: photo + overlapping panel ——— */
.why { padding: clamp(1rem, 3vw, 2rem) 0 var(--section); }
.why-grid { display: grid; grid-template-columns: 54% 1fr; align-items: center; }
.why-media { height: clamp(560px, 62vw, 760px); overflow: hidden; }
.why-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.why-panel { position: relative; z-index: 1; margin-left: -6rem; margin-right: max(var(--gutter), calc((100vw - var(--max-w)) / 2)); background: var(--sand); padding: clamp(2.25rem, 4.5vw, 3.75rem); box-shadow: 0 24px 60px rgba(58,60,31, 0.1); }
.why-intro { color: var(--text-muted); margin-bottom: 1.6rem; }
.why-list li { padding: 1.15rem 0; border-top: 1px solid var(--border); }
.why-list li:last-child { padding-bottom: 0; }
.why-list h3 { font-size: 1.2rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.7rem; }
.why-list h3::before { content: ""; width: 18px; height: 2px; background: var(--sage-deep); flex: none; }
.why-list p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; }

/* ——— Process ——— */
.process { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
/* How it works (13 Oct 2026, after Josh's old Wix site): one hairline across the full width with a dot per step;
   under each dot a small number, a line icon, the title and the copy. ≤ 760px: stacked, the line runs down the left. */
.process .split-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: clamp(3rem, 6vw, 4.75rem); }
.process .label { font-family: var(--font-head); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); }
.process .section-title { max-width: 14ch; font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 400; line-height: 1.1; }
.process .split-copy { font-size: 1.08rem; max-width: 520px; padding-top: 0; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); list-style: none; margin: 0; padding: 0; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(58,60,31, 0.28); }
.step { position: relative; padding: 0; }
.step-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--sage-deep); box-shadow: 0 0 0 4px var(--warm-white); position: relative; margin-bottom: 1.6rem; }
.step-num { display: block; font-family: var(--font-head); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 1.1rem; }
.step-icon { display: block; width: 30px; height: 30px; fill: none; stroke: var(--sage-deep); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.step h3 { font-size: 1.35rem; font-weight: 500; margin-bottom: 0.5rem; }
.step p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; max-width: 30ch; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr !important; gap: 2.4rem; padding-left: 2rem; }
  .steps::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .step-dot { position: absolute; left: -2rem; top: 2px; margin: 0; }
  .step-num { margin-bottom: 0.8rem; }
  .step-icon { width: 28px; height: 28px; margin-bottom: 0.7rem; }
  .step p { max-width: none; }
}

/* ——— Contact CTA: photo band + overlapping box ——— */
.cta { position: relative; padding: 0; margin-top: 2rem; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cta::before { content: ""; position: absolute; inset: 0; background: rgba(34,35,18, 0.12); z-index: 1; }
.cta .container { position: relative; z-index: 2; display: flex; justify-content: center; }
.cta-box { width: 100%; max-width: 640px; background: var(--ink-deep); color: var(--on-dark-muted); text-align: center; padding: clamp(2.75rem, 5vw, 4.25rem) clamp(1.5rem, 5vw, 4rem); margin: -28px 0; box-shadow: 0 24px 60px rgba(30,31,15, 0.25); }
.cta-box h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.3rem); margin-bottom: 0.9rem; }
.cta-box p { max-width: 440px; margin: 0 auto 2rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* ——— Footer ——— */
.site-footer { background: var(--cream); padding: calc(var(--section) + 1.75rem) 0 2rem; font-size: 1.08rem; color: var(--text-muted); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3.5rem; }
.footer-logo { display: inline-block; line-height: 0; margin-bottom: 1.2rem; }
.footer-logo img { height: 112px; width: auto; }
.footer-brand p { max-width: 330px; line-height: 1.6; }
.footer-h { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.footer-col li { margin-bottom: 0.45rem; }
.footer-col a { transition: color 0.2s; }
.footer-col a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; padding-top: 1.75rem; border-top: 1px solid var(--border); font-size: 0.98rem; color: var(--text-muted); }

/* ——— Lightbox ——— */
.lightbox { position: fixed; inset: 0; background: rgba(34,35,18, 0.94); display: none; align-items: center; justify-content: center; z-index: 400; padding: 2.5rem 4.5rem; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.lb-caption { position: absolute; bottom: 1.2rem; left: 1rem; right: 1rem; text-align: center; color: var(--sand); font-size: 1.15rem; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lb-btn[hidden] { display: none; }
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }
.lb-close { top: 1.25rem; right: 1rem; transform: none; }

/* ——— Scroll reveal (fade in once; disabled for reduced motion) ——— */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Project case-study pages
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-hero { position: relative; background: var(--ink-deep); color: var(--on-dark-muted); padding: clamp(130px, 16vh, 160px) 0 clamp(5rem, 11vh, 7.5rem); min-height: min(78vh, 680px); display: flex; flex-direction: column; overflow: hidden; }
.cs-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 75% at 50% 0%, rgba(134,136,84, 0.26) 0%, transparent 65%), repeating-linear-gradient(-35deg, transparent 0, transparent 44px, rgba(247,245,233, 0.035) 44px, rgba(247,245,233, 0.035) 45px); pointer-events: none; }
.cs-hero .container { position: relative; flex: 1; display: flex; flex-direction: column; }
.cs-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem; font-size: 1.05rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumb a:hover, .back-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--sage-light); }
.back-link { font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-hero-text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: clamp(2.5rem, 7vh, 4rem); }
.js .cs-hero-text > * { opacity: 0; transform: translateY(18px); animation: rise 1s var(--ease) forwards; }
.js .cs-hero-text > :nth-child(2) { animation-delay: 0.12s; }
.js .cs-hero-text > :nth-child(3) { animation-delay: 0.24s; }
.js .cs-hero-text > :nth-child(4) { animation-delay: 0.36s; }
.cs-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.08; margin-bottom: 0.6rem; }
.cs-subtitle { font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--on-dark); margin-bottom: 1.6rem; }
.status-pill { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 1rem 0.45rem 0.85rem; border-radius: 100px; border: 1px solid rgba(165,165,142, 0.55); color: #ecebe3; }
.status-pill.is-complete .status-dot::after { content: none; }

/* Details bar (like the reference's project facts strip) */
.cs-details { background: var(--sage-deep); color: var(--on-dark); border-top: 1px solid var(--sage-light); padding: 2.4rem 0 2.5rem; }
.cs-details-grid { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 1.5rem 2rem; }
.cs-details dt { font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #ecebe3; margin-bottom: 0.35rem; }
.cs-details dd { font-size: 1.25rem; font-weight: 500; color: #fff; }

/* Statement + brief */
.cs-overview { padding: var(--section) 0; }
.cs-statement { position: relative; padding: 0.4rem 0 0.4rem clamp(1.5rem, 3vw, 2.5rem); border-left: 4px solid var(--sage-deep); font-size: clamp(1.75rem, 2.75vw, 2.5rem); font-weight: 400; line-height: 1.22; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 640px; }
.cs-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.cs-story { padding-right: clamp(2rem, 6vw, 5rem); }
.label-rule { display: flex; align-items: center; gap: 1rem; margin-right: calc(-1 * clamp(2rem, 6vw, 5rem)); margin-bottom: 1.5rem; }
.label-rule::after { content: ""; flex: 1; height: 1px; background: var(--sage-deep); opacity: 0.6; }
.cs-story p:not(.label) { margin-bottom: 1.15rem; }
.cs-story p.cs-lede { font-size: 1.3rem; color: var(--ink-soft); }
.cs-story .btn { margin-top: 0.75rem; }
.lead-media { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.lead-media img { width: 100%; height: 100%; object-fit: cover; }

.cs-work { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.work-card { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.work-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--sage-deep); }
.work-num { display: block; font-size: 3.2rem; line-height: 1; color: var(--sage-deep); margin-bottom: 0.9rem; }
.work-card h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.work-card p { color: var(--text-muted); }

.cs-gallery { padding: var(--section) 0; }
.cs-gallery-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.progress-note { display: flex; gap: 0.9rem; align-items: flex-start; max-width: 400px; background: var(--sand); border-left: 3px solid var(--sage-deep); padding: 1.1rem 1.3rem; }
.progress-note .status-dot { margin-top: 0.55rem; background: var(--sage); }
.progress-note strong { display: block; font-family: var(--font-head); font-weight: 500; color: var(--ink); font-size: 1rem; margin-bottom: 0.15rem; }
.progress-note p { font-size: 1.05rem; color: var(--text-muted); line-height: 1.5; }
.project-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 1rem; }
.project-gallery > figure { position: relative; margin: 0; overflow: hidden; background: var(--sand); }
/* Editorial rhythm, repeats every 8 items: big, tall, std, std, big, wide, std, std */
.project-gallery > figure:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
.project-gallery > figure:nth-child(8n+2) { grid-row: span 2; }
.project-gallery > figure:nth-child(8n+5) { grid-column: span 2; grid-row: span 2; }
.project-gallery > figure:nth-child(8n+6) { grid-column: span 2; }
.project-gallery > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-gallery > figure[data-full] { cursor: zoom-in; }
.project-gallery > figure[data-full]:hover img { transform: scale(1.04); }
.project-gallery figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 1; font-size: 1rem; font-weight: 600; background: rgba(247,245,233, 0.94); color: var(--ink); padding: 0.25rem 0.7rem; }
.project-gallery > figure:nth-child(even) .ph { background: linear-gradient(210deg, var(--cream) 0%, var(--sand) 28%, var(--mint) 70%, var(--foam) 100%); }
.project-gallery > figure:nth-child(3n) .ph { background: linear-gradient(120deg, var(--warm-white) 0%, var(--sand) 40%, var(--mint) 82%, var(--foam) 100%); }
.cta-project { margin-top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .main-nav ul { gap: 1.25rem; }
  /* six nav links + the quote button: tighten so the bar stays on one line down to the mobile menu (860px) */
  .main-nav a:not(.btn) { font-size: 1.02rem; letter-spacing: 0.04em; }
  .db-card { grid-template-columns: 1.35fr 1fr; }
  .why-panel { margin-left: -4rem; }
}
@media (max-width: 1000px) {
  .main-nav ul { gap: 1rem; }
}
@media (max-width: 900px) {
  .header-cta { display: none; }
  .intro-grid, .split-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .split-copy { max-width: 620px; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .featured-panel { justify-content: flex-start; padding: 3.5rem var(--gutter) 3.75rem; }
  .featured-inner { max-width: 620px; }
  .featured-media { margin: 0; min-height: 0; aspect-ratio: 16 / 9; order: -1; }
  .why-grid { grid-template-columns: 1fr; }
  .why-media { height: auto; aspect-ratio: 4 / 3; }
  .why-panel { margin: -5rem var(--gutter) 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cs-details-grid { grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.5rem 3rem; }
  .cs-brief { grid-template-columns: 1fr; gap: 2.5rem; }
  .cs-story { padding-right: 0; }
  .label-rule { margin-right: 0; }
  .lead-media { aspect-ratio: 16 / 10; }
  .work-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cs-gallery-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .project-gallery > figure:nth-child(8n+1), .project-gallery > figure:nth-child(8n+5) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 860px) {
  /* Mobile navigation */
  .nav-toggle { display: block; z-index: 2; }
  .main-nav { position: absolute; top: 0; left: 0; right: 0; background: var(--cream); color: var(--ink); padding: 6.25rem var(--gutter) 2rem; box-shadow: 0 18px 40px rgba(58,60,31, 0.15); transform: translateY(-105%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; }
  .site-header.nav-open .main-nav { transform: none; visibility: visible; transition: transform 0.4s var(--ease); }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--border); }
  .main-nav a:not(.btn) { display: block; padding: 0.95rem 0; font-size: 1.3rem; }
  .main-nav a:not(.btn)::after { display: none; }
  .nav-cta-mobile { display: block; border-bottom: 0 !important; padding-top: 1.5rem; }
  .nav-cta-mobile .btn { width: 100%; }
  .brand { z-index: 2; }
  .site-header.nav-open { color: var(--ink); }
}
@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .brand img { height: 62px; }
  .site-header.is-stuck .brand img { height: 50px; }
  .hero { height: auto; min-height: 0; max-height: none; align-items: flex-end; padding: 0; }
  .hero-content { text-align: left; align-items: flex-start; padding-top: 170px; padding-bottom: 2.75rem; min-height: min(640px, 84svh); justify-content: flex-end; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hero-sub { font-size: 1.2rem; }
  .hero-ctas { justify-content: flex-start; gap: 0.6rem; }
  .hero-ctas .btn { font-size: 0.8rem; padding: 0.7rem 1.05rem; min-height: 44px; }
  .hero-shade { background: linear-gradient(180deg, rgba(34,35,18, 0.55) 0%, rgba(34,35,18, 0.3) 35%, rgba(34,35,18, 0.72) 100%); }
  .service-strip { display: flex; justify-content: space-between; gap: 0.6rem; white-space: nowrap; background: var(--ink-deep); border-top: 1px solid var(--sage); color: var(--on-dark-muted); font-family: var(--font-body); font-weight: 600; font-size: clamp(0.72rem, 3.3vw, 0.95rem); letter-spacing: 0.05em; text-transform: uppercase; padding: 1.1rem var(--gutter); }
  .hero-eyebrow { font-size: 1rem; letter-spacing: 0.06em; }
  .design-build { margin-top: 0; padding-top: 0; }
  .design-build .container { padding: 0; }
  .db-card { grid-template-columns: 1fr; box-shadow: none; }
  .db-media { min-height: 0; aspect-ratio: 1 / 1; }
  .db-panel { padding: 2.25rem var(--gutter) 2.75rem; }
  .intro { padding-top: var(--section); }
  .intro-statement::before { display: none; }
  .services-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .services-col { display: contents; }
  .s-1 { order: 1; } .s-2 { order: 2; } .s-3 { order: 3; } .s-4 { order: 4; }
  .services-col-offset { margin-top: 0; }
  .service-media.is-tall { aspect-ratio: 4 / 3; }
  .projects-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 0.85rem; }
  .project-body h3 { font-size: 1.12rem; }
  .tile-view { font-size: 0.92rem; }
  .why-panel { margin: -3rem 0.75rem 0; }
  .cta { padding: 4.5rem 0; margin-top: 0; }
  .cta-box { margin: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-logo img { height: 96px; }
  .lightbox { padding: 1rem; }
  .lb-prev, .lb-next { top: auto; bottom: 3.75rem; transform: none; }
  .cs-hero { padding: 110px 0 4rem; min-height: 0; }
  .cs-topbar { font-size: 0.98rem; }
  .back-link { display: none; }
  .cs-details-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .cs-details .row:nth-child(2) { grid-column: span 1; }
  .cs-details dd { font-size: 1.12rem; }
  .lead-media { aspect-ratio: 4 / 3; }
  .project-gallery { grid-auto-rows: 150px; gap: 0.6rem; }
  .project-gallery .ph-text { font-size: 0.6rem; letter-spacing: 0.12em; }
  .project-gallery .ph-icon { width: 32px; height: 32px; }
}
@media (max-width: 420px) {
  .tile-view { display: none; }
  .tile-cat { font-size: 0.64rem; letter-spacing: 0.1em; }
  .gallery-filters { gap: 0.45rem; }
  .chip { padding: 0.5rem 0.9rem; font-size: 0.74rem; }
  .ba-handle { width: 48px; height: 48px; font-size: 1.5rem; }
  .ba-label { top: 12px; font-size: 0.66rem; padding: 0.28rem 0.65rem; }
  .ba-label-before { left: 12px; } .ba-label-after { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-content > * { opacity: 1; transform: none; animation: none; }
  .hero-bg { animation: none; transform: none; }
  .status-dot::after { animation: none; }
}

/* ==========================================================================
   Design-to-build OPTION B — "Stage timeline" (option-timeline.html)
   Re-uses the overlapping .db-card; adds stacked stage slides and a timeline bar.
   ========================================================================== */
.tl-card { grid-template-rows: auto auto; }
.tl-media { min-height: 0; aspect-ratio: 5 / 4; overflow: hidden; background: #f3f1e4; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.tl-slide.is-active { opacity: 1; z-index: 1; }
.tl-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; -webkit-user-drag: none; }
.tl-badge { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 0.5rem; max-width: calc(100% - 36px); padding: 0.4rem 0.9rem 0.4rem 0.75rem; border-radius: 100px; background: rgba(247,245,233, 0.95); color: var(--ink); font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.3; box-shadow: 0 6px 18px rgba(30,31,15, 0.18); }
.tl-badge::before { content: "i"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--sage-deep); color: #fff; font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 0.8rem; }
.tl-count { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 0.35rem 0.85rem; border-radius: 100px; background: rgba(46,48,24, 0.82); color: rgba(255, 255, 255, 0.75); font-family: var(--font-head); font-size: 0.74rem; letter-spacing: 0.1em; }
.tl-count b { color: #fff; font-weight: 500; }
.tl-copy { display: grid; margin-bottom: 0.6rem; }
.tl-text { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.tl-text.is-active { opacity: 1; transform: none; }
.tl-text:not(.is-active) { visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s; }
.db-panel .tl-text h3 { color: #fff; font-size: 1.12rem; margin-bottom: 0.4rem; }
.db-panel .tl-text p { margin: 0; }
.tl-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); padding: 1.15rem clamp(1.25rem, 3vw, 2.5rem) 1.25rem; border-top: 1px solid rgba(165,165,142, 0.16); }
.tl-play { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(247,245,233, 0.45); background: transparent; color: var(--on-dark); cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.tl-play:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.tl-play svg { width: 18px; height: 18px; fill: currentColor; grid-area: 1 / 1; }
.tl-play[data-state="playing"] .i-play, .tl-play[data-state="paused"] .i-pause { display: none; }
.tl-play:focus-visible, .tl-tab:focus-visible { outline: 2px solid var(--sage-light); outline-offset: 4px; }
.tl-track { position: relative; flex: 1; min-width: 0; }
.tl-line { position: absolute; left: 12.5%; right: 12.5%; top: calc(0.3rem + 6px); height: 2px; background: rgba(165,165,142, 0.22); border-radius: 2px; }
.tl-line-fill { position: absolute; inset: 0; background: var(--sage); transform-origin: 0 50%; transform: scaleX(var(--tl-at, 0)); transition: transform 0.7s var(--ease); }
.tl-line-next { position: absolute; top: 0; bottom: 0; left: calc(var(--tl-at, 0) * 100%); width: 33.334%; background: rgba(165,165,142, 0.55); transform-origin: 0 50%; transform: scaleX(0); }
.tl-timing:not(.tl-last) .tl-line-next { animation: tl-next var(--tl-dwell, 4s) linear forwards; }
@keyframes tl-next { to { transform: scaleX(1); } }
.tl-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.tl-tab { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.3rem 0.25rem; background: none; border: 0; border-radius: 8px; color: var(--on-dark-muted); font: inherit; cursor: pointer; text-align: center; transition: color 0.25s; }
.tl-tab:hover { color: #fff; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-deep); border: 2px solid rgba(165,165,142, 0.5); transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s; }
.tl-tab.is-done .tl-dot { background: var(--sage); border-color: var(--sage); }
.tl-tab[aria-selected="true"] { color: #fff; }
.tl-tab[aria-selected="true"] .tl-dot { background: var(--sage-light); border-color: #fff; box-shadow: 0 0 0 5px rgba(134,136,84, 0.3); transform: scale(1.1); }
.tl-num { font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1; color: var(--sage-light); margin-top: 0.15rem; }
.tl-name { font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; }
@media (max-width: 760px) {
  .tl-media { aspect-ratio: 5 / 4; order: 1; }
  .tl-bar { order: 2; padding: 0.9rem var(--gutter) 1rem; gap: 0.75rem; }
  .tl-panel { order: 3; }
  .tl-play { width: 42px; height: 42px; }
  .tl-name { font-size: 0.7rem; letter-spacing: 0.06em; }
  .tl-badge { left: 12px; top: 12px; bottom: auto; font-size: 0.68rem; }
  .tl-count { display: none; }  /* the timeline under the picture already shows the stage */
}
@media (prefers-reduced-motion: reduce) {
  .tl-slide, .tl-text, .tl-line-fill { transition-duration: 0.01s; }
}

/* Homepage timeline around the terrace of new homes (4:3 photo, count pill top-right so it clears the sketch title) */
.tl-terrace .tl-media { aspect-ratio: 4 / 3; }
.tl-terrace .tl-count { left: auto; right: 18px; }
@media (max-width: 760px) {
  /* bottom-left keeps the badge clear of the sketch title (top-left) and the plans title block */
  .tl-terrace .tl-badge { top: auto; bottom: 10px; left: 10px; font-size: 0.62rem; padding: 0.3rem 0.7rem 0.3rem 0.55rem; }
  .tl-terrace .tl-badge::before { width: 15px; height: 15px; font-size: 0.72rem; }
}

/* Homepage timeline: animated Plans / Build stages (inline SVG from make_terrace_anim.py, see
   templates/options/anim/). js/option-timeline.js adds .is-play on entering the stage; without it (no JS,
   reduced motion) the finished drawing shows. Each element carries --b (start) and --l (length).
   .d strokes draw themselves in (pathLength=1), .f fade in, .u settle into place, .x appear then go (scaffold). */
.tl-slide .tla { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.tla text { font-family: var(--font-head); }
.tla:not(.is-play) .x, .tla:not(.is-play) .xf { opacity: 0; }
.tla.is-play .d { stroke-dasharray: 1 1; animation: tla-draw var(--l) var(--e, cubic-bezier(0.45, 0.05, 0.35, 1)) var(--b) both; }
.tla.is-play .f { animation: tla-fade var(--l) ease-out var(--b) both; }
.tla.is-play .u { animation: tla-rise var(--l) cubic-bezier(0.2, 0.7, 0.3, 1) var(--b) both; }
.tla.is-play .x { animation: tla-fade var(--l) ease-out var(--b) both, tla-away 0.7s ease-in var(--b2) forwards; }
@keyframes tla-draw { from { stroke-dashoffset: 1.001; visibility: hidden; } to { stroke-dashoffset: 0; } }
@keyframes tla-fade { from { opacity: 0; } }
@keyframes tla-rise { from { opacity: 0; transform: translateY(7px); } }
@keyframes tla-away { to { opacity: 0; transform: translateY(16px); } }
@keyframes tla-gone { to { opacity: 0; } }
.tla.is-play .xf { animation: tla-gone 0.8s ease-in-out var(--b2) forwards; }
@media (prefers-reduced-motion: reduce) {
  .tla.is-play .d, .tla.is-play .f, .tla.is-play .u { animation: none; }
  .tla .x, .tla .xf { display: none; }
}

/* ==========================================================================
   Linked service card (homepage "Leisure outbuildings"): the heading link is stretched over the card
   ========================================================================== */
.service-linked { position: relative; }
.service-link { color: inherit; transition: color 0.25s; }
.service-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.service-link:focus { outline: none; }
.service-linked:has(.service-link:focus-visible) { outline: 2px solid var(--sage-deep); outline-offset: 8px; }
.service-linked:hover .service-link { color: var(--sage-deep); }
.service-linked .service-media { position: relative; }
.service-linked .service-media::after { content: "→"; position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--ink); font-family: var(--font-head); font-size: 1.25rem; box-shadow: 0 10px 26px rgba(30,31,15, 0.22); transition: background 0.3s, color 0.3s, transform 0.35s var(--ease); }
.service-linked:hover .service-media::after { background: var(--sage-deep); color: #fff; transform: translateX(4px); }
.service-more { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; padding-bottom: 0.3rem; border-bottom: 1px solid currentColor; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); }
.service-more .arrow { transition: transform 0.3s var(--ease); }
.service-linked:hover .service-more .arrow { transform: translateX(5px); }

/* ==========================================================================
   Service pages (templates/services/*.html)
   ========================================================================== */
.hero-page { height: 74vh; min-height: 560px; max-height: 700px; align-items: center; }
.hero-page .hero-content { padding-top: 90px; }
.hero-page h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.08; }
.hero-page .hero-sub { max-width: 660px; }
.hero-page .hero-shade { background: linear-gradient(180deg, rgba(34,35,18, 0.74) 0%, rgba(34,35,18, 0.5) 38%, rgba(34,35,18, 0.56) 100%); }
.hero-topbar { position: absolute; z-index: 2; top: clamp(112px, 15vh, 132px); left: 0; right: 0; color: rgba(255, 255, 255, 0.88); font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(30,31,15, 0.45); }
.hero-topbar .breadcrumb a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.hero-topbar .breadcrumb a:hover { color: #fff; text-decoration-color: #fff; }
.hero-topbar .breadcrumb [aria-current] { color: var(--sage-light); }
.svc-intro { padding-top: var(--section); }
.types { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
.types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.type-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 310px; padding: clamp(1.5rem, 2.6vw, 2.2rem); background: var(--sand); }
/* drawing-board grid, fading out towards the text (echoes the design sketches) */
.type-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(95,97,54, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(95,97,54, 0.11) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; -webkit-mask-image: linear-gradient(195deg, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%); mask-image: linear-gradient(195deg, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 70%); }
.type-num { position: absolute; top: clamp(1.4rem, 2.4vw, 2rem); left: clamp(1.5rem, 2.6vw, 2.2rem); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sage-deep); }
.type-num::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin-left: 0.7rem; background: var(--sage-deep); opacity: 0.6; }
.type-card h3 { font-size: 1.45rem; margin-bottom: 0.45rem; }
.type-card p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.55; max-width: 30ch; }
@media (min-width: 761px) { .type-card p { min-height: calc(1.55em * 3); } }  /* headings line up across a row */
.type-photo { background: var(--ink-deep); }
.type-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transition: transform 1.1s var(--ease); }
.type-photo:hover img { transform: scale(1.04); }
.type-photo::before { background: linear-gradient(180deg, rgba(34,35,18, 0) 25%, rgba(34,35,18, 0.55) 55%, rgba(34,35,18, 0.9) 100%); -webkit-mask-image: none; mask-image: none; }
.type-photo .type-num { position: static; display: block; margin-bottom: 0.5rem; color: var(--sage-light); }
.type-photo .type-num::after { background: var(--sage-light); }
.type-photo h3 { color: #fff; }
.type-photo p { color: var(--on-dark-muted); }
.type-tag { position: absolute; top: 16px; right: 16px; padding: 0.35rem 0.85rem; border-radius: 100px; background: rgba(247,245,233, 0.95); color: var(--ink); font-family: var(--font-head); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.svc-gallery .center-head { margin-bottom: 2.5rem; }
@media (max-width: 900px) {
  .types-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .service-linked .service-media::after { width: 44px; height: 44px; right: 14px; bottom: 14px; }
  .hero-page { height: auto; min-height: 0; max-height: none; align-items: flex-end; }
  .hero-page .hero-content { padding-top: 150px; min-height: min(600px, 80svh); }
  .hero-page h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .hero-topbar { top: 100px; font-size: 0.7rem; }
  .types-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .type-card { min-height: 0; padding-top: 3.6rem; }
  .type-card::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
  .type-num { top: 1.4rem; }
  .type-photo { min-height: 0; aspect-ratio: 4 / 3.2; padding-top: 0; }
}

/* ==========================================================================
   Forms — Leisure page: brochure download band + enquiry form (js/forms.js)
   ========================================================================== */
.wd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wd-form { position: relative; }
.wd-form label, .sub-legend, .yn legend { font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.wd-form .opt { font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-left: 0.3rem; }
.req { color: var(--sage-deep); margin-left: 0.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 1.5rem; }
.wd-form input[type="text"], .wd-form input[type="email"], .wd-form input[type="tel"], .wd-form select, .wd-form textarea {
  width: 100%; min-height: 52px; padding: 0.7rem 1rem; font-family: var(--font-body); font-size: 1.2rem; font-weight: 500; line-height: 1.4; color: var(--ink);
  background: var(--warm-white); border: 1px solid #cfcdbb; border-radius: 4px; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none; appearance: none;
}
.wd-form textarea { min-height: 140px; resize: vertical; }
.wd-form select { padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23557a4c' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.wd-form ::placeholder { color: #8b8c78; font-style: italic; opacity: 1; }
.wd-form input:hover, .wd-form select:hover, .wd-form textarea:hover { border-color: var(--sage); }
.wd-form input:focus, .wd-form select:focus, .wd-form textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(95,97,54, 0.22); background-color: #fff; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #a8372a; box-shadow: 0 0 0 3px rgba(168, 55, 42, 0.12); }
.field-error { display: flex; align-items: flex-start; gap: 0.45rem; font-family: var(--font-head); font-size: 0.84rem; line-height: 1.4; color: #9b2f22; }
.field-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: #a8372a; color: #fff; font-size: 0.7rem; font-weight: 500; }
.field-error:empty { display: none; }
/* consent + generic checkbox line */
.field-check { margin-top: 0.25rem; }
.check { display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; font-family: var(--font-body) !important; font-size: 1.14rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.45; color: var(--text) !important; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 0.12rem; accent-color: var(--sage-deep); cursor: pointer; }
.field-check.is-invalid .check input { outline: 2px solid #a8372a; outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; }
.form-actions .btn { min-height: 52px; padding: 0.9rem 1.9rem; }
.wd-form .btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }
.is-sending .btn .arrow { animation: wd-nudge 0.9s ease-in-out infinite; }
@keyframes wd-nudge { 50% { transform: translateX(4px); } }
.form-alert { margin-top: 1.2rem; padding: 0.95rem 1.15rem; border-left: 3px solid #a8372a; background: #f8ebe6; color: #6e241a; font-size: 1.12rem; line-height: 1.5; }
.form-alert[hidden] { display: none; }
.form-alert a { color: #6e241a; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-alert strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 0.98rem; color: #6e241a; margin-bottom: 0.2rem; }
/* success panels */
.done-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sage-deep); margin-bottom: 1.2rem; }
.done-icon::after { content: ""; width: 20px; height: 11px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-3px) rotate(-45deg); }
.is-in { animation: wd-in 0.7s var(--ease) both; }
@keyframes wd-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.done-next { margin-top: 1.1rem; font-size: 1.1rem; }
.done-next a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ——— Brochure band: deep sage, mock-up overlapping the band edges ——— */
.brochure { position: relative; background: var(--sage-deep); color: var(--on-dark); margin: clamp(3rem, 6vw, 5rem) 0 0; overflow: clip; }
.brochure::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 80% at 18% 50%, rgba(247,245,233, 0.13) 0%, transparent 70%), repeating-linear-gradient(-35deg, transparent 0, transparent 44px, rgba(247,245,233, 0.04) 44px, rgba(247,245,233, 0.04) 45px); pointer-events: none; }
.brochure-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.brochure-media img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(30,31,15, 0.25)); transform: rotate(-1deg); transition: transform 0.8s var(--ease); }
.brochure:hover .brochure-media img { transform: rotate(0deg) translateY(-4px); }
.brochure .label { color: #ecebe3; }
.brochure h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 0.9rem; max-width: 520px; }
.brochure-lede { font-size: 1.3rem; line-height: 1.5; color: var(--on-dark); max-width: 520px; margin-bottom: 1.1rem; }
.brochure-meta { display: flex; flex-wrap: wrap; margin-bottom: 1.9rem; font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ecebe3; }
.brochure-meta li { padding: 0 1rem; border-left: 1px solid rgba(247,245,233, 0.45); }
.brochure-meta li:first-child { padding-left: 0; border-left: 0; }
.brochure-form { max-width: 560px; }
.brochure-form label { color: #fff; }
.brochure-form .req { color: #ecebe3; }
.brochure-form input[type="text"], .brochure-form input[type="email"] { background: var(--cream); border-color: transparent; }
.brochure-form input:focus { box-shadow: 0 0 0 3px rgba(247,245,233, 0.45); border-color: #fff; }
.brochure-form .check { color: var(--on-dark) !important; font-size: 1.12rem !important; }
.brochure-form .check input { accent-color: var(--ink); }
.brochure-form .field-check { margin-top: 1.2rem; }
.brochure .field-error { color: #fff; background: rgba(110, 36, 26, 0.55); padding: 0.4rem 0.65rem; border-radius: 3px; }
.brochure .field.is-invalid input { border-color: #f1b7a9; box-shadow: 0 0 0 3px rgba(241, 183, 169, 0.45); }
.brochure .field-check.is-invalid .check input { outline-color: #f1b7a9; }
.brochure .form-alert { background: rgba(46,48,24, 0.35); border-left-color: #f1b7a9; color: #fff; }
.brochure .form-actions { margin-top: 1.4rem; }
.brochure-done { max-width: 540px; padding: clamp(1.75rem, 3vw, 2.4rem); background: var(--ink-deep); box-shadow: 0 24px 60px rgba(30,31,15, 0.25); }
.brochure-done[hidden] { display: none; }
.brochure-done .done-icon { background: var(--sage); }
.brochure-done h3 { color: #fff; font-size: 1.6rem; margin-bottom: 0.5rem; }
.brochure-done p { color: var(--on-dark-muted); }
.brochure-done .btn { margin-top: 1.4rem; }
.btn-sub { text-transform: none; letter-spacing: 0; font-size: 0.85em; opacity: 0.75; white-space: nowrap; }
.brochure-done .done-next a { color: var(--sage-light); }

/* ——— Enquiry: form card + contact aside ——— */
.enquire { padding: var(--section) 0; border-top: 1px solid rgba(219,217,202, 0.6); }
.enquire-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.enquire-card { background: var(--warm-white); padding: clamp(1.75rem, 4vw, 3.25rem); box-shadow: 0 24px 60px rgba(58,60,31, 0.08); border-top: 3px solid var(--sage-deep); }
.form-note { font-size: 1.08rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.form-group { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.form-group > legend { display: flex; align-items: baseline; gap: 0.8rem; width: 100%; padding: 0 0 0.85rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); font-family: var(--font-head); font-size: 1.28rem; font-weight: 500; color: var(--ink); }
.form-group > legend .opt { font-size: 1.08rem; }
.legend-num { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sage-deep); }
.sub-group { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.sub-legend { display: block; padding: 0; margin-bottom: 0.7rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 0.6rem; }
.choice { position: relative; display: flex; align-items: center; gap: 0.65rem; min-height: 52px; padding: 0.55rem 0.85rem; border: 1px solid #cfcdbb; border-radius: 4px; background: #fff; cursor: pointer; font-family: var(--font-body) !important; font-size: 1.1rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.25; color: var(--ink); transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.choice input { flex: none; width: 19px; height: 19px; accent-color: var(--sage-deep); cursor: pointer; }
.choice:hover { border-color: var(--sage); }
.choice:has(input:checked) { border-color: var(--sage-deep); background: #f1f0e6; box-shadow: inset 0 0 0 1px var(--sage-deep); }
.choice:has(input:focus-visible) { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.yn-list { display: grid; gap: 0; }
.yn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem 1.5rem; border: 0; padding: 0.85rem 0; margin: 0; border-bottom: 1px solid rgba(219,217,202, 0.7); min-width: 0; }
.yn:first-child { padding-top: 0; }
.yn legend { float: left; padding: 0; font-family: var(--font-body); font-size: 1.18rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.yn-opts { display: flex; gap: 0.45rem; }
.pill-choice { position: relative; cursor: pointer; }
.pill-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.05rem; border: 1px solid #cfcdbb; border-radius: 100px; background: #fff; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.pill-choice:hover span { border-color: var(--sage); }
.pill-choice input:checked + span { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.pill-choice input:focus-visible + span { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.field-half { max-width: calc(50% - 0.75rem); margin-top: 1.35rem; }
.enquiry-form .field-check { padding-top: 1.4rem; border-top: 1px solid var(--border); }
.form-thanks { padding: clamp(1rem, 3vw, 2.5rem) 0; text-align: left; }
.enquire-card:has(> .form-thanks:not([hidden])) { background-image: linear-gradient(rgba(95,97,54, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(95,97,54, 0.07) 1px, transparent 1px); background-size: 24px 24px; }
@media (min-width: 901px) { .enquire-card:has(> .form-thanks:not([hidden])) { align-self: stretch; display: flex; align-items: center; } }
.form-thanks[hidden] { display: none; }
.form-thanks h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 0.6rem; }
.form-thanks p { font-size: 1.2rem; max-width: 520px; }
.form-thanks .done-next { font-size: 1.1rem; color: var(--text-muted); }

.enquire-aside { position: sticky; top: 96px; background: var(--ink-deep); color: var(--on-dark-muted); box-shadow: 0 24px 60px rgba(30,31,15, 0.18); }
.enquire-aside img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.aside-body { padding: clamp(1.6rem, 2.6vw, 2.2rem); }
.enquire-aside h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1.3rem; }
.aside-contact { margin-bottom: 1.6rem; }
.aside-contact li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0; border-top: 1px solid rgba(165,165,142, 0.2); font-size: 1.18rem; line-height: 1.4; color: var(--on-dark); }
.aside-contact a { color: #fff; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(165,165,142, 0.5); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.aside-contact a:hover { text-decoration-color: #fff; }
.ac-k { font-family: var(--font-head); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 0.15rem; }
.aside-areas { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.4rem 0 1.6rem; font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
.aside-areas li { display: inline-flex; align-items: center; gap: 0.5rem; }
.aside-areas li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.aside-link { display: inline-flex; gap: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid currentColor; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-light); }
.aside-link:hover { color: #fff; }

@media (max-width: 900px) {
  .brochure-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .brochure-media img { max-width: 400px; }
  .enquire-grid { grid-template-columns: 1fr; }
  .enquire-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .enquire-aside img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .brochure { margin-top: 2rem; }
  .brochure-media img { max-width: 300px; }
  .brochure-panel { text-align: left; }
  .field-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .field-half { max-width: none; }
  .enquire-card { padding: 1.6rem 1.15rem 2rem; margin: 0 calc(-1 * var(--gutter) + 0.5rem); }
  .form-group > legend { font-size: 1.15rem; }
  .yn { grid-template-columns: 1fr; gap: 0.55rem; }
  .yn-opts { flex-wrap: wrap; }
  .enquire-aside { grid-template-columns: 1fr; }
  .enquire-aside img { aspect-ratio: 16 / 9; height: auto; }
  .form-actions .btn { width: 100%; }
}
@media (max-width: 480px) {
  .brochure-done .btn-sub { display: none; }
}
@media (max-width: 420px) {
  .choice-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .choice { padding: 0.5rem 0.65rem; font-size: 1.02rem !important; gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .is-in { animation: none; }
  .brochure-media img { transform: none; }
}

/* ==========================================================================
   FAQ — faq.html + the FAQ block on the Leisure page (accordion logic: js/faq.js)
   No JS: every answer is open. .is-ready (set by faq.js) collapses the closed ones; .is-animated turns on
   the open/close transition once the first collapse has painted.
   ========================================================================== */
.hero-faq { height: 62vh; min-height: 480px; max-height: 600px; }
.faq-page { padding: var(--section) 0; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.faq-side { position: sticky; top: 104px; }
.faq-toc ol { border-top: 1px solid var(--border); }
.faq-toc li { border-bottom: 1px solid var(--border); }
.faq-toc a { position: relative; display: flex; align-items: baseline; gap: 0.85rem; padding: 0.8rem 0; font-family: var(--font-head); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.25s, padding-left 0.3s var(--ease); }
.faq-toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--sage-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.faq-toc a[aria-current] { color: var(--sage-deep); padding-left: 1.4rem; }
.faq-toc a[aria-current]::before { transform: scaleX(1); }
@media (hover: hover) {
  .faq-toc a:hover { color: var(--sage-deep); padding-left: 1.4rem; }
  .faq-toc a:hover::before { transform: scaleX(1); }
}
.faq-toc-num { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sage-deep); }
.faq-help { margin-top: 1.75rem; padding: 1.3rem 1.4rem; background: var(--sand); border-left: 3px solid var(--sage-deep); font-size: 1.08rem; line-height: 1.5; color: var(--text-muted); }
.faq-help-title { font-family: var(--font-head); font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 0.3rem; }
.faq-help a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.faq-groups { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.faq-group { scroll-margin-top: 100px; }
.faq-group-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 1rem; margin-bottom: 1.1rem; }
.faq-group-num { font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sage-deep); }
.faq-group-num::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin-left: 0.7rem; background: var(--sage-deep); opacity: 0.6; }
.faq-group-title { font-size: clamp(1.6rem, 2.3vw, 2rem); }
.faq-note { grid-column: 1 / -1; margin-top: 0.7rem; max-width: 62ch; font-size: 1.1rem; font-style: italic; color: var(--text-muted); }

/* accordion */
.faq-list { border-bottom: 1px solid var(--border); }
.faq-item { position: relative; border-top: 1px solid var(--border); scroll-margin-top: 100px; }
.faq-item::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--sage-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.faq-item.is-open::before, .faq-list:not(.is-ready) .faq-item::before { transform: scaleX(1); }
.faq-q { font-size: inherit; }
.faq-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.3rem 0; background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; font-family: var(--font-head); font-size: 1.16rem; font-weight: 500; line-height: 1.4; color: var(--ink); transition: color 0.25s; }
@media (hover: hover) { .faq-trigger:hover { color: var(--sage-deep); } .faq-trigger:hover .faq-icon { border-color: var(--sage-deep); color: var(--sage-deep); } }
.faq-trigger:focus-visible { outline-offset: 4px; }
.faq-list:not(.is-ready) .faq-trigger { cursor: default; }  /* no JS: questions are plain headings */
.faq-list:not(.is-ready) .faq-icon { display: none; }
.faq-icon { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(58,60,31, 0.3); color: var(--ink); transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform 0.4s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-trigger[aria-expanded="true"] .faq-icon { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; transform: rotate(180deg); }
.faq-trigger[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq-a-body { padding: 0 clamp(0rem, 5vw, 3.75rem) 1.6rem 0; }
.faq-a-body p { max-width: 68ch; color: var(--text-muted); }
.faq-a-body p + p { margin-top: 0.85rem; }
.faq-a-body a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(95,97,54, 0.45); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.faq-a-body a:hover { text-decoration-color: currentColor; }
.faq-a-body em { font-style: italic; color: var(--ink-soft); }
.faq-list.is-ready .faq-item:not(.is-open) .faq-a { grid-template-rows: 0fr; visibility: hidden; }
.faq-list.is-animated .faq-a { transition: grid-template-rows 0.45s var(--ease), visibility 0s linear 0s; }
.faq-list.is-animated .faq-item:not(.is-open) .faq-a { transition: grid-template-rows 0.45s var(--ease), visibility 0s linear 0.45s; }
.faq-list.is-animated .faq-a-body { transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); }
.faq-list.is-ready .faq-item:not(.is-open) .faq-a-body { opacity: 0; transform: translateY(-6px); }

/* closing CTA */
.cta-faq { margin-top: 0; }
.cta-faq .cta-alt { margin-top: 1.6rem; }
.cta-faq .cta-alt:hover { color: #fff; }

/* FAQ block on the Leisure page (above the enquiry form) */
.faq-block { padding: var(--section) 0; border-top: 1px solid rgba(219,217,202, 0.6); }
.faq-block-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.faq-block-head .section-title { max-width: 420px; }
.faq-block-head .split-copy { margin-bottom: 1.3rem; }
.faq-block-head .service-more { margin-top: 0; }
.faq-block-head .service-more:hover .arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .faq-layout, .faq-block-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-toc ol { display: flex; flex-wrap: wrap; gap: 0.45rem; border-top: 0; }
  .faq-toc li { border-bottom: 0; }
  .faq-toc a { padding: 0.45rem 0.9rem; min-height: 40px; align-items: center; gap: 0.45rem; border: 1px solid rgba(58,60,31, 0.28); border-radius: 100px; font-size: 0.74rem; letter-spacing: 0.06em; }
  .faq-toc a::before { display: none; }
  .faq-toc a:hover, .faq-toc a[aria-current] { padding-left: 0.9rem; border-color: var(--sage-deep); }
  .faq-toc-num { font-size: 0.88rem; }
  .faq-help { display: none; }
}
@media (max-width: 760px) {
  .hero-faq { height: auto; min-height: 0; max-height: none; }
  .hero-faq .hero-content { min-height: min(520px, 72svh); }
  .faq-trigger { font-size: 1.06rem; gap: 1rem; padding: 1.15rem 0; }
  .faq-icon { width: 34px; height: 34px; }
  .faq-a-body { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list.is-animated .faq-a, .faq-list.is-animated .faq-item:not(.is-open) .faq-a, .faq-list.is-animated .faq-a-body { transition: none; }
}

/* ==========================================================================
   PREVIEW-ONLY — "Compare versions" switcher (templates/partials/compare.html). Delete before launch.
   ========================================================================== */
.compare { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 100px; background: rgba(46,48,24, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(30,31,15, 0.25); font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.compare-label { padding: 0 0.55rem 0 0.8rem; color: var(--sage-light); }
.compare a { padding: 0.55rem 0.85rem; border-radius: 100px; color: var(--on-dark-muted); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.compare a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.compare a.is-current { background: var(--sage-deep); color: #fff; }
.compare a:focus-visible { outline: 2px solid var(--sage-light); outline-offset: 2px; }
.cmp-short { display: none; }
@media (max-width: 560px) {
  .compare { left: 10px; bottom: 10px; font-size: 0.66rem; }
  .compare-label, .cmp-long { display: none; }
  .cmp-short { display: inline; }
  .compare a { padding: 0.55rem 0.7rem; }
}
@media print { .compare { display: none; } }

/* ==========================================================================
   Privacy policy — privacy.html (contents highlighting: js/privacy.js)
   Reading layout: sticky contents list on desktop, "at a glance" box, readable measure.
   .tbc = visible "TO CONFIRM" marker for facts the client still has to supply (remove once confirmed).
   ========================================================================== */
.hero-privacy { height: 54vh; min-height: 440px; max-height: 540px; }
.pp-page { padding: var(--section) 0; }
.pp-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.pp-side { position: sticky; top: 104px; }
.pp-toc ol { border-top: 1px solid var(--border); }
.pp-toc li { border-bottom: 1px solid var(--border); }
.pp-toc a { position: relative; display: flex; align-items: baseline; gap: 0.8rem; padding: 0.62rem 0; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.35; color: var(--ink-soft); transition: color 0.25s, padding-left 0.3s var(--ease); }
.pp-toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 2px; margin-top: -1px; background: var(--sage-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.pp-toc a[aria-current] { color: var(--sage-deep); padding-left: 1.25rem; }
.pp-toc a[aria-current]::before { transform: scaleX(1); }
@media (hover: hover) {
  .pp-toc a:hover { color: var(--sage-deep); padding-left: 1.25rem; }
  .pp-toc a:hover::before { transform: scaleX(1); }
}
.pp-toc-num { flex: none; min-width: 1.4em; font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.06em; color: var(--sage-deep); }
.pp-help { margin-top: 1.5rem; padding: 1.2rem 1.3rem; background: var(--sand); border-left: 3px solid var(--sage-deep); font-size: 1.06rem; line-height: 1.5; color: var(--text-muted); }
.pp-help-title { font-family: var(--font-head); font-size: 0.98rem; font-weight: 500; color: var(--ink); margin-bottom: 0.3rem; }
.pp-help a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

.pp-body { max-width: 760px; min-width: 0; }
.pp-updated { font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 1.4rem; }
.pp-updated-end { margin: 1.4rem 0 0; }
.pp-glance { position: relative; background: var(--warm-white); border: 1px solid var(--border); border-top: 4px solid var(--sage-deep); padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.6rem); margin-bottom: clamp(3rem, 6vw, 4.25rem); box-shadow: 0 18px 44px rgba(58,60,31, 0.07); }
.pp-glance h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); margin-bottom: 1rem; }
.pp-glance li { position: relative; padding-left: 2rem; color: var(--text); }
.pp-glance li + li { margin-top: 0.65rem; }
.pp-glance li::before { content: ""; position: absolute; left: 0.15rem; top: 0.52em; width: 0.95rem; height: 0.5rem; border-left: 2px solid var(--sage-deep); border-bottom: 2px solid var(--sage-deep); transform: rotate(-45deg); }
.pp-glance a, .pp-section a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(95,97,54, 0.45); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color 0.2s; }
.pp-glance a:hover, .pp-section a:hover { text-decoration-color: currentColor; }

.pp-section { scroll-margin-top: 100px; padding-top: clamp(2.25rem, 4vw, 2.75rem); margin-top: clamp(2.25rem, 4vw, 2.75rem); border-top: 1px solid var(--border); }
.pp-glance + .pp-section { margin-top: 0; padding-top: 0; border-top: 0; }
.pp-h { display: flex; align-items: baseline; gap: 1rem; font-size: clamp(1.55rem, 2.3vw, 1.95rem); margin-bottom: 1.1rem; }
.pp-num { flex: none; font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sage-deep); }
.pp-section h3 { font-size: 1.08rem; margin: 1.7rem 0 0.5rem; color: var(--ink); }
.pp-section p { max-width: 68ch; }
.pp-section p + p, .pp-section p + ul, .pp-section ul + p, .pp-section .pp-table-wrap + p, .pp-section p + .pp-table-wrap { margin-top: 0.9rem; }
.pp-section > ul:not(.pp-contact-list) li { position: relative; padding-left: 1.4rem; max-width: 66ch; }
.pp-section > ul:not(.pp-contact-list) li + li { margin-top: 0.55rem; }
.pp-section > ul:not(.pp-contact-list) li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-deep); }
.pp-section strong { font-weight: 600; color: var(--ink-soft); }
.pp-aside { margin-top: 1.4rem !important; padding: 1rem 1.2rem; background: var(--sand); border-left: 3px solid var(--sage); font-size: 1.08rem; color: var(--text-muted); }

/* tables (stack into labelled cards on small screens) */
.pp-table-wrap { margin: 1.3rem 0 0.4rem; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 1.06rem; line-height: 1.5; background: var(--warm-white); border: 1px solid var(--border); }
.pp-table th { font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: #fff; background: var(--sage-deep); padding: 0.8rem 1rem; }
.pp-table td { vertical-align: top; padding: 0.85rem 1rem; border-top: 1px solid var(--border); color: var(--text); }
.pp-table td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
.pp-table td:nth-child(2) { width: 26%; color: var(--text-muted); }
.pp-table-2 td:first-child { width: 36%; }
.pp-table-2 td:nth-child(2) { width: auto; color: var(--text); }
.pp-table tbody tr:nth-child(even) td { background: rgba(236,235,227, 0.55); }

.pp-contact-list { margin-top: 1rem; border-top: 1px solid var(--border); max-width: 560px; }
.pp-contact-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.pp-contact-list .k { font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); }

/* TO CONFIRM marker: visible but tidy */
.pp-tbc-line { margin-top: 0.9rem; }
.tbc { display: inline; padding: 0.15rem 0.5rem; background: #f6edd3; border: 1px dashed #b89443; border-radius: 3px; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.9; color: #6b4f12; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* privacy link under the Leisure page forms */
.form-privacy { margin-top: 1rem; font-size: 1.06rem; color: var(--text-muted); }
.form-privacy a { color: var(--sage-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-privacy a:hover { color: var(--sage-hover); }
.brochure .form-privacy { color: var(--on-dark-muted); }
.brochure .form-privacy a { color: #fff; }
.brochure .form-privacy a:hover { color: #ecebe3; }
/* footer bottom line link */
.footer-bottom a { white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(92,94,69, 0.5); text-underline-offset: 3px; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--sage-deep); text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .pp-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .pp-side { position: static; }
  .pp-toc { background: var(--warm-white); border: 1px solid var(--border); padding: 1.1rem 1.2rem 0.6rem; }
  .pp-toc ol { columns: 2; column-gap: 1.6rem; border-top: 0; }
  .pp-toc li { break-inside: avoid; border-bottom: 0; }
  .pp-toc a { padding: 0.42rem 0; font-size: 0.74rem; }
  .pp-toc a:hover, .pp-toc a[aria-current] { padding-left: 0; }
  .pp-toc a::before { display: none; }
  .pp-help { display: none; }
}
@media (max-width: 760px) {
  .hero-privacy { height: auto; min-height: 0; max-height: none; }
  .hero-privacy .hero-content { min-height: min(460px, 64svh); }
  .pp-toc ol { columns: 1; }
  .pp-h { gap: 0.75rem; }
  .pp-table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; width: 100% !important; }
  .pp-table { border: 0; background: none; }
  .pp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pp-table tr { background: var(--warm-white); border: 1px solid var(--border); border-left: 3px solid var(--sage-deep); padding: 0.4rem 0; }
  .pp-table tr + tr { margin-top: 0.8rem; }
  .pp-table tbody tr:nth-child(even) td { background: none; }
  .pp-table td { border-top: 0; padding: 0.4rem 1rem; }
  .pp-table td::before { content: attr(data-label); display: block; font-family: var(--font-head); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.1rem; }
  .pp-contact-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ==========================================================================
   Testimonials / Reviews page (templates/testimonials.html, js/testimonials.js)
   ========================================================================== */
.hero-reviews .hero-bg { object-position: 50% 60%; }
.rv-summary-wrap { position: relative; z-index: 3; margin-top: -64px; }
.rv-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem clamp(1.5rem, 3.5vw, 3rem); max-width: 980px; margin: 0 auto; padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.5rem, 3.5vw, 2.75rem); background: var(--warm-white); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(30,31,15, 0.14); }
.rv-score { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding-right: clamp(1.5rem, 3.5vw, 3rem); border-right: 1px solid var(--border); }
.rv-score-num { font-family: var(--font-head); font-size: clamp(2.6rem, 4vw, 3.3rem); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.rv-stars { display: inline-block; color: var(--sage-deep); letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; font-family: var(--font-head); }
.rv-stars-lg { font-size: 1.35rem; }
.rv-summary-text { font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
.rv-summary-text a { text-decoration: underline; text-decoration-color: rgba(95,97,54, 0.45); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.rv-summary-text a:hover { color: var(--sage-deep); text-decoration-color: currentColor; }
.rv-summary-links { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; }
.rv-summary-links .btn { padding: 0.7rem 1.3rem; min-height: 46px; font-size: 0.85rem; }

/* Highlights: big pull quotes with the sage rule of the homepage intro statement */
.rv-highlights { padding: var(--section) 0 calc(var(--section) * 0.85); }
.rv-pull-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 6vw, 5.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.rv-pull { position: relative; margin: 0; padding-left: 1.6rem; border-left: 4px solid var(--sage-deep); }
.rv-pull blockquote p { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.38; color: var(--ink); }
.rv-pull blockquote::before { content: "\201C" / ""; display: block; height: 0.55em; margin-bottom: 0.15rem; font-family: var(--font-body); font-size: 4.2rem; line-height: 1; color: var(--foam); }
.rv-pull figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: 1.1rem; }
.rv-pull-name { font-family: var(--font-head); font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.rv-pull-meta { font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* All reviews: column (masonry) grid of cards */
.rv-all { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
.rv-filters { margin-bottom: 2.5rem; }
.rv-filters[hidden] { display: none; }
.rv-chip-n { opacity: 0.6; margin-left: 0.2rem; }
.rv-grid { column-count: 3; column-gap: clamp(1rem, 1.8vw, 1.4rem); }
.rv-card { break-inside: avoid; display: block; margin: 0 0 clamp(1rem, 1.8vw, 1.4rem); padding: clamp(1.4rem, 2.2vw, 1.85rem); background: #fff; border: 1px solid var(--border); transition: border-color 0.3s, box-shadow 0.4s var(--ease); }
.rv-card:hover { border-color: var(--sage); box-shadow: 0 16px 40px rgba(58,60,31, 0.08); }
.rv-card.is-hidden { display: none; }
.rv-card > .rv-stars { margin-bottom: 0.85rem; }
.rv-text p { font-size: 1.14rem; line-height: 1.6; color: var(--text); }
.rv-text p + p { margin-top: 0.7rem; }
.rv-meta { margin-top: 1.15rem; padding-top: 0.95rem; border-top: 1px solid rgba(219,217,202, 0.8); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 0.75rem; }
.rv-name { font-family: var(--font-head); font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.rv-date { font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: right; white-space: nowrap; }
.rv-src { color: var(--sage-deep); font-weight: 500; }
.rv-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.rv-tags li { padding: 0.22rem 0.7rem; border-radius: 100px; background: var(--sand); color: var(--ink-soft); font-family: var(--font-head); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.rv-note { margin-top: 2rem; text-align: center; color: var(--text-muted); font-size: 1.05rem; }
.rv-note a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.rv-note a:hover { color: var(--ink); }
.cta-reviews .cta-alt-line { margin: 1.6rem auto 0; font-size: 1.08rem; color: var(--on-dark-muted); }
.cta-reviews .cta-alt-line a { color: var(--sage-light); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cta-reviews .cta-alt-line a:hover { color: #fff; }
@media (max-width: 1000px) {
  .rv-summary { grid-template-columns: auto 1fr; }
  .rv-summary-links { grid-column: 1 / -1; justify-content: flex-start; }
  .rv-grid { column-count: 2; }
}
@media (max-width: 760px) {
  .rv-summary-wrap { margin-top: -40px; }
  .rv-summary { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .rv-score { padding: 0 0 1rem; border-right: 0; border-bottom: 1px solid var(--border); width: 100%; }
  .rv-summary-links { justify-content: center; }
  .rv-summary-links .btn { flex: 1 1 100%; justify-content: center; }
  .rv-pull-grid { grid-template-columns: 1fr; }
  .rv-grid { column-count: 1; }
}

/* ——— Uses strip: the brochure cover's "Home gym · Garden bar …" treatment, for the web (Leisure hero + homepage card) ——— */
.uses-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; border-top: 1px solid rgba(247,245,233, 0.42); border-bottom: 1px solid rgba(247,245,233, 0.42); text-align: left; }
.uses-strip li { padding: 0.8rem 0 0.8rem 0.85rem; border-left: 1px solid rgba(165,165,142, 0.45); font-family: var(--font-head); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.55; text-transform: uppercase; color: #fff; }
.uses-strip li:first-child { padding-left: 0; border-left: 0; }
.uses-strip li span { display: block; color: var(--sage-light); }
.hero-tagline { font-style: italic; margin-bottom: 1.4rem; }
.uses-strip-hero { max-width: 820px; margin-bottom: 2.2rem; }
.js .hero-content > :nth-child(5) { animation-delay: 0.48s; }
/* homepage card: same strip on a light background */
.uses-tagline { font-style: italic; }
.uses-strip-card { margin: 0.9rem 0 1.1rem; border-color: rgba(58,60,31, 0.22); }
.uses-strip-card li { color: var(--ink); border-left-color: rgba(58,60,31, 0.18); font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.6rem 0 0.6rem 0.55rem; }
.uses-strip-card li span { color: var(--sage-deep); }
/* cards are narrow, so the card strip is always two rows of four (no separator at the start of a row) */
.uses-strip-card { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.15rem; }
.uses-strip-card li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
@media (max-width: 760px) {
  .uses-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.15rem; }
  .uses-strip li { font-size: 0.66rem; letter-spacing: 0.1em; padding: 0.65rem 0 0.65rem 0.6rem; }
  .uses-strip li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .uses-strip-hero { margin-bottom: 1.6rem; }
}
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Garden room poster — Leisure page (templates/options/poster.html, made by make_poster.py).
   Photo fades into a fine-line section drawing; labels with leader lines in the side margins.
   All parts share one 1200 × 1020 frame (.gr-art), so percentages below are in that frame.
   ≤ 980px: badges on the picture + the same <ol> as a numbered key below.
   ========================================================================== */
.gr-poster { padding: var(--section) 0; background: var(--cream); border-top: 1px solid rgba(219,217,202, 0.6); }
.gr-sheet { background: #f7f5e9; background-image: linear-gradient(rgba(58,60,31, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(58,60,31, 0.035) 1px, transparent 1px); background-size: 48px 48px; border: 1px solid rgba(58,60,31, 0.12); padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(1.1rem, 2.6vw, 2rem) clamp(1.2rem, 2.4vw, 1.8rem); overflow: hidden; }
.gr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1rem; margin-bottom: clamp(0.8rem, 2vw, 1.4rem); border-bottom: 1px solid rgba(58,60,31, 0.14); }
.gr-title { margin: 0; font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); line-height: 1.5; }
.gr-sub { margin: 0.35rem 0 0; font-family: var(--font-body); font-style: italic; font-size: 1.08rem; color: var(--text-muted); line-height: 1.35; }
.gr-meta { margin: 0; font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); text-align: right; line-height: 1.7; white-space: nowrap; }
.gr-fig { position: relative; margin: 0; }
.gr-art { position: relative; aspect-ratio: 1200 / 1020; }
.gr-photo { position: absolute; left: 16.667%; top: 0; width: 66.667%; height: 58.824%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.55) 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.55) 84%, transparent 100%); }
.gr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gr-draw path, .gr-draw circle { fill: none; stroke: #7f8070; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.gr-draw .pd2 { stroke-opacity: 0.35; stroke-width: 0.8; }
.gr-draw .pk { stroke: #5c5e4a; stroke-width: 1.5; }
.gr-draw .pl { stroke: #9c9d8a; stroke-width: 0.85; }
.gr-draw .pfaint { stroke: #bdbdac; stroke-width: 0.7; }
.gr-draw .pdash { stroke-dasharray: 5 4; }
.gr-draw .ptxt { fill: #7f8070; stroke: none; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.gr-leads path { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 0.9; }
.gr-dots circle { fill: var(--sage-deep); stroke: #f7f5e9; stroke-width: 2; }
.gr-nums { display: none; }
.gr-nums circle { fill: var(--sage-deep); stroke: #f7f5e9; stroke-width: 3; }
.gr-nums text { fill: #fff; font-family: var(--font-head); font-size: 26px; font-weight: 500; }
.gr-key { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.gr-key li { position: absolute; top: var(--y); transform: translateY(-50%); width: 15.4%; font-family: var(--font-head); font-size: 0.74rem; line-height: 1.45; color: var(--ink); pointer-events: auto; }
.gr-key .gk-l { left: 0; text-align: right; }
.gr-key .gk-r { right: 0; text-align: left; }
.gr-key .pk-n { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; color: var(--sage-deep); margin-bottom: 0.15rem; }
@media (max-width: 980px) {
  .gr-art { width: 133.333%; margin-left: -16.667%; }
  .gr-leads, .gr-dots { display: none; }
  .gr-nums { display: inline; }
  .gr-key { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid rgba(58,60,31, 0.14); counter-reset: none; }
  .gr-key li { position: static; transform: none; width: auto; text-align: left !important; display: grid; grid-template-columns: 1.7rem 1fr; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid rgba(58,60,31, 0.08); font-size: 0.82rem; }
  .gr-key .pk-n { display: inline-flex; justify-content: center; align-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sage-deep); color: #fff; letter-spacing: 0; font-size: 0.62rem; margin: 0; transform: translateY(-0.05rem); }
}
@media (max-width: 600px) {
  .gr-key { grid-template-columns: 1fr; }
  .gr-head { flex-direction: column; gap: 0.5rem; }
  .gr-meta { display: none; }
  .gr-title { font-size: 0.72rem; letter-spacing: 0.26em; }
}

/* ==========================================================================
   About page (templates/about.html, 13 Oct 2026)
   ========================================================================== */
.hero-about .hero-bg { object-position: 50% 55%; }
.hero-about h1 { line-height: 1.08; }
.ab-story { padding: var(--section) 0; background: var(--cream); }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.ab-story-copy p { color: var(--text-muted); font-size: 1.12rem; line-height: 1.7; max-width: 52ch; }
.ab-story-copy p + p { margin-top: 1.1rem; }
.ab-story-copy .ab-lead { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.45; color: var(--ink); }
.ab-story-photo { margin: 0; }
.ab-story-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ab-facts { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
.ab-facts-head { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.ab-facts-intro { color: var(--text-muted); font-size: 1.1rem; margin-top: 1rem; }
.ab-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); margin: 0; border-top: 1px solid rgba(58,60,31, 0.22); }
.ab-facts-list > div { padding: 1.3rem 0 1.5rem; border-bottom: 1px solid rgba(58,60,31, 0.12); }
.ab-facts-list dt { font-family: var(--font-head); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.5rem; }
.ab-facts-list dd { margin: 0; font-size: 1.2rem; line-height: 1.4; color: var(--ink); }
.ab-photos { padding: 0 0 var(--section); background: var(--warm-white); }
.ab-photos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.ab-photos-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ab-cta { padding: var(--section) 0; background: var(--cream); border-top: 1px solid rgba(219,217,202, 0.6); text-align: center; }
.ab-cta-inner { max-width: 620px; }
.ab-cta p { color: var(--text-muted); font-size: 1.12rem; margin: 0.8rem 0 1.8rem; }
@media (max-width: 900px) {
  .ab-story-grid { grid-template-columns: 1fr; }
  .ab-story-photo img { aspect-ratio: 4 / 3; }
  .ab-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ab-facts-list { grid-template-columns: 1fr; }
  .ab-photos-grid { grid-template-columns: 1fr; }
  .ab-photos-grid > :nth-child(n+2), .ab-photos-grid > :nth-child(n+2) img { display: none; }
}

/* <picture> wrappers added by build_site.py (WebP with JPEG fallback) must not affect layout */
picture { display: contents; }
picture > source { display: none; }

/* ——— Garden rooms hub cards + child pages (13 Oct 2026) ——— */
.gr-card h3 a { color: inherit; }
.gr-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gr-card .service-more { align-self: flex-start; }
.gr-card.type-photo .service-more { color: var(--sage-light); }
.gr-card:hover .service-more .arrow { transform: translateX(5px); }
.gr-card:focus-within { outline: 2px solid var(--sage); outline-offset: 3px; }
/* Garden rooms hub cards (18 Oct 2026, Josh). Photo cards: deeper gradient behind the text + a soft text shadow, so cream text
   stays readable (WCAG AA) over bright photos. Sketch cards: a drawing (never an AI photo) for rooms with no real photo yet. */
.gr-card.type-photo::before { -webkit-mask-image: none; mask-image: none; background: linear-gradient(180deg, rgba(34,35,18,0) 10%, rgba(34,35,18,.5) 36%, rgba(34,35,18,.86) 58%, rgba(34,35,18,.94) 100%); }
.gr-card.type-photo h3, .gr-card.type-photo p, .gr-card.type-photo .service-more { text-shadow: 0 1px 3px rgba(20,21,10,.65); }
.gr-card.type-photo p { color: rgba(247,245,233,.92); }
/* Ink drawings (Windsor reel style, 18 Oct 2026): the whole drawing sits in flow above the text, so the building is never cut and text is on plain cream */
.gr-card.type-sketch { --pad: clamp(1.5rem, 2.6vw, 2.2rem); background: var(--cream); justify-content: flex-start; aspect-ratio: auto; padding-top: var(--pad); }
.gr-card.type-sketch img { position: relative; inset: auto; z-index: 0; display: block; width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; aspect-ratio: 16 / 8.6; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1.1rem; object-fit: cover; object-position: 50% 58%; }
.gr-card.type-sketch:hover img { transform: none; }
.gr-card.type-sketch .type-body { margin-top: auto; }
.gr-card.type-sketch::before { background: none; }
.gr-card.type-sketch h3 { color: var(--ink); }
.gr-card.type-sketch p { color: var(--text-muted); }
.gr-card.type-sketch h3, .gr-card.type-sketch p, .gr-card.type-sketch .service-more { text-shadow: none; }
.gr-card.type-sketch .service-more { color: var(--ink); }
.type-tag-sketch { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(58,60,31,.25); }
.type-tag-sketch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); border: 1px solid rgba(58,60,31,.4); }
@media (min-width: 901px) {
  /* the wide last card (pool house): whole drawing on the right, text on the left */
  .gr-cards > li.type-sketch:last-child:nth-child(3n+1) { justify-content: flex-end; }
  .gr-cards > li.type-sketch:last-child:nth-child(3n+1) img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: contain; object-position: 92% 50%; padding: 1rem 0; box-sizing: border-box; }
  .gr-cards > li.type-sketch:last-child:nth-child(3n+1)::before { background: linear-gradient(90deg, rgba(247,245,233,.97) 38%, rgba(247,245,233,0) 62%); }
}
.gr-hero-note { position: absolute; right: 18px; bottom: 14px; z-index: 2; margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.gr-photos { padding: 0 0 var(--section); }
.gr-photos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); max-width: 980px; }
.gr-photo-fig img { width: 100%; height: auto; max-height: 640px; object-fit: cover; display: block; }
.gr-photo-fig figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-muted); }
.gr-included { padding: var(--section) 0; background: var(--warm-white); border-top: 1px solid rgba(219,217,202, 0.6); }
.gr-inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); }
.gr-inc-item { padding: 1.2rem 1.4rem 1.3rem 0; border-bottom: 1px solid var(--border); }
.gr-inc-item dt { font-family: var(--font-head); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.35rem; }
.gr-inc-item dd { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.gr-inc-planning { margin-top: 1.6rem; font-size: 1.1rem; color: var(--ink-soft); }
.gr-more { padding: var(--section) 0; border-top: 1px solid rgba(219,217,202, 0.6); }
.gr-more-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.6rem 0 2rem; }
.gr-more-list a { display: inline-flex; gap: 0.5rem; padding: 0.7rem 1.2rem; border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink); background: var(--warm-white); }
.gr-more-list a:hover { border-color: var(--sage); color: var(--sage-deep); }
.gr-more-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
@media (max-width: 900px) { .gr-inc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .gr-inc-grid { grid-template-columns: 1fr; }
  .gr-hero-note { left: 18px; right: 18px; text-align: right; }
}
/* 7 cards: let the last one fill its row instead of leaving empty cells */
@media (min-width: 901px) { .gr-cards > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; min-height: 220px; } }
@media (min-width: 561px) and (max-width: 900px) { .gr-cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 220px; } }
/* Seven nav links since "Garden rooms" was added (13 Oct 2026): tighten step by step so the bar stays on one line
   down to the mobile menu (860px). Same font and style, just smaller sizes/gaps at these widths. */
@media (max-width: 1240px) { .main-nav ul { gap: 1.1rem; } .main-nav a:not(.btn) { font-size: 1rem; letter-spacing: 0.04em; } }
@media (max-width: 1080px) { .main-nav ul { gap: 0.85rem; } .main-nav a:not(.btn) { font-size: 0.9rem; letter-spacing: 0.03em; } }
@media (max-width: 960px) { .main-nav ul { gap: 0.7rem; } .main-nav a:not(.btn) { font-size: 0.82rem; letter-spacing: 0.02em; } }
@media (max-width: 860px) { .main-nav a:not(.btn) { font-size: 1.3rem; } }

/* ——— Main nav "More" dropdown (13 Oct 2026: 4 service hubs + Projects + More) ——— */
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border: 0; background: none; color: inherit; cursor: pointer;
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-more-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.nav-more.is-open .nav-more-caret { transform: translateY(1px) rotate(225deg); }
.nav-more.is-current .nav-more-btn { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.main-nav .nav-more-menu { position: absolute; top: calc(100% + 0.6rem); right: -1rem; display: none; flex-direction: column; align-items: stretch; gap: 0; min-width: 190px; padding: 0.5rem 0;
  background: var(--cream); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(58,60,31, 0.14); }
.nav-more.is-open .nav-more-menu { display: flex; }
.main-nav .nav-more-menu a:not(.btn) { display: block; padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.main-nav .nav-more-menu a:not(.btn)::after { display: none; }
.main-nav .nav-more-menu a:hover, .main-nav .nav-more-menu a[aria-current] { color: var(--sage-deep); background: var(--warm-white); }
@media (max-width: 1240px) { .nav-more-btn { font-size: 1rem; letter-spacing: 0.04em; } }
@media (max-width: 1080px) { .nav-more-btn { font-size: 0.9rem; letter-spacing: 0.03em; } }
@media (max-width: 960px) { .nav-more-btn { font-size: 0.82rem; letter-spacing: 0.02em; } }
@media (max-width: 860px) {
  .nav-more-btn { display: none; }
  .main-nav .nav-more-menu { position: static; display: flex; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; }
  .main-nav .nav-more-menu li:last-child { border-bottom: 0; }
  .main-nav .nav-more-menu a:not(.btn) { padding: 0.95rem 0; font-size: 1.3rem; }
  .nav-more { border-bottom: 0 !important; }
}

/* ——— Services v2 pages: extensions, guides, new builds, shop fit-outs (13 Oct 2026) ——— */
.hero-plain { background: var(--ink-deep); }
.hero-plain::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(219,217,202, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(219,217,202, 0.07) 1px, transparent 1px); background-size: 32px 32px; }
.hero-plain .hero-shade { display: none; }
.hero-plain { height: auto; min-height: 0; max-height: none; }
.hero-plain .hero-content { padding: 190px 0 90px; }
.sv-section { padding: 0 0 var(--section); }
.sv-section-inner { max-width: 820px; }
.sv-section h2 { margin-bottom: 1rem; }
.sv-section p { color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; font-size: 1.1rem; }
.sv-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.sv-list li { position: relative; padding: 0.95rem 0 0.95rem 1.6rem; border-bottom: 1px solid var(--border); color: var(--ink-soft); line-height: 1.6; font-size: 1.05rem; }
.sv-list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.sv-note { margin-top: 1.2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--sage); background: var(--warm-white); font-size: 0.98rem !important; }
.sv-gallery { padding: 0 0 var(--section); }
.sv-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.2rem); }
.sv-gallery-grid figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sv-gallery-grid figcaption { margin-top: 0.5rem; font-size: 0.92rem; color: var(--text-muted); }
.sv-related { padding: var(--section) 0; border-top: 1px solid rgba(219,217,202, 0.6); background: var(--warm-white); }
.sv-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.6rem; }
.sv-rel-card { position: relative; padding: 1.4rem 1.5rem 1.5rem; background: var(--cream); border: 1px solid var(--border); }
.sv-rel-card .tile-cat { display: block; margin-bottom: 0.5rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-deep); }
.sv-rel-card h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.sv-rel-card h3 a { color: inherit; }
.sv-rel-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sv-rel-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }
.sv-rel-card:hover { border-color: var(--sage); }
.sv-cta { padding: var(--section) 0; background: var(--ink-deep); color: var(--on-dark); text-align: center; }
.sv-cta-inner { max-width: 760px; }
.sv-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0.4rem 0 0.8rem; }
.sv-cta p:not(.label) { color: var(--on-dark-muted); margin-bottom: 1.6rem; font-size: 1.1rem; }
@media (max-width: 900px) { .sv-gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sv-gallery-grid { grid-template-columns: 1fr; } .hero-plain .hero-content { padding: 150px 0 60px; } }
/* Header between the mobile menu (861px) and 1300px: size the nav fluidly with the window instead of in steps, so it
   never wraps just above a breakpoint (replaces the stepped sizes above for this range). */
@media (min-width: 861px) and (max-width: 1300px) {
  .main-nav ul { gap: calc(3.2vw - 20px); }
  .main-nav a:not(.btn), .nav-more-btn { font-size: calc(0.4px + 1.39vw); letter-spacing: 0.035em; }
  .main-nav .nav-more-menu a:not(.btn) { font-size: 0.95rem; }
}

/* Clean top nav (13 Oct 2026): Services ▾, Projects, More ▾. Only three items, so give them generous, even spacing;
   the Services menu opens under its own button (left-aligned); both menus share the More styling. */
@media (min-width: 861px) {
  .main-nav > ul { gap: clamp(2rem, 3.4vw, 3.25rem); }
  .main-nav a:not(.btn), .nav-more-btn { font-size: 1.05rem; letter-spacing: 0.05em; }
  .main-nav .nav-more-menu a:not(.btn) { font-size: 0.95rem; letter-spacing: 0.03em; }
  .main-nav .nav-services .nav-more-menu { right: auto; left: -1.2rem; min-width: 210px; }
  .nav-more:hover .nav-more-menu { display: flex; }
  .nav-more:hover .nav-more-caret { transform: translateY(1px) rotate(225deg); }
  .nav-more::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.8rem; } /* hover bridge */
}

/* ——— Sketch sheets (13 Oct 2026): hub + 7 garden room pages (build_site.py sketch_block) ——— */
.sk-sheet { padding: var(--section) 0; background: #ecebe3; border-top: 1px solid rgba(219,217,202, 0.6); }
.sk-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.sk-intro { margin-top: .75rem; }
.sk-figure { margin: 0; }
.sk-full { display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 18px rgba(40, 38, 34, .12); cursor: zoom-in; }
.sk-full img { display: block; width: 100%; height: auto; }
.sk-panels { display: none; }
.sk-figure figcaption { margin-top: .75rem; text-align: center; font-size: .85rem; opacity: .75; }
.sk-cap-m { display: none; }
@media (max-width: 700px) {
  .sk-full, .sk-cap-d { display: none; }
  .sk-cap-m { display: inline; }
  .sk-panels { display: grid; gap: .75rem; }
  .sk-panels a { display: block; box-shadow: 0 2px 12px rgba(40, 38, 34, .12); border-radius: 4px; overflow: hidden; }
  .sk-panels img { display: block; width: 100%; height: auto; }
}

/* Case study: short clip (16 Oct 2026) */
.cs-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--sand); object-fit: cover; }
.cs-film .split-head { margin-bottom: 1.6rem; }

/* Case studies index (16 Oct 2026) */
.cases { padding: var(--section) 0; }
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.case-card { background: var(--warm-white, #fbfaf3); border: 1px solid var(--border); display: flex; flex-direction: column; }
.case-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case-card:hover .case-media img { transform: scale(1.03); }
.case-media .ph { height: 100%; }
.case-body { padding: 1.5rem 1.6rem 1.8rem; }
.case-body h2 { font-size: 1.5rem; margin: 0.3rem 0 0.6rem; }
.case-body h2 a { color: inherit; text-decoration: none; }
.case-body h2 a:hover { text-decoration: underline; }
.case-body p:not(.label) { color: var(--text-muted); margin-bottom: 1rem; }
.status-pill-light { color: var(--sage-deep); border-color: var(--sage-light); }
.cases-more { margin-top: 2.4rem; text-align: center; }
@media (max-width: 760px) { .cases-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Oct 2026 — editorial homepage (from hero-mock/index.html) in the olive palette
   ========================================================================== */
.ed-label { font: 500 0.74rem/1.3 var(--font-head); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-deep); margin: 0; }
/* header sits over a cream hero on the homepage: dark logo + dark nav from the start */
.has-ed-hero .site-header:not(.is-stuck) { color: var(--ink); }
.has-ed-hero .site-header:not(.is-stuck) .brand-light { opacity: 0; }
.has-ed-hero .site-header:not(.is-stuck) .brand-dark { opacity: 1; }
.has-ed-hero .site-header:not(.is-stuck) .brand img { height: 56px; }
.ed-hero { position: relative; min-height: 100svh; padding: 8rem clamp(1.25rem, 4vw, 3rem) 3rem; display: grid; grid-template-rows: auto 1fr auto; overflow: clip; background: var(--cream); }
.ed-hero-top { display: flex; justify-content: space-between; gap: 1rem; position: relative; z-index: 3; }
.ed-hero h1 { position: relative; z-index: 3; font-family: var(--font-body); font-weight: 500; font-size: clamp(4rem, 11.5vw, 12rem); line-height: 0.9; letter-spacing: -0.045em; color: var(--ink); margin-top: 2.5rem; }
.ed-hero h1 em { font-style: italic; color: var(--sage-deep); }
.ed-hero h1 .ed-r { display: block; padding-left: 12vw; text-shadow: 0 0 30px rgba(247,245,233,0.9); }
.ed-cut { position: absolute; z-index: 2; right: -1vw; bottom: -6vh; width: min(50vw, 820px); height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); will-change: transform; filter: drop-shadow(0 30px 40px rgba(58,60,31,0.18)); }
.ed-hero-foot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.ed-sub { max-width: 24rem; font-size: 1.3rem; line-height: 1.35; color: var(--text); }
.ed-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ed-scrollcue { writing-mode: vertical-rl; }
.ed-feat { padding: var(--section) 0; background: linear-gradient(var(--sand), var(--cream) 30%); }
.ed-feat h2 { font-family: var(--font-body); font-weight: 500; font-size: clamp(3rem, 9vw, 8rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--ink); margin: 1rem 0 3rem; }
.ed-feat h2 em { color: var(--sage-deep); }
.ed-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ed-card img, .ed-card .ph { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; margin-bottom: 0.9rem; }   /* height:auto: the width/height attributes otherwise stretched it (the old blurry oak on phones) */
.ed-card .ph { height: auto; }
.ed-card h3 { font-family: var(--font-body); font-weight: 500; font-size: 2rem; color: var(--ink); margin: 0.4rem 0 0.3rem; }
.ed-card h3 a:hover { color: var(--sage-deep); }
.ed-card p { font-size: 1.15rem; }
.ed-card .ed-label { font-size: 0.72rem; display: flex; align-items: center; gap: 0.5rem; }
/* Ongoing projects: one wide card (ongoing_section.py). Photo 4:5 at every width, so it crops the same on phones. */
/* 19 Oct 2026 (Josh: photo too big, didn't flow): balanced two-column panel, 4:3 photo capped in height, heading sized like
   neighbouring section titles, padding trimmed so the gap into "Our portfolio" matches the rest. Backup: backups/ongoing-2026-10-19/ */
#featured-project { padding: var(--section) 0 calc(var(--section) * 0.5); }
#featured-project h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0.8rem 0 2rem; }
.ed-cards.is-single { grid-template-columns: minmax(0, 1fr); }
.ed-card-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; background: var(--warm-white); border: 1px solid rgba(219,217,202, 0.8); border-radius: 1.25rem; padding: clamp(1rem, 2vw, 1.5rem); }
.ed-card-media { position: relative; display: block; max-width: none; }
.ed-card-wide img { margin-bottom: 0; aspect-ratio: 4 / 3; max-height: 24rem; object-position: 40% 60%; }
.ed-card-wide .ed-card-body { padding-right: clamp(0rem, 3vw, 2.5rem); }
.ed-card-note { position: absolute; left: 1rem; bottom: 1rem; background: rgba(247,245,233,.92); color: #707256; padding: .45em .9em; border-radius: 999px; font: 500 .66rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; }
.ed-card-wide h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; margin: .6rem 0 .8rem; }
.ed-card-wide .ed-card-body p:not(.ed-label) { max-width: 30rem; }
.ed-card-more { display: inline-block; margin-top: 1.2rem; font: 500 .78rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: .2em; }
.ed-card-more:hover { color: var(--sage-deep); }
@media (max-width: 760px) {
  .ed-card-wide { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 0.75rem 0.75rem 1.25rem; }
  .ed-card-wide .ed-card-body { padding: 0 0.5rem; }
  .ed-card-wide img { max-height: none; }
  .ed-card-media { max-width: none; }
}
@media (max-width: 760px) {
  .ed-hero { padding-top: 6.5rem; }
  .ed-hero h1 { font-size: clamp(3.2rem, 17vw, 6rem); margin-top: 1.5rem; }
  .ed-hero h1 .ed-r { padding-left: 0; }
  .ed-label-r { display: none; }
  .ed-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; min-height: 0; padding-bottom: 2.5rem; }
  .ed-cut { position: relative; right: auto; bottom: auto; width: 112vw; max-width: none; margin: 0.5rem 0 0 -2vw; align-self: center; }
  .ed-hero-foot { flex-direction: column; align-items: start; }
  .ed-sub { font-size: 1.15rem; }
  .ed-scrollcue { display: none; }
  .ed-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-cut { transform: none !important; }
}

/* ——— Areas we cover: interactive map (templates/partials/areas-map.html + js/areas-map.js) ——— */
.am { background: var(--ink); color: var(--on-dark); padding: var(--section) 0; overflow: clip; }
.am-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 3rem; align-items: center; max-width: 1400px; }
.am-label { font: 500 0.74rem var(--font-head); letter-spacing: 0.2em; color: var(--lime); }
.am h2 { font-family: var(--font-body); color: var(--on-dark); font-weight: 500; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0.8rem 0 1rem; }
.am-lede { font-size: 1.2rem; color: var(--stone-2); max-width: 30rem; margin-bottom: 1.6rem; }
.am-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.am-fallback { grid-column: 1 / -1; columns: 2; font-size: 1.2rem; }
.am-area { all: unset; box-sizing: border-box; cursor: pointer; font: 500 0.72rem var(--font-head); letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); display: block; padding: 0.3rem 0; border-bottom: 1px solid rgba(165,165,142,0.35); width: 100%; }
.am-area:focus-visible, .am-town:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.am-area.on { color: var(--lime); border-color: var(--lime); }
.am-grp ul { padding: 0.4rem 0 0; }
.am-town { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; font-family: var(--font-body); font-size: 1.3rem; line-height: 1.4; padding: 0.12rem 0 0.12rem 1.1rem; color: var(--on-dark); transition: color 0.25s; }
.am-town::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); transform: translateY(-50%) scale(0); transition: transform 0.3s var(--ease); }
.am-town.on { color: var(--lime); }
.am-town.on::before { transform: translateY(-50%) scale(1); }
.am-town small { font: 500 0.62rem var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-left: 0.4rem; }
.am-mapwrap { position: relative; }
.am-map { width: 100%; height: auto; display: block; overflow: visible; }
.am-region { fill: var(--sage); fill-opacity: 0.3; stroke: var(--sage); stroke-opacity: 0.4; stroke-width: 1; transition: fill 0.4s, fill-opacity 0.4s; }
.am-region.on { fill: var(--lime); fill-opacity: 0.28; stroke: var(--lime); stroke-opacity: 0.9; }
.am-region.am-london { fill: none; stroke-dasharray: 4 5; stroke: var(--lime); stroke-opacity: 0.6; }
.am-region.am-london.on { fill: var(--lime); fill-opacity: 0.16; }
.am-ring { fill: none; stroke: var(--stone-2); stroke-opacity: 0.28; stroke-dasharray: 3 7; }
.am-rname { font: 500 10px var(--font-head); letter-spacing: 0.2em; text-transform: uppercase; fill: var(--sage); }
.am-pin { cursor: pointer; opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s, transform 0.5s var(--ease); }
.am-map.shown .am-pin { opacity: 1; transform: none; }
.am-dot { fill: var(--on-dark); stroke: var(--ink); stroke-width: 1.5; }
.am-hit { fill: transparent; }
.am-tname { font: 500 15px var(--font-body); fill: var(--on-dark); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
.am-pill { opacity: 0; transition: opacity 0.25s; }
.am-pill rect { fill: var(--lime); }
.am-pill text { fill: var(--ink); font: 600 14px var(--font-body); }
.am-pin.on .am-pill { opacity: 1; }
.am-pin.on .am-dot { fill: var(--lime); }
.am-pin.on .am-tname { opacity: 0; }
.am-home .am-dot { fill: var(--lime); stroke: var(--on-dark); }
.am-pulse { fill: none; stroke: var(--lime); stroke-width: 1.5; animation: am-pulse 2.4s infinite; }
@keyframes am-pulse { 0% { r: 7; opacity: 0.9; } 100% { r: 26; opacity: 0; } }
.am-tip { position: absolute; pointer-events: none; background: var(--on-dark); color: var(--ink); border-radius: 999px; padding: 0.45em 1em; font: 500 0.72rem var(--font-head); letter-spacing: 0.08em; white-space: nowrap; transform: translate(-50%, -150%); opacity: 0; transition: opacity 0.2s; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.am-tip.on { opacity: 1; }
.am-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; font: 500 0.66rem var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.am-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.45rem; vertical-align: -1px; }
.am-k-home { background: var(--lime); } .am-k-town { background: var(--on-dark); } .am-k-ldn { border: 1px dashed var(--lime); }
@media (max-width: 820px) {
  .am-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .am-mapwrap { order: -1; margin: 0 -0.5rem; }
  .am-cols { gap: 1rem 1.2rem; }
  .am-town { font-size: 1.15rem; }
  .am-tname { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .am-pulse { animation: none; } .am-pin { transition: none; } }

/* ——— Thank-you page for the garden room designer (thank-you-design.html) ——— */
.ty-block { padding: var(--section) 0; background: var(--cream, #f7f5e9); }
.ty-inner { max-width: 760px; text-align: center; }
.ty-inner p { font-size: 1.3rem; line-height: 1.5; margin: 0 0 1.75rem; }
.ty-inner a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ty-inner .hero-ctas { justify-content: center; }
/* 10-photo gallery (Chelsea progress, 20 Oct 2026): the 10th tile is a 2×2 block (full width on mobile) so the grid closes with no gap */
.project-gallery.is-10 > figure:nth-child(10) { grid-column: span 2; grid-row: span 2; }
/* SEO batch (20 Oct 2026): free consultation line under hero buttons, hub quote block, 404 links */
.hero-free { margin: 0.9rem 0 0; font-size: 0.95rem; letter-spacing: 0.02em; opacity: 0.92; }
.sv-quote { padding: var(--section) 0 0; }
.sv-quote-box { background: var(--sand); border-left: 3px solid var(--olive-2); padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem 3rem; align-items: center; }
.sv-quote-box h2 { margin: 0.35rem 0 0.6rem; }
.sv-quote-box p { margin: 0; }
.sv-quote-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
@media (max-width: 760px) { .sv-quote-box { grid-template-columns: 1fr; } .sv-quote-actions { justify-content: flex-start; } }
.nf-links { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: center; }
.nf-links a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.case-summary { margin: 0.4rem 0 0; }
.cases-intro { max-width: 46rem; margin: 0 0 2.25rem; }
/* Ongoing card: row of 3 progress photos (20 Oct 2026), linking to /projects/chelsea-music-club/#progress */
.ed-progress-strip { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1rem); }
.ed-progress-strip li { margin: 0; }
.ed-progress-strip a { display: block; overflow: hidden; border-radius: inherit; }
.ed-card-wide .ed-progress-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: none; height: auto; object-fit: cover; object-position: 50% 55%; transition: transform .6s ease; }
.ed-progress-strip a:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .ed-progress-strip { padding: 0 0.25rem; } .ed-card-wide .ed-progress-strip img { aspect-ratio: 1 / 1; } }
#progress { scroll-margin-top: 6rem; }
/* Case study intro with no lead photo (Chelsea, 20 Oct 2026): one readable column */
.cs-brief.is-text-only { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.cs-brief.is-text-only .cs-story { padding-right: 0; }
.cs-overview + .cs-gallery { padding-top: 0; }   /* "The work" removed (Chelsea): keep one section gap, not two */
.cs-brief.is-text-only .service-more { margin-left: 1.25rem; }
@media (max-width: 760px) { .cs-brief.is-text-only .service-more { margin-left: 0; } }
/* Chelsea progress update (20 Oct 2026): copy + "Where we are now" panel, between the intro and the gallery */
.cs-update { padding: 0 0 var(--section); }
.cs-update-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cs-update-copy .section-title { margin: 0.6rem 0 1.4rem; max-width: 30ch; }
.cs-update-copy .label-rule { max-width: 40rem; }
.cs-update-copy p:not(.label) { margin-bottom: 1.15rem; max-width: 40rem; }
.cs-now { background: var(--sand); border-left: 3px solid var(--olive-2); padding: clamp(1.4rem, 3vw, 2.2rem); }
.cs-now h3 { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: 0.02em; }
.cs-now ul { list-style: none; margin: 0; padding: 0; }
.cs-now li { position: relative; padding: 0.8rem 0 0.8rem 1.5rem; border-top: 1px solid rgba(58,60,31, 0.14); line-height: 1.45; }
.cs-now li:first-child { border-top: 0; padding-top: 0.2rem; }
.cs-now li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--olive-2); }
.cs-now li:first-child::before { top: 0.75rem; }
.cs-now-k { display: block; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .cs-update-grid { grid-template-columns: minmax(0, 1fr); } }
.cs-update + .cs-gallery { padding-top: 0; }
/* Review trust strip (20 Oct 2026; review_strip.py): initials avatars + gold stars + rating, links to /testimonials/ */
.rv-strip { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.1rem; text-decoration: none; color: var(--ink); line-height: 1.15; }
.rv-strip-av { display: inline-flex; }
.rv-strip-av span { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; font: 600 0.6rem/1 var(--font-head); letter-spacing: 0; color: var(--warm-white, #fbfaf3); border: 2px solid var(--cream, #f7f5e9); margin-left: -0.4rem; }
.rv-strip-av span:first-child { margin-left: 0; }
.rv-strip-av span:nth-child(1) { background: #5e6236; } .rv-strip-av span:nth-child(2) { background: #8a9a6e; }
.rv-strip-av span:nth-child(3) { background: #707256; } .rv-strip-av span:nth-child(4) { background: #a3ad86; color: #2f311a; }
.rv-strip-av span:nth-child(5) { background: #3a3c1f; }
.rv-strip-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.rv-strip-top { display: inline-flex; align-items: center; gap: 0.4rem; }
.rv-strip-stars { color: #e0b341; letter-spacing: 0.08em; font-size: 0.9rem; }
.rv-strip-top strong { font: 600 0.9rem var(--font-head); }
.rv-strip-line { font: 500 0.72rem var(--font-head); letter-spacing: 0.06em; opacity: 0.85; }
.rv-strip:hover .rv-strip-line { text-decoration: underline; text-underline-offset: 0.2em; }
.rv-strip-dark { color: #fbfaf3; text-shadow: 0 1px 6px rgba(20,21,10, 0.55); }
.rv-strip-dark .rv-strip-av span { border-color: rgba(251,250,243, 0.9); text-shadow: none; box-shadow: 0 1px 6px rgba(20,21,10, 0.35); }
.rv-strip-dark .rv-strip-stars { text-shadow: 0 1px 4px rgba(20,21,10, 0.6); }
.cta-box .rv-strip { margin-top: 1.5rem; }
.sv-quote-box .rv-strip { margin-top: 1rem; }
.wdd-trust { margin-top: 0.25rem; }
@media (max-width: 560px) { .rv-strip-av span { width: 1.8rem; height: 1.8rem; font-size: 0.58rem; } .rv-strip { gap: 0.6rem; } }

/* ——— Footer (22 Oct 2026, approved by Josh; after littlegreenrooms, no photo). Markup: partials/footer.html ——— */
.site-footer.wdf{ background:var(--cream); padding:0; border:0; color:var(--on-dark); font-size:1rem; }
.wdf-panel{ background:var(--ink-deep); border-radius:0 0 22px 22px; padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,3vw,2.75rem) clamp(1rem,2vw,1.6rem); min-height:clamp(520px,62vh,700px); display:flex; flex-direction:column; }
.wdf-contact{ display:flex; flex-direction:column; align-items:flex-start; font-family:var(--font-head); font-size:clamp(1.3rem,1.8vw,1.7rem); line-height:1.2; }
.wdf-gh{ font:inherit; color:var(--on-dark); margin:0; }
.wdf-muted{ color:var(--sage); transition:color .2s; } .wdf-muted:hover{ color:var(--sage-light); }
.wdf-cu{ color:var(--on-dark); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.wdf-ig{ margin-top:auto; align-self:flex-end; color:var(--lime); padding:.4rem; margin-bottom:clamp(2rem,5vw,4rem); }
.wdf a:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
.wdf-name{ display:inline-block; align-self:center; font-family:var(--font-head); font-weight:500; color:var(--on-dark); font-size:11.3vw; line-height:.9; letter-spacing:-.02em; white-space:nowrap; margin:0; text-align:center; }
.wdf-legal{ display:flex; justify-content:space-between; flex-wrap:wrap; line-height:1.7; gap:.6rem 2rem; padding:1.4rem clamp(1.25rem,3vw,2.75rem) 2rem; font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
.wdf-legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px){ .wdf-name{ font-size:10.6vw; } .wdf-legal{ flex-direction:column; } }
/* Clear the fixed chat launcher (64px disc + 20px inset; 56px + 14px on mobile) so it never covers the legal row */
.wdf-legal{ padding-bottom:calc(64px + 20px + 1.5rem); }
@media (max-width:600px){ .wdf-legal{ padding-bottom:calc(56px + 14px + 1.25rem); } }

/* ——— Live chat launcher (22 Oct 2026, after londonurban.co.uk): footer-green disc + "Let's talk…" pill, bottom-right; opens Crisp (partials/footer.html) ——— */
.wdc{ position:fixed; right:20px; bottom:20px; z-index:900; display:flex; align-items:center; gap:10px; }
.wdc[hidden]{ display:none; }
.wdc button{ cursor:pointer; border:0; font-family:var(--font-head); color:var(--on-dark); background:var(--ink-deep); box-shadow:0 8px 22px rgba(28,30,14,.28); transition:transform .3s, box-shadow .3s; }
.wdc button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(28,30,14,.34); }
.wdc button:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; }
.wdc-pill{ padding:.8rem 1.15rem; border-radius:12px; font-size:.95rem; font-weight:400; }
.wdc-disc{ position:relative; width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.56rem; font-weight:500; line-height:1.2; letter-spacing:.08em; text-transform:uppercase; }
.wdc-badge{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--lime); color:var(--ink-deep); font-size:.7rem; letter-spacing:0; display:inline-flex; align-items:center; justify-content:center; }
.wdc-badge[hidden]{ display:none; }
@media (max-width:600px){ .wdc{ right:14px; bottom:14px; gap:8px; } .wdc-disc{ width:56px; height:56px; font-size:.5rem; } .wdc-pill{ padding:.7rem 1rem; font-size:.9rem; } }
@media print{ .wdc{ display:none; } }