/* ==========================================================================
   LeeWLA listing kit — lw-kit.css  (v1.1, 2026-10-04)
   Shared components for the *.leewla.com listing microsites.
   Design system: leewla.com — navy / sand / gold / coral / cream,
   Cormorant Garamond display + DM Sans body. Owner-approved; do not recolor.

   Every selector is namespaced `lw-` so the kit can sit next to a site's own
   inline CSS without collisions. Breakpoints: 1080 (nav → hamburger),
   768 (spacing, sticky bar, gallery carousel), 560 (grid collapse).
   Minimum text size 11px; tracked caps may go to 10px.
   Markup contracts: see INTEGRATION.md.

   v1.1 (creative-director pass + the reviewers' site patches, merged here so
   all eight site copies are identical again):
   - lightbox rows are minmax(0,1fr) and the stage has a definite track
   - sticky-bar space is reserved inside the footer, not as body padding
   - spec sheet: ≤560 labels track .16em on one line; only the FIRST tile may
     take a full row; a short last row is filled (lone tile → centred rule)
   - eyebrow halves stay on one line; when they would stack, the city half is
     visually hidden (kept for screen readers) or swapped for data-short
   - gallery opener is full-bleed at clamp(420px,66vh,760px) above 768px,
     caption stays in the container
   - the burger's X keeps the same right gutter as the closed burger
   ========================================================================== */

:root {
  --lw-navy: #12192A;
  --lw-navy-deep: #0D131F;
  --lw-slate: #8C94A1;          /* small text on navy */
  --lw-slate-ink: #5F6673;      /* small text on white / cream (5.3:1 on cream) */
  --lw-sand: #E3DBD4;
  --lw-sand-light: #F0EBE7;
  --lw-gold: #C4A573;
  --lw-gold-hi: #D3B88A;
  --lw-coral: #C07060;
  --lw-cream: #F7F4F1;
  --lw-ink: #0A0A0A;
  --lw-white: #FFFFFF;
  --lw-hair: rgba(18, 25, 42, 0.10);
  --lw-hair-strong: rgba(18, 25, 42, 0.18);
  --lw-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --lw-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --lw-max: 1200px;
  --lw-gutter: 48px;
  --lw-nav-h: 72px;
  --lw-mbar-h: 56px;
  --lw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --lw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lw-sbw: 0px;                /* classic-scrollbar width, set by lw-kit.js (full-bleed math) */
}
@media (max-width: 768px) { :root { --lw-gutter: 24px; } }

html { scroll-padding-top: calc(var(--lw-nav-h) + 16px); }
html.lw-menu-open, html.lw-lb-open { overflow: hidden; }

/* Shared atoms ------------------------------------------------------------ */
.lw-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.lw-label {
  font-family: var(--lw-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lw-slate-ink);
}
.lw-num { font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
[class^="lw-"] :focus-visible, [class*=" lw-"]:focus-visible, .lw-lb :focus-visible { outline: 2px solid var(--lw-gold); outline-offset: 3px; }

/* Gold underline that draws left → right on hover / focus */
.lw-link {
  color: inherit; text-decoration: none;
  background: linear-gradient(var(--lw-gold), var(--lw-gold)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--lw-ease-out), color 0.3s;
}
.lw-link:hover, .lw-link:focus-visible { background-size: 100% 1px; }

/* Buttons ----------------------------------------------------------------- */
.lw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 16px 30px;
  font-family: var(--lw-body); font-size: 11px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 0.3s var(--lw-ease), border-color 0.3s var(--lw-ease), color 0.3s var(--lw-ease);
}
.lw-btn--gold { background: var(--lw-gold); border-color: var(--lw-gold); color: var(--lw-navy); }
.lw-btn--gold:hover { background: var(--lw-gold-hi); border-color: var(--lw-gold-hi); }
.lw-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.42); color: var(--lw-white); }
.lw-btn--ghost:hover { border-color: var(--lw-gold); background: rgba(255,255,255,0.06); }
.lw-btn--ink { background: var(--lw-navy); border-color: var(--lw-navy); color: var(--lw-white); }
.lw-btn--ink:hover { background: var(--lw-navy-deep); }
.lw-btn--line { background: transparent; border-color: var(--lw-hair-strong); color: var(--lw-navy); }
.lw-btn--line:hover { border-color: var(--lw-gold); }
.lw-btn .lw-arr { font-size: 14px; letter-spacing: 0; transition: transform 0.3s var(--lw-ease); }
.lw-btn:hover .lw-arr { transform: translateX(4px); }
.lw-btn__meta { opacity: 0.72; letter-spacing: 0.12em; }

/* ==========================================================================
   (b) NAV — ≤6 links, gold Tour button, hamburger <1080, active underline
   The blur/white surface lives on ::before, NOT on the nav itself: a
   backdrop-filter on the nav would make it the containing block for the
   position:fixed drawer and collapse it after scrolling (lessons.md).
   ========================================================================== */
.lw-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--lw-nav-h); padding: 0 var(--lw-gutter);
  display: flex; align-items: center; justify-content: flex-start; gap: 28px;
  /* neutralise a site's bare `nav { … }` / `nav.scrolled` rules */
  background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; box-shadow: none;
}
.lw-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18,25,42,0.06);
  opacity: 0; transition: opacity 0.3s var(--lw-ease);
}
.lw-nav.is-scrolled::before { opacity: 1; }
.lw-nav__logo {
  margin-right: auto; font-family: var(--lw-body); font-size: 18px; font-weight: 500;
  letter-spacing: 3px; color: var(--lw-white); text-decoration: none;
  transition: color 0.3s var(--lw-ease);
}
.lw-nav.is-scrolled .lw-nav__logo { color: var(--lw-navy); }
.lw-nav__links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.lw-nav__links a {
  position: relative; display: inline-block; padding: 8px 0;
  font-family: var(--lw-body); font-size: 12px; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,0.82); transition: color 0.3s var(--lw-ease);
}
.lw-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--lw-gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s var(--lw-ease-out);
}
.lw-nav__links a:hover, .lw-nav__links a:focus-visible, .lw-nav__links a.is-active { color: var(--lw-white); }
.lw-nav__links a:hover::after, .lw-nav__links a:focus-visible::after, .lw-nav__links a.is-active::after { transform: scaleX(1); }
.lw-nav.is-scrolled .lw-nav__links a { color: var(--lw-slate-ink); }
.lw-nav.is-scrolled .lw-nav__links a:hover, .lw-nav.is-scrolled .lw-nav__links a.is-active { color: var(--lw-navy); }
.lw-nav__drawer-only { display: none; }
.lw-nav__cta { min-height: 40px; padding: 11px 20px; }
.lw-nav__burger {
  display: none; width: 44px; height: 44px; margin-right: -11px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.lw-nav__burger span {
  display: block; width: 22px; height: 1.5px; background: var(--lw-white);
  transition: transform 0.3s var(--lw-ease), opacity 0.3s, background-color 0.3s;
}
.lw-nav.is-scrolled .lw-nav__burger span { background: var(--lw-navy); }
/* The 44px hit area reaches 11px into the gutter (margin-right:-11px) so the 22px glyph sits on the
   right gutter. Draw the focus ring around the glyph, not the hit area, so the ring (and the X when
   the drawer is open) keeps the same right gutter instead of overhanging to the screen edge. */
.lw-nav .lw-nav__burger:focus-visible, .lw-nav .lw-nav__burger[aria-expanded="true"]:focus-visible { outline-offset: -7px; }
@media (max-width: 1200px) { .lw-nav__links { gap: 22px; } }
@media (max-width: 1080px) {
  .lw-nav { gap: 16px; }
  .lw-nav__burger { display: flex; }
  .lw-nav__links { display: none; }
  .lw-nav.is-open .lw-nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: var(--lw-nav-h); left: 0; right: 0; bottom: 0;
    height: calc(100vh - var(--lw-nav-h)); height: calc(100dvh - var(--lw-nav-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--lw-navy);
    padding: 24px var(--lw-gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .lw-nav.is-open .lw-nav__links li { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .lw-nav.is-open .lw-nav__links a {
    display: flex; align-items: center; min-height: 52px; padding: 0;
    font-size: 14px; color: rgba(255,255,255,0.8); transition: none;
  }
  .lw-nav.is-open .lw-nav__links a::after { display: none; }
  .lw-nav.is-open .lw-nav__links a:hover, .lw-nav.is-open .lw-nav__links a:focus-visible,
  .lw-nav.is-open .lw-nav__links a.is-active { color: var(--lw-white); }
  .lw-nav.is-open .lw-nav__links a.is-active { box-shadow: inset 2px 0 0 var(--lw-gold); padding-left: 14px; }
  .lw-nav.is-open .lw-nav__drawer-only { display: block; }
  .lw-nav.is-open .lw-nav__drawer-only .lw-btn { width: 100%; margin-top: 28px; color: var(--lw-navy); font-size: 11px; }
  .lw-nav.is-open .lw-nav__links li.lw-nav__drawer-only:has(.lw-btn) { border-bottom: 0; }
  /* Menu open: solid navy bar that joins the drawer, at any scroll position */
  .lw-nav.is-open::before { opacity: 1; background: var(--lw-navy); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(255,255,255,0.08); transition: none; }
  .lw-nav.is-open .lw-nav__logo { color: var(--lw-white); }
  .lw-nav.is-open .lw-nav__burger span { background: var(--lw-white); }
  .lw-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .lw-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .lw-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
@media (max-width: 768px) { .lw-nav__cta { display: none; } }

/* ==========================================================================
   (a) HERO — local scrim behind the text block + 0–15% top fade for the nav.
   Tune per site with --lw-scrim-at / --lw-scrim-size / --lw-scrim-a and
   --lw-hero-pos (object-position). No zoom unless .lw-hero--zoom.
   ========================================================================== */
.lw-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--lw-nav-h) + 56px) var(--lw-gutter) 88px;
  background: var(--lw-navy); color: var(--lw-white);
}
.lw-hero__media { position: absolute; inset: 0; z-index: -2; }
.lw-hero__media picture { display: block; width: 100%; height: 100%; }
.lw-hero__media img, .lw-hero__media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--lw-hero-pos, 50% 50%);
}
.lw-hero--zoom .lw-hero__media img { transform: scale(1.05); animation: lwZoom 18s var(--lw-ease) forwards; }
@keyframes lwZoom { to { transform: scale(1); } }
/* top fade (nav legibility) */
.lw-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: max(15%, calc(var(--lw-nav-h) + 40px));
  background: linear-gradient(180deg, rgba(18,25,42,0.62) 0%, rgba(18,25,42,0.28) 55%, rgba(18,25,42,0) 100%);
  pointer-events: none;
}
/* local scrim behind the text block */
.lw-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse var(--lw-scrim-size, 70% 60%) at var(--lw-scrim-at, 15% 85%),
    rgba(18,25,42,var(--lw-scrim-a, 0.9)) 0%, rgba(18,25,42,calc(var(--lw-scrim-a, 0.9) * 0.62)) 48%, rgba(18,25,42,0) 100%);
}
/* Opt-in for photos with signage / busy detail behind the type (e.g. 9024's
   "9024 OLYMPIC BLVD." letters): a dense band from --lw-band-top down, held to
   the text column on desktop so the right of the frame stays bright. Find the
   sign's top as a % of hero height and set --lw-band-top ~8% above it. */
.lw-hero--signage::after {
  background:
    radial-gradient(ellipse var(--lw-scrim-size, 70% 60%) at var(--lw-scrim-at, 15% 85%), rgba(18,25,42,0.55) 0%, rgba(18,25,42,0) 100%),
    linear-gradient(180deg, rgba(18,25,42,0) var(--lw-band-top, 45%), rgba(18,25,42,0.9) calc(var(--lw-band-top, 45%) + 9%), rgba(18,25,42,0.94) 100%);
}
@media (min-width: 1081px) {
  .lw-hero--signage::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 82%);
    mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 82%);
  }
}
.lw-hero__content { position: relative; width: 100%; max-width: var(--lw-max); margin: 0 auto; }
.lw-hero__text { max-width: 760px; }
.lw-eyebrow {
  margin: 0 0 20px; font-family: var(--lw-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 12px rgba(13,19,31,0.45);
}
.lw-eyebrow .lw-sep { color: var(--lw-gold); padding: 0 0.6em; }
/* District · City: lw-kit.js wraps each half in .lw-eyebrow__a / __b, which never break inside.
   When the line would wrap (phones), the eyebrow gets .is-short: the city half is visually hidden
   (screen readers still read it) and the separator goes, or a data-short="…" text is shown instead.
   The (0,2,0) rules below also undo site overrides that stacked the halves as blocks. */
.lw-eyebrow .lw-eyebrow__a, .lw-eyebrow .lw-eyebrow__b { white-space: nowrap; }
.lw-eyebrow .lw-eyebrow__a > *, .lw-eyebrow .lw-eyebrow__b > * { display: inline; margin: 0; }
.lw-eyebrow > .lw-sep { display: inline; }
.lw-eyebrow.is-short > .lw-sep { display: none; }
.lw-eyebrow.is-short > .lw-eyebrow__b {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lw-eyebrow.is-short[data-short] > * { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.lw-eyebrow.is-short[data-short]::before { content: attr(data-short); content: attr(data-short) / ''; }
.lw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.lw-chip {
  display: inline-block; padding: 7px 12px;
  font-family: var(--lw-body); font-size: 10px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lw-gold);
  background: rgba(18,25,42,0.72); border: 1px solid rgba(196,165,115,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lw-hero__title {
  margin: 0 0 20px; font-family: var(--lw-display); font-weight: 300;
  font-size: clamp(44px, 6.6vw, 92px); line-height: 1.02; letter-spacing: -0.022em;
  font-variant-numeric: lining-nums; text-wrap: balance; color: var(--lw-white);
  text-shadow: 0 2px 28px rgba(13,19,31,0.35);
}
.lw-hero__title:focus { outline: none; }
.lw-hero__title em { font-style: italic; color: var(--lw-cream); }
.lw-hero__lede {
  margin: 0; max-width: 46ch; font-family: var(--lw-display); font-style: italic; font-weight: 300;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: rgba(255,255,255,0.88);
  font-variant-numeric: lining-nums; text-wrap: pretty; text-shadow: 0 1px 16px rgba(13,19,31,0.4);
}
.lw-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 768px) {
  .lw-hero { min-height: 88vh; min-height: 88svh; padding-bottom: 56px; }
  /* Text spans the full width on phones/tablets, so the scrim widens and sits lower */
  .lw-hero:not(.lw-hero--signage)::after { background: radial-gradient(ellipse var(--lw-scrim-size-m, 160% 82%) at var(--lw-scrim-at-m, 20% 100%),
    rgba(18,25,42,var(--lw-scrim-a, 0.9)) 0%, rgba(18,25,42,calc(var(--lw-scrim-a, 0.9) * 0.66)) 50%, rgba(18,25,42,0) 100%); }
}
@media (max-width: 560px) {
  .lw-hero__actions .lw-btn { flex: 1 1 100%; }
  .lw-chip { letter-spacing: 0.16em; padding: 7px 10px; }
}

/* ==========================================================================
   (c) STICKY MOBILE BAR (≤768) — Call · Email · Tour
   ========================================================================== */
.lw-mbar { display: none; }
@media (max-width: 768px) {
  .lw-mbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 95; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr 1.2fr;
    height: calc(var(--lw-mbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--lw-navy); border-top: 1px solid rgba(196,165,115,0.4);
    box-shadow: 0 -8px 24px rgba(13,19,31,0.18);
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.3s var(--lw-ease), visibility 0s linear 0.3s;
  }
  .lw-mbar.is-visible { transform: none; visibility: visible; transition: transform 0.3s var(--lw-ease); }
  .lw-mbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--lw-mbar-h); padding: 0 8px;
    font-family: var(--lw-body); font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
    color: var(--lw-white);
  }
  .lw-mbar a + a { border-left: 1px solid rgba(255,255,255,0.1); }
  .lw-mbar a.lw-mbar__tour { background: var(--lw-gold); color: var(--lw-navy); border-left: 0; }
  .lw-mbar svg { width: 16px; height: 16px; flex: none; }
  /* Reserve the bar's height inside the navy footer, not as body padding: body padding left a 56px
     white strip under the footer at the end of the page, where the bar hides over #contact
     (3760/5301/7428 and 9024/1011/1900 review patches). Pages without a kit footer keep body padding. */
  html.lw-has-mbar .lw-footer { padding-bottom: calc(40px + var(--lw-mbar-h) + env(safe-area-inset-bottom, 0px)); }
  html.lw-has-mbar body:not(:has(.lw-footer)) { padding-bottom: calc(var(--lw-mbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   (d) KEY-TERMS SPEC SHEET
   Column count is set by lw-kit.js (--lw-cols); values that overflow their
   tile switch the sheet to a wrapped layout. Lines are drawn with inset
   box-shadows clipped by the grid, so no nth-child border bookkeeping.
   v1.1: only the FIRST tile may take a full row (.is-wide); other values that
   still overflow are scaled down together (--lw-fit). A short last row is
   filled by the last tile (span set inline); a lone last tile (.is-fill) is
   centred under a short gold rule, so the grid never ends on a half-row.
   Labels: ≤18 characters (enforced by shared/assemble.py lint).
   ========================================================================== */
.lw-specsheet { background: var(--lw-white); padding: 0 var(--lw-gutter); }
.lw-specsheet__inner { max-width: var(--lw-max); margin: 0 auto; border-top: 1px solid var(--lw-gold); overflow: hidden; }
.lw-specsheet__grid {
  display: grid; grid-template-columns: repeat(var(--lw-cols, 3), minmax(0, 1fr));
  margin: 0 -28px; list-style: none; padding: 0;
}
.lw-spec { padding: 36px 28px 34px; box-shadow: -1px 0 0 var(--lw-hair), 0 -1px 0 var(--lw-hair); min-width: 0; }
.lw-spec.is-wide { grid-column: 1 / -1; --lw-fit: 1; }
.lw-spec.is-fill { text-align: center; }
.lw-spec.is-fill::before {
  content: ''; display: block; width: 32px; height: 1px; margin: -6px auto 20px;
  background: var(--lw-gold);
}
.lw-spec__val {
  font-family: var(--lw-display); font-weight: 400; font-size: calc(44px * var(--lw-fit, 1)); line-height: 1;
  letter-spacing: -0.01em; color: var(--lw-ink); white-space: nowrap;
  font-variant-numeric: lining-nums;
}
.lw-spec__val.is-counting { font-variant-numeric: lining-nums tabular-nums; }
.lw-spec__val .u { font-size: 0.55em; font-weight: 500; letter-spacing: 0.02em; color: var(--lw-slate-ink); margin-left: 0.16em; }
.lw-spec__val .u-pre { font-size: 0.55em; font-weight: 500; color: var(--lw-slate-ink); margin-right: 0.12em; vertical-align: 0.1em; }
.lw-spec__lab {
  margin-top: 14px; font-family: var(--lw-body); font-size: 11px; font-weight: 500; line-height: 1.55;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lw-slate-ink);
}
/* "Upon Request" style text tile — never a "Contact Broker" value cell */
.lw-spec--text .lw-spec__val { font-style: italic; font-weight: 300; font-size: calc(32px * var(--lw-fit, 1)); line-height: 1.12; white-space: normal; padding-top: 6px; }
@media (max-width: 768px) {
  .lw-spec { padding: 26px 20px 24px; }
  .lw-specsheet__grid { margin: 0 -20px; }
  .lw-spec__val { font-size: calc(36px * var(--lw-fit, 1)); }
  .lw-spec--text .lw-spec__val { font-size: calc(27px * var(--lw-fit, 1)); }
}
/* Phones: labels stay on one line (no orphan words) at .16em tracking. lw-kit.js tightens the
   tracking for the whole sheet (--lw-lab-track, floor .08em) only if a label would still be cut;
   the ellipsis is the last resort. Keep labels ≤18 characters. */
@media (max-width: 560px) {
  .lw-spec { padding-left: 16px; padding-right: 16px; }
  .lw-specsheet__grid { margin: 0 -16px; }
  .lw-spec__lab {
    letter-spacing: var(--lw-lab-track, 0.16em);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Availability / data tables -------------------------------------------- */
.lw-table { width: 100%; border-collapse: collapse; font-family: var(--lw-body); }
.lw-table th {
  padding: 0 14px 12px 0; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lw-slate-ink); border-bottom: 1px solid var(--lw-hair-strong);
}
.lw-table td { padding: 15px 14px 15px 0; font-size: 14px; font-weight: 300; color: var(--lw-ink); border-bottom: 1px solid rgba(18,25,42,0.08); vertical-align: baseline; }
.lw-table th.lw-num, .lw-table td.lw-num { text-align: right; }
.lw-table td.lw-num { font-family: var(--lw-display); font-size: 19px; font-weight: 400; }
.lw-table tr:last-child td { border-bottom: 0; }
.lw-table tfoot td { border-top: 1px solid var(--lw-hair-strong); border-bottom: 0; font-weight: 500; }
.lw-table td:last-child, .lw-table th:last-child { padding-right: 0; }

/* ==========================================================================
   (e) INQUIRE link (suite / offer cards)
   ========================================================================== */
.lw-inquire {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--lw-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--lw-navy);
  background: linear-gradient(var(--lw-gold), var(--lw-gold)) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size 0.35s var(--lw-ease-out), color 0.3s;
}
.lw-inquire::after { content: '\2192'; font-size: 14px; letter-spacing: 0; transition: transform 0.3s var(--lw-ease); }
.lw-inquire:hover, .lw-inquire:focus-visible { background-size: 100% 1px; }
.lw-inquire:hover::after { transform: translateX(4px); }
.lw-on-dark .lw-inquire, .lw-inquire--light { color: var(--lw-white); }

/* ==========================================================================
   (f) MAGAZINE GALLERY — opener + 2-up pairs; captions always visible;
   ≤768 scroll-snap carousel with "3 / 8" counter.
   ========================================================================== */
.lw-gallery__track { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 12px; counter-reset: lwg; position: relative; }
.lw-gitem { margin: 0; min-width: 0; counter-increment: lwg; }
.lw-gitem__btn {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--lw-navy);
}
.lw-gitem__btn img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--lw-ease-out); }
.lw-gitem__btn:hover img { transform: scale(1.03); }
.lw-gitem.is-opener, .lw-gitem.is-wide { grid-column: 1 / -1; }
.lw-gitem.is-opener .lw-gitem__btn { aspect-ratio: auto; height: clamp(420px, 66vh, 760px); }
/* Full-bleed opener above the carousel breakpoint: the button spans the viewport (minus a classic
   scrollbar, --lw-sbw from lw-kit.js) while the figcaption stays in the container. Percentages in
   margin-left resolve against the figure (= the container), so this centres on any centred wrap. */
@media (min-width: 769px) {
  .lw-gitem.is-opener .lw-gitem__btn {
    --lw-bleed: calc(100vw - var(--lw-sbw, 0px));
    width: var(--lw-bleed); max-width: none;
    margin-left: calc(50% - var(--lw-bleed) / 2);
  }
}
.lw-gitem.is-wide .lw-gitem__btn, .lw-gitem:not(.is-opener):nth-child(even):last-child .lw-gitem__btn { aspect-ratio: 21 / 9; }
.lw-gitem:not(.is-opener):nth-child(even):last-child { grid-column: 1 / -1; }
.lw-gitem figcaption {
  display: flex; gap: 14px; align-items: baseline; margin-top: 12px;
  font-family: var(--lw-body); font-size: 11px; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--lw-slate-ink);
}
.lw-gitem figcaption::before {
  content: counter(lwg, decimal-leading-zero); flex: none;
  font-family: var(--lw-display); font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--lw-gold); font-variant-numeric: lining-nums;
}
.lw-on-dark .lw-gitem figcaption { color: var(--lw-slate); }
.lw-gallery__nav { display: none; }
@media (max-width: 768px) {
  .lw-gallery__track {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--lw-gutter);
    margin: 0 calc(var(--lw-gutter) * -1); padding: 0 var(--lw-gutter) 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lw-gallery__track::-webkit-scrollbar { display: none; }
  .lw-gitem { flex: 0 0 86%; scroll-snap-align: start; }
  .lw-gitem .lw-gitem__btn, .lw-gitem.is-opener .lw-gitem__btn,
  .lw-gitem.is-wide .lw-gitem__btn, .lw-gitem:not(.is-opener):nth-child(even):last-child .lw-gitem__btn { aspect-ratio: 4 / 3; height: auto; }
  .lw-gallery__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
  .lw-gallery__count { font-family: var(--lw-display); font-size: 20px; color: var(--lw-ink); font-variant-numeric: lining-nums tabular-nums; }
  .lw-gallery__count span { color: var(--lw-slate-ink); }
  .lw-gallery__arrows { display: flex; gap: 8px; }
  .lw-gallery__arrows button {
    width: 44px; height: 44px; padding: 0; cursor: pointer; font-size: 16px; line-height: 1;
    background: transparent; color: var(--lw-navy); border: 1px solid var(--lw-hair-strong);
  }
  .lw-gallery__arrows button:disabled { opacity: 0.35; cursor: default; }
}

/* Lightbox (built by lw-kit.js) ------------------------------------------ */
.lw-lb {
  position: fixed; inset: 0; z-index: 900;
  /* minmax(0,1fr) row + a definite stage track (12381 / 5301 / 9024-1011-1900 review patches): a plain
     1fr row has an auto minimum, so tall photos and plans grew the row and ran under the caption or
     off-screen at 1024 and 1440 (and portrait aerials at 768). */
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: 64px minmax(0, 1fr) auto;
  background: rgba(13,19,31,0.985); color: var(--lw-white);
  opacity: 0; transition: opacity 0.2s var(--lw-ease);
}
.lw-lb[hidden] { display: none; }
.lw-lb.is-open { opacity: 1; }
html.lw-lb-open nav, html.lw-lb-open .lw-nav, html.lw-lb-open .lw-mbar { visibility: hidden; transition: none; }
.lw-lb__count { grid-column: 1 / 3; grid-row: 1; align-self: center; padding-left: 24px; font-family: var(--lw-display); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; color: rgba(255,255,255,0.75); }
.lw-lb__stage { grid-column: 2; grid-row: 2; position: relative; margin: 0; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); touch-action: pan-y pinch-zoom; }
.lw-lb__img {
  grid-area: 1 / 1; place-self: center; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: 0; transition: opacity 0.2s var(--lw-ease); user-select: none; -webkit-user-drag: none;
}
.lw-lb__img.is-active { opacity: 1; }
.lw-lb.is-plan .lw-lb__img { background: var(--lw-white); }
.lw-lb__cap { grid-column: 1 / -1; grid-row: 3; padding: 14px 24px 22px; text-align: center; font-family: var(--lw-body); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); min-height: 52px; }
.lw-lb button {
  width: 48px; height: 48px; padding: 0; cursor: pointer; place-self: center;
  background: none; color: var(--lw-white); border: 1px solid rgba(255,255,255,0.22);
  font-family: var(--lw-body); font-size: 20px; line-height: 1;
  transition: border-color 0.3s, background-color 0.3s;
}
.lw-lb button:hover { border-color: var(--lw-gold); background: rgba(255,255,255,0.05); }
.lw-lb__close { grid-column: 3; grid-row: 1; }
.lw-lb__prev { grid-column: 1; grid-row: 2; }
.lw-lb__next { grid-column: 3; grid-row: 2; }
.lw-lb.is-single .lw-lb__prev, .lw-lb.is-single .lw-lb__next { visibility: hidden; }
@media (max-width: 768px) {
  .lw-lb { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 64px minmax(0, 1fr) auto auto; }
  .lw-lb__count { grid-column: 1; }
  .lw-lb__close { grid-column: 2; margin-right: 12px; }
  .lw-lb__stage { grid-column: 1 / -1; padding: 0 8px; }
  .lw-lb__cap { grid-row: 3; padding-bottom: 8px; }
  .lw-lb__prev, .lw-lb__next { grid-row: 4; margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .lw-lb__prev { grid-column: 1; justify-self: end; margin-right: 6px; }
  .lw-lb__next { grid-column: 2; justify-self: start; margin-right: 12px; }
}

/* ==========================================================================
   (g) MAP — muted, framed Google embed + Open in Maps; grouped amenities
   ========================================================================== */
.lw-map { margin: 0; }
.lw-map__frame {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; /* no min-height: it would transfer through the ratio into a min-width and overflow phones */
  background: var(--lw-sand) linear-gradient(135deg, var(--lw-sand) 0%, var(--lw-sand-light) 100%);
  border: 10px solid var(--lw-cream); outline: 1px solid var(--lw-hair);
}
.lw-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) sepia(0.15) contrast(0.95); }
/* warm sand tint + gold hairline inset frame, above the iframe */
.lw-map__frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(227,219,212,0.22); mix-blend-mode: multiply; }
.lw-map__frame::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px var(--lw-gold); }
/* Coral subject marker: the embed centres on the query address, so the ring
   sits on the location until the visitor activates (pans) the map. */
.lw-map__pin { position: absolute; left: 50%; top: 50%; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--lw-coral); box-shadow: 0 0 0 6px rgba(192,112,96,0.18); pointer-events: none; }
.lw-map__activate {
  position: absolute; inset: 0; z-index: 4; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: transparent; display: flex; align-items: flex-end; justify-content: flex-end;
}
.lw-map__activate span {
  margin: 0 18px 18px 0; padding: 9px 14px; background: var(--lw-navy); color: var(--lw-white);
  font-family: var(--lw-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.lw-map.is-live .lw-map__activate, .lw-map.is-live .lw-map__pin { display: none; }
.lw-map__cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px;
  font-family: var(--lw-body); font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--lw-slate-ink);
}
.lw-map__cap a { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lw-navy); }

.lw-amen { display: grid; grid-template-columns: repeat(var(--lw-amen-cols, 4), minmax(0, 1fr)); gap: 44px 36px; }
.lw-amen__group { border-top: 1px solid var(--lw-gold); padding-top: 18px; min-width: 0; }
.lw-amen__h { margin: 0 0 12px; font-family: var(--lw-body); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lw-slate-ink); }
.lw-amen ul { list-style: none; margin: 0; padding: 0; }
.lw-amen li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(18,25,42,0.07);
  font-family: var(--lw-display); font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--lw-ink);
}
.lw-amen li:last-child { border-bottom: 0; }
.lw-amen li .d { flex: none; font-family: var(--lw-body); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; color: var(--lw-slate-ink); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 1080px) { .lw-amen { --lw-amen-cols: 2; } }
@media (max-width: 560px) {
  .lw-amen { gap: 32px 20px; }
  .lw-amen li { font-size: 16px; }
  .lw-map__frame { aspect-ratio: 4 / 3.4; border-width: 6px; }
}

/* ==========================================================================
   (h) TEAM — 4:5 duotone headshots (pre-processed), vCard, monogram fallback
   ========================================================================== */
.lw-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.lw-broker { background: var(--lw-white); display: flex; flex-direction: column; min-width: 0; }
.lw-broker__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lw-navy); }
.lw-broker__photo picture { display: block; width: 100%; height: 100%; }
.lw-broker__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lw-broker__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -1px 0 var(--lw-gold); }
.lw-broker__mono {
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: var(--lw-navy) radial-gradient(ellipse 80% 60% at 50% 35%, rgba(227,219,212,0.10), rgba(227,219,212,0) 70%);
  font-family: var(--lw-display); font-weight: 300; font-size: clamp(48px, 5vw, 72px); letter-spacing: 0.04em;
  color: var(--lw-sand); position: relative;
}
.lw-broker__mono::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(196,165,115,0.45); pointer-events: none; }
.lw-broker__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 26px; min-width: 0; }
.lw-broker__name { margin: 0 0 6px; font-family: var(--lw-display); font-weight: 400; font-size: 25px; line-height: 1.15; color: var(--lw-ink); }
.lw-broker__title { font-family: var(--lw-body); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lw-slate-ink); }
.lw-broker__rule { width: 28px; height: 1px; background: var(--lw-gold); margin: 18px 0; }
.lw-broker__line { display: block; width: fit-content; max-width: 100%; margin-bottom: 4px; font-family: var(--lw-body); font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--lw-ink); overflow-wrap: anywhere; font-variant-numeric: lining-nums; }
.lw-broker__dre { margin-top: 10px; font-family: var(--lw-body); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; color: var(--lw-slate-ink); }
.lw-broker__vcard {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; min-height: 44px;
  font-family: var(--lw-body); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lw-navy); text-decoration: none; width: fit-content;
}
.lw-broker__vcard svg { width: 14px; height: 14px; flex: none; }
.lw-broker__vcard span { background: linear-gradient(var(--lw-gold), var(--lw-gold)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 0.35s var(--lw-ease-out); }
.lw-broker__vcard:hover span, .lw-broker__vcard:focus-visible span { background-size: 100% 1px; }
@media (max-width: 1080px) {
  .lw-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-broker { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; }
  .lw-broker__photo, .lw-broker__mono { aspect-ratio: auto; min-height: 100%; }
  .lw-broker__photo img { position: absolute; inset: 0; }
  .lw-broker__body { padding: 22px 20px; }
  .lw-broker__name { font-size: 23px; }
  .lw-broker:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(120px, calc(20% - 4px)) 1fr; }
}
@media (max-width: 560px) {
  .lw-team { grid-template-columns: 1fr; gap: 14px; }
  .lw-broker, .lw-broker:last-child:nth-child(odd) { grid-template-columns: 124px 1fr; }
  .lw-broker__body { padding: 18px 16px 16px; }
  .lw-broker__name { font-size: 22px; }
  .lw-broker__rule { margin: 12px 0; }
  .lw-broker__mono { font-size: 40px; }
  .lw-broker__mono::before { inset: 8px; }
  .lw-broker__vcard { padding-top: 8px; }
}

/* Deal-room band (optional helper) --------------------------------------- */
.lw-band { position: relative; isolation: isolate; overflow: hidden; background: var(--lw-navy); color: var(--lw-white); padding: 104px var(--lw-gutter); text-align: center; }
.lw-band__inner { max-width: 760px; margin: 0 auto; }
.lw-band .lw-label { color: var(--lw-gold); margin-bottom: 22px; }
.lw-band h2 { margin: 0 0 16px; font-family: var(--lw-display); font-weight: 300; font-size: clamp(30px, 4vw, 48px); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
.lw-band p { margin: 0 0 36px; font-family: var(--lw-display); font-style: italic; font-weight: 300; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.lw-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 768px) { .lw-band { padding: 72px var(--lw-gutter); } }
@media (max-width: 560px) { .lw-band__actions .lw-btn { flex: 1 1 100%; } }

/* ==========================================================================
   (i) FOOTER — Lee & Associates lockup, 11px legal at 50% white, All Listings
   ========================================================================== */
.lw-footer { display: block; background: var(--lw-navy); color: var(--lw-white); padding: 64px var(--lw-gutter) 40px; border-top: 1px solid rgba(255,255,255,0.06); text-align: left; }
.lw-footer__inner { max-width: var(--lw-max); margin: 0 auto; }
.lw-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.lw-footer__logo { display: block; height: 40px; width: auto; }
.lw-footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; }
.lw-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--lw-body); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; }
.lw-footer__links a:hover { color: var(--lw-white); }
.lw-footer__legal { padding-top: 26px; display: grid; gap: 10px; max-width: 760px; }
.lw-footer__legal p { margin: 0; font-family: var(--lw-body); font-size: 11px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.5); }
@media (max-width: 560px) { .lw-footer { padding-top: 48px; } .lw-footer__logo { height: 32px; } }

/* ==========================================================================
   (j) MOTION — 80ms staggered reveals; all off under reduced motion
   Hidden-until-revealed only when JS is present (html.lw-js / html.js).
   ========================================================================== */
.lw-js .lw-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--lw-ease-out), transform 0.7s var(--lw-ease-out);
  transition-delay: calc(var(--lw-i, 0) * 80ms);
}
.lw-js .lw-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .lw-js .lw-reveal { opacity: 1; transform: none; transition: none; }
  .lw-hero--zoom .lw-hero__media img { animation: none; transform: none; }
  .lw-nav::before, .lw-mbar, .lw-lb, .lw-lb__img, .lw-gitem__btn img, .lw-btn, .lw-link,
  .lw-inquire, .lw-nav__links a::after, .lw-nav__burger span, .lw-broker__vcard span { transition: none !important; }
  .lw-gitem__btn:hover img { transform: none; }
}

/* Print: hide chrome */
@media print { .lw-nav, .lw-mbar, .lw-lb, .lw-map__activate { display: none !important; } }