/* site.css — the website kit's one stylesheet.
   Job of this file: the whole visual system — tokens, type, layout, every component — for every site the kit builds.
   Brand colours, font stacks and the surface photo are NOT edited here: build-site.py writes the block between the
   BRAND-TOKENS markers from site.json → brand. Everything below the markers is the design, copied 2026-08-31 from the
   design lab's four frozen rounds (its tokens.css and brand-system.md are the source of truth):
   1 · "Green-black & Chalk" — two worlds: dark sections are the brand moments, chalk sections are for reading.
       Green is light, not paint: seams, labels, links, focus — and exactly one green fill, the primary button.
   2 · Archivo (h1, h2, eyebrows only) set wide + Work Sans for every word a reader works through and every control.
   3 · "Seam" — every length one of ten steps, square corners, no boxes; a 2 px silver joint marks a structural edge.
   4 · The photographed stone wall behind the hero and the closing band; text on its calm left half. */

/* BRAND-TOKENS:start */
:root {
  /* written by build-site.py from site.json → brand; edit site.json, not this block */
  --sheet: #F5F3EE;
  --sheet-rgb: 245 243 238;
  --stone: #FBF9F4;
  --stone-rgb: 251 249 244;
  --stone-deep: #7A867F;
  --stone-deep-rgb: 122 134 127;
  --ink: #0D1210;
  --ink-rgb: 13 18 16;
  --primary: #1B6B3A;
  --primary-rgb: 27 107 58;
  --primary-deep: #155A30;
  --primary-deep-rgb: 21 90 48;
  --accent: #2C8F4F;
  --accent-rgb: 44 143 79;
  --text: #121513;
  --text-rgb: 18 21 19;
  --text-on-dark: #EEF0EA;
  --text-on-dark-rgb: 238 240 234;
  --font-display: "Archivo", "Segoe UI", system-ui, Arial, sans-serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --font-mono: "Work Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --surface-image: url("../img/hero-stone.jpg");
  --surface-image-foot: url("../img/foot-stone.jpg");
}
/* BRAND-TOKENS:end */

/* ---- fonts (SIL OFL 1.1, shipped with the kit; see assets/fonts/) ---- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-regular.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/work-sans-variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- design tokens: the two worlds, the scale, the type sizes ---- */
:root {
  /* the light world: chalk ground, warm-white reading surface. Brand keys map in; the rest are the lab's values */
  --l-line: #D8D5CC; --l-muted: #55605A; --l-eyebrow: #3E6B4C; --l-link: #2E5A3C;
  /* the dark world: black with the green light already in it */
  --d-surface: #16201A; --d-line: #2A3A30; --d-border: #5E6E63; --d-muted: #9AA59D; --d-eyebrow: #6FBF86; --d-seam: #35A05A;
  --seam-glow: rgb(53 160 90 / .32);
  --error: #B3261E;
  /* mapped names — every component reads only these; sections choose the world */
  --bg: var(--sheet); --surface: var(--stone); --line: var(--l-line); --border: var(--stone-deep);
  --muted: var(--l-muted); --eyebrow: var(--l-eyebrow); --link: var(--l-link); --seam: var(--accent);
  --btn-primary-bg: var(--primary); --btn-primary-fg: var(--text-on-dark); --btn-primary-bg-hover: var(--primary-deep);
  /* the scale: 4 8 12 16 24 32 48 64 96 128 — no other lengths */
  --wrap: 1120px; --gutter: 24px; --section: 64px; --section-tight: 48px;
  --gap: 32px; --gap-wide: 56px; --measure: 34em;
  --stack-0: 8px; --stack-1: 12px; --stack-2: 16px; --stack-3: 28px; --stack-4: 32px;
  --pad-panel: 24px; --joint: 2px; --radius: 0; --header-h: 72px;
  --shadow: 0 18px 40px rgb(var(--ink-rgb) / .28), 0 2px 6px rgb(var(--ink-rgb) / .16);
  /* type sizes — the lab's, and nowhere else */
  --t-h1: clamp(2.1rem, 4.9vw, 3.5rem); --t-h2: clamp(1.6rem, 3.1vw, 2.4rem); --t-h3: 1.05rem;
  --t-lead: clamp(1.075rem, 1.5vw, 1.2rem); --t-cap: .9rem; --t-eyebrow: .8125rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) { :root { --gutter: 48px; --section: 96px; --section-tight: 64px; --pad-panel: 40px; } }
/* the dark world: the hero, the closing band, the frost band, the footer, the lightbox */
.hero, .cta-band, .band--ink, .site-footer, .lightbox {
  --bg: var(--ink); --surface: var(--d-surface); --line: var(--d-line); --border: var(--d-border);
  --text: var(--text-on-dark); --muted: var(--d-muted); --eyebrow: var(--d-eyebrow); --link: var(--text-on-dark); --seam: var(--d-seam);
  --btn-primary-bg: var(--d-seam); --btn-primary-fg: var(--ink); --btn-primary-bg-hover: var(--d-eyebrow);
}
.hero, .cta-band, .band--ink, .site-footer { background: var(--bg); color: var(--text); }

/* ---- reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* smooth scrolling only for a same-page anchor the visitor clicks: site.js sets html.is-smooth for that click and clears it after.
   A page that opens on #anchor (a deep link, back/forward, a reload) must land there at once, not scroll through the page (2026-09-01). */
html.is-smooth { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }   /* an anchor target clears the sticky header */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }   /* the hidden attribute wins even where a class sets display, e.g. the form's submit row after a successful send */
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2 { margin: 0 0 var(--stack-2); font-family: var(--font-display); text-wrap: balance; }
h1 { font-weight: 700; font-stretch: 118%; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-weight: 650; font-stretch: 112%; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.015em; }
h3, h4 { margin: 0 0 var(--stack-0); font-family: var(--font-body); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: var(--measure); margin: 0 0 var(--stack-3); }
:focus-visible { outline: 2px solid var(--seam); outline-offset: 3px; }
::selection { background: var(--seam-glow); }
.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; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -4rem; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--text-on-dark); font-weight: 600; font-size: .9rem; }
.skip-link:focus { top: 16px; }
body.is-locked { overflow: hidden; }

/* ---- eyebrows, sections, links: the vocabulary ---- */
.eyebrow {
  position: relative; margin: 0 0 var(--stack-1); padding-left: 14px;
  font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: var(--t-eyebrow);
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--eyebrow);
}
.eyebrow::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: var(--joint); background: var(--border); }   /* the label tick */
.section { padding: var(--section) 0; }
.section--tight { padding: var(--section-tight) 0; }
.section--stone { background: var(--surface); }
.section__head { max-width: 60rem; margin-bottom: var(--stack-4); }
.section__head > :last-child { margin-bottom: 0; }
.section__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; max-width: none; }
.section__link { margin: var(--stack-4) 0 0; }
.text-link { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text-link:hover { text-decoration-color: var(--seam); text-decoration-thickness: 2px; }
.text-link--light { color: var(--text-on-dark); }
.prose { max-width: var(--measure); }
.prose--long h2 { margin-top: 2em; }
.prose--note { max-width: var(--measure); margin-top: var(--stack-4); color: var(--muted); }
.prose ul { padding-left: 1.2em; margin-bottom: 1em; }
.prose li { margin-bottom: .35em; }
.prose__meta { font-size: var(--t-cap); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--stack-1); }

/* ---- buttons: two, no third. Square, 48 px, Work Sans 600; nothing drawn inside ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: .005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }          /* the one green fill: the main action, one per section */
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--ghost, .btn--on-dark { background: transparent; color: var(--text); border-color: var(--border); }   /* every other action: neutral outline */
.btn--ghost:hover, .btn--on-dark:hover { border-color: var(--seam); }                                       /* the light comes on */
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(var(--sheet-rgb) / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow .2s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgb(var(--ink-rgb) / .06); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--link); }
.brand__mark--img { width: 40px; height: 40px; }   /* 2026-09-01: the photographed-stone mark (a PNG) needs a touch more room than the flat 34 px vector */
.brand__logo { display: block; width: min(100%, 320px); height: auto; }   /* 2026-09-01: a raster lockup (mark + name in one image) in place of mark + text, used in the footer */
.brand__name { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand__l2 { color: var(--eyebrow); }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: none; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-weight: 600; font-size: .9rem; color: inherit; cursor: pointer; }
.nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .2s var(--ease); }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__list { display: flex; gap: 24px; list-style: none; }
.site-nav__list a { font-weight: 600; font-size: 1rem; letter-spacing: .005em; text-decoration: none; padding: 6px 0; border-bottom: var(--joint) solid transparent; }
.site-nav__list a:hover { border-bottom-color: var(--border); }
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--seam); }
.site-nav__actions { display: flex; align-items: center; gap: 24px; }
.phone-link { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.phone-link:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--seam); }
@media (max-width: 1080px) {
  /* the full menu (four links, phone, button) needs about 1000 px at this type size, so tablets get the menu button */
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; padding: 8px var(--gutter); }
  .site-nav__list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .site-nav__list a[aria-current="page"] { border-bottom: 1px solid var(--line); color: var(--link); }
  .site-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px var(--gutter) 24px; }
  .site-nav__actions .btn { width: 100%; }
  .phone-link { font-size: 1.1rem; text-align: center; padding: 10px 0; }
}
@media (max-width: 520px) {
  /* narrow phones: the one-line wordmark plus the menu button is wider than the screen, so the name stacks */
  .site-header__row { gap: 12px; }
  .brand { min-width: 0; }
  .nav-toggle { flex: none; }
  .brand__name { white-space: normal; font-size: clamp(.8rem, 4vw, .95rem); }   /* 2026-09-01: fluid under 380 px so "LANDSCAPING" clears the menu button at 320 */
  .brand__l1, .brand__l2 { display: block; }
  /* trust lines: one per line so long lines wrap instead of clipping at the hero edge */
  .trust { display: block; }
  .trust li { padding: 4px 0; }
}

/* ---- hero: the stone wall, text on its calm left half; the project photo and the concept sheet on the right ---- */
.hero { padding: var(--section) 0; overflow: hidden; background: var(--bg) var(--surface-image) left center / cover no-repeat; }
@media (min-width: 961px) { .hero { background-size: 130% auto; } }   /* wide screens: keep every line of text on the calm wall */
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy media" "trust media"; column-gap: var(--gap-wide); row-gap: 0; align-items: center; }
.hero__copy { grid-area: copy; min-width: 0; }
.hero__media { grid-area: media; }
.hero .trust { grid-area: trust; align-self: start; }
.hero__h1 { max-width: 22ch; text-wrap: balance; }
.hero__lead { font-size: var(--t-lead); line-height: 1.55; max-width: var(--measure); margin-bottom: var(--stack-3); }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: var(--stack-4); font-size: .93rem; color: var(--muted); }
.trust li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 12px; background: var(--seam); box-shadow: 0 0 8px 1px var(--seam-glow); vertical-align: middle; }
.hero__media { position: relative; align-self: start; }   /* the photo tops out with the eyebrow; the concept sheet hangs below it */
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* the concept sheet (2026-08-31): limestone rather than white, a silver hairline, a short shadow; 44% of the photo's width, about a third of it over the photo */
.plan-card { margin: 0; position: absolute; left: -8%; bottom: 0; width: 44%; padding: 8px; transform: translateY(60%); color: var(--ink);
  background: var(--sheet); background: color-mix(in srgb, var(--sheet) 72%, var(--l-line));
  border: 1px solid var(--stone-deep); border-color: color-mix(in srgb, var(--stone-deep) 55%, var(--l-line));
  box-shadow: 0 12px 28px -14px rgb(var(--ink-rgb) / .5), 0 1px 2px rgb(var(--ink-rgb) / .12); }
.plan-card .figure__svg { width: 100%; height: auto; }
.plan-card__cap { margin-top: 8px; font-size: .75rem; line-height: 1.35; color: var(--l-muted); }
@media (max-width: 960px) {
  /* stacked (2026-09-01): the words and the two buttons, then the photo with its concept sheet, then the three credibility lines */
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "trust"; row-gap: var(--gap); }
  .hero__media { margin-top: 8px; }
  .hero .trust { margin-top: 0; }
  .plan-card { position: relative; left: auto; bottom: auto; transform: none; width: min(100%, 440px); margin: -20px auto 0 0; }   /* phones: beneath the photo with a small overlap; relative (not static) so the whole sheet paints over the photo (2026-09-01: static let the photo cover the sheet's top 20 px while the drawing's lines still showed through it) */
}
/* blueprint-to-build (2026-09-01, replaces the 2.9 s self-drawing plan): the finished photo fades up 12 px (420 ms), then the concept
   sheet slides in from the left 140 ms later (400 ms) — done by 540 ms. Opacity and translate only; the words never wait. `backwards`
   keeps the sheet hidden during its delay; with animations off (reduced motion) or no JavaScript, both are simply there. */
.js .hero__img { animation: build-in .42s var(--ease) backwards; }
.js .plan-card { animation: sheet-in .4s var(--ease) .14s backwards; }
@keyframes build-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes sheet-in { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }

/* ---- page head (inner pages) ---- */
.page-head { padding: var(--section) 0 0; }
.page-head--tall { min-height: 55vh; }
.page-head__inner { max-width: 60rem; }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-bottom: 0; }
.page-head .actions { margin-top: var(--stack-3); }

/* ---- tiles (services on the home page) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.tile { display: block; text-decoration: none; color: inherit; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s var(--ease); }
.tile:hover img { transform: translateY(-3px); }
.tile h3 { margin: var(--stack-2) 0 var(--stack-0); }
.tile p { color: var(--muted); font-size: .95rem; margin-bottom: var(--stack-0); }
.tile__cue { font-weight: 600; font-size: .9rem; color: var(--link); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: transparent; transition: text-decoration-color .2s var(--ease); }
.tile:hover .tile__cue { text-decoration-color: var(--seam); }

/* ---- tiers (2D / 3D), values, areas: repeated items get a hairline above, never a box or a joint ---- */
.tiers, .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--stack-3) var(--gap-wide); }
.tier, .value { padding-top: var(--stack-2); border-top: 1px solid var(--line); }
.tier__tag { margin: 0 0 var(--stack-1); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .04em; color: var(--eyebrow); }
.tier p { margin-bottom: .6em; color: var(--muted); }
.tier p:last-child { margin-bottom: 0; }
.value p { margin: 0; color: var(--muted); }
.area-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--stack-3) var(--gap-wide); }
.area { padding-top: var(--stack-2); border-top: 1px solid var(--line); }
.area p { margin: 0; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--stack-2); }
.chips li { padding: 6px 12px; border: 1px solid var(--border); font-size: .9rem; }
.where { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-wide); align-items: center; }
@media (max-width: 800px) { .where { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } }

/* ---- dark band (built for frost) ---- */
.band { padding: var(--section) 0; }
.band__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-wide); align-items: end; }
@media (max-width: 800px) { .band__row { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } }
.diagrams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.diagram { position: relative; margin: 0; min-width: 0; }
.diagram__open { display: block; }   /* the drawing opens in the photo viewer, where it keeps a readable width and pans on a phone */
.diagram img { width: 100%; background: var(--sheet); padding: 8px; }
.diagram figcaption { padding-top: var(--stack-2); }
.diagram p { margin: 0; color: var(--muted); font-size: .95rem; }
/* construction-proof reveal (2026-09-01): when the frost section first comes into view, the three drawings rise in turn (fade + 12 px,
   90 ms apart) and a thin green light sweeps once along each card's top edge. Plays once; instant when the section is already on screen. */
.js .diagram { opacity: 0; translate: 0 12px; transition: opacity .5s var(--ease), translate .5s var(--ease); transition-delay: calc(.1s + var(--i, 0) * 90ms); }
.js .diagram:nth-child(2) { --i: 1; }
.js .diagram:nth-child(3) { --i: 2; }
.js .diagram::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--joint); background: var(--d-seam); box-shadow: 0 0 8px 1px var(--seam-glow); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.js .reveal.is-visible .diagram { opacity: 1; translate: 0 0; }
.js .reveal.is-visible .diagram::after { animation: seam-sweep .8s var(--ease) calc(.3s + var(--i, 0) * 90ms) forwards; }
.js .reveal--instant .diagram { transition: none; }
.js .reveal--instant .diagram::after { animation: none; }
@keyframes seam-sweep { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.01% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---- featured work, gallery, filters, lightbox ---- */
.featured { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap); }
.featured a { display: block; text-decoration: none; color: inherit; }
.featured img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured__cap { display: block; padding: var(--stack-0) 0 0; font-size: var(--t-cap); color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--stack-4); }
.filters[hidden] { display: none; }
.filters__btn { min-height: 40px; padding: 0 16px; background: none; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-weight: 600; font-size: .9rem; color: inherit; cursor: pointer; }
.filters__btn:hover { border-color: var(--seam); }
.filters__btn.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.gallery { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--stack-3) var(--gap); }
.gallery li[hidden] { display: none; }
.gallery a { display: block; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s var(--ease); }
.gallery a:hover img { transform: scale(1.02); }
.gallery__cap { margin: var(--stack-0) 0 0; font-size: var(--t-cap); color: var(--muted); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair figcaption { padding-top: var(--stack-0); font-size: var(--t-cap); color: var(--muted); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 48px 16px; background: rgb(var(--ink-rgb) / .94); color: var(--text); visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s .2s; }   /* on close, visibility flips only after the fade */
.lightbox.is-open { visibility: visible; opacity: 1; transition: opacity .2s var(--ease), visibility 0s; }   /* on open it is visible at once, so the close button can take focus */
.lightbox > div { width: 100%; max-width: 1200px; min-width: 0; }
.lightbox__stage { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.lightbox__img { max-width: min(100%, 1200px); max-height: 80vh; width: auto; height: auto; margin: 0 auto; }
.lightbox__img--diagram { width: max(100%, 720px); max-width: none; max-height: none; padding: 12px; background: var(--sheet); }   /* never narrower than 720 px: on a phone the stage pans, so the labels stay readable */
.lightbox__cap { margin: var(--stack-1) 0 0; text-align: center; font-size: var(--t-cap); color: var(--text); }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { border-color: var(--seam); }

/* ---- services page: text 7 : photo 5, the photo flush with a joint on its inner edge ---- */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-wide); align-items: center; padding: var(--section-tight) 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.svc + .svc { border-top: 1px solid var(--line); }
.svc:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc:nth-child(even) .svc__media { order: 2; }
.svc__media { border-right: var(--joint) solid var(--border); padding-right: 16px; }
.svc:nth-child(even) .svc__media { border-right: 0; padding-right: 0; border-left: var(--joint) solid var(--border); padding-left: 16px; }
.svc__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc__lead { font-size: var(--t-lead); line-height: 1.55; margin-bottom: var(--stack-2); }
.svc__body ul { padding-left: 1.2em; margin-bottom: 1em; }
.svc__body li { margin-bottom: .3em; }
@media (max-width: 800px) {
  .svc, .svc:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  .svc:nth-child(even) .svc__media { order: 0; }
  .svc__media, .svc:nth-child(even) .svc__media { border: 0; padding: 0; }
}

/* ---- process steps (a real sequence, so numbers carry meaning) ---- */
.steps { list-style: none; max-width: 56rem; }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--stack-2) var(--gap); padding: var(--stack-3) 0; }
.step + .step { border-top: 1px solid var(--line); }
.step__num { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-lead); line-height: 1.3; color: var(--eyebrow); }
.step__body p:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .step { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---- about ---- */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-wide); align-items: start; }
.story__figure { margin: 0; border-left: var(--joint) solid var(--border); padding-left: 16px; }
.story__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story__figure figcaption { padding-top: var(--stack-0); font-size: var(--t-cap); color: var(--muted); }
@media (max-width: 800px) { .story { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } .story__figure { border: 0; padding: 0; } }

/* ---- start page: call panel (text inset from its joint) + form ---- */
.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-wide); align-items: start; }
.start__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--gap); }
.callbox { padding: 0 0 0 var(--pad-panel); border-left: var(--joint) solid var(--border); }
.callbox .eyebrow { padding-left: 0; }
.callbox .eyebrow::before { display: none; }   /* the panel's joint already marks the edge; no second tick beside it */
.callbox__phone { margin: 0 0 var(--stack-0); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
.callbox__phone a { text-decoration: none; }
.callbox__phone a:hover { text-decoration: underline; text-decoration-color: var(--seam); text-underline-offset: .12em; }
.callbox p:last-child { margin: 0; color: var(--muted); }
.next__h { margin-bottom: var(--stack-0); }
.next__list { padding-left: 1.3em; color: var(--muted); }
.next__list li { margin-bottom: .4em; padding-left: .2em; }
.next__list li::marker { color: var(--eyebrow); font-weight: 600; }
@media (max-width: 900px) { .start { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } .start__aside { position: static; } }

/* ---- form: square fields on the warm-white surface, the frozen focus ring ---- */
.form { margin-top: var(--stack-3); }
.form__fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__fields[disabled] { opacity: .55; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 var(--gap); }
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: var(--stack-0); font-weight: 600; font-size: 1rem; }
.field__opt { font-weight: 400; font-size: .9rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 1rem; line-height: 1.4;
}
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%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='%23121513' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field textarea { padding: 12px; resize: vertical; min-height: 7rem; }
.field textarea.textarea--short { min-height: 4.5rem; }   /* the optional note: a line or two, not an essay */
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--seam); outline-offset: 3px; }
.field__hint { margin: var(--stack-0) 0 0; font-size: var(--t-cap); line-height: 1.45; color: var(--muted); }
.field__err { margin: var(--stack-0) 0 0; font-size: var(--t-cap); font-weight: 600; color: var(--error); }
.field__err:empty { display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; }
.field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--primary); }
.field--check label { margin: 0; font-weight: 400; font-size: .95rem; line-height: 1.5; }
.field--check .field__err { grid-column: 1 / -1; }
.form__submit { margin-top: var(--stack-3); display: grid; gap: var(--stack-1); }
.form__note { font-size: var(--t-cap); line-height: 1.5; color: var(--muted); max-width: var(--measure); }
.form__note p { margin: 0; }
.form__notice { margin-bottom: var(--stack-3); padding: 0 0 0 var(--pad-panel); border-left: var(--joint) solid var(--border); font-size: .95rem; }
.form__status { font-size: .95rem; }
.form__status:not(:empty) { margin-bottom: var(--stack-3); padding: 0 0 0 var(--pad-panel); border-left: var(--joint) solid var(--error); color: var(--error); font-weight: 600; }
.form__done { padding: 0 0 0 var(--pad-panel); border-left: var(--joint) solid var(--seam); }   /* the lit joint: it worked */
.form__done p:last-child { margin-bottom: 0; }
.form__hp { display: none !important; }
/* "Add more details — optional": a quiet link-style disclosure beneath the short form */
.form__more { margin: 0 0 24px; }
.form__more summary { display: inline-block; cursor: pointer; list-style: none; font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.form__more summary::-webkit-details-marker { display: none; }
.form__more summary::before { content: "+"; display: inline-block; width: 1.1em; }
.form__more[open] summary::before { content: "\2013"; }
.form__more summary:focus-visible { outline: 2px solid var(--seam); outline-offset: 3px; }
.form__more > .form__row { margin-top: var(--stack-1); }

/* ---- closing band: the stone wall again, zoomed to its calm wall ---- */
.cta-band { padding: var(--section) 0; background: var(--bg) var(--surface-image-foot) right center / auto 160% no-repeat; }   /* 2026-09-01: the band photo is a calm panel (left third) + slate; phones and tablets show only the slate */
@media (min-width: 961px) { .cta-band { background-position: left center; background-size: 150% auto; } }   /* desktop: the calm panel sits under the text; the seam falls mid-band, in the gap before the buttons */
.cta-band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.cta-band__copy { max-width: var(--measure); }
@media (min-width: 961px) { .cta-band__copy { max-width: min(var(--measure), 48%); } }   /* keeps the text on the calm half of the band photo */
.cta-band p { margin: 0; font-size: var(--t-lead); line-height: 1.55; }

/* ---- footer ---- */
.site-footer { padding: var(--section-tight) 0 24px; border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--gap-wide); padding-bottom: var(--stack-4); border-bottom: 1px solid var(--line); }   /* 2026-09-01: the contact column sizes to its longest line (the email) so the address stays whole; the other two share the rest */
.site-footer__grid > * { min-width: 0; }
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; font-size: min(1rem, 4.15vw); }   /* 2026-09-01: on phones under ~385 px the address shrinks a touch (13–15 px) so it stays on one line down to 320 px; anywhere-wrap is the safety net for a longer address */
.site-footer .brand__mark { color: var(--text); }
.site-footer__tagline { margin-top: var(--stack-2); max-width: 34ch; color: var(--muted); }
.site-footer__h { margin: 0 0 var(--stack-1); font-family: var(--font-display); font-weight: 600; font-stretch: 110%; font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--eyebrow); }
.site-footer__list { list-style: none; columns: 2; column-gap: 24px; margin-bottom: var(--stack-1); }
.site-footer__list li { font-size: .95rem; padding: 2px 0; }
.site-footer__phone { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.site-footer__phone a { text-decoration: none; }
.site-footer__phone a:hover { text-decoration: underline; text-decoration-color: var(--seam); text-underline-offset: .2em; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 16px; font-size: var(--t-cap); color: var(--muted); }
.site-footer__bottom p { margin: 0; }
@media (max-width: 1080px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto; } .site-footer__brand { grid-column: 1 / -1; } }   /* 2026-09-01: tablets — the brand on its own row, the area list and the contact column side by side (three columns squeezed the middle one below ~1080 px) */
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap); } .site-footer__brand { grid-column: auto; } }   /* phones: one column */

/* ---- reveal (one quiet rise, once) ---- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.reveal--instant { transition: none; }

/* ---- reduced motion, print ---- */
@media (prefers-reduced-motion: reduce) {
  html, html.is-smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__img, .js .plan-card, .js .diagram { opacity: 1; translate: none; }
  .js .diagram::after { display: none; }
}
@media print {
  .site-header, .nav-toggle, .cta-band, .actions, .filters, .skip-link, .form__submit { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .band--ink, .site-footer { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}