/* ═════════════════════════════════════════════════════════════
   Mission Outdoor Living — shared stylesheet (every page).
   Order: tokens · rem board · base · type · placeholders · letter engine · buttons · hairline grid ·
          section header row · trades list · process timeline · google reviews · forms · footer ·
          site header + menu · inner-page components · phone.
   Homepage-only scene CSS lives in /index.html.
   ═════════════════════════════════════════════════════════════ */

/* ───────── tokens ───────── */
:root {
  --raw-color-white: #f6f3ef;          /* warm ivory foreground */
  --raw-color-black: #0e0e0d;          /* matte black background */
  --raw-color-neutral-950: #141413;    /* glass buttons */
  --raw-color-neutral-900: #1e1c1a;    /* smoky charcoal: glass hover, Mission panel tint */
  --raw-color-charcoal-900: #1b1916;   /* footer ground under the photograph */
  --raw-color-stone-100: #ece6dd;      /* natural stone: light reading surface */
  --raw-color-ink-900: #22201d;        /* copy on stone */
  --raw-color-bronze-muted: #8a6a48;   /* muted bronze on stone */
  --raw-color-bronze-400: #c99258;     /* accent bronze */
  --raw-color-bronze-600: #a97844;     /* deep bronze: borders / hover */

  --raw-duration-fast: 200ms;
  --raw-duration-normal: 350ms;
  --raw-duration-slow: 600ms;

  --raw-font-size-display: 11.875rem;
  --raw-font-size-display-tablet: 8.9375rem;
  --raw-font-size-display-phone: 3.75rem;
  --raw-font-size-stat-phone: 2.25rem;
  --raw-font-size-headline: 2.5rem;
  --raw-font-size-headline-phone: 1.625rem;
  --raw-font-size-title: 2rem;
  --raw-font-size-title-phone: 1.25rem;
  --raw-font-size-lead: 1.125rem;
  --raw-font-size-body: 1rem;
  --raw-font-size-body-phone: 0.875rem;
  --raw-font-size-caption: 0.8125rem;
  --raw-font-size-wordmark: 23vw;
  --raw-font-size-wordmark-phone: 21vw;

  --raw-leading-hero: 0.9;
  --raw-leading-wordmark: 0.75;
  --raw-leading-heading: 1.15;
  --raw-leading-copy: 1.5;

  --raw-tracking-display: -0.04em;
  --raw-tracking-title: -0.02em;
  --raw-tracking-copy: -0.01em;
  --raw-tracking-caps: 0.22em;
  --raw-tracking-caps-wide: 0.25em;

  --raw-size-footer-reveal: 85vh;
  --raw-size-wordmark-drop: 0px;       /* "Mission" at 23vw already sits baseline-on-edge (line-height 0.75, flex-end) */

  --background: var(--raw-color-black);
  --foreground: var(--raw-color-white);
  --surface-glass: var(--raw-color-neutral-950);
  --surface-glass-raised: var(--raw-color-neutral-900);
  --surface-footer: var(--raw-color-charcoal-900);
  --surface-inverse: var(--raw-color-stone-100);
  --foreground-inverse: var(--raw-color-ink-900);
  --foreground-inverse-muted: var(--raw-color-bronze-muted);
  --accent: var(--raw-color-bronze-400);
  --accent-deep: var(--raw-color-bronze-600);
  --duration-fast: var(--raw-duration-fast);
  --duration-normal: var(--raw-duration-normal);
  --duration-slow: var(--raw-duration-slow);
  --leading-display: 1.1;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-glide: cubic-bezier(0.25, 1, 0.5, 1);
  --fg-70: color-mix(in oklab, var(--foreground) 70%, transparent);
  --fg-60: color-mix(in oklab, var(--foreground) 60%, transparent);
  --fg-10: color-mix(in oklab, var(--foreground) 10%, transparent);
  --fg-22: color-mix(in oklab, var(--foreground) 22%, transparent);
  --line: color-mix(in oklab, var(--accent) 28%, transparent);
  --err: #ff9d86;

  /* inner-page helpers: the board scales text down on tablets, these floors keep reading text legible */
  --fs-caps: max(var(--raw-font-size-caption), 12px);
  --fs-copy: max(var(--raw-font-size-body), 15px);
  --nav-h: 4.5rem;
}

/* ───────── rem board ─────────
   1rem = 16px at 1440; it scales with the viewport below 1440 and (at 2/3 rate) above it.
   The >1440 branch is the old JS "interpolate" in closed form (16 + 16 * 0.6666 * (w - 1440) / 1440), so it applies before first paint. */
html { font-size: 16px; }
@media (min-width: 1440.02px) { html { font-size: calc(5.3333px + 0.74067vw); } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1024px) { html { font-size: 1.5625vw; } }
@media (max-width: 640px)  { html { font-size: 4.444444vw; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background: var(--background);
  color: var(--foreground);
  font-size: var(--font-size-body-phone, 0.875rem);
}
h1, h2, h3, h4, p, dl, dd, dt, ul, ol, figure, blockquote, address { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video, svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.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; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; flex: none; }
main:focus { outline: 0; }
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
/* no-JS fallback link lists (inside <noscript>); the real header and footer are injected by site.js */
.nojs-nav { position: relative; z-index: 300; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 1rem 1.5rem; background: var(--surface-footer); font-size: 0.875rem; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.nojs-nav a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ───────── type roles ───────── */
.t-title { font-size: var(--raw-font-size-title-phone); letter-spacing: var(--raw-tracking-title); }
.t-headline { font-size: var(--raw-font-size-headline-phone); letter-spacing: var(--raw-tracking-title); line-height: var(--raw-leading-heading); }
@media (min-width: 640px) { .t-title { font-size: var(--raw-font-size-title); } .t-headline { font-size: var(--raw-font-size-headline); } }
.t-body { font-size: var(--raw-font-size-body-phone); line-height: var(--raw-leading-copy); letter-spacing: var(--raw-tracking-copy); }
@media (min-width: 640px) { .t-body { font-size: var(--raw-font-size-body); } }
.t-caps { font-size: var(--raw-font-size-caption); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.up { text-transform: uppercase; }
/* inner-page hero title: uppercase display, one step below the homepage scene display */
.t-hero { font-size: 2.75rem; font-weight: 400; text-transform: uppercase; line-height: 0.95; letter-spacing: var(--raw-tracking-display); }
@media (min-width: 640px)  { .t-hero { font-size: 5rem; } }
@media (min-width: 1024px) { .t-hero { font-size: 7.5rem; } }
/* section title under a header row */
.sec-title { font-weight: 400; text-transform: uppercase; }
/* reading copy for inner pages (never smaller than 15px) */
.copy { font-size: var(--fs-copy); line-height: 1.6; letter-spacing: var(--raw-tracking-copy); }
.lede { font-size: max(var(--raw-font-size-lead), 17px); line-height: 1.5; letter-spacing: var(--raw-tracking-copy); color: var(--fg-70); max-width: 38rem; }
.muted { color: var(--fg-70); }
.on-stone .muted, .on-stone .lede { color: color-mix(in oklab, var(--foreground-inverse) 72%, transparent); }

/* ───────── placeholders ───────── */
.ph { outline: 1px dashed var(--accent); outline-offset: 2px; padding: 0 0.2em; border-radius: 1px; }
.on-stone .ph { outline-color: var(--accent-deep); }
/* a stand-in photo: add data-ph to a .media wrapper and remove it once the real photo is in */
.media[data-ph]::after { content: "Placeholder photo"; position: absolute; left: 0.75rem; top: 0.75rem; z-index: 3; padding: 0.25rem 0.5rem; font-size: 0.6875rem; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--foreground); background: rgb(14 14 13 / 0.72); outline: 1px dashed var(--accent); outline-offset: -3px; pointer-events: none; }

/* ───────── letter engine ───────── */
.eng { display: flex; flex-wrap: wrap; column-gap: 0.28em; }
.eng .w { display: inline-block; white-space: nowrap; }
.eng .l { display: inline-block; will-change: transform, opacity; }
.eng.clip .w {
  overflow: hidden; margin-bottom: -0.875rem; padding-bottom: 1rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.rl { display: flex; flex-direction: column; }

/* ───────── buttons: ArrowLink + .btn ───────── */
.arrow-link {
  display: inline-flex; width: fit-content; align-items: center; gap: 0.75rem; color: var(--foreground);
  font-size: var(--raw-font-size-caption); line-height: var(--leading-display); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase;
  transition: opacity 350ms var(--ease-glide), translate 350ms var(--ease-glide), background-color 350ms var(--ease-glide), border-color 350ms var(--ease-glide);
}
.arrow-link .ico { width: 1.125rem; height: 1.125rem; transition: transform 350ms var(--ease-glide); }
.arrow-link:hover .ico { transform: translate(0.125rem, 0.125rem); }
.arrow-link.plain:hover { opacity: 0.8; translate: 0 0.125rem; }
.arrow-link.glass {
  border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  background: color-mix(in oklab, var(--surface-glass) 75%, transparent); padding: 0.875rem 1.75rem;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.arrow-link.glass:hover { translate: 0 -0.125rem; border-color: var(--fg-22); background: color-mix(in oklab, var(--surface-glass-raised) 95%, transparent); }
.arrow-link.stone {
  color: var(--foreground-inverse); border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--foreground-inverse) 22%, transparent); padding: 0.875rem 1.75rem;
}
.arrow-link.stone .ico { color: var(--accent-deep); }
.arrow-link.stone:hover { translate: 0 -0.125rem; border-color: var(--accent-deep); background: color-mix(in oklab, var(--accent-deep) 8%, transparent); }
.arrow-link .ico { color: var(--accent); }
.on-stone .arrow-link.plain { color: var(--foreground-inverse); }
.on-stone .arrow-link.plain .ico { color: var(--accent-deep); }

.btn { align-self: flex-start; background: var(--accent); color: var(--background); font-weight: 600; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); font-size: var(--raw-font-size-caption); padding: 1.125rem 2rem; border: 1px solid var(--accent); transition: background-color 350ms var(--ease-glide), translate 350ms var(--ease-glide), border-color 350ms var(--ease-glide), color 350ms var(--ease-glide); }
a.btn { display: inline-block; text-align: center; width: fit-content; }
.btn:hover { background: #d9a56d; translate: 0 -0.125rem; }
.btn:focus-visible { outline-color: var(--foreground); }
.btn--ghost { background: transparent; color: var(--foreground); border-color: var(--fg-22); }
.btn--ghost:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: var(--accent); }
.on-stone .btn--ghost { color: var(--foreground-inverse); border-color: color-mix(in oklab, var(--foreground-inverse) 28%, transparent); }
.on-stone .btn--ghost:hover { background: color-mix(in oklab, var(--accent-deep) 10%, transparent); border-color: var(--accent-deep); }
.on-stone .btn:not(.btn--ghost) { background: var(--foreground-inverse); border-color: var(--foreground-inverse); color: var(--surface-inverse); }
.on-stone .btn:not(.btn--ghost):hover { background: #34302b; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ───────── hairline grid ───────── */
.grid-lines { position: absolute; inset: 0 2rem; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.grid-lines i { border-left: 1px solid var(--line); }
.grid-lines i:last-child { border-right: 1px solid var(--line); }

/* ───────── sections + header row ("✦ Label") ───────── */
.sec { position: relative; z-index: 50; background: var(--background); color: var(--foreground); padding: 6rem 2.5rem; }
.on-stone { background: var(--surface-inverse); color: var(--foreground-inverse); }
.sec-body { margin-top: 3rem; }
.sec-body > * + * { margin-top: 2rem; }
.hrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.hrow h2 { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: var(--raw-font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); }
.hrow .st { color: var(--accent); }
.hrow > p { font-size: var(--raw-font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); color: var(--fg-70); }
.on-stone .hrow { border-color: color-mix(in oklab, var(--foreground-inverse) 18%, transparent); }
.on-stone .hrow h2 .st { color: var(--foreground-inverse-muted); }
.on-stone .hrow > p { color: var(--foreground-inverse-muted); }

/* ───────── reveal utilities ───────── */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 900ms var(--ease-glide), transform 900ms var(--ease-glide); }
  .rv.in { opacity: 1; transform: none; }
}

/* ───────── trades list ───────── */
.trade-list { margin-top: 2.5rem; }
.trade { display: grid; grid-template-columns: 1fr; gap: 0.75rem; border-top: 1px solid var(--fg-10); padding: 1.75rem 0; }
.trade .num { font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: var(--raw-tracking-caps); color: var(--accent-deep); transition: color 350ms var(--ease-glide); }
.trade .nm { transition: translate 350ms var(--ease-glide); }
.trade .nm .t-headline { text-transform: uppercase; font-weight: 400; }
.trade .sub { color: var(--fg-70); }
@media (min-width: 768px) {
  .trade { grid-template-columns: 4.5rem 1.35fr 1fr; gap: 2rem; align-items: baseline; padding: 2rem 0; }
  .trade .num { padding-top: 0.5rem; }
}
@media (hover: hover) { .trade:hover .nm { translate: 0.25rem 0; } .trade:hover .num { color: var(--accent); } }
.trade:last-child { border-bottom: 1px solid var(--fg-10); }
.trade { position: relative; }
.trade:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
.trade-thumb { display: none; }
@media (min-width: 768px) {
  .trade-thumb { display: block; position: absolute; z-index: 2; left: calc(50% - 4rem); top: 50%; width: 14rem; aspect-ratio: 4 / 3; object-fit: cover; translate: 0 -50%; opacity: 0; pointer-events: none; box-shadow: 0 10px 15px rgba(0,0,0,.4); transition: opacity 350ms var(--ease-glide); }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .trade-thumb { left: auto; right: 0; } }
@media (min-width: 768px) and (hover: hover) { .trade:hover .trade-thumb { opacity: 1; } }
@media (min-width: 768px) { .trade:focus-visible .trade-thumb { opacity: 1; } }

/* ───────── process timeline (How It Works / How We Build It) ───────── */
.p-head { margin-top: 4rem; text-transform: uppercase; font-weight: 400; }
.p-track { --rail: 1.125rem; position: relative; margin-top: 4.5rem; }
.p-rail { position: absolute; top: 0; bottom: 0; left: calc(var(--rail) - 0.5px); width: 1px; overflow: hidden; pointer-events: none; background: var(--fg-10);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 7rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 7rem), transparent); }
.p-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; will-change: transform; }
.p-phase { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-phase + .p-phase { margin-top: 2rem; }
.p-label { padding-left: 3.5rem; margin-bottom: 1.75rem; color: var(--accent); font-weight: 500; }
.p-label small { display: block; margin-top: 0.375rem; font-size: var(--raw-font-size-caption); letter-spacing: var(--raw-tracking-copy); text-transform: none; font-weight: 400; color: var(--fg-60); }
.p-steps { list-style: none; margin: 0; padding: 0; }
.p-step { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 2.5rem; }
.p-phase:last-child .p-step:last-child, .p-steps:last-child .p-step:last-child { padding-bottom: 0; }
.p-node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--accent-deep); background: var(--background);
  font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--accent); transition: background-color 700ms var(--ease-glide); }
.p-step.in .p-node { background: color-mix(in oklab, var(--accent) 14%, var(--background)); }
.p-name { display: flex; align-items: center; min-height: 2.25rem; margin-bottom: 0.5rem; font-weight: 400; text-transform: uppercase; line-height: var(--raw-leading-heading); }
.p-text { max-width: 34rem; color: var(--fg-70); }
.p-actions { margin-top: 4rem; padding-left: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.p-actions .btn { display: inline-block; text-align: center; }
.on-stone .p-node { background: var(--surface-inverse); border-color: var(--accent-deep); color: var(--foreground-inverse-muted); }
.on-stone .p-step.in .p-node { background: color-mix(in oklab, var(--accent-deep) 14%, var(--surface-inverse)); }
.on-stone .p-rail { background: color-mix(in oklab, var(--foreground-inverse) 14%, transparent); }
.on-stone .p-fill { background: var(--accent-deep); }
.on-stone .p-text { color: color-mix(in oklab, var(--foreground-inverse) 72%, transparent); }
@media (min-width: 1024px) {
  .p-track { --rail: calc(25% + 1.125rem); }
  .p-track--plain { --rail: 1.125rem; }
  .p-phase { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .p-phase + .p-phase { margin-top: 1rem; }
  .p-label { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; padding-left: 0; margin: 0; }
  .p-step { column-gap: 2rem; padding-bottom: 3.5rem; }
  .p-actions { margin-top: 5rem; padding-left: calc(25% + 4.25rem); }
}
.p-track--plain .p-text { font-size: var(--fs-copy); }

/* ───────── google reviews ───────── */
.g-rating { display: flex; align-items: center; gap: 0.75rem; font-size: var(--raw-font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); color: var(--foreground-inverse-muted); }
.g-rating[hidden] { display: none; }
.g-rating b { font-size: var(--raw-font-size-lead); font-weight: 500; letter-spacing: var(--raw-tracking-copy); color: var(--foreground-inverse); }
.stars { display: inline-flex; gap: 0.125rem; font-size: 1rem; line-height: 1; }
.stars .s { --fill: 100%; color: transparent; background: linear-gradient(90deg, var(--accent-deep) var(--fill), color-mix(in oklab, var(--foreground-inverse) 16%, transparent) var(--fill)); -webkit-background-clip: text; background-clip: text; }
.g-grid { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-card { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; padding: 2rem; border: 1px solid color-mix(in oklab, var(--foreground-inverse) 14%, transparent); background: color-mix(in oklab, var(--foreground) 45%, var(--surface-inverse)); color: var(--foreground-inverse); }
.g-card.ph { border-color: transparent; border-radius: 0; min-height: 14rem; justify-content: space-between; padding: 2rem; }
.g-card.ph p { color: color-mix(in oklab, var(--foreground-inverse) 70%, transparent); }
.g-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.g-more { width: fit-content; font-size: var(--raw-font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); color: var(--foreground-inverse-muted); border-bottom: 1px solid color-mix(in oklab, var(--accent-deep) 45%, transparent); padding-bottom: 0.125rem; transition: color 350ms var(--ease-glide), border-color 350ms var(--ease-glide); }
.g-more:hover { color: var(--foreground-inverse); border-color: var(--accent-deep); }
.g-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--foreground-inverse) 12%, transparent); padding-top: 1rem; }
.g-name { font-size: var(--raw-font-size-body); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-copy); }
.g-date { margin-top: 0.25rem; color: color-mix(in oklab, var(--foreground-inverse) 65%, transparent); }
.g-mark { display: inline-flex; flex: none; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--foreground-inverse) 25%, transparent); border-radius: 50%; font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--foreground-inverse-muted); }
.g-actions { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }

/* ───────── forms ───────── */
.start-grid { margin-top: 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
.start-grid > * { min-width: 0; }
@media (min-width: 768px) { .start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.start-copy { display: flex; flex-direction: column; gap: 2rem; }
.start-copy h2 { text-transform: uppercase; font-weight: 400; }
.start-copy .lead { max-width: 28rem; color: var(--fg-70); }
.call { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: var(--raw-font-size-lead); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-copy); transition: translate 350ms var(--ease-glide), opacity 350ms var(--ease-glide); width: fit-content; }
.call:hover { translate: 0.25rem 0; opacity: 0.85; }
.call .ico { color: var(--accent); width: 1.25rem; height: 1.25rem; }
.trust { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; color: var(--fg-70); font-size: var(--raw-font-size-caption); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.fpanel { border: 1px solid var(--accent-deep); background: color-mix(in oklab, var(--surface-glass-raised) 40%, transparent); padding: 2.5rem; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.fpanel form { display: flex; flex-direction: column; gap: 1.75rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label, .field legend { font-size: var(--raw-font-size-caption); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-70); padding: 0; }
.field .req { color: var(--accent); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea {
  width: 100%; background: transparent; color: var(--foreground); border: 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 28%, transparent);
  border-radius: 0; padding: 0.625rem 0; font: inherit; font-size: var(--raw-font-size-lead); transition: border-color 200ms var(--ease-glide);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 0.75rem) 55%, calc(100% - 0.4rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.field select option { background: var(--surface-glass-raised); color: var(--foreground); }
.field ::placeholder { color: color-mix(in oklab, var(--foreground) 42%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent), 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.field input[type=file] { font: inherit; font-size: var(--raw-font-size-body); color: var(--fg-70); }
.field input[type=file]::file-selector-button { margin-right: 1rem; background: transparent; color: var(--accent); border: 1px solid var(--accent-deep); padding: 0.5rem 1rem; font: inherit; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); font-size: var(--raw-font-size-caption); cursor: pointer; }
.helper { font-size: var(--raw-font-size-caption); color: var(--fg-60); letter-spacing: var(--raw-tracking-copy); }
.err { color: var(--err); font-size: var(--raw-font-size-caption); min-height: 0; }
.err:empty { display: none; }
.field [aria-invalid=true] { border-bottom-color: var(--err); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.radios label, .consent label { display: inline-flex; align-items: center; gap: 0.625rem; text-transform: none; letter-spacing: var(--raw-tracking-copy); font-size: var(--raw-font-size-lead); color: var(--foreground); cursor: pointer; }
.radios input, .consent input { accent-color: var(--accent); width: 1.125rem; height: 1.125rem; margin: 0; }
.consent { display: flex; flex-direction: column; gap: 0.5rem; }
.consent label { align-items: flex-start; font-size: var(--raw-font-size-body); line-height: var(--raw-leading-copy); }
.consent label a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--accent-deep); }
.consent input { margin-top: 0.2rem; flex: none; }
.success { display: flex; flex-direction: column; gap: 1.25rem; }
.success:focus { outline: 0; }
.success h3 { font-weight: 400; text-transform: uppercase; }
.success p { color: var(--fg-70); max-width: 32rem; }
.formnote { color: var(--err); }
.btn[disabled] { opacity: 0.7; cursor: progress; translate: 0 0; }

/* ───────── footer (reveal from md up) ───────── */
.spacer { display: none; height: var(--raw-size-footer-reveal); }
#footer { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: var(--surface-footer); color: var(--foreground); padding: 5rem 1.5rem 0; }
#footer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#footer .tint { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in oklab, var(--surface-footer) 72%, transparent) 0%, color-mix(in oklab, var(--surface-footer) 48%, transparent) 45%, color-mix(in oklab, var(--surface-footer) 30%, transparent) 100%); }
#footer .f-col, #footer .cap, #footer .cta h2 { text-shadow: 0 1px 14px rgb(14 14 13 / 0.55); }
#footer .grid-lines { z-index: 2; inset: 0 1.5rem; }
#footer .fgrid { position: relative; z-index: 15; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
#footer .cta { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
#footer .cta h2 { text-transform: uppercase; font-weight: 400; }
#footer .cta .eng { justify-content: center; text-align: center; }
#footer nav { width: 100%; }
.f-cols { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.f-col h3 { margin-bottom: 0.875rem; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); }
.f-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.f-col a { display: inline-block; font-size: max(var(--raw-font-size-body-phone), 14px); line-height: 1.3; letter-spacing: var(--raw-tracking-copy); transition: translate 350ms var(--ease-glide), opacity 350ms var(--ease-glide); }
.f-col a:hover { translate: 0.25rem 0; opacity: 0.7; }
.f-col a[aria-current="page"] { color: var(--accent); }
#footer .wm { position: relative; z-index: 5; display: flex; width: 100%; justify-content: center; margin-top: 4rem; margin-bottom: 0; }
#footer .wm span.big { text-align: center; font-size: var(--raw-font-size-wordmark-phone); line-height: var(--raw-leading-wordmark); letter-spacing: var(--raw-tracking-display); }
#footer .wm .ww { display: inline-block; white-space: nowrap; }
#footer .wm .ww i { display: inline-block; font-style: normal; }
#footer .cap { position: relative; z-index: 15; width: 100%; text-align: center; font-size: var(--fs-caps); line-height: 1.7; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-60); }
#footer .cap a:hover { color: var(--foreground); }
#footer .cap .sep { margin: 0 0.5em; opacity: 0.6; }
#footer .cap-spacer { height: 3rem; }
#contact { display: block; height: 1px; }
/* before site.js injects the footer, hold its space so nothing below jumps */
[data-site-footer]:empty { display: block; min-height: 40rem; background: var(--surface-footer); }

@media (min-width: 768px) {
  .spacer { display: block; }
  #footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--raw-size-footer-reveal); z-index: 10; flex-direction: row; align-items: stretch; padding: 0; visibility: hidden; }
  #footer .grid-lines { inset: 0 2rem; }
  #footer .fgrid { position: absolute; left: 2rem; right: 2rem; top: 2.5rem; width: auto; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 2.5rem; }
  #footer .cta { grid-column: span 2; max-width: 31.5rem; align-items: flex-start; padding-left: 1.25rem; }
  #footer .cta .eng { justify-content: flex-start; text-align: left; }
  #footer nav { grid-column: 3 / 5; grid-row: 1; padding-right: 1.25rem; }
  .f-cols { gap: 2rem 1.5rem; }
  #footer .wm { height: 100%; align-items: flex-end; margin-top: 0; }
  #footer .wm span.big { font-size: var(--raw-font-size-wordmark); white-space: nowrap; translate: 0 var(--raw-size-wordmark-drop); }
  #footer .cap { grid-column: 1 / span 4; grid-row: 2; margin: 0; text-align: left; padding-left: 1.25rem; }
  [data-site-footer]:empty { min-height: var(--raw-size-footer-reveal); background: none; }
}
@media (min-width: 1024px) {
  .f-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .f-col a { font-size: max(var(--raw-font-size-body-phone), 12.5px); }
}
@media (max-width: 767.98px) {
  #footer .cap { margin-top: 3rem; }
}

/* ───────── site header ───────── */
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 400; background: var(--accent); color: var(--background); padding: 0.875rem 1.25rem; font-size: var(--raw-font-size-caption); font-weight: 600; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; transform: translateY(-300%); transition: transform 200ms var(--ease-glide); }
.skip-link:focus-visible { transform: none; outline: 2px solid var(--foreground); outline-offset: 2px; }
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: var(--nav-h); transition: transform var(--duration-normal) var(--ease-glide), opacity var(--duration-normal) var(--ease-glide); }
.site-header.is-pre { opacity: 0; visibility: hidden; transform: translateY(-0.75rem); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header::before, .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-glide), background-color var(--duration-normal) var(--ease-glide); }
.site-header::before { background: linear-gradient(to bottom, color-mix(in oklab, var(--background) 85%, transparent), transparent); }
.site-header::after { opacity: 0; background: color-mix(in oklab, var(--raw-color-charcoal-900) 72%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.site-header.is-solid::before { opacity: 0; }
.site-header.is-solid::after { opacity: 1; }
.site-header.is-up::after { background: color-mix(in oklab, var(--raw-color-charcoal-900) 94%, transparent); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 100%; padding: 0 2rem; }
.nav ul { display: flex; align-items: center; gap: 1.5rem; }
.nav-main { flex: none; }
.nav-r { flex: none; margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.nav-link { position: relative; display: inline-block; padding: 0.5rem 0; font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; white-space: nowrap; transition: color var(--duration-normal) var(--ease-glide); }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.125rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-glide); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.nav-link[aria-current] { color: var(--accent); }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 0.25rem; padding: 0.75rem 1.5rem; font-size: var(--raw-font-size-caption); font-weight: 600; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; white-space: nowrap; transition: background-color var(--duration-normal) var(--ease-glide), color var(--duration-normal) var(--ease-glide); }
.nav-cta:hover { background: var(--accent); color: var(--background); }
.site-header a:focus-visible, .site-header button:focus-visible, .menu a:focus-visible, .menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Trades dropdown */
.has-dd { position: relative; display: flex; align-items: center; gap: 0.125rem; }
.dd-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.75rem; color: var(--accent); }
.dd-toggle .ico { width: 0.875rem; height: 0.875rem; transition: transform var(--duration-normal) var(--ease-glide); }
.has-dd.is-open .dd-toggle .ico { transform: rotate(180deg); }
.nav .dd { display: block; position: absolute; left: -1.5rem; top: 100%; min-width: 18rem; padding: 1rem 0 0.75rem; margin: 0; opacity: 0; visibility: hidden; translate: 0 -0.5rem; transition: opacity var(--duration-normal) var(--ease-glide), translate var(--duration-normal) var(--ease-glide), visibility 0s linear var(--duration-normal); }
.nav .dd::before { content: ""; position: absolute; inset: 0.5rem 0 0; z-index: -1; background: color-mix(in oklab, var(--raw-color-charcoal-900) 94%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.has-dd.is-open .dd { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.dd a { display: block; padding: 0.625rem 1.5rem; font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; white-space: nowrap; transition: color var(--duration-fast) var(--ease-glide), background-color var(--duration-fast) var(--ease-glide); }
.dd a:hover, .dd a:focus-visible { color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.dd a[aria-current] { color: var(--accent); }
.dd .dd-all a { color: var(--fg-70); border-top: 1px solid var(--fg-10); margin-top: 0.5rem; padding-top: 1rem; }
.nav-menu-btn { display: none; align-items: center; gap: 0.5rem; padding: 0.75rem 0; font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.nav-menu-btn .ico, .menu-close .ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.menu { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; overflow-y: auto; padding: 0 1.5rem 2rem; background: color-mix(in oklab, var(--background) 92%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-glide), visibility 0s linear var(--duration-normal); }
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-bar { display: flex; flex: none; align-items: center; justify-content: flex-end; height: var(--nav-h); }
.menu-close { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; font-size: var(--raw-font-size-caption); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.menu-list { margin-top: 1rem; }
.menu-list li { border-top: 1px solid var(--fg-10); }
.menu-list li:last-child { border-bottom: 1px solid var(--fg-10); }
.menu-list a { display: block; padding: 0.625rem 0; font-size: 1.875rem; font-weight: 400; line-height: var(--raw-leading-heading); letter-spacing: var(--raw-tracking-title); text-transform: uppercase; transition: color var(--duration-normal) var(--ease-glide), translate var(--duration-normal) var(--ease-glide); }
.menu-list a:hover { color: var(--accent); translate: 0.25rem 0; }
.menu-list a[aria-current] { color: var(--accent); }
.menu-list--sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; margin-top: 0; border-bottom: 1px solid var(--fg-10); }
.menu-list--sub li:last-child { border-bottom: 0; }
.menu-list--sub li:nth-last-child(2) { border-bottom: 0; }
.menu-list--sub a { padding: 0.875rem 0; font-size: max(var(--raw-font-size-caption), 13px); font-weight: 500; letter-spacing: var(--raw-tracking-caps); }
.menu-cta { margin-top: 2rem; align-self: stretch; padding: 1.125rem 2rem; background: var(--accent); color: var(--background); }
.menu-cta:hover { background: #d9a56d; }
@media (min-width: 640px) { .menu { padding: 0 2.5rem 2.5rem; } .menu-list a { font-size: 2.25rem; } }
@media (min-width: 1100px) { .menu { display: none; } }
@media (max-width: 1099.98px) {
  :root { --nav-h: 3.75rem; }
  .nav { padding: 0 1.5rem; }
  .nav .nav-hide-m { display: none; }
  .nav-r { gap: 1rem; }
  .nav-cta { padding: 0.625rem 1rem; }
  .nav-menu-btn { display: inline-flex; }
}

/* ───────── site search (field in the bar, panel under the header on mobile; behaviour: site.js "site search") ───────── */
.ss { position: relative; flex: none; }
.ss--bar { width: 11rem; }
.ss-form { display: flex; align-items: center; gap: 0.5rem; height: 2.625rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: 0.25rem; background: color-mix(in oklab, var(--foreground) 6%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color var(--duration-normal) var(--ease-glide), box-shadow var(--duration-normal) var(--ease-glide), background-color var(--duration-normal) var(--ease-glide); }
.ss-form:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.ss-form:focus-within { border-color: var(--accent); background: color-mix(in oklab, var(--foreground) 10%, transparent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); }
.ss-ico { display: flex; flex: none; color: var(--accent); cursor: text; }
.ss-ico .ico { width: 1.125rem; height: 1.125rem; }
.ss-input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--foreground); font: inherit; font-size: max(0.875rem, 12px); letter-spacing: 0.02em; outline: 0; -webkit-appearance: none; appearance: none; }
.ss .ss-input:focus-visible { outline: 0; } /* the bronze ring sits on .ss-form (:focus-within) */
.ss-input::placeholder { color: var(--fg-60); opacity: 1; }
.ss-pop { position: absolute; z-index: 5; top: calc(100% + 0.5rem); right: 0; width: min(34rem, calc(100vw - 2rem)); background: color-mix(in oklab, var(--raw-color-charcoal-900) 96%, transparent); border: 1px solid var(--line); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.ss .ss-list { display: block; max-height: min(32rem, calc(100svh - var(--nav-h) - 2.5rem)); overflow-y: auto; overscroll-behavior: contain; padding: 0.375rem 0; }
.ss-opt a { display: block; padding: 0.75rem 1.25rem; border-left: 2px solid transparent; }
.ss-opt[aria-selected="true"] a, .ss-opt a:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); border-left-color: var(--accent); }
.ss-opt a:focus-visible { outline: 0; }
.ss-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ss-t { font-size: max(1rem, 14px); font-weight: 500; line-height: 1.3; color: var(--foreground); }
.ss-k { flex: none; font-size: max(0.6875rem, 10px); font-weight: 600; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.ss-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 0.25rem; font-size: max(0.8125rem, 12px); line-height: 1.45; color: var(--fg-70); }
.ss mark { background: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--foreground); border-radius: 2px; padding: 0 0.0625rem; }
.ss-empty { padding: 1.25rem; font-size: max(0.875rem, 13px); line-height: 1.5; }
.ss-none { color: var(--foreground); }
.ss-none-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.75rem; }
.ss-none-links a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; }
.ss-pop a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-search-btn { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-right: -0.25rem; }
.nav-search-btn .ico { width: 1.375rem; height: 1.375rem; color: var(--accent); }
.nav-search-btn[aria-expanded="true"] .ico { color: var(--foreground); }
.ss-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 0.75rem 1.5rem 1rem; background: color-mix(in oklab, var(--raw-color-charcoal-900) 96%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.ss--panel { width: 100%; }
.ss--panel .ss-form { height: 3rem; }
.ss--panel .ss-input { font-size: max(1rem, 16px); }
.ss--panel .ss-ico .ico { width: 1.25rem; height: 1.25rem; }
.ss--panel .ss-pop { left: -1.5rem; right: -1.5rem; width: auto; top: calc(100% + 1rem); border-left: 0; border-right: 0; box-shadow: 0 1.5rem 2rem rgb(0 0 0 / 0.4); }
.ss--panel .ss-list { display: block; max-height: calc(100svh - var(--nav-h) - 7rem); }
@media (max-width: 1099.98px) { .ss--bar { display: none; } .nav-search-btn { display: inline-flex; } }
@media (min-width: 1100px) { .ss-panel, .nav-search-btn { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ss-form { transition-duration: 0.01ms; } }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header::before, .site-header::after, .menu, .nav-link::after, .nav .dd { transition-duration: 0.01ms; } }

/* ═════════════ inner-page components ═════════════ */

/* breadcrumbs + eyebrow */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--fs-caps); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-70); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--accent); }
.crumbs a:hover { color: var(--foreground); }
.crumbs [aria-current] { color: var(--foreground); }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-caps); font-weight: 500; text-transform: uppercase; letter-spacing: var(--raw-tracking-caps); color: var(--accent); }
.on-stone .eyebrow { color: var(--foreground-inverse-muted); }

/* page hero (all inner pages) */
.page-hero { position: relative; z-index: 50; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(46rem, 100svh); padding: calc(var(--nav-h) + 4rem) 2.5rem 4rem; background: var(--background); overflow: hidden; }
.page-hero--short { min-height: 0; padding-top: calc(var(--nav-h) + 6rem); padding-bottom: 5rem; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in oklab, var(--background) 92%, transparent) 0%, color-mix(in oklab, var(--background) 62%, transparent) 42%, color-mix(in oklab, var(--background) 34%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in oklab, var(--background) 70%, transparent) 0%, transparent 28%); }
.page-hero--plain::before { background: radial-gradient(ellipse 80% 90% at 85% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%), linear-gradient(to bottom, var(--surface-footer), var(--background)); }
/* typographic hero (no photo): bronze hairlines, grid lines and a faint outline M */
.page-hero--type { border-bottom: 1px solid var(--line); }
.page-hero--type::after { content: "M"; position: absolute; right: 3%; bottom: -0.12em; z-index: -1; font-size: clamp(16rem, 40vw, 42rem); line-height: 0.8; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--accent) 38%, transparent); pointer-events: none; user-select: none; }
.page-hero--short.page-hero--type::after { font-size: clamp(12rem, 26vw, 28rem); bottom: -0.2em; }
.page-hero--type .page-hero__in { padding-top: 1rem; border-top: 1px solid var(--line); }
.media--type { display: grid; place-items: center; background: radial-gradient(ellipse 80% 90% at 85% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%), var(--surface-footer); box-shadow: inset 0 0 0 1px var(--line); }
.media--type span { font-size: clamp(4rem, 9vw, 6.5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--accent) 55%, transparent); }
.page-hero .grid-lines { z-index: -1; }
.page-hero__in { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem; max-width: 76rem; }
.page-hero__in > .lede { color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.page-hero h1 { max-width: 14ch; }
.page-hero--wide h1 { max-width: none; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--fs-caps); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-70); }
.hero-facts b { font-weight: 500; color: var(--foreground); }

/* media */
.media { position: relative; overflow: hidden; background: var(--surface-glass-raised); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.r-43 { aspect-ratio: 4 / 3; } .r-32 { aspect-ratio: 3 / 2; } .r-169 { aspect-ratio: 16 / 9; } .r-45 { aspect-ratio: 4 / 5; } .r-11 { aspect-ratio: 1; }
figure.fig figcaption, figcaption.cap { margin-top: 0.75rem; font-size: var(--fs-caps); letter-spacing: var(--raw-tracking-copy); color: var(--fg-60); }
.on-stone figure.fig figcaption { color: color-mix(in oklab, var(--foreground-inverse) 62%, transparent); }

/* two-column text + media */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.split > * { min-width: 0; }
.split.split--solo { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } .split--rev > :first-child { order: 2; } }
.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack > .btn, .stack > .arrow-link { margin-top: 0.5rem; }

/* cards + hub grids */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 1.5rem; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; color: inherit; }
.card__media { aspect-ratio: 4 / 3; }
.card__media img { transition: transform 900ms var(--ease-glide); }
@media (hover: hover) { a.card:hover .card__media img { transform: scale(1.04); } }
.card__meta { font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); }
.on-stone .card__meta { color: var(--foreground-inverse-muted); }
.card__title { font-size: var(--raw-font-size-title-phone); font-weight: 400; text-transform: uppercase; letter-spacing: var(--raw-tracking-title); line-height: var(--raw-leading-heading); }
@media (min-width: 640px) { .card__title { font-size: 1.625rem; } }
.card__text { font-size: var(--fs-copy); line-height: 1.55; color: var(--fg-70); max-width: 34rem; }
.on-stone .card__text { color: color-mix(in oklab, var(--foreground-inverse) 72%, transparent); }
.card .arrow-link { margin-top: auto; padding-top: 0.25rem; }
a.card:hover .arrow-link .ico, a.card:focus-visible .arrow-link .ico { transform: translate(0.125rem, 0.125rem); }
.trade-list a.trade { color: inherit; }
.on-stone .card .arrow-link { color: var(--foreground-inverse); }
.on-stone .card .arrow-link .ico { color: var(--accent-deep); }
a.card:focus-visible { outline-offset: 6px; }
.card--row { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--fg-10); }
.card-note { margin-top: 3rem; max-width: 40rem; }

/* filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.chip { border: 1px solid var(--fg-22); padding: 0.625rem 1.125rem; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; transition: background-color 250ms var(--ease-glide), color 250ms var(--ease-glide), border-color 250ms var(--ease-glide); }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--background); }
.on-stone .chip { border-color: color-mix(in oklab, var(--foreground-inverse) 25%, transparent); }
.on-stone .chip:hover { border-color: var(--accent-deep); }
.on-stone .chip[aria-pressed="true"] { background: var(--foreground-inverse); border-color: var(--foreground-inverse); color: var(--surface-inverse); }
.filter-empty { color: var(--fg-70); }

/* long-form reading column */
.prose { max-width: 68ch; font-size: max(1.0625rem, 16.5px); line-height: 1.7; letter-spacing: -0.005em; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 2.2em; font-size: max(1.75rem, 24px); font-weight: 400; line-height: 1.15; letter-spacing: var(--raw-tracking-title); text-transform: uppercase; }
.prose h3 { margin-top: 1.8em; font-size: max(1.25rem, 19px); font-weight: 500; line-height: 1.25; letter-spacing: var(--raw-tracking-title); }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose a { text-decoration: underline; text-decoration-color: var(--accent-deep); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color 200ms; }
.prose a:hover { text-decoration-color: var(--accent); color: var(--accent); }
.on-stone .prose a:hover { color: var(--accent-deep); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: "✦"; position: absolute; left: -1.35em; top: 0.1em; font-size: 0.7em; color: var(--accent); }
.on-stone .prose ul li::before { color: var(--accent-deep); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { padding-left: 1.25em; border-left: 2px solid var(--accent); font-size: 1.15em; line-height: 1.5; }
.prose strong { font-weight: 600; }
.prose figure { margin-top: 2em; margin-bottom: 2em; }
.prose figure.wide { width: min(100vw - 5rem, 60rem); max-width: none; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.prose-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .prose-grid { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 5rem; } }
.toc { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
.toc h2 { font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.on-stone .toc h2 { color: var(--foreground-inverse-muted); }
.toc ol { display: flex; flex-direction: column; gap: 0.625rem; font-size: var(--fs-copy); }
.toc a:hover { color: var(--accent); }
@media (max-width: 1023.98px) { .toc { position: static; } }

/* checklist + pros / considerations */
.checks li { position: relative; padding-left: 1.75rem; font-size: var(--fs-copy); line-height: 1.55; }
.checks li + li { margin-top: 0.75rem; }
.checks li::before { content: "✦"; position: absolute; left: 0; top: 0.15em; font-size: 0.75em; color: var(--accent); }
.on-stone .checks li::before { color: var(--accent-deep); }
.checks--minus li::before { content: "—"; font-size: 1em; top: 0; }
.proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 768px) { .proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.proscons h3 { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }

/* numbered feature list (What We Build, Why It Matters) */
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--fg-10); }
.on-stone .feature-grid { border-color: color-mix(in oklab, var(--foreground-inverse) 14%, transparent); }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
@media (min-width: 1024px) { .feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--fg-10); }
.on-stone .feature { border-color: color-mix(in oklab, var(--foreground-inverse) 14%, transparent); }
.feature .num { font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); color: var(--accent); }
.on-stone .feature .num { color: var(--foreground-inverse-muted); }
.feature h3 { font-size: var(--raw-font-size-title-phone); font-weight: 400; text-transform: uppercase; letter-spacing: var(--raw-tracking-title); line-height: var(--raw-leading-heading); }
@media (min-width: 640px) { .feature h3 { font-size: 1.625rem; } }
.feature p { font-size: var(--fs-copy); line-height: 1.55; color: var(--fg-70); max-width: 32rem; }
.on-stone .feature p { color: color-mix(in oklab, var(--foreground-inverse) 72%, transparent); }

/* facts (project facts sidebar, key figures) */
.facts { display: grid; gap: 1.5rem; }
.facts > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.facts dt { font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); }
.facts dd { margin-top: 0.5rem; font-size: max(var(--raw-font-size-lead), 17px); line-height: 1.4; letter-spacing: var(--raw-tracking-copy); }
.on-stone .facts > div { border-color: color-mix(in oklab, var(--foreground-inverse) 18%, transparent); }
.on-stone .facts dt { color: var(--foreground-inverse-muted); }
.facts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
@media (min-width: 768px) { .facts--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1024px) { .case-grid { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 5rem; } }
.case-aside { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
@media (max-width: 1023.98px) { .case-aside { position: static; } }
.case-main > * + * { margin-top: 4rem; }
.case-main h2 { margin-bottom: 1.25rem; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); }
.on-stone .case-main h2 { color: var(--foreground-inverse-muted); }

/* before / after slider (keyboard + pointer through a range input) */
.compare { --pos: 50%; position: relative; }
.compare__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-glass-raised); user-select: none; touch-action: pan-y; }
.compare__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__tag { position: absolute; top: 1rem; z-index: 3; padding: 0.375rem 0.75rem; font-size: var(--fs-caps); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; background: rgb(14 14 13 / 0.72); color: var(--foreground); }
.compare__tag--before { left: 1rem; } .compare__tag--after { right: 1rem; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.compare__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; translate: -50% -50%; border-radius: 50%; background: var(--background); border: 1px solid var(--accent); color: var(--accent); font-size: 1.25rem; }
.compare__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.compare__range:focus-visible ~ .compare__handle::after { outline: 2px solid var(--foreground); outline-offset: 3px; }
.compare__range:focus-visible { outline: 0; }
.compare figcaption { margin-top: 0.75rem; font-size: var(--fs-caps); color: var(--fg-60); }
.on-stone .compare figcaption { color: color-mix(in oklab, var(--foreground-inverse) 62%, transparent); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.gallery > .media { aspect-ratio: 4 / 3; }
.gallery > .wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .gallery > .wide { grid-column: span 2; aspect-ratio: auto; } }

/* swatches (material colors + finishes) */
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1100px) { .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.swatch { display: flex; flex-direction: column; gap: 0.75rem; }
.swatch__chip { aspect-ratio: 1; background: var(--c, #8a8a85); border: 1px solid var(--fg-10); }
.on-stone .swatch__chip { border-color: color-mix(in oklab, var(--foreground-inverse) 18%, transparent); }
.swatch b { display: block; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; }
.swatch span { display: block; margin-top: 0.25rem; font-size: var(--fs-copy); color: var(--fg-70); line-height: 1.4; }
.on-stone .swatch span { color: color-mix(in oklab, var(--foreground-inverse) 70%, transparent); }

/* FAQ accordion (native <details>) */
.faq { border-top: 1px solid var(--fg-10); }
.faq details { border-bottom: 1px solid var(--fg-10); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; list-style: none; cursor: pointer; font-size: max(1.25rem, 18px); line-height: 1.3; letter-spacing: var(--raw-tracking-title); transition: color 250ms var(--ease-glide); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform 350ms var(--ease-glide); }
.faq summary:hover { color: var(--accent); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq .answer { padding: 0 0 1.75rem; max-width: 46rem; font-size: var(--fs-copy); line-height: 1.65; color: var(--fg-70); }
.faq .answer > * + * { margin-top: 0.875rem; }
.on-stone .faq, .on-stone .faq details { border-color: color-mix(in oklab, var(--foreground-inverse) 16%, transparent); }
.on-stone .faq summary:hover { color: var(--accent-deep); }
.on-stone .faq summary::after { border-color: var(--accent-deep); }
.on-stone .faq .answer { color: color-mix(in oklab, var(--foreground-inverse) 74%, transparent); }

/* CTA band */
.cta-band { position: relative; z-index: 50; overflow: hidden; isolation: isolate; background: var(--surface-footer); padding: 6rem 2.5rem; }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band { border-top: 1px solid var(--accent); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 120% at 90% 100%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%), var(--surface-footer); }
.cta-band__in { display: flex; flex-direction: column; gap: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cta-band h2 { max-width: 16ch; font-weight: 400; text-transform: uppercase; }
.cta-band p { max-width: 34rem; font-size: var(--fs-copy); line-height: 1.6; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
@media (min-width: 900px) { .cta-band__in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4rem; } .cta-band__in > div:first-child { display: flex; flex-direction: column; gap: 1.5rem; } }

/* article header + meta */
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--fs-caps); letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-70); }
.article-meta span + span::before { content: "·"; margin-right: 1.5rem; color: var(--accent); }
.article-cover { margin-top: 3rem; }
.article-wrap { display: flex; flex-direction: column; align-items: flex-start; }

/* contact details list */
.contact-list { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-list > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.contact-list dt { font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--accent); }
.contact-list dd { margin-top: 0.5rem; font-size: max(var(--raw-font-size-lead), 17px); line-height: 1.4; }
.contact-list a:hover { color: var(--accent); }

/* inline notice (supplier note, availability note) */
.note { padding: 1.25rem 1.5rem; border: 1px solid var(--line); font-size: var(--fs-copy); line-height: 1.55; color: var(--fg-70); max-width: 44rem; }
.on-stone .note { border-color: color-mix(in oklab, var(--foreground-inverse) 20%, transparent); color: color-mix(in oklab, var(--foreground-inverse) 74%, transparent); }

/* ───────── phone ───────── */
@media (max-width: 767.98px) {
  .sec, .cta-band { padding: 4.5rem 1.5rem; }
  .page-hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 3rem; }
  .page-hero--short { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 3.5rem; }
  .fpanel { padding: 1.5rem; }
  #footer .grid-lines, .page-hero .grid-lines { inset: 0 1.5rem; }
  .prose figure.wide { width: auto; }
}

/* trust bar (rendered by site.js from config.js BUSINESS; empty fields are hidden) */
.trust-bar { position: relative; z-index: 50; background: var(--surface-footer); border-block: 1px solid var(--line); padding: 1.25rem 2.5rem; color: var(--foreground); }
.trust-bar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.5rem; font-size: var(--fs-caps); font-weight: 500; letter-spacing: var(--raw-tracking-caps); text-transform: uppercase; color: var(--fg-70); }
.trust-bar li { display: flex; align-items: center; gap: 0.625rem; }
.trust-bar .st { color: var(--accent); }
.trust-bar a { transition: color 250ms var(--ease-glide); }
.trust-bar a:hover { color: var(--foreground); }
@media (max-width: 767.98px) { .trust-bar { padding: 1.25rem 1.5rem; } .trust-bar ul { justify-content: flex-start; gap: 0.625rem 1.5rem; } }
/* "More" dropdown: a button instead of a link, anchored to the right edge */
.nav-link.dd-toggle { width: auto; height: auto; gap: 0.375rem; padding: 0.5rem 0; color: inherit; }
.nav-link.dd-toggle .ico { color: var(--accent); }
.nav-link.dd-toggle[aria-current] { color: var(--accent); }
.nav .has-dd.dd--right .dd { left: auto; right: -1.5rem; min-width: 14rem; }
.nav .dd { min-width: 21rem; }
.dd a { white-space: normal; }
.nav .dd--right .dd { min-width: 14rem; }
.compare__stage[data-ph]::after { top: auto; bottom: 0.75rem; }

/* header on narrow screens: search icon, shrunken CTA, icon-only menu button (no M) */
.crumbs ol, .toc ol.plain { list-style: none; }
@media (max-width: 1099.98px) {
  .nav-cta { padding: 0.625rem 0.75rem; letter-spacing: 0.14em; }
}
@media (max-width: 520px) {
  .nav-cta { font-size: 0.75rem; }
  .nav-menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .nav-menu-btn { padding: 0.75rem 0 0.75rem 0.25rem; }
  .nav-menu-btn .ico { width: 1.75rem; height: 1.75rem; }
}
/* ── Service map + territory lists (/territory/, /locations/). Markup is generated by tools/build-service-areas.mjs; behaviour is /assets/js/service-map.js ── */
.smap { margin-top: 2.5rem; --ds: 1; --hs: 1; --lab: 13px; max-width: 44rem; }
.smap__skip { margin: 0 0 0.75rem; font-size: 0.85rem; }
.smap__skip a:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.smap__skip a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.smap__frame { position: relative; }
.smap__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.smap__county { fill: var(--surface-glass-raised); stroke: var(--accent-deep); stroke-width: 0.8; stroke-linejoin: round; }
.smap__core { fill: var(--accent); fill-opacity: 0.16; stroke: var(--accent); stroke-opacity: 0.5; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.smap__cty { font-size: calc(var(--lab) * 0.85); font-weight: 600; letter-spacing: 0.22em; fill: var(--raw-color-bronze-muted); pointer-events: none; }
.smap__lab { font-size: var(--lab); font-weight: 500; fill: var(--foreground); paint-order: stroke; stroke: var(--background); stroke-width: calc(var(--lab) * 0.28); stroke-linejoin: round; pointer-events: none; }
.smap__lab.is-home { fill: var(--accent); font-weight: 600; }
.smap__dot { outline: none; cursor: default; }
.smap__dot.has-page { cursor: pointer; }
.smap__dot .hit { fill: transparent; transform: scale(var(--hs)); }
.smap__dot .pt { fill: #9a8d7e; fill-opacity: 0.85; transform: scale(var(--ds)); transition: transform 160ms var(--ease-glide), fill 160ms; }
.smap__dot.is-core .pt { fill: #e6b172; fill-opacity: 1; }
.smap__dot .ring { fill: none; stroke: #e6b172; stroke-width: 1.6; transform: scale(var(--ds)); }
.smap__dot:hover .pt, .smap__dot:focus-visible .pt { transform: scale(calc(var(--ds) * 1.5)); fill: #fff3e0; }
.smap__dot:focus-visible .pt { stroke: var(--accent); stroke-width: 2; }
.smap__tip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); background: var(--background); border: 1px solid var(--accent-deep); color: var(--foreground); padding: 0.4rem 0.65rem; font-size: 0.85rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 6px 20px rgb(0 0 0 / 0.45); }
.smap__tip small { display: block; color: var(--fg-70); font-size: 0.72rem; letter-spacing: 0.04em; }
.smap__tip[hidden] { display: none; }
.smap__legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.85rem; color: var(--fg-70); }
.smap__legend li { display: flex; align-items: center; gap: 0.55rem; }
.smap__legend .k { display: inline-block; width: 1rem; height: 1rem; flex: none; }
.smap__legend .k--core { background: color-mix(in oklab, var(--accent) 22%, transparent); border: 1px dashed var(--accent); }
.smap__legend .k--also { width: 0.55rem; height: 0.55rem; margin: 0 0.225rem; border-radius: 50%; background: #9a8d7e; }
.smap__legend .k--home { border-radius: 50%; border: 1.6px solid #e6b172; background: radial-gradient(circle, #e6b172 0 28%, transparent 30%); }
.terr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 2rem; }
.terr-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: var(--fs-copy); line-height: 1.35; scroll-margin-top: 6rem; }
.terr-list a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s; }
.terr-list a:hover { color: var(--foreground); }
.terr-list small { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-60); }
.terr-list li:target { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.on-stone .terr-list li { border-color: color-mix(in oklab, var(--foreground-inverse) 18%, transparent); }
.on-stone .terr-list a { color: var(--accent-deep); }
.on-stone .terr-list a:hover { color: var(--foreground-inverse); }
.on-stone .terr-list small { color: var(--foreground-inverse-muted); }
.terr-counties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem 4rem; }
.terr-county__t { font-size: max(var(--raw-font-size-lead), 20px); font-weight: 500; margin: 0 0 1.5rem; }
.terr-county__t span { display: block; margin-top: 0.3rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-60); font-weight: 400; }
.terr-sub { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 1.75rem 0 0.5rem; }
@media (min-width: 1000px) { .terr-counties { grid-template-columns: repeat(2, minmax(0, 1fr)); } .terr-counties .terr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .smap__tip { font-size: 0.8rem; } }