/* The Kizlo Team · 2026 design system
   Dark cinematic first screen, bright reading body, one gold accent.
   Palette: Midnight lake & brass (chosen by the client 2026-10-19). Wordmark: K monogram. */

/* Web fonts, self-hosted since October 2026 (SIL Open Font License; the license text is in
   fonts/OFL.txt). Latin subsets, weights 400 to 600, Bodoni pinned at "opsz" 28: the same
   faces the Google Fonts request served, without the third party round trips. Preloaded
   from every page head (scripts/lib/chrome.mjs). */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/bodoni-moda-latin.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/jost-latin.woff2") format("woff2"); }

/* Metric-matched fallbacks. Until the web fonts arrive (display=swap), text is set in a
   local face scaled to Jost's and Bodoni Moda's width and line box, so the swap does not
   move the layout. Arial and Georgia (macOS, Windows, iOS) were measured against the web
   fonts in Chrome on a 160-character sample. Roboto and Noto Serif (Android) are not on
   the measuring machine, so their values scale the Arial and Georgia figures by each
   face's average character width (capsize metrics). */
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 96.7%; ascent-override: 110.7%; descent-override: 39.3%; line-gap-override: 0%; } /* impeccable-disable-line design-system-font -- metric-matched local stand-in for Jost while it loads */
@font-face { font-family: "Jost Fallback Android"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 96.9%; ascent-override: 110.4%; descent-override: 39.2%; line-gap-override: 0%; } /* impeccable-disable-line design-system-font -- metric-matched local stand-in for Jost while it loads */
@font-face { font-family: "Bodoni Fallback"; src: local("Georgia"); size-adjust: 102.1%; ascent-override: 110.7%; descent-override: 39.2%; line-gap-override: 0%; } /* impeccable-disable-line design-system-font -- metric-matched local stand-in for Bodoni Moda while it loads */
@font-face { font-family: "Bodoni Fallback Android"; src: local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"); size-adjust: 94.6%; ascent-override: 119.4%; descent-override: 42.3%; line-gap-override: 0%; } /* impeccable-disable-line design-system-font -- metric-matched local stand-in for Bodoni Moda while it loads */

:root {
  --night: #0a1620;             /* midnight lake */
  --night-2: #12212d;
  --gold: #bf9b62;              /* brass */
  --gold-ink: #7b5d2c;          /* brass for text on white */
  --paper-2: #f4f2ee;
}
:root {
  --paper: #ffffff;
  --text: #19191b;
  --text-2: #4d4b47;
  --on-night: #f2f0ec;
  --on-night-2: rgba(242, 240, 236, 0.72);
  --rule: rgba(25, 25, 27, 0.14);
  --rule-night: rgba(242, 240, 236, 0.18);
  --display: "Bodoni Moda", "Bodoni Fallback", "Bodoni Fallback Android", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Jost Fallback", "Jost Fallback Android", "Futura", "Avenir Next", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(20px, 4.4vw, 72px);
  --max: 1440px;
  --section: clamp(88px, 11vw, 180px);
  --header-h: 84px;
  --error: #a8362f;
  --error-ink: #8f2a24;
  --error-bg: #fbeceb;

  /* Type ramp. Every font size in kizlo.css and kizlo-pages.css reads one of these;
     the phone steps redefine a few of them at 600px and 400px (see Responsive). */
  /* Display, Bodoni Moda */
  --fs-display: clamp(2.6rem, 6.2vw, 5.75rem);       /* default h1 */
  --fs-hero: clamp(2.5rem, min(4.6vw + 1.2rem, 6.4vw), 5.4rem);  /* home hero h1; the 6.4vw cap keeps "Windermere & Winter Garden" on one line at tablet widths */
  --fs-page-title: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); /* inner page h1 */
  --fs-page-title-phone: clamp(2rem, 8.8vw, 2.25rem); /* inner page h1 on phones of 480px and under */
  --fs-headline: clamp(2.1rem, 3.4vw + 1rem, 3.9rem); /* h2 on the home page, claim panels */
  --fs-closing: clamp(2.1rem, 5vw, 4.6rem);          /* home closing band */
  --fs-section: clamp(2rem, 3.2vw, 3rem);            /* every section h2 on inner pages */
  --fs-cta: clamp(2rem, 3.6vw, 3.4rem);              /* CTA band .display */
  --fs-subhead: clamp(1.7rem, 2.6vw, 2.3rem);        /* long-form (prose) h2 */
  --fs-form-title: clamp(1.7rem, 2.2vw, 2.2rem);     /* form panel h2 */
  --fs-tile: clamp(1.7rem, 2.6vw, 2.5rem);           /* community tile name */
  --fs-title: clamp(1.5rem, 2.1vw, 2rem);            /* h3, listing name */
  --fs-card: clamp(1.5rem, 2vw, 1.9rem);             /* editorial card title */
  --fs-step: 1.45rem;                                /* step, fact and prose h3 */
  --fs-faq: 1.25rem;                                 /* FAQ question */
  --fs-footer-head: 1.35rem;                         /* footer column heading */
  --fs-menu: clamp(1.4rem, 5.2vh, 1.9rem);           /* phone menu links */
  --fs-footer-mark: clamp(2.4rem, 7.5vw, 7rem);
  /* Numerals, Bodoni Moda, lining figures */
  --fs-numeral: clamp(2.2rem, 4.2vw, 4.4rem);        /* stat figures */
  --fs-numeral-feature: clamp(2.8rem, 5.6vw, 5.2rem); /* .stats--feature, always under the hero h1 */
  --fs-step-num: 2.2rem;                             /* numbered-step numeral */
  --fs-table-num: 1.6rem;                            /* market table figure */
  --fs-price: clamp(1.4rem, 2vw, 1.9rem);            /* listing price */
  --fs-score: clamp(5rem, 10vw, 9rem);               /* .reviews__score "4.9", a graphic figure, not a heading */
  --fs-spec: clamp(1.3rem, 1.6vw, 1.6rem);           /* .listing__specs figure */
  --fs-index: 1.6rem;                                /* .area-index row name */
  --fs-cell-num: 1.25rem;                            /* .data-table td.num */
  /* Quotes */
  --fs-quote: clamp(1.3rem, 2.3vw, 2.1rem);          /* testimonial on dark */
  --fs-quote-sm: clamp(1.25rem, 1.9vw, 1.65rem);     /* quote on light grounds */
  /* Text, Jost */
  --fs-lede: clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-hero-sub: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body-lg: 1.125rem;                            /* claim and closing paragraphs */
  --fs-body: 1.0625rem;
  --fs-table: 1rem;                                  /* data table cells on inner pages */
  --fs-sm: 0.9375rem;                                /* meta, captions, field labels, footer */
  --fs-xs: 0.875rem;                                 /* fine print, consent, legal, breadcrumbs */
  --fs-label: 0.8125rem;                             /* tracked caps: buttons, arrow links, nav */
  /* Wordmark lockup */
  --fs-mark-k: 1.7rem;
  --fs-mark: 0.82rem;
  --fs-mark-sub: 0.6rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  background: var(--paper);
  color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--night); }
html { scrollbar-color: var(--gold) var(--night); }

/* Focus ring follows its ground: Brass Ink on light, Brass on dark, Moonlight over the
   hero video and the transparent header. */
:focus-visible, iframe:focus-within { outline: 2px solid var(--gold-ink); outline-offset: 3px; } /* an embedded map reports focus only as :focus-within */
.site-header :focus-visible, .night :focus-visible, .claim :focus-visible, .closing :focus-visible,
.page-hero :focus-visible, main > .breadcrumbs :focus-visible, .cta-band :focus-visible,
.site-footer :focus-visible, .stats--photo :focus-visible, .night .area:focus-visible,
.nav-open .site-nav :focus-visible { outline-color: var(--gold); }
.hero :focus-visible, .js:not(.nav-open) .site-header:not(.is-solid):not(.site-header--solid) :focus-visible { outline-color: var(--on-night); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--gold); color: var(--night); padding: 14px 22px; font-weight: 500; }
.skip-link:focus { left: 0; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* taste-skill-ignore: underline/arrow stroke on links, the canon luxury link style */

/* ---------- Type ---------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; color: inherit; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.02; }
h2 { font-size: var(--fs-headline); line-height: 1.06; }
h3 { font-size: var(--fs-title); line-height: 1.15; }
.label {
  font: 500 var(--fs-label)/1.4 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--text-2); max-width: 58ch; }
p, li, td, th, summary, figcaption, .lede, .stat__label { text-wrap: pretty; }
.hero__sub, .closing p, .faq-item summary { text-wrap: balance; }
p + p { margin-top: 1.1em; }
.measure { max-width: 34em; } /* ~65-75 characters of Jost; 62ch ran ~88 in wide columns */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { max-width: 20ch; }
.section-head .lede { margin-top: 18px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 12px 30px; text-align: center;
  font: 500 var(--fs-label)/1.35 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--gold); background: var(--gold); color: var(--night); /* taste-skill-ignore: canon gold-outline detail chosen by the client */
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--on-night); border-color: rgba(242, 240, 236, 0.6); }
.btn--dark { background: var(--night); color: var(--on-night); border-color: var(--night); }
/* Hover fills only where a pointer can hover, so a tap never leaves a button stuck inverted. */
@media (hover: hover) {
  .btn:hover { background: transparent; color: var(--gold); }
  .btn--ghost:hover { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
  .btn--dark:hover { background: transparent; color: var(--night); }
  .on-light .btn:not(.btn--ghost):hover, .section:not(.night):not(.cta-band):not(.closing) .btn:not(.btn--ghost):not(.btn--light):hover, .form-panel .btn:hover { background: var(--night); color: var(--on-night); border-color: var(--night); }
}
.arrow-link {
  display: inline-block;
  font: 500 var(--fs-label)/1.5 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; text-wrap: balance;
  color: var(--gold-ink); padding: 10px 0;
}
/* The stroke is inline content: it follows the last word, so a wrapped label still reads as one link. */
.arrow-link::after { content: ""; display: inline-block; vertical-align: middle; width: 34px; height: 1px; margin: 0 0 0 14px; background: currentColor; transition: width 0.4s var(--ease); } /* taste-skill-ignore: underline/arrow stroke on links, the canon luxury link style */
.arrow-link:hover::after { width: 56px; }
.night .arrow-link, .claim .arrow-link, .closing .arrow-link, .arrow-link--light { color: var(--gold); }

/* Inline text link (moved from kizlo-pages.css so every page, including home, has it) */
.text-link { color: var(--gold-ink); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 0.3s var(--ease); } /* taste-skill-ignore: link underline */
.text-link:hover { color: var(--text); }
.night .text-link, .cta-band .text-link, .page-hero .text-link, .claim .text-link, .closing .text-link { color: var(--gold); }
/* On a dark ground the hover goes Moonlight (Ink would vanish into Midnight). */
.night .text-link:hover, .cta-band .text-link:hover, .page-hero .text-link:hover, .claim .text-link:hover, .closing .text-link:hover { color: var(--on-night); }
/* Over a hero photograph brass text drops near 4:1, so the words go Moonlight over a brass rule. */
.page-hero--image .text-link { color: var(--on-night); border-bottom-color: var(--gold); }
.page-hero--image .text-link:hover { color: var(--gold); }
/* The same over the claim photographs: Moonlight words, brass stroke and rule. */
.claim .arrow-link { color: var(--on-night); }
.claim .arrow-link::after { background: var(--gold); }
.claim .text-link { color: var(--on-night); border-bottom-color: var(--gold); }
.claim .text-link:hover { color: var(--gold); }
.night .stat__label .text-link, .stats--photo .stat__label .text-link { color: var(--on-night); border-bottom-color: var(--gold); }
.night .stat__label .text-link:hover, .stats--photo .stat__label .text-link:hover { color: var(--gold); }

/* Phone fold: long reference tables stay open on desktop and fold away on phones (kizlo.js closes them at <=600px; without JS they stay open) */
.phone-fold > summary { display: none; }
@media (max-width: 600px) {
  .phone-fold { background: var(--paper-2); margin-top: 24px; }
  .section--alt .phone-fold, .tint .phone-fold { background: var(--paper); }
  .phone-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px; padding: 16px 20px; font: 400 var(--fs-faq)/1.35 var(--display); color: var(--text); }
  .phone-fold > summary::-webkit-details-marker { display: none; }
  .phone-fold > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--gold-ink), var(--gold-ink)) center / 14px 1.5px no-repeat, linear-gradient(var(--gold-ink), var(--gold-ink)) center / 1.5px 14px no-repeat; transition: transform 0.35s var(--ease); } /* taste-skill-ignore: drawn plus icon */
  .phone-fold[open] > summary::after { transform: rotate(45deg); }
  .phone-fold[open] > :not(summary) { padding: 0 20px 20px; }
}

/* ---------- Header ---------- */
/* Solid by default, so the header and nav read without JavaScript; it is
   transparent over the hero only when kizlo.js is there to solidify it on scroll. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  color: var(--on-night); background: var(--night);
  transition: background 0.4s var(--ease), height 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.js .site-header:not(.is-solid):not(.site-header--solid) { background: transparent; box-shadow: none; } /* taste-skill-ignore: removes the sticky-bar shadow over the hero */
/* While the bar is transparent, a short Scrim under it keeps the brass Call link and the
   wordmark above 4.5:1 over a bright sky in the video or a hero photograph. */
.js:not(.nav-open) .site-header:not(.is-solid):not(.site-header--solid)::before { content: ""; position: absolute; inset: 0 0 -32px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(6, 8, 10, 0.5), rgba(6, 8, 10, 0.3) 60%, rgba(6, 8, 10, 0)); } /* taste-skill-ignore: neutral scrim over photography */
.site-header.is-solid, .site-header--solid { background: var(--night); height: 72px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); } /* taste-skill-ignore: sticky bar / floating dev panel */
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); }
.site-nav > a:not(.btn) {
  white-space: nowrap;
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 0; position: relative;
}
.site-nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); } /* taste-skill-ignore: underline/arrow stroke on links, the canon luxury link style */
.site-nav > a:not(.btn):hover::after, .site-nav > a:not(.btn):focus-visible::after, .site-nav > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav .btn { min-height: 44px; padding: 0 20px; }
.nav-phone { font: 500 var(--fs-sm)/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap; }
.nav-more { display: none; }
/* Phone shortcut in the bar once the number itself no longer fits (≤1120). */
.header-call {
  display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: auto;
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  transition: color 0.35s var(--ease);
}
.header-call:hover { color: var(--on-night); }
.nav-toggle { display: none; width: 48px; height: 48px; position: relative; flex: none; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 1px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.2s; } /* taste-skill-ignore: underline/arrow stroke on links, the canon luxury link style */
.nav-toggle span:nth-child(1) { top: 18px; } .nav-toggle span:nth-child(2) { top: 24px; } .nav-toggle span:nth-child(3) { top: 30px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Wordmark (three candidates; one ships) ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 14px; line-height: 1; white-space: nowrap; }
.wm--monogram { display: inline-flex; }
.wm--monogram { align-items: center; gap: 14px; }
.wm--monogram i { font: normal 600 var(--fs-mark-k)/1 var(--display); width: 46px; height: 46px; padding-top: 2px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); } /* taste-skill-ignore: canon gold-outline detail chosen by the client */
.wm--monogram b { font: 500 var(--fs-mark)/1.25 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.wm--monogram b small { display: block; font-size: var(--fs-mark-sub); letter-spacing: 0.42em; color: var(--gold); margin-top: 5px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; color: var(--on-night); background: var(--night); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* The poster <picture> is the image; the video sits on it, invisible until frames play
   (kizlo.js starts it after load, and never under reduced motion or data saver). */
.hero__media picture { position: absolute; inset: 0; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(6, 8, 10, 0.68) 0%, rgba(6, 8, 10, 0.68) 12%, rgba(6, 8, 10, 0.56) 30%); } /* taste-skill-ignore: neutral scrim over photography */
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; background: linear-gradient(to top, rgba(6, 8, 10, 0.55), rgba(6, 8, 10, 0)); } /* taste-skill-ignore: neutral scrim over photography */
.hero__content { text-align: center; padding-top: var(--header-h); padding-bottom: 120px; }
/* Measures in em, not ch, so the line breaks hold while the web fonts load
   (26ch of Bodoni Moda zeros = 16.1em; 46ch of Jost = 27.6em). */
.hero h1 { margin: 0 auto; max-width: 16.1em; font-size: var(--fs-hero); }
.hero__sub { margin: 26px auto 0; max-width: 27.6em; font-size: var(--fs-hero-sub); color: var(--on-night); }
.hero__actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.section:not(.closing):not(.hero) .hero__actions { justify-content: flex-start; }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hero__rating { font-size: var(--fs-sm); color: var(--on-night-2); }
.hero__rating strong { color: var(--on-night); font-weight: 500; }
.hero__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } /* "from 120 Google reviews" drops whole to a second line when space runs out */
/* The rating line on a light ground: Graphite text, Brass Ink stars. */
.section:not(.night):not(.cta-band):not(.closing) .hero__rating { color: var(--text-2); }
.section:not(.night):not(.cta-band):not(.closing) .hero__rating strong { color: var(--text); }
.section:not(.night):not(.cta-band):not(.closing) .stars { color: var(--gold-ink); }
.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }
/* Pause control for the background video (WCAG 2.2.2): svg.i-pause shows while it plays,
   svg.i-play once paused. Hidden without JS and when the video can never play. */
.hero__pause { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-night); color: var(--on-night); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } /* taste-skill-ignore: 1px Hairline on Night, the system rule (DESIGN.md) */
.hero__pause svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.hero__pause .i-play, .hero.is-paused .hero__pause .i-pause { display: none; }
.hero.is-paused .hero__pause .i-play { display: block; }
html:not(.js) .hero__pause, .hero__pause[hidden] { display: none; }
@media (hover: hover) { .hero__pause:hover { border-color: var(--gold); color: var(--gold); } }

/* Entrance, CSS only, so it never waits on JavaScript: a Midnight veil lifts off the
   poster, then the sub, actions and foot rise in. The h1 does not animate: it is the
   largest paint on a phone, so it is drawn in place on the first frame (October 2026,
   mobile LCP). Inner page heroes stagger their lede and actions. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--night); pointer-events: none; animation: veil-out 1.8s var(--ease) 0.1s both; }
  .hero__sub, .page-hero .lede { animation: rise-in 1.1s var(--ease) 0.48s both; }
  .hero .hero__actions, .page-hero .hero__actions { animation: rise-in 1.1s var(--ease) 0.64s both; }
  .hero__foot { animation: rise-in 1.1s var(--ease) 0.85s both; }
}
@keyframes veil-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Surfaces ---------- */
.section { padding-block: var(--section); }
.night { background: var(--night); color: var(--on-night); }
.night .lede, .night p { color: var(--on-night-2); }
.night h2, .night h3 { color: var(--on-night); }
.tint { background: var(--paper-2); }

/* Stats band: one row of equal columns for any count, 2-up on phones.
   Figures are plain text and rise in once with their .reveal parent, so no frame ever
   shows a wrong number; a .stat without .reveal simply stays put. */
.stats { --cols: 2; --stat-pad: clamp(16px, 2vw, 32px); --stat-fs: var(--fs-numeral); display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.stats--feature { --stat-fs: var(--fs-numeral-feature); }
.stat { padding: clamp(36px, 4vw, 56px) var(--stat-pad); text-align: center; }
.stats--feature .stat { padding-block: clamp(56px, 7vw, 112px); }
.stat__num, .night .stat__num { color: var(--gold); font: 500 var(--stat-fs)/1 var(--display); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
/* A figure never outgrows its column: capped at 21% of the column's inner width, which
   still fits a 4.5em figure such as "$3M–$6M". Every figure in a band shares the cap. */
@supports (width: 1cqi) {
  .stats { container-type: inline-size; }
  .stats .stat__num { font-size: min(var(--stat-fs), calc((100cqi / var(--cols) - 2 * var(--stat-pad)) * 0.21)); }
}
.stat__label { margin-top: 18px; color: var(--on-night-2); font-size: var(--fs-sm); }
.stat__label::before { content: ""; display: block; width: 32px; height: 1px; margin: 0 auto 16px; background: var(--gold); transform-origin: center; } /* taste-skill-ignore: brass rule under the figure, DESIGN.md stats band */
.js .stat.reveal .stat__num { opacity: 0; transform: translateY(40%); transition: transform 1.1s var(--ease), opacity 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.js .stat.is-in .stat__num { opacity: 1; transform: none; }
.js .stat.reveal .stat__label::before { transform: scaleX(0); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 450ms); }
.js .stat.is-in .stat__label::before { transform: none; }
@media (min-width: 601px) {
  .stats:has(> .stat:nth-child(3)) { --cols: 3; }
  .stats:has(> .stat:nth-child(4)) { --cols: 4; }
  .stats:has(> .stat:nth-child(5)) { --cols: 5; }
  .stat + .stat { border-left: 1px solid var(--rule-night); } /* taste-skill-ignore: 1px Hairline on Night between figures */
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Four figures in one row would shrink well below the h2 here; they pair up instead. */
  .stats:has(> .stat:nth-child(4)) { --cols: 2; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats:has(> .stat:nth-child(4)) > .stat:nth-child(odd) { border-left: 0; }
  .stats:has(> .stat:nth-child(4)) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* On a light ground the rules and the brass stroke switch to their ink twins
   (the numerals switch in kizlo-pages.css). */
.section:not(.night) .stat + .stat { border-left-color: var(--rule); }
.section:not(.night) .stat__label::before { background: var(--gold-ink); }
/* Stats over a photograph: <img alt=""> first, under an 85% Scrim. */
.stats--photo { position: relative; isolation: isolate; overflow: hidden; }
.stats--photo > img:first-child { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.stats--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 8, 10, 0.85); } /* taste-skill-ignore: neutral scrim over photography */

/* Split intro */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__media { position: relative; isolation: isolate; } /* own stacking context so the offset brass frame (z-index -1) shows on tinted sections too */
.split__media img { width: 100%; height: auto; }
.split__media::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); z-index: -1; } /* taste-skill-ignore: canon gold-outline detail chosen by the client */
.split h2 { margin-bottom: 28px; }
.signoff { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
/* Full-height split (home team): the photograph runs to the screen edge at 90svh, no frame;
   the text keeps the page gutter. Its section drops its own padding. */
.section:has(> .split--full) { padding-block: 0; }
.split--full { max-width: none; padding-inline: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.split--full .split__media::after { display: none; }
.split--full .split__media picture { display: block; height: 100%; }
.split--full .split__media img { height: 100%; min-height: 90svh; object-fit: cover; object-position: 50% 30%; }
.split--full > :not(.split__media) { align-self: center; max-width: 720px; padding: var(--section) var(--pad) var(--section) clamp(40px, 6vw, 112px); }
/* A page group may wrap the photograph in a <figure> with a .micro caption. */
.split__media figure { margin: 0; }
.split__media figcaption { margin-top: 12px; }
/* A captioned portrait keeps the brass frame on the picture; the caption sits below the frame. */
.split__media:has(> figure > figcaption)::after { content: none; }
.split__media > figure:has(> figcaption) > picture { display: block; position: relative; isolation: isolate; }
.split__media > figure:has(> figcaption) > picture::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); z-index: -1; pointer-events: none; } /* taste-skill-ignore: canon gold-outline detail chosen by the client */
.split__media > figure:has(> figcaption) > figcaption { margin-top: 34px; }
.split--full .split__media picture::after { display: none; }
/* Tablet: one rule for every split. The photograph leads, then the text, full width. */
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; align-items: start; }
  .split--flip > :first-child { order: 0; }
  .split:not(.split--full) .split__media { max-width: 560px; }
  .split--full { grid-template-columns: 1fr; }
  .split--full .split__media img { min-height: 0; aspect-ratio: 4 / 5; max-height: 80svh; width: 100%; }
  .split--full > :not(.split__media) { max-width: none; padding: clamp(56px, 8vw, 88px) var(--pad) var(--section); }
}
/* Small desktops keep the split side by side, but the photograph pins to the top of the
   text instead of floating mid-column beside a long read. */
@media (min-width: 1024px) and (max-width: 1279px) { .split:not(.split--full) { align-items: start; } }

/* Communities grid */
.areas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.area { position: relative; overflow: hidden; color: var(--on-night); background: var(--night); min-height: 360px; display: flex; align-items: flex-end; }
.area--wide { grid-column: span 3; min-height: 460px; }
.area--third { grid-column: span 2; }
.area img[src*="horizon-west-aerial"] { transform-origin: 50% 100%; scale: 1.5; } /* the frame is half sunset sky: keep the roofs and the lake */
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s var(--ease); opacity: 1; filter: brightness(0.86); }
.area::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(6, 8, 10, 0.86) 0%, rgba(6, 8, 10, 0.5) 32%, rgba(6, 8, 10, 0.1) 64%); } /* taste-skill-ignore: neutral scrim over photography */
.area__body { position: relative; z-index: 2; padding: clamp(22px, 2.6vw, 36px); width: 100%; }
.area h3 { font-size: var(--fs-tile); }
.area__meta { margin-top: 10px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; min-height: calc(2 * 1.65em); min-height: 2lh; font-size: var(--fs-sm); color: var(--on-night-2); }
.area__go { color: var(--gold); flex: none; transform: translateX(-8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.area:focus-visible img { transform: scale(1.06); filter: brightness(1); }
.area:focus-visible .area__go { transform: none; opacity: 1; }
@media (hover: none) { .area__go { opacity: 1; transform: none; } }
.area::after { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid var(--gold); opacity: 0; transition: opacity 0.5s var(--ease), inset 0.5s var(--ease); pointer-events: none; } /* taste-skill-ignore: canon gold-outline detail chosen by the client */
.area:focus-visible::after { opacity: 1; inset: 10px; }
@media (hover: hover) {
  .area:hover img { transform: scale(1.06); filter: brightness(1); }
  .area:hover .area__go { transform: none; opacity: 1; }
  .area:hover::after { opacity: 1; inset: 10px; }
}
/* Four equal tiles in one row (market reports); below 961px the .areas pairs and stacks apply. */
@media (min-width: 961px) { .areas--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Four across: titles one line from 961px; the source lines run long, so every meta keeps
   room for the longest and the titles share one height. */
.areas--four .area h3 { font-size: clamp(1.35rem, 1.95vw, 2.1rem); }
@media (min-width: 961px) { .areas--four .area__meta { min-height: 3lh; } }
@media (min-width: 961px) and (max-width: 1199px) { .areas--four .area__body { padding-inline: 18px; } .areas--four .area__meta { min-height: 4lh; } }

/* Generated long reads (market reports, legal pages): an article on columns 2 to 9 whose
   text keeps a reading measure of about 75 characters (34em of Jost; 72ch measured
   Jost's wide zero and ran ~100), while tables and the call to action use the column. */
.longread { grid-column: 3 / span 8; }
.longread .prose, .longread.prose { max-width: none; }
:is(.longread .prose, .longread.prose) > :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: 34em; margin-inline: auto; }
:is(.longread .prose, .longread.prose) > :is(table, .table-scroll, .inline-cta) { margin-inline: auto; }
/* Inline call to action inside a long read (market reports): a Warm Stone panel,
   Bodoni title, the primary button and the call link. */
.inline-cta { margin-block: clamp(44px, 5vw, 64px); padding: clamp(28px, 3.4vw, 44px); background: var(--paper-2); }
.inline-cta > p:not(.inline-cta__title) { max-width: 34em; }
.inline-cta__title { font: 400 var(--fs-title)/1.15 var(--display); letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.inline-cta__title + p { margin-top: 12px; color: var(--text-2); }
.inline-cta .signoff { margin-top: 26px; gap: 14px 28px; }
/* Editorial cards: the title link covers the card, so a secondary link sits above it. */
.card .arrow-link { position: relative; z-index: 1; }

/* Cinematic claim panels */
.claim { position: relative; min-height: 88svh; display: flex; align-items: center; color: var(--on-night); overflow: hidden; isolation: isolate; background: var(--night); }
.claim__media { position: absolute; inset: 0; z-index: -2; }
.claim__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.06)); will-change: transform; }
.claim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 8, 10, 0.82) 0%, rgba(6, 8, 10, 0.5) 55%, rgba(6, 8, 10, 0.2) 100%); } /* taste-skill-ignore: neutral scrim over photography */
.claim--right::before { background: linear-gradient(270deg, rgba(6, 8, 10, 0.86) 0%, rgba(6, 8, 10, 0.6) 55%, rgba(6, 8, 10, 0.2) 100%); } /* taste-skill-ignore: neutral scrim over photography */
.claim__body { max-width: 620px; }
.claim--right .claim__body { margin-left: auto; }
.claim .label { color: var(--gold); }
.claim h2 { margin: 0 0 24px; }
/* A 48px brass rule draws in above the headline as the panel reveals. */
.claim h2::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: 28px; background: var(--gold); transform-origin: left; } /* taste-skill-ignore: brass hairline, the system's one accent rule */
.js .claim .reveal h2::before { transform: scaleX(0); transition: transform 1s var(--ease) 0.35s; }
.js .claim .reveal.is-in h2::before { transform: none; }
.claim p { color: var(--on-night); font-size: var(--fs-body-lg); max-width: 46ch; }
.claim .btn { margin-top: 38px; }
/* Scroll-driven zoom where the browser has it: the photograph settles from 1.16 to 1 across
   the panel's pass and the text drifts a little against it. kizlo.js zooms the rest (from 1.06). */
/* The timeline is named on .claim itself: its overflow:hidden would make it the scroller
   for a view() taken from the photograph inside it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .claim { view-timeline-name: --claim; }
    .claim__media img { transform: none; will-change: auto; animation: claim-zoom linear both; animation-timeline: --claim; animation-range: cover 0% cover 100%; }
    .claim .claim__body { animation: claim-drift linear both; animation-timeline: --claim; animation-range: cover 0% cover 100%; }
  }
}
@keyframes claim-zoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes claim-drift { from { translate: 0 28px; } to { translate: 0 -28px; } }

/* Listings */
/* A listing card is <article class="listing">: the h3's .listing__link covers the whole card
   through its ::after, and the arrow links in .listing__links sit above that layer.
   A legacy a.listing still works. */
.listings { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.listing { display: flex; flex-direction: column; position: relative; }
.listing__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.listing__media picture { display: block; height: 100%; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.listing__tag { position: absolute; top: 18px; left: 18px; background: var(--night); color: var(--gold); padding: 9px 14px; }
.listing__row { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.listing h3 { font-size: var(--fs-title); transition: color 0.35s var(--ease); }
.listing__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.listing__price { font: 400 var(--fs-price)/1 var(--display); color: var(--gold-ink); white-space: nowrap; }
.listing__facts { margin-top: 10px; color: var(--text-2); }
/* Four facts in a ruled row: Bodoni figure over a Jost label. */
.listing__specs { list-style: none; margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--rule); } /* taste-skill-ignore: 1px Hairline, rule-separated facts */
.listing > :has(+ .listing__specs) { margin-bottom: 22px; } /* the spec table sits at the card foot, never closer than 22px */
.listing__specs li { padding: 16px 12px 14px; }
.listing__specs li:first-child { padding-left: 0; }
.listing__specs li + li { border-left: 1px solid var(--rule); } /* taste-skill-ignore: 1px Hairline between facts */
.listing__specs b { display: block; font: 500 var(--fs-spec)/1.1 var(--display); color: var(--text); font-variant-numeric: lining-nums; }
.listing__specs span { display: block; margin-top: 6px; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-2); }
.listing__links { position: relative; z-index: 2; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 0 28px; }
/* Status on the photograph: --active, --pending ("Under contract") or --sold ("Sold October 2026").
   Set by hand from Vlad's word only; nothing infers it. */
.listing__status { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--night); color: var(--on-night); font: 500 var(--fs-label)/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.listing__status::before { content: ""; flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); } /* taste-skill-ignore: square brass status mark */
.listing__status--active { color: var(--gold); }
.listing__status--active::before { background: var(--gold); }
.listing__status--sold { background: var(--gold); color: var(--night); }
.listing__status--sold::before { display: none; }
.listing:has(.listing__link:focus-visible) h3, a.listing:focus-visible h3 { color: var(--gold-ink); }
@supports selector(:has(*)) {
  .listing__link:focus-visible { outline: none; }
  .listing:has(.listing__link:focus-visible) { outline: 2px solid var(--gold-ink); outline-offset: 8px; }
}
@media (hover: hover) {
  .listing:hover .listing__media img { transform: scale(1.04); }
  .listing:hover h3 { color: var(--gold-ink); }
}

/* Testimonials: a .quote-wrap band (or a legacy figure.quote) driven by [data-quotes].
   kizlo.js holds the quote box at the height of the longest quote. */
.reviews { text-align: center; }
.reviews .label { color: var(--gold); }
.quote, .quote-wrap { margin: 34px auto 0; max-width: 980px; }
.quote-wrap .quote { margin: 0; max-width: none; }
.quote blockquote { font: 400 var(--fs-quote)/1.38 var(--display); color: var(--on-night); min-height: 4.2em; display: grid; place-items: center; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.quote.is-swapping blockquote { opacity: 0; transform: translateY(10px); }
.quote figcaption { margin-top: 26px; color: var(--gold); font-size: var(--fs-body); transition: opacity 0.45s var(--ease); }
.quote.is-swapping figcaption { opacity: 0; }
.quote-nav { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 22px; }
.quote-nav[hidden] { display: none; }
.quote-nav button { width: 52px; height: 52px; border: 1px solid var(--rule-night); color: var(--on-night); display: grid; place-items: center; transition: border-color 0.3s, color 0.3s; } /* taste-skill-ignore: canon gold-outline detail chosen by the client */
.quote-nav [data-pause][aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
@media (hover: hover) { .quote-nav button:hover { border-color: var(--gold); color: var(--gold); } }
.quote-nav .counter { font-variant-numeric: tabular-nums; color: var(--on-night-2); min-width: 64px; }
.reviews__more { margin-top: 48px; }
/* Split band: heading and the 4.9 score on the left (5), the rotating quote on the right (7);
   stacked and centred at 960px and below. */
.reviews--split { text-align: left; }
.reviews--split > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(40px, 6vw, 112px); align-items: center; }
.reviews--split .quote-wrap, .reviews--split .quote { margin: 0; max-width: none; }
.reviews--split .quote blockquote { place-items: center start; }
.reviews--split .quote-nav { justify-content: flex-start; }
.reviews__score { margin-top: clamp(28px, 4vw, 56px); }
.reviews__num { font: 400 var(--fs-score)/0.86 var(--display); letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: lining-nums; }
.night .reviews__num { color: var(--gold); }
.reviews__stars { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--fs-sm); color: var(--on-night-2); }
.reviews__stars .stars svg { width: 18px; height: 18px; }
.reviews__score .arrow-link { margin-top: 14px; }

/* Market table */
.market { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; padding: 22px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.data-table thead th { color: var(--text-2); padding-top: 0; }
.data-table td { text-align: right; font: 500 var(--fs-table-num)/1 var(--display); color: var(--text); }
.data-table tbody th { font-size: var(--fs-body-lg); }
.note { font-size: var(--fs-sm); color: var(--text-2); margin-top: 18px; }

/* Closing CTA */
.closing { position: relative; color: var(--on-night); background: var(--night); overflow: hidden; isolation: isolate; text-align: center; }
.closing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: saturate(0.8); z-index: -2; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(6, 8, 10, 0.72), rgba(6, 8, 10, 0.86)); } /* taste-skill-ignore: neutral scrim over photography */
.closing h2 { font-size: var(--fs-closing); max-width: 16ch; margin: 0 auto; }
.closing p { color: var(--on-night); max-width: 48ch; margin: 24px auto 0; font-size: var(--fs-body-lg); }
.closing .label { color: var(--gold); }
.closing .hero__actions { margin-top: 40px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--on-night-2); padding-top: clamp(72px, 8vw, 120px); font-size: var(--fs-sm); border-top: 1px solid var(--rule-night); } /* taste-skill-ignore: 1px Hairline on Night, the system rule (DESIGN.md) */
.site-footer a { transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer-top { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: clamp(48px, 6vw, 80px); }
.footer-actions { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-footer .arrow-link { color: var(--gold); min-height: 44px; }
.footer-also { margin-top: 22px; font-size: var(--fs-xs); line-height: 1.6; max-width: 34ch; }
.footer-mark { color: var(--on-night); font: 400 min(var(--fs-footer-mark), 5.6vw)/0.95 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.footer-mark span { color: var(--gold); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-block: clamp(56px, 6vw, 88px); background: var(--night-2); margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.footer-cols h2 { font: 400 var(--fs-footer-head)/1.2 var(--display); color: var(--gold); margin-bottom: 22px; }
.footer-cols ul { list-style: none; display: grid; gap: 10px; }
/* Link groups are <details>: always open above 600px (kizlo.js keeps them so),
   folded into brass-plus disclosures on phones. */
.footer-group > summary { display: block; list-style: none; cursor: default; pointer-events: none; }
.footer-group > summary::-webkit-details-marker { display: none; }
.footer-brokerage { margin-top: 28px; display: flex; align-items: center; gap: 16px; color: var(--on-night); }
.kw-logo { font: 700 1.6rem/1 var(--sans); letter-spacing: -0.02em; color: #fff; background: #b40101; padding: 8px 10px; }
.footer-legal { padding-block: 32px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: var(--fs-xs); }
.footer-legal p { margin: 0; }
.footer-eho { display: flex; align-items: center; gap: 14px; }
.footer-eho img { height: 34px; width: auto; opacity: 0.85; }

/* ---------- Reveal (content visible without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* If kizlo.js never arrives (blocked, failed), everything shows by itself at 2.5s. */
.js:not(.js-ready) .reveal { animation: reveal-failsafe 0.8s var(--ease) 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.js:not(.js-ready) .stat.reveal .stat__num, .js:not(.js-ready) .stat.reveal .stat__label::before { animation: reveal-failsafe 0.8s var(--ease) 2.5s forwards; }
/* Without kizlo.js the header never turns solid on scroll, so it starts solid. */
html.js:not(.js-ready) .site-header:not(.is-solid):not(.site-header--solid) { background: var(--night); }
/* A long placeholder or value ends in an ellipsis rather than a clipped letter (form markup is pinned). */
.form-panel input, .form-panel input::placeholder { text-overflow: ellipsis; }
/* Keyboard focus never lands on something still invisible. */
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }

/* ---------- Jump links: a wrapping row of tracked-caps links (in-page or city searches) ---------- */
.jump-links { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 28px; }
.jump-links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.jump-links a::after { content: ""; flex: none; width: 18px; height: 1px; background: currentColor; transition: width 0.4s var(--ease); } /* taste-skill-ignore: underline/arrow stroke on links, the canon luxury link style */
.jump-links a:hover::after { width: 30px; }
.night .jump-links a, .cta-band .jump-links a, .page-hero .jump-links a { color: var(--gold); }
.page-hero--image .jump-links a { color: var(--on-night); }

/* ---------- Find a home: a GET form to the CINC search (not a lead form) ---------- */
/* As its own band: <section class="find-band night"> (or a light ground) holding the form. */
.find-band { padding-block: clamp(44px, 5vw, 72px); }
.find-band.night { border-bottom: 1px solid var(--rule-night); } /* taste-skill-ignore: 1px Hairline on Night between two dark bands */
.find-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1121px) {
  .find-home { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 4vw, 72px); }
  .find-home .find-home__title { padding-bottom: 12px; }
}
.find-home .find-home__title { font-size: var(--fs-title); line-height: 1.15; }
.find-home__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 16px; align-items: end; }
.find-home__field label { display: block; margin-bottom: 10px; font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.find-home select {
  width: 100%; min-height: 56px; padding: 14px 44px 14px 16px; border-radius: 0; appearance: none; -webkit-appearance: none;
  font: 400 var(--fs-body)/1.3 var(--sans); color: var(--text); background: var(--paper) no-repeat right 16px center / 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237b5d2c' stroke-width='1.4'/%3E%3C/svg%3E");
  border: 1px solid rgba(25, 25, 27, 0.56); /* taste-skill-ignore: form fields keep their borders */
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.find-home select:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-ink), 0 0 0 4px rgba(191, 155, 98, 0.28); } /* taste-skill-ignore: focus ring */
.find-home__submit { min-height: 56px; white-space: nowrap; }
/* On a dark ground: Moonlight text on a clear field with a 50% Moonlight border (4:1). */
.night .find-home__field label, .page-hero .find-home__field label { color: var(--on-night-2); }
.night .find-home select, .page-hero .find-home select {
  color: var(--on-night); background-color: rgba(242, 240, 236, 0.04); border-color: rgba(242, 240, 236, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bf9b62' stroke-width='1.4'/%3E%3C/svg%3E");
}
.night .find-home select:focus, .page-hero .find-home select:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(191, 155, 98, 0.28); } /* taste-skill-ignore: focus ring */
.find-home option { color: var(--text); background: var(--paper); }

/* ---------- Preview switcher (localhost review only; removed before launch) ---------- */

/* Bodoni Moda at its 96pt optical size drops hairlines at 1x; pin a sturdier cut everywhere.
   Every `font:` shorthand resets this property, so it is forced here. Jost has no opsz axis. */
*, *::before, *::after { font-optical-sizing: none !important; font-variation-settings: "opsz" 28 !important; }
/* Large display type gets a larger optical size (tighter W kerning) while staying sturdy at 1x; small text keeps 28. */
h1, h2, .display, .stat__num, .footer-mark { font-variation-settings: "opsz" 48 !important; font-kerning: normal; }
h1, .display { font-weight: 450; } /* hairlines of the W hold at 1x */

/* ---------- Responsive ---------- */
/* The full nav (Invest, "Search Homes", UA, phone) needs about 1300px. Below 1300
   the word "Homes" gives way, below 1200 Invest, and at 1120 UA (all three stay in
   the footer and the phone menu); at 1120 the number also becomes "Call". */
@media (max-width: 1439px) and (min-width: 1121px) {
  .site-nav { gap: 22px; }
  .site-nav > a:not(.btn) { letter-spacing: 0.14em; }
}
@media (max-width: 1299px) and (min-width: 961px) { .nav-short { display: none; } }
@media (max-width: 1199px) and (min-width: 961px) { .nav-wide { display: none; } }
@media (max-width: 1120px) and (min-width: 961px) { .site-nav > .nav-lang { display: none; } }
@media (max-width: 1120px) {
  .site-nav .nav-phone { display: none; }
  .header-call { display: inline-flex; }
}
@media (max-width: 1120px) and (min-width: 961px) {
  .site-header__inner { gap: 20px; }
  .site-nav { gap: 18px; }
  .site-nav > a:not(.btn) { letter-spacing: 0.12em; }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .site-header__inner { gap: 16px; }
  .js .nav-toggle { display: block; margin-right: -12px; }
  /* Full-screen menu under the bar: scrolls when it outgrows a short or zoomed screen. */
  .js .site-nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: -1; background: var(--night);
    flex-direction: column; justify-content: flex-start; align-items: center;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 24px var(--pad) 40px; gap: clamp(8px, 2.6vh, 26px);
    opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  .js .site-nav > * { flex: none; }
  .js .site-nav > :first-child { margin-top: auto; }
  .js .site-nav > :last-child { margin-bottom: auto; }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  html.nav-open { overflow: hidden; }
  .nav-open .site-header, .js.nav-open .site-header:not(.is-solid):not(.site-header--solid) { background: var(--night); }
  .js .site-nav > a:not(.btn), .js .site-nav > .btn {
    font: 400 var(--fs-menu)/1.1 var(--display); letter-spacing: 0; text-transform: none;
    display: inline-block; padding: max(5px, calc((44px - 1.1em) / 2)) 0;
  }
  /* Contact joins the list as a plain link; the overlay's one gold action is the valuation. */
  .js .site-nav > .btn { background: none; border: 0; color: var(--on-night); }
  .js .site-nav > .btn[aria-current="page"] { text-decoration: underline 1px var(--gold); text-underline-offset: 0.3em; }
  .js .site-nav > a.nav-lang, .js .site-nav > a.nav-phone { display: none; }
  .js .nav-more { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; padding-top: clamp(4px, 1.6vh, 16px); }
  .nav-more .btn { min-height: 56px; width: 100%; padding: 0 20px; }
  .nav-more__row { display: flex; gap: 12px; width: 100%; }
  .nav-more__row .btn { flex: 1 1 0; }
  .nav-more__links { font-size: var(--fs-xs); color: var(--on-night-2); text-align: center; }
  .nav-more__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--on-night); text-decoration: underline 1px var(--rule-night); text-underline-offset: 5px; transition: color 0.3s var(--ease); }
  .nav-more__links a:hover { color: var(--gold); }
  .nav-more__links a[aria-current="page"] { text-decoration-color: var(--gold); }
  /* Items rise in one after another as the menu opens. */
  .js .site-nav > * { opacity: 0; transform: translateY(14px); }
  .js.nav-open .site-nav > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(120ms + var(--n, 0) * 55ms); }
  .site-nav > :nth-child(1) { --n: 0; } .site-nav > :nth-child(2) { --n: 1; } .site-nav > :nth-child(3) { --n: 2; }
  .site-nav > :nth-child(4) { --n: 3; } .site-nav > :nth-child(5) { --n: 4; } .site-nav > :nth-child(6) { --n: 5; }
  .site-nav > :nth-child(7) { --n: 6; } .site-nav > :nth-child(8) { --n: 7; } .site-nav > :nth-child(9) { --n: 8; }
  .site-nav > :nth-child(10) { --n: 9; } .site-nav > :nth-child(11) { --n: 10; } .site-nav > :nth-child(12) { --n: 11; }
  /* Without JavaScript the nav stays a plain, wrapping list under the wordmark. */
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 14px; }
  html:not(.js) .site-nav { width: 100%; flex-wrap: wrap; gap: 0 22px; }
  .market { grid-template-columns: 1fr; }
  .areas { grid-template-columns: 1fr 1fr; }
  .areas > .area:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .area--wide, .area--third { grid-column: span 1; min-height: 340px; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols > :first-child { grid-column: 1 / -1; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  /* Stacked, the wordmark keeps its full size on one line (the 5.6vw cap is for the desktop row). */
  .footer-mark { font-size: min(var(--fs-footer-mark), 11vw); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .reviews--split { text-align: center; }
  .reviews--split > .wrap { grid-template-columns: minmax(0, 1fr); }
  .reviews--split .quote blockquote { place-items: center; }
  .reviews--split .quote-nav, .reviews--split .reviews__stars { justify-content: center; }
  .find-home__fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .find-home__submit { grid-column: 1 / -1; }
}
/* Up to 1100px two listings side by side are too narrow for a price beside the address
   and four fact cells in a row: the price drops under the address and the facts pair up. */
@media (max-width: 1100px) {
  .listing__row { flex-direction: column; align-items: flex-start; }
  .listing__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing__specs li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .listing__specs li:nth-child(n+3) { border-top: 1px solid var(--rule); } /* taste-skill-ignore: 1px Hairline between facts */
}
/* Splits and the two listings stay side by side down to 601px, on a tighter gap. */
@media (min-width: 601px) and (max-width: 960px) {
  .split:not(.split--full), .listings { gap: 36px; }
}
@media (max-width: 960px) and (max-height: 520px) {
  .js .site-nav { gap: 12px; }
}
@media (max-width: 600px) {
  /* Phone type steps: the h1 always leads (hero 2.6rem, inner 2.25rem, h2 1.8rem, CTA 1.9rem). */
  :root { --fs-hero: 2.6rem; --fs-page-title: 2.25rem; --fs-section: 1.8rem; --fs-cta: 1.9rem; --fs-numeral-feature: 2.4rem; --fs-faq: 1.125rem; }
  .btn, .arrow-link { letter-spacing: 0.14em; }
  .stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  /* Rating and the pause control share the foot; the rating centres when it is alone. */
  .hero__foot:has(> .hero__pause[hidden]), .hero__foot:not(:has(> .hero__pause)) { justify-content: center; }
  .split, .listings { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .wrap.split:not(.split--full) .split__media { max-width: 480px; }
  .split--full .split__media img { height: 50svh; min-height: 0; }
  .split--full > :not(.split__media) { max-width: none; padding: 56px var(--pad) var(--section); }
  .find-home__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .areas { grid-template-columns: 1fr; }
  .area, .area--third { min-height: 220px; }
  .area--wide { min-height: 300px; }
  /* Shorter tiles put the name higher on the photograph, so the Scrim reaches further up. */
  .area::before { background: linear-gradient(to top, rgba(6, 8, 10, 0.82) 0%, rgba(6, 8, 10, 0.5) 62%, rgba(6, 8, 10, 0.15) 100%); } /* taste-skill-ignore: neutral scrim over photography */
  .claim { min-height: 66svh; align-items: flex-end; padding-bottom: 56px; }
  .claim::before, .claim--right::before { background: linear-gradient(to top, rgba(6, 8, 10, 0.9) 0%, rgba(6, 8, 10, 0.74) 55%, rgba(6, 8, 10, 0.3) 85%); } /* taste-skill-ignore: neutral scrim over photography */
  .site-header__inner { gap: 10px; }
  .js .nav-toggle { margin-right: -10px; }
  /* Brand block, then Explore, Communities and Contact as ruled disclosures,
     then the service-area line; every link is a 44px row. */
  .footer-cols { display: flex; flex-direction: column; gap: 0; padding-block: 48px 40px; }
  .footer-cols > :not(:first-child) { display: contents; }
  .footer-cols > :first-child { padding-bottom: 32px; }
  .footer-group { border-top: 1px solid var(--rule-night); } /* taste-skill-ignore: ruled disclosure list, as DESIGN.md rule-separated lists */
  .footer-cols > :last-child .footer-group { border-bottom: 1px solid var(--rule-night); } /* taste-skill-ignore: closing rule of the ruled list */
  .footer-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; cursor: pointer; pointer-events: auto; }
  .footer-group > summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--gold), var(--gold)) center / 14px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1px 14px no-repeat; transition: transform 0.35s var(--ease); } /* taste-skill-ignore: drawn plus icon */
  .footer-group[open] > summary::after { transform: rotate(45deg); }
  .footer-group > summary h2 { margin: 0; }
  .footer-group ul { gap: 0; padding-bottom: 16px; }
  .footer-cols > :nth-child(2) ul, .footer-cols > :nth-child(3) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer-cols a { display: inline-block; padding: 10px 0; }
  .footer-also { order: 1; margin-top: 24px; max-width: none; }
  .footer-legal__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .split__media::after { inset: 12px -8px -12px 8px; }
  .split__media > figure:has(> figcaption) > picture::after { inset: 12px -8px -12px 8px; }
  .split__media > figure:has(> figcaption) > figcaption { margin-top: 24px; }
  .listing__row { flex-direction: column; gap: 10px; }
  .split--text-first .split__text { order: -1; }
  /* If kizlo.js never arrives, the phone nav becomes a plain wrapping list under the wordmark.
     The head script sets .js-failed only once the page has loaded without it, so a normal
     load never renders this taller header first and then jumps (that jump was the
     homepage's 0.21 to 0.26 mobile layout shift, October 2026). */
  .js.js-failed .site-header { position: relative; height: auto; }
  .js.js-failed .site-header__inner { flex-wrap: wrap; padding-block: 14px; }
  .js.js-failed .site-nav { position: static; z-index: auto; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0 22px; padding: 0; overflow: visible; background: none; opacity: 1; visibility: visible; }
  .js.js-failed .site-nav > * { opacity: 1; transform: none; margin: 0; }
  .js.js-failed .site-nav > a:not(.btn), .js.js-failed .site-nav > .btn { font: 500 var(--fs-label)/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 0; }
  .js.js-failed .nav-toggle, .js.js-failed .nav-more { display: none; }
  }
@media (max-width: 400px) {
  :root { --fs-numeral: 2rem; --fs-numeral-feature: 2rem; --fs-mark-k: 1.5rem; --fs-mark: 0.74rem; }
  .site-header__inner { gap: 8px; }
  .wm--monogram { gap: 10px; }
  .wm--monogram i { width: 40px; height: 40px; }
  .wm--monogram b { letter-spacing: 0.26em; }
  .stats { --stat-pad: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .site-nav > * { transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .stat.reveal .stat__num, .js .stat.reveal .stat__label::before { opacity: 1; transform: none; transition: none; }
  .claim__media img { transform: none; }
  .js .claim .reveal h2::before { transform: none; }
}

/* Source line under a figures band (who measured it and when) */
.stats-note { text-align: center; margin: 0; padding-bottom: 40px; font-size: var(--fs-sm, 0.95rem); color: var(--text-2); }
.night .stats-note, .night + .wrap .stats-note { color: var(--on-night-2); }
@media (max-width: 600px) { .stats-note { padding-bottom: 24px; } }

/* The non-link "Ask" tile on the community hub: tall enough on phones for both faces above the title; brass focus ring over the dark photo */
.area :focus-visible { outline-color: var(--gold); }
@media (max-width: 600px) { .areas > div.area { min-height: 300px; } }
.areas > div.area::before { background: linear-gradient(to top, rgba(6, 8, 10, 0.9) 0%, rgba(6, 8, 10, 0.72) 50%, rgba(6, 8, 10, 0.3) 85%); } /* taste-skill-ignore: neutral scrim over photography */

/* Full active-listings list under the featured listing cards */
.listings-all__title { margin: clamp(48px, 6vw, 80px) 0 20px; font-size: var(--fs-section, 2rem); }

/* Numeric cells and stacked tables (moved from kizlo-pages.css; the home listings table uses them) */
.data-table th.num, .data-table td.num, .section .data-table td.num { text-align: right; }
.data-table td.num, .section .data-table td.num { font: 400 var(--fs-cell-num)/1.2 var(--display); color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
/* Tablet and phone: a .data-table--stack turns each row into a labelled two-column card. */
@media (max-width: 960px) {
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .data-table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); } /* taste-skill-ignore: 1px Hairline between stacked rows */
  .data-table--stack th, .data-table--stack td, .section .data-table--stack td { display: block; padding: 0; border: 0; text-align: left; }
  .data-table--stack tbody th { grid-column: 1 / -1; }
  .data-table--stack td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 400 var(--fs-label)/1.3 var(--sans); color: var(--text-2); }
  .data-table--stack td.num, .section .data-table--stack td.num { text-align: left; }
  .section:has(.form-panel) { padding-bottom: 0; }
}
/* In mixed tables only numeric cells use display numerals; text cells read as body text */
.data-table--stack td:not(.num), .section .data-table--stack td:not(.num) { font: 400 1rem/1.5 var(--sans); text-align: left; color: var(--text-2); }
.data-table--stack tbody th { font: 500 1.02rem/1.4 var(--sans); color: var(--text); }
.data-table--stack tbody th a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.data-table--stack .num { white-space: nowrap; }
@media (min-width: 961px) {
  .data-table--stack th, .data-table--stack td { padding-right: 28px; }
  .data-table--stack tr > :last-child { padding-right: 0; }
}