/* ==========================================================================
   All Things Home
   Design system, "The Estimate" direction.

   The whole site borrows the visual language of a contractor's written
   estimate: white paper, black ink, one green, ruled lines, numbers set in a
   monospace, nothing decorative that a pen and a ruler could not have made.
   No photography is load bearing. Real project photos slot into the proof
   components later, and the page reads the same without them.

   Rules that do not bend: 3px radii and no pill shapes, one accent, 44px
   minimum tap targets, AA contrast, no em dashes anywhere in copy.
   Motion lives in section 20. One reveal treatment reused, scroll state rather
   than per section entrances, opacity and transform only, off under
   prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. Fonts */
/* Self hosted, latin subsets, one origin. Regenerate with docs/fonts.md.
   Bricolage carries the headlines (trimmed to 500 to 800 weight, optical size
   pinned at 96), Instrument Sans carries the reading, IBM Plex Mono carries
   every number and label, the way a printed estimate would. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-display-latin.woff2") format("woff2-variations");
  font-weight: 500 800;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. Tokens */
:root {
  --paper: #FFFFFF;
  --paper-2: #F3F4F1;
  --white: #FFFFFF;
  --ink: #111111;
  --ink-2: #2B2B2B;
  --muted: #5F6660;
  --faint: #8A918B;
  --rule: #D6DAD4;
  --rule-soft: #E6E9E4;
  /* The greens come off the All Things Home logo. --green is the logo green
     exactly, used for fills, rules and focus rings. --green-text is a few
     steps deeper so it clears 4.5:1 both as text on white and as a button
     behind white text. */
  --green: #6E8A3B;
  --green-text: #55702C;
  --green-soft: #EDF1E3;
  --green-soft-2: #E1E9D2;
  --error: #B3261E;

  --bg: var(--paper);
  --bg-sunk: var(--paper-2);
  --bg-raised: var(--white);
  --fg: var(--ink);
  --fg-body: var(--ink-2);
  --fg-muted: var(--muted);
  --fg-faint: var(--faint);
  --dark-bg: var(--ink);
  --dark-fg: #FFFFFF;
  --dark-fg-muted: #B5BAB4;
  --dark-rule: #333633;
  --dark-green: #A7C877;

  --accent: var(--green);
  --accent-text: var(--green-text);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 3px;
  --border: 1px solid var(--rule);
  --border-heavy: 2px solid var(--fg);
  --tap: 44px;

  --step--1: 0.9rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.6vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.5rem + 5vw, 5rem);

  --gutter: 20px;
  --measure: 58ch;
  --shell: 1180px;
  --masthead-h: 66px;
  --n-col: 36px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;

  color-scheme: light;
}

/* One look only. The site is white paper in every browser and on every
   phone, whatever the system theme is set to. A dark variant existed and it
   was what people on dark-mode phones saw first, which is not the brand. */
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: var(--border); margin: 0; }
strong, b { font-weight: 600; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius);
}
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- 3. Typography */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 97;
  margin: 0 0 0.4em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-variation-settings: "wdth" 98; letter-spacing: -0.015em; line-height: 1.08; }
h4 { font-size: var(--step-1); font-variation-settings: "wdth" 100; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; color: var(--fg-body); }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--fg); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--step--1); line-height: 1.5; }

/* Labels and kickers are small caps in the body face. The mono is reserved
   for numbers: line item indexes, phone numbers, codes. Used for words it
   read as a terminal, which is the wrong feeling for a house. */
.kicker, .label, .mono, th, .progress__label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--fg-muted); }
.kicker { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.kicker--bare::after { display: none; }
.num { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-text); }

.rule-title {
  display: grid; gap: 8px;
  padding-top: 16px;
  margin-bottom: 28px;
  position: relative;
}
.rule-title::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--fg);
  transform: scaleX(var(--draw, 1));
  transform-origin: left center;
}
.rule-title h2 { margin-bottom: 0; }
.rule-title .kicker { margin-bottom: 4px; }
.rule-title .kicker::after { display: none; }
.section--dark .rule-title::before { background: var(--dark-fg); }

/* -------------------------------------------------------------- 4. Layout */
[id] { scroll-margin-top: calc(var(--masthead-h) + 16px); }
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 800px); margin-inline: auto; }
.narrow { max-width: 800px; }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.section--sunk { background: var(--bg-sunk); }
.section--dark { background: var(--dark-bg); color: var(--dark-fg); }
.section--dark p { color: var(--dark-fg); }
.section--dark .kicker, .section--dark .muted, .section--dark p.muted { color: var(--dark-fg-muted); }
.section--dark .kicker::after { background: var(--dark-rule); }
.section--dark .amt { color: var(--dark-green); }
.section--dark .mono--us { color: var(--dark-green); }
.section--tight { padding: clamp(36px, 5vw, 60px) 0; }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.two-col { display: grid; gap: clamp(24px, 4vw, 64px); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } .two-col--wide-left { grid-template-columns: 1.15fr 1fr; } }
.stack > * + * { margin-top: 1em; }

/* -------------------------------------------------------------- 5. Buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { --btn-bg: #2A2823; --btn-bd: #2A2823; }
.btn--primary { --btn-bg: var(--green-text); --btn-fg: #FFFFFF; --btn-bd: var(--green-text); }
.btn--primary:hover { --btn-bg: #445C22; --btn-bd: #445C22; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg); }
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }
.btn--on-dark { --btn-bg: transparent; --btn-fg: var(--dark-fg); --btn-bd: var(--dark-fg); }
.btn--on-dark:hover { --btn-bg: var(--dark-fg); --btn-fg: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  color: var(--fg);
  border-bottom: 2px solid var(--green); padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--fg); }
.section--dark .link-arrow { color: var(--dark-fg); border-bottom-color: var(--dark-green); }
.section--dark .link-arrow:hover { border-bottom-color: var(--dark-fg); }

/* --------------------------------------------------------------- 6. Header */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 2px solid var(--fg);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--masthead-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: var(--tap); }
.brand img { width: 34px; height: 34px; border-radius: var(--radius); }
.brand__name {
  font-family: var(--font-display); font-variation-settings: "wdth" 97;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1;
}
.brand__name i { font-style: normal; color: var(--accent-text); }
.brand__sub { display: block; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; margin-top: 4px; }
.nav { display: none; gap: 24px; align-items: center; }
.nav a {
  font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--fg-body);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--green); }
.masthead__cta { display: none; }
@media (max-width: 479px) { .brand__sub { display: none; } }
@media (min-width: 960px) { .nav, .masthead__cta { display: flex; } }

.menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 14px; background: transparent; border: 2px solid var(--fg); border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
@media (min-width: 960px) { .menu-toggle { display: none; } }
.mobile-nav { display: none; border-top: var(--border); padding: 8px 0 20px; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a { display: block; padding: 14px 0; border-bottom: var(--border); text-decoration: none; font-weight: 500; }

/* ----------------------------------------------------------------- 7. Hero */
/* Paper, type and one ruled sheet. No background image, so the headline is
   the LCP element and there is nothing to preload. */
.hero { position: relative; background: var(--bg); color: var(--fg); overflow: hidden; }
.hero__inner { position: relative; display: grid; gap: clamp(24px, 4vw, 40px); padding: clamp(32px, 6vw, 84px) 0 clamp(28px, 5vw, 64px); }
.hero h1 { max-width: 13ch; margin-bottom: 0.25em; }
.hero__lede { color: var(--fg-body); max-width: 44ch; font-size: var(--step-1); line-height: 1.45; margin-bottom: 0.8em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.hero__cta small { color: var(--fg-muted); font-size: 0.86rem; flex-basis: 100%; }
.hero--page .hero__inner { padding-bottom: clamp(8px, 2vw, 24px); }
.hero--page h1 { font-size: var(--step-3); max-width: 20ch; }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
  .hero__cta small { flex-basis: auto; margin-left: 4px; }
}
/* The home hero is type alone: one column, a wider headline, more air. */
.hero__inner--solo { grid-template-columns: 1fr; padding-top: clamp(40px, 8vw, 112px); padding-bottom: clamp(32px, 6vw, 80px); }
.hero__inner--solo h1 { max-width: 15ch; font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem); }
.hero__inner--solo .hero__lede { max-width: 52ch; }

/* The address goes in right here. One field, one button, nothing else. */
.hero-form { display: grid; gap: 10px; max-width: 560px; margin-top: 4px; }
.hero-form input[type="text"] {
  min-height: 56px; font-size: 1.05rem; padding: 12px 16px;
  background: var(--bg-raised); border: 2px solid var(--fg); border-radius: var(--radius);
}
.hero-form input[type="text"]:focus { border-color: var(--green-text); background-color: var(--bg-raised); background-size: 0 0, 0 0; }
.hero-form .btn { min-height: 56px; }
.hero__note { margin: 12px 0 0; font-size: 0.9rem; color: var(--fg-muted); }
.hero__note a { color: var(--fg); font-weight: 600; text-decoration-color: var(--green); }
@media (min-width: 560px) {
  .hero-form { grid-template-columns: 1fr auto; gap: 8px; }
}

/* The sheet: a ledger that reads like the seller's side of an estimate. */
.sheet { border-top: 2px solid var(--fg); background: transparent; }
.sheet__head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 6px; }
.row {
  display: grid; grid-template-columns: var(--n-col) 1fr auto; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: var(--border); font-size: 1rem; color: var(--fg-body);
}
.row .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); }
.row .amt { font-size: 1rem; }
.row--total { border-bottom: 2px solid var(--fg); font-weight: 600; color: var(--fg); }
.row--total .amt { font-size: 1.15rem; }
.sheet__foot { padding: 10px 0 0; font-size: 0.86rem; color: var(--fg-muted); }

/* Two column ledger: what listing costs beside what selling to us costs. */
.sheet__cols { display: grid; grid-template-columns: var(--col-them, 84px) var(--col-us, 100px); gap: 14px; text-align: right; white-space: nowrap; }
.mono--us { color: var(--accent-text); }
.sheet--compare .row { grid-template-columns: var(--n-col) 1fr var(--col-them, 84px) var(--col-us, 100px); gap: 12px 14px; }
.sheet--compare .row > span:nth-child(2) { min-width: 0; }
.sheet--compare .them { font-family: var(--font-mono); font-size: 0.86rem; color: var(--fg-muted); text-align: right; white-space: nowrap; }
.sheet--compare .amt { text-align: right; white-space: nowrap; }
.sheet--compare .row--total .them { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 479px) {
  .sheet--compare { --n-col: 24px; --col-them: 66px; --col-us: 88px; }
  .sheet--compare .row { font-size: 0.94rem; gap: 10px; }
  .sheet--compare .them, .sheet--compare .amt { font-size: 0.8rem; }
  .sheet--compare .sheet__cols .mono { font-size: 0.68rem; }
  .sheet--compare .sheet__head > .mono:first-child { font-size: 0.68rem; }
}
.sheet__foot p { margin: 0; color: inherit; }

/* Other ways in, one line under the hero. */
.also { border-top: 2px solid var(--fg); border-bottom: var(--border); }
.also__inner { display: grid; gap: 0; }
.also a {
  display: grid; grid-template-columns: var(--n-col) 1fr auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 0; text-decoration: none; color: var(--fg); border-bottom: var(--border);
}
.also a:last-child { border-bottom: 0; }
.also .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); }
.also__body { display: block; }
.also b { display: block; font-weight: 600; }
.also__sub { display: block; font-size: 0.92rem; color: var(--fg-muted); }
.also .go { color: var(--accent-text); font-weight: 600; transition: transform var(--dur) var(--ease); }
.also a:hover .go { transform: translateX(3px); }
.also a:hover b { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .also__inner { grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .also a { border-bottom: 0; min-height: 68px; }
}

.band { display: grid; gap: 20px; align-items: center; }
.band .kicker { margin-bottom: 8px; }
.band h2 { margin: 0; }
@media (min-width: 900px) { .band { grid-template-columns: 1fr auto; gap: 48px; } }


/* ------------------------------------------------- 7b. Homepage, human pass */
/* The homepage no longer repeats one section shape. A split hero with a real
   photograph, a paragraph with links in it, a letter with a narrow measure,
   the form, another paragraph. Slots mark what Chris has to supply and only
   render outside production. */
.hero--split .hero__split { display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(36px, 6vw, 88px) 0 clamp(32px, 5vw, 64px); align-items: center; }
.hero--split h1 { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.6rem); max-width: 16ch; }
.hero--split .hero__lede { max-width: 50ch; font-size: var(--step-1); }
.hero__photo { margin: 0; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.hero__photo figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--fg-muted); }
@media (min-width: 900px) {
  .hero--split .hero__split { grid-template-columns: 1.15fr 0.85fr; }
  .hero__photo { max-width: 460px; justify-self: end; width: 100%; }
}

.slot {
  border: 1.5px dashed var(--green); border-radius: var(--radius); background: var(--green-soft);
  padding: 18px 20px; display: grid; gap: 6px; color: var(--fg-body); font-size: 0.95rem;
}
.slot strong { color: var(--accent-text); }
.slot code { font-family: var(--font-mono); font-size: 0.85em; }
.slot.hero__photo { aspect-ratio: 4 / 5; align-content: center; text-align: center; }
.slot--inline { margin: 6px 0 22px; }

.prose-block { max-width: 760px; }
.prose-block h2 { margin-bottom: 0.6em; }
.prose-block p a { color: var(--fg); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }
.prose-block p a:hover { color: var(--accent-text); }

.letter { display: grid; gap: 20px; max-width: 900px; }
.letter__from { font-weight: 600; color: var(--fg-muted); margin: 0; }
.letter__aside .who__portrait { max-width: 160px; margin-bottom: 12px; }
.letter__body p { font-size: var(--step-1); line-height: 1.5; color: var(--fg); max-width: 60ch; }
.letter__body p a { color: var(--fg); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.letter .sig { border-top: 0; padding-top: 6px; }
@media (min-width: 900px) { .letter { grid-template-columns: 180px 1fr; gap: 48px; align-items: start; } }

.start-head { margin-bottom: 28px; max-width: 760px; }
.start-head h2 { margin-bottom: 0.3em; }
.start-head .lede { margin: 0; }
.start-aside p { font-size: 1rem; line-height: 1.55; max-width: 44ch; }
.start-aside strong { color: var(--fg); }
.start-aside a { color: var(--fg); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }


/* --------------------------------------------------------- 6b. Glass bar */
/* Fixed, translucent, blurred. Call on the left, logo centered, About on the
   right. The mobile call bar at the bottom is switched off on pages that use
   it, because the phone number is already in the bar. */
:root { --glass-h: 60px; --glass-top: 14px; }
body.has-glassbar { padding-top: calc(var(--glass-h) + var(--glass-top) + 12px); }
/* A floating bar, not a full width band: capped at 720px, centered, a little
   off the top edge, so the page shows around it. 3px radius, no pill. */
.glassbar {
  position: fixed; top: var(--glass-top); left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(100% - (var(--gutter) * 2), 720px);
  height: var(--glass-h);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 28px rgba(17, 17, 17, 0.08);
}
.glassbar__inner {
  height: 100%; padding: 0 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.glassbar__call, .glassbar__about {
  display: inline-flex; align-items: center; min-height: var(--tap);
  text-decoration: none; color: var(--fg); font-weight: 600; font-size: 0.95rem;
  padding: 6px 0; justify-self: start;
}
.glassbar__about { justify-self: end; }
.glassbar__about[aria-current="page"], .glassbar__about:hover, .glassbar__call:hover { color: var(--accent-text); }
.glassbar__call { flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 1px; }
.glassbar__call-label { color: var(--accent-text); }
.glassbar__call-num { font-size: 0.82rem; font-weight: 500; color: var(--fg-muted); }
.glassbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: center; min-height: var(--tap); }
.glassbar__brand img { width: 64px; height: 32px; }
.glassbar__name { font-family: var(--font-display); font-variation-settings: "wdth" 97; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.glassbar__name i { font-style: normal; color: var(--accent-text); }
@media (max-width: 479px) {
  .glassbar__name { display: none; }
  .glassbar__call-num { display: none; }
  .glassbar__call-label { font-size: 0.9rem; }
}
.has-glassbar .mobile-cta { display: none; }
@media (max-width: 959px) { body.has-glassbar:not(.no-mobile-cta) { padding-bottom: 0; } }
.has-glassbar [id] { scroll-margin-top: calc(var(--glass-h) + var(--glass-top) + 16px); }

/* ------------------------------------------------------------- 7c. Guide */
/* The homepage opens on a choice, and each answer reveals the next question.
   One form; the layers are fieldsets that show one at a time with scripting
   and all at once without it. */
.guide-wrap { padding: clamp(36px, 7vw, 96px) 0 clamp(24px, 4vw, 48px); }
.guide { max-width: 860px; scroll-margin-top: calc(var(--glass-h) + var(--glass-top) + 24px); }
.guide__where { margin: 0 0 12px; font-size: 0.9rem; color: var(--fg-muted); font-weight: 500; }
.guide__layer { border: 0; padding: 0; margin: 0; min-width: 0; }
.guide__layer[hidden] { display: none; }
.guide__q { font-family: var(--font-display); font-variation-settings: "wdth" 97; font-weight: 700; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; max-width: 18ch; text-wrap: balance; }
.guide__hint { margin: -12px 0 22px; color: var(--fg-muted); }
.guide__aside { margin: 22px 0 0; font-size: 0.95rem; color: var(--fg-muted); }
.guide__aside a { color: var(--fg); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }
.guide__foot { margin: 22px 0 0; font-size: 0.92rem; color: var(--fg-muted); max-width: 60ch; }
.guide__foot a { color: var(--fg); font-weight: 600; text-decoration-color: var(--green); }

/* Two columns that are locked to each other. minmax(0, 1fr) rather than 1fr,
   so a long word can never push one column wider than the other, and stretch
   said out loud at every level, so the row height reaches the card itself
   whatever the copy wraps to. */
.paths { display: grid; gap: 14px; align-items: stretch; justify-items: stretch; }
@media (min-width: 720px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* The label is the grid item, so it is stretched to the tallest card in the
   row by the outer grid. Making it a grid container itself passes that height
   straight down to the card, so both cards end up identical whatever their
   copy wraps to. */
.path { position: relative; display: grid; align-items: stretch; min-width: 0; }
.path input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Glass, the same material as the bar at the top: translucent, blurred, a
   hairline of white along the inside of the top edge, and a real shadow so it
   sits above the page rather than being drawn on it. */
.path__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 8px; grid-template-rows: auto auto 1fr;
  box-sizing: border-box; height: 100%; min-height: 220px; padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(17, 17, 17, 0.14); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 10px 30px rgba(17, 17, 17, 0.09);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms var(--ease);
}
/* The fill: a green circle that grows out from wherever the pointer entered
   (site.js writes --mx and --my on the card) until it covers the whole card.
   Pure transform, so it is cheap, and it reverses when the pointer leaves. */
.path__card::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  clip-path: circle(50%);
  background: var(--green-text);
  transform: scale(0);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.path__card > * { position: relative; }
.path__title { font-family: var(--font-display); font-variation-settings: "wdth" 97; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; transition: color var(--dur) var(--ease); }
.path__sub { font-size: 1rem; color: var(--fg-muted); line-height: 1.45; max-width: 34ch; transition: color var(--dur) var(--ease); }
.path__go { align-self: end; padding-top: 14px; font-weight: 600; color: var(--accent-text); display: inline-flex; gap: 8px; align-items: center; transition: color var(--dur) var(--ease); }
.path__go .btn__arrow { transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .path__card:hover {
    border-color: var(--green-text); color: #fff; transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 20px 44px rgba(85, 112, 44, 0.26);
  }
  .path__card:hover::before { transform: scale(60); }
  .path__card:hover .path__title, .path__card:hover .path__sub, .path__card:hover .path__go { color: #fff; }
  .path__card:hover .path__go .btn__arrow { transform: translateX(6px); }
}
.path input:checked + .path__card {
  background: var(--fg); color: #fff; border-color: var(--fg);
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.2);
}
.path input:checked + .path__card::before { display: none; }
.path input:checked + .path__card .path__title, .path input:checked + .path__card .path__go { color: #fff; }
.path input:checked + .path__card .path__sub { color: rgba(255,255,255,0.75); }
@media (prefers-reduced-motion: reduce) {
  .path__card::before { transition: none; }
  .path__card:hover { transform: none; }
}
/* A faint green wash under the pair, so the glass has something to sit on and
   the blur actually reads on an otherwise plain white page. */
.paths::before {
  content: ""; position: absolute; z-index: -1; inset: -6% -4% -10%;
  background: radial-gradient(58% 72% at 28% 30%, rgba(110, 138, 59, 0.20), transparent 70%),
              radial-gradient(54% 66% at 78% 66%, rgba(110, 138, 59, 0.15), transparent 72%);
  pointer-events: none;
}
.paths { position: relative; }
.path input:focus-visible + .path__card { outline: 3px solid var(--green); outline-offset: 3px; }

.chips { display: grid; gap: 10px; }
@media (min-width: 560px) { .chips { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .chips { grid-template-columns: repeat(3, 1fr); } }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; min-height: 56px; padding: 12px 16px;
  border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--bg-raised);
  font-weight: 500; font-size: 1rem; line-height: 1.25; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip span::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  clip-path: circle(50%);
  background: var(--green-text);
  transform: scale(0);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .chip span:hover { border-color: var(--green-text); color: #fff; transform: translateY(-1px); }
  .chip span:hover::before { transform: scale(40); }
}
.chip input:checked + span { background: var(--fg); color: #fff; border-color: var(--fg); }
.chip input:checked + span::before { display: none; }
@media (prefers-reduced-motion: reduce) { .chip span::before { transition: none; } .chip span:hover { transform: none; } }
.chip input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }

.guide__fields { display: grid; gap: 4px 16px; max-width: 640px; }
@media (min-width: 620px) { .guide__fields { grid-template-columns: 1.4fr 1fr; } .guide__fields:has(#g-name) { grid-template-columns: 1fr 1fr; } }
.guide .field input, .guide .field textarea { font-size: 1.05rem; }
.guide__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.guide__nav .btn--lg { min-width: 200px; }
.guide__crumb { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; font-size: 0.9rem; color: var(--fg-muted); }
.guide__crumb button { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.guide--thanks { padding-top: 8px; }
.thanks-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--fg); max-width: 60ch; counter-reset: t; }
.thanks-list li { padding: 12px 0; border-bottom: var(--border); font-size: var(--step-1); line-height: 1.4; }

/* ---------------------------------------------------- 8. What we buy list */
/* Six numbered lines. Name, one plain sentence, an arrow. Nothing to load. */
.buy-list { border-top: 2px solid var(--fg); counter-reset: buy; }
.buy-list--compact .buy { padding: 14px 0; }
@media (min-width: 900px) { .buy-list--compact { grid-template-columns: repeat(3, 1fr); gap: 0 40px; } .buy-list--compact .buy { padding: 18px 0; } }
.buy {
  display: grid; grid-template-columns: var(--n-col) 1fr auto; align-items: center; gap: 12px 14px;
  padding: 16px 0; border-bottom: var(--border);
  text-decoration: none; color: inherit; min-height: var(--tap);
  position: relative;
}
.buy .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); align-self: start; padding-top: 6px; }
.buy b { display: block; font-family: var(--font-display); font-variation-settings: "wdth" 98; font-weight: 650; font-size: var(--step-1); line-height: 1.1; letter-spacing: -0.015em; }
.buy__body { display: block; }
.buy__sub { display: block; margin-top: 4px; font-size: 0.95rem; color: var(--fg-muted); line-height: 1.4; max-width: 46ch; }
.buy .go { color: var(--accent-text); font-weight: 600; font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
.buy:hover .go, .buy:focus-visible .go { transform: translateX(4px); }
.buy:hover b { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .buy-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .buy { padding: 20px 0; }
}
.section--dark .buy-list { border-top-color: var(--dark-fg); }
.section--dark .buy { border-bottom-color: var(--dark-rule); color: var(--dark-fg); }
.section--dark .buy .n, .section--dark .buy__sub { color: var(--dark-fg-muted); }
.section--dark .buy .go { color: var(--dark-green); }

/* ------------------------------------------------------------ 9. Calculator */
.calc { display: grid; gap: clamp(24px, 4vw, 48px); }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 0.9fr; } }
.calc__fields { display: grid; gap: 16px; align-content: start; }
.calc__out { border-top: 2px solid var(--fg); align-self: start; }
.calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: var(--border); }
.calc__row dt { font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.calc__row dd { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--step-2); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--fg); }
.calc__row--total { border-bottom: 2px solid var(--fg); }
.calc__row--total dd { color: var(--error); font-size: var(--step-3); }
.calc__note { font-size: var(--step--1); color: var(--fg-muted); margin: 14px 0 0; }

/* -------------------------------------------------------------- 10. Steps */
.steps { display: grid; gap: 0; border-top: 2px solid var(--fg); counter-reset: step; }
.section--dark .steps { border-top-color: var(--dark-fg); }
.step { display: grid; gap: 4px 12px; padding: clamp(16px, 3vw, 24px) 0; border-bottom: var(--border); grid-template-columns: var(--n-col) 1fr; align-items: start; }
.section--dark .step { border-bottom-color: var(--dark-rule); }
.step__n { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; line-height: 1.9; color: var(--fg-muted); }
.section--dark .step__n { color: var(--dark-fg-muted); }
.step__body h3, .step__body h4 { margin-bottom: 4px; font-size: var(--step-1); font-variation-settings: "wdth" 96; font-weight: 650; letter-spacing: -0.01em; line-height: 1.15; }
.step__body p { margin: 0; color: var(--fg-muted); font-size: 0.98rem; }
.section--dark .step__body h3, .section--dark .step__body h4 { color: var(--dark-fg); }
.section--dark .step__body p { color: var(--dark-fg-muted); }
@media (min-width: 900px) {
  .steps--row { grid-template-columns: repeat(4, 1fr); border-bottom: var(--border); }
  .section--dark .steps--row { border-bottom-color: var(--dark-rule); }
  .steps--row .step { border-bottom: 0; border-right: var(--border); padding-right: 24px; grid-template-columns: 1fr; }
  .section--dark .steps--row .step { border-right-color: var(--dark-rule); }
  .steps--row .step:last-child { border-right: 0; }
  .steps--row .step__body h3, .steps--row .step__body h4 { min-height: 2.3em; }
}

/* ------------------------------------------------------------- 11. Forms */
.form-panel { border: 2px solid var(--fg); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fg); gap: 1px; }
.tabs button {
  appearance: none; border: 0; background: var(--bg-raised); color: var(--fg-muted);
  min-height: 56px; padding: 10px 8px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  border-radius: 0; border-bottom: 3px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--green); background: var(--bg-raised); }
.tabpanel { padding: clamp(20px, 3vw, 32px); }
.tabpanel[hidden] { display: none; }

.progress { height: 3px; background: var(--rule-soft); border-radius: 0; overflow: hidden; margin-bottom: 22px; }
.progress__bar { height: 100%; width: 25%; background: var(--green); transition: width 320ms var(--ease); }
.progress__label { margin: 0 0 10px; display: block; }

.field { display: grid; gap: 7px; margin-bottom: 16px; align-content: start; }
.field > label, .label { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--fg); }
.field__hint { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }
.field__error { font-size: var(--step--1); color: var(--error); font-weight: 600; margin: 0; }
.field--half { display: grid; }
@media (min-width: 620px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  background: var(--bg-sunk);
  border: 0;
  border-bottom: 2px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
input:hover, select:hover, textarea:hover { border-color: var(--fg-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--fg); background: var(--bg-raised); outline-offset: 0; }
/* Focus: a green line draws along the bottom edge from the left. Valid: a
   check pops in at the right (site.js sets data-valid as you type). */
input[type="text"], input[type="tel"], input[type="email"], textarea {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%2355702C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--green-text), var(--green-text));
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, left bottom;
  background-size: 0 0, 0% 2px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), background-size 360ms cubic-bezier(0.22, 0.61, 0.36, 1), padding-right var(--dur) var(--ease);
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, textarea:focus { background-size: 0 0, 100% 2px; }
input[data-valid="true"], textarea[data-valid="true"] { background-size: 20px 20px, 0% 2px; padding-right: 42px; animation: check-pop 360ms cubic-bezier(0.34, 1.5, 0.64, 1); }
input[data-valid="true"]:focus, textarea[data-valid="true"]:focus { background-size: 20px 20px, 100% 2px; }
@keyframes check-pop { 0% { background-size: 0 0, 100% 2px; } 60% { background-size: 26px 26px, 100% 2px; } 100% { background-size: 20px 20px, 100% 2px; } }
.field:focus-within > label { color: var(--accent-text); }
.field > label { transition: color var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) { input[data-valid="true"], textarea[data-valid="true"] { animation: none; } }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
::placeholder { color: var(--fg-faint); opacity: 1; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg);
  font-weight: 500; font-size: 0.92rem; line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice span:hover { border-color: var(--fg); }
.choice input:checked + span { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.choice input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }

.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-bottom: 16px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--green-text); border-radius: var(--radius); }
.check label { font-size: 0.95rem; line-height: 1.45; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.form-actions .btn { flex: 1 1 auto; }
.consent { font-size: 0.82rem; line-height: 1.5; color: var(--fg-muted); margin: 16px 0 0; max-width: 58ch; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); font-size: 0.95rem; display: none; }
.form-status[data-state="error"] { display: block; background: color-mix(in srgb, var(--error) 10%, var(--bg)); border: 2px solid var(--error); }
.form-status[data-state="working"] { display: block; background: var(--bg-sunk); border: 2px solid var(--rule); }
.form-status[data-state="success"] { display: block; background: var(--green-soft); border: 2px solid var(--green-text); }

.thanks { text-align: left; }
.thanks__mark { width: 52px; height: 52px; display: grid; place-items: center; background: var(--green-text); color: #fff; border-radius: var(--radius); margin-bottom: 18px; font-family: var(--font-body); font-weight: 700; }
.thanks ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: t; border-top: 2px solid var(--fg); }
.thanks li { display: grid; grid-template-columns: var(--n-col) 1fr; gap: 10px; padding: 12px 0; border-bottom: var(--border); }
.thanks li::before { counter-increment: t; content: "0" counter(t); font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); padding-top: 4px; }

.trust-list { display: grid; gap: 0; list-style: none; border-top: 2px solid var(--fg); }
.trust-list li { display: grid; gap: 3px; padding: 14px 0; border-bottom: var(--border); }
.trust-list strong { font-weight: 600; font-size: 0.98rem; }
.trust-list p { margin: 0; font-size: 0.94rem; color: var(--fg-muted); }
.trust-list--bare li { padding: 12px 0; }
.section--dark .trust-list { border-top-color: var(--dark-fg); }
.section--dark .trust-list li { border-bottom-color: var(--dark-rule); }
.section--dark .trust-list p { color: var(--dark-fg-muted); }

/* ---------------------------------------------------------- 12. Comparison */
.compare { border-top: 2px solid var(--fg); }
.compare__grid { display: grid; gap: 0; }
@media (min-width: 900px) { .compare__grid { grid-template-columns: repeat(3, 1fr); gap: 0 32px; } }
.compare__col { padding: 20px 0; border-bottom: var(--border); display: grid; align-content: start; gap: 12px; }
@media (min-width: 900px) { .compare__col { padding: 24px 0 28px; } }
.compare__col--primary { position: relative; }
.compare__col--primary::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--green); }
.compare__col h3 { font-size: var(--step-1); margin: 0; }
.compare__best { font-size: 0.94rem; color: var(--fg-muted); margin: 0; }
.compare__rows { display: grid; gap: 0; }
.compare__rows div { display: grid; gap: 2px; padding: 10px 0; border-top: var(--border); }
.compare__rows dt { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.compare__rows dd { margin: 0; font-size: 0.96rem; }
.compare__flag { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin: 0; }

/* --------------------------------------------------------------- 13. Proof */
.proof-grid { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 900px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.ba { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); text-decoration: none; display: block; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.ba__pair figure { margin: 0; position: relative; background: var(--bg-sunk); }
.ba__pair figcaption { position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; }
.ba__body { padding: 18px 20px 22px; }
.ba__body h4 { margin-bottom: 4px; }
.ba__body p { margin: 0; font-size: 0.94rem; color: var(--fg-muted); }

/* A note from Chris. Paper, his words, his name under it. */
.note-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .note-grid { grid-template-columns: 1.3fr 0.7fr; } .note-grid .who__portrait { max-width: 220px; } }
.note__body { font-size: var(--step-1); line-height: 1.5; max-width: 60ch; color: var(--fg); margin: 0 0 22px; }
.note .sig { border-top: 0; padding-top: 0; }
.note__actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 22px; }

/* Who texts you back. A signature block, not a headshot. The portrait slot
   only renders when a real photograph exists. */
.who { display: grid; gap: 22px; align-items: start; }
@media (min-width: 760px) { .who--portrait { grid-template-columns: 180px 1fr; } }
.who__portrait { width: 100%; aspect-ratio: 1; background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.who__portrait img { width: 100%; height: 100%; object-fit: cover; }
.sig { border-top: 2px solid var(--fg); padding-top: 16px; display: grid; gap: 6px; }
.sig__name { font-family: var(--font-display); font-variation-settings: "wdth" 97; font-weight: 700; font-size: var(--step-2); letter-spacing: -0.015em; line-height: 1.05; }
.sig__role { font-family: var(--font-body); font-size: 0.9rem; color: var(--fg-muted); }
.sig p { margin: 8px 0 0; }

.map-dots { position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunk); border: 1px solid var(--rule); border-radius: var(--radius); }
.reviews-slot { border: 1px dashed var(--rule); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); text-align: left; color: var(--fg-muted); font-size: 0.95rem; }
.reviews-slot p { color: inherit; }

/* ----------------------------------------------------------------- 14. FAQ */
/* The whole block is pulled out by --faq-pad on both sides and the question
   and answer are padded back in by the same amount, so the text sits exactly
   where it would with no padding while the open card's green fill has room
   to breathe past it. */
.faq { --faq-pad: 14px; border-top: 2px solid var(--fg); margin-inline: calc(var(--faq-pad) * -1); }
.faq details { border-bottom: var(--border); box-sizing: border-box; border-radius: var(--radius); transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 60px; padding: 16px var(--faq-pad); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-variation-settings: "wdth" 98;
  font-weight: 650; font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* Hover: a pale green wipe runs in from the left behind the question, the
   question steps right a little, and the plus spins a quarter turn and goes
   green. Open: the plus becomes an x (the existing 45 degree turn). */
.faq summary {
  background: linear-gradient(var(--green-soft), var(--green-soft)) no-repeat left center / 0% 100%;
  transition: background-size 380ms cubic-bezier(0.22, 0.61, 0.36, 1), padding-left 260ms var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) {
  .faq summary:hover { background-size: 100% 100%; padding-left: calc(var(--faq-pad) + 12px); color: var(--accent-text); }
  .faq summary:hover::after { background: var(--green-text); transform: rotate(90deg) scale(1.15); }
  .faq details[open] summary:hover::after { transform: rotate(135deg) scale(1.15); }
  /* An open card is already green, so its hover wipe goes one shade deeper. */
  .faq details[open] summary { background-image: linear-gradient(var(--green-soft-2), var(--green-soft-2)); }
}
/* Open: the question and its answer sit together on a soft green card. */
.faq details[open] { background-color: var(--green-soft); border-bottom-color: var(--green-soft-2); }
.faq details[open] summary { color: var(--accent-text); }
.faq details[open] summary::after { background: var(--green-text); }
/* The card clips its own overflow while it animates, so the focus ring has to
   sit inside it or only its bottom edge shows as a stray line. */
.faq summary:focus-visible { outline-offset: -3px; }
.faq details > div { animation: faq-open 320ms var(--ease) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq summary::after { content: ""; flex: 0 0 14px; height: 14px; margin-right: 6px; background: var(--fg); clip-path: polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%); transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1), background var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--faq-pad) 22px; max-width: calc(var(--measure) + var(--faq-pad) * 2); color: var(--fg-body); }
.faq details > div p { color: inherit; }
.section--dark .faq details > div { color: var(--dark-fg-muted); }
.section--dark .faq, .section--dark .faq details { border-color: var(--dark-rule); }
.section--dark .faq { border-top-color: var(--dark-fg); }
.section--dark .faq summary::after { background: var(--dark-fg); }
.section--dark .faq details[open] { background-color: rgba(110, 138, 59, 0.2); border-bottom-color: rgba(110, 138, 59, 0.38); }

/* -------------------------------------------------------------- 15. Scouts */
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.trade-list { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; }
.trade-list li { padding: 4px 0; font-size: 0.95rem; font-weight: 500; }
.trade-list li::before { content: "/ "; color: var(--accent-text); }
.section--dark .trade-list li { color: var(--dark-fg); }
.section--dark .trade-list li::before { color: var(--dark-green); }

/* -------------------------------------------------------------- 16. Footer */
.footer { background: var(--dark-bg); color: var(--dark-fg); padding: clamp(44px, 6vw, 76px) 0 32px; border-top: 1px solid var(--dark-rule); }
.footer p { color: var(--dark-fg-muted); }
.footer a { color: var(--dark-fg-muted); text-decoration: none; }
.footer a:hover { color: var(--dark-fg); text-decoration: underline; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3, .footer h4 { font-family: var(--font-body); font-variation-settings: normal; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-fg-muted); margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 9px; font-size: 0.94rem; }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--dark-rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.82rem; color: var(--dark-fg-muted); }
.footer__phone { font-family: var(--font-display); font-variation-settings: "wdth" 97; font-weight: 700; font-size: var(--step-2); color: var(--dark-fg); text-decoration: none; display: inline-block; margin-bottom: 8px; letter-spacing: -0.01em; }
.footer__phone:hover { color: var(--dark-green); text-decoration: none; }

/* ------------------------------------------------------- 17. Mobile CTA bar */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto; gap: 1px;
  background: var(--fg); border-top: 2px solid var(--fg);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta a { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.mobile-cta__primary { background: var(--green-text); color: #fff; }
.mobile-cta__call { background: var(--bg-raised); color: var(--fg); padding-inline: 22px; }
body { padding-bottom: 0; }
@media (max-width: 959px) { body:not(.no-mobile-cta) { padding-bottom: 58px; } }
@media (min-width: 960px) { .mobile-cta { display: none; } }

/* --------------------------------------------------------------- 18. Admin */
.page-admin { background: #F5F6F2; }
.page-admin.has-glassbar { padding-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.admin-shell { max-width: 1220px; margin-inline: auto; padding: 0 var(--gutter) 96px; }
.admin-header { min-height: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; border-bottom: 1px solid var(--rule); }
.admin-header__brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 0.95rem; line-height: 1.15; white-space: nowrap; }
.admin-header__brand small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 0.61rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.admin-header__mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: white; font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; letter-spacing: -0.07em; }
.admin-header__nav { display: flex; align-self: stretch; align-items: stretch; gap: 22px; margin-left: 28px; }
.admin-header__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 2px 0; border-bottom: 3px solid transparent; text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--fg-muted); }
.admin-header__nav a:hover, .admin-header__nav a[aria-current="page"] { color: var(--fg); }
.admin-header__nav a[aria-current="page"] { border-color: var(--green-text); }
.admin-header__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-left: auto; }
.admin-header__tools a, .admin-header__tools button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--fg-muted); font: 600 0.8rem var(--font-body); text-decoration: none; cursor: pointer; }
.admin-header__tools a:hover, .admin-header__tools button:hover { color: var(--green-text); text-decoration: underline; }
.admin-header__tools form { margin: 0; }
.admin-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 44px 0 28px; }
.admin-eyebrow { margin: 0 0 9px; color: var(--green-text); font: 500 0.68rem var(--font-mono); letter-spacing: 0.1em; }
.admin-intro h1 { max-width: 720px; margin: 0; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.04; letter-spacing: -0.04em; }
.admin-intro p:not(.admin-eyebrow) { max-width: 620px; margin: 12px 0 0; color: var(--fg-muted); font-size: 0.94rem; line-height: 1.55; }
.admin-intro__date { padding-bottom: 4px; font: 0.72rem var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
.admin-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 48px; }
.admin-stat { display: grid; align-content: space-between; min-height: 142px; padding: 18px 20px; border: 1px solid var(--rule); background: var(--bg-raised); }
.admin-stat--accent { border-top: 3px solid var(--green-text); padding-top: 16px; }
.admin-stat > span { font-size: 0.84rem; font-weight: 600; }
.admin-stat strong { display: block; margin-top: 6px; font: 700 2.3rem/1 var(--font-display); letter-spacing: -0.05em; }
.admin-stat small { display: block; margin-top: 8px; color: var(--fg-muted); font-size: 0.78rem; }
.admin-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.admin-section__heading h2 { margin: 0; font-size: var(--step-2); line-height: 1.1; }
.admin-section__count { padding-bottom: 3px; font: 0.73rem var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
.admin-filter-panel { padding: 0 18px 16px; border: 1px solid var(--rule); background: var(--bg-raised); margin-bottom: 18px; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
.admin-filters a { display: inline-flex; align-items: center; min-height: 45px; padding: 3px 2px 0; border-bottom: 2px solid transparent; text-decoration: none; color: var(--fg-muted); font-size: 0.84rem; font-weight: 600; }
.admin-filters a:hover, .admin-filters a[aria-current="page"] { color: var(--fg); }
.admin-filters a[aria-current="page"] { border-color: var(--green-text); }
.admin-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-filter-form label { flex: 0 1 180px; }
.admin-filter-form .admin-search { flex: 1 1 270px; }
.admin-filter-form input, .admin-filter-form select { width: 100%; min-width: 0; height: 44px; padding: 8px 11px; font-size: 0.86rem; }
.admin-filter-form .btn { white-space: nowrap; }
.admin-clear { padding: 10px; color: var(--fg-muted); font-size: 0.86rem; }
.admin-empty { padding: 44px 26px; border: 1px dashed var(--rule); background: var(--bg-raised); text-align: center; }
.admin-empty strong { font-family: var(--font-display); font-size: 1.25rem; }
.admin-empty p { margin: 7px 0 0; color: var(--fg-muted); font-size: 0.88rem; }
.lead { display: grid; gap: 14px; padding: 22px 24px 18px; margin-bottom: 12px; border: 1px solid var(--rule); border-left: 3px solid var(--rule); background: var(--bg-raised); }
.lead:has(.status-New) { border-left-color: var(--green-text); }
.lead__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.lead__top time { color: var(--fg-muted); font: 0.72rem var(--font-mono); }
.lead__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lead__type, .lead__status { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border: 1px solid var(--rule); font-size: 0.7rem; font-weight: 700; line-height: 1.2; }
.lead__type { color: var(--fg); background: var(--bg-sunk); text-transform: uppercase; letter-spacing: 0.05em; }
.lead__status { color: var(--fg-muted); background: white; }
.lead__status.status-New { border-color: var(--green-soft-2); background: var(--green-soft); color: var(--green-text); }
.lead__status.status-Closed { background: var(--ink); border-color: var(--ink); color: white; }
.lead__status.status-Not-a-fit, .lead__status--partial { border-color: var(--rule); color: var(--fg-muted); }
.lead__addr { margin: 0; font: 700 clamp(1.25rem, 2vw, 1.65rem)/1.2 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.lead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 20px; padding-bottom: 2px; color: var(--fg-body); font-size: 0.84rem; line-height: 1.5; }
.lead__meta span { overflow-wrap: anywhere; }
.lead__meta strong { margin-right: 4px; color: var(--fg-muted); font-size: 0.74rem; font-weight: 600; }
.lead__meta a, .scout-card__footer a { color: var(--green-text); font-weight: 600; text-underline-offset: 3px; }
.lead__notes { display: grid; gap: 7px; padding: 14px 16px; background: var(--bg-sunk); border-left: 2px solid var(--rule); }
.lead__notes p { margin: 0; font-size: 0.84rem; line-height: 1.55; overflow-wrap: anywhere; }
.lead__notes strong { margin-right: 8px; }
.lead__attachments { display: flex; align-items: center; gap: 8px; font-size: 0.81rem; }
.lead__attachments span { color: var(--fg-muted); }
.lead__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.lead__photos a { display: block; width: 112px; height: 84px; border: 1px solid var(--rule); }
.lead__photos img { width: 100%; height: 100%; object-fit: cover; }
.lead__form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.lead__form .field { margin: 0; }
.lead__form .field select, .lead__form .field input { width: 100%; min-width: 0; height: 44px; font-size: 0.86rem; }
.lead__form .field:first-of-type { flex: 0 1 184px; }
.lead__form .lead__note-field { flex: 1 1 250px; }
.lead__form .field > label { font-size: 0.77rem; color: var(--fg-muted); }
.lead__form .btn { white-space: nowrap; }
.scout-card__count { color: var(--fg-muted); font-size: 0.82rem; }
.scout-card__count strong { color: var(--fg); font: 700 1.25rem var(--font-display); }
.scout-card__footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-size: 0.84rem; }
.scout-card__footer a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }
.admin-login { max-width: 440px; min-height: 78vh; display: grid; align-content: center; }
.admin-login__panel { padding: 32px; border: 1px solid var(--rule); border-top: 3px solid var(--green-text); background: white; }
.admin-login__panel h1 { margin: 0; font-size: var(--step-2); }
.admin-login__panel > p:not(.admin-eyebrow) { margin: 6px 0 22px; color: var(--fg-muted); font-size: 0.88rem; }
@media (max-width: 900px) {
  .admin-header { padding: 12px 0; }
  .admin-header__nav { margin-left: auto; }
  .admin-header__tools { width: 100%; margin-left: 0; gap: 0 20px; border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 640px) {
  .admin-shell { padding-bottom: 56px; }
  .admin-header__brand { font-size: 0.84rem; }
  .admin-header__nav { gap: 14px; }
  .admin-header__tools { gap: 0 16px; }
  .admin-intro { padding: 32px 0 22px; }
  .admin-intro__date { display: none; }
  .admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 36px; }
  .admin-stat { min-height: 126px; padding: 14px; }
  .admin-stat--accent { padding-top: 12px; }
  .admin-stat strong { font-size: 1.95rem; }
  .admin-stat small { font-size: 0.7rem; }
  .admin-overview .admin-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .admin-filters { gap: 12px; }
  .admin-filters a { font-size: 0.77rem; }
  .admin-filter-form label, .admin-filter-form .admin-search { flex: 1 1 100%; }
  .admin-filter-form .btn { flex: 1 1 auto; }
  .lead { padding: 18px 16px; }
  .lead__form .field:first-of-type, .lead__form .lead__note-field { flex: 1 1 100%; }
  .lead__form .btn { width: 100%; }
  .admin-login__panel { padding: 24px 20px; }
}

/* Lead maintenance and destructive confirmation */
.lead__address-edit {
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.lead__address-edit summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-text);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-underline-offset: 3px;
}
.lead__address-edit summary:hover { text-decoration: underline; }
.lead__address-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 14px 0 4px;
}
.lead__address-form .field { min-width: 0; margin: 0; }
.lead__address-form label { display: block; margin-bottom: 5px; color: var(--fg-muted); font-size: 0.77rem; }
.lead__address-form input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: 0.9rem;
}
.lead__address-form .btn { white-space: nowrap; }
.lead__delete { display: flex; justify-content: flex-end; }
.lead__delete a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
.lead__delete a:hover { color: #861C17; }
.admin-delete {
  width: min(100%, 760px);
  margin: clamp(28px, 6vw, 64px) auto 0;
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--error);
  background: var(--bg-raised);
}
.admin-delete h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.1rem); }
.admin-delete__address {
  margin: 16px 0 26px;
  color: var(--fg);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}
.admin-delete__warning {
  padding: 18px 20px;
  border-left: 3px solid var(--error);
  background: color-mix(in srgb, var(--error) 7%, var(--bg));
}
.admin-delete__warning h2 { margin: 0 0 8px; font-size: 1.12rem; }
.admin-delete__warning p { margin: 0; font-size: 0.91rem; }
.admin-delete__warning p + p { margin-top: 8px; }
.admin-delete__form { margin-top: 24px; }
.admin-delete__confirm {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.admin-delete__confirm input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--error); }
.admin-delete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.btn--danger { --btn-bg: #A5241D; --btn-fg: #FFFFFF; --btn-bd: #A5241D; }
.btn--danger:hover { --btn-bg: #861C17; --btn-bd: #861C17; }
@media (max-width: 640px) {
  .lead__address-form { grid-template-columns: 1fr; }
  .lead__address-form .btn { width: 100%; }
  .admin-delete__actions { align-items: stretch; }
  .admin-delete__actions .btn { width: 100%; text-align: center; }
}

/* ------------------------------------------------- 19. Placeholder imagery */
/* Only the proof components still take photographs, and only real ones.
   Until those exist the slot draws a ruled box, not a stock image. */
.frame-fallback {
  width: 100%; height: 100%; min-height: 160px;
  background: var(--bg-sunk);
  border: 1px dashed var(--rule);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.frame-fallback span {
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------ 20. Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .masthead, .mobile-cta, .form-panel, .footer, .scroll-progress { display: none; }
  body { background: #fff; color: #000; }
}

/* ====================================================================== */
/* 21. Motion layer                                                        */
/* Everything here is opacity and transform only, driven by one scroll     */
/* loop and a couple of observers. The whole section is switched off under */
/* prefers-reduced-motion, and the page reads identically without it.      */
/* ====================================================================== */

.motion .rule-title { --draw: 0; }
.motion .rule-title::before { transition: transform 720ms var(--ease); }
.motion .rule-title > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.motion .rule-title[data-revealed="true"] { --draw: 1; }
.motion .rule-title[data-revealed="true"] > * { opacity: 1; transform: none; }
.motion .rule-title[data-revealed="true"] > *:nth-child(2) { transition-delay: 90ms; }
.motion .rule-title[data-revealed="true"] > *:nth-child(3) { transition-delay: 150ms; }

/* The sheet draws its rules the same way, one after another. */
.motion .sheet[data-reveal] .row { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.motion .sheet[data-reveal][data-revealed="true"] .row { opacity: 1; transform: none; }
.motion .sheet[data-reveal][data-revealed="true"] .row:nth-child(2) { transition-delay: 70ms; }
.motion .sheet[data-reveal][data-revealed="true"] .row:nth-child(3) { transition-delay: 140ms; }
.motion .sheet[data-reveal][data-revealed="true"] .row:nth-child(4) { transition-delay: 210ms; }
.motion .sheet[data-reveal][data-revealed="true"] .row:nth-child(5) { transition-delay: 280ms; }
.motion .sheet[data-reveal][data-revealed="true"] .row:nth-child(6) { transition-delay: 350ms; }

/* ---- Page progress -------------------------------------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0;
  height: 3px; z-index: 60;
  background: var(--green);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* ---- Masthead settles once you are past the hero -------------------- */
.masthead { transition: background 300ms var(--ease); }
.masthead[data-condensed="true"] { background: var(--bg); }
.brand__sub {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  transform-origin: left center;
}
.masthead[data-condensed="true"] .brand__sub { opacity: 0; transform: translate3d(0, -3px, 0); }

/* ---- Hero ------------------------------------------------------------ */
/* Kept for pages that still carry a background layer; the home hero has none. */
.hero__bg { position: absolute; inset: 0; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.1); will-change: transform; }
.hero__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--ease); }
.hero__frame[data-active="true"] { opacity: 1; }
.hero__frame img, .hero__frame .frame-fallback { width: 100%; height: 100%; object-fit: cover; }

/* ---- Numbers that climb --------------------------------------------- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---- Before and after slider ---------------------------------------- */
.ba-slider { position: relative; overflow: hidden; background: var(--bg-sunk); touch-action: pan-y; }
.ba-slider__before { position: absolute; inset: 0; }
.ba-slider__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); }
.ba-slider__after img, .ba-slider__after .frame-fallback,
.ba-slider__before img, .ba-slider__before .frame-fallback { width: 100%; height: 100%; object-fit: cover; }
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: var(--green); transform: translateX(-1px);
  cursor: ew-resize;
}
.ba-slider__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  border: 2px solid var(--green); border-radius: var(--radius);
  background: rgba(20, 20, 20, 0.62);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.ba-slider__handle::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 10px; transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--green);
  clip-path: polygon(0 50%, 6px 0, 6px 35%, 12px 35%, 12px 0, 18px 50%, 12px 100%, 12px 65%, 6px 65%, 6px 100%);
}
.ba-slider input[type="range"] { position: absolute; inset: auto 0 0 0; width: 100%; opacity: 0; height: 44px; margin: 0; cursor: ew-resize; }
.ba-slider input[type="range"]:focus-visible ~ .ba-slider__handle::after { outline: 3px solid var(--green); outline-offset: 3px; }
.ba-slider__tag {
  position: absolute; bottom: 10px; z-index: 2;
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px;
}
.ba-slider__tag--before { left: 10px; }
.ba-slider__tag--after { right: 10px; }

/* ---- Everything above, off ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .motion .rule-title { --draw: 1; }
  .motion .rule-title > * { opacity: 1; transform: none; transition: none; }
  .motion .rule-title::before { transition: none; }
  .motion .sheet[data-reveal] .row { opacity: 1; transform: none; transition: none; }
  .scroll-progress { display: none; }
  .hero__bg { transform: none; }
  .hero__frame { transition: none; }
}

/* ------------------------------------------------------------ 22. Texture */
/* A fine paper grain over everything. One fixed layer, a tiny SVG noise
   tile, multiplied at a few percent so white reads as paper and the dark
   sections keep their depth. Pointer events pass straight through it. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.07;
  mix-blend-mode: multiply;
}
@media print { body::after { display: none; } }

/* ------------------------------------------------------------ 23. About */
.story { max-width: 720px; }
.story h2 { font-size: var(--step-2); margin: clamp(32px, 5vw, 48px) 0 0.5em; }
.story h2:first-child { margin-top: 0; }
.story p a { color: var(--fg); text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 500; }
.story__photo { margin: clamp(28px, 4vw, 44px) 0; }
.story__photo img { width: 100%; border-radius: var(--radius); }
.story__photo figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--fg-muted); }
.story__end { margin-top: clamp(36px, 6vw, 64px); padding-top: clamp(24px, 4vw, 36px); border-top: 2px solid var(--fg); }
.story__end .lede { margin-bottom: 20px; }

/* --------------------------------------------------------- 24. Centered */
/* Headline, cards, choices and copy sit on the page's center line. Inside a
   field the label stays left of its own input, which is how a form reads. */
.guide { margin-inline: auto; text-align: center; }
.guide__q { margin-inline: auto; }
.guide__where, .guide__hint, .guide__aside, .guide__foot { text-align: center; margin-inline: auto; }
.guide__foot { max-width: 60ch; }
.paths { margin-inline: auto; max-width: 860px; }
.chips { margin-inline: auto; max-width: 860px; justify-content: center; }
.guide__fields { margin-inline: auto; }
.guide .field { text-align: left; }
.guide fieldset > .field { margin-inline: auto; }
.guide__nav { justify-content: center; }
.guide .consent { margin-inline: auto; text-align: center; }
.guide .form-status { margin-inline: auto; max-width: 640px; }
.guide--thanks { text-align: center; }
.guide--thanks .guide__q, .guide--thanks .lede, .guide--thanks .thanks-list { margin-inline: auto; }
.guide--thanks .thanks-list li { text-align: left; }
.guide__foot { margin-left: auto; margin-right: auto; }

.narrow { margin-inline: auto; }
#faq h2, .page-faq h1 { text-align: center; margin-inline: auto; }
#faq .link-arrow { display: inline-flex; }
#faq > .shell > .narrow > p { text-align: center; }

.story { margin-inline: auto; text-align: center; }
.story p { margin-inline: auto; }
.story__end .hero__cta { justify-content: center; }
.hero--split .hero__split { text-align: center; }
.hero--split h1, .hero--split .hero__lede { margin-inline: auto; }
.hero--split .hero__cta { justify-content: center; }
.hero--split .hero__cta small { flex-basis: 100%; }
.hero--split .hero-form { margin-inline: auto; }
.hero--split .hero__note { text-align: center; }
@media (min-width: 900px) {
  .hero--split .hero__split { grid-template-columns: 1fr; justify-items: center; }
  .hero__photo { max-width: 420px; justify-self: center; }
}
.prose-block { margin-inline: auto; text-align: center; }
.prose-block p { margin-inline: auto; }
.start-head { margin-inline: auto; text-align: center; }
.start-head .lede { margin-inline: auto; }

/* ---------------------------------------------------- 25. Work and pairs */
/* The two photographs of a room were rarely taken from the same spot, so a
   wipe between them misreads. Each one is shown whole instead and they cross
   fade, driven by two radios so the control works with a keyboard and without
   any JavaScript. */
.compare { margin: 0; }
.compare__r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.compare__stage {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer;
  background: var(--bg-sunk);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.compare__stage picture { display: contents; }
/* The incoming photograph settles in from a hair larger, so the swap has a
   little weight to it rather than a flat dissolve. */
.compare__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.025);
  transition: opacity 320ms var(--ease), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.compare__r--after:checked  ~ .compare__stage .compare__img--after,
.compare__r--before:checked ~ .compare__stage .compare__img--before { opacity: 1; transform: none; }

/* The photograph itself is a target, so say so. Always legible on a phone,
   where there is no hover to discover it with. */
.compare__hint {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; pointer-events: none;
  background: rgba(17, 17, 17, 0.72); color: #fff; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; padding: 6px 10px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.compare__stage:hover .compare__hint { opacity: 1; transform: none; }
@media (hover: none) { .compare__hint { opacity: 1; transform: none; } }
.compare__hint--before, .compare__hint--after { display: none; }
.compare__r--after:checked  ~ .compare__stage .compare__hint--after  { display: inline; }
.compare__r--before:checked ~ .compare__stage .compare__hint--before { display: inline; }

/* A corner tag so a screenshot of the page still says which one you are on. */
.compare__state {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px;
  opacity: 0; transition: opacity 220ms var(--ease);
}
.compare__state--before { background: var(--green-text); }
.compare__r--after:checked  ~ .compare__stage .compare__state--after  { opacity: 1; }
.compare__r--before:checked ~ .compare__stage .compare__state--before { opacity: 1; }

/* A two up control with a green block that slides under whichever side is
   live, rather than two buttons that just change colour. */
.compare__controls {
  position: relative; margin: 12px auto 0; width: fit-content;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-raised); overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
}
.compare__thumb {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%;
  background: var(--green-text);
  transition: transform 380ms cubic-bezier(0.34, 1.26, 0.5, 1);
}
.compare__r--after:checked ~ .compare__controls .compare__thumb { transform: translateX(100%); }
.compare__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: 116px; padding: 0 20px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); user-select: none;
  transition: color 260ms var(--ease), transform 160ms var(--ease);
}
/* The side that is live reads white, straight off the block behind it. */
.compare__r--before:checked ~ .compare__controls .compare__btn--before,
.compare__r--after:checked  ~ .compare__controls .compare__btn--after { color: #FFFFFF; }
@media (hover: hover) {
  .compare__r--after:checked  ~ .compare__controls .compare__btn--before:hover,
  .compare__r--before:checked ~ .compare__controls .compare__btn--after:hover { color: var(--green-text); }
}
.compare__btn:active { transform: scale(0.97); }
.compare__r:focus-visible ~ .compare__controls { outline: 3px solid var(--green); outline-offset: 3px; }

.compare__room {
  margin-top: 10px; text-align: center;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}

.job__head { max-width: 62ch; margin-inline: auto; text-align: center; }
.job__head h2 { margin-bottom: 10px; }
.job__summary { margin-inline: auto; color: var(--fg-body); }
.job__did {
  list-style: none; margin: 18px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.job__did li {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--green-text); background: var(--green-soft);
  border-radius: var(--radius); padding: 5px 10px;
}
.job__pairs {
  margin-top: clamp(26px, 4vw, 40px);
  display: grid; gap: clamp(26px, 3.5vw, 38px);
}
@media (min-width: 860px) { .job__pairs { grid-template-columns: 1fr 1fr; } }
/* The first pair of a job runs full width, since it is the one people look at. */
@media (min-width: 860px) { .job__pairs > .compare:first-of-type { grid-column: 1 / -1; max-width: 900px; margin-inline: auto; width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .compare__img, .compare__state, .compare__btn, .compare__thumb, .compare__hint { transition: none; }
  .compare__img { transform: none; }
}

/* A short strip of proof on the homepage, under the two choices. */
.proof { text-align: center; }
.proof__head { margin-inline: auto; max-width: 54ch; }
.proof__grid { margin-top: clamp(22px, 3vw, 32px); display: grid; gap: clamp(18px, 2.5vw, 26px); }
@media (min-width: 760px) { .proof__grid { grid-template-columns: repeat(3, 1fr); } }
.proof__foot { margin-top: 26px; }

/* Page heroes read centered like the rest of the site. */
.hero--page .hero__inner { text-align: center; }
.hero--page .hero__inner > * { margin-inline: auto; }
.hero--page .hero__lede { margin-inline: auto; }
.hero--page .hero__cta, .hero--page .form-actions { justify-content: center; }

/* ------------------------------------------------------- 26. Scouts page */
.scout-head { max-width: 58ch; margin-inline: auto; text-align: center; }
.scout-head h2 { margin-bottom: 10px; }
.scout-head p { margin-inline: auto; color: var(--fg-body); }

/* Three steps, read across on a wide screen and down on a phone. */
.flow {
  list-style: none; margin: clamp(26px, 4vw, 40px) auto 0; padding: 0;
  display: grid; gap: clamp(22px, 3vw, 34px); max-width: 1000px;
}
@media (min-width: 800px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__step { text-align: center; }
.flow__n {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.1em; color: var(--green-text); margin-bottom: 10px;
}
.flow__step h3 { font-size: var(--step-1); margin-bottom: 6px; }
.flow__step p { margin: 0 auto; max-width: 34ch; color: var(--fg-muted); font-size: 0.95rem; }

/* The trades, as a plain wrapped row rather than a column of twelve. */
.trades {
  list-style: none; margin: clamp(22px, 3vw, 30px) auto 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 820px;
}
.trades li {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--fg-body); background: var(--bg-raised);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 7px 12px;
}
.scout-foot { max-width: 58ch; margin: clamp(26px, 4vw, 34px) auto 0; text-align: center; }
.scout-foot p { margin-inline: auto; }
.scout-foot .link-arrow { display: inline-flex; }

/* --------------------------------------------- 27. Site menu and edge ring */
/* The right hand slot of the bar. On a wide screen it is the words Learn More
   and the panel opens on hover. Under 640px the words give way to a
   hamburger and it opens on tap. */
.glassbar__toggle {
  appearance: none; background: none; border: 0; padding: 6px 0; margin: 0;
  cursor: pointer; color: var(--fg);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  transition: color var(--dur) var(--ease);
}
.glassbar__menu { justify-self: end; position: static; }
.glassbar__toggle:hover, .glassbar[data-open] .glassbar__toggle { color: var(--accent-text); }
.glassbar__burger { display: none; width: 20px; height: 14px; position: relative; }
.glassbar__burger i {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  border-radius: 1px; transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}
.glassbar__burger i:nth-child(1) { top: 0; }
.glassbar__burger i:nth-child(2) { top: 6px; }
.glassbar__burger i:nth-child(3) { top: 12px; }
.glassbar[data-open] .glassbar__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.glassbar[data-open] .glassbar__burger i:nth-child(2) { opacity: 0; }
.glassbar[data-open] .glassbar__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 639px) {
  .glassbar__toggle-label { display: none; }
  .glassbar__burger { display: block; }
}

/* The panel itself, dropped out of the bottom of the bar. */
.sitemenu {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: -1;
  background: #EFF3E6;
  background: color-mix(in srgb, var(--green-soft) 92%, #FFFFFF);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(110, 138, 59, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.12);
  padding: clamp(18px, 2.4vw, 26px);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 260ms var(--ease), transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 340ms;
  max-height: calc(100vh - var(--glass-h) - var(--glass-top) - 30px);
  overflow-y: auto;
}
/* Hover on a real pointer, focus for keyboards, and the button for the rest.
   The strip bridges the gap between the bar and the panel so the pointer never
   crosses nothing on the way down.

   The hover rule here is the no-script fallback only. The panel hangs below the
   whole bar while the words that open it sit at the right hand end, so a
   pointer heading for the first link crosses the middle of the bar, which is
   not the menu: on hover alone that reads as a leave and the panel blinks.
   site.js marks the bar and takes hover over, holding it open for a moment
   after the pointer leaves so that crossing is free. */
.sitemenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.glassbar__menu:focus-within .sitemenu,
.glassbar[data-open] .sitemenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.sitemenu__inner { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 560px) { .sitemenu__inner { grid-template-columns: 1fr 1fr; } }
.sitemenu__label {
  margin: 0 0 8px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-text);
}
.sitemenu__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sitemenu__group a {
  display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--radius);
  color: var(--fg); text-decoration: none; font-weight: 500; font-size: 0.97rem;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}
@media (hover: hover) {
  .sitemenu__group a:hover { background: rgba(110, 138, 59, 0.16); color: var(--green-text); transform: translateX(3px); }
}
.sitemenu__group a[aria-current="page"] { color: var(--green-text); font-weight: 700; }
.sitemenu__foot {
  margin-top: clamp(16px, 2vw, 22px); padding-top: 16px;
  border-top: 1px solid rgba(110, 138, 59, 0.24);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.sitemenu__call { color: var(--fg); font-weight: 600; text-decoration-color: var(--green); }

/* Each column lifts in a beat after the panel, so it unfolds rather than
   simply appearing. */
.sitemenu__group, .sitemenu__foot {
  opacity: 0; transform: translateY(-6px);
  transition: opacity 240ms var(--ease), transform 300ms var(--ease);
}
.glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu__group, .glassbar__menu:focus-within .sitemenu__group, .glassbar[data-open] .sitemenu__group,
.glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu__foot, .glassbar__menu:focus-within .sitemenu__foot, .glassbar[data-open] .sitemenu__foot {
  opacity: 1; transform: none;
}
.glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu__group:nth-child(1), .glassbar__menu:focus-within .sitemenu__group:nth-child(1), .glassbar[data-open] .sitemenu__group:nth-child(1) { transition-delay: 80ms; }
.glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu__group:nth-child(2), .glassbar__menu:focus-within .sitemenu__group:nth-child(2), .glassbar[data-open] .sitemenu__group:nth-child(2) { transition-delay: 140ms; }
.glassbar:not([data-hover-js]) .glassbar__menu:hover .sitemenu__foot, .glassbar__menu:focus-within .sitemenu__foot, .glassbar[data-open] .sitemenu__foot { transition-delay: 200ms; }

/* A hairline of the house green around the edge of the window, breathing
   slowly. It sits under the paper texture and never takes a click. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1900; pointer-events: none;
  border: 2px solid rgba(110, 138, 59, 0.22);
  box-shadow: inset 0 0 18px rgba(110, 138, 59, 0.07);
  animation: edge-breathe 7s ease-in-out infinite;
}
@keyframes edge-breathe {
  0%, 100% { border-color: rgba(110, 138, 59, 0.16); box-shadow: inset 0 0 14px rgba(110, 138, 59, 0.05); }
  50%      { border-color: rgba(110, 138, 59, 0.40); box-shadow: inset 0 0 30px rgba(110, 138, 59, 0.13); }
}
@media print { body::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sitemenu, .sitemenu__group, .sitemenu__foot, .glassbar__burger i { transition-duration: 0.01ms; }
  body::before { animation: none; border-color: rgba(110, 138, 59, 0.26); }
}

/* ------------------------------------------- 28. Brand and button liveliness */
/* The logo lifts a little under the pointer, the mark a touch more than the
   words, so the whole lockup reads as one thing coming forward. */
.glassbar__brand, .glassbar__brand img, .glassbar__name i {
  transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 340ms var(--ease), color 340ms var(--ease);
}
@media (hover: hover) {
  .glassbar__brand:hover { transform: translateY(-2px) scale(1.03); }
  .glassbar__brand:hover img { transform: scale(1.06); filter: drop-shadow(0 3px 6px rgba(17, 17, 17, 0.18)); }
  .glassbar__brand:hover .glassbar__name i { color: var(--green); }
}
.glassbar__brand:active { transform: translateY(0) scale(0.99); }

/* Solid buttons fill from the point the pointer crossed the edge, the same
   move the cards and chips make, and lift off the page while they do it. */
.btn { position: relative; overflow: hidden; }
.btn {
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms var(--ease);
}
.btn::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  clip-path: circle(50%);
  background: var(--btn-fill, transparent);
  transform: scale(0);
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn { --btn-fill: #2A2823; }
.btn--primary { --btn-fill: #445C22; }
/* Outlined buttons swap their whole face instead, so no circle for them. */
.btn--ghost, .btn--on-dark { --btn-fill: transparent; }
@media (hover: hover) {
  .btn:hover::before { transform: scale(18); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(17, 17, 17, 0.15); }
  .btn--primary:hover { box-shadow: 0 7px 18px rgba(85, 112, 44, 0.3); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
.btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }
.btn:active .btn__arrow { transform: translateX(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .glassbar__brand, .glassbar__brand img, .glassbar__name i { transition: none; }
  .btn:hover { transform: none; }
  .glassbar__brand:hover { transform: none; }
  .glassbar__brand:hover img { transform: none; }
}

/* ------------------------------------------ 29. Footer mark, glow button */
.footer__brand { display: block; width: fit-content; margin-bottom: 16px; line-height: 0; }
.footer__brand img { width: 88px; height: 44px; transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 340ms var(--ease); }
@media (hover: hover) {
  .footer__brand:hover img { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 4px 10px rgba(110, 138, 59, 0.45)); }
}

@media (prefers-reduced-motion: reduce) {
  .footer__brand img { transition: none; }
}

/* ------------------------------------------------------- 30. Footer rebuilt */
/* A last offer, then the map of the site, then the small print. Three bands,
   each separated by a rule, so it reads in order instead of as one slab. */
.footer__top {
  display: grid; gap: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(30px, 4vw, 44px);
  border-bottom: 1px solid var(--dark-rule);
}
@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.3fr auto; align-items: center; gap: 40px; }
  .footer__act { text-align: right; justify-items: end; }
}
.footer__brand { display: block; width: fit-content; margin-bottom: 18px; line-height: 0; }
.footer__brand img { width: 88px; height: 44px; transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 340ms var(--ease); }
@media (hover: hover) {
  .footer__brand:hover img { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 4px 10px rgba(110, 138, 59, 0.45)); }
}
.footer__line {
  font-family: var(--font-display); font-variation-settings: "wdth" 97;
  font-weight: 700; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--dark-fg); margin: 0 0 6px; max-width: 22ch;
}
.footer__sub { margin: 0; color: var(--dark-fg-muted); }
.footer__act { display: grid; gap: 12px; align-content: start; }
.footer__phone {
  font-family: var(--font-display); font-variation-settings: "wdth" 97;
  font-weight: 700; font-size: var(--step-2); color: var(--dark-fg);
  text-decoration: none; letter-spacing: -0.01em; line-height: 1;
}
.footer__phone:hover { color: var(--dark-green); text-decoration: none; }
.footer__hours { margin: 0; font-size: 0.86rem; color: var(--dark-fg-muted); }

.footer__grid {
  display: grid; gap: clamp(26px, 3vw, 36px);
  padding: clamp(30px, 4vw, 46px) 0;
}
/* Two link columns side by side even on a phone, so the footer is not a
   thousand pixels of scrolling. The blurb spans the row above them. */
@media (min-width: 380px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--about { grid-column: 1 / -1; }
}
/* From a small laptop up, all three link columns sit on one line, with the
   blurb across the top. */
@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__col--about { grid-column: 1 / -1; }
}
/* Wide enough for the blurb to join them rather than sit above them. */
@media (min-width: 1040px) {
  .footer__grid { grid-template-columns: 1.5fr 1.1fr 1fr 1fr; }
  .footer__col--about { grid-column: auto; }
}
.footer__col--about .small { max-width: 34ch; }
.footer__license { margin-top: 10px; color: var(--dark-fg-muted); }
.footer h3, .footer h4 {
  font-family: var(--font-body); font-variation-settings: normal;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark-green); margin-bottom: 14px;
}
.footer ul { list-style: none; display: grid; gap: 10px; font-size: 0.94rem; margin: 0; padding: 0; }
.footer__col a { display: inline-block; }
@media (hover: hover) {
  .footer__col a:hover { color: var(--dark-fg); text-decoration: none; transform: translateX(3px); }
}
.footer__col a { transition: color 180ms var(--ease), transform 180ms var(--ease); }

.footer__area {
  margin: 0; padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--dark-rule);
  font-size: 0.86rem; color: var(--dark-fg-muted); max-width: none;
}
.footer__area span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark-green); margin-right: 8px;
}
.footer__legal {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; font-size: 0.82rem; color: var(--dark-fg-muted);
  border-top: 0; padding-top: 0;
}
.footer__legal a { margin-right: 18px; }
.footer__legal a:last-child { margin-right: 0; }

/* ------------------------------------------------- 31. Landing page water */
/* A pond seen from above rather than a wave in profile: rings spreading out
   from three points at different sizes and speeds, so they cross each other
   the way real ripples do. Faint enough to read as texture, not pattern. */
/* z-index 0 rather than -1. A negative layer paints behind its own parent's
   background, which is fine while the body background propagates to the
   canvas and invisible the moment anything paints one on <html>, as a preview
   frame does. Sitting at 0 with the page lifted above is true everywhere. */
.waves {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
body.page-home > main,
body.page-home > footer,
body.page-home > .mobile-cta { position: relative; z-index: 1; }
.waves__band {
  position: absolute;
  width: 128vmax; height: 128vmax;
  background: repeating-radial-gradient(circle,
    rgba(110, 138, 59, 0) 0 29px,
    rgba(110, 138, 59, 0.6) 29px 30.5px,
    rgba(110, 138, 59, 0) 30.5px 60px);
  /* Fade to nothing well before the corners, so each set of rings is a patch
     on the water rather than a square of wallpaper. */
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 76%);
  opacity: 0;
  will-change: transform, opacity;
}
/* The pointer nudges the surface. Each set moves a different amount, so the
   three read as different depths of water rather than one flat picture. The
   `translate` property is used rather than `transform`, because the keyframes
   already own transform and the two compose without fighting. */
.waves__band {
  translate: calc(var(--px, 0px) * var(--depth, 1)) calc(var(--py, 0px) * var(--depth, 1));
  transition: translate 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.waves__band--a { left: 22%; top: 26%; --depth: 1; animation: ripple 26s ease-out infinite; }
.waves__band--b { left: 76%; top: 58%; --depth: 0.62; animation: ripple 34s ease-out infinite; animation-delay: -11s; width: 104vmax; height: 104vmax; }
.waves__band--c { left: 46%; top: 88%; --depth: 0.34; animation: ripple 44s ease-out infinite; animation-delay: -25s; width: 150vmax; height: 150vmax; }

/* Each set swells out from its point and dissolves, so the loop never snaps. */
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0.72); opacity: 0; }
  18%  { opacity: 0.165; }
  62%  { opacity: 0.11; }
  100% { transform: translate(-50%, -50%) scale(1.42); opacity: 0; }
}

/* The banded sections sit on the water rather than hiding it, so the surface
   runs unbroken from the top of the page to the footer. */
.page-home .section--sunk { background: rgba(243, 244, 241, 0.82); }

@media (prefers-reduced-motion: reduce) {
  /* Still water: the rings hold where they are and ignore the pointer. */
  .waves__band { animation: none; opacity: 0.11; transform: translate(-50%, -50%) scale(1);
                 translate: none; transition: none; }
}
@media print { .waves { display: none; } }

/* --------------------------------------------- 32. The tracing card outline */
/* A thin line runs the perimeter of one card, then the other, back and forth,
   to point at the choice without nagging. Hovering either card stops the loop
   and fades the line out, so the green fill has the card to itself. Letting go
   picks it up exactly where it paused. */
.path__trace {
  /* An svg is a replaced element, so inset alone leaves it at its default
     300 by 150. It needs the size spelled out or the line traces a box in the
     middle of the card instead of the card itself. */
  position: absolute; inset: 1px; z-index: 1;
  width: calc(100% - 2px); height: calc(100% - 2px);
  pointer-events: none;
  opacity: 1; transition: opacity 260ms var(--ease);
  overflow: visible;
}
.path__trace rect {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  /* pathLength is 100 on the element, so the dash is a percentage of the
     perimeter and the same numbers work at any card size. */
  stroke-dasharray: 17 83;
  stroke-linecap: round;
  animation: card-trace 8s linear infinite;
}
/* The second card runs on the same keyframes, half a cycle behind, which is
   what makes them alternate rather than both going at once. */
.paths > .path:nth-of-type(2) .path__trace rect { animation-delay: -4s; }

@keyframes card-trace {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  5%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (hover: hover) {
  /* Either card hovered stops both, so the two never fall out of step. */
  .paths:hover .path__trace { opacity: 0; }
  .paths:hover .path__trace rect { animation-play-state: paused; }
}
/* While a choice is made the line has nothing left to point at. */
.path input:checked ~ .path__trace,
.path input:checked + .path__card .path__trace { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .path__trace { display: none; }
}

/* A ripple where somebody clicked. Starts tight and spreads, the way a drop
   does, and is a little stronger than the ambient sets so the click feels
   answered. Anchored to the point it was made, so the pointer parallax leaves
   it alone. */
.waves__drop {
  position: absolute;
  width: 62vmax; height: 62vmax;
  pointer-events: none;
  background: repeating-radial-gradient(circle,
    rgba(110, 138, 59, 0) 0 23px,
    rgba(110, 138, 59, 0.6) 23px 24.5px,
    rgba(110, 138, 59, 0) 24.5px 48px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 74%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 74%);
  opacity: 0;
  animation: ripple-drop 4200ms cubic-bezier(0.12, 0.62, 0.3, 1) forwards;
}
@keyframes ripple-drop {
  0%   { transform: translate(-50%, -50%) scale(0.05); opacity: 0; }
  7%   { opacity: 0.22; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --------------------------------------- 34. What is true on this one */
/* The list beside the prose on a situation page. It used to be the price
   sheet with the word Included down the money column, which read like a quote
   for something. These are plainly facts about the house, so they are a list
   with a mark against each one. */
.fits {
  border-top: 2px solid var(--fg);
  padding-top: 14px;
}
.fits__label {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
}
.fits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fits li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.02rem; line-height: 1.4;
}
.fits li:last-child { border-bottom: 0; }
/* A check drawn with two borders, so it needs no font and no image. */
.fits li::before {
  content: "";
  /* Lined up with the middle of the first line of text, not the top of the
     row: 13px of padding plus half a line. */
  position: absolute; left: 4px; top: calc(13px + 0.7em);
  width: 11px; height: 6px;
  border-left: 2px solid var(--green-text);
  border-bottom: 2px solid var(--green-text);
  transform: translateY(-50%) rotate(-45deg);
}