/* 00-tokens.css */
/* Design tokens. The only file allowed to hold colour values.
   Client branding enters by changing values here (see migration/00-template-map.md). */
:root {
  /* palette */
  --c-spruce-950: #0e1b14;
  --c-spruce-900: #16291f;
  --c-spruce-800: #1f3a2c;
  --c-spruce-700: #2a4a38;
  --c-spruce-600: #3a5f4a;
  --c-grass-700: #2c6322;
  --c-grass-600: #367a2a;
  --c-grass-400: #7cb45a;
  --c-grass-200: #c6e3a9;
  --c-frost-50: #f5f8f7;
  --c-frost-100: #e9f0ed;
  --c-frost-200: #d4e0db;
  --c-white: #ffffff;
  --c-ink: #14201a;
  --c-ink-muted: #45524b;
  --c-on-dark: #f2f6f3;
  --c-on-dark-muted: #cbd8d0;
  --c-error: #a3261b;
  --c-error-bg: #fbeae8;
  --c-success-bg: #e6f2de;
  --c-scrim: rgb(9 18 13 / 0.62);
  --c-scrim-strong: rgb(9 18 13 / 0.9);
  --c-shade-deep: rgb(8 16 11 / 0.84);
  --c-shade-mid: rgb(8 16 11 / 0.5);
  --c-shade-clear: rgb(8 16 11 / 0);
  --c-glass: rgb(255 255 255 / 0.1);
  --c-glass-line: rgb(255 255 255 / 0.28);

  /* semantic */
  --bg: var(--c-white);
  --bg-alt: var(--c-frost-50);
  --bg-dark: var(--c-spruce-900);
  --bg-darker: var(--c-spruce-950);
  --text: var(--c-ink);
  --text-muted: var(--c-ink-muted);
  --accent: var(--c-grass-600);
  --accent-hover: var(--c-grass-700);
  --accent-on-dark: var(--c-grass-400);
  --link-on-dark: var(--c-grass-200);
  --line: var(--c-frost-200);
  --topo-light: var(--c-frost-200);
  --topo-dark: var(--c-spruce-800);
  --focus: var(--c-grass-600);
  --ridge-far: var(--c-spruce-600);
  --ridge-mid: var(--c-spruce-700);
  --ridge-near: var(--c-spruce-900);
  --ridge-cap: var(--c-frost-50);

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --step-4: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --step-5: clamp(3.1rem, 2rem + 4.6vw, 6rem);
  --step-num: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.62;

  /* spacing */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --section-y: clamp(72px, 9vw, 136px);
  --section-y-short: clamp(48px, 6vw, 88px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 88px;
  --header-h-compact: 68px;

  /* shape */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-pill: 999px;
  --frame: 8px;
  --shadow-soft: 0 6px 18px -10px rgb(14 27 20 / 0.35);
  --shadow-frame: 0 22px 44px -20px rgb(14 27 20 / 0.5);
  --shadow-lift: 0 30px 56px -24px rgb(14 27 20 / 0.45);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 0.25s;
  --dur-m: 0.6s;
  --dur-l: 1s;
  --slide-dur: 7s;

  /* textures (masks: colour comes from the tokens above) */
  --topo: url("brand/topo.svg");
  --topo-size: 720px;
}

/* 01-base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-compact) + var(--space-m)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-snug); margin: 0; letter-spacing: 0.005em; }
p, ul, ol, figure, blockquote, dl { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-s); }
.on-dark :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .hero :focus-visible { outline-color: var(--accent-on-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100;
  padding: var(--space-xs) var(--space-s); background: var(--c-white); color: var(--text);
  border-radius: var(--radius-s); transform: translateY(-200%); transition: transform var(--dur-s);
}
.skip-link:focus { transform: none; }

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

.section { position: relative; padding-block: var(--section-y); isolation: isolate; }
.section-short { padding-block: var(--section-y-short); }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--bg-dark); color: var(--c-on-dark); }
.section-dark p, .section-dark li { color: var(--c-on-dark-muted); }
.section-dark a:not(.btn) { color: var(--link-on-dark); }

.h-display { font-size: var(--step-4); line-height: var(--leading-tight); }
.h-section { font-size: var(--step-3); line-height: 1.05; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--text-muted); }
.section-dark .lede { color: var(--c-on-dark-muted); }
.prose > * + * { margin-top: var(--space-s); }
.prose p { color: var(--text-muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-xl); }
.section-head .lede { max-width: 52ch; }

/* topographic texture: a mask tinted by tokens, drifting on scroll (see parallax.js) */
.topo { position: relative; isolation: isolate; overflow: clip; }
.topo::before {
  content: ""; position: absolute; inset: -240px 0; z-index: -1; pointer-events: none;
  background: var(--topo-light);
  -webkit-mask: var(--topo) 0 0 / var(--topo-size) repeat; mask: var(--topo) 0 0 / var(--topo-size) repeat;
  transform: translate3d(0, var(--topo-shift, 0px), 0);
}
.section-dark.topo::before, .topo-dark::before { background: var(--topo-dark); }

/* buttons */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--c-white); --btn-line: var(--accent);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 48px; padding: var(--space-xs) var(--space-m);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--btn-line); border-radius: var(--radius-s);
  text-decoration: none; overflow: hidden; isolation: isolate;
  transition: color var(--dur-s), border-color var(--dur-s), transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill, var(--accent-hover));
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out);
}
.btn:hover { color: var(--btn-fg-hover, var(--btn-fg)); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: translateY(0); }
.btn .icon { width: 20px; height: 20px; }
.btn-lg { min-height: 56px; padding-inline: var(--space-l); }
.btn-block { width: 100%; }
.btn-arrow { transition: transform var(--dur-s) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--accent); --btn-fill: var(--accent); --btn-fg-hover: var(--c-white); }
.btn-ghost-light { --btn-bg: var(--c-glass); --btn-fg: var(--c-white); --btn-line: var(--c-glass-line); --btn-fill: var(--c-white); --btn-fg-hover: var(--c-spruce-900); backdrop-filter: blur(6px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.btn-row-center { justify-content: center; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* text link with a drawn underline */
.link-draw {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.02em;
  color: var(--accent); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px; transition: background-size 0.45s var(--ease-out);
}
.link-draw:hover, a:hover .link-draw, .link-draw:focus-visible { background-size: 100% 2px; }
.section-dark .link-draw { color: var(--link-on-dark); }

/* framed photograph (white mat + drop shadow, as on printed prints) */
.frame { background: var(--c-white); padding: var(--frame); box-shadow: var(--shadow-frame); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.checklist { display: grid; gap: var(--space-xs); }
.checklist li { display: flex; gap: var(--space-xs); align-items: start; }
.checklist .icon { color: var(--accent); margin-top: 3px; }
.section-dark .checklist .icon { color: var(--accent-on-dark); }

/* 10-header.css */
/* Header: transparent over the photo hero, condenses to a solid bar on scroll (header.js). */
.site-header {
  --hdr-fg: var(--c-white);
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--hdr-fg);
  transition: background-color var(--dur-m) var(--ease-out), box-shadow var(--dur-m), color var(--dur-s);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--c-shade-mid), var(--c-shade-clear));
  transition: opacity var(--dur-m);
}
.site-header.is-scrolled, .site-header.is-solid {
  --hdr-fg: var(--text);
  background: var(--c-white);
  box-shadow: var(--shadow-soft);
}
.site-header.is-scrolled::before, .site-header.is-solid::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition-property: background-color, box-shadow, color, transform; }

.header-inner {
  display: flex; align-items: center; gap: var(--space-m);
  height: var(--header-h); max-width: calc(1440px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  transition: height var(--dur-m) var(--ease-out);
}
.is-scrolled .header-inner { height: var(--header-h-compact); }

.brand { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-xs); color: inherit; text-decoration: none; flex: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 44px; height: 44px; transition: transform var(--dur-m) var(--ease-out), width var(--dur-m) var(--ease-out); }
.is-scrolled .brand-mark { width: 38px; height: 38px; }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand-ridge-back { fill: var(--accent-on-dark); }
.brand-ridge-front { fill: currentColor; opacity: 0.92; }
.brand-cap { fill: var(--c-white); }
.is-scrolled .brand-cap, .is-solid .brand-cap { fill: var(--c-frost-200); }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.brand-amp { color: var(--accent-on-dark); }
.is-scrolled .brand-amp, .is-solid .brand-amp { color: var(--accent); }

.primary-nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: var(--space-2xs); }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-link {
  position: relative; display: block; padding: var(--space-xs) var(--space-s);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: 0.03em;
  color: inherit; text-decoration: none;
}
.nav-link::after {
  content: ""; position: absolute; left: var(--space-s); right: var(--space-s); bottom: 6px; height: 2px;
  background: var(--accent-on-dark); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out);
}
.is-scrolled .nav-link::after, .is-solid .nav-link::after { background: var(--accent); }
.nav-link:hover { color: inherit; }
.nav-link:hover::after, .nav-link[aria-current]::after, .nav-link[data-section-current]::after { transform: scaleX(1); transform-origin: left; }
.has-mega .nav-link { padding-right: var(--space-3xs); }
.mega-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: calc(var(--space-xs) * -1); padding: 0; border: 0; background: none; color: inherit;
}
.mega-toggle .icon { width: 16px; height: 16px; transition: transform var(--dur-s) var(--ease-out); }
.has-mega.is-open .mega-toggle .icon { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; width: min(560px, 90vw);
  padding: var(--space-s); background: var(--c-white); color: var(--text); border-radius: var(--radius-m); box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px);
  transition: opacity var(--dur-s), transform 0.4s var(--ease-out), visibility 0s linear var(--dur-s);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-mega.is-open .mega, html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xs); }
.mega-link {
  display: flex; gap: var(--space-xs); align-items: start; padding: var(--space-xs); border-radius: var(--radius-s);
  color: var(--text); text-decoration: none; transition: background-color var(--dur-s);
}
.mega-link:hover, .mega-link[aria-current] { background: var(--bg-alt); color: var(--text); }
.mega-icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-s);
  background: var(--c-frost-100); color: var(--accent); transition: background-color var(--dur-s), color var(--dur-s), transform var(--dur-s) var(--ease-out);
}
.mega-link:hover .mega-icon { background: var(--accent); color: var(--c-white); transform: rotate(-4deg); }
.mega-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.1; }
.mega-line { display: block; font-size: var(--step--1); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.mega-all { display: block; margin-top: var(--space-2xs); padding: var(--space-xs); border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.mega-list > li { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.has-mega.is-open .mega-list > li, html:not(.js) .has-mega:hover .mega-list > li { opacity: 1; transform: none; }
.has-mega.is-open .mega-list > li:nth-child(2) { transition-delay: 0.04s; }
.has-mega.is-open .mega-list > li:nth-child(3) { transition-delay: 0.08s; }
.has-mega.is-open .mega-list > li:nth-child(4) { transition-delay: 0.12s; }

.header-call { display: grid; justify-items: end; color: inherit; text-decoration: none; line-height: 1; flex: none; }
.header-call-label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; opacity: 0.9; }
.header-call-number { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; letter-spacing: 0.01em; transition: color var(--dur-s); }
.header-call:hover { color: inherit; }
.header-call:hover .header-call-number { color: var(--accent-on-dark); }
.is-scrolled .header-call:hover .header-call-number, .is-solid .header-call:hover .header-call-number { color: var(--accent); }

.header-call-mobile, .menu-toggle { display: none; }
.header-call-mobile {
  align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-s); margin-left: auto;
  background: var(--accent); color: var(--c-white); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); text-decoration: none;
}
.header-call-mobile:hover { color: var(--c-white); background: var(--accent-hover); }
.menu-toggle { width: 48px; height: 48px; padding: 0; border: 0; background: none; place-items: center; }
.menu-toggle-bars { display: grid; gap: 6px; width: 26px; }
.menu-toggle-bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.4s var(--ease-out), opacity var(--dur-s); }
.menu-toggle-bars span:nth-child(2) { width: 70%; justify-self: end; }
.menu-toggle:hover .menu-toggle-bars span:nth-child(2) { width: 100%; }

@media (max-width: 1100px) {
  .primary-nav, .header-call { display: none; }
  .header-call-mobile { display: inline-flex; }
  .menu-toggle { display: grid; }
  :root { --header-h: 76px; --header-h-compact: 64px; }
}
@media (max-width: 420px) {
  .brand-word { font-size: 1.375rem; }
  .brand-mark { width: 36px; height: 36px; }
  .header-call-mobile span { display: none; }
  .header-call-mobile { width: 44px; padding: 0; justify-content: center; }
  .header-inner { gap: var(--space-xs); }
}

/* off-canvas drawer */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: var(--c-scrim); opacity: 0; transition: opacity 0.4s; }
.drawer-panel {
  position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-l);
  padding: var(--space-2xl) var(--space-l) var(--space-l);
  background: var(--bg-dark); color: var(--c-on-dark);
  transform: translateX(100%); transition: transform 0.55s var(--ease-out);
}
.drawer-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--topo-dark);
  -webkit-mask: var(--topo) 0 0 / var(--topo-size) repeat; mask: var(--topo) 0 0 / var(--topo-size) repeat;
}
.drawer-panel { isolation: isolate; }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-close {
  position: absolute; top: var(--space-s); right: var(--space-s); display: grid; place-items: center;
  width: 48px; height: 48px; border: 1px solid var(--c-glass-line); border-radius: 50%; background: none; color: inherit;
  transition: transform 0.4s var(--ease-out), background-color var(--dur-s);
}
.drawer-close:hover { transform: rotate(90deg); background: var(--c-glass); }
.drawer-list { display: grid; }
.drawer-list a {
  display: block; padding: var(--space-2xs) 0; color: var(--c-on-dark); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.15;
  transition: color var(--dur-s), transform 0.4s var(--ease-out);
}
.drawer-list a:hover, .drawer-list a[aria-current] { color: var(--accent-on-dark); transform: translateX(6px); }
.drawer-sub a { font-size: var(--step-1); font-family: var(--font-body); font-weight: 500; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m); color: var(--c-on-dark-muted); min-height: 44px; }
.drawer-list li { opacity: 0; transform: translateX(24px); transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.drawer.is-open .drawer-list li { opacity: 1; transform: none; }
.drawer-foot { margin-top: auto; display: grid; gap: var(--space-s); }
.drawer-hours { color: var(--c-on-dark-muted); font-size: var(--step--1); text-align: center; }

/* 11-hero.css */
/* Heroes: full-bleed photography with a slow Ken Burns drift, a torn bottom edge,
   and one orchestrated entrance per page (the headline lines rise in on load). */
.hero {
  position: relative; display: grid; align-items: end; isolation: isolate; overflow: clip;
  min-height: clamp(560px, 94vh, 940px);
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: calc(var(--edge-h) + var(--space-2xl));
  background: var(--bg-darker); color: var(--c-white);
  --edge-h: clamp(36px, 5.5vw, 84px);
}
.hero-page { min-height: clamp(460px, 70vh, 680px); }
.hero-media { position: absolute; inset: 0 0 -12% 0; z-index: 0; transform: translate3d(0, var(--shift, 0px), 0); }
.hero-media > img, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-page .hero-media > img { animation: kb-in 18s var(--ease-out) both; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease-in-out); }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide.is-leaving { opacity: 0; z-index: 0; }
.hero-slide.is-active img, .hero-slide.is-leaving img { animation: kb-in calc(var(--slide-dur) + 2s) linear both; }
.hero-slide:nth-child(2).is-active img, .hero-slide:nth-child(2).is-leaving img { animation-name: kb-pan; }
.hero-slide:nth-child(3).is-active img, .hero-slide:nth-child(3).is-leaving img { animation-name: kb-out; }
html:not(.js) .hero-slide:first-child { opacity: 1; }
@keyframes kb-in { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes kb-out { from { transform: scale(1.02) translateX(1%); } to { transform: scale(1.13) translateX(-1.5%); } }
@keyframes kb-pan { from { transform: scale(1.12) translateX(2.5%); } to { transform: scale(1.12) translateX(-2.5%); } }

.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--c-shade-deep) 0%, var(--c-shade-mid) 48%, var(--c-shade-clear) 78%),
    linear-gradient(0deg, var(--c-shade-deep) 0%, var(--c-shade-clear) 55%);
}
.hero-body { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-m);
  font-weight: 600; font-size: var(--step-0); letter-spacing: 0.02em; color: var(--c-white);
}
.hero-kicker::before { content: ""; width: 36px; height: 2px; background: var(--accent-on-dark); }
.hero-title { font-size: var(--step-5); line-height: 0.98; max-width: 13ch; letter-spacing: 0; }
.hero-page .hero-title { font-size: var(--step-4); max-width: 16ch; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; animation: line-rise 1.1s var(--ease-out) both; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.24s; }
.hero-lede { max-width: 46ch; margin-top: var(--space-l); font-size: var(--step-1); line-height: 1.5; color: var(--c-frost-100); animation: fade-rise 1s var(--ease-out) 0.45s both; }
.hero .btn-row { margin-top: var(--space-xl); animation: fade-rise 1s var(--ease-out) 0.6s both; }
.hero-kicker { animation: fade-rise 0.9s var(--ease-out) both; }
@keyframes line-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-2xs); font-size: var(--step--1); font-weight: 600; }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2xs); color: var(--c-frost-100); }
.breadcrumbs li + li::before { content: "/"; opacity: 0.7; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--c-white); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-on-dark); text-decoration: underline; }

/* slide selector with progress bars (doubles as the pause control) */
.hero-seasons {
  position: absolute; right: var(--gutter); bottom: calc(var(--edge-h) + var(--space-l)); z-index: 2;
  display: flex; align-items: end; gap: var(--space-s);
}
.season-tabs { display: flex; gap: var(--space-s); }
.season-tab {
  display: grid; gap: var(--space-2xs); min-width: 92px; min-height: 44px; padding: var(--space-2xs) 0; border: 0; background: none;
  color: var(--c-frost-100); text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.03em;
  transition: color var(--dur-s);
}
.season-tab:hover, .season-tab[aria-current="true"] { color: var(--c-white); }
.season-bar { display: block; height: 3px; background: var(--c-glass-line); overflow: hidden; border-radius: 2px; }
.season-bar::after { content: ""; display: block; height: 100%; background: var(--accent-on-dark); transform: scaleX(0); transform-origin: left; }
.season-tab[aria-current="true"] .season-bar::after { animation: bar-fill var(--slide-dur) linear both; }
.hero-seasons.is-paused .season-bar::after { animation-play-state: paused; }
@keyframes bar-fill { to { transform: scaleX(1); } }
.slide-pause {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-glass-line); border-radius: 50%;
  background: var(--c-glass); color: var(--c-white); backdrop-filter: blur(6px);
}
.slide-pause svg { width: 14px; height: 14px; fill: currentColor; }
.slide-pause .i-play { display: none; }
.is-paused .slide-pause .i-play { display: block; }
.is-paused .slide-pause .i-pause { display: none; }

/* torn / rugged bottom edge */
.edge {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; height: var(--edge-h); width: 100%;
  color: var(--edge-fill, var(--bg)); pointer-events: none;
}
.edge path { fill: currentColor; }
.edge-frost { --edge-fill: var(--bg-alt); }
.edge-dark { --edge-fill: var(--bg-dark); }

/* plain (no photo) hero for utility pages */
.hero-plain { min-height: clamp(380px, 52vh, 520px); background: var(--bg-dark); }
.hero-plain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--topo-dark);
  -webkit-mask: var(--topo) 0 0 / var(--topo-size) repeat; mask: var(--topo) 0 0 / var(--topo-size) repeat;
  animation: topo-drift 60s linear infinite;
}
@keyframes topo-drift { to { -webkit-mask-position: 720px 360px; mask-position: 720px 360px; } }

@media (max-width: 760px) {
  .hero { min-height: clamp(560px, 88svh, 760px); padding-bottom: calc(var(--edge-h) + var(--space-3xl)); }
  .hero-page { min-height: 440px; padding-bottom: calc(var(--edge-h) + var(--space-xl)); }
  .hero-shade { background: linear-gradient(0deg, var(--c-shade-deep) 10%, var(--c-shade-mid) 60%, var(--c-shade-mid) 100%); }
  .hero-seasons { left: var(--gutter); right: var(--gutter); bottom: calc(var(--edge-h) + var(--space-s)); justify-content: space-between; }
  .season-tabs { gap: var(--space-xs); }
  .season-tab { min-width: 0; flex: 1; font-size: var(--step-0); }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

/* 12-sections.css */
.edge-back { opacity: 0.45; }

/* ---------- intro: asymmetric split with a framed photo stack ---------- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.intro-copy .h-display { max-width: 14ch; }
.intro-copy .prose { margin-top: var(--space-l); max-width: 58ch; }
.intro-copy .checklist { margin-top: var(--space-l); }
.intro-copy .btn-row { margin-top: var(--space-xl); }
.photo-stack { position: relative; padding: 0 0 var(--space-3xl) var(--space-2xl); }
.photo-stack-main { aspect-ratio: 4 / 5; }
.photo-stack-inset { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4; z-index: 1; }

/* ---------- services card grid (used once per page) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
.svc-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--c-white); color: var(--text); text-decoration: none; box-shadow: var(--shadow-frame);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.svc-card:hover { color: var(--text); transform: translateY(-10px); box-shadow: var(--shadow-lift); }
.svc-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: var(--frame) var(--frame) 0; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.svc-card:hover .svc-card-media img { transform: scale(1.09); }
.svc-card-icon {
  position: absolute; left: var(--space-m); top: 0;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--c-white); box-shadow: var(--shadow-soft);
  transform: translateY(-50%); transition: transform 0.6s var(--ease-out), background-color var(--dur-s);
}
.svc-card:hover .svc-card-icon { transform: translateY(-50%) rotate(-12deg) scale(1.08); background: var(--accent-hover); }
.svc-card-icon .icon { width: 24px; height: 24px; }
.svc-card-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-xl) var(--space-m) var(--space-m); }
.svc-card-title { font-size: var(--step-2); line-height: 1.1; }
.svc-card-body p { color: var(--text-muted); flex: 1; }
.svc-card .link-draw { align-self: start; }

/* ---------- recent work: mixed-height grid, opens the lightbox ---------- */
.work-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(110px, 13vw, 190px); gap: var(--space-xs);
}
.work-grid > :nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 4; }
.work-grid > :nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }
.work-grid > :nth-child(3) { grid-column: 8 / 13; grid-row: 3 / 6; }
.work-grid > :nth-child(4) { grid-column: 1 / 4; grid-row: 4 / 6; }
.work-grid > :nth-child(5) { grid-column: 4 / 8; grid-row: 4 / 6; }
.tile {
  position: relative; display: block; overflow: hidden; margin: 0; background: var(--bg-darker); color: var(--c-white); text-decoration: none;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), opacity var(--dur-m); }
.tile::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--c-shade-deep), var(--c-shade-clear) 60%);
  opacity: 0.55; transition: opacity var(--dur-m);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.07); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile-open {
  position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center;
  width: 72px; height: 72px; border: 2px solid var(--c-white); border-radius: 50%; color: var(--c-white);
  transform: translate(-50%, -50%) scale(0.7); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s;
}
.tile-open::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c-white);
  opacity: 0.5; animation: ring 2.4s var(--ease-out) infinite;
}
@keyframes ring { from { transform: scale(1); opacity: 0.5; } to { transform: scale(1.6); opacity: 0; } }
.tile:hover .tile-open, .tile:focus-visible .tile-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.tile-caption {
  position: absolute; left: var(--space-m); right: var(--space-m); bottom: var(--space-s); z-index: 1;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2;
  transform: translateY(8px); transition: transform 0.6s var(--ease-out);
}
.tile:hover .tile-caption { transform: none; }
.work-foot { margin-top: var(--space-xl); display: flex; justify-content: flex-end; }

/* ---------- photo band with parallax (short section) ---------- */
.band-photo {
  position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; text-align: center;
  min-height: clamp(380px, 56vh, 540px); padding-block: var(--space-3xl); color: var(--c-white); background: var(--bg-darker);
}
.band-photo-media { position: absolute; inset: -18% 0; z-index: 0; transform: translate3d(0, var(--shift, 0px), 0); }
.band-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.band-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--c-scrim); }
.band-photo > .container { position: relative; z-index: 2; }
.band-photo h2 { font-size: var(--step-4); line-height: 1; }
.band-photo p { max-width: 56ch; margin: var(--space-m) auto 0; font-size: var(--step-1); color: var(--c-frost-100); }
.band-photo .btn-row { margin-top: var(--space-xl); }

/* ---------- details: editorial copy beside a scattered photo collage ---------- */
.details-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.details-copy .prose { margin-top: var(--space-l); }
.details-copy .checklist { margin-top: var(--space-l); }
.collage { position: relative; height: clamp(520px, 52vw, 700px); }
.collage-item { position: absolute; margin: 0; }
.collage-item .frame { height: 100%; transform: rotate(var(--tilt, 0deg)); transition: transform 0.7s var(--ease-out), box-shadow 0.7s; }
.collage-item:hover { z-index: 5; }
.collage-item:hover .frame { transform: rotate(0deg) scale(1.04); box-shadow: var(--shadow-lift); }
.collage-item:nth-child(1) { left: 0; top: 4%; width: 44%; height: 44%; --tilt: -2deg; }
.collage-item:nth-child(2) { right: 2%; top: 0; width: 38%; height: 56%; --tilt: 1.5deg; }
.collage-item:nth-child(3) { left: 8%; bottom: 0; width: 40%; height: 44%; --tilt: 1deg; z-index: 2; }
.collage-item:nth-child(4) { right: 10%; bottom: 4%; width: 46%; height: 42%; --tilt: -1.5deg; z-index: 3; }
.collage-item figcaption { position: absolute; left: var(--space-s); bottom: calc(var(--space-s) + var(--frame)); padding: var(--space-3xs) var(--space-xs); background: var(--c-white); font-weight: 600; font-size: var(--step--1); color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-s), transform 0.4s var(--ease-out); }
.collage-item:hover figcaption { opacity: 1; transform: none; }
.collage-item { transform: translate3d(0, var(--shift, 0px), 0); }

/* ---------- CTA band with layered ridge silhouettes ---------- */
.cta-band { position: relative; color: var(--c-white); }
.ridges { position: relative; height: clamp(110px, 15vw, 230px); overflow: hidden; margin-top: calc(var(--section-y) * -0.2); }
.ridge { position: absolute; left: 0; bottom: -2px; width: 100%; height: 100%; transform: translate3d(0, var(--shift, 0px), 0); }
.ridge-far .ridge-fill { fill: var(--ridge-far); }
.ridge-far .ridge-cap { fill: var(--ridge-cap); opacity: 0.9; }
.ridge-mid .ridge-fill { fill: var(--ridge-mid); }
.ridge-near .ridge-fill { fill: var(--ridge-near); }
.cta-band-body {
  position: relative; isolation: isolate; max-width: none; text-align: center;
  padding-block: var(--space-xl) var(--section-y); background: var(--bg-dark);
}
.cta-band-body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--topo-dark);
  -webkit-mask: var(--topo) 0 0 / var(--topo-size) repeat; mask: var(--topo) 0 0 / var(--topo-size) repeat;
}
.cta-band-title { font-size: var(--step-5); line-height: 1; }
.cta-band-text { max-width: 60ch; margin: var(--space-m) auto 0; font-size: var(--step-1); color: var(--c-on-dark-muted); }
.cta-band .btn-row { margin-top: var(--space-xl); }

/* ---------- process: a real three-step sequence ---------- */
.process { padding-block: var(--section-y-short); background: var(--bg); }
.process-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); counter-reset: none; }
.process-list::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--step-num) * 0.55); height: 2px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) 0.2s;
}
.is-shown .process-list::before, html:not(.js) .process-list::before { transform: scaleX(1); }
.process-step { position: relative; }
.process-num {
  position: relative; display: inline-block; padding-right: var(--space-s); background: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-num); line-height: 1.1; color: var(--accent);
}
.process-title { font-size: var(--step-2); margin: var(--space-xs) 0 var(--space-2xs); }
.process-step p { color: var(--text-muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-darker); color: var(--c-on-dark); padding-top: var(--space-3xl); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--space-xl); }
.brand-footer { color: var(--c-white); }
.footer-blurb { margin-top: var(--space-m); color: var(--c-on-dark-muted); max-width: 34ch; }
.footer-heading { font-size: var(--step-2); color: var(--c-white); margin-bottom: var(--space-s); }
.footer-links { display: grid; gap: var(--space-3xs); }
.footer-links a, .footer-contact a { color: var(--c-on-dark-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; transition: color var(--dur-s), transform var(--dur-s) var(--ease-out); }
.footer-links a:hover, .footer-contact a:hover { color: var(--link-on-dark); transform: translateX(4px); }
.footer-contact { display: grid; gap: var(--space-2xs); }
.footer-contact li { display: flex; gap: var(--space-xs); align-items: center; color: var(--c-on-dark-muted); min-height: 44px; }
.footer-contact .icon { color: var(--accent-on-dark); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s);
  margin-top: var(--space-3xl); padding-block: var(--space-l); border-top: 1px solid var(--c-spruce-700);
  font-size: var(--step--1); color: var(--c-on-dark-muted);
}
.footer-base p { color: var(--c-on-dark-muted); }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .intro-grid, .details-grid { grid-template-columns: 1fr; }
  .photo-stack { max-width: 520px; margin-inline: auto; width: 100%; }
  .collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
  .collage-item { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 4 / 5; }
  .collage-item:nth-child(n) { left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; }
  .work-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(140px, 38vw, 260px); }
  .work-grid > :nth-child(n) { grid-column: auto; grid-row: auto; }
  .work-grid > :nth-child(1) { grid-column: 1 / 3; grid-row: span 2; }
  .process-list { grid-template-columns: 1fr; }
  .process-list::before { display: none; }
}
@media (max-width: 600px) {
  .svc-grid, .footer-grid { grid-template-columns: 1fr; }
  .photo-stack { padding-left: var(--space-l); }
  .tile-open { opacity: 1; transform: translate(-50%, -50%) scale(0.8); width: 56px; height: 56px; }
}

/* 13-pages.css */
/* ---------- services index: scroll-linked sticky photo stack ---------- */
.scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.scrolly-steps { display: grid; }
.scrolly-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-xl); }
.scrolly-step:first-child { min-height: 56vh; justify-content: start; padding-top: 0; }
.scrolly-step:last-child { min-height: 60vh; }
.scrolly-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-m); border-radius: 50%;
  background: var(--c-frost-100); color: var(--accent); transition: background-color var(--dur-m), color var(--dur-m), transform var(--dur-m) var(--ease-out);
}
.scrolly-icon .icon { width: 26px; height: 26px; }
.scrolly-step.is-current .scrolly-icon { background: var(--accent); color: var(--c-white); transform: rotate(-8deg); }
.scrolly-step h2 { font-size: var(--step-4); line-height: 1; }
.scrolly-step p { margin-top: var(--space-s); color: var(--text-muted); max-width: 48ch; }
.scrolly-step .btn-row { margin-top: var(--space-l); }
.scrolly-media { position: sticky; top: calc(var(--header-h-compact) + var(--space-l)); height: calc(100vh - var(--header-h-compact) - var(--space-3xl)); max-height: 720px; }
.scrolly-frame { position: relative; height: 100%; overflow: hidden; }
.scrolly-frame img {
  position: absolute; inset: var(--frame); width: calc(100% - var(--frame) * 2); height: calc(100% - var(--frame) * 2); object-fit: cover;
  opacity: 0; transform: scale(1.08); clip-path: inset(0 0 100% 0);
  transition: opacity 0.2s 0.9s, transform 1.6s var(--ease-out), clip-path 1s var(--ease-in-out);
}
.scrolly-frame img.is-current { opacity: 1; transform: none; clip-path: inset(0); transition: opacity 0s, transform 1.6s var(--ease-out), clip-path 1s var(--ease-in-out); z-index: 1; }
html:not(.js) .scrolly-frame img:first-child { opacity: 1; clip-path: none; transform: none; }

/* ---------- seasonal calendar strip ---------- */
.calendar { overflow-x: auto; }
.calendar-grid { display: grid; grid-template-columns: 150px repeat(12, minmax(44px, 1fr)); min-width: 760px; row-gap: var(--space-xs); align-items: center; }
.calendar-month { font-weight: 600; font-size: var(--step--1); color: var(--c-on-dark-muted); text-align: center; }
.calendar-label { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--c-white); padding-right: var(--space-s); }
.calendar-bar {
  height: 16px; border-radius: var(--radius-pill); background: var(--accent-on-dark);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out);
}
.calendar-bar.is-light { background: var(--c-frost-200); }
.is-shown .calendar-bar, html:not(.js) .calendar-bar { transform: scaleX(1); }
.is-shown .calendar-bar:nth-of-type(2n) { transition-delay: 0.1s; }
/* grid column 2 is January, 13 is December */
.bar-apr-nov { grid-column: 5 / 13; } .bar-feb-mar { grid-column: 3 / 5; } .bar-may-sep { grid-column: 6 / 11; }
.bar-apr-jun { grid-column: 5 / 8; } .bar-sep-oct { grid-column: 10 / 12; } .bar-jan-mar { grid-column: 2 / 5; } .bar-nov-dec { grid-column: 12 / 14; }
.calendar-note { margin-top: var(--space-l); font-size: var(--step--1); }

/* ---------- service page: features flanking a framed photo ---------- */
.flank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.flank-col { display: grid; gap: var(--space-xl); }
.flank-photo { aspect-ratio: 3 / 4; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-frost-100); color: var(--accent); }
.feature-icon .icon { width: 24px; height: 24px; }
.feature h3 { font-size: var(--step-2); line-height: 1.1; }
.feature p { margin-top: var(--space-2xs); color: var(--text-muted); }
.js .feature-icon .icon * { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.6s var(--ease-out) 0.3s; }
.js .is-shown .feature-icon .icon * { stroke-dashoffset: 0; }
.svc-intro { max-width: 62ch; margin: 0 auto var(--space-2xl); text-align: center; }
.svc-intro .h-section { margin-bottom: var(--space-m); }

/* ---------- seasonal timeline with scroll-linked progress ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); padding-top: var(--space-xl); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: var(--line); }
.timeline::after { background: var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: left; }
html:not(.js) .timeline::after { transform: scaleX(1); }
.timeline-item { position: relative; }
.timeline-item::before {
  content: ""; position: absolute; top: calc(var(--space-xl) * -1 + 3px); left: 0; width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--line); transition: border-color var(--dur-m), background-color var(--dur-m), transform var(--dur-m) var(--ease-out);
}
.timeline-item.is-reached::before { border-color: var(--accent); background: var(--accent); transform: scale(1.15); }
.timeline-item h3 { font-size: var(--step-2); }
.timeline-item p { margin-top: var(--space-2xs); color: var(--text-muted); }
.section-alt .timeline-item::before { background: var(--bg-alt); }

/* ---------- FAQ accordion ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-aside { position: sticky; top: calc(var(--header-h-compact) + var(--space-l)); }
.faq-aside p { margin-top: var(--space-s); color: var(--text-muted); }
.faq-aside .btn-row { margin-top: var(--space-l); }
.faq-group + .faq-group { margin-top: var(--space-2xl); }
.faq-group-title { font-size: var(--step-2); margin-bottom: var(--space-s); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-m);
  min-height: 64px; padding-block: var(--space-s); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.25;
  transition: color var(--dur-s);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-sign { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); transition: transform 0.5s var(--ease-out), border-color var(--dur-s), background-color var(--dur-s); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; transition: transform 0.5s var(--ease-out); }
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign { transform: rotate(180deg); background: var(--accent); border-color: var(--accent); color: var(--c-white); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }
.faq-answer { padding-bottom: var(--space-m); color: var(--text-muted); max-width: 64ch; overflow: hidden; }
.faq-answer p + p { margin-top: var(--space-xs); }

/* ---------- gallery with filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-xl); }
.filter-btn {
  min-height: 44px; padding: 0 var(--space-m); border: 2px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: 0.02em;
  transition: background-color var(--dur-s), border-color var(--dur-s), color var(--dur-s), transform var(--dur-s) var(--ease-out);
}
.filter-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.filter-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--c-white); }
.gallery-grid { columns: 3 260px; column-gap: var(--space-s); }
.gallery-grid .tile { break-inside: avoid; margin-bottom: var(--space-s); }
.gallery-grid .tile img { height: auto; aspect-ratio: 4 / 3; }
.gallery-grid .tile.is-tall img { aspect-ratio: 4 / 5; }
.gallery-grid .tile.is-hidden { display: none; }
.gallery-count { margin-bottom: var(--space-m); color: var(--text-muted); font-size: var(--step--1); }

/* ---------- about ---------- */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-copy { columns: 2 280px; column-gap: var(--space-xl); }
.story-copy p { color: var(--text-muted); margin-bottom: var(--space-s); break-inside: avoid; }
.story-copy p:first-child::first-letter { float: left; font-family: var(--font-display); font-weight: 700; font-size: 4.2em; line-height: 0.8; margin: 0.06em var(--space-2xs) 0 0; color: var(--accent); }
.story-photo { aspect-ratio: 2 / 3; transform: translate3d(0, var(--shift, 0px), 0); }
.story-head { margin-bottom: var(--space-xl); max-width: 22ch; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); }
.value { padding-top: var(--space-m); border-top: 3px solid var(--accent-on-dark); }
.value .icon { width: 28px; height: 28px; color: var(--accent-on-dark); }
.value h3 { font-size: var(--step-2); color: var(--c-white); margin-top: var(--space-s); }
.value p { margin-top: var(--space-2xs); }
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.area-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.area-chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 48px; padding: 0 var(--space-m);
  border: 2px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  transition: border-color var(--dur-s), transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s);
}
.area-chip .icon { color: var(--accent); width: 18px; height: 18px; }
.area-chip:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.form-card { background: var(--bg); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-frame); }
.form-card h2 { font-size: var(--step-3); }
.form-card > p { margin-top: var(--space-xs); color: var(--text-muted); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); margin-top: var(--space-xl); }
.field { display: grid; gap: var(--space-2xs); }
.field-full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; font-size: var(--step-0); }
.field .req { color: var(--c-error); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--bg);
  transition: border-color var(--dur-s), box-shadow var(--dur-s);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--c-spruce-600); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--c-grass-200); }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.field-error { color: var(--c-error); font-size: var(--step--1); font-weight: 600; }
.field-error:empty { display: none; }
.field-hint { font-size: var(--step--1); color: var(--text-muted); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.pill-options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.pill-option { position: relative; }
.pill-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill-option span {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-s);
  border: 2px solid var(--line); border-radius: var(--radius-pill); font-weight: 600;
  transition: background-color var(--dur-s), border-color var(--dur-s), color var(--dur-s);
}
.pill-option .icon { width: 18px; height: 18px; }
.pill-option input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--c-white); }
.pill-option input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; padding: var(--space-s) var(--space-m); border-radius: var(--radius-s); font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { background: var(--c-error-bg); color: var(--c-error); }
.form-status.is-success { background: var(--c-success-bg); color: var(--c-grass-700); }
.form .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.info-card { background: var(--bg-dark); color: var(--c-on-dark); padding: clamp(24px, 4vw, 40px); position: sticky; top: calc(var(--header-h-compact) + var(--space-l)); isolation: isolate; overflow: hidden; }
.info-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--topo-dark); -webkit-mask: var(--topo) 0 0 / var(--topo-size) repeat; mask: var(--topo) 0 0 / var(--topo-size) repeat; }
.info-card h2 { font-size: var(--step-2); color: var(--c-white); }
.info-list { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.info-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); color: var(--c-on-dark-muted); }
.info-list .icon { color: var(--accent-on-dark); width: 24px; height: 24px; }
.info-list strong { display: block; color: var(--c-white); font-family: var(--font-display); font-size: var(--step-1); }
.info-list a { color: var(--link-on-dark); }
.info-card a { color: var(--link-on-dark); }
.info-card .info-phone { color: var(--c-white); }
.info-card .info-phone:hover { color: var(--accent-on-dark); }
.info-phone { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; text-decoration: none; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--space-3xl) var(--space-2xl); }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: var(--c-scrim-strong); opacity: 0; transition: opacity 0.4s; }
.lightbox.is-open .lightbox-backdrop { opacity: 1; }
.lightbox-stage { position: relative; margin: 0; display: grid; justify-items: center; gap: var(--space-s); max-height: 100%; }
.lightbox-img { max-width: min(1400px, 100%); max-height: calc(100vh - 200px); width: auto; height: auto; object-fit: contain; box-shadow: var(--shadow-lift); opacity: 0; transform: scale(0.94); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.lightbox.is-open .lightbox-img.is-loaded { opacity: 1; transform: none; }
.lightbox-caption { color: var(--c-white); font-family: var(--font-display); font-size: var(--step-1); text-align: center; }
.lightbox-btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--c-glass-line); background: var(--c-glass); color: var(--c-white); transition: background-color var(--dur-s), transform var(--dur-s) var(--ease-out);
}
.lightbox-btn:hover { background: var(--c-white); color: var(--c-spruce-900); }
.lightbox-close { top: var(--space-m); right: var(--space-m); }
.lightbox-close:hover { transform: rotate(90deg); }
.lightbox-prev { left: var(--space-m); top: 50%; margin-top: -26px; }
.lightbox-next { right: var(--space-m); top: 50%; margin-top: -26px; }
.lightbox-count { position: absolute; top: var(--space-l); left: var(--space-l); color: var(--c-frost-100); font-weight: 600; }

/* snowfall canvas on the snow removal hero */
.snowfall { position: absolute; inset: 0; z-index: 1; color: var(--c-white); width: 100%; height: 100%; pointer-events: none; }

/* 404 / thanks */
.plain-body { max-width: 60ch; }
.plain-body .btn-row { margin-top: var(--space-xl); }

@media (max-width: 1000px) {
  .flank { grid-template-columns: 1fr 1fr; }
  .flank-photo { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; max-width: 640px; width: 100%; justify-self: center; }
  .values { grid-template-columns: 1fr 1fr; }
  .story { grid-template-columns: 1fr; }
  .story-photo { max-width: 420px; }
}
@media (max-width: 900px) {
  .scrolly { grid-template-columns: 1fr; }
  /* mobile: the photo becomes a sticky banner and the service blocks scroll beneath it */
  .scrolly-media { order: -1; top: var(--header-h-compact); z-index: 2; height: 36vh; min-height: 220px; margin-inline: calc(var(--gutter) * -1); }
  .scrolly-frame img { inset: 0; width: 100%; height: 100%; }
  .scrolly-step, .scrolly-step:first-child, .scrolly-step:last-child { min-height: 58vh; justify-content: start; padding-block: var(--space-xl) var(--space-l); }
  .faq-layout, .contact-grid, .areas { grid-template-columns: 1fr; }
  .faq-aside, .info-card { position: static; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: var(--space-2xl); }
  .timeline::before, .timeline::after { display: none; }
  .timeline-item::before { top: -30px; }
}
@media (max-width: 600px) {
  .flank, .form, .values { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .lightbox { padding: var(--space-3xl) var(--space-xs); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: var(--space-m); margin: 0; }
}

/* 20-motion.css */
/* Scroll reveal. Visible by default; the hidden state only exists under .js (set in <head>),
   one observed element per section, children choreographed from the parent (reveal.js). */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(0.94); }
.js [data-reveal="none"] { opacity: 1; transform: none; }
.js [data-reveal].is-shown { opacity: 1; transform: none; }

/* children that enter in sequence once their section is shown */
.js [data-reveal] [data-reveal-stagger] > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out); }
.js [data-reveal].is-shown [data-reveal-stagger] > * { opacity: 1; transform: none; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(2) { transition-delay: 0.1s; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(3) { transition-delay: 0.2s; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(4) { transition-delay: 0.3s; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(5) { transition-delay: 0.4s; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(6) { transition-delay: 0.5s; }
.js [data-reveal].is-shown [data-reveal-stagger] > :nth-child(n+7) { transition-delay: 0.6s; }

/* photographs wipe open from the bottom edge */
.js [data-reveal] [data-wipe] { clip-path: inset(100% -12% -12% -12%); transition: clip-path 1.3s var(--ease-in-out) 0.15s; }
.js [data-reveal].is-shown [data-wipe] { clip-path: inset(-12% -12% -12% -12%); }
.js [data-reveal] [data-slide-in] { opacity: 0; transform: translate3d(-40px, 0, 0); transition: opacity 0.8s var(--ease-out) 0.9s, transform 1s var(--ease-out) 0.9s; }
.js [data-reveal].is-shown [data-slide-in] { opacity: 1; transform: none; }

/* heading underline stroke that draws in with its section */
.rule-draw { display: block; width: 72px; height: 4px; margin-top: var(--space-m); background: var(--accent); border-radius: 2px; }
.section-dark .rule-draw, .hero .rule-draw { background: var(--accent-on-dark); }
.js [data-reveal] .rule-draw { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.35s; }
.js [data-reveal].is-shown .rule-draw { transform: scaleX(1); }
.text-center .rule-draw { margin-inline: auto; transform-origin: center; }
.text-center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms; animation-iteration-count: 1; transition-duration: 0.001ms; transition-delay: 0s; scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal] [data-reveal-stagger] > *, .js [data-reveal] [data-slide-in] { opacity: 1; transform: none; }
  .js [data-reveal] [data-wipe] { clip-path: none; }
  .js [data-reveal] .rule-draw { transform: none; }
  .hero-media, .band-photo-media, .ridge, .collage-item, .story-photo, .topo::before { transform: none; }
  .tile-open::before, .hero-plain::before { animation: none; }
}

/* generated focal points */
.img-hero-mowing{object-position:50% 60%}
.img-hero-hedge{object-position:40% 55%}
.img-cottage-garden{object-position:50% 55%}
.img-turf-soil{object-position:55% 45%}
.img-turf-roll{object-position:50% 50%}
.img-lawn-mower-sun{object-position:45% 60%}
.img-topiary-ladders{object-position:55% 50%}
.img-planting-flowers{object-position:45% 50%}
.img-snow-shovel{object-position:50% 55%}
.img-front-yard{object-position:50% 60%}
.img-lawn-stone-paths{object-position:50% 70%}
.img-garden-paths{object-position:50% 60%}
.img-lawn-hedges{object-position:40% 60%}
.img-juniper-stairs{object-position:40% 50%}
.img-sprinkler-dusk{object-position:50% 50%}
.img-trimmer{object-position:50% 60%}
.img-echinacea{object-position:50% 45%}
.img-leaf-pile{object-position:50% 50%}
.img-snowblower{object-position:55% 55%}
.img-sprinkler-lawn{object-position:50% 50%}
.img-arborist{object-position:55% 45%}
.img-potted-shrub{object-position:40% 55%}
.img-snow-tractor{object-position:50% 55%}
.img-courtyard{object-position:50% 60%}
.img-stone-terrace{object-position:50% 50%}