/* The Standard at CityLine: shared styles.
   Tokens are the design brief's Final brief (docs/rebuild/design-brief.md, ### Tokens).
   Phone and tablet overrides live in responsive.css. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/jost-latin-var.woff2") format("woff2"); }

:root {
  --paper: #F3EFE7;
  --card: #FBF9F3;
  --well: #FFFFFF;
  --ink: #211D15;
  --stone: #5F5748;
  --stone-2: #6A6151; /* was #7A7060: 4.24:1 on paper; #6A6151 (brand muted 2) is 4.7:1 or better on every ground */
  --bronze: #8A6534;
  --bronze-dark: #C89B66;
  --focus-dark: #E0B87C;
  --slate: #23282E;
  --pool: #2C6E72;
  --line: #E0D8C8;
  --line-2: #CFC5B2;
  --row-active: #EFE8D8;
  --error: #A4452F;
  --on-dark: #F3EFE7;
  --on-dark-2: #C3C7CB;
  --scrim: rgba(18, 17, 14, .14);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 30px 70px -40px rgba(24, 20, 14, .6);
  --shadow-modal: 0 34px 80px -50px rgba(24, 20, 14, .55);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --nav-h: 96px;
  --gutter: 48px;
  --max: 1380px;
  --split: 1160px;
  --prose: 680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--stone); font-family: var(--sans); font-weight: 350; font-size: 16px; line-height: 1.75; }
body.is-locked { overflow: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: 56px; line-height: 1.08; }
h2 { font-size: 42px; line-height: 1.15; }
h3 { font-size: 30px; line-height: 1.1; font-weight: 500; }
h4 { font-size: 22px; line-height: 1.2; font-weight: 500; }
::selection { background: #E4D9C3; color: var(--ink); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.on-dark :focus-visible, .nav--over :focus-visible, .menu :focus-visible, .foot :focus-visible, .hero :focus-visible { outline-color: var(--focus-dark); }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 6000; background: var(--slate); color: var(--on-dark); padding: 12px 18px; font-size: 14px; transition: top .2s ease; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- text links and buttons ---------- */
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .3s ease, text-decoration-color .3s ease; }
.link:hover { color: var(--bronze); }
.on-dark .link { color: var(--on-dark); text-decoration-color: var(--bronze-dark); }
.on-dark .link:hover { color: var(--focus-dark); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; background: var(--slate); color: var(--on-dark); border: 1px solid var(--slate); font-family: var(--sans); font-weight: 450; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.2; text-align: center; transition-property: background-color, color, border-color, transform; transition-duration: .3s, .3s, .3s, .12s; transition-timing-function: ease; white-space: nowrap; }
.btn:hover { background: var(--bronze); border-color: var(--bronze); color: var(--on-dark); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn--line { background: transparent; color: var(--slate); }
.btn--line:hover { background: var(--slate); border-color: var(--slate); color: var(--on-dark); }
.btn--light { background: var(--on-dark); border-color: var(--on-dark); color: var(--slate); }
.btn--light:hover { background: var(--focus-dark); border-color: var(--focus-dark); color: var(--slate); }
.btn--ghost-light { background: transparent; border-color: rgba(243, 239, 231, .7); color: var(--on-dark); }
.btn--ghost-light:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--slate); }
.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--on-dark); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ext-glyph { font-size: .95em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 4010; height: var(--nav-h); background: rgba(243, 239, 231, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background-color .35s ease, border-color .35s ease; }
.nav__inner { max-width: 1520px; height: 100%; margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px; }
.nav__side { display: flex; align-items: center; gap: 26px; }
.nav__side--end { justify-content: flex-end; }
.nav__toggle { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0 4px; color: var(--ink); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 450; }
.nav__bars { display: flex; flex-direction: column; gap: 5px; width: 26px; }
.nav__bars span { display: block; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.nav__bars span:first-child { width: 22px; }
.nav__bars span:last-child { width: 14px; }
.nav__toggle:hover .nav__bars span { width: 26px; }
.nav__logo { display: block; position: relative; padding: 6px 8px; }
.nav__logo img { height: 40px; width: auto; filter: brightness(0) invert(.11); transition: filter .3s ease; }
.nav__phone { font-size: 12px; letter-spacing: .14em; color: var(--stone); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.nav__phone:hover { color: var(--bronze); }
.nav__tour { min-height: 44px; padding: 0 20px; background: transparent; color: var(--slate); }
.nav__apply { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 450; color: var(--bronze); min-height: 44px; display: inline-flex; align-items: center; transition: color .3s ease; }
.nav__apply:hover { color: var(--ink); }
/* Transparent over the home hero until the hero scrolls behind the nav. */
/* Round 4: no hairline under the nav while it floats over the hero (gate feedback 1), and,
   as on the reference, the hero's large logo mark stands in for the nav logo until scroll. */
.nav--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav--over:not(.is-scrolled) .nav__logo img { opacity: 0; }
.nav__logo img { transition: filter .3s ease, opacity .35s ease; }
.nav--over .nav__toggle, .nav--over .nav__phone { color: var(--on-dark); }
.nav--over .nav__logo img { filter: brightness(0) invert(.97); }
.nav--over .nav__tour { color: var(--on-dark); border-color: rgba(243, 239, 231, .75); }
.nav--over .nav__tour:hover { background: var(--on-dark); color: var(--slate); border-color: var(--on-dark); }
.nav--over .nav__apply { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--focus-dark); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav--over .nav__apply:hover { color: var(--focus-dark); }
.nav--over.is-scrolled .nav__apply { text-decoration: none; }
.nav--over.is-scrolled { background: rgba(243, 239, 231, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav--over.is-scrolled .nav__toggle { color: var(--ink); }
.nav--over.is-scrolled .nav__phone { color: var(--stone); }
.nav--over.is-scrolled .nav__logo img { filter: brightness(0) invert(.11); }
.nav--over.is-scrolled .nav__tour { color: var(--slate); border-color: var(--slate); }
.nav--over.is-scrolled .nav__tour:hover { background: var(--slate); color: var(--on-dark); }
.nav--over.is-scrolled .nav__apply { color: var(--bronze); }
/* Menu open (gate feedback 5), as on the reference: the bar goes clear and lets the menu's
   slate show through, the logo and the end links fade out, and the toggle fades to cream,
   all on the menu's own .35s fade in both directions, so nothing switches colour against a
   ground it does not match. The selectors outrank .nav--over.is-scrolled so a scrolled home
   page behaves the same. */
.nav__toggle { transition: color .35s ease; }
.nav__side--end { transition: opacity .35s ease, visibility 0s linear 0s; }
html.menu-open .nav, html.menu-open .nav.nav--over.is-scrolled { background-color: rgba(35, 40, 46, 0); border-bottom-color: transparent; transition: background-color .35s ease, border-color .35s ease; }
html.menu-open .nav .nav__toggle, html.menu-open .nav.nav--over.is-scrolled .nav__toggle { color: var(--on-dark); }
/* The logo crossfades to a cream copy rather than fading its own filter, which would pass
   through the same grey as the fading ground and vanish mid-way. */
.nav__logo::after { content: ""; position: absolute; inset: 6px 8px; background: url("/assets/img/logo-640.png") center / contain no-repeat; filter: brightness(0) invert(.97); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
html.menu-open .nav .nav__logo img { opacity: 0; transition: opacity .35s ease; }
html.menu-open .nav .nav__logo::after { opacity: 1; }
html.menu-open .nav__side--end { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }

.menu { position: fixed; inset: 0; z-index: 4000; background: var(--slate); color: var(--on-dark); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
html.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu__inner { max-width: 1520px; min-height: 100%; margin: 0 auto; padding: calc(var(--nav-h) + 24px) 44px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; }
.menu__nav a { display: block; padding: 10px 0; border-top: 1px solid rgba(243, 239, 231, .12); font-family: var(--serif); font-size: 34px; line-height: 1.15; color: var(--on-dark); transition: color .3s ease, border-color .3s ease; }
.menu__nav li:last-child a { border-bottom: 1px solid rgba(243, 239, 231, .12); }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--bronze-dark); }
.menu__aside { font-size: 14px; line-height: 1.8; color: var(--on-dark-2); }
.menu__aside a { color: var(--on-dark); }
.menu__aside a:hover { color: var(--focus-dark); }
.menu__aside dl { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; font-variant-numeric: tabular-nums; }
.menu__aside dt { color: var(--on-dark-2); }
.menu__aside dd { margin: 0; color: var(--on-dark); }
.menu__label { font-size: 13px; color: #9EA4AA; margin: 22px 0 4px; }

/* ---------- layout ---------- */
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px var(--gutter); }
.section > .inner { max-width: var(--max); margin: 0 auto; }
.section--card { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Page header: the heading alone (gate feedback 11 removed the right-hand intro text). */
.intro { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 32px; }
.intro h1 { max-width: 20em; }
.lede { font-size: 17px; }
.small { font-size: 13px; line-height: 1.6; color: var(--stone); }
.meta { font-size: 13px; color: var(--stone-2); }
.split { max-width: var(--split); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--wide { max-width: var(--max); }
.split__copy h2 { margin-bottom: 22px; }
.split__copy p { max-width: 64ch; }
.split__copy .actions { margin-top: 28px; }
.photo { position: relative; background: var(--row-active); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--43 { aspect-ratio: 4 / 3; }
.photo--32 { aspect-ratio: 3 / 2; }
.prose { max-width: var(--prose); margin: 0 auto; overflow-wrap: break-word; }
.prose h2 { font-size: 34px; margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 24px; margin: 28px 0 10px; }
.prose ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; }
.prose a:not(.btn):hover { color: var(--bronze); }
.page-end { padding-bottom: 110px; }

/* ruled lists: amenities, distances, hours */
.ruled { border-top: 1px solid var(--line); }
.ruled li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.ruled--2 { columns: 2; column-gap: 40px; border-top: 0; }
.ruled--2 li { break-inside: avoid; }
.ruled--2 li:first-child, .ruled--2 li { border-top: 0; }
/* Amenity lists: a line icon per item, as on crosswood-park-website. */
.amlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.amlist li { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.amlist--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
.amlist--2 li:nth-child(-n+2) { border-top: 1px solid var(--line); }
.ai { flex: none; width: 22px; height: 22px; color: var(--bronze); }
.amtag { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--stone); white-space: nowrap; }
.distances { border-top: 1px solid var(--line); margin: 26px 0 22px; }
.distances li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.distances span:last-child { color: var(--stone); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- home ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--slate); color: var(--on-dark); }
.hero__media { position: absolute; inset: 0; animation: heroSettle 2.4s var(--ease) both; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero__media img:first-child { opacity: 1; }
/* The second and third stills join the loop only once loaded (home.js sets .is-ready). */
.hero__media.is-ready img { animation: heroFade 30s linear infinite; }
.hero__media.is-ready img:nth-child(1) { animation-delay: -2s; }
.hero__media.is-ready img:nth-child(2) { animation-delay: 8s; }
.hero__media.is-ready img:nth-child(3) { animation-delay: 18s; }
@keyframes heroFade { 0% { opacity: 0; } 6.67% { opacity: 1; } 33.33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes heroSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Top scrim: holds the nav band at about 55% ink so every nav label over the sky clears 4.5:1
   (measured on the three hero stills: on-dark text 5.2:1 or better), then fades out. */
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18, 17, 14, .5) 0, rgba(18, 17, 14, .46) var(--nav-h), rgba(18, 17, 14, 0) calc(var(--nav-h) + 120px)), var(--scrim); }
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(52% 46% at 10% 100%, rgba(18, 17, 14, .58) 0%, rgba(18, 17, 14, 0) 72%), linear-gradient(180deg, rgba(18, 17, 14, 0) 55%, rgba(18, 17, 14, .62) 100%); }
/* Round 4 (gate feedback 2 and 3): the reference's hero, element for element. */
.hero__mark { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 12vh; pointer-events: none; }
.hero__mark img { width: min(40vw, 520px); height: auto; filter: brightness(0) invert(.97) drop-shadow(0 10px 60px rgba(12, 11, 9, .4)); animation: markIn 2.2s .45s var(--ease) both; }
.hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px; color: rgba(255, 253, 248, .85); animation: fadeIn 1.4s 1.6s var(--ease) both; }
.hero__scroll svg { animation: scrollNudge 2.8s 2.8s ease-in-out infinite; }
.hero__bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-width: 1520px; margin: 0 auto; padding: 0 44px 52px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hero h1 { color: #F8F5EE; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.06; text-shadow: 0 2px 30px rgba(18, 17, 14, .45); }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; animation: lineUp 1.5s .85s var(--ease) both; }
.hero__line + .hero__line > span { animation-delay: 1s; }
.hero__cta { flex: none; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-bottom: 8px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #F3EFE7; text-shadow: 0 1px 12px rgba(18, 17, 14, .6); transition: color .45s ease; animation: fadeUp 1.4s 1.35s var(--ease) both; }
.hero__cta span { font-size: 14px; letter-spacing: 0; transition: transform .45s var(--ease); }
.hero__cta:hover { color: var(--focus-dark); }
.hero__cta:hover span { transform: translateX(4px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineUp { from { opacity: 0; transform: translateY(112%); } to { opacity: 1; transform: none; } }
@keyframes markIn { from { opacity: 0; transform: scale(.965) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scrollNudge { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }
/* Amenity highlights under the hero, after the reference's stats band, with line icons. */
.highlights { background: var(--card); border-bottom: 1px solid var(--line); scroll-margin-top: var(--nav-h); }
.highlights__row { max-width: 1320px; margin: 0 auto; padding: 34px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
.highlights li { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.highlights svg { color: var(--bronze); }

.band { position: relative; min-height: 640px; display: flex; align-items: center; padding: 96px var(--gutter); overflow: hidden; }
.band__photo { position: absolute; inset: 0; }
.band__photo img { width: 100%; height: 100%; object-fit: cover; }
.band__panel { position: relative; max-width: 500px; background: var(--card); padding: 48px 48px 44px; border: 1px solid var(--line); box-shadow: var(--shadow-card); margin-left: max(0px, calc((100% - var(--max)) / 2)); }
.band__panel h2 { margin-bottom: 18px; }
.band__panel .actions { margin-top: 26px; }

.mosaic { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 560px; }
.mosaic .photo { height: 100%; }
.mosaic .photo:first-child { grid-row: span 2; }

.closing { background: var(--slate); color: var(--on-dark-2); text-align: center; padding: 104px var(--gutter); }
.closing h2 { color: var(--on-dark); margin-bottom: 14px; }
.closing p { margin: 0 auto 32px; max-width: 46ch; }
.closing .actions { justify-content: center; }

/* ---------- explorer (floor plans and availability) ---------- */
.filters { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters__inner { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 14px; display: flex; flex-direction: column; gap: 12px; }
/* Round 4 (gate feedback 6, 9, 10): one band, every group labelled above its controls,
   and one 8 px gap between every chip and input, so nothing touches. */
.filters__groups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 40px; }
.fgroup { border: 0; margin: 0; padding: 0; min-width: 0; }
.fgroup legend { padding: 0; margin: 0 0 8px; font-size: 13px; color: var(--stone); }
.fgroup__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fgroup--sort { margin-left: auto; }
.fgroup__to { font-size: 13px; color: var(--stone); padding: 0 2px; }
.field-money, .field-date { position: relative; display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line-2); background: var(--well); transition: border-color .25s ease, box-shadow .25s ease; }
.field-money:hover, .field-date:hover { border-color: var(--bronze); }
.field-money:focus-within, .field-date:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field-money > span[aria-hidden] { padding-left: 12px; font-size: 14px; color: var(--stone); }
.field-money input, .field-date input { min-height: 38px; border: 0; background: transparent; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; outline: none; }
.field-money input { width: 92px; padding: 0 10px 0 4px; -moz-appearance: textfield; appearance: textfield; }
.field-money input::-webkit-outer-spin-button, .field-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field-money input::placeholder { color: var(--stone-2); opacity: 1; }
.field-date input { width: 168px; padding: 0 10px 0 12px; }
.field-date input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.field-date input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; transition: background-color .25s ease, border-color .25s ease, color .25s ease; position: relative; }
.chip::before { content: ""; position: absolute; inset: -2px 0; }
.chip:hover { border-color: var(--bronze); }
.chip[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--on-dark); }
.chip__n { font-size: 12px; color: var(--stone-2); }
.chip[aria-pressed="true"] .chip__n { color: #B9BEC4; }
.chip[disabled] { opacity: .45; cursor: default; }
.filters__foot { display: flex; align-items: center; gap: 16px; min-height: 28px; font-size: 13px; color: var(--stone); }
.inline-btn { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; min-height: 32px; transition: color .3s ease; }
.inline-btn:hover { color: var(--bronze); }
.filters__bar { display: none; }

.explorer { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 28px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.wall { position: relative; }
.wall__group + .wall__group { margin-top: 28px; }
.wall__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.wall__head h2 { font-size: 26px; font-weight: 500; }
.wall__head span { font-size: 13px; color: var(--stone-2); font-variant-numeric: tabular-nums; }
.wall__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wall__groups-2 { display: grid; grid-template-columns: 3fr 1fr; gap: 12px 28px; margin-top: 28px; }
.wall__groups-2 .wall__group { margin-top: 0; display: flex; flex-direction: column; }
.wall__groups-2 .wall__row { flex: 1; } /* two-bed and townhome tiles end on one line */
.wall__groups-2 .wall__row--b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wall__groups-2 .wall__row--t { grid-template-columns: minmax(0, 1fr); }
.tile { position: relative; background: var(--card); border: 1px solid transparent; transition: opacity .2s ease, border-color .25s ease, background-color .25s ease; position: relative; }
.tile:hover { border-color: var(--line-2); }
.tile__main { display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; }
.tile.is-selected { border-color: var(--bronze); box-shadow: inset 0 -3px 0 var(--bronze); }
.tile__img { display: block; background: var(--well); aspect-ratio: 1 / 1; padding: 46px 10px 10px; overflow: hidden; } /* top band keeps the Virtual tour badge clear of every drawing */
.tile__img img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.tile__body { padding: 10px 12px 12px; display: grid; gap: 1px; }
.tile__name { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; color: var(--ink); }
.tile__kind { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--stone); margin-left: 6px; }
.tile__spec { text-wrap: balance; font-size: 13px; color: var(--stone); font-variant-numeric: tabular-nums; }
.tile__live { font-size: 13px; color: var(--pool); font-variant-numeric: tabular-nums; }
.tile.is-none .tile__live { color: var(--stone); }
.tile__tour { position: absolute; top: 5px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(251, 249, 243, .94); border: 1px solid var(--line-2); color: var(--ink); transition: border-color .25s ease, color .25s ease; z-index: 1; }
.tile__tour:hover { border-color: var(--bronze); color: var(--bronze); }
.tile__tour svg { width: 24px; height: 24px; }

.list { position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); display: flex; flex-direction: column; min-height: 0; }
.list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.list__title { font-size: 26px; font-weight: 500; }
.list__count { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.list__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; scrollbar-width: thin; }
.row { position: relative; border-bottom: 1px solid var(--line); }
/* No plan thumbnails in the list (user, 2026-10-28). The right gutter is the tour icon's
   slot on every row, so rents line up whether or not a row has a tour. */
.row__btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 58px 14px 10px; text-align: left; transition: background-color .2s ease; }
.row__btn:hover { background: var(--card); }
.row.is-selected .row__btn { background: var(--row-active); box-shadow: inset 3px 0 0 var(--bronze); }
.row__main { min-width: 0; display: grid; gap: 1px; }
.row__unit { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.row__meta { font-size: 13.5px; color: var(--stone); line-height: 1.45; }
.row__side { text-align: right; display: grid; gap: 2px; justify-items: end; }
.row__rent { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.row__date { font-size: 13px; color: var(--stone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row__date.is-now, .is-now { color: var(--pool); }
.row__tour { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--ink); transition: border-color .25s ease, color .25s ease; }
.row__tour::before { content: ""; position: absolute; inset: -2px; }
.row__tour:hover { border-color: var(--bronze); color: var(--bronze); }
.row__tour svg { width: 26px; height: 26px; }
.list__empty { padding: 28px 8px; font-size: 15px; color: var(--stone); }
.list__empty p { margin-bottom: 10px; }
.status { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 20px auto 0; padding: 0 var(--gutter); font-size: 13px; color: var(--stone); }
.status.is-saved { color: var(--ink); }

/* listing card: non-modal over the plan wall on desktop, a bottom sheet on phones */
.lcard { position: absolute; inset: 0 auto auto 0; width: 100%; max-height: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--stone); box-shadow: var(--shadow-card); z-index: 30; }
.lcard[open] { display: block; animation: cardIn .35s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lcard::backdrop { background: rgba(33, 29, 21, .45); }
.lc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; }
.lc__figure { margin: 0; background: var(--well); display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.lc__img { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 360px; cursor: zoom-in; position: relative; }
.lc__img img { max-height: 520px; width: auto; object-fit: contain; }
.lc__expand { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(35, 40, 46, .72); color: var(--on-dark); }
.lc__img:hover .lc__expand { background: var(--slate); }
.lc__cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 12px; color: var(--stone-2); padding: 0 6px 0 14px; margin: 0; border-top: 1px solid var(--line); }
.lc__alt { min-height: 40px; padding: 0 10px; font-size: 13px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; white-space: nowrap; transition: color .2s ease, text-decoration-color .2s ease; }
.lc__alt:hover { color: var(--bronze); text-decoration-color: currentColor; }
.lc__alt:active { transform: scale(.98); }
.lc__body { padding: 28px 30px 26px; display: flex; flex-direction: column; min-width: 0; }
.lc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lc__top h2 { font-size: 40px; font-weight: 400; line-height: 1.05; outline: none; }
.lc__close { flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); color: var(--ink); transition: border-color .25s ease, background-color .25s ease; }
.lc__close:hover { border-color: var(--bronze); background: var(--card); }
.lc__rent { margin: 6px 0 0; font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--bronze); font-variant-numeric: tabular-nums; line-height: 1.2; }
.lc__rent--unit { color: var(--ink); }
.lc__rent small { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--stone); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 12px 0; }
.facts dt { font-size: 12.5px; color: var(--stone-2); }
.facts dd { margin: 0; font-size: 15px; color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.lc__units { margin: 18px 0 0; }
.lc__units h3 { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--stone); margin-bottom: 4px; }
.utable { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.utable th { text-align: left; font-weight: 400; font-size: 12.5px; color: var(--stone-2); padding: 6px 0; border-bottom: 1px solid var(--line); }
.utable td { padding: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.utable td button, .utable td span { display: block; width: 100%; text-align: left; padding: 9px 0; min-height: 40px; }
.utable td:last-child button, .utable th:last-child { text-align: right; }
.utable tr:hover td { background: var(--card); }
.utable td button:hover { color: var(--bronze); }
.utable .u { font-family: var(--serif); font-weight: 500; font-size: 19px; }
.lc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 0; padding-top: 24px; }
.lc__note { font-size: 13px; color: var(--stone); margin: 14px 0 0; }
.lc__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }

/* virtual tours section */
.tours__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.poster { display: block; width: 100%; text-align: left; }
.poster__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--row-active); }
.poster__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.poster:hover .poster__img img { transform: scale(1.03); }
.poster__play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; background: var(--slate); color: var(--on-dark); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 450; transition: background-color .3s ease; }
.poster:hover .poster__play { background: var(--bronze); }
.poster__cap { display: block; margin-top: 10px; font-size: 14px; color: var(--ink); }
.poster__cap span { display: block; font-size: 13px; color: var(--stone); }

/* ---------- amenities, gallery ---------- */
.am { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.am--rev .am__copy { order: 2; }
.am__copy h2 { margin-bottom: 20px; }
.am__note { font-size: 13px; color: var(--stone); margin-top: 12px; }
.pair { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair figure { margin: 0; }
.pair figcaption, .cap { font-size: 13px; color: var(--stone); margin-top: 8px; }

.gal + .gal { margin-top: 72px; }
.gal__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.gal__head span { font-size: 13px; color: var(--stone-2); font-variant-numeric: tabular-nums; }
.jrows { display: flex; flex-wrap: wrap; gap: 10px; }
.jrows::after { content: ""; flex-grow: 999; }
.jitem { position: relative; height: 260px; flex-grow: 1; overflow: hidden; background: var(--row-active); display: block; }
.jitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.jitem:hover img { transform: scale(1.025); }
.jitem__x { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(35, 40, 46, .7); color: var(--on-dark); opacity: .85; transition: opacity .3s ease, background-color .3s ease; }
.jitem:hover .jitem__x { opacity: 1; background: var(--slate); }

/* ---------- neighborhood (round 4: after ariaidlewild.com/neighborhood) ---------- */
/* Rail | places panel | map, filling the viewport under the nav. The panel slides open
   and shut by animating the grid track; its colour (pool) is this site's coding for
   "places", where the reference uses its bronze. */
.nb { --nb-panel: #2C6E72; --nb-on: #F8F4EA; display: grid; grid-template-columns: 186px 268px minmax(0, 1fr); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 620px; overflow: hidden; border-bottom: 1px solid var(--line); transition: grid-template-columns .75s var(--ease); }
.nb[data-open="closed"] { grid-template-columns: 186px 0 minmax(0, 1fr); }
.nb__rail { background: var(--paper); border-right: 1px solid var(--line); padding: 30px 0 22px; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.nb__head { padding: 0 20px 20px; }
.nb__eyebrow { margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); }
.nb__head h1 { font-size: 22px; line-height: 1.2; margin: 8px 0 0; }
.nb__cats { margin: 0; }
.nb__cat { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 20px 10px 18px; text-align: left; border-left: 2px solid transparent; transition: background-color .35s ease, border-color .35s ease; }
.nb__cat:hover { background: #F1EBDD; }
.nb__cat[aria-pressed="true"] { background: var(--row-active); border-left-color: var(--nb-panel); }
.nb__cat-ic { display: flex; color: var(--stone-2); transition: color .35s ease; }
.nb__cat[aria-pressed="true"] .nb__cat-ic { color: var(--nb-panel); }
.nb__cat-label { font-size: 13.5px; letter-spacing: .02em; color: var(--stone); transition: color .35s ease; }
.nb__cat[aria-pressed="true"] .nb__cat-label { color: var(--ink); }
.nb__cat-n { font-size: 11px; letter-spacing: .1em; color: var(--stone-2); font-variant-numeric: tabular-nums; }
.nb__note { margin: auto 0 0; padding: 18px 20px 0; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.7; color: var(--stone-2); }
.nb__panel { width: 268px; min-height: 0; background: var(--nb-panel); color: var(--nb-on); padding: 30px 22px 26px; overflow-y: auto; overscroll-behavior: contain; opacity: 1; transform: none; visibility: visible; transition: opacity .5s ease .16s, transform .7s var(--ease), visibility 0s; scrollbar-width: thin; scrollbar-color: rgba(248, 244, 234, .35) transparent; }
.nb[data-open="closed"] .nb__panel { opacity: 0; transform: translateX(-14px); visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .7s var(--ease), visibility 0s linear .5s; }
.nb__panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nb__panel h2 { font-size: 28px; line-height: 1.1; color: var(--nb-on); margin: 0 0 18px; }
.nb__close { position: relative; flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(248, 244, 234, .55); color: var(--nb-on); transition: background-color .3s ease, color .3s ease; }
.nb__close::before { content: ""; position: absolute; inset: -8px; }
.nb__close:hover { background: var(--nb-on); color: var(--nb-panel); }
.nb__panel :focus-visible { outline-color: var(--nb-on); }
.nb__place { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 11px 4px; text-align: left; border-bottom: 1px solid rgba(248, 244, 234, .2); transition: background-color .3s ease; }
.nb__place:hover, .nb__place.is-on { background: rgba(248, 244, 234, .14); }
.nb__num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(248, 244, 234, .18); color: var(--nb-on); font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease; }
.nb__place.is-on .nb__num, .nb__place[aria-pressed="true"] .nb__num { background: var(--nb-on); color: var(--nb-panel); }
.nb__name { font-size: 14px; line-height: 1.35; color: var(--nb-on); font-weight: 300; text-wrap: pretty; }
.nb__dist { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--nb-on); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb__empty { padding: 12px 0; font-size: 14px; }
.nb__map { position: relative; min-width: 0; min-height: 0; background: #ECE6DA; }
.nb__map > .nb__canvas { position: absolute; inset: 0; } /* outranks maplibre-gl.css .maplibregl-map { position: relative } */
.nb__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nb-panel); display: inline-block; flex: none; }
.nb__badge { position: absolute; z-index: 5; left: 22px; top: 22px; display: grid; gap: 6px; padding: 14px 18px; background: rgba(250, 247, 240, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(33, 29, 21, .14); box-shadow: 0 18px 40px -28px rgba(24, 20, 14, .4); pointer-events: none; }
.nb__badge-name { display: flex; align-items: center; gap: 11px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.nb__badge-addr { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); padding-left: 20px; }
.nb__recentre { position: absolute; z-index: 5; right: 22px; top: 22px; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; background: rgba(250, 247, 240, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(33, 29, 21, .16); color: var(--stone); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
.nb__recentre:hover { background: var(--nb-panel); border-color: var(--nb-panel); color: #fff; }
.nb__recentre:hover .nb__dot { background: #fff; }
.nb__card { position: absolute; z-index: 6; right: 64px; bottom: 34px; max-width: 300px; padding: 18px 22px; background: rgba(250, 247, 240, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(33, 29, 21, .14); box-shadow: 0 22px 50px -30px rgba(24, 20, 14, .42); animation: fadeUp .45s var(--ease) both; }
.nb__card[hidden] { display: none; }
.nb__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.nb__card-name { font-size: 22px; line-height: 1.2; font-weight: 400; }
.nb__card-close { position: relative; flex: none; width: 28px; height: 28px; margin: -4px -8px 0 0; display: flex; align-items: center; justify-content: center; color: var(--stone); transition: color .3s ease; }
.nb__card-close::before { content: ""; position: absolute; inset: -8px; }
.nb__card-close:hover { color: var(--ink); }
.nb__card-meta { margin: 8px 0 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--nb-panel); font-variant-numeric: tabular-nums; }
.nb__card-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--stone); }
.nb__card-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
.nb__card-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--nb-panel); border-bottom: 1px solid rgba(44, 110, 114, .45); transition: color .3s ease, border-color .3s ease; }
.nb__card-links a[hidden] { display: none; }
.nb__card-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Pins: the place's category glyph in a slate disc; the hovered or selected one grows
   and takes the panel colour. The property is a pool disc with a serif S over a ground dot. */
.nb-pin { cursor: pointer; }
.nb-pin__dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--slate); color: #fff; border: 1.5px solid #fff; box-shadow: 0 2px 9px rgba(20, 20, 20, .3); transition: transform .6s var(--ease), background-color .55s ease, box-shadow .55s ease; }
.nb-pin { position: relative; }
.nb-pin.is-on { z-index: 9; }
/* The active place's name sits beside its pin, as on the reference. */
.nb-pin__name { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding: 5px 10px; background: var(--card); color: var(--ink); font: 500 12.5px/1.2 var(--sans); box-shadow: 0 4px 14px -6px rgba(24, 20, 14, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease); }
.nb-pin.is-on .nb-pin__name { opacity: 1; transform: translate(0, -50%); }
/* Keep the attribution clear of the zoom buttons in the opposite corner. */
.nb .maplibregl-ctrl-bottom-left { right: 56px; }
.nb-pin.is-on .nb-pin__dot { transform: scale(1.31); background: var(--nb-panel, #2C6E72); box-shadow: 0 0 0 6px rgba(44, 110, 114, .22); }
.nb-home { display: flex; flex-direction: column; align-items: center; gap: 11px; pointer-events: none; }
.nb-home__mark { width: 46px; height: 46px; border-radius: 50%; background: #2C6E72; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 28px; line-height: 1; color: #fff; box-shadow: 0 12px 26px -9px rgba(28, 60, 62, .55); }
.nb-home__ground { width: 9px; height: 9px; border-radius: 50%; background: #6B6F72; box-shadow: 0 0 0 3px rgba(255, 255, 255, .65); }
.nb .maplibregl-canvas:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.nb .maplibregl-ctrl-group { border-radius: 0; box-shadow: none; border: 1px solid rgba(49, 49, 49, .16); }
.nb .maplibregl-ctrl-group button { border-radius: 0; }
.map-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 14px; color: var(--stone); }
.pin { width: 26px; height: 26px; border-radius: 50%; background: var(--slate); color: var(--on-dark); border: 2px solid var(--card); display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--sans); box-shadow: 0 4px 10px -4px rgba(24, 20, 14, .6); }
.pin--home { width: 42px; height: 42px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); cursor: default; box-shadow: 0 6px 16px -6px rgba(24, 20, 14, .7); }
.maplibregl-popup-content { border-radius: 0 !important; padding: 14px 16px !important; font-family: var(--sans); color: var(--stone); box-shadow: var(--shadow-card) !important; }
.maplibregl-popup-content h3 { font-size: 20px; margin: 0 0 4px; padding-right: 18px; }
.maplibregl-popup-content p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.maplibregl-popup-content .pop-links { display: flex; gap: 16px; font-size: 13px; }
.maplibregl-popup-content .pop-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; }
.map-caption { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 12px auto 0; padding: 0 var(--gutter); font-size: 13px; color: var(--stone); }

/* ---------- contact ---------- */
.contact { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.contact__details address { font-style: normal; font-size: 17px; color: var(--ink); line-height: 1.6; }
.contact__details .lines { margin: 18px 0 26px; display: grid; gap: 4px; }
.contact__details .lines a { color: var(--ink); overflow-wrap: anywhere; }
.contact__details .lines a:hover { color: var(--bronze); }
.contact__details .lines .fax { color: var(--stone); font-variant-numeric: tabular-nums; }
.hours { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; margin-bottom: 28px; }
.hours caption { text-align: left; font-family: var(--serif); font-size: 24px; color: var(--ink); font-weight: 500; padding-bottom: 8px; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 400; color: var(--ink); }
.hours td { text-align: right; color: var(--stone); }
.mini-map { position: relative; height: 300px; border: 1px solid var(--line); background: #ECE6DA; }
.mini-map > div { position: absolute; inset: 0; }

/* forms */
.form { background: var(--card); border: 1px solid var(--line); padding: 40px 44px; }
.form h2 { font-size: 34px; margin-bottom: 6px; }
.form__intro { font-size: 15px; margin-bottom: 26px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 13.5px; color: var(--ink); }
.field .req { color: var(--stone-2); font-size: 12.5px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; background: var(--well); border: 1px solid var(--line-2); border-radius: 0; font-size: 16px; font-weight: 350; color: var(--ink); appearance: none; transition: border-color .25s ease, box-shadow .25s ease; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235F5748' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--stone-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; border-color: var(--bronze); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__err { font-size: 13px; color: var(--error); min-height: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: 12.5px; line-height: 1.6; color: var(--stone); margin: 20px 0 22px; }
.consent a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.form__status { margin-top: 16px; font-size: 15px; color: var(--ink); }
.form__status.is-error { color: var(--error); }
.form__done { padding: 12px 0; }
.form__done h2 { margin-bottom: 10px; }

/* ---------- residents, faq ---------- */
.banner { height: 40vh; min-height: 280px; max-height: 460px; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.faq { max-width: var(--prose); margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 14px 0; cursor: pointer; font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--ink); font-weight: 500; transition: color .25s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bronze); }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 26px; color: var(--bronze); flex: none; width: 24px; text-align: center; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq__a { padding: 0 0 22px; max-width: 62ch; }
.faq .faq__a a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; }

/* ---------- dialogs: tour scheduler, virtual tour, lightbox ---------- */
.dlg { border: 0; padding: 0; margin: auto; max-width: min(680px, calc(100vw - 32px)); width: 100%; max-height: min(92vh, 920px); background: var(--paper); color: var(--stone); box-shadow: var(--shadow-modal); }
.dlg[open] { animation: cardIn .35s var(--ease); }
.dlg::backdrop { background: rgba(33, 29, 21, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 14px 28px; background: var(--slate); color: var(--on-dark); }
.dlg__bar h2 { color: var(--on-dark); font-size: 26px; line-height: 1.2; }
.dlg__x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--on-dark); border: 1px solid rgba(243, 239, 231, .35); transition: border-color .25s ease, background-color .25s ease; flex: none; }
.dlg__x:hover { border-color: var(--on-dark); background: rgba(243, 239, 231, .08); }
.dlg__x:focus-visible { outline-color: var(--focus-dark); }
.dlg__body { padding: 26px 32px 32px; }
.ts__ctx { font-size: 15px; color: var(--ink); margin: 0 0 4px; }
.ts__lede { font-size: 14.5px; margin: 0 0 20px; }
.ts__step { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.ts__step legend { font-size: 14px; color: var(--ink); margin-bottom: 10px; padding: 0; }
.ts__step legend b { font-weight: 450; display: inline-block; min-width: 1.4em; color: var(--bronze); }
.ts__days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.ts__day { flex: 0 0 auto; min-width: 72px; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line-2); background: var(--card); text-align: center; color: var(--ink); line-height: 1.25; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.ts__day span { display: block; font-size: 12.5px; color: var(--stone); }
.ts__day b { display: block; font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; }
.ts__day:hover { border-color: var(--bronze); }
.ts__day[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--on-dark); }
.ts__day[aria-pressed="true"] span { color: #B9BEC4; }
.ts__times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ts__time { min-height: 44px; border: 1px solid var(--line-2); background: var(--card); font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.ts__time:hover { border-color: var(--bronze); }
.ts__time[aria-pressed="true"] { background: var(--bronze); border-color: var(--bronze); color: var(--on-dark); }
.ts__msg { padding: 30px 0 10px; }
.ts__msg h3 { margin-bottom: 10px; }
.ts__msg .actions { margin-top: 22px; }
.ts__loading { padding: 50px 0; text-align: center; font-size: 14px; color: var(--stone); }

.vt { max-width: none; width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; background: var(--slate); display: none; flex-direction: column; color: var(--on-dark-2); }
.vt[open] { display: flex; }
.vt .dlg__bar { position: static; }
.vt__tools { display: flex; align-items: center; gap: 12px; }
.vt__tool { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); border: 1px solid rgba(243, 239, 231, .35); font-size: 13px; transition: border-color .25s ease, background-color .25s ease; }
.vt__tool:hover { border-color: var(--on-dark); background: rgba(243, 239, 231, .08); }
.vt__frame { position: relative; flex: 1; background: #15181C; }
.vt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vt__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 14px; color: var(--on-dark-2); }
.vt__foot { margin: 0; padding: 10px 28px; font-size: 12.5px; color: #9EA4AA; }

.lb { max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(23, 21, 17, .96); color: var(--on-dark); display: none; }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 12px 24px; font-size: 13px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.lb__stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 72px; min-height: 0; touch-action: pan-y; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: transparent; }
.lb__stage img.is-plan { background: #fff; padding: 16px; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--on-dark); border: 1px solid rgba(243, 239, 231, .35); transition: border-color .25s ease, background-color .25s ease; }
.lb__nav:hover { border-color: var(--on-dark); background: rgba(243, 239, 231, .08); }
.lb__prev { left: 14px; }
.lb__next { right: 14px; }
.lb__cap { margin: 0; padding: 12px 24px 18px; font-size: 14px; color: var(--on-dark-2); text-align: center; }

/* ---------- footer ---------- */
.foot { background: var(--slate); color: #D8D2C4; font-size: 14px; }
.foot a { color: #E4DFD3; transition: color .3s ease; }
.foot a:hover { color: var(--focus-dark); }
.foot__inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 48px; padding: 72px 0 48px; }
.foot__logo { height: 34px; width: auto; filter: brightness(0) invert(.92); margin-bottom: 20px; }
.foot address { font-style: normal; line-height: 1.8; color: var(--on-dark-2); }
.foot__lines { display: grid; gap: 2px; margin-top: 12px; }
.foot__lines a { display: inline-flex; min-height: 32px; align-items: center; }
.foot__head { font-family: var(--sans); font-size: 13px; font-weight: 400; color: #9EA4AA; margin: 0 0 12px; }
.foot__col ul { display: grid; gap: 2px; }
.foot__col a { display: inline-flex; min-height: 32px; align-items: center; }
.foot__hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.foot__hours dd { margin: 0; }
.foot__legal { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-top: 1px solid rgba(216, 210, 196, .15); color: #B6BBC0; font-size: 13px; line-height: 1.7; }
.foot__legal svg { flex: none; width: 34px; height: 34px; color: #D8D2C4; }
.foot__legal p { margin: 0; max-width: 820px; }
.foot__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(216, 210, 196, .45); }
.foot__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 20px 0 30px; border-top: 1px solid rgba(216, 210, 196, .15); font-size: 12.5px; color: #B6BBC0; }
.foot__bar p { margin: 0; }
.foot__policy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.foot__policy a { display: inline-flex; min-height: 32px; align-items: center; color: var(--on-dark-2); }
.foot__mgr { display: inline-flex; align-items: center; gap: 10px; }
.foot__mgr img { height: 26px; width: auto; filter: brightness(0) invert(.9); }
/* Powered by Kiara, as on 5151apts-website-2: the logo files are masks, so the mark keeps
   Kiara's orange and the wordmark takes the footer's cream. */
.powered-by-kiara { --kiara-orange: #f26440; display: flex; align-items: center; gap: 14px; width: fit-content; min-height: 44px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(216, 210, 196, .18); color: #B6BBC0; transition: opacity .25s ease; }
.foot .powered-by-kiara:hover { color: #B6BBC0; opacity: .72; }
.pbk-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pbk-lockup { display: inline-flex; align-items: center; gap: 9px; }
.pbk-mark, .pbk-wordmark { display: block; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.pbk-mark { width: 20px; height: 22px; color: var(--kiara-orange); -webkit-mask-image: url("/assets/brand/kiara-mark.png"); mask-image: url("/assets/brand/kiara-mark.png"); }
.pbk-wordmark { width: 79px; height: 19px; color: var(--on-dark); -webkit-mask-image: url("/assets/brand/kiara-wordmark.png"); mask-image: url("/assets/brand/kiara-wordmark.png"); }

/* ---------- 404 ---------- */
.nf { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px var(--gutter); gap: 24px; }

/* ---------- scroll reveal: photographs only (brief: Animation mode) ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__media, .hero__media img { animation: none !important; }
  .hero__media img:not(:first-child) { display: none; }
  .hero__mark img, .hero__line > span, .hero__cta, .hero__scroll, .hero__scroll svg { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}