/* Hallmark · genre: editorial · macrostructure: Bento Grid · theme: custom · enrichment: real photo cut-out + CSS sun disc · nav: N2 Floating chip · footer: Ft5 Statement
 * vibe: "sunlit sand, palm green, personal" · paper: oklch(97.2% 0.011 85) · accent: oklch(47% 0.11 150) palm green
 * display: Bricolage Grotesque · body: Geist · axes: light / grotesk-sans / chromatic-other (green)
 * Differs from Val's pages (../site: Split Studio, dark slate hero, DM Serif Display, brokerage red) on structure,
 * display style and accent hue. The agency's red stays only in its logo.
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5
 */
:root {
  /* paper and surfaces: warm sand */
  --color-paper:        oklch(97.2% 0.011 85);
  --color-paper-2:      oklch(94.4% 0.018 84);
  --color-raised:       oklch(99.2% 0.004 85);
  --color-sage:         oklch(93.6% 0.028 142);
  --color-sage-2:       oklch(88.5% 0.042 142);
  --color-sun:          oklch(95.5% 0.035 88);
  --color-rule:         oklch(85.5% 0.016 85);
  --color-rule-2:       oklch(90.5% 0.012 85);

  /* ink: deep green-black */
  --color-ink:          oklch(23% 0.022 155);
  --color-ink-2:        oklch(35% 0.018 150);
  --color-muted:        oklch(46% 0.014 120);

  /* dark tiles and the closing panel */
  --color-pine:         oklch(29% 0.045 158);
  --color-pine-2:       oklch(36% 0.05 158);
  --color-on-pine:      oklch(95.5% 0.012 95);
  --color-on-pine-2:    oklch(83% 0.03 140);

  /* accent: palm green, kept to highlights, links, progress and focus */
  --color-accent:       oklch(47% 0.11 150);
  --color-accent-wash:  oklch(88% 0.07 138);
  --color-focus:        oklch(52% 0.17 150);
  --color-focus-on-pine: oklch(86% 0.12 130);
  --color-error:        oklch(48% 0.17 28);
  --color-error-wash:   oklch(95.5% 0.025 28);
  --color-ok:           oklch(45% 0.11 150);
  --color-ok-wash:      oklch(92% 0.05 145);
  --color-shadow:       oklch(25% 0.04 155 / 0.38);

  /* type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.4375rem;
  --text-2xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.125rem);
  --text-3xl: clamp(1.9rem, 1.35rem + 2.3vw, 2.875rem);
  --text-display: clamp(2.45rem, 1.55rem + 3.9vw, 4.6rem);

  /* space: 4 pt */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --tile-pad: clamp(20px, 3vw, 40px);
  --page-max: 1240px;

  /* shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-reveal: 520ms;
}

/* Bricolage Grotesque and Geist (SIL Open Font License), variable, latin subset, served from this site. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque.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: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/geist.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; }

/* Jacqueline Perez landing pages: a bento of soft tiles on warm sand. Tokens in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--space-sm); }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--color-ink); margin: 0; line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -120px; z-index: 50; background: var(--color-pine); color: var(--color-on-pine); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-sm); }
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.preview-banner { margin: 0; padding: var(--space-2xs) var(--gutter); background: var(--color-sun); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-align: center; border-bottom: var(--rule-hair) solid var(--color-rule); }

/* ---------- buttons: solid pine, outlined, and two for the dark panel ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 48px; padding: 0 var(--space-md); border: 1.5px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-base)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--solid { background: var(--color-pine); color: var(--color-on-pine); }
.btn--solid:hover { background: var(--color-pine-2); }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--line:hover { border-color: var(--color-ink-2); background: var(--color-raised); }
.btn--paper { background: var(--color-on-pine); color: var(--color-pine); }
.btn--paper:hover { background: var(--color-sun); }
.btn--line-light { background: transparent; color: var(--color-on-pine); border-color: var(--color-on-pine-2); }
.btn--line-light:hover { border-color: var(--color-on-pine); background: var(--color-pine-2); }
.btn.is-loading { pointer-events: none; }
.btn .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; display: none; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- top: a small chip that stays in the corner (N2) ---------- */
.bar { position: sticky; top: var(--space-xs); z-index: 30; width: min(100% - 2 * var(--gutter), var(--page-max)); margin: var(--space-xs) auto 0; pointer-events: none; }
.bar__pill { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2xs); max-width: 100%; padding: var(--space-3xs) var(--space-3xs) var(--space-3xs) var(--space-sm); background: var(--color-raised); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: 0 12px 30px -20px var(--color-shadow); }
.bar__logo { display: block; flex: none; }
.bar__logo img { height: 30px; width: auto; }
.bar__lang { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; padding: var(--space-2xs) 2px; white-space: nowrap; }
.bar__lang:hover { color: var(--color-accent); text-decoration: underline; }
.bar__call { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-width: 44px; min-height: 44px; border-radius: var(--radius-pill); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.bar__call svg { width: 18px; height: 18px; }
.bar__call:hover { color: var(--color-accent); }
.bar__num { display: none; }
.bar__lang-long { display: none; }
@media (min-width: 400px) { .bar__lang-long { display: inline; } .bar__lang-short { display: none; } }
@media (max-width: 400px) { .btn { padding: 0 var(--space-sm); font-size: var(--text-sm); } }
.bar__start { min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
@media (min-width: 420px) { .bar__pill { gap: var(--space-sm); } .bar__logo img { height: 34px; } }
@media (min-width: 720px) { .bar__num { display: inline; } .bar__call { padding: 0 var(--space-2xs); } }

/* ---------- tiles ---------- */
.tile { position: relative; min-width: 0; border-radius: var(--radius-lg); padding: var(--tile-pad); background: var(--color-paper-2); }
.tile > :last-child { margin-bottom: 0; }

/* ---------- first screen: headline + form left, Jacqueline + call right ---------- */
.hero { padding: var(--space-sm) 0 var(--space-md); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.tile--intro { padding-bottom: calc(var(--tile-pad) + 4px); }
.who { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.who__face { flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--color-sage-2); }
.who__face img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 8%; transform: scale(2); transform-origin: 58% 18%; }
.who__text { margin: 0; display: grid; line-height: 1.3; }
.who__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.who__role { font-size: var(--text-sm); color: var(--color-muted); }
.intro__place { display: none; }
.hero h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.025em; font-weight: 720; max-width: 14ch; margin-bottom: var(--space-md); }
/* the highlighted words get a drawn marker band under the x-height */
.hero h1 .mark { background: linear-gradient(transparent 56%, var(--color-accent-wash) 56% 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; }
.intro__lede { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; margin: 0; }

.tile--portrait { display: none; margin: 0; padding: 0; overflow: hidden; background: var(--color-sage-2); }
/* a sand-coloured sun sits behind her, drawn in CSS */
.tile--portrait::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; left: 14%; top: 7%; border-radius: 50%; background: var(--color-sun); }
.tile--portrait img { position: relative; width: 100%; margin-top: auto; }
.tile--portrait figcaption { position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); display: grid; gap: 2px; padding: var(--space-sm) var(--space-md); background: var(--color-raised); border-radius: var(--radius-md); box-shadow: 0 14px 30px -22px var(--color-shadow); }
.portrait__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.15; }
.portrait__role { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.portrait__note { font-size: var(--text-xs); color: var(--color-muted); }

.tile--form { background: var(--color-raised); border: var(--rule-hair) solid var(--color-rule-2); box-shadow: 0 24px 50px -40px var(--color-shadow); scroll-margin-top: 80px; }
.tile--call { background: var(--color-pine); color: var(--color-on-pine); display: grid; align-content: center; gap: var(--space-2xs); }
.call__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; margin: 0; }
.call__body { color: var(--color-on-pine-2); margin: 0; }
.call__num { display: inline-flex; align-items: center; gap: var(--space-2xs); width: fit-content; min-height: 44px; color: var(--color-on-pine); font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.call__num svg { width: 26px; height: 26px; }
.call__num:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tile--call :focus-visible, .tile--office :focus-visible, .foot :focus-visible { outline-color: var(--color-focus-on-pine); }

@media (min-width: 960px) {
  .hero { padding: var(--space-md) 0 var(--space-lg); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "intro portrait" "form portrait" "form call"; gap: var(--space-md); }
  .tile--intro { grid-area: intro; padding: var(--space-xl) var(--space-xl) var(--space-lg); }
  .tile--portrait { grid-area: portrait; display: flex; flex-direction: column; }
  .tile--form { grid-area: form; padding: var(--space-lg) var(--space-xl) var(--space-xl); }
  .tile--call { grid-area: call; }
  .who { display: none; }
  .intro__place { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin: 0 0 var(--space-md); }
  .intro__place::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--color-accent); }
}

/* ---------- the form ---------- */
.lead { position: relative; }
.lead__progress { display: none; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.js .lead__progress { display: flex; }
.lead__bar { display: flex; gap: var(--space-3xs); }
.lead__bar span { width: 28px; height: 6px; border-radius: var(--radius-pill); background: var(--color-rule-2); transition: background-color var(--dur-base) var(--ease-out); }
.lead__bar span.is-on { background: var(--color-accent); }
.step { border: 0; margin: 0 0 var(--space-lg); padding: 0; min-width: 0; }
.js .step { display: none; margin-bottom: 0; }
.js .step.is-active { display: block; animation: stepIn var(--dur-base) var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.12; padding: 0; margin-bottom: var(--space-md); }
.step__title:focus { outline: none; }
.step__hint { margin: calc(var(--space-xs) * -1) 0 var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }

.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
@media (min-width: 560px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile-choice { position: relative; }
.tile-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-choice label { display: grid; gap: 2px; min-height: 76px; height: 100%; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); border: 1.5px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-raised); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.tile-choice__name { font-weight: 650; font-size: var(--text-lg); line-height: 1.25; }
.tile-choice__note { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.tile-choice label:hover { border-color: var(--color-ink-2); }
.tile-choice input:checked + label { border-color: var(--color-accent); background: var(--color-sage); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tile-choice input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.field { margin-bottom: var(--space-md); min-width: 0; }
.field label, .field .label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); color: var(--color-ink); }
.field .opt { font-weight: 400; color: var(--color-muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea { width: 100%; min-height: 50px; padding: 0 var(--space-sm); border: 1.5px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-raised); color: var(--color-ink); font: 400 var(--text-base)/1.4 var(--font-body); transition: border-color var(--dur-fast) var(--ease-out); }
.field textarea { padding: var(--space-xs) var(--space-sm); min-height: 96px; resize: vertical; }
.field select { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-accent); outline-offset: 1px; }
.field input[disabled], .field select[disabled] { opacity: 0.5; }
.field.has-error input, .field.has-error select { border-color: var(--color-error); background: var(--color-error-wash); }
.field__error { display: none; color: var(--color-error); font-size: var(--text-sm); font-weight: 600; margin: var(--space-2xs) 0 0; }
.field.has-error .field__error { display: block; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-sm); }
@media (min-width: 560px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 var(--space-sm); border: 1.5px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-raised); font-weight: 500; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.chip label:hover { border-color: var(--color-ink-2); }
.chip input:checked + label { border-color: var(--color-accent); background: var(--color-sage); font-weight: 600; }
.chip input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); align-items: start; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-paper); }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-accent); }
.consent label { font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-2); }

.lead__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); }
html:not(.js) [data-next], html:not(.js) [data-back] { display: none; }
.lead__fine { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-muted); text-align: right; }
.lead__alert { display: none; margin: var(--space-sm) 0 0; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-error-wash); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.lead__alert.is-on { display: block; }
.lead__alert a { color: var(--color-error); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__error[data-error-for] { margin-top: var(--space-xs); }

.done { display: none; }
.lead.is-done form { display: none; }
.lead.is-done .done { display: block; animation: stepIn var(--dur-slow) var(--ease-out); }
.done:focus { outline: none; }
.done__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--color-ok-wash); color: var(--color-ok); display: grid; place-items: center; margin-bottom: var(--space-sm); }
.done__mark svg { width: 28px; height: 28px; }
.done h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.done p { color: var(--color-ink-2); }

/* ---------- bento sections ---------- */
.band { padding: var(--space-sm) 0; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
@media (min-width: 960px) {
  .band { padding: var(--space-sm) 0; }
  .bento { gap: var(--space-md); }
  .bento--a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "sell steps" "sell areas"; }
  .bento--b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "about buy" "office buy"; }
  .tile--sell { grid-area: sell; }
  .tile--steps { grid-area: steps; }
  .tile--areas { grid-area: areas; }
  .tile--buy { grid-area: buy; }
  .tile--about { grid-area: about; }
  .tile--office { grid-area: office; }
  .tile--sell, .tile--buy { padding: var(--space-xl); }
}
.tile p { max-width: 60ch; }
.tile .btn { margin-top: var(--space-xs); }
.note { margin: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-muted); max-width: 52ch; }

.tile--sell h2, .tile--buy h2 { font-size: var(--text-3xl); max-width: 16ch; }
.list-label { margin: var(--space-md) 0 var(--space-xs); font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); }
.report { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
@media (min-width: 560px) { .report { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report li { display: grid; gap: 2px; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-raised); }
.report strong { font-weight: 650; }
.report span { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }

.tile--steps { background: var(--color-sage); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-md); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-sm); }
.steps li::before { content: counter(step); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--color-raised); color: var(--color-accent); font-family: var(--font-display); font-weight: 750; font-size: var(--text-lg); }
.steps h3 { font-size: var(--text-lg); margin: 0 0 2px; align-self: center; }
.steps p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

.tile--areas { background: var(--color-raised); border: var(--rule-hair) solid var(--color-rule-2); }
.tile--areas h2 { font-size: var(--text-lg); color: var(--color-muted); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.towns li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-sage); font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.01em; white-space: nowrap; }

/* the buy tile is the tall one in its row: its points spread out to fill it instead of leaving a gap */
.tile--buy { background: var(--color-sage); display: flex; flex-direction: column; align-items: flex-start; }
.tile--buy .points { flex: 1; align-content: space-evenly; }
.points { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: var(--space-sm); }
.points li { display: grid; gap: 2px; padding-left: var(--space-md); position: relative; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 3px; background: var(--color-accent); }
.points strong { font-weight: 650; }
.points span { font-size: var(--text-sm); color: var(--color-ink-2); }

.tile--about h2 { font-size: var(--text-3xl); }
.facts { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.facts li { display: grid; gap: 2px; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-raised); }
.facts__big { font-family: var(--font-display); font-weight: 750; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-accent); }
.facts__small { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.35; }

.tile--office { background: var(--color-pine); color: var(--color-on-pine); }
.tile--office h2 { color: var(--color-on-pine); font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.tile--office address { color: var(--color-on-pine-2); }
.office__map { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-pine); font-weight: 600; }
.tile--office dl { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-xs); }
.tile--office dt { font-size: var(--text-xs); color: var(--color-on-pine-2); }
.tile--office dd { margin: 0; }
.tile--office dd a { color: var(--color-on-pine); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tile--office dd a:hover { text-decoration: underline; }

/* video of the agent (only on the page once content.VIDEO is set) */
.film { margin: var(--space-md) 0 0; }
.film__frame { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--color-pine); }
.film video { display: block; width: 100%; height: auto; }
.film--upright .film__frame { max-width: 320px; }
.film__play { position: absolute; inset: auto var(--space-sm) var(--space-sm) var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-raised); color: var(--color-ink); font: 600 var(--text-base)/1 var(--font-body); cursor: pointer; width: fit-content; }
.film__play:hover { background: var(--color-sun); }
.film__icon svg { width: 16px; height: 16px; }
.film figcaption { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- calculators ---------- */
.calc { padding: var(--space-xl) 0 var(--space-sm); }
.calc__head { margin-bottom: var(--space-md); }
.calc__head h2 { font-size: var(--text-3xl); }
.calc__head p { color: var(--color-ink-2); max-width: 60ch; }
.js .calc__grid { display: grid; }
.calc__grid { display: none; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
html:not(.js) .calc { display: none; }
@media (min-width: 900px) { .calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }
.calc__card { background: var(--color-raised); border: var(--rule-hair) solid var(--color-rule-2); display: flex; flex-direction: column; }
.calc__title { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.calc__note { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-muted); line-height: 1.45; }
.calc__out { margin: var(--space-2xs) 0 var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-sage); }
.calc__label { margin: 0 0 var(--space-3xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.calc__total { margin: 0; font-family: var(--font-display); font-weight: 750; font-size: var(--text-lg); color: var(--color-muted); letter-spacing: -0.02em; line-height: 1.15; }
.calc__card.has-result .calc__total { font-size: var(--text-3xl); color: var(--color-ink); }
.calc__warn { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-error); }
.calc__rows { margin: var(--space-sm) 0 0; display: none; gap: var(--space-3xs); }
.calc__card.has-result .calc__rows { display: grid; }
.calc__rows div { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-sage-2); padding-top: var(--space-3xs); }
.calc__rows dt { color: var(--color-ink-2); }
.calc__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__fine { font-size: var(--text-xs); color: var(--color-muted); }
.calc__card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- questions: heading pinned left, answers right ---------- */
.faq { padding: var(--space-2xl) 0 var(--space-xl); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.faq h2 { font-size: var(--text-3xl); max-width: 12ch; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; }
  .faq h2 { position: sticky; top: 96px; }
}
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding: var(--space-sm) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-paper-2) linear-gradient(var(--color-ink), var(--color-ink)) center / 12px 2px no-repeat; box-shadow: inset 0 0 0 1px var(--color-rule); }
.faq details:not([open]) summary::after { background-image: linear-gradient(var(--color-ink), var(--color-ink)), linear-gradient(var(--color-ink), var(--color-ink)); background-size: 12px 2px, 2px 12px; background-position: center, center; }
.faq summary:hover { color: var(--color-accent); }
.faq details p { margin: 0 0 var(--space-md); color: var(--color-ink-2); max-width: 62ch; }

/* ---------- closing panel and legal lines (Ft5) ---------- */
.foot { padding: 0 0 var(--space-md); }
.foot__panel { border-radius: var(--radius-lg); background: var(--color-pine); color: var(--color-on-pine); padding: var(--space-xl) var(--tile-pad) var(--space-lg); }
.foot__line { font-family: var(--font-display); font-weight: 750; font-size: var(--text-3xl); letter-spacing: -0.03em; line-height: 1.05; max-width: 20ch; margin: 0 0 var(--space-lg); }
.foot__acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.foot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-pine-2); }
.foot__meta img { width: 160px; }
.foot__contact { margin: 0; font-size: var(--text-sm); color: var(--color-on-pine-2); line-height: 1.7; }
.foot__contact a, .foot__links a { color: var(--color-on-pine); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-md); margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-on-pine-2); }
.foot__legal p { margin: 0 0 var(--space-2xs); max-width: 72ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-xs) !important; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
.eho { display: flex; align-items: center; gap: var(--space-2xs); }
.eho svg { width: 30px; height: 30px; }
.doc + .foot .foot__meta { border-top: 0; padding-top: 0; }

/* ---------- plain pages: privacy, thanks, not found ---------- */
.doc { padding: var(--space-xl) 0 var(--space-2xl); }
.doc__body { max-width: 72ch; }
.doc h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.doc h2 { font-size: var(--text-xl); margin: var(--space-lg) 0 var(--space-xs); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: var(--space-2xs); }
.doc .updated { color: var(--color-muted); font-size: var(--text-sm); }
.doc .btn { margin: var(--space-2xs) var(--space-2xs) 0 0; }

/* ---------- arrival: tiles rise in once, nothing else moves ---------- */
.reveal-ready .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .reveal-ready .reveal { transform: none; transition: opacity 150ms linear; }
  .js .step.is-active, .lead.is-done .done { animation: none; }
  .btn .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .btn:active { transform: none; }
}