/* ==========================================================================
   Guided tour — visual layer
   Avanti Design Rules / methods/guided-tour
   Re-skin by remapping the tokens below. Do not change the behaviour hooks
   (data-* attributes, element structure) — tour.js depends on them.
   ========================================================================== */

:root {
  --tour-bg: #211d19;
  --tour-border: #4a423a;
  --tour-fg: #f2ede6;
  --tour-fg-muted: #b0a89e;
  --tour-fg-dim: #5a524a;
  --tour-accent: #c2502a;
  --tour-accent-fg: #ffffff;
  --tour-scrim: rgba(12, 10, 8, 0.66);

  --tour-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --tour-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tour-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --tour-radius: 14px;
  --tour-caret: 11px;      /* half-width of the caret triangle */
  --tour-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tour-dur: 220ms;
  --tour-z: 9000;
}

/* --- scrim: four rects, so the target stays genuinely interactive --------- */

.tour-scrim {
  position: fixed;
  background: var(--tour-scrim);
  z-index: var(--tour-z);
  opacity: 0;
  transition: opacity var(--tour-dur) var(--tour-ease);
}
.tour-root[data-tour-open='true'] .tour-scrim { opacity: 1; }

/* --- spotlight ring: decoration only, never blocks the element ----------- */

.tour-ring {
  position: fixed;
  pointer-events: none;
  z-index: calc(var(--tour-z) + 1);
  border: 2px solid var(--tour-accent);
  border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(194, 80, 42, 0.12);
  opacity: 0;
  transition:
    opacity var(--tour-dur) var(--tour-ease),
    top var(--tour-dur) var(--tour-ease),
    left var(--tour-dur) var(--tour-ease),
    width var(--tour-dur) var(--tour-ease),
    height var(--tour-dur) var(--tour-ease);
}
.tour-root[data-tour-open='true'] .tour-ring[data-tour-anchored='true'] { opacity: 1; }

/* --- card ---------------------------------------------------------------- */

.tour-card {
  position: fixed;
  z-index: calc(var(--tour-z) + 2);
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  padding: 28px 30px 24px;
  background: var(--tour-bg);
  border: 1px solid var(--tour-border);
  border-radius: var(--tour-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-family: var(--tour-sans);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--tour-dur) var(--tour-ease),
    transform var(--tour-dur) var(--tour-ease);
}
.tour-root[data-tour-open='true'] .tour-card {
  opacity: 1;
  transform: translateY(0);
}
.tour-card:focus { outline: none; }

/* --- caret: card background + hairline, sitting on the facing edge -------- */

.tour-caret {
  position: absolute;
  width: 0;
  height: 0;
  border: var(--tour-caret) solid transparent;
}
.tour-card[data-tour-placement='bottom'] .tour-caret {
  bottom: 100%;
  border-bottom-color: var(--tour-border);
}
.tour-card[data-tour-placement='bottom'] .tour-caret::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tour-caret));
  top: calc(-1 * var(--tour-caret) + 1.5px);
  border: var(--tour-caret) solid transparent;
  border-bottom-color: var(--tour-bg);
}
.tour-card[data-tour-placement='top'] .tour-caret {
  top: 100%;
  border-top-color: var(--tour-border);
}
.tour-card[data-tour-placement='top'] .tour-caret::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tour-caret));
  top: calc(-1 * var(--tour-caret) - 1.5px);
  border: var(--tour-caret) solid transparent;
  border-top-color: var(--tour-bg);
}
.tour-card[data-tour-placement='right'] .tour-caret {
  right: 100%;
  border-right-color: var(--tour-border);
}
.tour-card[data-tour-placement='right'] .tour-caret::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--tour-caret));
  left: calc(-1 * var(--tour-caret) + 1.5px);
  border: var(--tour-caret) solid transparent;
  border-right-color: var(--tour-bg);
}
.tour-card[data-tour-placement='left'] .tour-caret {
  left: 100%;
  border-left-color: var(--tour-border);
}
.tour-card[data-tour-placement='left'] .tour-caret::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--tour-caret));
  left: calc(-1 * var(--tour-caret) - 1.5px);
  border: var(--tour-caret) solid transparent;
  border-left-color: var(--tour-bg);
}
.tour-card[data-tour-placement='center'] .tour-caret { display: none; }

/* --- content ------------------------------------------------------------- */

.tour-eyebrow {
  margin: 0 0 14px;
  font-family: var(--tour-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tour-accent);
}

.tour-title {
  margin: 0 0 14px;
  font-family: var(--tour-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tour-fg);
}

.tour-body {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--tour-fg-muted);
}

/* --- dots: the shape of progress ---------------------------------------- */

.tour-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tour-fg-dim);
  transition: background var(--tour-dur) var(--tour-ease),
              transform var(--tour-dur) var(--tour-ease);
}
.tour-dot[data-tour-active='true'] {
  background: var(--tour-fg);
  transform: scale(1.15);
}

/* --- footer -------------------------------------------------------------- */

.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tour-actions { display: flex; gap: 10px; }

.tour-btn {
  font-family: inherit;
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms var(--tour-ease),
              border-color 150ms var(--tour-ease),
              opacity 150ms var(--tour-ease);
}
.tour-btn:focus-visible {
  outline: 2px solid var(--tour-accent);
  outline-offset: 3px;
}

.tour-skip {
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--tour-fg-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tour-skip:hover { color: var(--tour-fg); }

.tour-back {
  padding: 11px 22px;
  background: none;
  border: 1px solid var(--tour-border);
  color: var(--tour-fg-muted);
}
.tour-back:hover:not(:disabled) {
  color: var(--tour-fg);
  border-color: var(--tour-fg-muted);
}
.tour-back:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: transparent;
}

.tour-next {
  padding: 11px 26px;
  background: var(--tour-accent);
  border: 1px solid var(--tour-accent);
  color: var(--tour-accent-fg);
  font-weight: 600;
}
.tour-next:hover { filter: brightness(1.1); }

/* Plain :focus, not :focus-visible. The tour focuses this button
   programmatically on every step, and the ring is the point — it is the
   visible proof that Enter will advance right now. :focus-visible would
   suppress it precisely in the case that matters. */
.tour-next:focus {
  outline: 2px solid var(--tour-accent);
  outline-offset: 3px;
}

/* --- screen-reader-only live region ------------------------------------- */

.tour-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- small viewports: dock as a bottom sheet ----------------------------- */

@media (max-width: 640px) {
  .tour-card {
    left: 16px !important;
    right: 16px;
    top: auto !important;
    bottom: 16px;
    width: auto;
    padding: 24px 22px 20px;
  }
  .tour-caret { display: none; }
  .tour-title { font-size: 25px; }
  .tour-body { font-size: 16px; }

  /* Stack the footer: the escape hatch stays visible (principle 4) without
     wrapping into the buttons at narrow widths. */
  .tour-footer { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .tour-actions { justify-content: flex-end; }
  .tour-skip { text-align: center; }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .tour-scrim,
  .tour-ring,
  .tour-card,
  .tour-dot,
  .tour-btn {
    transition-duration: 1ms !important;
  }
  .tour-card { transform: none !important; }
}

/* ==========================================================================
   shsservice.com — design system
   Tokens: light on :root, dark under prefers-color-scheme (guarded) and
   [data-theme="dark"]. Spacing off the 4/8/12/16/24/32/48/64/96 scale.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #faf9f5; --bg-2: #f3f1ea; --bg-3: #ebe8de;
  --ink: #141413; --ink-2: #3d3c38; --mid: #66645b; --soft: #e6e3d8; --line: #d9d5c8;
  --accent: #1f5a63; --accent-ink: #17484f; --accent-fg: #ffffff; --accent-soft: #e2eef0; --accent-ring: rgba(31, 90, 99, .22);
  --band: #141413; --band-ink: #faf9f5; --band-mid: #b3b1a6; --band-soft: rgba(250, 249, 245, .14); --band-accent: #8cc3cb;
  --danger: #a3401f; --danger-soft: #f8e9e2; --ok: #2f6b4d; --ok-soft: #e4f0e9;
  --shadow-1: 0 1px 2px rgba(20, 20, 19, .05), 0 6px 20px rgba(20, 20, 19, .06);
  --shadow-2: 0 2px 4px rgba(20, 20, 19, .06), 0 18px 48px rgba(20, 20, 19, .14);
  --head-bg: rgba(250, 249, 245, .82);
  --r-outer: 20px; --r-card: 14px; --r-inner: 8px; --r-ctl: 10px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1); --dur: 200ms;
  --wrap: 1600px; --gutter: clamp(20px, 4vw, 56px);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* Fluid values are tuned to land ON the scale at the design width (1440px) and
     at every width above it: 6.67vw × 1440 = 96. A clamp that resolves to 115.2
     is off-scale everywhere it matters. */
  --sec: clamp(48px, 6.67vw, 96px);      /* section padding-block → 96 at ≥1440 */
  --col-gap: clamp(var(--sp-6), 6.67vw, var(--sp-9)); /* every two-column page grid */
  --pad-panel: clamp(var(--sp-5), 3.34vw, var(--sp-7)); /* form + result panels → 48 */
  /* 62ch rendered ~82 real characters per line (the ch unit — the width of "0" — runs
     ~30% wider than Inter's average glyph). 56ch lands the longest body line at ~74. */
  --measure: 56ch;
  /* tour tokens (design-bible guided tour) */
  --tour-bg: #1b1b19; --tour-border: #3a3934; --tour-fg: #f3f1ea; --tour-fg-muted: #b9b6ab; --tour-fg-dim: #5a5951;
  --tour-accent: #8cc3cb; --tour-accent-fg: #0f1f22; --tour-scrim: rgba(12, 12, 11, .62);
  --tour-serif: var(--serif); --tour-sans: var(--sans); --tour-mono: var(--mono); --tour-radius: 14px;
}
/* Below the desktop layout the clamps above interpolate to values nobody decided —
   at 768 they resolve to gutter 30.72, section 51.2, column gap 51.2, panel 25.65.
   Phones and tablets get discrete, on-scale values instead. Each step hands back to
   the clamp exactly where the two are equal (gutter at 800, section/col-gap at 960),
   so nothing jumps at the breakpoint. */
@media (max-width: 799px)  { :root { --gutter: 20px; } }   /* the documented phone edge inset */
@media (min-width: 600px) and (max-width: 799px) { :root { --gutter: var(--sp-6); } }
@media (max-width: 959px)  { :root { --sec: var(--sp-7); --col-gap: var(--sp-6); --pad-panel: var(--sp-5); } }
@media (min-width: 720px) and (max-width: 959px) { :root { --sec: var(--sp-8); --col-gap: var(--sp-7); --pad-panel: var(--sp-6); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131312; --bg-2: #1b1b19; --bg-3: #232320;
    --ink: #f3f1ea; --ink-2: #cfccc2; --mid: #a09e94; --soft: #2a2925; --line: #34332e;
    --accent: #8cc3cb; --accent-ink: #a4d2d9; --accent-fg: #0f1f22; --accent-soft: #1a2b2e; --accent-ring: rgba(140, 195, 203, .26);
    --band: #0c0c0b; --band-ink: #f3f1ea; --band-mid: #8f8d84; --band-soft: rgba(243, 241, 234, .12);
    --danger: #e08a6a; --danger-soft: #2c1c15; --ok: #8fc9a8; --ok-soft: #16251d;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .5);
    --head-bg: rgba(19, 19, 18, .8);
    --tour-bg: #f3f1ea; --tour-border: #d9d5c8; --tour-fg: #141413; --tour-fg-muted: #4a4943; --tour-fg-dim: #b3b1a6;
    --tour-accent: #1f5a63; --tour-accent-fg: #ffffff; --tour-scrim: rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131312; --bg-2: #1b1b19; --bg-3: #232320;
  --ink: #f3f1ea; --ink-2: #cfccc2; --mid: #a09e94; --soft: #2a2925; --line: #34332e;
  --accent: #8cc3cb; --accent-ink: #a4d2d9; --accent-fg: #0f1f22; --accent-soft: #1a2b2e; --accent-ring: rgba(140, 195, 203, .26);
  --band: #0c0c0b; --band-ink: #f3f1ea; --band-mid: #8f8d84; --band-soft: rgba(243, 241, 234, .12);
  --danger: #e08a6a; --danger-soft: #2c1c15; --ok: #8fc9a8; --ok-soft: #16251d;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .5);
  --head-bg: rgba(19, 19, 18, .8);
  --tour-bg: #f3f1ea; --tour-border: #d9d5c8; --tour-fg: #141413; --tour-fg-muted: #4a4943; --tour-fg-dim: #b3b1a6;
  --tour-accent: #1f5a63; --tour-accent-fg: #ffffff; --tour-scrim: rgba(0, 0, 0, .7);
}

/* text scale (aA): root rem cascade */
html { font-size: 100%; }
html[data-scale="lg"] { font-size: 113%; }
html[data-scale="xl"] { font-size: 128%; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); }
a:hover { text-decoration-color: currentColor; }
p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt, figure, blockquote { margin: 0; }
address { font-style: normal; }
kbd.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); font-family: var(--mono); font-size: .72em; color: var(--mid); line-height: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- type ---------- */
.h1 { font-family: var(--serif); font-size: clamp(2.5rem, 5.6vw, 4.75rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; font-variation-settings: 'opsz' 144; max-width: 16ch; }
.h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.h2 { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.08; font-variation-settings: 'opsz' 96; max-width: 22ch; }
.h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.15; max-width: 28ch; }
.h4 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.h5 { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.lead { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
/* Space belongs to what follows: a headline needs air before its own lead, or the
   serif descenders sit on the paragraph and the two read as one block. */
.h1 + .lead, .h1 + .meta, .h2 + .lead, .h2 + .meta { margin-top: var(--sp-5); }
/* The eyebrow belongs to the headline under it, so it must bind tighter (12px) than
   the headline binds its lead (24px). At 16/24 the group wobbled at 1.5×. */
/* align-items:flex-start, not center: on a phone the kicker wraps to two lines and a
   centred rule floats down beside the second line, detached from the words it leads.
   The rule is nudged to the optical centre of the FIRST line instead (.8em = half of
   the 1.6 line-height, less half the rule's own 1.5px). */
.kicker { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .75rem; font-weight: 600; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-3); text-wrap: balance; }
.kicker .rule { flex: 0 0 28px; height: 1.5px; margin-top: calc(.8em - .75px); background: var(--accent); }
/* .18em of tracking on 34 uppercase characters needs 320px; a phone offers 310 after the
   rule, so the longest kicker wrapped for the sake of 10px. Tracking belongs to the
   measure: tighter on a narrow column, looser on a wide one. */
@media (max-width: 480px) { .kicker { letter-spacing: .12em; } }
.meta { font-size: .875rem; color: var(--mid); }
.skip { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 200; padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--bg); border-radius: var(--r-ctl); transform: translateY(-200%); transition: transform var(--dur) var(--ease); text-decoration: none; }
.skip:focus { transform: none; }
.ic { flex: 0 0 auto; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec-alt { background: var(--bg-2); }
.sec-head { margin-bottom: clamp(var(--sp-6), 3.34vw, var(--sp-7)); }
.sec-head .h2 { margin-top: 0; }
.sec-note { margin: var(--sp-3) 0 0; font-size: .875rem; color: var(--mid); max-width: 48ch; }
.sec-cta { margin-top: var(--sp-8); }
main:focus { outline: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-5); border-radius: 999px; font-weight: 600; font-size: .9375rem; line-height: 1; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 1px 2px rgba(20, 20, 19, .12); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); background: var(--bg-2); }
.btn-invert { background: var(--band-ink); color: var(--band); }
.btn-invert:hover { background: #fff; }
.btn-lg { min-height: 52px; padding: 0 var(--sp-6); font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-4); font-size: .875rem; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.linkish { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .18em; }
.linkish:hover { text-decoration-color: currentColor; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--head-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.site-head[data-scrolled="true"] { border-bottom-color: var(--soft); }
.head-row { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand .logo, .brand-sm .logo { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); }
.nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-inner); font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover { background: var(--bg-2); color: var(--ink); }
.head-tools { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; min-width: 0; }
.tool { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-ctl); color: var(--ink-2); font-size: .875rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tool:hover { background: var(--bg-2); color: var(--ink); }
.tool-icon { width: 40px; padding: 0; justify-content: center; }
.tool-search { border-color: var(--line); background: var(--bg); padding-right: var(--sp-2); }
.tool-search .kbd { margin-left: var(--sp-1); }
.tool-lang { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; }
[data-theme-toggle] .ic { display: none; }
html:not([data-theme]) [data-theme-toggle] .ic[data-i="system"] { display: block; }
html[data-theme="light"] [data-theme-toggle] .ic[data-i="light"] { display: block; }
html[data-theme="dark"] [data-theme-toggle] .ic[data-i="dark"] { display: block; }
.menu-btn { display: none; }
@media (max-width: 1080px) { .tool-label, .tool-search .kbd { display: none; } .tool-search { width: 40px; padding: 0; justify-content: center; } }
@media (max-width: 880px) {
  .nav, .head-cta, .tool-lang, .head-tools [data-scale-toggle], .head-tools [data-theme-toggle] { display: none; }
  .menu-btn { display: inline-flex; }
  .head-row { min-height: 64px; }
}

/* ---------- mobile menu ---------- */
/* overscroll-behavior:contain — scrolling past the end of the menu must not hand the
   gesture to the page underneath (body{overflow:hidden} does not stop scroll chaining). */
.menu { position: fixed; inset: 0; z-index: 150; background: var(--bg); overflow: auto; overscroll-behavior: contain; animation: fade var(--dur) var(--ease); }
.menu-card { min-height: 100%; display: flex; flex-direction: column; padding: var(--sp-4) var(--gutter) max(var(--sp-6), calc(env(safe-area-inset-bottom) + var(--sp-4))); }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 48px; }
.menu-nav { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.menu-nav a { font-family: var(--serif); font-size: clamp(1.9rem, 7vw, 2.4rem); letter-spacing: -.02em; text-decoration: none; padding: var(--sp-3) 0; border-bottom: 1px solid var(--soft); }
.menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-6); }
.menu-tools .tool { border: 1px solid var(--line); justify-content: flex-start; min-height: 48px; }
.menu-cta { display: grid; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-6); }

/* ---------- hero ---------- */
/* padding-bottom is --sec, not a smaller hero value: the gap from the hero to the
   first section has to equal every other section-to-section gap (was 179 vs 230). */
.hero { padding-top: var(--sec); padding-bottom: var(--sec); }
.hero-text { max-width: 60rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
/* On a phone the two content-width buttons stacked to 248.5 and 227.7px — a ragged
   pair under a full-bleed headline. Full width makes them one block and puts both in
   the thumb's reach, the same shape as the menu CTA and the sticky bar. */
@media (max-width: 560px) { .hero-cta { display: grid; grid-template-columns: 1fr; } .hero-cta .btn { width: 100%; } }
.hero-media { margin-top: clamp(var(--sp-6), 5vw, var(--sp-8)); border-radius: var(--r-outer); overflow: hidden; box-shadow: var(--shadow-2); background: var(--bg-3); }
.hero-media .pic img { width: 100%; height: auto; aspect-ratio: 2.02 / 1; object-fit: cover; background-size: cover; }
@media (max-width: 720px) { .hero-media .pic img { aspect-ratio: 4 / 3; } .hero-media { border-radius: var(--r-card); } }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); padding-top: var(--sp-5); border-top: 1px solid var(--soft); }
.proof-item { display: grid; gap: var(--sp-1); padding-right: var(--sp-4); }
.proof-v { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -.02em; line-height: 1.1; font-variation-settings: 'opsz' 72; }
.proof-l { font-size: .9375rem; color: var(--mid); line-height: 1.45; }
/* One shared two-column grid on a phone, not three independent ones: with a grid per
   item the value column was sized per row and the three labels started at x=121/136/176
   — a 54px rag down the middle of the strip. subgrid pins them to one column edge. */
@media (max-width: 640px) {
  .proof { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6) var(--sp-4); }
  .proof-item { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-right: 0; }
}

/* ---------- cards ---------- */
/* Outer ≥ 2× inner. The largest gap inside a card is icon→title (16), so the gutter
   between cards is 32. At 24/20 the row measured 1.2× and read as one strip. */
.cards { display: grid; gap: var(--sp-6); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-4 { grid-template-columns: 1fr; } }
/* Two levels inside a card: the title binds its paragraph at 8, the icon separates
   from that pair at 16. Padding 32 ≥ the largest inner gap. */
.card { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-6); background: var(--bg); border: 1px solid var(--soft); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line); }
.card-plain { background: var(--bg-2); box-shadow: none; }
/* Radius from the token set and smaller than the 14px card that holds it — a child
   rounder than its parent drifts visibly apart at the curve. */
.card-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent); margin-bottom: var(--sp-2); }
.card p { margin: 0; color: var(--ink-2); font-size: .9375rem; }

/* ---------- feature (apartments) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: center; }
.feature-text .h5 { margin-top: var(--sp-6); margin-bottom: var(--sp-4); }
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); }
.checks li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: .9375rem; }
.checks .ic { color: var(--accent); margin-top: .2em; }
.feature-text .sec-cta { margin-top: var(--sp-7); }
.feature-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: end; }
.feature-media .pic { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-2); background: var(--bg-3); }
.feature-media .pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background-size: cover; }
.feature-media .media-b { transform: translateY(var(--sp-8)); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature-media { margin-top: var(--sp-5); } .feature-media .media-b { transform: translateY(var(--sp-6)); } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }

/* ---------- steps (band) ---------- */
.sec-band { background: var(--band); color: var(--band-ink); }
.sec-band .kicker { color: var(--band-accent); }
.sec-band .kicker .rule { background: var(--band-accent); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); counter-reset: step; }
/* align-content:start — without it the auto rows stretch to the tallest step in the
   row, so the two short steps pushed their title 9px and their body 18px lower than
   the middle one and the three columns stopped lining up. Same 16/8 rhythm as .card. */
.step { display: grid; align-content: start; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--band-soft); }
.step-n { font-family: var(--serif); font-size: 2.5rem; letter-spacing: -.03em; color: var(--band-mid); line-height: 1; margin-bottom: var(--sp-2); }
.step p { margin: 0; color: var(--band-mid); }
.step .h4 { color: var(--band-ink); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---------- location ---------- */
.location { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); align-items: start; }
.facts { display: grid; gap: 0; margin-top: var(--sp-6); border-top: 1px solid var(--soft); }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--soft); font-size: .9375rem; }
.fact dt { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; min-width: 0; }
.fact dt .ic { color: var(--accent); }
.fact dd { color: var(--ink-2); }
.address-card { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-5); background: var(--bg-2); border-radius: var(--r-card); }
.address-card .cell { margin: calc(var(--sp-3) * -1) calc(var(--sp-4) * -1); }
.location-media { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--sp-4); }
.location-media .pic { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1); background: var(--bg-3); }
.location-media .pic img { width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.location-media .loc-a { grid-column: 1 / -1; }
.location-media .loc-a img { aspect-ratio: 16 / 10; }
.location-media .loc-b img { aspect-ratio: 4 / 5; }
.location-media .loc-c img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .location { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .fact { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
/* flex column + margin-top:auto on the attribution: the row keeps equal card heights,
   but a short quote's spare room falls between the quote and its author instead of
   collecting as a hole under it (the second card measured 61% empty). Stars stay
   top-aligned across the row, captions bottom-aligned. */
.quote { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); background: var(--bg); border: 1px solid var(--soft); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.quote blockquote p { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em; margin: 0; max-width: 40ch; }
.quote figcaption { margin-top: auto; padding-top: var(--sp-2); font-size: .875rem; color: var(--mid); }
.stars { display: inline-flex; gap: var(--sp-1); color: var(--ink); }
/* One review runs about 110 words, another runs two. Left in equal cells they read as a
   wall of serif next to an empty box, so each end of the range gets its own treatment:
   the long one spans two columns and steps its type down to a normal reading measure,
   the short one keeps the display size and centres in the room its neighbour dictates. */
.quote--wide { grid-column: span 2; }
.quote--wide blockquote p { font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); line-height: 1.55; letter-spacing: 0; max-width: 62ch; }
/* Two words stretched to a 110-word neighbour's height is 90% air, and centring the
   text in it only centres the emptiness. Sizing the card to its own content leaves the
   white space in the grid, where it reads as layout rather than as a half-loaded card. */
.quote--brief { align-self: start; }
.quote--brief blockquote p { font-size: clamp(1.35rem, 2vw, 1.75rem); }
@media (max-width: 1100px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } .quote--wide { grid-column: auto; } }

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.faq-grid .sec-head { margin-bottom: 0; position: sticky; top: 96px; }
.faq { border-top: 1px solid var(--soft); }
.faq-item { border-bottom: 1px solid var(--soft); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .h4 { font-weight: 600; font-size: 1.1875rem; min-width: 0; }
.faq-item summary .ic { color: var(--mid); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-a { padding: 0 0 var(--sp-5); }
.faq-a p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .sec-head { position: static; margin-bottom: var(--sp-5); } }

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.aside { margin-top: var(--sp-7); padding: var(--sp-5); border: 1px solid var(--soft); border-radius: var(--r-card); background: var(--bg); }
.aside .h4 { margin-bottom: var(--sp-2); }
.aside p { font-size: .9375rem; color: var(--ink-2); }
/* Pull the copy cells back onto the aside's own text edge — with the cell's 16px
   inline padding the labels sat 17px right of the heading and the prose above them. */
.aside .cells { margin-inline: calc(var(--sp-4) * -1); }
.form-panel { position: relative; }
.form { display: grid; gap: var(--sp-5); padding: var(--pad-panel); background: var(--bg); border: 1px solid var(--soft); border-radius: var(--r-outer); box-shadow: var(--shadow-1); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
/* align-content:start — otherwise a field whose row-mate shows an error message
   stretches, and the two inputs in a row end up different heights. */
.field { display: grid; align-content: start; gap: var(--sp-2); }
.field label { font-size: .875rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--mid); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--mid); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.field textarea { resize: none; overflow-y: hidden; line-height: 1.5; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--danger); }
.err { margin: 0; font-size: .8125rem; color: var(--danger); }
.hint { margin: 0; font-size: .8125rem; color: var(--mid); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
.consent { margin: 0; font-size: .8125rem; color: var(--mid); max-width: var(--measure); }
.keyhint { display: flex; align-items: center; gap: var(--sp-2); margin: 0; max-width: none; font-size: .8125rem; color: var(--mid); }
.form-result { padding: var(--pad-panel); border-radius: var(--r-outer); border: 1px solid var(--soft); background: var(--bg); box-shadow: var(--shadow-1); display: grid; gap: var(--sp-4); animation: rise var(--dur) var(--ease); }
.form-result:focus { outline: none; }
.result-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; }
.form-result[data-kind="success"] .result-ic { background: var(--ok-soft); color: var(--ok); }
.form-result[data-kind="error"] .result-ic { background: var(--danger-soft); color: var(--danger); }
.form-result .h3 { max-width: 24ch; }
.form-result .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.result-ref { font-family: var(--mono); font-size: .8125rem; color: var(--mid); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } .aside { margin-top: var(--sp-6); } }

/* ---------- copy cells ---------- */
.cells { display: grid; gap: var(--sp-2); }
/* 24px gutter, not 16: at 16 the space between the cards equalled the padding inside
   them and the five read as one continuous strip. */
.cells-row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
/* align-content:start — without it the auto rows stretch to the tallest cell in the
   row and the label/value gap differs from cell to cell. */
.cell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k ic' 'v ic'; align-items: start; align-content: start; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-inner); border: 1px solid transparent; cursor: copy; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cell:hover { background: var(--bg-2); border-color: var(--soft); }
.cell.flash { animation: flash 700ms var(--ease); }
.cell-k { grid-area: k; font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--mid); }
.cell-v { grid-area: v; font-size: .9375rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.cell-v a { cursor: pointer; }
.cell-copy { grid-area: ic; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px 0 0; border-radius: var(--r-inner); color: var(--mid); opacity: 0; cursor: copy; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.cell:hover .cell-copy, .cell:focus-within .cell-copy, .cell-copy:focus-visible { opacity: 1; }
.cell-copy:hover { background: var(--bg-3); color: var(--ink); }
.doc-rows .cell-copy { margin: 0 0 0 var(--sp-2); vertical-align: middle; }
/* These are top-level cards, so they carry --r-card like every other card on the
   site; --r-inner (8px) made the contact row a different shape family. */
.cells-row .cell { padding: var(--sp-4); background: var(--bg); border-color: var(--soft); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.cells-row .cell:hover { border-color: var(--line); }
.copy-hint { margin: var(--sp-3) 0 0; font-size: .8125rem; color: var(--mid); }
.pill { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; padding: var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .8125rem; font-weight: 500; opacity: 0; transform: translate(-50%, -140%) scale(.96); transition: opacity 160ms var(--ease), transform 160ms var(--ease); white-space: nowrap; }
.pill.show { opacity: 1; transform: translate(-50%, -160%) scale(1); }
.pill.center { left: 50% !important; top: auto !important; bottom: max(var(--sp-6), calc(env(safe-area-inset-bottom) + var(--sp-5))); transform: translate(-50%, 8px) scale(.96); }
.pill.center.show { transform: translate(-50%, 0) scale(1); }
/* Clear the sticky bar, or the "Copied" pill lands underneath it. */
body.has-mobile-bar .pill.center { bottom: calc(84px + max(var(--sp-6), calc(env(safe-area-inset-bottom) + var(--sp-5)))); }

/* ---------- page hero (contact/doc) ---------- */
.page-hero { padding-top: var(--sec); padding-bottom: var(--sec); }
/* Doc pages keep the plain .wrap on purpose: an extra centred prose box gave them a
   different left edge from the header, footer and every other page, and left the text
   sitting 120px off optical centre. The measure is carried by the content instead. */
.prose .h3 { margin: var(--sp-7) 0 var(--sp-3); }
.prose p { color: var(--ink-2); }
.prose .doc-rows, .prose .credits, .prose .copy-hint { max-width: var(--measure); }
.doc-rows { display: grid; gap: var(--sp-1); margin: 0; }
/* No inline padding: the label must start on the prose left edge, and a negative
   margin would push the hover surface into the page gutter on narrow viewports. */
/* One column: the copy button lives inside the <dd> here, so .cell's second track is
   empty and only spent 12px of gap at the right of every value. */
.doc-rows .cell { padding: var(--sp-2) 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'k' 'v'; }
.doc-rows dt { grid-area: k; }
.doc-rows dd { grid-area: v; }
.credits { display: grid; gap: var(--sp-2); font-size: .9375rem; color: var(--ink-2); }
.credits li { padding-left: var(--sp-4); border-left: 2px solid var(--soft); }
.page-404 .nf-alt { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--soft); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--soft); padding: var(--sp-8) 0 max(var(--sp-7), calc(env(safe-area-inset-bottom) + var(--sp-6))); background: var(--bg); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: var(--sp-7) var(--sp-6); }
.foot-brand p { font-size: .9375rem; color: var(--ink-2); margin: var(--sp-4) 0 0; max-width: 30ch; }
.foot-made { color: var(--mid); }
/* Full ink so a column heading outranks the uppercase copy-cell labels under it —
   at the same size, weight and tracking the two levels read as one. */
.foot-h { font-size: .75rem; font-weight: 600; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; color: var(--ink); margin-bottom: var(--sp-4); }
.foot-links { display: grid; gap: var(--sp-2); }
.foot-links a, .foot-links button { font-size: .9375rem; text-decoration: none; color: var(--ink-2); }
.foot-links a:hover, .foot-links button:hover { color: var(--ink); text-decoration: underline; }
.foot-cells .cell { padding: var(--sp-2) var(--sp-3); margin-left: calc(var(--sp-3) * -1); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--soft); font-size: .8125rem; color: var(--mid); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
body.has-mobile-bar .site-foot { padding-bottom: calc(var(--sp-7) + 84px + env(safe-area-inset-bottom)); }

/* ---------- mobile bar ---------- */
/* padding-inline is the page gutter so the bar's buttons sit on the same left edge as
   the content above them (they were 4px in). Bottom keeps ≥24px of breathing room and
   clears the home indicator on notched devices. */
/* Opaque, unlike the header: a translucent bar sits in the reading zone, and body copy
   showing through it (a line of text visible between and below the two buttons) reads
   as a rendering fault, not as frosted glass. */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: var(--sp-3) var(--gutter) max(var(--sp-5), calc(env(safe-area-inset-bottom) + var(--sp-3))); background: var(--bg); border-top: 1px solid var(--soft); box-shadow: 0 -12px 24px -18px rgba(20, 20, 19, .5); grid-template-columns: 1fr 1fr; gap: var(--sp-3); transform: translateY(0); transition: transform var(--dur) var(--ease); }
.mobile-bar[data-hidden="true"] { transform: translateY(110%); }
@media (max-width: 880px) { body.page-home .mobile-bar { display: grid; } }

/* ---------- palette ---------- */
.palette { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; padding: min(14vh, 140px) var(--sp-4) var(--sp-4); }
.palette-scrim { position: absolute; inset: 0; background: rgba(12, 12, 11, .45); animation: fade var(--dur) var(--ease); }
.palette-card { position: relative; width: min(640px, 100%); max-height: min(70vh, 640px); display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; animation: rise var(--dur) var(--ease); }
.palette-input { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--soft); color: var(--mid); }
.palette-input input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: var(--sp-2) 0; font-size: 1.0625rem; color: var(--ink); outline: none; }
.palette-input input::placeholder { color: var(--mid); }
.palette-list { overflow: auto; padding: var(--sp-2); overscroll-behavior: contain; }
.palette-group { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.palette-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); min-height: 44px; border-radius: var(--r-inner); text-align: left; color: var(--ink); cursor: pointer; }
.palette-item .ic { color: var(--mid); }
.palette-item .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.palette-item .hint { flex: 0 0 auto; font-size: .8125rem; color: var(--mid); font-family: var(--mono); }
.palette-item[aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }
.palette-item[aria-selected="true"] .ic { color: var(--accent); }
.palette-empty { padding: var(--sp-6) var(--sp-4); color: var(--mid); text-align: center; font-size: .9375rem; }
.palette-foot { display: flex; gap: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--soft); font-size: .75rem; color: var(--mid); }
.palette-foot span { display: inline-flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 560px) { .palette { padding: var(--sp-3); align-items: start; } .palette-card { max-height: calc(100vh - var(--sp-6)); } .palette-foot { display: none; } }

/* ---------- dialog ---------- */
.dialog { width: min(520px, calc(100vw - 32px)); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-2); }
.dialog::backdrop { background: rgba(12, 12, 11, .45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.dialog-head h2 { font-family: var(--serif); font-size: 1.5rem; }
.keys { display: grid; gap: var(--sp-3); }
.keys > div { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4); align-items: center; font-size: .9375rem; }
.keys .kbd { font-size: .8125rem; height: 1.9em; }

/* ---------- consent ---------- */
/* Named .consent-bar, not .consent. The inquiry form already had a `p.consent`
   (the line above the submit button), and a second bare `.consent` rule declared
   later in the file won it: the form's paragraph inherited position:fixed and
   z-index:130 and floated over the page on every route. The banner is addressed
   by [data-consent] in JS, so only the class had to move. */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; padding: var(--sp-4) var(--gutter) max(var(--sp-5), calc(env(safe-area-inset-bottom) + var(--sp-4))); pointer-events: none; }
.consent-card { pointer-events: auto; width: 100%; max-width: 980px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.consent-bar.in .consent-card { transform: none; opacity: 1; }
.consent-text { flex: 1 1 380px; min-width: 0; }
.consent-h { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.consent-text p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
/* One button. It trails the text on a wide card and, once the card wraps, sits
   full width on its own line - at the largest text scale a right-hugging pill
   read as if it had escaped the card. */
.consent-actions { display: flex; gap: var(--sp-3); flex: 0 0 auto; justify-content: flex-end; }
.consent-actions .btn { min-width: 148px; }
@media (max-width: 860px) {
  .consent-card { padding: var(--sp-5); }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1 1 auto; min-width: 0; }
}
body.has-mobile-bar .consent-bar { bottom: 84px; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-reveal .reveal { opacity: 1; transform: none; transition: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- touch ---------- */
/* A finger needs 44px; a mouse needs 1. Everything below is scoped to coarse pointers
   so the desktop composition is untouched. The offenders measured at 390px were the
   footer link lists (19px), the copy-cell value links (19px), the header tools (40px),
   .btn-sm (36px) and the brand (22px — the logo's own height was the hit box). */
.brand { min-height: 44px; }                 /* free everywhere: the head row is 64/72 tall */
.hint-touch { display: none; }
@media (pointer: coarse) {
  .head-tools .tool { min-height: 44px; }
  .head-tools .tool-icon, .head-tools .tool-search { width: 44px; }
  .btn-sm { min-height: 44px; }
  .foot-links { gap: var(--sp-1); }
  .foot-links a, .foot-links button { display: flex; align-items: center; min-height: 44px; }
  /* The negative block margin gives the link a 44px hit box without changing the line
     it sits on — a taller link would put a different label→value gap in the cells that
     have one, and the whole point of .cell is that every cell measures the same. */
  .cell-v a { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc((44px - 1.5em) / -2); }
  .menu-tools .tool { min-height: 52px; }
  /* Links inside a sentence are exempt from the 44px rule (they cannot be boxed without
     wrecking the line), but padding-block still grows the hit area of an inline box
     without touching line layout. The credits list also opens up so the taller boxes of
     two neighbouring rows cannot overlap. */
  .prose a, .consent a, .consent-bar a, .faq-a a { padding-block: var(--sp-2); }
  .credits { gap: var(--sp-3); }
  .credits li { line-height: 1.9; }
}
@media (hover: none) {
  /* No hover means the copy affordance would never appear before the tap. Show it, and
     give it a finger-sized box (the icon stays 16px and optically in the same place). */
  .cell-copy { opacity: .75; width: 44px; height: 44px; margin: -12px -14px 0 0; }
  /* The doc-row button sits inline after the value, so seven always-visible buttons
     land at seven different x positions. Push them to one right edge, and cancel the
     44px box with a negative block margin so the rows keep their height. */
  .doc-rows .cell-v { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .doc-rows .cell-copy { margin: calc((44px - 1.5em) / -2) 0; flex: 0 0 auto; }
  .cell:active .cell-copy { opacity: 1; }
  /* "Klicken" is a mouse word, and Cmd+Enter is a key this device does not have. */
  .hint-fine { display: none; }
  .hint-touch { display: inline; }
  .keyhint { display: none; }
}

/* ---------- print ---------- */
@media print {
  .site-head, .mobile-bar, .palette, .dialog, .pill, .menu, .hero-cta, .sec-cta, .keyhint { display: none !important; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 24px; }
}