/* Hugo Finch — generated from tokens.json */
:root, [data-theme="light"] {
  --paper: #f6f3ee;
  --paper-raised: #ffffff;
  --sand: #ece6dc;
  --mist: #dfe6e4;
  --ink: #161412;
  --ink-muted: #5e5851;
  --line: #ddd6ca;
  --line-strong: #8e867c;
  --basalt: #1a1917;
  --basalt-raised: #262421;
  --line-basalt: #6b645c;
  --on-basalt: #f3eee7;
  --on-basalt-muted: #a8a096;
  --volcano: #a3352a;
  --volcano-deep: #86291f;
  --on-volcano: #ffffff;
  --ember: #e07a62;
  --ocean: #2f5560;
  --on-ocean: #ffffff;
  --laurel: #3d5a47;
  --on-laurel: #ffffff;
  --laurel-deep: #1f2a23;
  --line-laurel: #62756a;
  --sage: #a9b8aa;
  --laurel-tint: #eaeee6;
  --scrim: rgba(16,14,12,0.82);
  --focus: var(--ink);
  --shadow-card: 0 1px 2px rgba(22,20,18,0.06), 0 14px 34px rgba(22,20,18,0.08);
  --shadow-float: 0 2px 4px rgba(22,20,18,0.05), 0 24px 60px rgba(22,20,18,0.14);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;
  --duration-cinematic: 1800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 112px; line-height: 0.9; font-weight: 300; letter-spacing: -0.01em; }
.display-xl-strong { font-family: var(--font-display); font-size: 112px; line-height: 0.9; font-weight: 600; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-size: 72px; line-height: 0.92; font-weight: 300; letter-spacing: 0em; }
.display-l-strong { font-family: var(--font-display); font-size: 72px; line-height: 0.92; font-weight: 600; letter-spacing: 0em; }
.display-vertical { font-family: var(--font-display); font-size: 88px; line-height: 0.9; font-weight: 300; letter-spacing: 0.01em; }
.price { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 500; letter-spacing: 0.01em; }
.numeral { font-family: var(--font-display); font-size: 96px; line-height: 0.85; font-weight: 300; letter-spacing: 0em; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.28em; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; }
.heading { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; letter-spacing: 0em; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 25px; font-weight: 400; letter-spacing: 0em; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0.01em; }
/* Hugo Finch — component styles. Every value comes from tokens.css (var(--…)). Prefix: at- */

.at-root, body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.at-root *, .at-root *::before, .at-root *::after { box-sizing: border-box; }

/* ---------- Eyebrow ---------- */
.at-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font: 600 11px/16px var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--volcano); margin: 0; }
.at-eyebrow::before { content: ""; width: var(--space-6); height: 1px; background: currentColor; }
.at-dark .at-eyebrow { color: var(--ember); }

/* ---------- Split-weight title ---------- */
.at-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 300; line-height: .92; letter-spacing: 0; margin: 0; color: var(--ink); }
.at-title strong { font-weight: 600; color: var(--volcano); }
.at-title--xl { font-size: clamp(56px, 8.4vw, 112px); line-height: .9; letter-spacing: -.01em; }
.at-title--l { font-size: clamp(44px, 5.6vw, 72px); }
.at-dark .at-title, .at-title--on-photo { color: var(--on-basalt); }
.at-dark .at-title strong, .at-title--on-photo strong { color: var(--ember); }
.at-vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); text-transform: uppercase; font-weight: 300; font-size: 88px; line-height: .9; margin: 0; white-space: nowrap; }
.at-vertical strong { font-weight: 600; color: var(--volcano); }
.at-dark .at-vertical strong { color: var(--ember); }
.at-lead { font: 400 18px/30px var(--font-sans); color: var(--ink-muted); max-width: 56ch; margin: 0; }
.at-dark .at-lead { color: var(--on-basalt-muted); }

/* ---------- Green grounds ---------- */
.at-green { background: var(--laurel-deep); color: var(--on-basalt); }
.at-green .at-lead, .at-green .at-muted { color: var(--sage); }
.at-green .at-btn--ghost { border-color: var(--line-laurel); }
.at-sage { background: var(--laurel-tint); }

/* ---------- Buttons ---------- */
.at-btn { --at-btn-bg: var(--volcano); --at-btn-fg: var(--on-volcano); display: inline-flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-5); border: 1px solid var(--at-btn-bg); border-radius: var(--radius-sm); background: var(--at-btn-bg); color: var(--at-btn-fg); font: 600 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.at-btn:hover { --at-btn-bg: var(--volcano-deep); }
.at-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.at-btn .at-plus { width: 10px; height: 10px; position: relative; transition: transform var(--duration-base) var(--ease-out); }
.at-btn .at-plus::before, .at-btn .at-plus::after { content: ""; position: absolute; background: currentColor; }
.at-btn .at-plus::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.at-btn .at-plus::after { top: 0; bottom: 0; left: 4.5px; width: 1px; }
.at-btn:hover .at-plus { transform: rotate(90deg); }
.at-btn .at-arrow { transition: transform var(--duration-base) var(--ease-out); }
.at-btn:hover .at-arrow { transform: translateX(4px); }
.at-btn--ghost { --at-btn-bg: transparent; --at-btn-fg: var(--ink); border-color: var(--line-strong); }
.at-btn--ghost:hover { --at-btn-bg: var(--ink); --at-btn-fg: var(--paper); border-color: var(--ink); }
.at-dark .at-btn--ghost, .at-btn--ghost.at-on-photo { --at-btn-fg: var(--on-basalt); border-color: var(--on-basalt-muted); }
.at-dark .at-btn--ghost:hover, .at-btn--ghost.at-on-photo:hover { --at-btn-bg: var(--on-basalt); --at-btn-fg: var(--basalt); border-color: var(--on-basalt); }
.at-dark .at-btn:focus-visible, .at-on-photo:focus-visible { outline-color: var(--on-basalt); }
.at-btn--text { --at-btn-bg: transparent; --at-btn-fg: var(--ink); border-color: transparent; padding: 0; height: auto; }
.at-btn--text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--volcano); transform-origin: left; transform: scaleX(.35); transition: transform var(--duration-base) var(--ease-out); }
.at-btn--text { overflow: visible; padding-bottom: 4px; }
.at-btn--text:hover { --at-btn-bg: transparent; }
.at-btn--text:hover::after { transform: scaleX(1); }
.at-dark .at-btn--text { --at-btn-fg: var(--on-basalt); }
.at-dark .at-btn--text::after { background: var(--ember); }
.at-iconbtn { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.at-iconbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Tags ---------- */
.at-tag { display: inline-block; padding: 4px var(--space-2); border-radius: var(--radius-sm); font: 600 10px/12px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; background: var(--volcano); color: var(--on-volcano); }
.at-tag--reserved { background: var(--ocean); color: var(--on-ocean); }
.at-tag--sold { background: var(--ink); color: var(--paper); }
.at-tag--new { background: var(--laurel); color: var(--on-laurel); }

/* ---------- Scene (photo placeholder / real photo frame) ---------- */
.at-media { position: relative; overflow: hidden; background: var(--sand); }
.at-media > svg, .at-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-cinematic) var(--ease-out); }

/* ---------- Listing card ---------- */
.at-card { display: block; position: relative; border-radius: var(--radius-md); overflow: hidden; color: var(--on-basalt); text-decoration: none; background: var(--basalt); isolation: isolate; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.at-card .at-media { position: absolute; inset: 0; background: var(--basalt); }
.at-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,14,12,0) 28%, rgba(16,14,12,.5) 58%, var(--scrim) 100%); pointer-events: none; }
.at-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.at-card:hover .at-media > svg, .at-card:hover .at-media > img { transform: scale(1.05); }
.at-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.at-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-5); display: grid; gap: 6px; }
.at-card__price { font: 500 30px/1 var(--font-display); letter-spacing: .01em; }
.at-card__name { font: 500 13px/18px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.at-card__specs { font: 400 15px/23px var(--font-sans); color: var(--on-basalt); opacity: .82; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.at-card__tag { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }
.at-card__go { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--paper-raised); color: var(--ink); transform: translate(6px, -6px) scale(.85); opacity: 0; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.at-card:hover .at-card__go { opacity: 1; transform: none; }

/* ---------- Fields (underline style) ---------- */
.at-field { display: grid; gap: var(--space-2); }
.at-field label { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.at-field input, .at-field textarea, .at-field select { appearance: none; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; padding: var(--space-2) 0 var(--space-3); font: 400 16px/24px var(--font-sans); color: var(--ink); border-radius: 0; transition: border-color var(--duration-fast) var(--ease-out); width: 100%; }
.at-field textarea { resize: vertical; min-height: 88px; }
.at-field input::placeholder, .at-field textarea::placeholder { color: var(--ink-muted); }
.at-field input:hover, .at-field textarea:hover { border-bottom-color: var(--ink); }
.at-field input:focus, .at-field textarea:focus, .at-field select:focus { outline: none; border-bottom: 2px solid var(--volcano); padding-bottom: 11px; }

/* ---------- Search bar ---------- */
.at-search { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: stretch; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-float); overflow: hidden; }
.at-search__cell { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--line); display: grid; gap: 4px; min-width: 0; }
.at-search__cell span { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.at-search__cell select { appearance: none; border: 0; background: transparent; font: 500 15px/22px var(--font-sans); color: var(--ink); padding: 0; cursor: pointer; }
.at-search__cell select:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.at-search .at-btn { height: auto; border-radius: 0; padding: 0 var(--space-6); }

/* ---------- Area strip (accordion columns with vertical labels) ---------- */
.at-areas { display: flex; height: 460px; gap: 4px; border-radius: var(--radius-lg); overflow: hidden; }
.at-area { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--on-basalt); text-decoration: none; transition: flex-grow var(--duration-base) var(--ease-inout); }
.at-area:hover, .at-area:focus-visible, .at-area.is-open { flex-grow: 3.2; }
.at-area:focus-visible { outline: 2px solid var(--on-basalt); outline-offset: -4px; }
.at-area .at-media { position: absolute; inset: 0; }
.at-area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,12,.08), var(--scrim)); }
.at-area__label { position: absolute; left: var(--space-4); bottom: var(--space-5); z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 22px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.at-area__info { position: absolute; left: 64px; right: var(--space-5); bottom: var(--space-5); z-index: 2; opacity: 0; transform: translateY(12px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); font: 400 15px/23px var(--font-sans); max-width: 30ch; }
.at-area__info b { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); margin-bottom: 6px; }
.at-area:hover .at-area__info, .at-area:focus-visible .at-area__info, .at-area.is-open .at-area__info { opacity: 1; transform: none; transition-delay: 120ms; }

/* ---------- Reveal motion ---------- */
.at-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.at-reveal.is-in { opacity: 1; transform: none; }
.at-reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path var(--duration-slow) var(--ease-inout); }
.at-reveal-img.is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .at-reveal, .at-reveal-img { opacity: 1; transform: none; clip-path: none; transition: none; }
  .at-card, .at-media > svg, .at-media > img, .at-area { transition: none !important; }
}

/* ---------- Intent panel (tabbed entry: Buy / Sell / Refurbish / Manage) ---------- */
.at-intent { background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-float); overflow: hidden; }
.at-intent__tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); padding: 0 var(--space-5); }
.at-intent__tab { appearance: none; border: 0; background: none; cursor: pointer; padding: var(--space-4) var(--space-4) 14px; font: 600 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); transition: color var(--duration-fast) var(--ease-out); }
.at-intent__tab:hover, .at-intent__tab[aria-selected="true"] { color: var(--ink); }
.at-intent__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.at-intent__bar { position: absolute; bottom: -1px; height: 2px; background: var(--volcano); transition: left var(--duration-base) var(--ease-inout), width var(--duration-base) var(--ease-inout); }
.at-intent__note { margin-left: auto; align-self: center; font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }
.at-intent__panel { display: none; grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; }
.at-intent__panel.is-active { display: grid; animation: at-in var(--duration-base) var(--ease-out); }
.at-intent__panel .at-search__cell:nth-last-child(2) { border-right: 0; }
.at-intent__panel .at-btn { height: auto; border-radius: 0; padding: 0 var(--space-6); }
@keyframes at-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Service explorer (numbered list + crossfading image) ---------- */
.at-explorer { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-7); align-items: stretch; }
.at-explorer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.at-explorer__item { border-bottom: 1px solid var(--line); }
.at-explorer__btn { appearance: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; color: var(--ink); }
.at-explorer__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.at-explorer__num { font: 500 14px/1 var(--font-display); letter-spacing: .1em; color: var(--ink-muted); }
.at-explorer__name { font: 300 44px/1 var(--font-display); text-transform: uppercase; transition: color var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.at-explorer__go { font: 400 18px/1 var(--font-sans); color: var(--volcano); opacity: 0; transform: translateX(-8px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.at-explorer__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-inout); }
.at-explorer__body > div { overflow: hidden; padding-left: 64px; }
.at-explorer__body p { margin: 0 0 var(--space-3); font: 400 15px/25px var(--font-sans); color: var(--ink-muted); max-width: 46ch; }
.at-explorer__body ul { margin: 0 0 var(--space-5); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 500 13px/20px var(--font-sans); color: var(--ink); }
.at-explorer__body li::before { content: "— "; color: var(--volcano); }
.at-explorer__item.is-active .at-explorer__name { font-weight: 600; color: var(--volcano); transform: translateX(4px); }
.at-explorer__item.is-active .at-explorer__num { color: var(--volcano); }
.at-explorer__item.is-active .at-explorer__go { opacity: 1; transform: none; }
.at-explorer__item.is-active .at-explorer__body { grid-template-rows: 1fr; }
.at-explorer__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; background: var(--sand); }
.at-explorer__media .at-media { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--ease-inout); }
.at-explorer__media .at-media.is-active { opacity: 1; }
.at-explorer__media .at-media > svg { transform: scale(1.06); }
.at-explorer__media .at-media.is-active > svg { transform: scale(1); }
.at-explorer__caption { position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2; }

/* ---------- Before / after slider ---------- */
.at-ba { --pos: 50%; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; user-select: none; touch-action: none; cursor: ew-resize; background: var(--sand); }
.at-ba__layer { position: absolute; inset: 0; }
.at-ba__layer > svg, .at-ba__layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.at-ba__after { clip-path: inset(0 0 0 var(--pos)); }
.at-ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--paper-raised); z-index: 2; }
.at-ba__handle { position: absolute; top: 50%; left: var(--pos); z-index: 3; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink); border: 0; display: grid; place-items: center; font: 500 16px/1 var(--font-sans); box-shadow: var(--shadow-card); cursor: ew-resize; }
.at-ba__handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.at-ba__tag { position: absolute; top: var(--space-4); z-index: 2; }
.at-ba__tag--before { left: var(--space-4); }
.at-ba__tag--after { right: var(--space-4); }
.at-ba.is-hint .at-ba__after, .at-ba.is-hint .at-ba__line, .at-ba.is-hint .at-ba__handle { transition: clip-path 1200ms var(--ease-inout), left 1200ms var(--ease-inout); }

/* ---------- Check list and owner report ---------- */
.at-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }
.at-checks li { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font: 500 15px/22px var(--font-sans); }
.at-checks li::before { content: "✓"; color: var(--volcano); font-weight: 600; }
.at-green .at-checks li { border-bottom-color: var(--line-laurel); }
.at-green .at-checks li::before, .at-dark .at-checks li::before { color: var(--ember); }
.at-report { background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-float); display: grid; gap: var(--space-4); }
.at-report__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.at-report__head b { font: 500 18px/24px var(--font-sans); }
.at-report__head span { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.at-report__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.at-report__kpi { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.at-report__kpi small { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.at-report__kpi strong { font: 500 40px/1.1 var(--font-display); }
.at-report__meter { height: 4px; background: var(--sand); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-2); }
.at-report__meter i { display: block; height: 100%; width: 0; background: var(--laurel); transition: width 1400ms var(--ease-out); }
.at-report__log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }
.at-report__log li { display: flex; justify-content: space-between; gap: var(--space-4); }
.at-report__log b { font-weight: 500; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .at-explorer__body, .at-explorer__media .at-media, .at-ba__after, .at-ba__line, .at-ba__handle, .at-report__meter i, .at-intent__bar { transition: none !important; }
  .at-intent__panel.is-active { animation: none; }
}

/* ---------- Segmented toggle ---------- */
.at-seg { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); gap: 4px; }
.at-seg button { appearance: none; border: 0; background: transparent; color: var(--ink); height: 36px; padding: 0 var(--space-5); border-radius: var(--radius-pill); font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-base) var(--ease-inout), color var(--duration-base) var(--ease-inout); }
.at-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.at-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.at-view { display: none; }
.at-view.is-active { display: block; animation: at-in var(--duration-base) var(--ease-out); }

/* ---------- Build stages (construction timeline + image) ---------- */
.at-stages__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand); }
.at-stages__media .at-media { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--ease-inout); }
.at-stages__media .at-media.is-active { opacity: 1; }
.at-stages__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }
.at-stages { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.at-stages::before, .at-stages::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; }
.at-stages::before { right: 0; background: var(--line); }
.at-stages::after { width: var(--at-progress, 0%); background: var(--volcano); transition: width var(--duration-slow) var(--ease-inout); }
.at-stages button { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; display: grid; gap: var(--space-3); position: relative; z-index: 1; color: var(--ink-muted); }
.at-stages button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.at-stages i { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--paper); border: 2px solid var(--line-strong); transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.at-stages span { font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.at-stages small { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.at-stages .is-done i { background: var(--volcano); border-color: var(--volcano); }
.at-stages .is-active { color: var(--ink); }
.at-stages .is-active i { background: var(--paper); border-color: var(--volcano); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--volcano); }
.at-tag--dev { background: var(--paper-raised); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .at-stages__media .at-media, .at-stages::after, .at-seg button { transition: none !important; }
  .at-view.is-active { animation: none; }
}

/* readability + icon refinement (Oct 2026) */
/* titles: weight contrast by default, red only where it earns it */
.at-title strong, .at-dark .at-title strong, .at-title--on-photo strong { color: inherit; }
.at-title.accent strong { color: var(--volcano); }
.at-dark .at-title.accent strong { color: var(--ember); }
.at-lead { font-size: 19px; line-height: 31px; }
.at-checks li { font-size: 16px; line-height: 24px; }
.at-arrow { display: inline-block; width: 15px; height: 10px; font-size: 0 !important; line-height: 0; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13.5M9.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13.5M9.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.at-arrow--down { transform: rotate(90deg); }
.at-btn:hover .at-arrow--down { transform: rotate(90deg) translateX(3px); }
.at-checks li::before { content: ""; flex: none; width: 15px; height: 15px; transform: translateY(2px); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.at-checks li { align-items: flex-start; }
/* ============ Hugo Finch website — site layer (on top of tokens.css + bundle.css) ============
   Layout concept: full-bleed cinematic bands alternating basalt / paper / sand / laurel-deep / mist,
   each with one oversized moment; content in a 1280px container with safe-area gutters.
   Deliberately single-theme (the brand's own light/dark rhythm), so every colour is set explicitly. */

:root { color-scheme: light; --gl: max(64px, env(safe-area-inset-left, 0px)); --gr: max(64px, env(safe-area-inset-right, 0px)); --hdr: 84px; }
html { scroll-behavior: auto; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--basalt); }
.site, .site * , .site *::before, .site *::after { box-sizing: border-box; }
.site { overflow-x: clip; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
h1, h2, h3 { text-wrap: balance; }
.num-t { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.at-dark :focus-visible, .on-dark :focus-visible { outline-color: var(--on-basalt); }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header ---------- */
.hd { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 40; height: var(--hdr); display: flex; align-items: center; gap: var(--space-6); padding-left: var(--gl); padding-right: var(--gr); color: var(--on-basalt); transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform 500ms var(--ease-out), height var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.hd.solid { background: rgba(246,243,238,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); height: 68px; box-shadow: 0 1px 0 var(--line); }
.hd.away { transform: translateY(-110%); }
.logo { display: grid; gap: 7px; justify-items: start; }
.logo__mark { width: 40px; height: 40px; flex: none; fill: var(--ember); margin: -4px 0; transition: fill var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out); }
.hd.solid .logo__mark { fill: var(--volcano); width: 34px; height: 34px; }
.logo__txt { display: grid; gap: 2px; }
.logo b { font: 500 26px/1 var(--font-display); letter-spacing: .32em; text-transform: uppercase; }
.logo__txt > span { font: 600 9px/12px var(--font-sans); letter-spacing: .42em; text-transform: uppercase; opacity: .78; }
.nav { display: flex; gap: var(--space-5); }
.nav a { position: relative; text-decoration: none; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: right; transition: transform var(--duration-base) var(--ease-out); }
.hd.solid .nav a::after { background: var(--volcano); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); transform-origin: left; }
.lang { font: 600 11px/16px var(--font-sans); letter-spacing: .16em; }
.lang b { color: var(--ember); font-weight: 600; }
.hd.solid .lang b { color: var(--volcano); }
.hd .at-btn { height: 40px; }
.hd:not(.solid) .at-btn--ghost { --at-btn-fg: var(--on-basalt); border-color: var(--on-basalt-muted); }
.hd:not(.solid) .at-btn--ghost:hover { --at-btn-bg: var(--on-basalt); --at-btn-fg: var(--basalt); }
.menubtn { display: none; appearance: none; background: none; border: 0; color: inherit; cursor: pointer; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; align-items: center; gap: 10px; padding: 8px 0; }
.menubtn i { display: grid; gap: 5px; width: 22px; }
.menubtn i::before, .menubtn i::after { content: ""; height: 1.5px; background: currentColor; }
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 45; background: transparent; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--volcano); transform-origin: left; transform: scaleX(0); }

/* full-screen menu */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--basalt); color: var(--on-basalt); display: grid; grid-template-rows: auto 1fr auto; padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gr) calc(env(safe-area-inset-bottom, 0px) + 24px) var(--gl); clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease-inout); visibility: hidden; }
.menu.open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__top button { appearance: none; background: none; border: 1px solid var(--line-basalt); color: var(--on-basalt); height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font: 600 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.menu nav { display: grid; align-content: center; gap: 2px; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font: 500 clamp(44px, 9vw, 96px)/1 var(--font-display); text-transform: uppercase; opacity: 0; transform: translateY(30px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), color var(--duration-fast); }
.menu nav a small { font: 500 12px/1 var(--font-display); letter-spacing: .14em; color: var(--ember); }
.menu nav a:hover { color: var(--ember); }
.menu.open nav a { opacity: 1; transform: none; }
.menu.open nav a:nth-child(2) { transition-delay: 40ms; } .menu.open nav a:nth-child(3) { transition-delay: 80ms; } .menu.open nav a:nth-child(4) { transition-delay: 120ms; } .menu.open nav a:nth-child(5) { transition-delay: 160ms; } .menu.open nav a:nth-child(6) { transition-delay: 200ms; } .menu.open nav a:nth-child(7) { transition-delay: 240ms; } .menu.open nav a:nth-child(8) { transition-delay: 280ms; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 15px/23px var(--font-sans); color: var(--on-basalt-muted); }

/* loader + page curtain */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--basalt); color: var(--on-basalt); display: grid; place-items: center; transition: clip-path 900ms var(--ease-inout); clip-path: inset(0 0 0 0); }
.loader.done { clip-path: inset(0 0 100% 0); }
.loader { grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(8px, 2vh, 20px); }
.loader__svg { display: none; }
.loader__draw { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ldrdraw 1100ms var(--ease-inout) forwards; }
@keyframes ldrdraw { to { stroke-dashoffset: 0; } }
.loader__mark { display: flex; overflow: hidden; font: 500 clamp(48px, 9vw, 120px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.loader__mark span { display: inline-block; transform: translateY(110%); animation: ldr 900ms var(--ease-out) forwards; }
.loader__bar { position: absolute; left: 50%; bottom: 14%; width: 160px; height: 1px; margin-left: -80px; background: var(--line-basalt); overflow: hidden; }
.loader__bar i { display: block; height: 100%; background: var(--ember); animation: ldrbar 1300ms var(--ease-inout) forwards; transform-origin: left; transform: scaleX(0); }
@keyframes ldr { to { transform: none; } }
@keyframes ldrbar { to { transform: scaleX(1); } }
.curtain { position: fixed; inset: 0; z-index: 80; background: var(--basalt); pointer-events: none; transform: scaleY(0); transform-origin: bottom; }
.curtain.in { transition: transform 520ms var(--ease-inout); transform: scaleY(1); }
.curtain.out { transition: transform 620ms var(--ease-inout); transform: scaleY(0); transform-origin: top; }

/* ---------- reveal (visible at rest; only below-the-fold items wait) ---------- */
.pending { opacity: 0; transform: translateY(28px); }
.revealing { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.pending-img { clip-path: inset(0 0 100% 0); }
.revealing-img { transition: clip-path 1100ms var(--ease-inout); }

/* ---------- shared heroes ---------- */
.phero { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: var(--basalt); color: var(--on-basalt); padding-block: calc(var(--hdr) + 80px) 96px; }
.phero > .at-media { position: absolute; inset: 0; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,14,12,.72), rgba(16,14,12,.15) 70%), linear-gradient(180deg, rgba(16,14,12,.45), rgba(16,14,12,0) 30%, rgba(16,14,12,0) 55%, var(--scrim)); }
.phero .wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1fr 360px; gap: var(--space-8); align-items: end; }
.phero h1 { margin: var(--space-5) 0 0; font: 500 clamp(64px, 11vw, 160px)/.84 var(--font-display); text-transform: uppercase; letter-spacing: -.012em; }
.phero h1 strong { font-weight: 600; color: var(--ember); }
.phero .lead { margin: 0; font: 400 17px/28px var(--font-sans); color: var(--on-basalt); opacity: .9; }
.phero .lead + .at-btn, .phero .lead + .ctas { margin-top: var(--space-5); }
.crumbs { font: 600 11px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--on-basalt); opacity: .8; }
.crumbs a { text-decoration: none; }
.line { display: block; overflow: hidden; padding-bottom: .05em; }
.line > span { display: block; transform: translateY(105%); }
.view.shown .line > span { animation: rise var(--duration-cinematic) var(--ease-out) forwards; }
.view.shown .line:nth-child(2) > span { animation-delay: 110ms; }
.view.shown .line:nth-child(3) > span { animation-delay: 220ms; }
@keyframes rise { to { transform: none; } }
.grain::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- section basics ---------- */
.band { padding-block: 112px; position: relative; }
.band--tight { padding-block: 80px; }
.band--sand { background: var(--sand); }
.band--mist { background: var(--mist); }
.band--dark { background: var(--basalt); color: var(--on-basalt); }
.band--green { background: var(--laurel-deep); color: var(--on-basalt); }
.sechead { display: flex; align-items: end; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-7); }
.sechead > * { min-width: 0; }
.sechead .at-title { margin-top: var(--space-4); }
.t96 { font-size: clamp(52px, 7.5vw, 96px) !important; }
.t80 { font-size: clamp(48px, 6.3vw, 80px) !important; }
.lead-m { max-width: 46ch; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ring { position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px solid var(--line); pointer-events: none; }
.ring::after { content: ""; position: absolute; inset: 64px; border-radius: 50%; border: 1px solid var(--line); }
.label { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.at-dark .label, .band--dark .label, .band--green .label { color: var(--on-basalt-muted); }

/* chips (filters, choices) */
.chip { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: var(--radius-pill); min-height: 36px; padding: 0 var(--space-4); font: 600 11px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- HOME ---------- */
.hhero { position: relative; height: 860px; overflow: hidden; background: var(--basalt); color: var(--on-basalt); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms var(--ease-inout); }
.slide > svg { transform: scale(1.12); transition: transform 8000ms linear; }
.slide.on { opacity: 1; }
.slide.on > svg { transform: scale(1.02); }
.hhero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16,14,12,.72) 0%, rgba(16,14,12,.2) 60%, rgba(16,14,12,.05) 100%), linear-gradient(180deg, rgba(16,14,12,.45) 0%, rgba(16,14,12,0) 22%, rgba(16,14,12,0) 55%, var(--scrim) 100%); }
.hhero__in { position: absolute; z-index: 3; left: var(--gl); right: var(--gr); bottom: 160px; }
.hhero .kicker { font: 300 44px/1 var(--font-display); text-transform: uppercase; margin: 0 0 8px; }
.hhero h1 { margin: 0; font: 400 clamp(80px, 14.5vw, 196px)/.84 var(--font-display); text-transform: uppercase; letter-spacing: -.015em; }
.hhero h1 strong { font-weight: 600; color: var(--ember); }
.hhero__lead { position: absolute; z-index: 3; right: var(--gr); bottom: 172px; width: 340px; }
.hhero__lead p { margin: 0 0 var(--space-5); font: 400 17px/28px var(--font-sans); opacity: .9; }
.slidenav { display: flex; gap: var(--space-5); }
.slidenav button { appearance: none; background: none; border: 0; color: var(--on-basalt); opacity: .45; cursor: pointer; padding: 0 0 10px; position: relative; font: 500 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; transition: opacity var(--duration-base) var(--ease-out); }
.slidenav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform-origin: left; transform: scaleX(0); }
.slidenav button.on { opacity: 1; }
.slidenav button.on::after { animation: prog 6000ms linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.vside { position: absolute; z-index: 3; right: max(22px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 600 10px/1 var(--font-sans); letter-spacing: .42em; text-transform: uppercase; opacity: .6; }
.scrollcue { position: absolute; z-index: 3; left: 50%; bottom: 112px; width: 1px; height: 48px; background: rgba(243,238,231,.25); overflow: hidden; }
.scrollcue::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--on-basalt); animation: cue 2200ms var(--ease-inout) infinite; }
@keyframes cue { to { top: 110%; } }
.intentwrap { position: relative; z-index: 4; margin-top: -84px; }
.intentwrap .at-intent { max-width: 1060px; margin: 0 auto; }
.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-8); padding-top: var(--space-5); font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }
.proof span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--laurel); margin-right: 10px; vertical-align: middle; }
.statement { padding-block: 128px 104px; position: relative; overflow: hidden; }
.statement .ring { left: -220px; top: 40px; }
.statement p.big { position: relative; margin: var(--space-6) 0 0; max-width: 1080px; font: 300 clamp(36px, 5vw, 64px)/1.02 var(--font-display); text-transform: uppercase; }
.statement .w { color: #b3aa9d; transition: color 700ms var(--ease-out); }
.statement .w.on { color: var(--ink); }
.statement strong { font-weight: 600; }
.statement strong .w.on { color: var(--volcano); }
.svc { display: flex; height: 660px; gap: 3px; background: var(--basalt); }
.svc__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--on-basalt); text-decoration: none; transition: flex-grow 800ms var(--ease-inout); }
.svc__p.is-open { flex-grow: 3.4; }
.svc__p .at-media { position: absolute; inset: 0; background: var(--basalt); }
.svc__p .at-media > svg { transition: transform 1600ms var(--ease-out), filter 700ms var(--ease-out); filter: saturate(.7) brightness(.78); }
.svc__p.is-open .at-media > svg { transform: scale(1.04); filter: none; }
.svc__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,12,.35), rgba(16,14,12,0) 30%, rgba(16,14,12,.15) 55%, var(--scrim)); }
.svc__num { position: absolute; z-index: 2; top: var(--space-6); left: var(--space-5); font: 500 56px/1 var(--font-display); }
.svc__v { position: absolute; z-index: 2; left: var(--space-5); bottom: var(--space-6); writing-mode: vertical-rl; transform: rotate(180deg); font: 600 40px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: opacity var(--duration-base) var(--ease-out); }
.svc__p.is-open .svc__v { opacity: 0; }
.svc__body { position: absolute; z-index: 2; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); max-width: 460px; opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.svc__p.is-open .svc__body { opacity: 1; transform: none; transition-delay: 250ms; }
.svc__body h3 { margin: 0 0 var(--space-3); font: 300 88px/.88 var(--font-display); text-transform: uppercase; }
.svc__body h3 strong { font-weight: 600; color: var(--ember); }
.svc__body p { margin: 0 0 var(--space-5); font: 400 15px/25px var(--font-sans); opacity: .9; }
.pts { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); font: 600 11px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }
.pts span::before { content: "— "; color: var(--ember); }

/* build stage (home + build page) */
.build__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: end; padding-bottom: var(--space-7); }
.facts3 { display: grid; border-top: 1px solid var(--line-basalt); }
.facts3 div { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line-basalt); font: 400 16px/26px var(--font-sans); color: var(--on-basalt-muted); }
.facts3 b { font: 500 14px/24px var(--font-display); letter-spacing: .1em; color: var(--ember); }
.facts3 strong { color: var(--on-basalt); font-weight: 500; }
.barrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.band--dark .at-seg, .band--green .at-seg { border-color: var(--line-basalt); }
.band--dark .at-seg button, .band--green .at-seg button { color: var(--on-basalt); }
.band--dark .at-seg button[aria-pressed="true"], .band--green .at-seg button[aria-pressed="true"] { background: var(--on-basalt); color: var(--basalt); }
.stage { position: relative; height: 700px; overflow: hidden; background: var(--basalt); }
.stage .at-media { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-inout); background: var(--basalt); }
.stage .at-media.is-active { opacity: 1; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,14,12,.55) 0%, rgba(16,14,12,0) 30%, rgba(16,14,12,0) 50%, var(--scrim) 100%); pointer-events: none; }
.stage__num { position: absolute; z-index: 2; right: var(--gr); top: var(--space-5); font: 300 240px/.8 var(--font-display); color: var(--on-basalt); letter-spacing: -.02em; }
.stage__num small { font-size: 48px; color: var(--ember); font-weight: 600; vertical-align: top; margin-left: 6px; }
.stage__name { position: absolute; z-index: 2; left: var(--gl); top: var(--space-6); font: 600 12px/16px var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--on-basalt); }
.stage .at-stages { position: absolute; z-index: 2; left: var(--gl); right: var(--gr); bottom: var(--space-6); margin: 0; }
.stage .at-stages button { color: var(--on-basalt-muted); }
.stage .at-stages .is-active { color: var(--on-basalt); }
.stage .at-stages small { color: var(--on-basalt-muted); }
.reno { padding-bottom: 112px; }
.reno .at-ba { aspect-ratio: auto; height: 600px; }

/* gallery (drag) */
.gallery { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gl); padding: 0 var(--gr) var(--space-3) var(--gl); scrollbar-width: none; cursor: grab; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery .at-card { flex: 0 0 420px; height: 540px; scroll-snap-align: start; }
.gallery .at-card.wide { flex-basis: 640px; }
.gallery .at-card.wide .at-card__price { font-size: 48px; }
.gallery > span { flex: 0 0 1px; }
.galfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.gbar { flex: 0 1 280px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.gbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--ink); }
.arrows { display: flex; gap: var(--space-3); }

/* management split */
.mgmt { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 740px; background: var(--laurel-deep); color: var(--on-basalt); }
.mgmt__img { position: relative; z-index: 2; min-height: 520px; }
.mgmt__img .at-media { position: absolute; inset: 0; }
.mgmt__img .at-report { position: absolute; z-index: 2; right: -60px; bottom: 72px; width: 380px; }
.rep-ex { position: absolute; z-index: 2; right: -60px; bottom: 40px; width: 380px; margin: 0; font: 400 13px/19px var(--font-sans); color: var(--on-basalt); }
.mgmt__txt { padding: 104px var(--gr) 104px 120px; display: flex; flex-direction: column; justify-content: center; }
.mgmt__txt .at-checks { margin: var(--space-6) 0; }

/* marquee */
.marquee { overflow: hidden; padding-block: 56px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.marquee__track { display: inline-flex; animation: marq 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font: 300 120px/1 var(--font-display); text-transform: uppercase; color: var(--ink); padding: 0 var(--space-6); }
.marquee span.dot { color: var(--volcano); font-weight: 600; padding: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* contact block (shared) */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-content: start; }
.cform .full { grid-column: 1 / -1; }
.sent { display: none; padding: var(--space-5); border-radius: var(--radius-md); background: var(--paper-raised); border-left: 0; }
.sent.show { display: block; animation: at-in var(--duration-base) var(--ease-out); }
.sent b { display: block; font: 500 28px/1.1 var(--font-display); text-transform: uppercase; margin-bottom: 6px; }
.sent p { margin: 0; color: var(--ink-muted); font: 400 16px/26px var(--font-sans); }
.contact3 { display: grid; grid-template-columns: 130px 1fr 400px; gap: var(--space-8); align-items: stretch; }
.contact3 .at-vertical { align-self: start; font-size: 112px; }
.office { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 440px; }
.office .at-media { position: absolute; inset: 0; }
.office__card { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); background: var(--paper-raised); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: 6px; }
.office__card b { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--volcano); }
.office__card span { font: 400 16px/26px var(--font-sans); color: var(--ink); }
.office__card small { font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }

/* footer */
.ft { background: var(--basalt); color: var(--on-basalt); padding-top: var(--space-8); overflow: hidden; }
.ft__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-6); }
.ft h4 { margin: 0 0 var(--space-4); font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ft a { color: var(--on-basalt-muted); text-decoration: none; font: 400 15px/24px var(--font-sans); transition: color var(--duration-fast) var(--ease-out); }
.ft a:hover { color: var(--on-basalt); }
.ft p { font: 400 16px/26px var(--font-sans); color: var(--on-basalt-muted); max-width: 34ch; margin: 0 0 var(--space-4); }
.ft__news { display: flex; border-bottom: 1px solid var(--line-basalt); max-width: 340px; }
.ft__news input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--on-basalt); font: 400 16px/26px var(--font-sans); padding: 10px 0; }
.ft__news input::placeholder { color: var(--on-basalt-muted); }
.ft__news button { appearance: none; background: none; border: 0; color: var(--ember); font: 600 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: var(--space-5); border-top: 1px solid var(--line-basalt); font: 400 13px/19px var(--font-sans); color: var(--on-basalt-muted); }
.ft__logo { display: block; width: 72px; height: 72px; fill: var(--ember); margin: -8px 0 var(--space-4) -6px; }
.ft__mark { font: 300 clamp(96px, 17.5vw, 260px)/.8 var(--font-display); letter-spacing: .06em; text-transform: uppercase; margin: var(--space-6) 0 -.08em; white-space: nowrap; text-align: center; }

/* cursor */
.cursor { position: fixed; z-index: 50; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: var(--volcano); color: var(--on-volcano); display: grid; place-items: center; font: 600 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; transform: scale(0); transition: transform 300ms var(--ease-out); }
.cursor.on { transform: scale(1); }

/* ---------- BUY ---------- */
.filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 20; background: rgba(246,243,238,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.filters .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-4); }
.filters label.f { display: grid; gap: 2px; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.filters select { appearance: none; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; font: 500 15px/22px var(--font-sans); color: var(--ink); padding: 2px 18px 4px 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 6px top 12px, right 1px top 12px; background-size: 5px 5px; background-repeat: no-repeat; }
.filters input[type=range] { accent-color: var(--volcano); width: 160px; }
.filters .count { margin-left: auto; font: 500 15px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.filters .count b { font-size: 28px; color: var(--volcano); font-weight: 600; margin-right: 6px; }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
.results .at-card { height: 420px; }
.rcw.pop { animation: pop 600ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.heart { position: absolute; z-index: 3; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(246,243,238,.92); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast); }
.heart:hover { transform: scale(1.08); }
.heart[aria-pressed="true"] { color: var(--volcano); }
.empty { display: none; text-align: center; padding-block: 64px; }
.empty.show { display: block; }
.empty b { display: block; font: 500 48px/1 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-3); }
.mapview { display: none; position: relative; height: 640px; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); }
.mapview.show { display: block; }
.mapview svg { width: 100%; height: 100%; display: block; }
.mpin { position: absolute; z-index: 2; transform: translate(-50%, -100%); background: var(--paper-raised); color: var(--ink); border: 0; border-radius: var(--radius-pill); padding: 8px 12px; font: 500 15px/1 var(--font-display); letter-spacing: .04em; box-shadow: var(--shadow-card); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast), color var(--duration-fast); }
.mpin::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.mpin:hover, .mpin.on { background: var(--volcano); color: var(--on-volcano); }
.mpin.hide { display: none; }
.mapcard { position: absolute; z-index: 3; left: var(--space-5); bottom: var(--space-5); width: 340px; height: 220px; }
.offmarket { display: grid; grid-template-columns: 1fr auto; gap: var(--space-7); align-items: center; }

/* ---------- PROPERTY ---------- */
.prhero { position: relative; height: 860px; overflow: hidden; background: var(--basalt); color: var(--on-basalt); }
.hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1000ms var(--ease-inout); }
.hs.on { opacity: 1; }
.hs > svg { transform: scale(1.08); transition: transform 7000ms linear; }
.hs.on > svg { transform: scale(1); }
.prhero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(16,14,12,.5) 0%, rgba(16,14,12,0) 22%, rgba(16,14,12,0) 50%, var(--scrim) 100%); }
.prhero .crumbs { position: absolute; z-index: 3; left: var(--gl); top: 120px; }
.prhero__title { position: absolute; z-index: 3; left: var(--gl); bottom: 156px; max-width: 760px; }
.prhero__title h1 { margin: var(--space-5) 0 0; font: 500 clamp(72px, 10.6vw, 136px)/.84 var(--font-display); text-transform: uppercase; }
.prhero__title h1 strong { font-weight: 600; color: var(--ember); }
.prhero__title p { margin: var(--space-5) 0 0; font: 500 13px/20px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }
.prhero__price { position: absolute; z-index: 3; right: var(--gr); bottom: 156px; text-align: right; }
.prhero__price small { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; opacity: .75; margin-bottom: var(--space-2); }
.prhero__price strong { font: 500 clamp(52px, 6.9vw, 88px)/.9 var(--font-display); }
.prhero__ctrl { position: absolute; z-index: 3; right: var(--gr); top: 112px; display: flex; gap: var(--space-3); align-items: center; }
.prhero__ctrl .at-iconbtn { color: var(--on-basalt); border-color: var(--on-basalt-muted); }
.prhero__ctrl .at-iconbtn:hover { background: var(--on-basalt); color: var(--basalt); }
.hcount { font: 500 15px/1 var(--font-display); letter-spacing: .16em; margin-right: var(--space-3); }
.factsbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 20; margin-top: -88px; padding-left: var(--gl); padding-right: var(--gr); }
.facts { max-width: 1152px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr) auto; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-float); overflow: hidden; }
.fact { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--line); min-width: 0; }
.fact small { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.fact b { font: 500 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fact b span { font-size: 16px; margin-left: 2px; }
.facts__cta { display: flex; }
.facts__cta .at-btn { height: auto; border-radius: 0; padding: 0 var(--space-6); }
.save { appearance: none; border: 0; border-right: 1px solid var(--line); background: var(--paper-raised); width: 72px; cursor: pointer; font-size: 22px; color: var(--ink); }
.save[aria-pressed="true"] { color: var(--volcano); }
.overview { display: grid; grid-template-columns: 1fr 380px; gap: 96px; align-items: start; }
.overview > * { min-width: 0; }
.desc { columns: 2; column-gap: var(--space-7); }
.desc p { margin: 0 0 var(--space-4); font: 400 16px/27px var(--font-sans); color: var(--ink-muted); break-inside: avoid; }
.desc p:first-child::first-letter { float: left; font: 600 76px/.8 var(--font-display); color: var(--volcano); margin: 6px 10px 0 0; }
.agent { position: sticky; top: 168px; background: var(--paper-raised); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); display: grid; gap: var(--space-5); }
.agent__who { display: flex; gap: var(--space-4); align-items: center; }
.agent__pic { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--laurel); color: var(--on-laurel); display: grid; place-items: center; font: 500 24px/1 var(--font-display); letter-spacing: .06em; }
.agent__who b { display: block; font: 500 18px/24px var(--font-sans); }
.agent__who div span { font: 400 15px/23px var(--font-sans); color: var(--ink-muted); }
.agent .at-btn { justify-content: center; }
.agent__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.agent__row .at-btn { padding: 0 var(--space-3); }
.agent__note { font: 400 15px/23px var(--font-sans); color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: var(--space-4); margin: 0; }
.agent__note b { color: var(--laurel); }
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: var(--space-3); }
.mosaic a { position: relative; border-radius: var(--radius-md); overflow: hidden; display: block; background: var(--sand); }
.mosaic a:first-child { grid-row: span 2; }
.mosaic a:nth-child(4) { grid-column: span 2; }
.mosaic .at-media { position: absolute; inset: 0; }
.mosaic .at-media > svg { transition: transform 1400ms var(--ease-out); }
.mosaic a:hover .at-media > svg { transform: scale(1.05); }
.mosaic .more { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); }
.cap { position: absolute; z-index: 2; left: var(--space-4); bottom: var(--space-4); font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--on-basalt); background: rgba(16,14,12,.55); padding: 6px 10px; border-radius: var(--radius-sm); }
.feat { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8); }
.feat__groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.feat h4, .h4 { margin: 0 0 var(--space-3); font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--volcano); }
.feat .at-checks { grid-template-columns: 1fr; }
.plan2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.plan__svg { background: var(--basalt-raised); border-radius: var(--radius-lg); padding: var(--space-6); }
.plan__svg svg { width: 100%; height: auto; display: block; }
.plan__svg svg.plan__floor { display: none; }
.plan__svg svg.plan__floor.is-active { display: block; animation: at-in var(--duration-base) var(--ease-out); }
.plan__svg .wall { fill: none; stroke: var(--on-basalt); stroke-width: 5; }
.plan__svg .iwall { fill: none; stroke: var(--on-basalt-muted); stroke-width: 2.5; }
.plan__svg .room { fill: var(--basalt-raised); transition: fill var(--duration-base) var(--ease-out); }
.plan__svg .room:hover { fill: rgba(224,122,98,.22); }
.plan__svg .pool { fill: var(--ocean); }
.plan__svg text { fill: var(--on-basalt); font: 500 14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.plan__svg text.m2 { fill: var(--on-basalt-muted); font: 400 12px var(--font-sans); letter-spacing: 0; text-transform: none; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); margin-top: var(--space-7); }
.num { border-top: 1px solid var(--line-basalt); padding-top: var(--space-4); }
.num strong { display: block; font: 300 96px/.85 var(--font-display); font-variant-numeric: tabular-nums; }
.num span { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--on-basalt-muted); }
.loc { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: center; }
.map { position: relative; height: 520px; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); }
.map svg { width: 100%; height: 100%; display: block; }
.m-sea { fill: var(--mist); } .m-land { fill: var(--sand); } .m-green { fill: var(--laurel); opacity: .18; } .m-road { fill: none; stroke: var(--paper-raised); stroke-width: 4; } .m-road2 { fill: none; stroke: var(--paper-raised); stroke-width: 2; } .m-ring { fill: none; stroke: var(--volcano); stroke-width: 1.5; opacity: .5; }
.m-lbl { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; fill: var(--ink-muted); }
.pin { position: absolute; left: 52%; top: 48%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--volcano); box-shadow: 0 0 0 6px rgba(163,53,42,.18); }
.pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--volcano); animation: ping 2400ms var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.dist { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--line); }
.dist li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font: 400 16px/26px var(--font-sans); color: var(--ink-muted); }
.dist b { font: 500 26px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.dist b small { font-size: 14px; margin-left: 3px; color: var(--ink-muted); }
.after__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); }
.calc { background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-5); }
.calc h3 { margin: 0; font: 500 22px/28px var(--font-sans); }
.calc__in { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.calc label { display: grid; gap: var(--space-2); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.calc input[type=number] { border: 0; border-bottom: 1px solid var(--line-strong); padding: 6px 0; font: 500 22px/1 var(--font-display); color: var(--ink); background: transparent; width: 100%; }
.calc input[type=number]:focus { outline: none; border-bottom: 2px solid var(--volcano); }
.calc input[type=range] { accent-color: var(--volcano); width: 100%; }
.calc__out { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.calc__out li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 16px/25px var(--font-sans); color: var(--ink-muted); }
.calc__out li b { font: 500 20px/22px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__out li.total { color: var(--ink); font-weight: 600; }
.calc__out li.total b { font-size: 32px; color: var(--volcano); }
.calc__note { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
.tiles { display: grid; gap: var(--space-4); }
.tile { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-5); align-items: center; background: var(--basalt-raised); border-radius: var(--radius-md); overflow: hidden; color: var(--on-basalt); text-decoration: none; transition: transform var(--duration-base) var(--ease-out); }
.tile:hover { transform: translateX(6px); }
.tile .at-media { position: relative; height: 150px; }
.tile > div:last-child { padding: var(--space-4) var(--space-5) var(--space-4) 0; min-width: 0; }
.tile small { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.tile h4 { margin: 6px 0; font: 500 28px/1 var(--font-display); text-transform: uppercase; }
.tile p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--sage); }
.inq { display: grid; grid-template-columns: 120px 1fr 1fr; gap: var(--space-8); }
.inq .at-vertical { font-size: 96px; }
.inq h2 { margin: var(--space-4) 0 var(--space-5); font: 300 64px/.92 var(--font-display); text-transform: uppercase; }
.inq h2 strong { font-weight: 600; color: var(--volcano); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 85; background: rgba(16,14,12,.95); display: none; place-items: center; }
.lb.open { display: grid; animation: at-in var(--duration-base) var(--ease-out); }
.lb__img { position: relative; width: min(1100px, 86vw); aspect-ratio: 3 / 2; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; }
.lb__img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb button { position: absolute; appearance: none; border: 1px solid var(--on-basalt-muted); background: transparent; color: var(--on-basalt); width: 56px; height: 56px; border-radius: var(--radius-pill); cursor: pointer; font: 400 20px/1 var(--font-sans); }
.lb button:hover { background: var(--on-basalt); color: var(--basalt); }
.lb__prev { left: max(32px, env(safe-area-inset-left, 0px)); top: 50%; } .lb__next { right: max(32px, env(safe-area-inset-right, 0px)); top: 50%; } .lb__close { right: max(32px, env(safe-area-inset-right, 0px)); top: calc(32px + env(safe-area-inset-top, 0px)); }
.lb__count { position: absolute; left: max(32px, env(safe-area-inset-left, 0px)); top: calc(44px + env(safe-area-inset-top, 0px)); color: var(--on-basalt); font: 500 15px/1 var(--font-display); letter-spacing: .16em; }

/* ---------- SELL ---------- */
.valwrap { position: relative; z-index: 5; margin-top: -120px; }
.val { max-width: 960px; margin: 0 auto; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-float); overflow: hidden; }
.val__bar { height: 3px; background: var(--line); }
.val__bar i { display: block; height: 100%; width: 25%; background: var(--volcano); transition: width 600ms var(--ease-inout); }
.val__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6) 0; }
.val__step { display: none; padding: var(--space-5) var(--space-6) var(--space-6); }
.val__step.is-active { display: grid; gap: var(--space-5); animation: at-in var(--duration-base) var(--ease-out); }
.val__step h3 { margin: 0; font: 300 44px/1 var(--font-display); text-transform: uppercase; }
.val__step h3 strong { font-weight: 600; color: var(--volcano); }
.choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.choice button { appearance: none; border: 1px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); text-align: left; cursor: pointer; display: grid; gap: 6px; transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-base) var(--ease-out); color: var(--ink); }
.choice button:hover { border-color: var(--ink); transform: translateY(-2px); }
.choice button[aria-pressed="true"] { border-color: var(--volcano); background: #fbf2ef; box-shadow: inset 0 0 0 1px var(--volcano); }
.choice b { font: 500 26px/1 var(--font-display); text-transform: uppercase; }
.choice span { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.val__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.val__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.at-field select { cursor: pointer; }
.scrolly { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: start; }
.scrolly__l { position: sticky; top: 160px; }
.scrolly__r { display: grid; gap: var(--space-7); }
.step { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); padding-bottom: var(--space-7); border-bottom: 1px solid var(--line); }
.step .n { font: 500 88px/.8 var(--font-display); color: #cfc6b8; transition: color 600ms var(--ease-out); font-variant-numeric: tabular-nums; }
.step.lit .n { color: var(--volcano); }
.step h3 { margin: 0 0 var(--space-3); font: 500 30px/1.05 var(--font-display); text-transform: uppercase; }
.step p { margin: 0 0 var(--space-3); font: 400 17px/28px var(--font-sans); color: var(--ink-muted); max-width: 48ch; }
.mkt { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.mkt div { border-top: 1px solid var(--line-basalt); padding-top: var(--space-4); }
.mkt b { display: block; font: 500 26px/1.05 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-2); }
.mkt span { font: 400 15px/24px var(--font-sans); color: var(--on-basalt-muted); }
.mkt-media { position: relative; height: 560px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-7); }
.mkt-media .at-media { position: absolute; inset: 0; }
.play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1px solid rgba(243,238,231,.6); color: var(--on-basalt); background: rgba(16,14,12,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; font: 600 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- BUILD / MANAGE shared ---------- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.path { position: relative; height: 520px; border-radius: var(--radius-md); overflow: hidden; color: var(--on-basalt); text-decoration: none; display: block; }
.path .at-media { position: absolute; inset: 0; }
.path .at-media > svg { transition: transform 1400ms var(--ease-out); }
.path:hover .at-media > svg { transform: scale(1.06); }
.path::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,12,.1), var(--scrim)); }
.path__b { position: absolute; z-index: 2; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); }
.path__b small { font: 600 11px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ember); }
.path__b h3 { margin: var(--space-2) 0; font: 300 52px/.9 var(--font-display); text-transform: uppercase; }
.path__b h3 strong { font-weight: 600; }
.path__b p { margin: 0; font: 400 16px/26px var(--font-sans); opacity: .9; max-width: 36ch; }
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.grid6 > div { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 1px solid var(--line); }
.grid6 > div:not(:nth-child(3n)) { border-right: 1px solid var(--line); }
.grid6 > div:not(:nth-child(3n+1)) { padding-left: var(--space-6); }
.grid6 h3 { margin: 0 0 var(--space-3); font: 500 30px/1 var(--font-display); text-transform: uppercase; }
.grid6 p { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; font: 500 26px/1.15 var(--font-display); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: 0 0 auto; width: 14px; height: 14px; position: relative; transition: transform var(--duration-base) var(--ease-out); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; background: var(--volcano); }
.faq summary i::before { left: 0; right: 0; top: 6px; height: 2px; } .faq summary i::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--space-5); font: 400 17px/28px var(--font-sans); color: var(--ink-muted); max-width: 70ch; }
.faqgrid { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-8); }
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.pkg { background: var(--paper-raised); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); border: 1px solid var(--line); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.pkg.dark { background: var(--basalt); color: var(--on-basalt); border-color: var(--basalt); }
.pkg small { font: 600 11px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--volcano); }
.pkg.dark small { color: var(--ember); }
.pkg h3 { margin: 0; font: 300 64px/.9 var(--font-display); text-transform: uppercase; }
.pkg h3 strong { font-weight: 600; }
.pkg p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-muted); }
.pkg.dark p { color: var(--on-basalt-muted); }
.pkg .at-checks { grid-template-columns: 1fr; flex: 1; align-content: start; }
.pkg.dark .at-checks li { border-bottom-color: var(--line-basalt); }
.pkg.dark .at-checks li::before { color: var(--ember); }
.pkg .fee { font: 500 15px/22px var(--font-sans); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.pkg.dark .fee { border-top-color: var(--line-basalt); }

/* ---------- DEVELOPMENTS ---------- */
.devtop { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.devfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.devfacts div { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.devfacts div:nth-child(odd) { padding-right: var(--space-5); border-right: 1px solid var(--line); }
.devfacts div:nth-child(even) { padding-left: var(--space-5); }
.devfacts b { display: block; font: 500 34px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.prog { margin-top: var(--space-6); }
.prog__bar { height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; margin: var(--space-3) 0; }
.prog__bar i { display: block; height: 100%; width: 0; background: var(--volcano); transition: width 1600ms var(--ease-out); }
.prog__lbl { display: flex; justify-content: space-between; font: 600 11px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.units { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-7); align-items: start; }
.siteplan { background: var(--basalt-raised); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: 140px; }
.siteplan svg { width: 100%; height: auto; display: block; }
.siteplan .plot { stroke: var(--basalt); stroke-width: 3; cursor: pointer; transition: fill var(--duration-base), opacity var(--duration-base); }
.siteplan .plot.available { fill: var(--laurel); }
.siteplan .plot.reserved { fill: var(--ocean); }
.siteplan .plot.sold { fill: #4a4540; }
.siteplan .plot.hi { fill: var(--ember); }
.siteplan .plot.dim { opacity: .3; }
.siteplan text { fill: var(--on-basalt); font: 600 18px var(--font-display); pointer-events: none; }
.siteplan .road { fill: var(--basalt); }
.siteplan .m-lbl2 { fill: var(--on-basalt-muted); font: 600 10px var(--font-sans); letter-spacing: .2em; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font: 600 11px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-basalt-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tablewrap { overflow-x: auto; }
table.utab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.utab th { text-align: left; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-basalt-muted); padding: 0 12px 12px 0; border-bottom: 1px solid var(--line-basalt); white-space: nowrap; }
.utab td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-basalt); font: 400 16px/25px var(--font-sans); white-space: nowrap; }
.utab td:first-child { font: 500 22px/1 var(--font-display); text-transform: uppercase; }
.utab tbody tr { cursor: pointer; transition: background var(--duration-fast); }
.utab tbody tr:hover, .utab tbody tr.hi { background: rgba(243,238,231,.06); }
.utab tbody tr.hide { display: none; }
.st { display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.st.available { background: var(--laurel); color: var(--on-laurel); }
.st.reserved { background: var(--ocean); color: var(--on-ocean); }
.st.sold { background: #4a4540; color: var(--on-basalt); }
.upcoming { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; min-height: 480px; }
.upcoming__img { position: relative; }
.upcoming__img .at-media { position: absolute; inset: 0; }
.upcoming__txt { background: var(--basalt); color: var(--on-basalt); padding: var(--space-8) var(--space-7); display: grid; gap: var(--space-5); align-content: center; }
.upcoming__txt .at-field label { color: var(--on-basalt-muted); }
.upcoming__txt .at-field input { color: var(--on-basalt); border-bottom-color: var(--line-basalt); }
.upcoming__txt .at-field input::placeholder { color: var(--on-basalt-muted); }

/* ---------- AREAS ---------- */
.areasfull .at-areas { border-radius: 0; height: 640px; gap: 3px; }
.ns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ns__c { border-radius: var(--radius-md); padding: var(--space-7); display: grid; gap: var(--space-4); align-content: start; }
.ns__c.north { background: var(--laurel-deep); color: var(--on-basalt); }
.ns__c.south { background: var(--sand); }
.ns__c h3 { margin: 0; font: 300 72px/.9 var(--font-display); text-transform: uppercase; }
.ns__c h3 strong { font-weight: 600; }
.ns__c.north h3 strong { color: var(--ember); } .ns__c.south h3 strong { color: var(--volcano); }
.ns__c p { margin: 0; font: 400 17px/28px var(--font-sans); }
.ns__c.north p { color: var(--sage); } .ns__c.south p { color: var(--ink-muted); }
.ns__c dl { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--space-5); margin: 0; font: 400 16px/25px var(--font-sans); }
.ns__c dt { font: 600 10px/22px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.ns__c dd { margin: 0; }
.acards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-5); }
.acard { display: grid; gap: var(--space-3); text-decoration: none; }
.acard .at-media { position: relative; height: 300px; border-radius: var(--radius-md); }
.acard .at-media > svg { transition: transform 1400ms var(--ease-out); }
.acard:hover .at-media > svg { transform: scale(1.05); }
.acard small { font: 600 11px/16px var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--volcano); }
.acard h3 { margin: 0; font: 500 36px/1 var(--font-display); text-transform: uppercase; }
.acard p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-muted); }
.acard span.go { font: 600 11px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }

/* ---------- ABOUT ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.story__img { position: relative; height: 640px; border-radius: var(--radius-lg); overflow: hidden; }
.story__img .at-media { position: absolute; inset: 0; }
.story p { font: 400 17px/29px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-4); max-width: 52ch; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.values div { border-top: 1px solid var(--line-basalt); padding-top: var(--space-5); }
.values b { display: block; font: 300 48px/1 var(--font-display); color: var(--ember); margin-bottom: var(--space-3); }
.values h3 { margin: 0 0 var(--space-2); font: 500 28px/1 var(--font-display); text-transform: uppercase; }
.values p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--on-basalt-muted); }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.person { display: grid; gap: var(--space-3); }
.person .ph { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--sand); display: grid; place-items: center; font: 500 96px/1 var(--font-display); color: var(--ink-muted); }
.person .ph::after { content: "Portrait"; position: absolute; left: 12px; bottom: 12px; font: 600 9px/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.person b { font: 500 26px/1 var(--font-display); text-transform: uppercase; }
.person span { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }

/* ---------- CONTACT ---------- */
.cgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: start; }
.cinfo { display: grid; gap: var(--space-5); }
.cline { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.cline > div { min-width: 0; }
.cline small { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.cline b { font: 500 26px/1.1 var(--font-display); user-select: all; overflow-wrap: anywhere; }
.copy { appearance: none; border: 1px solid var(--line-strong); background: transparent; border-radius: var(--radius-pill); height: 34px; padding: 0 14px; font: 600 10px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.copy:hover { background: var(--ink); color: var(--paper); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--space-6); font: 400 16px/25px var(--font-sans); }
.hours dt { color: var(--ink-muted); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.openbadge { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--laurel); }
.openbadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav a.opt { display: none; }
}
@media (max-width: 900px) {
  :root { --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px)); --hdr: 68px; }
  .nav, .hd .lang, .hd .at-btn, .vside, .cursor, .scrollcue, .statement .ring { display: none; }
  .menubtn { display: inline-flex; }
  .band { padding-block: 72px; }
  .sechead, .barrow { flex-direction: column; align-items: flex-start; }
  .phero { min-height: 560px; padding-block: calc(var(--hdr) + 64px) 64px; }
  .phero .wrap, .build__head, .overview, .feat, .feat__groups, .plan2, .loc, .after__grid, .calc__in, .inq, .cform, .contact3, .ft__top, .offmarket, .scrolly, .mkt, .paths, .grid6, .faqgrid, .pkgs, .devtop, .units, .upcoming, .ns, .acards, .story, .values, .team, .cgrid, .val__grid, .choice, .mgmt { grid-template-columns: 1fr; }
  .team, .choice, .mkt { grid-template-columns: 1fr 1fr; }
  .grid6 > div { border-right: 0 !important; padding-left: 0 !important; }
  .hhero { height: 760px; }
  .hhero__in { bottom: 290px; }
  .hhero .kicker { font-size: 28px; }
  .hhero__lead { left: var(--gl); right: var(--gr); width: auto; bottom: 110px; }
  .intentwrap { margin-top: -48px; }
  .at-intent__tabs { overflow-x: auto; padding: 0 8px; }
  .at-intent__note { display: none; }
  .at-intent__panel.is-active { grid-template-columns: 1fr; }
  .at-intent__panel .at-search__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .at-intent__panel .at-btn { height: 52px; justify-content: center; }
  .proof { justify-content: flex-start; flex-direction: column; }
  .svc { flex-direction: column; height: auto; }
  .svc__p, .svc__p.is-open { flex: none; height: 440px; }
  .svc__v { display: none; }
  .svc__body { opacity: 1; transform: none; }
  .svc__body h3 { font-size: 56px; }
  .stage { height: 520px; }
  .stage__num { font-size: 120px; }
  .stage .at-stages small { display: none; }
  .stage .at-stages span { font-size: 9px; letter-spacing: .06em; }
  .reno .at-ba { height: 380px; }
  .gallery .at-card, .gallery .at-card.wide { flex-basis: 82vw; height: 460px; }
  .mgmt__img { min-height: 560px; }
  .mgmt__img .at-report, .rep-ex { right: var(--gr); left: var(--gl); width: auto; }
  .mgmt__txt { padding: 72px var(--gr) 72px var(--gl); }
  .marquee span { font-size: 64px; }
  .contact3 .at-vertical, .inq .at-vertical { display: none; }
  .filters .wrap { gap: var(--space-3) var(--space-4); }
  .filters .count { margin-left: 0; width: 100%; }
  .results { grid-template-columns: 1fr; }
  .mapview { height: 480px; }
  .mapcard { width: auto; right: var(--space-4); left: var(--space-4); }
  .prhero { height: 720px; }
  .prhero .crumbs, .hcount { display: none; }
  .prhero__ctrl { top: 84px; left: var(--gl); right: auto; }
  .prhero__title { bottom: 210px; right: var(--gr); }
  .prhero__price { left: var(--gl); right: auto; bottom: 110px; text-align: left; }
  .factsbar { position: relative; top: auto; margin-top: -64px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .fact { border-bottom: 1px solid var(--line); padding: 12px 14px; }
  .fact b { font-size: 24px; }
  .facts__cta { grid-column: 1 / -1; }
  .facts__cta .at-btn { flex: 1; height: 52px; justify-content: center; }
  .desc { columns: 1; }
  .agent, .siteplan, .scrolly__l { position: static; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px 140px; }
  .mosaic a:first-child { grid-column: span 2; grid-row: auto; }
  .num strong { font-size: 64px; }
  .map { height: 360px; }
  .tile { grid-template-columns: 110px 1fr; }
  .inq h2 { font-size: 44px; }
  .valwrap { margin-top: -64px; }
  .val__step h3 { font-size: 34px; }
  .step { grid-template-columns: 64px 1fr; }
  .step .n { font-size: 56px; }
  .mkt-media, .story__img { height: 380px; }
  .path { height: 420px; }
  .areasfull .at-areas { height: 520px; }
  .ns__c { padding: var(--space-6); }
  .ns__c h3 { font-size: 52px; }
  .lb button { width: 44px; height: 44px; }
  .ft__mark { font-size: 22vw; }
}
@media (max-width: 520px) {
  .team, .choice, .mkt { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .line > span { animation: none !important; transform: none; }
  .slide > svg, .hs > svg { transition: none; transform: none; }
  .marquee__track, .scrollcue::after, .pin::after { animation: none; }
  .statement .w { color: var(--ink); transition: none; }
  .pending, .pending-img { opacity: 1; transform: none; clip-path: none; }
  .cursor, .loader { display: none; }
  .curtain { display: none; }
  .menu, .menu nav a { transition: none; }
}

/* ============ BUY · search studio with Tenerife map ============ */
.phero--short { min-height: 600px; padding-bottom: 200px; }
.studio { background: transparent; padding-block: 0 72px; position: relative; z-index: 3; }
.studio__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-5); margin-top: -72px; align-items: start; }
.tfmap { background: #e3e9e7; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-float); }
.tfmap__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) var(--space-6) 0; }
.tfmap__hint { margin: 4px 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.tfmap__legend { display: flex; gap: var(--space-4); font: 600 10px/14px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.tfmap__legend i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.lg-sel { width: 12px; height: 12px; border-radius: 3px; background: var(--volcano); }
.lg-dot { display: none !important; }
.tfmap__stage { position: relative; }
#tfsvg { display: block; width: 100%; height: auto; }
#tfsvg .sealine { fill: none; stroke: #c4d2d0; stroke-width: 1; }
#tfsvg .island { fill: #efe9df; }
#tfsvg .coast { fill: none; stroke: #b9b0a3; stroke-width: 1.5; pointer-events: none; }
#tfsvg .region { fill: #efe9df; stroke: #fbf8f3; stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transition: fill 380ms var(--ease-out), opacity 380ms var(--ease-out); outline: none; }
#tfsvg .region.z-north, #tfsvg .region.z-northwest { fill: #e1e6d7; }
#tfsvg .region.z-metro { fill: #e6e7dc; }
#tfsvg .region[data-r="anaga"], #tfsvg .region[data-r="teno"] { fill: #d6dfcf; }
#tfsvg .region.z-west { fill: #efe6d9; }
#tfsvg .region.z-south { fill: #f1e7d8; }
#tfsvg .region.z-east { fill: #ece6db; }
#tfsvg .region.hov, #tfsvg .region:focus-visible { fill: #ead3c7; }
#tfsvg .region.sel { fill: var(--volcano); }
#tfsvg .region.sel.hov { fill: var(--volcano-deep); }
#tfsvg .region.dim { opacity: .55; }
#tfsvg .contour { fill: none; stroke: #b9b0a3; stroke-width: .8; opacity: .45; pointer-events: none; }
#tfsvg .park { stroke: #8e867c; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
#tfsvg .park-bg { fill: #e6ddd0; }
#tfsvg .park-line { stroke: #cdbfa9; stroke-width: 2; }
#tfsvg .peak { fill: var(--ink); pointer-events: none; }
#tfsvg .parklbl { font: 600 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; fill: var(--ink); pointer-events: none; }
#tfsvg .parklbl2 { font: 600 8px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; fill: var(--ink-muted); pointer-events: none; }
#tfsvg .rlabel { font: 600 10.5px var(--font-display); letter-spacing: .12em; text-transform: uppercase; fill: #6f675e; pointer-events: none; transition: fill 300ms; paint-order: stroke; stroke: rgba(239,233,223,.85); stroke-width: 3px; }
#tfsvg .rlabel.sel { fill: #ffffff; stroke: none; }
#tfsvg .rlabel.sel[data-r="puerto"] { fill: var(--volcano); }
#tfsvg .ocean { font: 500 22px var(--font-display); letter-spacing: .3em; text-transform: uppercase; fill: #93a8a5; pointer-events: none; }
#tfsvg .compass { fill: none; stroke: #93a8a5; stroke-width: 1; }
#tfsvg .needle { fill: var(--volcano); }
#tfsvg .nlbl { font: 600 10px var(--font-sans); letter-spacing: .14em; fill: #6f8784; }
#tfsvg .scale1 { fill: var(--ink); } #tfsvg .scale2 { fill: #93a8a5; }
#tfsvg .airport circle { fill: var(--paper-raised); stroke: #93a8a5; }
#tfsvg .airport text { font: 9px var(--font-sans); fill: var(--ink-muted); }
#tfsvg .ldot { cursor: pointer; }
#tfsvg .ldot .pin { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.72); opacity: .4; transition: transform 250ms var(--ease-out), opacity 250ms; }
#tfsvg .pin__body { fill: #8f877c; stroke: #fbf8f3; stroke-width: 1.4; transition: fill 250ms; }
#tfsvg .pin__house { fill: #fbf8f3; }
#tfsvg .ldot.on .pin { transform: scale(1); opacity: 1; }
#tfsvg .ldot.on .pin__body { fill: var(--ink); }
#tfsvg .ldot.hot .pin, #tfsvg .ldot:hover .pin { transform: scale(1.35); opacity: 1; }
#tfsvg .ldot.hot .pin__body, #tfsvg .ldot:hover .pin__body { fill: var(--volcano); }
.maplegend { position: absolute; right: var(--space-5); bottom: var(--space-5); margin: 0; display: flex; align-items: center; gap: 8px; background: rgba(251,248,243,.92); padding: 7px 12px; border-radius: var(--radius-pill); font: 600 10px/14px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.lg-pin { width: 11px; height: 15px; flex: none; }
#tfsvg .town { cursor: pointer; outline: none; }
#tfsvg .town__hit { fill: transparent; }
#tfsvg .town__dot { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 1.8; transition: fill 250ms, stroke 250ms; }
#tfsvg .town__lbl { font: 500 11px var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: rgba(251,248,243,.94); stroke-width: 3.5px; stroke-linejoin: round; opacity: 0; transition: fill 250ms, opacity 250ms; pointer-events: none; }
#tfsvg .town:hover .town__lbl, #tfsvg .town:focus-visible .town__lbl, #tfsvg .town.hovreg .town__lbl, #tfsvg .town.inreg .town__lbl, #tfsvg .town.sel .town__lbl { opacity: 1; }
#tfsvg .town.twin.hovreg:not(:hover):not(.sel) .town__lbl, #tfsvg .town.twin.inreg:not(:hover):not(.sel) .town__lbl { opacity: 0; }
#tfsvg .town__dot { r: 3.4; }
#tfsvg:hover .rlabel { opacity: .8; }
.mm-zone { margin: var(--space-3) 0 2px; padding: 0 10px; font: 600 11px/17px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.mm-zone:first-child { margin-top: 0; }
#tfsvg .town:hover .town__dot, #tfsvg .town:focus-visible .town__dot { fill: var(--ember); stroke: var(--volcano); }
#tfsvg .town:hover .town__lbl, #tfsvg .town:focus-visible .town__lbl { fill: var(--volcano); }
#tfsvg .town.inreg .town__lbl { fill: var(--volcano-deep); font-weight: 600; }
#tfsvg .town.inreg .town__dot { stroke: var(--volcano-deep); }
#tfsvg .town.sel .town__dot { fill: var(--volcano); stroke: #ffffff; r: 6.5; }
#tfsvg .town.sel .town__lbl { fill: var(--volcano); font-weight: 600; }

.tftip { position: absolute; z-index: 4; max-width: 260px; pointer-events: none; background: var(--basalt); color: var(--on-basalt); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-card); display: grid; gap: 2px; }
.tftip b { font: 500 18px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tftip span { font: 400 12px/17px var(--font-sans); color: var(--on-basalt-muted); }
.tfpop { position: absolute; z-index: 5; width: 290px; display: grid; grid-template-columns: 96px 1fr; background: var(--paper-raised); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-float); pointer-events: none; }
.tfpop .at-media { position: relative; height: 96px; }
.tfpop > div:last-child { padding: 10px 12px; display: grid; gap: 2px; align-content: center; min-width: 0; }
.tfpop b { font: 500 22px/1 var(--font-display); }
.tfpop span { font: 500 13px/18px var(--font-sans); }
.tfpop small { font: 400 11px/15px var(--font-sans); color: var(--ink-muted); }

.panel { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); background: var(--paper-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-6); display: grid; gap: 0; }
.panel__sec { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.panel__sec:first-child { padding-top: 0; }
.panel__row { display: flex; justify-content: space-between; align-items: center; }
.linkbtn { appearance: none; border: 0; background: none; padding: 0; font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--volcano); cursor: pointer; }
.where { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 36px; align-items: center; }
.where__empty { font: 400 16px/25px var(--font-sans); color: var(--ink-muted); }
.wchip { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 14px; border-radius: var(--radius-pill); background: var(--volcano); color: var(--on-volcano); font: 600 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; animation: at-in var(--duration-base) var(--ease-out); }
.wchip.town { background: var(--ink); color: var(--paper); }
.wchip i { font-style: normal; font-size: 11px; opacity: .75; }
.wchip:hover i { opacity: 1; }
.budget__val { display: flex; align-items: baseline; gap: var(--space-3); font: 500 34px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.budget__val i { font-style: normal; color: var(--line-strong); font-weight: 300; }
.budget__hist { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: var(--space-2); }
.budget__hist i { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; transition: height 500ms var(--ease-out), background 300ms; }
.budget__hist i.in { background: var(--ink); }
.budget__hist i.zero { background: var(--sand); }
.dual { position: relative; height: 28px; margin-top: -10px; }
.dual__track { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line); }
.dual__track i { position: absolute; top: 0; bottom: 0; background: var(--volcano); }
.dual input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; height: 28px; }
.dual input::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.dual input::-moz-range-track { background: transparent; }
.dual input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--volcano); box-shadow: 0 2px 8px rgba(22,20,18,.18); cursor: grab; }
.dual input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--paper-raised); border: 2px solid var(--volcano); box-shadow: 0 2px 8px rgba(22,20,18,.18); cursor: grab; }
.dual input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { appearance: none; border: 1px solid var(--line); background: transparent; border-radius: var(--radius-sm); padding: 9px 4px; font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast); }
.presets button:hover { border-color: var(--ink); }
.presets button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg5 { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px; gap: 3px; }
.seg5 button { appearance: none; border: 0; background: transparent; height: 34px; border-radius: var(--radius-pill); font: 500 16px/1 var(--font-display); letter-spacing: .06em; color: var(--ink); cursor: pointer; transition: background var(--duration-base) var(--ease-inout), color var(--duration-base); }
.seg5 button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.panel__cta { margin-top: var(--space-5); justify-content: center; height: 56px; font-size: 13px; }
.panel__cta span#f_count { font: 600 18px/1 var(--font-display); }
.reshead { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.reshead__t { margin: 0; font: 300 48px/1 var(--font-display); text-transform: uppercase; }
.reshead__t b { font-weight: 600; color: var(--volcano); font-variant-numeric: tabular-nums; }
.reshead .f { display: grid; gap: 2px; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.reshead select { appearance: none; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; font: 500 15px/22px var(--font-sans); color: var(--ink); padding: 2px 18px 4px 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 6px top 12px, right 1px top 12px; background-size: 5px 5px; background-repeat: no-repeat; }
.rcw { position: relative; }
@media (max-width: 1080px) { .studio__in { grid-template-columns: 1fr; } .panel { position: static; } }
@media (max-width: 900px) {
  .studio__in { margin-top: -48px; }
  .tfmap__head { flex-direction: column; padding: var(--space-4) var(--space-4) 0; }
  #tfsvg .town__lbl { font-size: 15px; } #tfsvg .rlabel { font-size: 13px; letter-spacing: .08em; } #tfsvg .ocean { font-size: 26px; }
  .tfpop, .tftip { display: none; }
  .panel { padding: var(--space-5); }
  .budget__val { font-size: 28px; }
  .reshead__t { font-size: 36px; }
}

/* ---------- where card + mini map (map opens on demand) ---------- */
.wherecard { background: var(--paper-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; }
.wherecard__top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.wherecard__t { margin: 6px 0 0; font: 500 44px/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.minimap { position: relative; appearance: none; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; background: #e3e9e7; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 760 / 600; max-width: 100%; }
.minimap svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 900ms var(--ease-out); }
.minimap:hover svg { transform: scale(1.04); }
.minimap .m-isl { fill: #efe9df; }
.minimap .m-reg { fill: transparent; stroke: #fbf8f3; stroke-width: 3; transition: fill 380ms var(--ease-out); }
.minimap .m-reg.sel { fill: var(--volcano); }
.minimap .m-coast { fill: none; stroke: #b9b0a3; stroke-width: 2; }
.minimap .m-park { fill: #e6ddd0; stroke: #b9b0a3; stroke-dasharray: 4 4; }
.minimap .m-town { fill: transparent; transition: fill 300ms; }
.minimap .m-town.sel { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.minimap__cta { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); padding: 10px 16px; font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; transition: background var(--duration-fast); }
.minimap:hover .minimap__cta { background: var(--volcano); }
.minimap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.quick { display: grid; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.quick .chip { min-height: 32px; padding: 0 12px; font-size: 10px; }
.cellbtn { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; position: relative; }
.cellbtn b { font: 500 15px/22px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cellbtn__ic { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font: 600 10px/1 var(--font-sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--volcano); }
.cellbtn:hover b { color: var(--volcano); }

/* ---------- map dialog ---------- */
.mapmodal { position: fixed; inset: 0; z-index: 75; background: rgba(16,14,12,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 24px) max(24px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(24px, env(safe-area-inset-left, 0px)); opacity: 0; transition: opacity 400ms var(--ease-out); }
.mapmodal.open { opacity: 1; }
.mapmodal__sheet { width: min(1240px, 100%); height: min(860px, 100%); background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 40px 120px rgba(16,14,12,.45); transform: translateY(24px) scale(.98); transition: transform 600ms var(--ease-out); }
.mapmodal.open .mapmodal__sheet { transform: none; }
.mapmodal__head { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); }
.mapmodal__head h2 { margin: 4px 0 0; font: 500 36px/1 var(--font-display); text-transform: uppercase; }
.mapmodal__head h2 strong { font-weight: 600; color: var(--volcano); }
.mapmodal__head .tfmap__legend { margin-left: auto; }
.mm-close { appearance: none; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: var(--radius-pill); height: 40px; padding: 0 18px; font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.mm-close:hover { background: var(--ink); color: var(--paper); }
.mapmodal__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; }
.mapmodal .tfmap__stage { position: relative; background: #e3e9e7; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.mapmodal #tfsvg { width: 100%; height: 100%; max-height: 100%; }
.mm-list { border-left: 1px solid var(--line); overflow-y: auto; padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.mm-list .h4 { margin: var(--space-3) 0 var(--space-2); }
.mm-list .h4:first-child { margin-top: 0; }
.mm-items { display: grid; gap: 2px; }
.mm-item { appearance: none; border: 0; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 9px 10px; border-radius: var(--radius-sm); font: 500 15px/22px var(--font-sans); color: var(--ink); cursor: pointer; text-align: left; transition: background var(--duration-fast); }
.mm-item:hover { background: var(--sand); }
.mm-item small { font: 500 14px/1 var(--font-display); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mm-item[aria-pressed="true"] { background: var(--volcano); color: var(--on-volcano); }
.mm-item[aria-pressed="true"] small { color: var(--on-volcano); }
#mm_towns .mm-item[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#mm_towns .mm-item[aria-pressed="true"] small { color: var(--paper); }
.mapmodal__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--paper-raised); }
.mapmodal__foot .tfmap__hint { margin: 0; }
#mm_done b { font: 600 18px/1 var(--font-display); }
@media (max-width: 900px) {
  .mapmodal { padding: env(safe-area-inset-top, 0px) 0 0 0; place-items: stretch; }
  .mapmodal__sheet { height: 100%; border-radius: 0; }
  .mapmodal__head { padding: var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .mapmodal__head h2 { font-size: 28px; }
  .mapmodal__head .tfmap__legend { display: none; }
  .mm-close { margin-left: auto; }
  .mapmodal__body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mapmodal .tfmap__stage { height: 46vh; }
  .mm-list { border-left: 0; border-top: 1px solid var(--line); }
  .mapmodal__foot { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .mapmodal__foot .tfmap__hint { display: none; }
  .mapmodal__foot .ctas { width: 100%; display: grid; grid-template-columns: auto 1fr; }
  .wherecard { padding: var(--space-5); }
  .wherecard__t { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .mapmodal, .mapmodal__sheet, .minimap svg { transition: none; } }

/* ---------- classic search + mode switch ---------- */
.modebar { display: flex; justify-content: center; margin-top: -150px; padding-bottom: var(--space-4); position: relative; z-index: 4; }
.modeseg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: rgba(246,243,238,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(243,238,231,.28); }
.modeseg button { appearance: none; border: 0; background: transparent; color: var(--on-basalt); height: 40px; padding: 0 20px; border-radius: var(--radius-pill); font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-base) var(--ease-inout), color var(--duration-base); }
.modeseg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.modeseg button:focus-visible { outline: 2px solid var(--on-basalt); outline-offset: 2px; }
.studio__in { margin-top: 0; }
.classic { grid-template-columns: 1.5fr 1fr 1.2fr .8fr auto; }
.classic .at-search__cell { border-right: 1px solid var(--line); }
.classic select { width: 100%; text-overflow: ellipsis; }
.classic .at-btn b { font: 600 18px/1 var(--font-display); }
.classic__more { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-5); }
.classic__more .chip { min-height: 32px; font-size: 10px; }
.loccell { position: relative; padding-right: 76px; }
.loccell label { display: block; }
.loccell select { appearance: none; border: 0; background: transparent; font: 500 15px/22px var(--font-sans); color: var(--ink); padding: 0; cursor: pointer; width: 100%; text-overflow: ellipsis; }
.mapbtn { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); appearance: none; border: 1px solid var(--line-strong); background: transparent; border-radius: var(--radius-pill); height: 30px; padding: 0 10px; font: 600 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--volcano); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.mapbtn:hover { background: var(--volcano); color: var(--on-volcano); border-color: var(--volcano); }
@media (max-width: 900px) {
  .phero--short { padding-bottom: 170px; }
  .modebar { margin-top: -130px; }
  .modeseg button { padding: 0 14px; font-size: 10px; letter-spacing: .12em; }
  .classic { grid-template-columns: 1fr 1fr; }
  .classic .at-search__cell:first-child { grid-column: 1 / -1; }
  .classic .at-search__cell { border-bottom: 1px solid var(--line); }
  .classic .at-btn { grid-column: 1 / -1; height: 52px; justify-content: center; }
}

/* inline interactive map (map search mode) */
.mapinline .tfmap__stage { position: relative; background: #e3e9e7; border-radius: var(--radius-md); overflow: hidden; }
.mapinline #tfsvg { display: block; width: 100%; height: auto; }

/* ============ map search: compact bar + results and map side by side ============ */
.mapmode { padding-top: 86px; }
.mbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 25; background: rgba(246,243,238,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.mbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 12px var(--gr) 12px var(--gl); }
.mbar__where { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1 1 auto; }
.mbar__where .where { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 0; }
.mbar__where .where::-webkit-scrollbar { display: none; }
.mbar__where .wchip { flex: 0 0 auto; height: 30px; font-size: 10px; }
.mbar__where .where__empty { font-size: 14px; white-space: nowrap; }
.mbar__filters { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.dd { position: relative; }
.ddbtn { appearance: none; display: grid; text-align: left; gap: 1px; height: 46px; padding: 6px 30px 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); cursor: pointer; position: relative; transition: border-color var(--duration-fast), background var(--duration-fast); min-width: 112px; }
.ddbtn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform var(--duration-base) var(--ease-out); }
.ddbtn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.ddbtn span { font: 600 10px/14px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.ddbtn b { font: 500 14px/18px var(--font-sans); white-space: nowrap; }
.ddbtn:hover, .ddbtn[aria-expanded="true"] { border-color: var(--ink); }
.ddbtn.set { border-color: var(--volcano); box-shadow: inset 0 0 0 1px var(--volcano); }
.ddbtn.set b { color: var(--volcano); }
.ddpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 300px; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-float); border: 1px solid var(--line); padding: var(--space-5); display: grid; gap: var(--space-4); animation: at-in var(--duration-base) var(--ease-out); }
.ddpop--wide { width: 400px; }
.ddpop--right { left: auto; right: 0; }
.ddpop .budget__val { font-size: 28px; }
.ddpop .seg5 { min-width: 300px; }
.mbar__fs { height: 46px; padding: 0 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; }
.split__list { padding: var(--space-6) var(--space-6) var(--space-8) var(--gl); min-width: 0; }
.split__list .reshead { margin-bottom: var(--space-5); }
.split__list .reshead__t { font-size: 36px; }
.split__list .results { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.split__list .results .at-card { height: 320px; }
.split__list .at-card__price { font-size: 26px; }
.split__list .at-card__name { font-size: 11px; letter-spacing: .12em; }
.split__map { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 140px); height: calc(100vh - 140px - env(safe-area-inset-top, 0px)); padding-right: env(safe-area-inset-right, 0px); background: #e3e9e7; }
.split__map .mapinline, .split__map .tfmap__stage { height: 100%; }
.split__map .tfmap__stage { border-radius: 0; display: grid; place-items: center; }
.split__map #tfsvg { width: 100%; height: 100%; }
.maphint-float { position: absolute; left: var(--space-5); bottom: var(--space-5); margin: 0; background: rgba(251,248,243,.92); padding: 8px 12px; border-radius: var(--radius-pill); font-size: 12px; pointer-events: none; }
@media (max-width: 1080px) {
  .mbar__in { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .mbar__filters { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ddpop { position: fixed; left: var(--gl); right: var(--gr); top: auto; width: auto; min-width: 0; margin-top: 8px; }
}
@media (max-width: 900px) {
  .mapmode { padding-top: 64px; }
  .split { grid-template-columns: 1fr; }
  .split__map { position: relative; top: auto; height: 56vh; order: -1; }
  .split__list { padding: var(--space-5) var(--gr) var(--space-7) var(--gl); }
  .split__list .results { grid-template-columns: 1fr; }
  .ddpop .seg5 { min-width: 0; }
  .mbar__fs { display: none; }
}

/* =====================================================================
   RESPONSIVE SYSTEM
   Tiers: ≥1600 wide · 1201–1599 desktop · 901–1200 tablet landscape / small laptop
          601–900 tablet portrait · ≤600 phone · ≤380 small phone · short landscape
   Plus container queries for the results list and touch-specific behaviour.
   ===================================================================== */

/* fluid type for every oversized moment */
.t72 { font-size: clamp(42px, 5.6vw, 72px) !important; }
.t64 { font-size: clamp(40px, 5vw, 64px) !important; }
.svc__body h3 { font-size: clamp(48px, 6vw, 88px); }
.stage__num { font-size: clamp(104px, 17vw, 240px); }
.stage__num small { font-size: clamp(24px, 3.4vw, 48px); }
.num strong { font-size: clamp(56px, 7vw, 96px); }
.marquee span { font-size: clamp(52px, 9vw, 120px); }
.pkg h3 { font-size: clamp(44px, 4.6vw, 64px); }
.path__b h3 { font-size: clamp(38px, 4vw, 52px); }
.ns__c h3 { font-size: clamp(46px, 5.4vw, 72px); }
.inq h2 { font-size: clamp(38px, 4.8vw, 64px); }
.val__step h3 { font-size: clamp(30px, 3.4vw, 44px); }
.reshead__t { font-size: clamp(30px, 3.6vw, 48px); }
.hhero .kicker { font-size: clamp(24px, 3.4vw, 44px); }
.contact3 .at-vertical, .inq .at-vertical { font-size: clamp(80px, 8vw, 112px); }
.statement p.big { font-size: clamp(30px, 4.6vw, 64px); }
.values b { font-size: clamp(36px, 3.6vw, 48px); }

/* results list adapts to its own width, wherever it sits */
.results { container-type: inline-size; }
.split__list { container-type: inline-size; }
@container (max-width: 460px) { .results { grid-template-columns: 1fr !important; } }
@container (min-width: 461px) and (max-width: 980px) { .results { grid-template-columns: repeat(2, 1fr) !important; } }
@container (min-width: 1300px) { .results { grid-template-columns: repeat(4, 1fr) !important; } }

/* ---------- wide screens ---------- */
@media (min-width: 1600px) {
  :root { --gl: max(96px, env(safe-area-inset-left, 0px)); --gr: max(96px, env(safe-area-inset-right, 0px)); }
  .wrap { max-width: 1520px; }
  .hhero, .prhero { height: 940px; }
  .phero { min-height: 700px; }
  .svc { height: 720px; }
  .stage { height: 780px; }
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .gallery .at-card { flex-basis: 460px; height: 580px; }
  .gallery .at-card.wide { flex-basis: 720px; }
}
@media (min-width: 2200px) {
  .wrap { max-width: 1760px; }
  body { font-size: 15px; }
}

/* ---------- small laptops & tablets in landscape ---------- */
@media (max-width: 1200px) {
  .hd .lang { display: none; }
  .phero .wrap { grid-template-columns: 1fr 300px; gap: var(--space-7); }
  .hhero__lead { width: 300px; }
  .overview { grid-template-columns: 1fr 320px; gap: 56px; }
  .contact3 { grid-template-columns: 1fr 360px; }
  .contact3 .at-vertical, .inq .at-vertical { display: none; }
  .inq { grid-template-columns: 1fr 1.1fr; }
  .facts { grid-template-columns: repeat(6, 1fr); }
  .facts__cta { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .facts__cta .at-btn { flex: 1; height: 52px; justify-content: center; }
  .feat { grid-template-columns: 1fr; gap: var(--space-6); }
  .mgmt__txt { padding-left: 96px; }
  .classic { grid-template-columns: repeat(3, 1fr); }
  .classic .at-search__cell { border-bottom: 1px solid var(--line); }
  .classic .at-search__cell:first-child { grid-column: span 3; }
  .classic .at-btn { grid-column: 1 / -1; height: auto; min-height: 64px; justify-content: center; }
  .mbar__where .label { display: none; }
}
@media (max-width: 1080px) {
  .ft__top { grid-template-columns: 1fr 1fr; }
  .after__grid, .units { grid-template-columns: 1fr; }
  .siteplan { position: static; }
  .values { grid-template-columns: 1fr 1fr; }
  .acards, .mkt { grid-template-columns: 1fr 1fr; }
  .grid6 { grid-template-columns: 1fr 1fr; }
  .grid6 > div { border-right: 0 !important; padding-left: 0 !important; padding-right: var(--space-5) !important; }
  .grid6 > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
  .grid6 > div:nth-child(even) { padding-left: var(--space-5) !important; }
  .scrolly { grid-template-columns: 1fr; gap: var(--space-6); }
  .scrolly__l { position: static; }
  .devtop { grid-template-columns: 1fr; gap: var(--space-6); }
  .pkgs { grid-template-columns: 1fr 1fr; }
  .pkgs .pkg:last-child { grid-column: 1 / -1; }
  .mgmt { grid-template-columns: 1fr 1fr; }
  .mgmt__txt { padding: 88px var(--gr) 88px 88px; }
  .mgmt__img .at-report { width: 340px; right: -40px; }
  .rep-ex { right: -40px; width: 340px; }
  .split__map { top: calc(env(safe-area-inset-top, 0px) + 196px); height: calc(100vh - 196px - env(safe-area-inset-top, 0px)); }
}

/* ---------- tablets in portrait ---------- */
@media (max-width: 900px) {
  .phero .wrap, .overview { grid-template-columns: 1fr; gap: var(--space-6); }
  .hhero__lead { left: var(--gl); right: var(--gr); }
  .ft__top { grid-template-columns: 1fr 1fr; }
  .ft__top > div:first-child { grid-column: 1 / -1; }
  .pkgs, .grid6 { grid-template-columns: 1fr; }
  .pkgs .pkg:last-child { grid-column: auto; }
  .grid6 > div { border-right: 0 !important; padding-inline: 0 !important; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .contact3 { grid-template-columns: 1fr; }
  .inq { grid-template-columns: 1fr; }
  .classic { grid-template-columns: 1fr 1fr; }
  .classic .at-search__cell:first-child { grid-column: 1 / -1; }
  .classic .at-btn { grid-column: 1 / -1; height: 56px; min-height: 0; }
  .mgmt { grid-template-columns: 1fr; }
  .mgmt__img { min-height: 520px; }
  .mgmt__img .at-report, .rep-ex { right: var(--gr); left: var(--gl); width: auto; max-width: 420px; }
  .mgmt__txt { padding: 72px var(--gr) 72px var(--gl); }
  .split__map { top: auto; height: min(56vh, 520px); min-height: 320px; }
  .hhero__lead { width: auto; }
  .statement { padding-block: 88px 72px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .acards, .team, .values, .mkt, .choice { grid-template-columns: 1fr 1fr; }
  .paths { grid-template-columns: 1fr 1fr; }
  .paths .path:last-child { grid-column: 1 / -1; }
  .path { height: 420px; }
  .ns { grid-template-columns: 1fr; }
  .hhero { height: 820px; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .band { padding-block: 64px; }
  .acards, .values, .ns { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .regform { grid-template-columns: 1fr !important; }
  .val__head { flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-4) var(--space-5) 0; }
  .val__step { padding: var(--space-4) var(--space-5) var(--space-5); }
  .val__nav { flex-wrap: wrap; }
  .phero h1 { font-size: clamp(56px, 17vw, 96px); }
  .prhero__title h1 { font-size: clamp(56px, 17vw, 96px); }
  .hhero h1 { font-size: clamp(72px, 23vw, 120px); }
  .hhero { height: 760px; }
  .mosaic { grid-template-rows: 200px 120px 120px; }
  .office { min-height: 300px; }
  .modeseg button { height: 38px; }
  /* dropdowns become bottom sheets */
  .ddpop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; min-width: 0; margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-6) max(var(--space-5), env(safe-area-inset-right, 0px)) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) max(var(--space-5), env(safe-area-inset-left, 0px)); max-height: 75vh; overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(16,14,12,.45), 0 -10px 40px rgba(16,14,12,.2); z-index: 60; animation: sheet var(--duration-base) var(--ease-out); }
  .ddpop::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin-top: -8px; }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .ddbtn { min-width: 96px; height: 44px; }
  .ft__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .ft__legal { flex-direction: column; }
  .reshead { align-items: flex-start; }
  .tile { grid-template-columns: 96px 1fr; gap: var(--space-4); }
  .tile .at-media { height: 120px; }
  .tile h4 { font-size: 22px; }
  .calc { padding: var(--space-5); }
  .calc__out li.total b { font-size: 26px; }
  .upcoming__txt { padding: var(--space-7) var(--space-5); }
  .ns__c { padding: var(--space-5); }
  .pkg { padding: var(--space-5); }
}
@media (max-width: 380px) {
  :root { --gl: max(14px, env(safe-area-inset-left, 0px)); --gr: max(14px, env(safe-area-inset-right, 0px)); }
  .agent__row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts .fact:nth-child(5), .facts .fact:nth-child(6) { display: none; }
  .team, .choice, .mkt { grid-template-columns: 1fr; }
  .chip { padding: 0 12px; }
  .modeseg button { padding: 0 10px; letter-spacing: .08em; }
  .logo b { font-size: 21px; letter-spacing: .26em; }
  .logo__mark { width: 34px; height: 34px; }
  .logo { gap: 9px; }
  .ft__top { grid-template-columns: 1fr; }
}

/* ---------- short screens: phones in landscape, small laptops ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hhero, .prhero { height: 620px; }
  .hhero__in { bottom: 120px; }
  .scrollcue, .vside { display: none; }
  .phero { min-height: 0; padding-block: calc(var(--hdr) + 32px) 48px; }
  .phero--short { padding-bottom: 160px; }
  .split__map { height: 80vh; min-height: 0; }
  .mapmodal__body { grid-template-columns: minmax(0, 1fr) 240px !important; grid-template-rows: none !important; }
  .mapmodal .tfmap__stage { height: auto !important; }
  .mm-list { border-top: 0 !important; border-left: 1px solid var(--line) !important; }
  .mapmodal__head h2 { font-size: 22px; }
  .menu nav a { font-size: 36px; }
}

/* ---------- touch screens ---------- */
@media (hover: none) {
  .cursor { display: none; }
  .at-card:hover { transform: none; box-shadow: none; }
  .mosaic a:hover .at-media > svg, .path:hover .at-media > svg, .acard:hover .at-media > svg { transform: none; }
  .ddbtn, .chip, .seg5 button, .presets button, .mm-item { min-height: 44px; }
  .dual input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 0; }
  .dual input::-moz-range-thumb { width: 24px; height: 24px; }
  .gallery { cursor: auto; }
}
@media (hover: none) and (min-width: 901px) {
  /* tablets: panels open on first tap, show a hint so people know to tap */
  .svc__p:not(.is-open) .svc__v::after { content: " +"; color: var(--ember); }
}

@media (max-width: 900px) { .maplegend { top: var(--space-4); bottom: auto; right: var(--space-4); } }

/* =====================================================================
   FEATURE LAYER — cost calculator, buying guide, rental estimate,
   listing states, saved homes + compare, WhatsApp, cookies, legal, 404
   ===================================================================== */
/* purchase cost calculator */
.tcost { gap: var(--space-5); }
.tc__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tc-kind { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.tc-kind button { appearance: none; border: 0; background: transparent; height: 34px; padding: 0 16px; border-radius: var(--radius-pill); font: 600 10px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.tc-kind button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tc__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-5); }
.tc__in label > span:first-child:not(.tc-eur) { display: flex; justify-content: space-between; }
.tc-mv, .rc-ov { color: var(--volcano); }
.tc__in label { display: grid; gap: var(--space-2); align-content: start; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.tc__in label small { font: inherit; letter-spacing: .1em; text-transform: none; opacity: .8; }
.tc__in label[hidden] { display: none; }
.tc__in select { appearance: none; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23161412' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center; padding: 8px 18px 8px 0; font: 500 15px/22px var(--font-sans); color: var(--ink); letter-spacing: 0; text-transform: none; min-width: 0; width: 100%; text-overflow: ellipsis; }
.tc__in select:disabled { opacity: .7; }
.tc__in input[type=number] { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 6px 0; font: 500 22px/1 var(--font-display); color: var(--ink); background: transparent; width: 100%; min-width: 0; -moz-appearance: textfield; }
.tc__in input[type=number]:focus, .tc__in select:focus { outline: none; border-bottom: 2px solid var(--volcano); }
.tc__in input[type=range] { accent-color: var(--volcano); width: 100%; margin: 10px 0 0; }
.tc-eur { position: relative; display: block; }
.tc-eur::before { content: "€"; position: absolute; left: 0; top: 7px; font: 500 22px/1 var(--font-display); color: var(--ink-muted); }
.tc-eur input[type=number] { padding-left: 16px; }
.tc__bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--sand); }
.tc__bar i, .tc__legend i { display: block; transition: width 500ms var(--ease-out); }
.b-price { background: var(--ink); } .b-tax { background: var(--volcano); } .b-fee { background: var(--ember); }
.tc__legend b { font-weight: 600; color: var(--ink); letter-spacing: .04em; margin-left: 2px; }
.tc__legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.tc__legend span { display: inline-flex; align-items: center; gap: 6px; }
.tc__legend i { width: 9px; height: 9px; border-radius: 2px; }
.tc__out, .rc__out { display: grid; gap: var(--space-4); align-content: start; }
.tc-list li.tax b { color: var(--volcano); }
.tc__tot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tc__tot > div { background: var(--sand); border-radius: var(--radius-sm); padding: var(--space-4); display: grid; gap: 4px; }
.tc__tot > div:last-child { background: var(--ink); color: var(--paper); }
.tc__tot small { font: 600 11px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.tc__tot b { font: 500 clamp(26px, 2.6vw, 34px)/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.tc__tot span { font: 400 14px/20px var(--font-sans); opacity: .8; }
.tcost--wide { grid-template-columns: 1fr; }
/* buying guide */
.guide { background: var(--paper); }
.guide__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-7); align-items: start; }
.guide .calc { border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; }
.steps li { counter-increment: st; position: relative; padding: 0 0 var(--space-5) 64px; }
.steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: -4px; font: 500 34px/1 var(--font-display); color: var(--volcano); }
.steps li::after { content: ""; position: absolute; left: 20px; top: 40px; bottom: 6px; width: 1px; background: var(--line-strong); }
.steps li:last-child::after { display: none; }
.steps b { display: block; font: 500 20px/26px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.steps p { margin: 4px 0 0; font: 400 16px/26px var(--font-sans); color: var(--ink-muted); max-width: 46ch; }
/* rental estimate */
.rentband { background: var(--sand); }
.rentcalc { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--space-7); border: 1px solid var(--line); }
.rc__in { grid-template-columns: 1fr 1fr; }
.rc__in label:last-child { grid-column: 1 / -1; }
/* listing card states */
.at-tag--reduced { background: var(--ember); color: #1c0f0b; }
.at-card__was { display: block; font: 400 15px/1.2 var(--font-sans); opacity: .7; margin-bottom: 2px; text-decoration-thickness: 1px; }
.at-card__alt { opacity: 0; transition: opacity 600ms var(--ease-out); }
@media (hover: hover) { .at-card:hover .at-card__alt { opacity: 1; } }
.at-card.is-reserved .at-media:not(.at-card__alt) { filter: saturate(.35) brightness(.8); }
.at-card.is-reserved::before { content: "Reserved"; position: absolute; z-index: 2; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); padding: 8px 22px; border: 1.5px solid rgba(246,243,238,.85); border-radius: var(--radius-sm); font: 500 22px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--on-basalt); pointer-events: none; }
/* saved bar + compare */
.savebar { position: fixed; z-index: 45; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-4); padding: 8px 8px 8px 20px; background: var(--ink); color: var(--paper); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); }
.savebar[hidden] { display: none; }
.savebar__n { font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.savebar__n i { font-style: normal; color: var(--ember); }
.savebar .at-btn { height: 40px; }
.savebar.bump { animation: bump 500ms var(--ease-out); }
@keyframes bump { 40% { transform: translateX(-50%) scale(1.06); } }
.cmp { position: fixed; inset: 0; z-index: 70; background: rgba(16,14,12,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--space-5); }
.cmp[hidden] { display: none; }
body.cmp-open { overflow: hidden; }
.cmp__box { background: var(--paper); border-radius: var(--radius-lg); width: min(1180px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: var(--shadow-float); }
.cmp__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); }
.cmp__head h2 { margin: 4px 0 0; font: 400 clamp(28px, 3vw, 40px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.cmp__head h2 strong { color: var(--volcano); font-weight: 600; }
.cmp__close { appearance: none; border: 1px solid var(--line-strong); background: transparent; height: 40px; padding: 0 18px; border-radius: var(--radius-pill); font: 600 11px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.cmp__body { overflow: auto; padding: 0 var(--space-6) var(--space-4); }
.cmp__t { border-collapse: collapse; width: 100%; min-width: 560px; }
.cmp__t th { position: sticky; left: 0; background: var(--paper); text-align: left; vertical-align: top; width: 130px; padding: 12px 12px 12px 0; font: 600 11px/17px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); z-index: 1; }
.cmp__t td { vertical-align: top; padding: 12px; border-bottom: 1px solid var(--line); font: 400 16px/25px var(--font-sans); min-width: 190px; }
.cmp__t tr:first-child td { border-bottom: 0; padding-top: var(--space-5); position: relative; }
.cmp__t td b { display: block; font-weight: 600; }
.cmp__t td small { display: block; color: var(--ink-muted); font-size: 13px; }
.cmp__price { font: 500 28px/1.1 var(--font-display) !important; }
.cmp__img { display: block; position: relative; height: 150px; border-radius: var(--radius-md); overflow: hidden; }
.cmp__img .at-media { position: absolute; inset: 0; }
.cmp__rm { position: absolute; top: calc(var(--space-5) + 8px); right: 20px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(246,243,238,.92); cursor: pointer; font-size: 13px; }
.cmp__chip { display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--laurel-tint, #e3e9dd); font-size: 13px; }
.cmp__go { height: 40px; }
.cmp__note, .cmp__empty { margin: 0; padding: var(--space-4) var(--space-6); font: 400 15px/23px var(--font-sans); color: var(--ink-muted); border-top: 1px solid var(--line); }
.cmp__empty { border: 0; font-size: 15px; padding: var(--space-6) 0; }
/* WhatsApp */
.wa { position: fixed; z-index: 44; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: var(--radius-pill); background: var(--laurel); color: var(--on-laurel); text-decoration: none; font: 600 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--shadow-float); transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast); }
.wa svg { width: 22px; height: 22px; }
.wa:hover { transform: translateY(-2px); background: var(--laurel-deep); }
.wa:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
body.is-mapsearch .wa { display: none; }
/* cookies */
.ck { position: fixed; z-index: 46; left: max(18px, env(safe-area-inset-left, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100vw - 36px)); background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-float); display: grid; gap: var(--space-4); transform: translateY(16px); opacity: 0; transition: transform 400ms var(--ease-out), opacity 400ms; }
.ck[hidden] { display: none; }
.ck.in { transform: none; opacity: 1; }
.ck p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.ck p b { display: block; margin-bottom: 4px; color: var(--ink); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }
.ck a { color: var(--volcano); }
.ck__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ck__btns .at-btn { height: 42px; flex: 1 1 auto; justify-content: center; }
/* legal */
.legal { max-width: 820px; display: grid; gap: var(--space-6); }
.legal__draft { margin: 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--ember); background: var(--sand); font: 500 14px/22px var(--font-sans); }
.legal__toc { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.legal__toc a { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--volcano); text-decoration: none; }
.legal article { scroll-margin-top: 100px; }
.legal h2 { margin: 0 0 var(--space-4); font: 500 34px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.legal p, .legal li { font: 400 16px/27px var(--font-sans); color: var(--ink-muted); }
.legal ul { padding-left: 1.1em; }
/* 404 */
.nf { position: relative; min-height: 100svh; display: grid; align-items: end; background: var(--basalt); color: var(--on-basalt); overflow: hidden; }
.nf .at-media { position: absolute; inset: 0; opacity: .7; }
.nf__in { position: relative; padding-bottom: var(--space-9, 120px); display: grid; gap: var(--space-4); }
.nf__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.nf .at-btn--ghost { --at-btn-fg: var(--on-basalt); border-color: var(--line-basalt); color: var(--on-basalt); }
.ft__legal a { color: inherit; text-decoration: none; }
.ft__legal a:hover { color: var(--on-basalt); }
/* responsive */
@media (max-width: 1080px) { .guide__grid, .rentcalc { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tc__in, .rc__in { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .tc__in label:first-child, .tc-sitw, .tc-neww { grid-column: 1 / -1; }
  .tc__tot { grid-template-columns: 1fr; }
  .steps li { padding-left: 52px; }
  .steps li::before { font-size: 28px; }
  .wa { height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wa span { display: none; }
  .savebar { left: 16px; right: 84px; transform: none; justify-content: space-between; }
  .savebar.bump { animation: none; }
  .ck { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  body.ck-open .savebar, body.ck-open .wa { visibility: hidden; }
  .cmp { padding: 0; place-items: stretch; }
  .cmp__box { border-radius: 0; max-height: 100vh; height: 100%; }
  .cmp__head, .cmp__body { padding-left: var(--space-5); padding-right: var(--space-5); }
  .cmp__t th { width: 96px; }
  .cmp__t td { min-width: 170px; }
}
@media (max-width: 380px) { .tc__in, .rc__in { grid-template-columns: 1fr; } .tc-kind button { padding: 0 11px; } }
@media (prefers-reduced-motion: reduce) { .ck, .savebar, .wa, .at-card__alt, .tc__bar i { transition: none; animation: none; } }

/* ---------- map zoom (optional, switch on the map) ---------- */
#tfsvg { --k: 1; }
#tfsvg .region { stroke-width: calc(1.6px / var(--k)); }
#tfsvg .coast { stroke-width: calc(1.5px / var(--k)); }
#tfsvg .contour { stroke-width: calc(.8px / var(--k)); }
#tfsvg .park { stroke-width: calc(1px / var(--k)); stroke-dasharray: calc(3px / var(--k)) calc(3px / var(--k)); }
#tfsvg .rlabel { font-size: calc(10.5px / var(--k)); stroke-width: calc(3px / var(--k)); }
#tfsvg .parklbl { font-size: calc(11px / var(--k)); }
#tfsvg .parklbl2 { font-size: calc(8px / var(--k)); }
#tfsvg .peak { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(1 / var(--k))); }
#tfsvg #extras, #tfsvg #sealines { transition: opacity 400ms; }
#tfsvg.zoomed #extras, #tfsvg.zoomed #sealines { opacity: 0; pointer-events: none; }
#tfsvg.zoomed .rlabel { font-size: calc(12px / var(--k)); }
#tfsvg .ptag { opacity: 0; transition: opacity 300ms; pointer-events: none; }
#tfsvg .ptag rect { fill: var(--paper-raised); stroke: rgba(22,20,18,.14); stroke-width: 1; }
#tfsvg .ptag text { font: 600 10.5px var(--font-sans); fill: var(--ink); letter-spacing: .02em; }
#tfsvg.zoomed .ldot.on .ptag { opacity: 1; }
#tfsvg.zoomed .ldot.on:hover .ptag rect, #tfsvg.zoomed .ldot.on.hot .ptag rect { fill: var(--volcano); stroke: none; }
#tfsvg.zoomed .ldot.on:hover .ptag text, #tfsvg.zoomed .ldot.on.hot .ptag text { fill: #fff; }
.mapctl { position: absolute; z-index: 3; left: var(--space-5); top: var(--space-5); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.zswitch, .zout { appearance: none; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(251,248,243,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 10px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; box-shadow: 0 6px 18px -10px rgba(22,20,18,.35); }
.zout { padding: 0 14px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.zout[hidden] { display: none; }
.zswitch i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--line-strong); transition: background var(--duration-fast); flex: none; }
.zswitch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 220ms var(--ease-out); }
.zswitch[aria-checked="true"] i { background: var(--volcano); }
.zswitch[aria-checked="true"] i::after { transform: translateX(12px); }
.zswitch:focus-visible, .zout:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) { .mapctl { left: var(--space-3); top: var(--space-3); } .zswitch, .zout { height: 34px; } }

/* ---------- premium dropdowns ---------- */
.csel__native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.csel { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; border: 0; background: transparent; padding: 0; margin: 0; font: 500 15px/22px var(--font-sans); color: var(--ink); text-align: left; cursor: pointer; }
.csel__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.csel__chev { width: 11px; height: 8px; flex: none; color: var(--ink-muted); transition: transform 250ms var(--ease-out), color 200ms; }
.csel:hover .csel__chev { color: var(--volcano); }
.csel[aria-expanded="true"] .csel__chev { transform: rotate(180deg); color: var(--volcano); }
.csel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.at-search__cell { cursor: pointer; transition: background var(--duration-fast); }
.at-search__cell:hover, .at-search__cell.csel-open { background: rgba(240,234,224,.55); }
.at-search__cell.csel-open { box-shadow: inset 0 -2px 0 var(--volcano); }
.loccell .csel { padding-right: 4px; }
.reshead .f { cursor: pointer; }
.reshead .csel { min-width: 150px; border-bottom: 1px solid var(--line-strong); padding: 2px 0 4px; }
.cpop { position: fixed; z-index: 95; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 24px 60px -24px rgba(22,20,18,.45), 0 2px 8px -4px rgba(22,20,18,.15); padding: 6px; overflow: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); scrollbar-width: thin; }
.cpop.up { transform-origin: bottom center; transform: translateY(6px) scale(.985); }
.cpop.in { opacity: 1; transform: none; }
.cpop[hidden] { display: none; }
.cpop__head { display: none; }
.cpop__g { padding: 14px 12px 6px; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.cpop__g:first-child { padding-top: 8px; }
.cpop__o { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--radius-sm); font: 500 15px/20px var(--font-sans); color: var(--ink); cursor: pointer; transition: background 120ms; }
.cpop__o svg { width: 16px; height: 16px; flex: none; color: var(--volcano); opacity: 0; transform: scale(.6); transition: opacity 150ms, transform 200ms var(--ease-out); }
.cpop__o.act { background: var(--sand); }
.cpop__o.on { color: var(--volcano); font-weight: 600; }
.cpop__o.on svg { opacity: 1; transform: none; }
.cveil { position: fixed; inset: 0; z-index: 94; background: rgba(16,14,12,.45); opacity: 0; transition: opacity 220ms; }
.cveil.in { opacity: 1; }
.cveil[hidden] { display: none; }
body.csel-lock { overflow: hidden; }
.cpop.sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; padding: 0 8px max(12px, env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 320ms var(--ease-out), opacity 200ms; display: flex; flex-direction: column; overflow: hidden; }
.cpop.sheet.in { transform: none; }
.cpop.sheet .cpop__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.cpop.sheet .cpop__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line-strong); }
.cpop.sheet .cpop__head b { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }
.cpop__x { appearance: none; border: 1px solid var(--line-strong); background: transparent; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--ink); }
.cpop.sheet .cpop__list { overflow: auto; overscroll-behavior: contain; padding-top: 4px; }
.cpop.sheet .cpop__o { min-height: 50px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .cpop, .cpop.sheet, .cveil, .csel__chev, .cpop__o svg { transition: none; } }
.at-search__cell .csel__v, .reshead .csel__v { font: 500 15px/22px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }

#tfsvg.zoomed .ldot.on.tag-hide .ptag { opacity: 0; }
#tfsvg.zoomed .ldot.on.tag-hide:hover .ptag, #tfsvg.zoomed .ldot.on.tag-hide.hot .ptag { opacity: 1; }
#tfsvg .ldot:hover, #tfsvg .ldot.hot { isolation: isolate; }
.l-short { display: none; }
@media (max-width: 600px) { .mapctl .l-long, .maplegend .l-long { display: none; } .mapctl .l-short, .maplegend .l-short { display: inline; } .maplegend { right: var(--space-3); top: var(--space-3); } }
@media (max-width: 380px) { .classic .csel__v { font-size: 14px; letter-spacing: -.01em; } .classic .csel { gap: 6px; } }

/* =====================================================================
   DESIGN REFINEMENT — calmer titles, lighter rhythm, readable text,
   light result cards, one icon style, quieter motion
   ===================================================================== */
/* titles: weight contrast by default, red only where it earns it */
.at-title strong, .at-dark .at-title strong, .at-title--on-photo strong { color: inherit; }
.at-title.accent strong { color: var(--volcano); }
.at-dark .at-title.accent strong { color: var(--ember); }
/* readable body copy */
.at-lead { font-size: 19px; line-height: 31px; }
.at-checks li { font-size: 16px; line-height: 24px; }
/* quieter motion */
.pending { transform: translateY(14px); }
.revealing { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
/* footer ends on the logo, not a second giant wordmark */
.ft__mark { display: none; }
.ft { padding-bottom: var(--space-6); }
/* lighter "after you buy" band on the property page */
.afterbuy .tile { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); }
.afterbuy .tile p { color: var(--ink-muted); }
.afterbuy .tile small { color: var(--volcano); }
.afterbuy .calc { border: 1px solid var(--line); box-shadow: var(--shadow-card); }
/* one icon style: thin line arrow, heart and check */
.at-arrow { display: inline-block; width: 15px; height: 10px; font-size: 0 !important; line-height: 0; vertical-align: middle; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13.5M9.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13.5M9.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.at-arrow--down { transform: rotate(90deg); }
.at-btn:hover .at-arrow--down { transform: rotate(90deg) translateX(3px); }
.heart, .save[data-heart] { font-size: 0 !important; }
.heart::before, .save[data-heart]::before { content: ""; display: block; width: 18px; height: 16px; margin: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 14.6S1.5 10.2 1.5 5.3A3.8 3.8 0 0 1 9 3.6a3.8 3.8 0 0 1 7.5 1.7C16.5 10.2 9 14.6 9 14.6Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 14.6S1.5 10.2 1.5 5.3A3.8 3.8 0 0 1 9 3.6a3.8 3.8 0 0 1 7.5 1.7C16.5 10.2 9 14.6 9 14.6Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.heart[aria-pressed="true"]::before, .save[data-heart][aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 14.6S1.5 10.2 1.5 5.3A3.8 3.8 0 0 1 9 3.6a3.8 3.8 0 0 1 7.5 1.7C16.5 10.2 9 14.6 9 14.6Z' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 14.6S1.5 10.2 1.5 5.3A3.8 3.8 0 0 1 9 3.6a3.8 3.8 0 0 1 7.5 1.7C16.5 10.2 9 14.6 9 14.6Z' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.save[data-heart][aria-pressed="true"] { color: var(--volcano); }
.at-checks li::before { content: ""; flex: none; width: 15px; height: 15px; transform: translateY(2px); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.at-checks li { align-items: flex-start; }
/* light result cards */
.rcw { height: 100%; }
.rcw.more { display: none; }
.lc { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out), border-color 300ms; }
.lc:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: transparent; }
.lc:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lc__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--basalt); }
.lc__img .at-media { position: absolute; inset: 0; }
.lc__img .at-media > svg, .lc__img .at-media > img { transition: transform 900ms var(--ease-out); }
.lc:hover .lc__img .at-media > svg, .lc:hover .lc__img .at-media > img { transform: scale(1.04); }
@media (hover: hover) { .lc:hover .at-card__alt { opacity: 1; } }
.lc__tag { position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4); }
.lc__body { display: grid; gap: 3px; align-content: start; padding: var(--space-4) var(--space-5) var(--space-5); }
.lc__price { margin: 0; font: 500 30px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lc__price s { display: block; font: 400 14px/1.3 var(--font-sans); color: var(--ink-muted); letter-spacing: 0; }
.lc__price small { font: 500 15px var(--font-sans); color: var(--ink-muted); letter-spacing: 0; }
.lc__name { margin: 4px 0 0; font: 600 17px/24px var(--font-sans); }
.lc__place { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.lc__spec { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 500 15px/22px var(--font-sans); }
.lc.is-reserved .lc__img .at-media:not(.at-card__alt) { filter: saturate(.35) brightness(.8); }
.lc.is-reserved .lc__img::after { content: "Reserved"; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); padding: 8px 22px; border: 1.5px solid rgba(246,243,238,.85); border-radius: var(--radius-sm); font: 500 22px/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--on-basalt); pointer-events: none; }
.moreres { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-7); }
.moreres[hidden] { display: none; }
#morecount { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.split__list .lc__price { font-size: 26px; }
/* property location on the real island */
.locmap { background: #dfe7e5; }
.lm-sea { fill: #dfe7e5; } .lm-land { fill: #efe9df; }
.lm-r { fill: #efe9df; stroke: #fbf8f3; stroke-width: .7; } .lm-r.on { fill: #ecd6cc; }
.lm-coast { fill: none; stroke: #b9b0a3; stroke-width: .6; }
.lm-ring { fill: none; stroke: var(--volcano); stroke-width: .4; stroke-dasharray: 1.6 1.6; opacity: .55; }
.lm-km { font: 600 3.8px var(--font-sans); fill: var(--volcano); letter-spacing: .08em; }
.lm-lbl { font: 600 4.6px var(--font-display); letter-spacing: .14em; text-transform: uppercase; fill: #6f675e; paint-order: stroke; stroke: rgba(239,233,223,.9); stroke-width: 1.2px; }
.lm-lbl.on { fill: var(--volcano-deep); }
.lm-sealbl { font: 500 7px var(--font-display); letter-spacing: .3em; text-transform: uppercase; fill: #93a8a5; }
.lm-halo { fill: rgba(163,53,42,.18); } .lm-pin { fill: var(--ink); stroke: #fbf8f3; stroke-width: 1; } .lm-house { fill: #fbf8f3; }
.lm-note { position: absolute; left: var(--space-4); bottom: var(--space-4); margin: 0; padding: 7px 12px; border-radius: var(--radius-pill); background: rgba(251,248,243,.94); font: 500 12px/16px var(--font-sans); color: var(--ink); }
@media (max-width: 600px) { .lc__price { font-size: 26px; } .lm-note { right: var(--space-4); text-align: center; } }
.band--paper .facts3 { border-top-color: var(--line); }
.band--paper .facts3 div { border-bottom-color: var(--line); color: var(--ink-muted); }
.band--paper .facts3 strong { color: var(--ink); }
.band--paper .facts3 b { color: var(--volcano); }

/* ---------- price range popover (search bars): slider + typed amounts ---------- */
.cpop--price { padding: var(--space-5); }
.cpop--price .budget__val { font-size: 28px; margin-bottom: var(--space-3); }
.cpop--price .dual { margin-top: 0; }
.pr__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.pr__in label { display: grid; gap: 6px; min-width: 0; }
.pr__in span { font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.pr__in input { box-sizing: border-box; font: 500 15px/22px var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.pr__in input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pr__done { width: 100%; justify-content: center; margin-top: var(--space-4); }
.cpop--price.sheet .cpop__head { display: flex; }
[data-pricerange] .csel { pointer-events: none; }
.cpop--price.sheet { padding-left: 8px; padding-right: 8px; } .cpop--price.sheet .pr { padding: 16px 8px 8px; overflow: auto; }

/* ---------- portrait photos in wide frames: whole photo on a blurred copy of itself ---------- */
.at-media--fit > img { object-fit: contain; z-index: 1; }
.at-media--fit > img.at-bk { object-fit: cover; z-index: 0; filter: blur(28px) saturate(1.1) brightness(.78); transform: scale(1.15); }
.at-media--fit:hover > img.at-bk { transform: scale(1.15); }

/* ---------- Hugo Finch restyle (2026-10-27 design): new rules ---------- */
.hhero .kicker { font: 500 44px/1 var(--font-display); text-transform: uppercase; margin: 0 0 8px; }
.statement p.big { position: relative; margin: var(--space-6) 0 0; max-width: 1080px; font: 500 clamp(36px, 5vw, 64px)/1.02 var(--font-display); text-transform: uppercase; }
.svc__body h3 { margin: 0 0 var(--space-3); font: 500 88px/.88 var(--font-display); text-transform: uppercase; }
.stage__num { position: absolute; z-index: 2; right: var(--gr); top: var(--space-5); font: 400 240px/.8 var(--font-display); color: var(--on-basalt); letter-spacing: -.02em; }
.marquee span { font: 400 120px/1 var(--font-display); text-transform: uppercase; color: var(--ink); padding: 0 var(--space-6); }
.ft__mark { font: 500 clamp(96px, 17.5vw, 260px)/.8 var(--font-display); letter-spacing: .06em; text-transform: uppercase; margin: var(--space-6) 0 -.08em; white-space: nowrap; text-align: center; }
.num strong { display: block; font: 500 96px/.85 var(--font-display); font-variant-numeric: tabular-nums; }
.inq h2 { margin: var(--space-4) 0 var(--space-5); font: 500 64px/.92 var(--font-display); text-transform: uppercase; }
.val__step h3 { margin: 0; font: 500 44px/1 var(--font-display); text-transform: uppercase; }
.path__b h3 { margin: var(--space-2) 0; font: 500 52px/.9 var(--font-display); text-transform: uppercase; }
.pkg h3 { margin: 0; font: 500 64px/.9 var(--font-display); text-transform: uppercase; }
.ns__c h3 { margin: 0; font: 500 72px/.9 var(--font-display); text-transform: uppercase; }
.values b { display: block; font: 500 48px/1 var(--font-display); color: var(--ember); margin-bottom: var(--space-3); }
.reshead__t { margin: 0; font: 500 48px/1 var(--font-display); text-transform: uppercase; }
.ft__word { height: 18px; width: auto; fill: var(--on-basalt); display: block; margin-bottom: var(--space-5); }
.loader__word { width: clamp(220px, 40vw, 520px); height: auto; fill: var(--on-basalt); display: block; animation: ldrfade 900ms var(--ease-out) both; }
@keyframes ldrfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
:root, [data-theme="light"], [data-theme="dark"] { --font-display: 'Cormorant Garamond', Georgia, serif; }
.hhero .kicker, .statement p.big, .inq h2, .svc__body h3, .pkg h3, .ns__c h3, .path__b h3, .val__step h3, .reshead__t, .wherecard__t, .mapmodal__head h2 { letter-spacing: .01em; }
.display-xl, .display-l, .display-vertical { font-weight: 500; }
@media (max-width: 600px) { .hhero h1 { font-size: clamp(52px, 15.5vw, 120px); } .prhero__title h1 { font-size: clamp(48px, 13vw, 96px); } }

/* Self-hosted Cormorant Garamond (Latin subset). Google Fonts strips the lining-figure feature, so these files
   have lining digits built in: prices and sizes read "€399.000", not old-style figures. */
@font-face { font-family: 'Cormorant Garamond'; src: url(/fonts/CormorantGaramond-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/fonts/CormorantGaramond-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(/fonts/CormorantGaramond-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }

/* ---------- Hugo Finch: serif for large type only ----------
   Cormorant has old-style figures ("01" reads as "OI") and turns thin at small sizes, so numbers use
   lining figures everywhere, and small letter-spaced UI labels and counters stay in the sans. */
html { font-feature-settings: "lnum" 1; }
.slidenav button, .facts3 b, .at-explorer__num, .menu nav a small, .filters .count, .hcount, .lb__count, .mpin,
.seg5 button, .mm-item small, #mm_done b, .panel__cta span#f_count, .classic .at-btn b, .plan__svg text,
#tfsvg .parklbl, #tfsvg .rlabel, .lm-sealbl { font-family: var(--font-sans); font-weight: 600; }
.plan__svg text { font-size: 12px; }
/* the design sizes name and tagline to the same width, so both are set by width (viewBoxes are cropped to the ink) */
.logo { --logo-w: 242px; }
.hd.solid .logo { --logo-w: 216px; }
@media (max-width: 380px) { .logo, .hd.solid .logo { --logo-w: 191px; } }
.logo__word, .logo__tag { width: var(--logo-w); height: auto; overflow: visible; fill: currentColor; display: block; }
.logo__tag { opacity: .72; }
.lang a { color: inherit; text-decoration: none; } .lang a:hover { color: var(--ember); }
/* build stages: one villa photographed through five stages, cross-dissolving in place; plain text tabs underneath */
.stage .at-media { transition: opacity 1400ms var(--ease-inout); }
.stage .at-media > img { object-position: 42% 50%; }
.stage .at-stages { column-gap: clamp(16px, 3vw, 48px); }
.stage .at-stages::before, .stage .at-stages::after { display: none; } /* no progress line or dots */
.stage .at-stages button { gap: 6px; opacity: .55; transition: opacity var(--duration-base) var(--ease-out); }
.stage .at-stages button:hover, .stage .at-stages .is-active { opacity: 1; }
.stage .at-stages span { position: relative; justify-self: start; padding-bottom: 10px; }
.stage .at-stages span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); }
.stage .at-stages .is-active span::after { transform: scaleX(1); }
/* the restyle above reset the numeral to 240px everywhere; keep it responsive and clear of the stage label on phones */
.stage__num { font-size: clamp(96px, 17vw, 240px); }
.stage__num small { font-size: clamp(22px, 3.4vw, 48px); }
@media (max-width: 600px) { .stage__num { top: calc(var(--space-6) + 36px); } }

/* ---------- Build page (build from scratch) ---------- */
.bfacts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.bfacts > div { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.bfacts > div + div { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.bfacts b { font: 500 clamp(56px, 6vw, 84px)/.9 var(--font-display); color: var(--ink); }
.bfacts b small { font: 600 12px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin-left: 6px; vertical-align: middle; }
.bfacts span { font: 400 16px/26px var(--font-sans); color: var(--ink-muted); max-width: 34ch; }

.fears { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-6); }
.fear { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--ink); min-width: 0; }
@supports (grid-template-rows: subgrid) { .fear { grid-row: span 3; grid-template-rows: subgrid; margin-bottom: var(--space-6); } }
.fear h3 { margin: 0; font: 500 30px/1.02 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.fear > p { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.fear__check { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.fear__check span { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--laurel); }
.fear__check span::before { content: ""; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.fear__check p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink); }

.study { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-8); align-items: start; }
.study__why { margin: 0 0 var(--space-7); font: 400 19px/31px var(--font-sans); color: var(--on-basalt); max-width: 60ch; }
.study__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); border-top: 1px solid var(--line-basalt); }
.study__list li { display: grid; gap: 4px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-basalt); min-width: 0; }
.study__list b { font: 600 12px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.study__list span { font: 400 15px/24px var(--font-sans); color: var(--on-basalt-muted); }
.study__offer { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: var(--space-4); }
.offer { background: var(--basalt-raised); border: 1px solid var(--line-basalt); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-2); }
.offer__k { margin: 0; font: 600 11px/16px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--on-basalt-muted); }
.offer__p { margin: 0; font: 500 52px/1 var(--font-display); color: var(--on-basalt); }
.offer__p small { font: 500 14px/1 var(--font-sans); letter-spacing: .04em; color: var(--on-basalt-muted); }
.offer__t { margin: var(--space-2) 0 0; font: 400 14px/22px var(--font-sans); color: var(--on-basalt-muted); }
.offer__note { margin: var(--space-2) 0; font: 500 22px/1.2 var(--font-display); color: var(--ember); }
.study__offer .at-btn { justify-content: center; }

.gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: var(--space-8); border-top: 1px solid var(--ink); }
.gates li { display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-6) 0 var(--space-6); position: relative; min-width: 0; border-left: 1px solid var(--line); }
.gates li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.gates li:nth-child(n+4) { border-top: 1px solid var(--ink); }
.gates li::before { content: ""; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--volcano); }
.gates li:nth-child(3n+1)::before { left: 0; }
.gates__n { font: 500 44px/1 var(--font-display); color: var(--volcano); font-variant-numeric: tabular-nums; }
.gates h3 { margin: 0; font: 500 28px/1 var(--font-display); text-transform: uppercase; }
.gates small { display: block; margin-top: 6px; font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.gates li > div { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3); }
.gates li > div > p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.gates .gates__g { margin: 0; padding: var(--space-3); background: var(--sand); border-radius: var(--radius-sm); font: 400 14px/21px var(--font-sans); color: var(--ink); }
.gates__g b { display: block; margin-bottom: 2px; font: 600 10.5px/14px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--volcano); }

.rules { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.rules > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-5) 0; border-bottom: 1px solid var(--line-strong); min-width: 0; }
.rules > div:nth-child(even) { padding-left: var(--space-6); padding-right: 0; border-left: 1px solid var(--line-strong); }
.rules h3 { margin: 0; font: 500 24px/1.05 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.rules p { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }

.budget { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.btable { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font: 400 15px/22px var(--font-sans); }
.btable th { text-align: left; font-weight: 400; color: var(--ink-muted); padding: 11px var(--space-4) 11px 0; border-bottom: 1px solid var(--line); }
.btable td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--line); }
.btable tbody tr:first-child th, .btable tbody tr:first-child td { color: var(--ink); font-weight: 600; }
.btable tfoot th, .btable tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: var(--space-4); font: 500 30px/1 var(--font-display); color: var(--ink); text-transform: uppercase; }
.bbar { display: flex; height: 14px; margin-top: var(--space-6); border-radius: 7px; overflow: hidden; gap: 2px; }
.bbar i { width: var(--w); background: var(--ink); }
.bbar i:nth-child(2) { background: var(--volcano); } .bbar i:nth-child(3) { background: var(--line-strong); }
.bbar__k { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.bbar__k span { display: inline-flex; align-items: center; gap: 8px; }
.bbar__k i { width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.bbar__k span:nth-child(2) i { background: var(--volcano); } .bbar__k span:nth-child(3) i { background: var(--line-strong); }
.budget__note { margin: var(--space-4) 0 0; color: var(--ink-muted); }
.bcalc { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-5); box-shadow: var(--shadow-card); position: sticky; top: calc(var(--hdr) + 24px); }
.bcalc .label { margin: 0; }
.bcalc__f { display: grid; gap: var(--space-2); }
.bcalc__l { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.bcalc .at-seg, .bform .at-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 24px; width: 100%; }
.bcalc .at-seg button, .bform .at-seg button { padding: 6px 10px; height: auto; min-height: 36px; white-space: normal; line-height: 14px; }
.bcalc__out { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.bcalc__tot { margin: var(--space-2) 0 var(--space-4); font: 500 clamp(34px, 3.4vw, 46px)/1 var(--font-display); color: var(--volcano); font-variant-numeric: tabular-nums; }
.bcalc__out dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--space-4); font: 400 14px/20px var(--font-sans); }
.bcalc__out dt { color: var(--ink-muted); } .bcalc__out dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bcalc__note { margin: 0; color: var(--ink-muted); }

.roles { display: grid; border-top: 1px solid var(--ink); }
.roles > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "h p" "s p"; column-gap: var(--space-7); row-gap: 4px; padding: var(--space-5) 0; border-bottom: 1px solid var(--line-strong); align-items: start; }
.roles h3 { grid-area: h; } .roles small { grid-area: s; } .roles p { grid-area: p; margin: 0 !important; max-width: 62ch; }
.roles h3 { margin: 0; font: 500 26px/1.05 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.roles small { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--volcano); }
.roles p { margin: var(--space-2) 0 0; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.roles a { color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }

.bigp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.bigp .at-lead { color: var(--on-basalt); max-width: 60ch; }
.bigp__list { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); border-top: 1px solid var(--line-laurel); }
.bigp__list li { padding: var(--space-4) 0; border-bottom: 1px solid var(--line-laurel); display: grid; gap: 4px; }
.bigp__list b { font: 600 12px/16px var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.bigp__list span { font: 400 15px/24px var(--font-sans); color: var(--sage); }
.bigp__p { margin: 0 0 var(--space-5); font: 500 22px/1.25 var(--font-display); color: var(--on-basalt); }

.bstart { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.bform { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-7) var(--space-6); }
.bform__step { display: grid; gap: var(--space-6); }
.bform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); }
.bform__grid .at-field:first-child { grid-column: 1 / -1; }
.bform .at-btn { justify-self: start; }
.bform__done h3 { margin: 0 0 var(--space-4); font: 500 48px/1 var(--font-display); text-transform: uppercase; }
.bform__done h3 strong { color: var(--volcano); font-weight: 600; }


@media (max-width: 1080px) {
  .fears { grid-template-columns: 1fr 1fr; }
  .study, .budget, .bigp, .bstart { grid-template-columns: 1fr; gap: var(--space-7); }
  .study__offer, .bcalc { position: static; }
  .rules { grid-template-columns: 1fr; }
  .rules > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .rules > div { padding-right: 0; }
}
@media (max-width: 720px) {
  .bfacts { grid-template-columns: 1fr; }
  .bfacts > div, .bfacts > div + div { padding: var(--space-5) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .fears { grid-template-columns: 1fr; gap: var(--space-6); }
  .study__list, .bigp__list { grid-template-columns: 1fr; }
  .gates { grid-template-columns: 1fr; row-gap: 0; border-top: 0; border-left: 1px solid var(--ink); }
  .gates li, .gates li:nth-child(3n+1), .gates li:nth-child(n+4) { padding: 0 0 var(--space-6) var(--space-5); border-left: 0; border-top: 0; }
  .gates li::before, .gates li:nth-child(3n+1)::before { top: 6px; left: -5px; }
  .rules > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .roles > div { grid-template-columns: 1fr; grid-template-areas: "h" "s" "p"; }
  .roles p { margin-top: var(--space-2) !important; }
  .bform { padding: var(--space-6) var(--space-5); }
  .bform__grid { grid-template-columns: 1fr; }
  .offer__p { font-size: 44px; }
  .btable th { font-size: 14px; }
  .btable tfoot th, .btable tfoot td { font-size: 24px; }
  .bcalc { padding: var(--space-5); }
}

#v-build .phero::after { background: linear-gradient(90deg, rgba(16,14,12,.78), rgba(16,14,12,.42) 55%, rgba(16,14,12,.62)), linear-gradient(180deg, rgba(16,14,12,.45), rgba(16,14,12,0) 30%, rgba(16,14,12,0) 55%, var(--scrim)); }
@media (max-width: 720px) { .fear { margin-bottom: var(--space-4); } }


/* Light hero variant (Build page): flowing light illustration, ink text, header dark until it turns solid */
.phero--light { background: var(--paper); color: var(--ink); }
:is(#v-build, #v-renovate) .phero--light::after { background: linear-gradient(180deg, rgba(246,243,238,.88), rgba(246,243,238,0) 24%), linear-gradient(90deg, rgba(246,243,238,.9), rgba(246,243,238,.55) 42%, rgba(246,243,238,0) 68%), linear-gradient(0deg, rgba(246,243,238,.75), rgba(246,243,238,0) 38%); }
.phero--light .lead { color: var(--ink); opacity: 1; }
.phero--light .crumbs, .phero--light .crumbs a { color: var(--ink-muted); }
.phero--light h1 strong { color: var(--volcano); }
body:has(.phero--light) .hd:not(.solid) { color: var(--ink); }
body:has(.phero--light) .hd:not(.solid) .at-btn--ghost { --at-btn-fg: var(--ink); border-color: var(--line-strong); }
@media (max-width: 720px) {
  .phero--light { padding-top: calc(var(--hdr) + 300px); }
  .phero--light > .at-media { bottom: auto; height: calc(var(--hdr) + 330px); }
  :is(#v-build, #v-renovate) .phero--light::after { background: linear-gradient(180deg, rgba(246,243,238,0) calc(var(--hdr) + 200px), var(--paper) calc(var(--hdr) + 330px)); }
}

/* photo viewer: full-screen carousel (replaces the single framed image) */
.lb { grid-template-rows: 88px minmax(0, 1fr) auto; place-items: stretch; background: rgba(16,14,12,.97); }
.lb__track { grid-row: 2; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.lb__track::-webkit-scrollbar { display: none; }
.lb__slide { flex: 0 0 100%; margin: 0; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 0 clamp(12px, 7vw, 120px); min-width: 0; }
.lb__slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lb__ph { position: relative; width: min(100%, calc((100dvh - 200px) * 1.5)); aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; }
.lb__ph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb__prev, .lb__next { transform: translateY(-50%); }
.lb__thumbs { grid-row: 3; display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; padding: 18px max(16px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; }
.lb__thumbs::-webkit-scrollbar { display: none; }
.lb .lb__thumbs button { position: relative; flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; opacity: .45; background: var(--basalt-raised); transition: opacity var(--duration-fast) var(--ease-out); }
.lb .lb__thumbs button:hover, .lb .lb__thumbs button.on { opacity: 1; background: var(--basalt-raised); }
.lb .lb__thumbs button.on { box-shadow: 0 0 0 2px var(--on-basalt); }
.lb__thumbs img, .lb__thumbs svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .lb { grid-template-rows: 76px minmax(0, 1fr) auto; }
  .lb__slide { padding: 0; }
  .lb__slide img { border-radius: 0; }
  .lb__prev, .lb__next { display: none; }
  .lb .lb__thumbs button { width: 60px; height: 40px; }
}

/* property inquiry: the listing and the agent's direct lines under the heading, so the column isn't empty */
.inq__home { display: grid; grid-template-columns: 132px 1fr; gap: var(--space-5); align-items: center; margin-top: var(--space-7); padding: var(--space-4); background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.inq__home .at-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.inq__home .at-media img, .inq__home .at-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inq__home b { display: block; font: 500 24px/1.05 var(--font-display); text-transform: uppercase; }
.inq__home span { display: block; margin-top: 6px; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.inq__home strong { display: block; margin-top: var(--space-3); font: 500 28px/1 var(--font-display); color: var(--volcano); font-variant-numeric: lining-nums; }
.inq__agent { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line-strong); display: grid; gap: var(--space-5); }
.inq__lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4) var(--space-6); }
.inq__lines li { display: grid; gap: 4px; min-width: 0; }
.inq__lines small { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.inq__lines a { font: 400 16px/24px var(--font-sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid var(--line-strong); justify-self: start; }
.inq__lines a:hover { border-bottom-color: var(--volcano); color: var(--volcano); }
.inq__note { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--laurel); }
@media (max-width: 720px) { .inq__home { grid-template-columns: 96px 1fr; gap: var(--space-4); } .inq__home b { font-size: 20px; } .inq__home strong { font-size: 24px; } }

/* light hero over a photo: the intro sits on a soft frosted panel */
.phero--light .wrap > div:last-child { background: rgba(246,243,238,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: var(--space-6); border-radius: var(--radius-md); }
@media (max-width: 720px) { .phero--light .wrap > div:last-child { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; } }

/* build hero time-lapse: the stages crossfade on top of each other */
[data-timelapse] > .at-media { opacity: 0; transition: opacity 1600ms var(--ease-inout); }
[data-timelapse] > .at-media.is-on { opacity: 1; }

/* build page photography */
.bshot { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.bshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bshot--wide { aspect-ratio: 21 / 9; margin-bottom: var(--space-8); }
.bshot--tall { aspect-ratio: 4 / 5; }
.bigp .bshot--tall { margin-top: var(--space-7); max-width: 520px; }
.roles2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--space-8); align-items: start; }
.roles2 > .bshot { position: sticky; top: calc(var(--hdr) + 24px); }
.gates__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-2); }
.gates__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.gates li:hover .gates__img img { transform: scale(1.04); }
.gates li:has(.gates__img) { grid-template-rows: auto auto 1fr; }
@media (max-width: 1080px) { .roles2 { grid-template-columns: 1fr; gap: var(--space-6); } .roles2 > .bshot { position: relative; top: 0; aspect-ratio: 16 / 9; } .bigp .bshot--tall { aspect-ratio: 16 / 9; max-width: none; } }
@media (max-width: 720px) { .bshot--wide { aspect-ratio: 4 / 3; margin-bottom: var(--space-6); } .gates__img { aspect-ratio: 16 / 9; } }

/* ---------- Renovate page ---------- */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.levels > div { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-5) 0; min-width: 0; }
.levels > div + div { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.levels h3 { margin: 0; font: 500 32px/1 var(--font-display); text-transform: uppercase; }
.levels p { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.levels dl { margin: 0; display: grid; gap: 4px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.levels dt { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--volcano); }
.levels dd { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.levels .levels__price { font: 500 24px/1.2 var(--font-display); color: var(--ink); }

.tiers { display: grid; gap: var(--space-6); }
.tiers__pick { max-width: 560px; }
.tiers__pick .at-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 24px; }
.tiers__pick .at-seg button { padding: 6px 10px; height: auto; min-height: 40px; white-space: normal; line-height: 14px; }
.tiers__pick .bcalc__l { color: var(--on-basalt-muted); }
.tiers__grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.tier { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--line-basalt); border-radius: var(--radius-md); background: var(--basalt-raised); transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); min-width: 0; }
.tier.is-pick { border-color: var(--ember); transform: translateY(-6px); }
.tier__head { display: grid; gap: var(--space-2); }
.tier__tag { justify-self: start; font: 600 10.5px/14px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--basalt); background: var(--ember); padding: 4px 10px; border-radius: 12px; }
.tier h3 { margin: 0; font: 500 34px/1 var(--font-display); text-transform: uppercase; color: var(--on-basalt); }
.tier__price { margin: 0; font: 500 40px/1 var(--font-display); color: var(--on-basalt); }
.tier__price small { font: 500 13px/1 var(--font-sans); letter-spacing: .04em; color: var(--on-basalt-muted); }
.tier dl { margin: 0; display: grid; gap: var(--space-2); align-content: start; }
.tier dt { margin-top: var(--space-3); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.tier dd { margin: 0; font: 400 14.5px/23px var(--font-sans); color: var(--on-basalt-muted); }
.tier dd ul { margin: 0; padding-left: 18px; }
.tier .at-btn { justify-content: center; }
.tiers__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-7); margin-top: var(--space-7); align-items: start; }
.tiers__addons span { display: block; margin-bottom: var(--space-3); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-basalt-muted); }
.tiers__addons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tiers__addons li { padding: 6px 14px; border: 1px solid var(--line-basalt); border-radius: 20px; font: 400 14px/20px var(--font-sans); color: var(--on-basalt); }

.rcalc { position: static; max-width: 760px; margin-inline: auto; }
.rcalc__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.rcalc .at-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 24px; width: 100%; }
.rcalc .at-seg button { padding: 6px 10px; height: auto; min-height: 36px; white-space: normal; line-height: 14px; }
.rcalc__works { margin: calc(var(--space-3) * -1) 0 var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.rcalc__works b { color: var(--ink); font-weight: 600; }

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.showcase figure { margin: 0; display: grid; gap: var(--space-3); }
.showcase .at-ba { aspect-ratio: 16 / 10; }
.showcase .showcase__main { grid-column: 1 / -1; }
.showcase .showcase__main .at-ba { aspect-ratio: 21 / 9; }
.showcase figcaption { font: 400 14px/20px var(--font-sans); color: var(--on-basalt-muted); }

.renobox { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.renobox__tag { justify-self: start; font: 600 10.5px/14px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--paper); background: var(--laurel); padding: 4px 10px; border-radius: 12px; }
.renobox b { font: 500 24px/1.05 var(--font-display); text-transform: uppercase; }
.renobox b strong { color: var(--volcano); font-weight: 600; }
.renobox p { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }

@media (max-width: 1080px) {
  .tiers__grid { grid-template-columns: 1fr; }
  .tier.is-pick { transform: none; }
  .tiers__foot { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 720px) {
  .levels { grid-template-columns: 1fr; }
  .levels > div, .levels > div + div { padding: var(--space-5) 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .rcalc__in { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .showcase .showcase__main .at-ba, .showcase .at-ba { aspect-ratio: 4 / 3; }
}
.showcase figure:nth-child(2):last-child { grid-column: 1 / -1; }
.showcase figure:nth-child(2):last-child .at-ba { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .showcase figure:nth-child(2):last-child .at-ba { aspect-ratio: 4 / 3; } }
/* the Renovate title is a longer sentence than Build: one size down so it fits in four lines */
#v-renovate .phero h1 { font-size: clamp(52px, 7.6vw, 124px); }

/* header: logo left, menu centred in the free space, language and contact on the right */
.hd .nav { flex: 1 1 auto; justify-content: center; gap: clamp(14px, 1.9vw, 32px); min-width: 0; }
.hd .lang { white-space: nowrap; }
.hd .menubtn { margin-left: auto; }
@media (max-width: 1240px) { .nav a.opt { display: none; } }
.nav a { white-space: nowrap; }
.slidenav { flex-wrap: wrap; row-gap: 6px; }
.slidenav button { white-space: nowrap; }
.hd .nav { overflow: hidden; }
.hd.tight .nav a.opt { display: none; }
.hd.snug .nav { gap: 12px; }
.hd.snug .nav a { letter-spacing: .1em; font-size: 10.5px; }
.hd.snug .lang { letter-spacing: .08em; }

/* ---------- licence forecast (Build, Renovate) ---------- */
.lic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6) var(--space-8); align-items: start; }
.lic__head .at-title { margin-top: var(--space-4); }
.lic__head .at-lead { margin-top: var(--space-5); }
.lic__tool { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); display: grid; gap: var(--space-5); }
.lic__out { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.lic__k { display: block; font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.lic__big { margin: var(--space-2) 0 0; font: 500 clamp(44px, 4.6vw, 64px)/1 var(--font-display); color: var(--volcano); }
.lic__mid { margin: var(--space-2) 0 0; font: 500 clamp(30px, 3vw, 40px)/1 var(--font-display); color: var(--ink); }
.lic__big small, .lic__mid small { font: 500 14px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
.lic__note { margin: var(--space-2) 0 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
.lic__conf { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.lic__conf .lic__k { margin-right: var(--space-2); }
.lic__meter { display: inline-flex; gap: 3px; }
.lic__meter i { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.lic__meter[data-level="1"] i:nth-child(-n+1), .lic__meter[data-level="2"] i:nth-child(-n+2), .lic__meter[data-level="3"] i:nth-child(-n+3), .lic__meter[data-level="4"] i { background: var(--laurel); }
.lic__means { margin: 0; color: var(--ink-muted); }
.lic__caveat { margin: 0; color: var(--ink-muted); font-style: italic; }
.lic__all { grid-column: 1 / -1; border-top: 1px solid var(--ink); }
.lic__all summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) 0; font: 500 26px/1.1 var(--font-display); text-transform: uppercase; }
.lic__all summary::-webkit-details-marker { display: none; }
.lic__all summary i { width: 14px; height: 14px; position: relative; }
.lic__all summary i::before, .lic__all summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--volcano); }
.lic__all summary i::after { transform: rotate(90deg); transition: transform var(--duration-base) var(--ease-out); }
.lic__all[open] summary i::after { transform: rotate(0); }
.lic__scroll { overflow-x: auto; }
.lic__table { margin-top: 0; min-width: 640px; }
.lic__table thead th { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); padding-top: 0; }
.lic__table td, .lic__table thead th + th { text-align: left; white-space: normal; }
.lic__table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lic__table tbody tr:first-child th, .lic__table tbody tr:first-child td { font-weight: 400; }
.lic__table tbody tr:first-child th { font-weight: 600; }
.lic__table small { color: var(--ink-muted); font-size: 13px; }
@media (max-width: 1080px) { .lic { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .lic__tool { padding: var(--space-5); } .lic__out { grid-template-columns: 1fr; } }

/* time and licence inside the calculators */
.bcalc__time { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.bcalc__time dl { margin: var(--space-3) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--space-4); font: 400 14px/20px var(--font-sans); }
.bcalc__time dt { color: var(--ink-muted); } .bcalc__time dd { margin: 0; text-align: right; white-space: nowrap; color: var(--ink); }
.bcalc__tot--time { color: var(--ink); margin-bottom: var(--space-2); }
.bcalc__tot--time small { font: 500 14px/1 var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
.bcalc__sub { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }

/* ---------- developments: gallery strip, apartment types, location and video ---------- */
.devgal { padding-block: 0 var(--space-8); }
.devgal__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30vw); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gl) var(--gr); scrollbar-width: none; }
.devgal__track::-webkit-scrollbar { display: none; }
.devgal figure { margin: 0; scroll-snap-align: start; display: grid; gap: var(--space-2); }
.devgal .at-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.devgal .at-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.devgal .devgal__main { grid-column: span 2; }
.devgal .devgal__main .at-media { aspect-ratio: auto; height: 100%; min-height: 100%; }
.devgal figcaption { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.dtypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.dtype { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line-basalt); border-radius: var(--radius-md); background: var(--basalt-raised); min-width: 0; }
.dtype.is-sold { opacity: .55; }
.dtype__plan { display: block; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.dtype__plan .at-media { position: relative; aspect-ratio: 3 / 2; }
.dtype__plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms var(--ease-out); }
.dtype__plan:hover img { transform: scale(1.04); }
.dtype__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.dtype h3 { margin: 0; font: 500 32px/1 var(--font-display); color: var(--on-basalt); }
.dtype__st { font: 600 10.5px/14px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.dtype.is-available .dtype__st { color: #9fc3a9; }
.dtype__spec { margin: 0; font: 400 14.5px/22px var(--font-sans); color: var(--on-basalt); }
.dtype dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-4); font: 400 14px/20px var(--font-sans); align-content: start; }
.dtype dt { color: var(--on-basalt-muted); } .dtype dd { margin: 0; text-align: right; color: var(--on-basalt); font-variant-numeric: tabular-nums; }
.dtype__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line-basalt); }
.dtype__foot b { font: 500 30px/1 var(--font-display); color: var(--on-basalt); }
.dtype__foot .at-btn { height: 40px; padding: 0 var(--space-4); }
.dtypes__note { margin: var(--space-5) 0 0; color: var(--on-basalt-muted); }
.devloc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: center; }
.devloc__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.devloc__list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line-strong); font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
.devloc__list b { font: 500 22px/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.vfacade { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--basalt); }
.vfacade button { all: unset; cursor: pointer; position: absolute; inset: 0; }
.vfacade img, .vfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vfacade__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,243,238,.92); color: var(--volcano); font-size: 26px; padding-left: 5px; box-sizing: border-box; transition: transform var(--duration-base) var(--ease-out); }
.vfacade button:hover .vfacade__play { transform: scale(1.08); }
@media (max-width: 1080px) { .dtypes { grid-template-columns: 1fr 1fr; } .devloc { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 720px) { .dtypes { grid-template-columns: 1fr; } .devgal__track { grid-auto-columns: 82vw; } .devgal .devgal__main { grid-column: span 1; } .devgal .devgal__main .at-media { aspect-ratio: 4 / 3; height: auto; } }
#v-developments .phero h1 { font-size: clamp(52px, 8.4vw, 132px); }

.devgal figure[data-lb], .dtype__plan { cursor: zoom-in; }
/* floor plans are drawings on white: show them on a white sheet in the viewer */
.lb__slide img[src*="RPA-"], .lb__slide img[alt^="Floor plan"] { background: #fff; padding: clamp(8px, 1.5vw, 24px); }

/* ---------- apartment projects: facts strip, intro, mosaic, home explorer ---------- */
.devstrip { position: relative; z-index: 3; margin-top: -56px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); grid-auto-flow: column; background: var(--paper-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.devstrip > div { padding: var(--space-5) var(--space-5); display: grid; gap: 6px; min-width: 0; }
.devstrip > div + div { border-left: 1px solid var(--line); }
.devstrip b { font: 500 22px/1.15 var(--font-display); color: var(--ink); }
.devintro .devtop { align-items: center; }
.devintro__img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; }
.devintro__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: var(--space-3); }
.dmosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); cursor: zoom-in; }
.dmosaic .at-media { position: absolute; inset: 0; }
.dmosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.dmosaic figure:hover img { transform: scale(1.04); }
.dmosaic__t0 { grid-row: span 2; }
.dmosaic__t3, .dmosaic__t4 { display: none; }
@media (min-width: 1200px) { .dmosaic { grid-template-columns: 2fr 1fr 1fr 1fr; } .dmosaic__t3 { display: block; } .dmosaic__t4 { display: block; } }
.dmosaic__more { display: none; }
.dmosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-3); background: linear-gradient(transparent, rgba(16,14,12,.6)); color: var(--on-basalt); font: 400 13px/18px var(--font-sans); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.dmosaic figure:hover figcaption { opacity: 1; }
.dmosaic__all { position: absolute; right: var(--space-4); bottom: var(--space-4); background: rgba(246,243,238,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.hx { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.6fr); gap: var(--space-6); align-items: start; }
.hx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-basalt); }
.hx__list button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n p" "s s"; gap: 4px var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-basalt); position: relative; transition: background var(--duration-base) var(--ease-out); }
.hx__list button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ember); transform: scaleY(0); transition: transform var(--duration-base) var(--ease-out); }
.hx__list button:hover { background: rgba(255,255,255,.03); }
.hx__list button[aria-selected="true"] { background: var(--basalt-raised); }
.hx__list button[aria-selected="true"]::before { transform: scaleY(1); }
.hx__list button:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.hx__name { grid-area: n; font: 500 26px/1 var(--font-display); color: var(--on-basalt); }
.hx__price { grid-area: p; font: 500 20px/1 var(--font-display); color: var(--on-basalt); align-self: center; }
.hx__spec { grid-area: s; font: 400 13.5px/20px var(--font-sans); color: var(--on-basalt-muted); }
.hx__list .is-sold { opacity: .5; }
.hx__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); background: var(--basalt-raised); border: 1px solid var(--line-basalt); border-radius: var(--radius-md); padding: var(--space-5); }
.hx__plan { all: unset; cursor: zoom-in; display: block; background: #fff; border-radius: var(--radius-sm); overflow: hidden; }
.hx__plan .at-media { position: relative; aspect-ratio: 4 / 3; }
.hx__plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: at-in 400ms var(--ease-out); }
.hx__info { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-4); min-width: 0; }
.hx__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.hx__head h3 { margin: 0; font: 500 48px/1 var(--font-display); color: var(--on-basalt); }
.hx__st { font: 600 10.5px/14px var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember); }
.hx__st.is-available { color: #9fc3a9; }
.hx__lead { margin: 0; font: 400 16px/25px var(--font-sans); color: var(--on-basalt); }
.hx__areas { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-basalt); }
.hx__areas dt { font: 600 10.5px/14px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--on-basalt-muted); }
.hx__areas dd { margin: 4px 0 0; font: 500 26px/1 var(--font-display); color: var(--on-basalt); }
.hx__foot { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-basalt); }
.hx__bigprice { font: 500 44px/1 var(--font-display); color: var(--on-basalt); }
.hx__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 1200px) { .hx__panel { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .devstrip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin-top: -40px; }
  .devstrip > div:nth-child(3n+1) { border-left: 0; } .devstrip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .hx { grid-template-columns: 1fr; }
  .hx__list { display: flex; overflow-x: auto; border-top: 0; gap: var(--space-2); scrollbar-width: none; }
  .hx__list li { flex: 0 0 auto; }
  .hx__list button { width: auto; grid-template-columns: auto; grid-template-areas: "n" "p"; border: 1px solid var(--line-basalt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
  .hx__list .hx__spec { display: none; }
  .hx__list button::before { display: none; }
  .hx__list button[aria-selected="true"] { border-color: var(--ember); }
}
@media (max-width: 720px) {
  .devstrip { grid-template-columns: 1fr 1fr; margin-top: var(--space-5); }
  .devstrip > div:nth-child(3n+1) { border-left: 1px solid var(--line); } .devstrip > div:nth-child(2n+1) { border-left: 0; } .devstrip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .dmosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 140px; }
  .dmosaic__t0 { grid-column: 1 / -1; grid-row: auto; }
  .hx__head h3 { font-size: 38px; } .hx__bigprice { font-size: 36px; }
  .hx__panel { padding: var(--space-4); }
}
/* mosaic: one 2x2 lead photo and four tiles; explorer plan in a taller sheet so narrow plans read large */
.dmosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 260px 260px; }
.dmosaic__t0 { grid-column: span 2; grid-row: span 2; }
.dmosaic__t3, .dmosaic__t4 { display: block; }
.hx__plan .at-media { aspect-ratio: 4 / 5; }
.hx__plan img { padding: var(--space-4); box-sizing: border-box; }
@media (max-width: 720px) { .dmosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 130px 130px; } .dmosaic__t0 { grid-column: 1 / -1; grid-row: auto; } .hx__plan .at-media { aspect-ratio: 1 / 1; } }
.hx__plan .at-bk, .dtype__plan .at-bk { display: none; }
.hx__plan .at-media, .hx__plan .at-media--fit { background: #fff; }

/* ---------- developments overview ---------- */
.devlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.devlist .devcard:only-child { grid-column: 1 / -1; }
.devcard { position: relative; display: block; min-height: 560px; border-radius: var(--radius-md); overflow: hidden; color: var(--on-basalt); text-decoration: none; }
.devcard .at-media { position: absolute; inset: 0; }
.devcard .at-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
.devcard:hover .at-media img { transform: scale(1.04); }
.devcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,14,12,0) 35%, rgba(16,14,12,.82)); }
.devcard__b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: var(--space-6); display: grid; gap: var(--space-3); }
.devcard small { font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.devcard h3 { margin: 0; font: 400 clamp(36px, 4vw, 56px)/.95 var(--font-display); text-transform: uppercase; }
.devcard h3 strong { font-weight: 600; color: var(--ember); }
.devcard p { margin: 0; max-width: 54ch; font: 400 15px/24px var(--font-sans); color: var(--on-basalt); opacity: .9; }
.devcard__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(246,243,238,.25); font: 400 14px/20px var(--font-sans); }
.devcard__foot b { font: 500 28px/1 var(--font-display); margin-left: 6px; }
@media (max-width: 900px) { .devlist { grid-template-columns: 1fr; } .devcard { min-height: 460px; } }
.devcard small { color: var(--on-basalt); opacity: .85; }
.devcard::after { background: linear-gradient(180deg, rgba(16,14,12,0) 30%, rgba(16,14,12,.88)); }

/* PDF download under a hero intro */
.phero .pdflink, .prhero .pdflink { --at-btn-fg: var(--on-basalt); display: inline-flex; margin-top: var(--space-5); font-size: 11px; }
.phero--light .pdflink { --at-btn-fg: var(--ink); }
.phero .ctas + .pdflink { margin-top: var(--space-4); }

/* mobile menu: working language links and a callable phone number */
.menu__foot a { color: inherit; text-decoration: none; }
.menu__foot .lang { font: 600 13px/23px var(--font-sans); letter-spacing: .16em; }
.menu__foot .lang a { display: inline-block; padding: 6px 2px; }
.menu__foot .lang b { color: var(--ember); }

/* cookie choice: compact, never over the first screen's search bar */
.ck { width: min(380px, calc(100vw - 36px)); padding: var(--space-4); gap: var(--space-3); }
.ck p { font: 400 13px/20px var(--font-sans); }
.ck p b { display: inline; margin: 0 4px 0 0; }
.ck__btns .at-btn { height: 36px; font-size: 11px; }
@media (max-width: 640px) {
  .ck { grid-template-columns: 1fr; padding: 12px 14px; gap: 10px; }
  .ck p { font-size: 12.5px; line-height: 18px; }
  .ck__btns { flex-wrap: nowrap; }
}

/* phones: hero stacks by content (any language length) so the search card shows on the first screen */
@media (max-width: 600px) {
  .hhero { height: auto; min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr) + 32px) 0 68px; }
  .hhero__in, .hhero__lead { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-inline: var(--gl) var(--gr); }
  .hhero__lead { margin-top: var(--space-4); }
  .hhero__lead p { margin: 0; font-size: 15px; line-height: 23px; }
  .slidenav { display: none; }
  .intentwrap { margin-top: -44px; }
  .svc__num { display: none; }
  .wa--wait { visibility: hidden; }
}

/* development location: the title stays inside its column */
.devloc .at-title { font-size: clamp(40px, 4.4vw, 64px); overflow-wrap: anywhere; }


/* area pages */
.areatitle { font-size: clamp(44px, 7vw, 104px); }
.areatext { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.areatext__main p:not(.at-lead) { font: 400 17px/28px var(--font-sans); color: var(--ink-muted); max-width: 62ch; }
.areatext__main .at-lead { margin-bottom: var(--space-5); }
.areatext__side { display: grid; gap: var(--space-6); border-left: 1px solid var(--line); padding-left: var(--space-6); }
.areatext__side h2, .areanear h2 { margin: 0 0 var(--space-2); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.areatext__side p { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.areahomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.areanear ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.areanear li { border-top: 1px solid var(--line); }
.areanear a { display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 0; color: var(--ink); text-decoration: none; font: 500 20px/1.2 var(--font-display); }
.areanear a:hover { color: var(--volcano); }
.areaindex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.areaindex h3 { margin: 0 0 var(--space-2); font: 600 11px/16px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 900px) {
  .areatext { grid-template-columns: 1fr; gap: var(--space-6); }
  .areatext__side { border-left: 0; padding-left: 0; }
  .areahomes { grid-template-columns: 1fr; }
  .areaindex { grid-template-columns: 1fr; }
}


/* area title: smaller, one accent word like the other pages */
.areatitle { font-size: clamp(44px, 6vw, 96px); }
.areatext .at-title + .at-lead { margin-top: var(--space-4); }
.areatext .tablewrap { overflow-x: auto; }
.areatext .utab { width: 100%; min-width: 0; }
.areatext .utab td, .areatext .utab th { white-space: normal; padding-inline: 0 var(--space-3); }
.areatext .utab td:first-child { font: 500 18px/1.25 var(--font-display); text-transform: none; }

/* header: small link for professionals */
.hd__pro { font: 600 11px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: inherit; text-decoration: none; white-space: nowrap; opacity: .75; }
.hd__pro:hover { opacity: 1; color: var(--ember); }
@media (max-width: 1320px) { .hd .hd__pro { display: none; } }

/* single-goal landing pages: no menu, one form on the first screen */
.landing { --landing: 1; }
body:has(.landing) .hd .nav, body:has(.landing) .hd .lang, body:has(.landing) .hd .at-btn, body:has(.landing) .hd .hd__pro, body:has(.landing) .menubtn { display: none; }
body:has(.landing) .ft__top { display: none; }
.lhero { position: relative; overflow: hidden; background: var(--basalt); color: var(--on-basalt); padding-block: calc(var(--hdr) + 56px) 72px; }
.lhero > .at-media { position: absolute; inset: 0; }
.lhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,14,12,.78), rgba(16,14,12,.35) 60%, rgba(16,14,12,.2)); }
.lhero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--space-8); align-items: center; }
.lhero h1 { margin: var(--space-4) 0 var(--space-5); font: 500 clamp(44px, 5.4vw, 84px)/.98 var(--font-display); text-transform: uppercase; }
.lhero h1 strong { font-weight: 600; color: var(--ember); }
.lhero .lead { font: 400 18px/29px var(--font-sans); max-width: 52ch; opacity: .92; }
.lhero .at-checks { margin-top: var(--space-5); color: var(--on-basalt); }
.lform { background: var(--paper-raised); color: var(--ink); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-float); }
.lform h2 { margin: 0 0 var(--space-5); font: 500 30px/1.1 var(--font-display); }
.lform .cform { gap: var(--space-4); }
.lform__note { margin: var(--space-3) 0 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.lform .sent { padding: 0; background: transparent; }

/* plain rows of title + text */
.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.rowlist li:last-child { border-bottom: 1px solid var(--line); }
.rowlist h3 { margin: 0 0 6px; font: 500 22px/1.2 var(--font-display); }
.rowlist p { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }

/* investor facts */
.factlist { margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); }
.factlist > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; border-top: 1px solid var(--line); padding: var(--space-4) 0; }
.factlist dt { font: 500 36px/1 var(--font-display); color: var(--volcano); }
.factlist dd { margin: 0; font: 400 15px/25px var(--font-sans); color: var(--ink); }
.factlist cite { font-style: normal; color: var(--ink-muted); font-size: 13px; }
.factlist__end { margin-top: var(--space-6); max-width: 62ch; }
.factlist__note { margin-top: var(--space-3); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.band--flush { padding-block: 0; }

/* guides */
.guidelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.guidecard { color: var(--ink); text-decoration: none; display: block; }
.guidecard__img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
.guidecard__img .at-media { position: absolute; inset: 0; }
.guidecard__img img { width: 100%; height: 100%; object-fit: cover; }
.guidecard h2 { margin: 0 0 var(--space-2); font: 500 30px/1.12 var(--font-display); }
.guidecard p { margin: 0 0 var(--space-3); font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.guidecard .go { font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.guidecard:hover h2 { color: var(--volcano); }
.guidetitle { font: 500 clamp(40px, 5vw, 76px)/1.02 var(--font-display); text-transform: none; margin: 0; }
.guidebody { max-width: 760px; }
.guidebody section { margin-bottom: var(--space-6); }
.guidebody h2 { margin: 0 0 var(--space-3); font: 500 32px/1.15 var(--font-display); }
.guidebody p { margin: 0 0 var(--space-3); font: 400 17px/29px var(--font-sans); color: var(--ink); }
.guidebody__note { font-size: 14px !important; line-height: 22px !important; color: var(--ink-muted) !important; border-top: 1px solid var(--line); padding-top: var(--space-4); margin-bottom: var(--space-5) !important; }

@media (max-width: 900px) {
  .lhero { padding-block: calc(var(--hdr) + 24px) 40px; }
  .lhero__in { grid-template-columns: 1fr; gap: var(--space-5); }
  .lhero .at-checks { display: none; }
  .lhero .lead { font-size: 16px; line-height: 25px; }
  .lform { padding: var(--space-5); }
  .lform .cform { grid-template-columns: 1fr; }
  .factlist { grid-template-columns: 1fr; }
  .factlist > div { grid-template-columns: 96px minmax(0, 1fr); }
  .factlist dt { font-size: 28px; }
  .guidelist { grid-template-columns: 1fr; }
}


/* specific enough to beat .phero h1 */
.phero h1.areatitle { font-size: clamp(44px, 6vw, 96px); }
.phero h1.guidetitle { font: 500 clamp(38px, 4.6vw, 68px)/1.04 var(--font-display); text-transform: none; }
.hd.snug .hd__pro { letter-spacing: .06em; }
.hd.compact .nav { gap: 9px; }
.hd.compact .nav a { letter-spacing: .04em; }
.hd.compact .hd__pro { letter-spacing: .02em; }
.hd.nopro .hd__pro { display: none; }
@media (max-width: 900px) {
  /* the form is the page: no button floating over its fields */
  body:has(.landing) .wa { display: none; }
}


/* page changes: a soft crossfade where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

/* single property: the whole photo, no zoom */
.mosaic a:hover .at-media > img, .mosaic .at-media > img, .hs > img { transform: none; transition: none; }
.mosaic .at-media--fit > img.at-bk, .hs.at-media--fit > img.at-bk { transform: scale(1.15); }

/* contact sections: the title sits on top and no longer sets the height */
.contact3 { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6) var(--space-8); }
.contact3 .at-vertical, .inq .at-vertical { display: block; grid-column: 1 / -1; writing-mode: horizontal-tb; transform: none; font-size: clamp(48px, 6vw, 88px); line-height: 1; align-self: start; }
.inq { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); }
@media (max-width: 1100px) { .contact3 { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 900px) { .contact3, .inq { grid-template-columns: 1fr; } }

/* hero text can never push the lead and button off the screen, whatever the language */
.phero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.phero .wrap > * { min-width: 0; }
/* words stay whole: app.js shrinks the title if its longest word doesn't fit */
#v-partners .phero h1 { font-size: clamp(34px, 6.2vw, 100px); }
@media (max-width: 1200px) { .phero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } }
@media (max-width: 1100px) { .phero .wrap { grid-template-columns: minmax(0, 1fr); } }


/* investment comparison */
.invest__asof { margin: var(--space-3) 0 0; font: 600 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.invest__text p { margin: 0 0 var(--space-4); font: 400 18px/30px var(--font-sans); color: var(--ink); }
.invest__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.invest__two .at-title { margin-bottom: var(--space-5); }
.mktcmpwrap { overflow-x: auto; margin-top: var(--space-6); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mktcmpwrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.mktcmp { width: 100%; min-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mktcmp th, .mktcmp td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); font: 400 15px/21px var(--font-sans); color: var(--ink); vertical-align: top; }
.mktcmp thead th { font: 600 11px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.mktcmp th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; width: 34%; min-width: 230px; background: var(--paper-raised); }
.mktcmp tbody th[scope="row"] { font-weight: 500; }
.mktcmp small { display: block; margin-top: 2px; font: 400 12px/17px var(--font-sans); color: var(--ink-muted); }
.mktcmp__group th, .mktcmp__group th:first-child { padding-top: 22px; font: 500 22px/1.2 var(--font-display); background: var(--paper-raised); text-align: left; position: static; }
.mktcmp .is-tf { background: var(--sand); }
.mktcmp thead th.is-tf { color: var(--ink); }
.mktcmp .is-best { font-weight: 600; color: var(--volcano); }
.invest__sources { max-width: 900px; }
.invest__sources h2 { margin: 0 0 var(--space-3); font: 500 30px/1.15 var(--font-display); }
.invest__sources p { margin: 0 0 var(--space-4); font: 400 15px/25px var(--font-sans); color: var(--ink-muted); }
.invest__sources ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--space-6); }
.invest__sources li { margin-bottom: 8px; break-inside: avoid; font: 400 14px/21px var(--font-sans); }
.invest__sources a { color: var(--ink); }
@media (max-width: 900px) {
  .invest__two { grid-template-columns: 1fr; gap: var(--space-7); }
  .invest__sources ul { columns: 1; }
  .mktcmp th:first-child { min-width: 170px; width: 170px; }
}


/* town guides on the area pages */
.townguide + .townguide { padding-top: 0; }
.townguide__in { max-width: 860px; }
.townguide__in .at-title { margin-bottom: var(--space-5); }
.townguide__in p { margin: 0 0 var(--space-4); font: 400 17px/28px var(--font-sans); color: var(--ink); }
.townguide__in strong { font-weight: 600; }
.townguide__in a { color: var(--volcano); }
.townguide__in h4 { margin: var(--space-6) 0 var(--space-3); font: 500 24px/1.2 var(--font-display); }
.townguide__in ul { margin: 0 0 var(--space-5); padding-left: 20px; font: 400 16px/26px var(--font-sans); }
.townguide__in li { margin-bottom: 6px; }
.townfacts { margin: 0 0 var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); border-top: 1px solid var(--line); }
.townfacts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 15px/22px var(--font-sans); }
.townfacts dt { color: var(--ink-muted); }
.townfacts dd { margin: 0; text-align: right; }
.towntable { overflow-x: auto; margin-bottom: var(--space-4); }
.towntable table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.towntable th, .towntable td { padding: 10px 12px 10px 0; text-align: right; border-bottom: 1px solid var(--line); font: 400 15px/22px var(--font-sans); white-space: nowrap; }
.towntable th { font: 600 11px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: normal; vertical-align: bottom; }
.towntable th:first-child, .towntable td:first-child { text-align: left; white-space: normal; }
@media (max-width: 600px) {
  .towntable th, .towntable td { padding-right: 8px; font-size: 13px; line-height: 18px; }
  .towntable table:has(th:nth-child(6)) :is(th, td):nth-child(4), .towntable table:has(th:nth-child(6)) :is(th, td):nth-child(5), .towntable table:has(th:nth-child(5)):not(:has(th:nth-child(6))) :is(th, td):nth-child(4) { display: none; }
  .towntable th { font-size: 10px; line-height: 14px; letter-spacing: .02em; hyphens: auto; }
  .towntable th:last-child, .towntable td:last-child { padding-right: 0; }
}
.townguide__note { padding-bottom: var(--space-4); }
.townguide__note p { margin: 0 0 var(--space-3); font: 400 15px/25px var(--font-sans); color: var(--ink); }
.townguide__note ul { margin: 0 0 var(--space-3); padding-left: 20px; font: 400 15px/25px var(--font-sans); }
.townguide__note a { color: var(--volcano); }
@media (max-width: 700px) { .townfacts { grid-template-columns: 1fr; } }


/* investment page: photos and charts */
.ivphoto { position: relative; margin: 0; height: clamp(280px, 46vw, 620px); overflow: hidden; }
.ivphoto .at-media { position: absolute; inset: 0; }
.ivphoto img { width: 100%; height: 100%; object-fit: cover; }
.ivphoto figcaption { position: absolute; left: var(--gl); bottom: 16px; z-index: 2; padding: 5px 10px; border-radius: 3px; background: rgba(16,14,12,.62); color: #f3eee7; font: 400 12px/17px var(--font-sans); }
.ivglance { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-6); }
#v-invest figure { margin: 0; }
#v-invest figcaption h3 { margin: 0 0 4px; font: 500 24px/1.2 var(--font-display); }
#v-invest figcaption small { display: block; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
.ivmap { display: grid; grid-template-rows: auto 1fr auto; margin-top: var(--space-5); }
.ivmap__y, .ivmap__x { font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ivmap__x { text-align: right; margin-top: 26px; }
.ivmap__plot { position: relative; aspect-ratio: 4 / 3; margin: 8px 0 0 36px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ivmap__hline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.ivmap__hline small { position: absolute; right: 100%; top: -9px; margin-right: 6px; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
.ivmap__vline { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.ivmap__vline small { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
.ivmap__pt { position: absolute; width: 0; height: 0; }
.ivmap__pt i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #8f877b; box-shadow: 0 0 0 2px var(--sand); }
.ivmap__pt b { position: absolute; white-space: nowrap; font: 500 14px/18px var(--font-sans); color: var(--ink); }
.ivmap__pt.side-right b { left: 12px; top: -9px; }
.ivmap__pt.side-above b { left: 0; bottom: 10px; transform: translateX(-50%); }
.ivmap__pt.side-below b { left: 0; top: 10px; transform: translateX(-50%); }
.ivmap__pt.is-tf i { left: -10px; top: -10px; width: 20px; height: 20px; background: var(--volcano); }
.ivmap__pt.is-tf b { left: 15px; font-weight: 700; font-size: 16px; }
.ivlegend span { white-space: nowrap; }
.ivlegend { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); margin: var(--space-5) 0 var(--space-3); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ivlegend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.dot-jan { background: var(--volcano); }
.dot-aug { background: #8f877b; }
.ivseason__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-3); height: 58px; border-bottom: 1px solid var(--line); }
.ivbar__name { font: 400 14px/18px var(--font-sans); color: var(--ink); }
.is-tf > .ivbar__name { font-weight: 700; }
.ivseason__track { position: relative; height: 100%; }
.ivseason__gap { position: absolute; top: calc(50% - 1px); height: 2px; background: #8f877b; }
.ivseason__jan, .ivseason__aug { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sand); }
.ivseason__jan { background: var(--volcano); }
.ivseason__aug { background: #8f877b; }
.ivseason__jan em { position: absolute; right: 100%; top: -3px; margin-right: 6px; }
.ivseason__aug em { position: absolute; left: 100%; top: -3px; margin-left: 6px; }
.ivseason em { font: 500 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; }
.ivbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); margin-top: var(--space-6); }
.ivbar p { margin: var(--space-3) 0 0; font: 500 15px/22px var(--font-sans); color: var(--ink); }
.ivbar__rows { margin-top: var(--space-4); }
.ivbar__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 84px; align-items: center; gap: var(--space-3); height: 30px; }
.ivbar__track { display: block; }
.ivbar__track i { display: block; height: 14px; border-radius: 0 4px 4px 0; background: #cfc8bc; }
.ivbar__row.is-tf .ivbar__track i { background: var(--volcano); }
.ivbar__row b { font: 400 14px/18px var(--font-sans); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ivbar__row.is-tf b { font-weight: 700; }
.ivislandwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: center; }
.ivislandwrap .rowlist { margin-top: var(--space-5); }
.ivisland { display: block; width: 100%; height: auto; overflow: visible; }
.ivisland__land { fill: var(--sand); }
.ivisland a path { fill: var(--sand); stroke: var(--paper); stroke-width: 2; transition: fill var(--duration-fast); }
.ivisland a:hover path { fill: #d9d0c2; }
.ivisland a path.is-focus { fill: #eec3b5; }
.ivisland a:hover path.is-focus { fill: #e5a996; }
.ivisland a path.is-on { fill: var(--volcano); }
.ivisland a:hover path.is-on { fill: #8a2c23; }
.ivisland__label { font: 600 18px var(--font-sans); fill: var(--ink); pointer-events: none; }
.ivisland__air circle { fill: var(--ink); stroke: var(--paper); stroke-width: 2; pointer-events: none; }
.ivisland__key { display: none; margin: var(--space-3) 0 0; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.ivisland__key i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.ivisland__air text { font: 500 16px var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; pointer-events: none; }
@media (max-width: 900px) {
  .ivglance, .ivbars, .ivislandwrap { grid-template-columns: 1fr; gap: var(--space-6); }
  .ivbar__row { grid-template-columns: 88px minmax(0, 1fr) 72px; }
  .ivmap__pt b { font-size: 13px; }
}
@media (max-width: 600px) {
  .ivisland__air text { display: none; }
  .ivisland__key { display: block; }
  .ivisland__label { font-size: 28px; }
}

/* investment page: risks and conclusion */
.ivrisk { margin-top: var(--space-6) !important; }
.ivlic { margin-top: var(--space-4); }
.ivlic__row { padding: 9px 0 10px; border-bottom: 1px solid var(--line); }
.ivlic__towns { display: block; margin-bottom: 7px; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.ivlic__track { position: relative; display: block; height: 14px; margin-right: 56px; }
.ivlic__track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--volcano); }
.ivlic__track b { position: absolute; top: -2px; margin-left: 8px; font: 600 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ivlic__axis { position: relative; height: 22px; margin: 6px 56px 0 0; }
.ivlic__axis small { position: absolute; transform: translateX(-50%); font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
.ivlic__axis small:first-child { transform: none; }
.ivlic__axis em { position: absolute; right: -56px; width: 50px; text-align: right; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
.ivfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: var(--space-6) 0 0; }
.ivfacts dt { font: 400 clamp(30px, 3vw, 42px)/1.1 var(--font-display); color: var(--ink); }
.ivfacts dd { margin: 6px 0 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
.ivconclude { margin-top: var(--space-8); padding-top: var(--space-6); }
.ivstress { margin-top: var(--space-5); }
.ivstress .ivbar__row { grid-template-columns: 130px minmax(0, 1fr) 72px; min-height: 46px; height: auto; }
.ivstress .ivbar__track i { height: 18px; }
.dot-ref { width: 2px !important; height: 13px !important; border-radius: 0 !important; background: var(--ink); vertical-align: -2px !important; }
.ivseason__ref { position: absolute; top: 8px; bottom: 8px; width: 1px; background: var(--ink); opacity: .55; }
.ivconclude .ivseason__jan, .ivconclude .ivseason__aug { box-shadow: 0 0 0 2px var(--paper); }
.ivmap__pt i { box-shadow: 0 0 0 2px var(--sand); }
@media (max-width: 900px) {
  .ivconclude { margin-top: var(--space-6); gap: var(--space-7); }
  .ivstress .ivbar__row { grid-template-columns: 104px minmax(0, 1fr) 68px; }
}