/* ============================================================================
   AURA NEW YORK — DESIGN SYSTEM
   Luxury NYC residential aesthetic: ink, ivory, brass.
   ========================================================================== */

:root {
  --ink: #14161a;
  --ink-soft: #3c4048;
  --ink-mute: #666b73;   /* was #71767f — 3.94:1 on --sand, failed AA */
  --ivory: #faf9f6;
  --paper: #ffffff;
  --sand: #f1eee7;
  --line: #e4e0d6;
  --brass: #a38b5f;
  --brass-dark: #8a7449;
  /* Text-only brass. #a38b5f is 3.27:1 on white and 2.82:1 on --sand, so it
     fails WCAG AA (4.5:1) for the small uppercase labels it was being used
     for. This passes on all three light backgrounds (5.49 / 5.21 / 4.74)
     while reading as the same accent. Keep --brass for rules, borders and
     anything on --ink, where it already passes at 5.53:1. */
  --brass-text: #7d6636;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
  --radius: 2px;
  --shadow: 0 18px 50px -18px rgba(20, 22, 26, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---- Typography ---------------------------------------------------------- */

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: 18px;
}

.section-title { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 16px; }
.section-sub { color: var(--ink-mute); max-width: 560px; font-size: 17px; }

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.tinted { background: var(--sand); }
.section.dark { background: var(--ink); color: var(--ivory); }
.section.dark .section-sub { color: rgba(250, 249, 246, 0.65); }

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  transition: all 0.28s ease;
  border-radius: var(--radius);
  text-align: center;
}
.btn:hover { background: var(--brass-dark); border-color: var(--brass-dark); }

.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--ivory); }

.btn.light { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
.btn.light:hover { background: transparent; color: var(--ivory); }

.btn.ghost-light { background: transparent; border-color: rgba(250,249,246,0.85); color: var(--ivory); }
.btn.ghost-light:hover { background: var(--ivory); color: var(--ink); }

/* 3.27:1 white-on-brass failed AA on the site's most important button. */
.btn.brass { background: var(--brass-text); border-color: var(--brass-text); color: #fff; }
.btn.brass:hover { background: #6a5529; border-color: #6a5529; }

.text-link {
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
  transition: color 0.25s;
}
.text-link:hover { color: var(--brass-dark); }
/* .text-link is used on <button> too (the Availability "see all" actions).
   The UA gives buttons a grey fill, a border and padding — strip all three so
   the two render identically. */
button.text-link {
  background: none; border: 0;
  border-bottom: 1px solid var(--brass);
  padding: 0 0 4px;
}

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 4vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
}
/* The frosted bar lives on a pseudo-element, NEVER on .site-header itself.
   `backdrop-filter` — like `filter` and `transform` — makes an element the
   containing block for its fixed-position descendants. With the blur on the
   header, the mobile menu (`.nav-links { position: fixed; inset: 0 }`, which
   main.js renders inside the header) sized itself against the ~86px header bar
   instead of the viewport: tapping the hamburger gave a clipped sliver with no
   reachable links, on every page with a solid header and on every other page
   once you scrolled past 40px and picked up `.scrolled`.
   ::before has no descendants of its own, so the blur is harmless here and the
   menu resolves against the viewport again. Opacity (not a swapped-in
   background) keeps the 0.35s scroll fade; the blur itself is only switched on
   with the visible states, so a transparent header never filters the hero. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 249, 246, 0.96);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.site-header.solid::before,
.site-header.scrolled::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* align-items:flex-start matters: without it, a column flex container that is
   full-width (as in the footer grid) stretches the logo to the cell width
   while `height` stays fixed — the mark renders distorted/wide. */
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; z-index: 102; }
.brand .brand-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand .brand-sub {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 5px;
}
/* Sized on WIDTH with height:auto — the logo is a stacked lockup (2.37:1), so
   constraining width and letting height follow makes distortion impossible. */
.brand .brand-logo { width: 124px; height: auto; display: block; transition: filter 0.3s ease; }
@media (max-width: 640px) { .brand .brand-logo { width: 100px; } }

/* header over hero (transparent) */
.site-header.overlay:not(.scrolled):not(.open) { color: var(--ivory); }
.site-header.overlay:not(.scrolled):not(.open) .brand-sub { color: rgba(250,249,246,0.85); }
.site-header.overlay:not(.scrolled):not(.open) .nav-links a::after { background: var(--ivory); }
.site-header.overlay:not(.scrolled):not(.open) .brand-logo { filter: brightness(0) invert(1); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width 0.28s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { border: 1px solid currentColor; padding: 10px 22px !important; }
.nav-cta::after { display: none; }
.nav-cta:hover, .nav-cta.active { background: var(--brass); border-color: var(--brass); color: #fff !important; }

/* ---- Buildings dropdown ---------------------------------------------------- */

.nav-item { position: relative; display: flex; align-items: center; gap: 4px; }
.nav-caret {
  background: none; border: none; color: inherit;
  padding: 6px 2px; display: flex; align-items: center;
  opacity: 0.7; transition: opacity 0.2s, transform 0.25s;
}
.nav-caret svg { width: 10px; height: 6px; display: block; }
.nav-caret:hover { opacity: 1; }
.nav-item.open .nav-caret { opacity: 1; transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 600px;
  max-width: min(92vw, 820px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(20,22,26,0.3);
  padding: 26px 28px 0;
  margin-top: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility gets a 0s duration with a delay, not a duration: given a real
     duration the engine holds the old value for the whole transition, so the
     panel stayed `hidden` while opening. Delaying it to the end of the fade
     keeps the close animation visible and makes opening instant. */
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 101;
}
/* Hover only where hovering is real; touch uses the caret + .open class. */
@media (hover: hover) and (min-width: 961px) {
  /* The panel sits ~20px below the nav item (top:100% + margin-top). That gap
     was dead space: moving the pointer down towards the panel left both the
     item and the panel, so the menu closed before you could reach a building.
     This strip bridges it. It belongs to .nav-item, so hovering it keeps
     :hover alive; it must NOT go on .nav-menu, whose `overflow-y: auto` clips
     a pseudo-element out of the hit-testable area entirely.
     Gated on hover/open so an invisible strip never sits over the hero. */
  .nav-item:hover::after,
  .nav-item.open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 22px;
  }
  .nav-item:hover .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
  }
}
/* Scoped to desktop widths: these selectors are 0-3-0 and outrank the 0-1-0
   mobile `.nav-menu` reset below, so unscoped they leaked a floating panel's
   transform and transition into the inline mobile accordion — the Buildings
   list snapped open with no height animation as soon as the caret took focus.
   Mobile has its own `.nav-item.open .nav-menu` in the max-width block. */
@media (min-width: 961px) {
  .nav-item.open .nav-menu,
  .nav-item:focus-within .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
  }
}

/* 600px minus 56px padding = 544px, which fits two columns plus the 34px gap.
   `column-count` fills top-to-bottom then across, which keeps sortOrder
   readable; `break-inside` stops a two-line entry splitting across columns. */
.nav-menu-list { column-count: 2; column-gap: 34px; padding-bottom: 6px; }
.nav-menu-list li { margin: 0; break-inside: avoid; }
.nav-menu-list a {
  display: block; padding: 8px 10px; margin: 0 -10px;
  border-radius: var(--radius); transition: background 0.18s;
}
.nav-menu-list a:hover { background: var(--sand); }
.nav-menu-list a b {
  display: block; font-family: var(--serif); font-size: 19px;
  font-weight: 500; letter-spacing: 0; text-transform: none;
}
.nav-menu-list a span {
  display: block; font-size: 12px; letter-spacing: 0.02em;
  text-transform: none; color: var(--ink-mute); margin-top: 1px;
}
.nav-menu-foot {
  position: sticky; bottom: 0;
  display: flex; gap: 26px; justify-content: space-between;
  padding: 14px 0 18px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.nav-menu-foot a {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--brass); padding-bottom: 3px;
}
.nav-menu-foot a:hover { color: var(--brass-dark); }

/* ---- Building switcher rail ------------------------------------------------ */

.bldg-switch { background: var(--sand); }
.switch-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.switch-head h2 { font-size: clamp(24px, 3vw, 34px); }
/* A scroll rail, not a fixed grid: six 210px cards plus gaps already exceed
   the 1240px container, and the portfolio only grows. Scrolls instead of
   pushing the page sideways. */
.switch-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 240px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* A visible (thin) scrollbar: with it hidden, desktop mouse users had no
     way to know the rail scrolled — and no way to scroll it. */
  scrollbar-width: thin;
  scrollbar-color: var(--brass) transparent;
  padding-bottom: 10px;
}
.switch-rail::-webkit-scrollbar { height: 6px; }
.switch-rail::-webkit-scrollbar-track { background: transparent; }
.switch-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.switch-rail:hover::-webkit-scrollbar-thumb { background: var(--brass); }
.switch-card { scroll-snap-align: start; }
.switch-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.35s, transform 0.35s; }
.switch-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.switch-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.switch-card .tc-noimg { position: static; display: flex; aspect-ratio: 4 / 3; background: var(--sand); }
.switch-card .sc-body { padding: 16px 18px 18px; }
.switch-card .sc-body span { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 5px; }
.switch-card .sc-body b { font-family: var(--serif); font-size: 21px; font-weight: 500; }

.nav-toggle {
  display: none;
  background: none; border: none;
  z-index: 102;
  width: 54px; height: 46px;
  padding: 12px;
  position: relative;
  color: inherit;
}
.nav-toggle span {
  position: absolute; left: 12px;
  width: 30px; height: 1.5px;
  background: currentColor;
  transition: all 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 32px; }
.open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.open .nav-toggle span:nth-child(2) { opacity: 0; }
.open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ivory);
    color: var(--ink);
    flex-direction: column;
    /* `safe center` centres a short menu but falls back to start-alignment
       once the expanded Buildings list makes it taller than the screen —
       plain `center` clips the overflow above the top edge, unreachable.
       The first declaration is the fallback for engines without `safe`. */
    justify-content: flex-start;
    justify-content: safe center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 96px 20px 48px;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    /* visibility (not just opacity) — otherwise the closed menu's links stay
       focusable and tabbing walks through 7 invisible links over the page. */
    visibility: hidden;
    /* visibility gets 0s + a delay, never a duration. With `visibility 0.3s`
       the engine holds `hidden` for the whole transition, so tapping the menu
       did nothing for 300ms and then the panel snapped in with no fade at all.
       Same trap already fixed on the desktop .nav-menu. */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    z-index: 101;
  }
  .nav-links a { font-size: 15px; }
  .site-header.open .nav-links {
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }
  .site-header.open {
    z-index: 1400;
    color: var(--ink);
  }

  /* In the full-screen menu the dropdown expands inline rather than floating:
     a positioned panel has nowhere to go inside a centred column. */
  .nav-item { flex-direction: column; gap: 0; width: 100%; }
  .nav-item > a { text-align: center; }
  /* 10px padding round a 6px chevron is a 26px target — needs the full 44. */
  .nav-caret { padding: 14px 22px; min-height: 44px; justify-content: center; }
  .nav-menu {
    position: static; transform: none; margin: 0; padding: 0;
    min-width: 0; max-width: none; width: 100%;
    border: none; box-shadow: none; background: transparent;
    max-height: 0; overflow: hidden;
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height 0.3s ease;
  }
  .nav-item.open .nav-menu {
    transform: none; max-height: 52vh; overflow-y: auto;
    padding: 6px 0 14px; margin-top: 6px;
    border-top: 1px solid var(--line);
  }
  /* One column on a phone: two 150px columns of building names is unreadable. */
  .nav-menu-list { column-count: 1; text-align: center; padding-bottom: 0; }
  .nav-menu-list a { padding: 11px 0; margin: 0; min-height: 44px; }
  .nav-menu-list a b { font-size: 17px; }
  .nav-menu-list a span { display: none; }
  .nav-menu-foot { position: static; justify-content: center; gap: 22px; padding: 12px 0 0; background: transparent; }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  isolation: isolate;
  overflow: hidden;
}
.hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  animation: heroZoom 14s ease-out forwards;
}
.hero .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The zoom is for the still poster only. main.js adds `.has-video` when it
   attaches the mp4: a <video> inside an element that is still scaling gets
   re-rasterized every frame for the rest of the 14s animation, which shows up
   as judder through the first loop (and only the first loop, and only when
   the video buffered fast enough to start before the zoom finished, which is
   why it looked intermittent). */
.hero .hero-bg.has-video { animation: none; transform: none; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  /* Deeper scrim: the copy sits at the bottom, the transparent header at the
     top, and the poster/video are bright in both places. */
  background: linear-gradient(to top, rgba(12,13,16,0.86) 0%, rgba(12,13,16,0.5) 55%, rgba(12,13,16,0.5) 100%);
  z-index: -1;
}
.hero-inner { width: 100%; padding-bottom: clamp(48px, 7vw, 96px); padding-top: 160px; }
/* font-size restated because `.hero p` (0-1-1) outranks `.eyebrow` (0-1-0),
   so the hero kicker was silently rendering at 18px — 1.5x every other
   eyebrow on the site, and wide enough with 0.32em tracking to wrap. */
.hero .eyebrow { color: rgba(250,249,246,0.95); font-size: 12px; }
.hero h1 {
  /* Cormorant's old-style figures make "#1" read as "#I"; lining figures fix it. */
  font-variant-numeric: lining-nums;
  font-size: clamp(44px, 7vw, 92px);
  font-weight: 500;
  max-width: 13ch;
  margin-bottom: 22px;
}
.hero p { max-width: 520px; font-size: 18px; color: rgba(250,249,246,0.95); margin-bottom: 36px; }
/* Text over photography gets a soft shadow so it holds up where the scrim is
   thin or the image is pale (the 7 Platt renders are nearly white). */
.hero h1, .hero p, .hero .eyebrow,
.page-hero h1, .page-hero .crumb, .page-hero .hero-lede,
.cta-band h2, .cta-band p,
.site-header.overlay:not(.scrolled):not(.open) .nav-links a,
.site-header.overlay:not(.scrolled):not(.open) .brand-sub {
  text-shadow: 0 1px 2px rgba(12,13,16,0.45), 0 2px 16px rgba(12,13,16,0.3);
}
/* The Buildings dropdown sits on its own solid panel, so the legibility
   shadow that helps the white header links over a photo only looks like a
   smudge there (James, 2026-09-23). */
.site-header.overlay:not(.scrolled):not(.open) .nav-menu a { text-shadow: none; }
.hero .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* subpage hero (short) */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  isolation: isolate;
}
.page-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,13,16,0.86) 0%, rgba(12,13,16,0.62) 55%, rgba(12,13,16,0.5) 100%);
  z-index: -1;
}
/* Longhand top/bottom only — the `padding` shorthand here used to zero out the
   horizontal padding `.wrap` supplies, leaving every page-hero heading flush
   against the viewport edge while the rest of the page was inset. */
.page-hero .hero-inner { padding-top: 150px; padding-bottom: clamp(36px, 5vw, 60px); width: 100%; }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 64px); }
.page-hero .crumb { font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(250,249,246,0.92); margin-bottom: 14px; }
.page-hero .crumb a:hover { color: var(--ivory); }

/* ---- Quick search bar ---------------------------------------------------- */

.search-bar {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.search-bar .field {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-bar label {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.search-bar select,
.search-bar input[type="number"] {
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  width: 100%;
}
.search-bar input[type="number"] { cursor: text; -moz-appearance: textfield; appearance: textfield; }
.search-bar input[type="number"]::-webkit-outer-spin-button,
.search-bar input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.search-bar input[type="number"]::placeholder { color: var(--ink); opacity: 1; }
.search-bar .btn { border-radius: 0; border: none; align-self: stretch; }

.hero .search-bar { margin-top: 46px; }

@media (max-width: 860px) {
  .search-bar { grid-template-columns: 1fr 1fr; }
  .search-bar .field:nth-child(even) { border-right: none; }
  .search-bar .field { border-bottom: 1px solid var(--line); }
  .search-bar .btn { grid-column: 1 / -1; padding: 18px; }
}

/* ---- Cards: listings ------------------------------------------------------ */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
@media (max-width: 1020px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .card-grid { grid-template-columns: 1fr; } }

.listing-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.listing-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.listing-card:hover .card-media img { transform: scale(1.06); }
.card-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(250,249,246,0.94);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--radius);
}

.card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body .card-hood { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass-text); }
.card-body h3 { font-size: 25px; }
.card-body .card-addr { color: var(--ink-mute); font-size: 14.5px; }
.card-body .card-price { font-size: 17px; font-weight: 400; margin-top: 4px; }
/* "Inclusive of X month(s) free" — net pricing carries its concession mark. */
.card-body .card-concession {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-text);
}
.sticky-cta .price-concession {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-text); margin: 2px 0 4px;
}
.card-specs {
  display: flex; gap: 18px;
  border-top: 1px solid var(--line);
  margin-top: 14px; padding-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.card-specs span b { font-weight: 500; }

/* ---- Buildings showcase (alternating) ------------------------------------ */

.bldg-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  /* Row height trimmed ~25% (padding and image ratio together) per James. */
  padding: clamp(27px, 3.75vw, 45px) 0;
  border-bottom: 1px solid var(--line);
}
.bldg-row:last-child { border-bottom: none; }
/* nth-of-TYPE, not nth-child: the grouped buildings page interleaves <h2>
   headings between the <article> rows, and every heading shifted nth-child
   parity — after the first group, rows stopped alternating and stacked
   image-left all the way down. Type-based counting sees only the articles. */
.bldg-row:nth-of-type(even) .bldg-media { order: 2; }
.bldg-media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 5 / 3; }
.bldg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.bldg-row:hover .bldg-media img { transform: scale(1.045); }
.bldg-info .eyebrow { margin-bottom: 12px; }
.bldg-info h3 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 10px; }
.bldg-info .addr { color: var(--ink-mute); margin-bottom: 16px; font-size: 15px; }
.bldg-info p.desc { color: var(--ink-soft); margin-bottom: 22px; }
.bldg-meta { display: flex; gap: 28px; margin-bottom: 26px; font-size: 13.5px; color: var(--ink-soft); flex-wrap: wrap; }
.bldg-meta div span { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }

@media (max-width: 860px) {
  .bldg-row { grid-template-columns: 1fr; }
  .bldg-row:nth-of-type(even) .bldg-media { order: 0; }
}

/* ---- Filter toolbar ------------------------------------------------------- */

.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.filter-bar .field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1; }
/* Seven fields wrap to a second row, and a lone flex:1 item on that row grows
   to the full width of the bar — a 1000px "Sort" select. Fix the width instead
   of letting it absorb the leftover space. */
@media (min-width: 641px) { .filter-bar .field-sort { flex: 0 0 220px; } }
.filter-bar label { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); }
.filter-bar select,
.filter-bar input[type="number"] {
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--ink);
  border-radius: var(--radius);
  outline: none;
}
/* Typed dollar amounts — the spinner arrows are useless at rent scale. */
.filter-bar input[type="number"] { width: 100%; -moz-appearance: textfield; appearance: textfield; }
.filter-bar input[type="number"]::-webkit-outer-spin-button,
.filter-bar input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-bar input[type="number"]:focus { border-color: var(--brass); }
.filter-bar .reset {
  background: none; border: none;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 4px;
  border-bottom: 1px solid transparent;
}
.filter-bar .reset:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Availability filter bar: an explicit grid, not a flex wrap.
   Flex-wrap let leftover row space inflate random fields (the old
   1000px Min Price) and strand Sort mid-row. Every control now has an
   assigned cell, and the price group gets the long middle of row two. ---- */
.filter-bar.avail-filters {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr 0.9fr 0.9fr;
  grid-template-areas:
    "search hood  bldg  beds baths"
    "price  price price sort reset";
  gap: 16px 18px;
  align-items: end;
}
.avail-filters .fa-search { grid-area: search; }
.avail-filters .fa-hood { grid-area: hood; }
.avail-filters .fa-bldg { grid-area: bldg; }
.avail-filters .fa-beds { grid-area: beds; }
.avail-filters .fa-baths { grid-area: baths; }
.avail-filters .fa-price { grid-area: price; }
.avail-filters .fa-sort { grid-area: sort; }
.avail-filters .fa-reset { grid-area: reset; justify-self: end; }
.avail-filters .field { min-width: 0; }
@media (max-width: 900px) {
  .filter-bar.avail-filters {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search search"
      "hood   bldg"
      "beds   baths"
      "price  price"
      "sort   reset";
  }
  .avail-filters .fa-reset { align-self: center; }
}

/* Price group: $-prefixed typed bounds with the slider stretched between
   them, and a live dollar readout beside the label. */
.fa-price label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fa-price label i { font-style: normal; letter-spacing: 0.04em; text-transform: none; font-size: 12.5px; color: var(--brass-text); white-space: nowrap; }
.price-row { display: flex; align-items: center; gap: 12px; }
.price-row .money { position: relative; flex: 0 0 110px; }
.price-row .money::before {
  content: "$"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--ink-mute); pointer-events: none;
}
.price-row .money input { padding-left: 24px; width: 100%; }
.price-row .dual-range { flex: 1; margin-top: 0; }
@media (max-width: 640px) { .price-row .money { flex: 0 0 96px; } }

.dual-range { --lo: 0%; --hi: 100%; position: relative; height: 20px; margin-top: 4px; }
.dual-range::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right,
    var(--line) var(--lo), var(--brass) var(--lo),
    var(--brass) var(--hi), var(--line) var(--hi));
}
/* Two stacked native ranges act as one two-thumb slider: the inputs ignore
   the pointer, only their thumbs take it, so both thumbs stay draggable. */
.dual-range input[type="range"] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 20px;
  margin: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track { height: 20px; background: none; }
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--brass);
  box-shadow: 0 1px 4px rgba(20, 22, 26, 0.25); cursor: pointer;
}
.dual-range input[type="range"]::-moz-range-track { background: none; }
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--brass); cursor: pointer;
}
.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---- Availability map ----------------------------------------------------- */
.avail-map {
  height: 420px; margin-bottom: clamp(24px, 3.5vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; z-index: 0; /* below the sticky header & nav */
}
/* StreetEasy-style price pins: a labeled pill per building. */
.map-price-pin { background: none; border: none; }
.map-price-pin span {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 1.5px solid #fff;
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.03em; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20, 22, 26, 0.35);
  transition: transform 0.15s, background 0.15s;
}
.map-price-pin:hover span, .map-price-pin.active span { background: var(--brass-dark); transform: scale(1.08); }
.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow); }
.leaflet-popup-content { font-family: var(--sans); font-weight: 300; font-size: 13.5px; line-height: 1.55; margin: 16px 18px; }
.leaflet-popup-content .mp-name { font-family: var(--serif); font-size: 19px; font-weight: 600; display: block; }
.leaflet-popup-content .mp-hood { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-text); display: block; margin: 2px 0 8px; }
.mp-units { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid var(--line); }
.mp-units li { border-bottom: 1px solid var(--line); }
.mp-units a {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 7px 2px; color: var(--ink); text-decoration: none;
}
.mp-units a:hover { color: var(--brass-dark); }
.mp-units a b { font-weight: 500; }
.leaflet-popup-content .mp-all {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass-text);
  border-bottom: 1px solid var(--brass); padding-bottom: 2px;
}
.leaflet-popup-content .mp-all:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) { .avail-map { height: 280px; } }

.results-count { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 22px; letter-spacing: 0.06em; }

.results-escape { font-size: 13.5px; color: var(--ink-mute); margin: -12px 0 26px; letter-spacing: 0.02em; }

/* ---- Layout bands (Availability) ------------------------------------------
   One band per bedroom count. The rule under the heading is the only divider —
   the cards below it carry their own weight, so anything heavier competes. */
.layout-band + .layout-band { margin-top: clamp(48px, 5vw, 76px); }
.layout-band-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 18px;
  padding-bottom: 14px; margin-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.layout-band-head h2 {
  font-family: var(--serif); font-size: clamp(24px, 3vw, 34px);
  font-weight: 500; margin: 0; line-height: 1.1;
}
.layout-band-meta {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0;
}
/* Pushed to the far end on desktop, but allowed to wrap under on a phone
   rather than squeezing the heading. */
.layout-band-cta { margin-left: auto; }

/* A band showing just its price band is exactly two cards. Three-up leaves a
   gap in the row and the pair reads as leftovers, so a pair gets a wider
   two-up treatment with more generous media and type. */
.card-grid.duo { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 46px); }
.card-grid.duo .card-media { aspect-ratio: 3 / 2; }
.card-grid.duo .card-body { padding: 30px 32px 32px; gap: 9px; }
.card-grid.duo .card-body h3 { font-size: clamp(25px, 2.2vw, 31px); }
.card-grid.duo .card-body .card-price { font-size: 19px; }
.card-grid.duo .card-specs { margin-top: 16px; padding-top: 18px; }
/* `.card-grid.duo` is 0-2-0 and would otherwise outrank the 0-1-0 single-column
   rule in the phone block, keeping two 150px cards side by side. */
@media (max-width: 640px) { .card-grid.duo { grid-template-columns: 1fr; } }

/* Value / premium marker on a pair. Sits opposite .card-tag, which is top-left. */
.listing-card { position: relative; }
.card-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--ink); color: var(--ivory);
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--radius);
}
.featured-pick { border-color: var(--brass); }

.empty-state {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--line);
  color: var(--ink-mute);
  border-radius: var(--radius);
}
.empty-state h3 { font-size: 26px; color: var(--ink); margin-bottom: 8px; }

/* ---- Listing detail ------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 300px;
  gap: 10px;
  border-radius: var(--radius);
  overflow: hidden;
}
/* .g-item is a <button> now (it was a div, so the photos were unreachable by
   keyboard) — reset the UA button chrome, keep the tile appearance. */
.gallery .g-item {
  overflow: hidden; position: relative; cursor: pointer;
  padding: 0; border: none; background: none; font: inherit; color: inherit;
  display: block; width: 100%; height: 100%; border-radius: var(--radius);
}
/* One or two photos would otherwise leave a 300px hole in the right column. */
.gallery.few { grid-template-columns: 1fr; }
.gallery.few .g-item.main { grid-row: span 1; }
/* The renderer emits every photo for the mobile carousel; the desktop
   composition is a fixed three-tile grid. */
@media (min-width: 781px) { .gallery .g-item:nth-child(n+4) { display: none; } }
.gallery .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery .g-item:hover img { transform: scale(1.05); }
.gallery .g-item.main { grid-row: span 2; }
.gallery .g-more {
  position: absolute; inset: 0;
  background: rgba(12,13,16,0.55);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
}
.gallery .g-count {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(12,13,16,0.62);
  color: var(--ivory);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--radius);
  pointer-events: none;
}
/* Phones get a swipe carousel instead of a stack. Two 260px tiles used 520px
   of screen to show two of eighteen photos and hid the third outright; a
   snap row shows more in less space and is what people expect of a gallery
   on a phone. Tapping any tile still opens the full lightbox. */
@media (max-width: 780px) {
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-auto-rows: 250px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery .g-item { scroll-snap-align: center; }
  .gallery .g-item.main { grid-row: span 1; }
  .gallery.few { grid-auto-columns: 100%; }
  /* the "view all" overlay is redundant when you can just swipe */
  .gallery .g-more { display: none; }
}

.detail-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) {
  /* on phones, put the tour/apply card first so it isn't buried below the fold */
  .detail-layout { grid-template-columns: 1fr; }
  .detail-layout aside { order: -1; }
}

.detail-main h1 { font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 6px; }
.detail-main .addr { color: var(--ink-mute); font-size: 16px; margin-bottom: 20px; }
.detail-specs {
  display: flex; gap: 30px; flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.detail-specs div span { display: block; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.detail-specs div b { font-size: 17px; font-weight: 400; }
.detail-main h2 { font-size: 30px; margin: 34px 0 14px; }
.detail-main p { color: var(--ink-soft); margin-bottom: 16px; }

.amenity-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 560px) { .amenity-list { grid-template-columns: 1fr; } }
.amenity-list li {
  padding-left: 24px;
  position: relative;
  color: var(--ink-soft);
  font-size: 15px;
}
.amenity-list li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--brass);
}

.sticky-cta {
  position: sticky;
  top: 110px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
.sticky-cta .price { font-family: var(--serif); font-size: 34px; font-weight: 500; margin-bottom: 2px; }
.sticky-cta .avail { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 22px; }
.sticky-cta .btn { display: block; width: 100%; margin-bottom: 12px; }
/* Schedule a Tour with a slightly smaller Saturday Tours to its right.
   Used in the building page sidebar AND on tour cards. Compact padding +
   tracking so both labels fit a ~300px column. */
.cta-pair { display: flex; gap: 10px; }
.cta-pair .btn {
  margin-bottom: 0; width: auto; flex: 1.5;
  padding: 15px 8px; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; justify-content: center;
}
.cta-pair .btn.sm { flex: 1; padding: 13px 8px; font-size: 11px; }
.sticky-cta .cta-pair { margin-bottom: 12px; }

/* Floor plan / 3D tour / video for a specific residence — pill buttons in the
   main column, directly under the spec row where a renter's eye already is. */
.media-links { display: flex; gap: 10px; flex-wrap: wrap; margin: -8px 0 30px; }
.media-links a {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--brass); color: var(--brass-text);
  padding: 11px 20px; border-radius: 999px;
  display: inline-flex; align-items: center;
  transition: all 0.25s;
}
.media-links a:hover { background: var(--brass-text); border-color: var(--brass-text); color: #fff; }
.sticky-cta .contact-line { font-size: 14px; color: var(--ink-mute); text-align: center; margin-top: 12px; }
/* Share This Apt (unit page sidebar). Phones use the native share sheet; the
   menu below is the desktop fallback. */
.share-wrap { position: relative; margin-bottom: 12px; }
.sticky-cta .share-wrap .btn { margin-bottom: 0; }
.share-btn, .sticky-cta .share-btn { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 9px; }
.share-btn svg { flex: 0 0 auto; }
.share-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--ivory); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(20,22,26,0.12); z-index: 6; display: grid; }
.share-menu[hidden] { display: none; }
.share-menu button, .share-menu a { display: block; width: 100%; text-align: left; padding: 12px 16px; font: inherit; font-size: 14px;
  letter-spacing: 0.02em; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; text-decoration: none; }
.share-menu > :last-child { border-bottom: 0; }
.share-menu button:hover, .share-menu a:hover { background: var(--sand); }
.share-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: var(--ink); color: var(--ivory);
  padding: 10px 18px; font-size: 13px; letter-spacing: 0.08em; border-radius: 2px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s; z-index: 300; }
.share-toast.on { opacity: 1; transform: translate(-50%, 0); }
body.has-mobile-action-bar .share-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

.sticky-cta .contact-line a { color: var(--ink); border-bottom: 1px solid var(--brass); }

.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* The iframe loads lazily, so until it arrives this box is what shows.
     A sand panel with a quiet label reads as intentional; a white void read
     as broken (James, 2026-09-10). The iframe paints over it. */
  position: relative; overflow: hidden; background: var(--sand);
}
.map-embed::before {
  content: "Map"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute);
}
.map-embed iframe { position: relative; z-index: 1; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.85) contrast(1.02); }

/* ---- Media modal (floor plan / 3D tour / video, opened on screen) -------- */
.media-modal { position: fixed; inset: 0; z-index: 1300; display: none; background: rgba(20,22,26,0.82);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.media-modal.on { display: flex; align-items: center; justify-content: center; }
.mm-box { width: min(1100px, 100%); height: min(82vh, 100%); display: flex; flex-direction: column;
  background: var(--ivory); border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.mm-head { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.mm-title { font-family: var(--serif); font-size: 20px; font-weight: 500; flex: 1; min-width: 0; }
.mm-ext { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-text); text-decoration: none; white-space: nowrap; }
.mm-ext:hover { text-decoration: underline; }
.mm-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.mm-close:hover { background: var(--ink); color: var(--ivory); }
.mm-body { flex: 1; min-height: 0; background: #111; }
.mm-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #111; }
.mm-body img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.mm-body [hidden] { display: none; }
@media (max-width: 640px) {
  .media-modal { padding: 0; }
  .mm-box { width: 100%; height: 100%; border-radius: 0; }
  .mm-title { font-size: 17px; }
}

/* ---- Google reviews badge (homepage testimonial) ------------------------- */
.google-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink);
  font-size: 12.5px; letter-spacing: 0.06em; background: var(--paper); }
.google-badge:hover { border-color: var(--brass); }
.gb-stars { color: var(--brass-text); letter-spacing: 0.08em; font-size: 14px; }

/* ---- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0;
  background: rgba(10, 11, 13, 0.95);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 90vw; max-height: 84vh; object-fit: contain; }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: absolute;
  background: none; border: none;
  color: rgba(250,249,246,0.85);
  font-size: 34px;
  padding: 16px;
  line-height: 1;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { color: #fff; }
.lightbox .lb-close { top: 18px; right: 22px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(250,249,246,0.7);
  font-size: 12px; letter-spacing: 0.28em;
}

/* ---- Why Aura / value props ----------------------------------------------- */

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } }
.value-item { border-top: 1px solid var(--line); padding-top: 26px; }
.section.dark .value-item { border-top-color: rgba(250,249,246,0.18); }
.value-item .num { font-family: var(--serif); font-size: 18px; color: var(--brass); margin-bottom: 14px; display: block; }
/* Service icons (Landlords → Additional Services) */
.value-item .svc-icon { display: block; margin-bottom: 14px; color: var(--brass); }
.value-item .svc-icon svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.value-item h3 { font-size: 24px; margin-bottom: 10px; }
.value-item p { color: var(--ink-mute); font-size: 15.5px; }
.section.dark .value-item p { color: rgba(250,249,246,0.62); }

/* ---- Why Rent With Aura (homepage) -----------------------------------------
   2026-09-14: photo beside copy. Was a lead pane + four bordered reasons + a
   numbered strip, all text on black, and the copy argued against listing
   agents; James's boss disliked it. Now a real amenity photo fills the left
   column edge to edge, and the right column carries four short reasons and the
   booking CTA. The photo stretches to the copy's height so the two columns
   always end together (no dangling empty space under the lead, which the old
   layout had on wide screens). */

.why-aura .why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 84px);
  align-items: stretch;
}
.why-photo {
  margin: 0;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 3px;
}
.why-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.why-copy { align-self: center; }
.why-copy .section-title { margin-bottom: 16px; }
.why-copy .why-intro {
  color: rgba(250, 249, 246, 0.72);
  font-size: 17px;
  max-width: 48ch;
  margin-bottom: 30px;
}
.why-points {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 32px;
  border-top: 1px solid rgba(250, 249, 246, 0.18);
  padding-top: 28px;
}
.why-points li { display: flex; flex-direction: column; gap: 6px; }
.why-points h3 { font-size: 21px; font-weight: 500; }
.why-points p { color: rgba(250, 249, 246, 0.62); font-size: 15px; line-height: 1.6; }
.why-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px;
  margin-top: 34px;
}
.why-cta .text-link { color: var(--ivory); }
.why-cta .text-link:hover { color: var(--brass); }

@media (max-width: 940px) {
  .why-aura .why-grid { grid-template-columns: 1fr; gap: 30px; }
  .why-photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .why-points { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
  .why-points h3 { font-size: 19px; }
  .why-copy .why-intro { font-size: 16px; margin-bottom: 24px; }
  .why-cta { margin-top: 26px; }
}

/* ---- Stats ---------------------------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
@media (max-width: 780px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-row .stat b { font-family: var(--serif); font-size: clamp(38px, 4.6vw, 58px); font-weight: 500; display: block; }
.stat-row .stat span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); }
.section.dark .stat-row .stat span { color: rgba(250,249,246,0.55); }
/* Landlords page: pitch-deck scale — headline numerals with a brass rule. */
.stat-row-lg { gap: 32px; }
.stat-row-lg .stat { border-top: 1px solid var(--brass); padding-top: 22px; text-align: left; }
.stat-row-lg .stat b { font-size: clamp(44px, 5.4vw, 72px); letter-spacing: -0.01em; }

/* The landlords pillar grids run four items, 2×2 — mirroring the deck. */
.value-grid.ll-pillars { grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 52px) clamp(28px, 4vw, 72px); }
@media (max-width: 720px) { .value-grid.ll-pillars { grid-template-columns: 1fr; } }

/* Referral cards — the two ownership endorsements, side by side. */
.ll-referrals { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
@media (max-width: 860px) { .ll-referrals { grid-template-columns: 1fr; } }
.ll-referral {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 40px);
  margin: 0;
  box-shadow: var(--shadow);
}
.ll-referral blockquote {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 22px;
}
.ll-referral blockquote::before { content: "“"; color: var(--brass); }
.ll-referral blockquote::after { content: "”"; color: var(--brass); }
.ll-referral figcaption b { display: block; font-weight: 500; font-size: 15px; }
.ll-referral figcaption span {
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-text);
}
/* The dark closing section: keep the contact copy legible on ink. */
.section.dark .prose p { color: rgba(250, 249, 246, 0.78); }
.section.dark .prose a.text-link { color: var(--ivory); }

/* ---- Neighborhood cards ---------------------------------------------------- */

.hood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1020px) { .hood-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hood-grid { grid-template-columns: 1fr; } }
.hood-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  color: var(--ivory);
  isolation: isolate;
}
.hood-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.hood-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,16,0.86) 0%, rgba(12,13,16,0.45) 50%, rgba(12,13,16,0.1) 100%); z-index: -1; }
.hood-card:hover img { transform: scale(1.07); }
.hood-card .hc-body { padding: 26px; }
.hood-card h3 { font-size: 27px; margin-bottom: 6px; }
.hood-card p { font-size: 13.5px; color: rgba(250,249,246,0.92); }
.hood-card h3, .hood-card p, .hood-card .hc-count { text-shadow: 0 1px 2px rgba(12,13,16,0.45); }
.hood-card .hc-count { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(250,249,246,0.8); display: block; margin-top: 12px; }

/* neighborhood detail block */
.hood-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(40px, 5vw, 60px) 0; border-bottom: 1px solid var(--line); }
.hood-detail:last-child { border-bottom: none; }
.hood-detail:nth-child(even) .hd-media { order: 2; }
@media (max-width: 860px) { .hood-detail { grid-template-columns: 1fr; } .hood-detail:nth-child(even) .hd-media { order: 0; } }
.hd-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
.hd-media img { width: 100%; height: 100%; object-fit: cover; }
.hood-detail h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 14px; }
.hood-detail p { color: var(--ink-soft); margin-bottom: 18px; }
.subway-line { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subway-line i {
  font-style: normal;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 400;
}

/* ---- Testimonials ---------------------------------------------------------- */

.quote-block { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-block blockquote { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 32px); font-weight: 500; line-height: 1.45; margin-bottom: 28px; }
.quote-block blockquote::before { content: "“"; color: var(--brass); }
.quote-block blockquote::after { content: "”"; color: var(--brass); }
.quote-block cite { font-style: normal; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); }
.quote-block cite b { display: block; font-weight: 400; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.section.dark .quote-block cite b { color: var(--ivory); }
.section.dark .quote-block cite { color: rgba(250,249,246,0.55); }

/* ---- Forms ----------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.form-grid label { display: block; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px; }
.form-grid input, .form-grid textarea, .form-grid select {
  width: 100%;
  padding: 14px 16px;
  /* --line (1.32:1) is invisible as a control boundary; WCAG 1.4.11 wants 3:1.
     #8c8270 clears it on white (3.79), paper (3.60) and sand (3.27). */
  border: 1px solid #8c8270;
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.25s;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { border-color: var(--brass); }
.form-grid textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 13px; color: var(--ink-mute); margin-top: 14px; }
.form-status { margin-top: 16px; font-size: 14.5px; display: none; }
.form-status.ok { display: block; color: #2e6b3f; }
.form-status.err { display: block; color: #a33a2e; }
/* `warn` is the mailto fallback's message and had no rule, so it inherited
   display:none and the visitor was told nothing at all. `busy` covers the
   in-flight state. */
.form-status.warn { display: block; color: #8a5a1f; }
.form-status.busy { display: block; color: var(--ink-mute); }

/* Honeypot — off-screen rather than display:none, since some bots skip
   undisplayed inputs. Never focusable, never announced. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* A photo that fails to load would otherwise render its alt text — the
   building or unit name — as bare words in the layout. main.js marks the
   element with data-failed; this hides the text and leaves a neutral panel.
   Every image container on the site sets an aspect-ratio, so the box is
   already reserved and nothing moves. */
img[data-failed] {
  color: transparent;          /* hide the alt text, keep the box */
  background: var(--sand);
  object-fit: cover;
  min-height: 100%;
}
img[data-failed]::after {      /* replaced elements ignore this in most
                                  engines; harmless where it applies */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--sand);
}

/* ---- Team ------------------------------------------------------------------ */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 780px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { border-top: 1px solid var(--line); padding-top: 22px; }
.team-card .monogram {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.team-card h3 { font-size: 24px; }
.team-card span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-text); }
/* Optional portrait — set in the Building Manager's Team tab. Members without
   one keep the monogram circle. */
.team-card .team-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); margin-bottom: 18px; background: var(--sand); }
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card .team-mail {
  display: block; margin-top: 7px; font-size: 13.5px; font-weight: 300;
  color: var(--ink-mute); text-decoration: none; overflow-wrap: anywhere;
}
.team-card .team-mail:hover { color: var(--brass-text); }
/* The whole team in one dense five-up grid — it reads as a bench of
   professionals rather than a row of profiles, and 19 people land as four
   even-ish rows. At the 1240px wrap that's a ~216px card with a ~270px
   portrait, so the type still comes down from the base sizes, just not as far
   as a six-up needed. Steps down 5 → 4 → 3 → 2; it never goes to a single
   column, because 19 one-per-row cards is an absurd amount of scrolling on a
   phone. */
.team-grid.compact { grid-template-columns: repeat(5, 1fr); gap: 20px 16px; }
.team-grid.compact .team-card { padding-top: 18px; }
.team-grid.compact .team-card h3 { font-size: 18px; line-height: 1.25; }
.team-grid.compact .team-card span { font-size: 10px; letter-spacing: 0.16em; }
.team-grid.compact .team-card .team-photo { margin-bottom: 14px; }
.team-grid.compact .team-card .team-mail { font-size: 11.5px; margin-top: 6px; }
.team-grid.compact .team-card .monogram {
  width: 60px; height: 60px; font-size: 21px; margin-bottom: 14px;
}
@media (max-width: 1020px) { .team-grid.compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .team-grid.compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  {
  .team-grid.compact { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  /* Two-up on a 320px screen leaves ~133px of card, so give the type back a
     little room rather than shrinking it further. */
  .team-grid.compact .team-card h3 { font-size: 17px; }
  .team-grid.compact .team-card .team-mail { font-size: 11.5px; }
}

/* ---- Neighborhood guide (guide.html) ---------------------------------------
   Reads on screen and prints to a clean PDF from the same markup: the download
   button is just window.print(), so there is no second template to keep in
   sync and nothing to regenerate when the copy changes. */

.guide-hero { min-height: 46vh; }
.hood-guide-link { margin-top: 22px; }
.guide-sheet .wrap { max-width: 900px; }
.guide-lead p { font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5; color: var(--ink-soft); margin-bottom: 26px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }

.guide-block { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 34px; }
.guide-block h2 { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-text); margin-bottom: 18px; font-family: var(--sans); font-weight: 500; }

.guide-list { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 20px 34px; }
@media (max-width: 720px) { .guide-list { grid-template-columns: 1fr; gap: 18px; } }
.guide-list li { display: flex; flex-direction: column; gap: 3px; }
/* A numbered entry is a button that opens its pin. Reset the button so it still
   reads as text, and make the whole row the target. */
.guide-jump {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; width: 100%;
}
.guide-jump:hover strong, .guide-jump:focus-visible strong { color: var(--brass-text); }
.guide-jump:hover .guide-n, .guide-jump:focus-visible .guide-n { background: var(--brass); }
.guide-jump .guide-n { transition: background 0.2s ease; }
.guide-list strong { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.guide-list strong a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.guide-list strong a:hover { color: var(--brass-text); }
.guide-list span { font-size: 14.5px; color: var(--ink-mute); line-height: 1.55; }

/* The guide map. Numbered pins tie the figure to the list, which is what makes
   it usable once it is on paper. */
.guide-map {
  height: clamp(300px, 42vh, 460px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  z-index: 0;                 /* keep Leaflet panes under the fixed site header */
}
.guide-map-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-mute); }
.guide-pin {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500;
  border: 1.5px solid var(--ivory);
  box-shadow: 0 1px 4px rgba(12, 13, 16, 0.35);
}
.guide-pin.is-ours { background: var(--brass); }
.guide-pin { cursor: pointer; }
.guide-pop { display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); }
.guide-pop strong { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.guide-pop span { font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
.guide-pop a { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brass-text); text-decoration: none; margin-top: 2px; }
.guide-pop a:hover { text-decoration: underline; }
.guide-pop-tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-text); }
/* The number badge in the list, matching the pin. */
.guide-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: var(--ivory);
  font-style: normal; font-size: 11px;
  margin-bottom: 5px;
}

.guide-print-head { display: none; }
.guide-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-mute); }

/* ---- Print ------------------------------------------------------------------
   Save as PDF from the browser's print dialog produces the downloadable guide.
   The site header is a fixed overlay, so it has to be replaced by a static
   masthead or the PDF opens with no branding at all. */
@media print {
  /* One neighborhood = one Letter sheet where the content allows. The map sits
     beside the intro, the categories flow in three columns, everything is
     sized for paper, not for a screen. Numbers on pins match the list. */
  @page { size: Letter; margin: 11mm 12mm 12mm; }
  html, body { background: #fff !important; color: #14161a !important; font-size: 10pt; }
  .site-header, .site-footer, .guide-actions, .mobile-action-bar,
  .cta-band, .page-hero, #guide-hero-bg, .leaflet-control-zoom,
  .leaflet-control-attribution, .leaflet-popup-pane { display: none !important; }
  .section { padding: 0 !important; }
  .wrap { max-width: none !important; padding: 0 !important; }

  .guide-print-head {
    display: flex !important; align-items: center; justify-content: space-between;
    border-bottom: 1.5px solid #14161a; padding-bottom: 8px; margin-bottom: 10px;
  }
  .guide-print-head img { width: 92px; height: auto; }
  .guide-print-head span { font-family: var(--serif); font-size: 17pt; font-weight: 500;
    letter-spacing: 0; text-transform: none; color: #14161a; }

  /* Intro on the left, map on the right, one row. */
  /* The map column is a fixed 92mm so the map box is the same physical size
     in print emulation, in beforeprint (main.js sets these two values inline)
     and on the printed sheet. A 1fr column measured differently at the 1200px
     build viewport than on a Letter page, so Leaflet fitted the pins to a
     596px box and the sheet showed the left 340px of it: Jersey City and the
     Hudson, pins pushed into the corner. */
  .guide-sheet .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 92mm; column-gap: 8mm; row-gap: 0; align-items: start; }
  .guide-print-head, .guide-cols, .guide-foot { grid-column: 1 / -1; }
  .guide-lead { grid-column: 1; }
  .guide-lead p { font-size: 11pt; line-height: 1.45; margin: 0 0 8px; }
  .guide-map-block { grid-column: 2; grid-row: 2 / span 2; border: 0; padding: 0; margin: 0; }
  .guide-map-block h2 { display: none; }
  .guide-map { width: 92mm !important; height: 62mm !important; border: 1px solid #ccc; border-radius: 0;
    break-inside: avoid; page-break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .guide-map-note { font-size: 7.5pt; margin: 3px 0 0; }
  .guide-block:not(.guide-map-block) { border-top: 0; padding-top: 0; margin-top: 8px; }
  .guide-block h2 { font-size: 7.5pt; letter-spacing: 0.22em; color: #8a7346 !important;
    margin: 0 0 5px; padding-bottom: 3px; border-bottom: 1px solid #ddd; }
  .subway-line { gap: 4px; }
  .subway-line i { width: 18px; height: 18px; font-size: 8pt; border: 1px solid #14161a;
    background: #14161a !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Categories flow across three columns; a category never splits. */
  .guide-cols { column-count: 3; column-gap: 7mm; margin-top: 6mm; }
  .guide-cols .guide-block { break-inside: avoid; page-break-inside: avoid; margin: 0 0 6mm; }
  .guide-list { display: block; }
  .guide-list li { display: block; margin: 0 0 5px; break-inside: avoid; page-break-inside: avoid; }
  .guide-jump { display: block; text-align: left; }
  .guide-n { -webkit-print-color-adjust: exact; print-color-adjust: exact;
    width: 13px; height: 13px; font-size: 7pt; margin: 0 4px 0 0; display: inline-flex;
    vertical-align: 1px; }
  .guide-list strong { font-size: 10pt; display: inline; line-height: 1.3; }
  .guide-list span { display: block; font-size: 8pt; line-height: 1.35; color: #4a4740 !important; margin-top: 1px; }
  .guide-pin { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; border-width: 1px; }
  .guide-foot { margin-top: 4mm; padding-top: 6px; border-top: 1px solid #ddd; font-size: 8pt; }
  a { text-decoration: none !important; color: inherit !important; }
}

/* ---- CTA band --------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding: clamp(70px, 10vw, 130px) 0;
  color: var(--ivory);
  text-align: center;
  isolation: isolate;
}
.cta-band .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(12,13,16,0.78); z-index: -1; }
.cta-band h2 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 16px; }
.cta-band p { color: rgba(250,249,246,0.92); max-width: 520px; margin: 0 auto 34px; }

/* ---- FAQ -------------------------------------------------------------------- */

.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: var(--serif);
  font-size: 21px;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--brass); font-size: 24px; transition: transform 0.25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-soft); padding-bottom: 22px; max-width: 640px; }

/* ---- Tour / Apply ------------------------------------------------------------ */

.page-hero .hero-lede {
  color: rgba(250,249,246,0.95);
  font-size: 17px;
  max-width: 520px;
  margin-top: 18px;
}

/* Compact hero + in-hero picker: on the Tour page the booking control IS the
   page, so the hero is trimmed to get the building cards near the fold rather
   than making people scroll past an explainer to reach the buttons. */
.page-hero.compact { min-height: 0; }
.page-hero.compact .hero-inner { padding-top: 118px; padding-bottom: clamp(26px, 3vw, 38px); }
.page-hero.compact h1 { font-size: clamp(34px, 4.4vw, 52px); }
.page-hero.compact .hero-lede { font-size: 16.5px; margin-top: 14px; max-width: 560px; }

.hero-toolbar { margin-top: clamp(24px, 3vw, 34px); box-shadow: var(--shadow); }

/* Tighter top padding so the grid follows the hero immediately. */
.section.tight { padding-top: clamp(26px, 3.2vw, 42px); }

.picker-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.picker-head .results-count { margin-bottom: 0; }
.picker-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* Deliberately lighter than .value-grid — this is reassurance below the
   booking action, not a section that competes with it. */
.steps-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 780px) { .steps-strip { grid-template-columns: 1fr; gap: 26px; } }
.steps-strip .step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; }
.steps-strip .num {
  font-family: var(--serif); font-size: 15px; color: var(--brass-text);
  grid-row: span 2; padding-top: 3px;
}
.steps-strip h3 { font-size: 19px; }
.steps-strip p { font-size: 14.5px; color: var(--ink-mute); }

/* On a phone the three stacked filter fields filled the entire first screen,
   pushing every building below the fold — the opposite of the point. Lay them
   out 2-up with search across the top so the first card is reachable. */
@media (max-width: 640px) {
  .page-hero.compact .hero-inner { padding-top: 104px; padding-bottom: 18px; }
  .page-hero.compact h1 { font-size: 40px; }
  .page-hero.compact .hero-lede { font-size: 15.5px; margin-top: 10px; }
  /* Every filter bar goes 2-up on phones. Stacked, the listings page's five
     fields filled two screens before a single apartment appeared, and the
     tour picker did the same. Search spans the top row; the rest pair up.
     `.filter-bar.hero-toolbar` (0-3-0) is needed on .field because the
     generic `.tour-toolbar .field { min-width: 170px }` sits later in the
     file — that floor is what pushed the grid past the viewport edge. */
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    padding: 16px;
  }
  .hero-toolbar { margin-top: 18px; }
  .filter-bar .field { min-width: 0; }
  .filter-bar .field:first-child { grid-column: 1 / -1; }
  .filter-bar select { width: 100%; max-width: 100%; }
  .filter-bar .reset { grid-column: 1 / -1; justify-self: start; }
  /* Count and tap-to-call share one row; the "we'll plan it" link is dropped
     here because the request form sits directly below the grid anyway, and
     two stacked links pushed the first building off the screen. */
  .picker-head { gap: 10px 16px; margin-bottom: 16px; align-items: center; }
  .picker-links .plan-link { display: none; }
}

.tour-toolbar { margin-bottom: 26px; }
/* Desktop-only floor. Left unscoped it also applied on phones, where it
   forced the 2-up grid past the viewport edge. */
@media (min-width: 641px) { .tour-toolbar .field { min-width: 170px; } }
.tour-toolbar input[type="search"] {
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid #8c8270;   /* 3:1 control boundary, not --line's 1.3:1 */
  padding: 8px 0;
  border-radius: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.tour-toolbar input[type="search"]:focus { border-bottom-color: var(--brass-text); }
.tour-toolbar input[type="search"]::placeholder { color: var(--ink-mute); }

.tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
@media (max-width: 1020px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tour-grid { grid-template-columns: 1fr; } }

.tour-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.45s ease, transform 0.45s ease, border-color 0.3s ease;
}
.tour-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.tour-card.focused { border-color: var(--brass); outline: 2px solid var(--brass); outline-offset: -1px; box-shadow: var(--shadow); }

.tour-card .tc-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; background: var(--sand); }
.tour-card .tc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.tour-card:hover .tc-media img { transform: scale(1.06); }
.tour-card .tc-noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 26px; color: var(--ink-mute);
  text-align: center; padding: 20px;
}

.tour-card .tc-body { padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tour-card .tc-body h3 { font-size: 27px; }
/* A 2-column grid rather than flex-wrap: with a variable number of meta items
   (layouts / pricing / availability) wrapping produced ragged, card-to-card
   inconsistent alignment. */
.tour-card .tc-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
  margin-top: 14px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft);
}
.tour-card .tc-meta div span {
  display: block; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
}

.tour-card .tc-actions { padding: 0 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.tour-card .tc-actions .btn { width: 100%; }
.tour-card .tc-links {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12.5px; color: var(--ink-mute);
}
.tour-card .tc-links a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.tour-card .tc-links a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.tour-card .tc-links a:only-child { margin-left: auto; }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: var(--radius);
}

/* ---- Footer ------------------------------------------------------------------ */

.site-footer { background: var(--ink); color: rgba(250,249,246,0.72); }
.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(56px, 7vw, 90px) 0 50px;
}
@media (max-width: 1100px) { .site-footer .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .site-footer .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer .foot-grid { grid-template-columns: 1fr; } }

.site-footer .brand-name { color: var(--ivory); }
.site-footer .brand-logo { width: 146px; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer .foot-tag { font-size: 14px; margin-top: 16px; max-width: 300px; }
.site-footer h4 { font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; font-weight: 400; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { font-size: 14.5px; transition: color 0.2s; }
.site-footer a:hover { color: var(--ivory); }
.site-footer .foot-contact li { font-size: 14.5px; margin-bottom: 12px; }
.foot-badges { display: inline-flex; align-items: center; gap: 22px; }
.foot-badges img { display: block; opacity: 0.85; }
.foot-badges .badge-eho { width: 44px; height: 44px; filter: brightness(0) invert(1); }
.foot-badges .badge-rebny { height: 26px; width: auto; }
.detail-main .photo-note { font-size: 13.5px; color: var(--ink-mute); font-style: italic; margin-top: -6px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 22px 0 6px; font-size: 12.5px; color: rgba(250,249,246,0.58); }
.foot-legal a { color: rgba(250,249,246,0.78); border-bottom: 1px solid rgba(250,249,246,0.25); }
.foot-legal a:hover { color: var(--ivory); border-bottom-color: var(--brass); }
.prose h2 { font-size: 26px; margin: 34px 0 10px; }
.foot-bottom {
  border-top: 1px solid rgba(250,249,246,0.12);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(250,249,246,0.58);
}

/* ---- Reveal animation ----------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .hero-bg { animation: none; }
  /* A 16MB autoplaying video is the largest motion on the site. */
  .hero-video { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Focus -------------------------------------------------------------------- */

/* There was no focus indicator anywhere on the site: four rules set
   `outline:none` and replaced it only with a 1px border-colour change
   (1.32:1 -> 3.27:1), which is effectively invisible. :focus-visible keeps
   mouse clicks clean while making keyboard navigation actually usable. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}
.site-header.overlay:not(.scrolled):not(.open) :focus-visible,
.section.dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible { outline-color: var(--ivory); }

.form-grid input:focus-visible,
.form-grid textarea:focus-visible,
.form-grid select:focus-visible,
.filter-bar select:focus-visible,
.search-bar select:focus-visible,
.tour-toolbar input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---- Buildings jump nav & groups ------------------------------------------------ */

.bldg-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); }
.bldg-jump a {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s;
}
.bldg-jump a:hover { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.bldg-jump a i { font-style: normal; font-size: 10.5px; color: var(--ink-mute); }
.bldg-jump a:hover i { color: rgba(250,249,246,0.7); }

.bldg-group {
  font-size: clamp(24px, 2.8vw, 34px);
  padding-top: clamp(28px, 4vw, 48px);
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  scroll-margin-top: 110px;   /* clears the fixed header on anchor jumps */
}
.bldg-group span {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Pagination & result notes -------------------------------------------------- */

.load-more-row { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 52px); }
.results-note { font-size: 13.5px; color: var(--ink-mute); margin: -12px 0 22px; font-style: italic; }
.grid-more { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 12px; }

/* ---- Testimonial dots ------------------------------------------------------------ */

.quote-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.quote-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid var(--brass); background: transparent; transition: background 0.25s;
}
.quote-dots button.on { background: var(--brass); }

/* ---- Misc ------------------------------------------------------------------------ */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.prose p { color: var(--ink-soft); margin-bottom: 18px; font-size: 16.5px; }
.prose h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 30px 0 14px; }

.check-list li { padding-left: 28px; position: relative; margin-bottom: 12px; color: var(--ink-soft); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brass-text); }

.notice {
  background: var(--sand);
  border-left: 2px solid var(--brass);
  padding: 18px 22px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ---- Mobile refinements -------------------------------------------------- */

@media (max-width: 900px) {
  .sticky-cta { position: static; }
}

@media (max-width: 640px) {
  /* 16px inputs stop iOS Safari from auto-zooming into form fields */
  .form-grid input, .form-grid textarea, .form-grid select,
  .filter-bar input, .filter-bar select,
  .search-bar select, .search-bar input { font-size: 16px; }

  /* ---- Touch targets --------------------------------------------------
     Measured at 390px: footer links were 16-23px tall, .text-link 23-26px,
     the filter Reset 21px. Apple/WCAG want ~44px. Padding rather than
     font-size, so the type scale is untouched. */
  .site-footer ul li { margin-bottom: 2px; }
  /* .foot-contact is reused in the contact page body, so scope it loosely. */
  .site-footer ul li a,
  .foot-contact li a { display: inline-block; padding: 11px 0; }
  .site-footer .foot-contact li { margin-bottom: 2px; }
  .foot-bottom { padding: 20px 0 28px; }

  .text-link { display: inline-block; padding-top: 11px; padding-bottom: 11px; }
  .picker-links .text-link, .section-head.split .text-link { padding-top: 12px; padding-bottom: 12px; }

  /* .filter-bar.hero-toolbar .reset (0-3-0) sets padding:2px in the grid
     layout above, so this needs matching specificity to reach 44px. */
  .filter-bar .reset { padding: 13px 6px; }
  .filter-bar input[type="search"],
  .tour-toolbar input[type="search"] { min-height: 44px; }

  /* A .text-link button is ~20px tall on its own. These are the primary way
     into a layout on a phone, so they need the full 44px.
     The element+class selector is deliberate: `button.text-link` above is
     0-1-1 and sets `padding: 0 0 4px`, so a bare `.layout-band-cta` (0-1-0)
     loses and these silently stayed 20px tall. */
  button.layout-band-cta,
  #results-escape button.text-link {
    display: inline-block; padding: 14px 0; margin-left: 0;
  }
  /* Left-aligned under the heading rather than pushed to the right edge,
     which on a 390px screen reads as belonging to the next section. */
  .layout-band-head { gap: 2px 14px; }

  /* Mobile nav overlay links were 37px in a full-screen menu. */
  .nav-links a { padding: 12px 0; }
  .page-hero .crumb a { display: inline-block; padding: 13px 0; }

  /* Per-card phone / Saturday-tour links: 23px, and a phone number is the
     one thing a renter is most likely to actually tap. */
  .tour-card .tc-links a { padding: 11px 0; }
  .sticky-cta .contact-line a { display: inline-block; padding: 11px 2px; }
  /* A text price like "From the mid $3,000s" wrapped to two lines at 34px,
     and this card sits above the content on phones, so its height is the
     first thing between a visitor and the page. */
  .sticky-cta { padding: 22px; }
  .sticky-cta .price { font-size: 26px; }
  .sticky-cta .avail { margin-bottom: 16px; }
  .sticky-cta .btn { margin-bottom: 10px; }
  .tour-card .tc-links { margin-top: 0; }

  .bldg-jump a { padding: 12px 18px; }
  .quote-dots button { width: 11px; height: 11px; }
  .quote-dots { gap: 16px; padding: 6px 0; }

  /* Subway bullets double as a tap-adjacent row; keep them comfortably apart */
  .subway-line { gap: 10px; }

  /* Native tap highlight is a grey box on these dark/photo surfaces */
  a, button { -webkit-tap-highlight-color: rgba(163,139,95,0.18); }

  /* portrait cards get unwieldy at full width — use a landscape crop */
  .hood-card { aspect-ratio: 16 / 10; }

  /* ---- Mobile type scale ----------------------------------------------
     The desktop clamps floor out too high on a phone: the hero h1's
     clamp(44px…) min gave a four-line headline, and .eyebrow at 0.32em
     tracking wrapped "Manhattan's #1 Leasing Solution" onto two lines,
     which together pushed the quick-search off the bottom of the screen. */
  .hero { min-height: 100svh; }
  .hero-inner { padding-top: 118px; padding-bottom: 34px; }
  .hero h1 {
  /* Cormorant's old-style figures make "#1" read as "#I"; lining figures fix it. */
  font-variant-numeric: lining-nums; font-size: 37px; max-width: none; margin-bottom: 14px; line-height: 1.08; }
  .hero p { font-size: 16px; margin-bottom: 24px; }
  .hero .search-bar { margin-top: 26px; }

  /* Inner-page heroes are decoration on a phone — 150px of top padding and a
     46vh floor pushed the actual content (filters, cards) a full screen down. */
  .page-hero { min-height: 0; }
  .page-hero .hero-inner { padding-top: 108px; padding-bottom: 28px; }
  .page-hero h1 { font-size: 34px; }

  .eyebrow,
  .hero .eyebrow { font-size: 10.5px; letter-spacing: 0.2em; margin-bottom: 12px; }
  .section-title { font-size: clamp(27px, 8vw, 34px); }
  .section-sub { font-size: 15.5px; }
  .section { padding: 56px 0; }

  /* Two buttons at ~167px each: the default 34px side padding plus 0.22em
     tracking made "View Availability" wrap. */
  .hero .hero-actions { gap: 10px; }
  .hero .hero-actions .btn { flex: 1; padding: 15px 10px; font-size: 11.5px; letter-spacing: 0.14em; }

  .search-bar .field { padding: 6px 16px 8px; }
  .search-bar label { font-size: 9.5px; letter-spacing: 0.2em; }
  /* The select was a 25px target inside a 69px field box. Growing the control
     and shrinking the padding keeps the bar the same overall height. */
  .search-bar select, .search-bar input[type="number"] { min-height: 44px; }

  .lightbox .lb-prev, .lightbox .lb-next { font-size: 44px; padding: 20px 14px; }
}


/* ---- UX refresh: search, availability controls, and mobile actions -------- */
.search-bar { grid-template-columns: repeat(3, 1fr) auto; }

.availability-tools { margin-bottom: clamp(26px, 4vw, 42px); }
.availability-primary {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(170px, 1.1fr) minmax(130px, 0.8fr) auto minmax(190px, 1fr);
  gap: 14px;
  align-items: end;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -30px rgba(20,22,26,0.5);
}
.availability-primary .field { display:flex; min-width:0; flex-direction:column; gap:5px; }
.availability-primary label,
.availability-more label { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.availability-primary select,
.availability-primary input[type="search"] {
  width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--line);
  border-radius:var(--radius); outline:none; background:var(--ivory); color:var(--ink);
  font:300 14.5px var(--sans);
}
.availability-primary select:focus,
.availability-primary input[type="search"]:focus { border-color:var(--brass); }
.availability-tool-btn {
  min-height:46px; padding:11px 16px; border:1px solid var(--ink); border-radius:var(--radius);
  background:transparent; color:var(--ink); font:500 12.5px var(--sans);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.availability-tool-btn:hover,
.availability-tool-btn.active { background:var(--ink); color:var(--ivory); }
.availability-more.filter-bar {
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(140px,.7fr) minmax(360px,2.2fr) auto;
  grid-template-areas:"bldg baths price reset";
  gap:16px; align-items:end; margin:12px 0 0; padding:20px;
  box-shadow:0 18px 34px -32px rgba(20,22,26,.55);
}
.availability-more[hidden] { display:none; }
.availability-more .fa-bldg { grid-area:bldg; }
.availability-more .fa-baths { grid-area:baths; }
.availability-more .fa-price { grid-area:price; }
.availability-more .fa-reset { grid-area:reset; justify-self:end; }
.availability-more .field { min-width:0; }
.availability-actions {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:42px; margin-top:14px;
}
.active-filter-chips {
  display:flex; gap:8px; min-width:0; overflow-x:auto; padding:2px 0; scrollbar-width:thin;
}
.active-filter-chips[hidden] { display:none; }
.filter-chip {
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; min-height:34px;
  padding:7px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink-soft); font:400 12.5px var(--sans);
}
.filter-chip:hover { border-color:var(--brass); color:var(--ink); }
.filter-chip span { color:var(--brass-text); font-size:17px; line-height:1; }
.view-toggle {
  display:inline-grid; grid-template-columns:1fr 1fr; flex:0 0 auto;
  overflow:hidden; border:1px solid var(--ink); border-radius:999px;
}
.view-toggle button {
  min-width:66px; padding:9px 14px; border:0; background:transparent; color:var(--ink);
  font:500 12px var(--sans); letter-spacing:.08em; text-transform:uppercase;
}
.view-toggle button[aria-pressed="true"] { background:var(--ink); color:var(--ivory); }
.view-toggle button:disabled { cursor:not-allowed; opacity:.42; }
.availability-map-panel { margin:0 0 clamp(30px,4vw,46px); }
.availability-map-panel[hidden],
#availability-list-panel[hidden] { display:none; }
.availability-map-panel .avail-map { margin-bottom:0; }
.availability-map-panel .results-note { margin-top:14px; }

.mobile-action-bar { display:none; }

.ll-mid-cta { padding:clamp(42px,6vw,72px) 0; background:var(--ink); color:var(--ivory); }
.ll-mid-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.ll-mid-cta .eyebrow { color:var(--brass); margin-bottom:10px; }
.ll-mid-cta h2 { font-size:clamp(34px,4vw,54px); margin-bottom:8px; }
.ll-mid-cta p:not(.eyebrow) { color:rgba(250,249,246,.74); }
body[data-page="landlords"] .section { padding:clamp(54px,7vw,90px) 0; }
body[data-page="landlords"] .stat-row-lg .stat {
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--brass);
  padding:clamp(20px,2.5vw,30px);
}
body[data-page="landlords"] .ll-referral blockquote { font-size:clamp(21px,2.1vw,27px); line-height:1.42; }

/* Readability: preserve the uppercase system without the tiny, widely tracked feel. */
@media (min-width:961px) {
  .nav-links > a,
  .nav-item > a { font-size:13px; letter-spacing:.11em; }
}
.eyebrow { font-size:12.5px; letter-spacing:.2em; }
.btn { font-size:13px; letter-spacing:.14em; }
.text-link { font-size:13px; letter-spacing:.13em; }
.search-bar label,
.filter-bar label,
.form-grid label { font-size:11.5px; letter-spacing:.14em; }
.filter-bar .reset { font-size:12.5px; letter-spacing:.11em; }
.detail-specs div span,
.sticky-cta .avail { font-size:11.5px; letter-spacing:.14em; }
.stat-row .stat span,
.ll-referral figcaption span { letter-spacing:.14em; }
.media-links a { font-size:12px; letter-spacing:.12em; }

@media (max-width:1060px) {
  .availability-primary {
    grid-template-columns:minmax(220px,1.5fr) 1fr .8fr auto;
    grid-template-areas:"search hood beds more" "sort sort sort sort";
  }
  .availability-primary .ap-search { grid-area:search; }
  .availability-primary .ap-hood { grid-area:hood; }
  .availability-primary .ap-beds { grid-area:beds; }
  .availability-primary .ap-more { grid-area:more; }
  .availability-primary .ap-sort { grid-area:sort; max-width:330px; }
  .availability-more.filter-bar {
    grid-template-columns:1fr .7fr;
    grid-template-areas:"bldg baths" "price price" "reset reset";
  }
  .availability-more .fa-reset { justify-self:start; }
}
@media (max-width:860px) {
  .search-bar { grid-template-columns:1fr 1fr; }
  .search-bar .field:nth-child(3) { grid-column:1/-1; border-right:none; }
}
@media (max-width:700px) {
  .availability-primary {
    grid-template-columns:1fr 1fr;
    grid-template-areas:"search search" "hood beds" "more sort";
    padding:16px; gap:12px 10px;
  }
  .availability-primary .ap-sort { max-width:none; }
  .availability-more.filter-bar {
    grid-template-columns:1fr 1fr;
    grid-template-areas:"bldg baths" "price price" "reset reset";
    padding:16px;
  }
  .availability-more .field:first-child { grid-column:auto; }
  .availability-actions { align-items:flex-start; }
  .active-filter-chips { padding-bottom:6px; }
  .price-row { gap:8px; }
  .price-row .money { flex-basis:88px; }
  .ll-mid-cta .wrap { align-items:flex-start; flex-direction:column; }
  .ll-mid-cta .btn { width:100%; }

  body.has-mobile-action-bar { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .mobile-action-bar:not([hidden]) {
    position:fixed; z-index:1200; right:0; bottom:0; left:0; display:grid;
    grid-template-columns:1.25fr 1fr; gap:10px;
    padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border-top:1px solid var(--line); background:rgba(250,249,246,.97);
    box-shadow:0 -14px 34px rgba(20,22,26,.14); backdrop-filter:blur(14px);
  }
  .mobile-action-bar.single { grid-template-columns:1fr; }
  .mobile-action-bar .btn {
    min-height:50px; padding:13px 10px; display:inline-flex; align-items:center;
    justify-content:center; font-size:12px; letter-spacing:.09em;
  }
  .eyebrow { font-size:11.5px; letter-spacing:.16em; }
  .search-bar label,
  .filter-bar label,
  .form-grid label { font-size:11px; letter-spacing:.12em; }
}
@media (max-width:480px) {
  .availability-primary { grid-template-areas:"search search" "hood beds" "more more" "sort sort"; }
  .availability-more.filter-bar {
    grid-template-columns:1fr;
    grid-template-areas:"bldg" "baths" "price" "reset";
  }
  .availability-more .fa-price { min-width:0; }
  .availability-more .price-row { flex-wrap:wrap; }
  .availability-more .dual-range { flex-basis:100%; order:3; }
  .availability-actions { flex-direction:column-reverse; }
  .view-toggle { align-self:flex-end; }
}


/* On phones, the advanced Availability controls become a true bottom drawer. */
.filter-drawer-head,
.filter-drawer-backdrop { display:none; }
@media (max-width:700px) {
  body.filter-drawer-open { overflow:hidden; }
  .filter-drawer-backdrop:not([hidden]) {
    position:fixed; z-index:1290; inset:0; display:block; width:100%; height:100%;
    border:0; background:rgba(20,22,26,.48);
  }
  .availability-more.filter-bar:not([hidden]) {
    position:fixed; z-index:1300; right:0; bottom:0; left:0;
    display:grid; max-height:min(78svh,680px); overflow-y:auto;
    margin:0; padding:18px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0; box-shadow:0 -24px 70px rgba(20,22,26,.24);
    grid-template-areas:"head head" "bldg baths" "price price" "reset reset";
  }
  .filter-drawer-head {
    grid-area:head; display:flex; align-items:center; justify-content:space-between;
    padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .filter-drawer-head strong {
    font:500 22px var(--serif); letter-spacing:0; text-transform:none;
  }
  .filter-drawer-head button {
    border:0; background:transparent; color:var(--brass-text);
    font:500 12px var(--sans); letter-spacing:.1em; text-transform:uppercase;
  }
}
@media (max-width:480px) {
  .availability-more.filter-bar:not([hidden]) {
    grid-template-areas:"head" "bldg" "baths" "price" "reset";
  }
}


/* Mobile form ergonomics: prevent iOS zoom and keep every control comfortably tappable. */
@media (max-width:700px) {
  .availability-primary select,
  .availability-primary input[type="search"],
  .availability-more select,
  .availability-more input[type="number"] { font-size:16px; }
  .filter-chip,
  .view-toggle button,
  .availability-more .reset { min-height:44px; }
  .filter-drawer-head button { min-width:44px; min-height:44px; }
}


@media (max-width:700px) {
  .search-bar select,
  .search-bar input[type="number"] { font-size:16px; }
}


/* Keep the full-screen navigation above the detail-page conversion bar. */
@media (max-width:700px) {
  .site-header.open ~ .mobile-action-bar { display:none; }
}

/* Team emails on a phone were 13.5px text with no padding: a 30px-tall tap
   target. Give them a real row to tap (James, 2026-09-10). */
@media (max-width: 780px) {
  .team-card .team-mail { font-size: 15px; padding: 10px 0; margin-top: 4px; min-height: 44px;
    display: flex; align-items: center; border-top: 1px dashed var(--line); }
  .team-card .team-mail:active { color: var(--brass-text); }
}

/* ---- Review stars (testimonials) ------------------------------------------ */
.quote-stars { display: block; color: var(--brass); font-size: 20px; letter-spacing: 0.18em; margin-bottom: 14px; }
.google-badge + .quote-stars { margin-top: 14px; }

/* ---- Building-page map (Leaflet, replaces the Google iframe) -------------- */
.map-embed-live { position: relative; }
.map-embed-live::before { display: none; }
.map-embed-live .leaflet-container { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--sans); }

/* ---- About page team tiers ------------------------------------------------ */
.team-tier-title { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass-text); font-family: var(--sans); font-weight: 400; margin: 0 0 22px; }
.team-tier-section { padding-top: clamp(34px, 4vw, 56px); }
.team-tier-section .team-tier-title { margin-bottom: 18px; }

/* ---- Landlords page, rebuilt from the deck (2026-09-14) -------------------- */
.ll-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ll-about .prose p:last-child { color: var(--brass-text); font-style: italic; font-size: 15.5px; }
.ll-stats-2x2 { grid-template-columns: 1fr 1fr; gap: 26px 32px; text-align: left; }
.ll-stats-2x2 .stat { border-top: 1px solid var(--brass); padding-top: 18px; }
.ll-stats-2x2 .stat b { font-size: clamp(38px, 4vw, 56px); }
@media (max-width: 860px) { .ll-about { grid-template-columns: 1fr; } }

.ll-lede { max-width: 72ch; color: var(--ink-soft); font-size: 17px; margin: -6px 0 34px; }
.section.dark .ll-lede { color: rgba(250,249,246,0.72); }

.ll-metrics { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .ll-metrics { grid-template-columns: 1fr; } }
.ll-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ll-table caption { text-align: left; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); padding: 0 0 12px; }
.ll-table th, .ll-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.ll-table th { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; }
.ll-table td { font-size: 16px; }
.ll-table td.n { font-family: var(--serif); font-size: 22px; text-align: right; }
.ll-table th.n { text-align: right; }
.ll-bars { display: grid; gap: 18px; }
.ll-bars h3 { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--sans); font-weight: 400; margin: 0; }
.ll-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; align-items: center; gap: 14px; font-size: 14px; }
.ll-bar i { display: block; height: 14px; background: var(--brass); border-radius: 1px; }
.ll-bar.vol i { background: var(--ink); }
.ll-bar b { font-family: var(--serif); font-size: 18px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ll-bar { grid-template-columns: 92px minmax(0, 1fr) 56px; } }

.ll-cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
@media (max-width: 860px) { .ll-cases { grid-template-columns: 1fr; } }
.ll-case { border-top: 1px solid var(--brass); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.ll-case .ll-tag { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-text); }
.ll-case h3 { font-size: 28px; margin: 0; }
.ll-case p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }
.ll-case ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ll-case li { padding-left: 22px; position: relative; font-size: 15px; color: var(--ink-soft); }
.ll-case li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--brass); }
.ll-case li b { color: var(--ink); font-weight: 500; }
.ll-case details { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.ll-case summary { cursor: pointer; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); list-style: none; display: flex; justify-content: space-between; }
.ll-case summary::-webkit-details-marker { display: none; }
.ll-case summary::after { content: "+"; color: var(--brass); font-size: 18px; line-height: 1; }
.ll-case details[open] summary::after { content: "−"; }
.ll-case .ll-cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 14px; }
@media (max-width: 560px) { .ll-case .ll-cs-cols { grid-template-columns: 1fr; } }
.ll-case .ll-cs-cols h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 8px; font-weight: 400; }

.ll-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
@media (max-width: 960px) { .ll-results { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ll-results { grid-template-columns: 1fr; } }
.ll-result { border-top: 1px solid rgba(250,249,246,0.18); padding-top: 20px; }
.ll-result .ll-tag { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 8px; }
.ll-result h3 { font-size: 24px; margin: 0 0 12px; }
.ll-result ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ll-result li { color: rgba(250,249,246,0.7); font-size: 15px; padding-left: 18px; position: relative; }
.ll-result li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 1px; background: var(--brass); }
.ll-result li b { color: var(--ivory); font-weight: 500; }

.ll-network { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 860px) { .ll-network { grid-template-columns: 1fr; } }
.ll-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ll-perks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 14px 18px; background: var(--sand); border-left: 2px solid var(--brass); font-size: 15px; }
.ll-perks li b { font-family: var(--serif); font-size: 19px; font-weight: 500; display: block; }
.ll-perks li span { color: var(--ink-mute); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }

.ll-share { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 640px) { .ll-share { grid-template-columns: 1fr; justify-items: start; } }
.ll-donut { width: 220px; height: 220px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--ink) 0 90.5%, var(--brass) 90.5% 97.6%, #c9b58a 97.6% 100%); }
.ll-donut::after { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: var(--ivory); }
.section.tinted .ll-donut::after { background: var(--sand); }
.ll-donut b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; }
.ll-donut b small { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; font-weight: 400; }
.ll-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ll-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 16px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ll-legend i { width: 14px; height: 14px; display: block; }
.ll-legend b { font-family: var(--serif); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ll-legend .note { grid-column: 1 / -1; border: 0; background: none; padding: 0; font-size: 13px; color: var(--ink-mute); }

/* Deck photos on the landlords page (extracted from Full Aura Deck V3). */
.ll-photo { margin: 0 0 4px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--sand); max-width: 100%; }
.ll-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-case .ll-photo { order: -1; }
.ll-photo-tile { aspect-ratio: 4 / 3; margin-bottom: 14px; }

/* Review pager for long Google review lists (replaces the dots past 8). */
.quote-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.quote-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.quote-nav button:hover, .quote-nav button:focus-visible { border-color: var(--brass); color: var(--brass-text); }
.section.dark .quote-nav { color: rgba(250,249,246,0.6); }
.section.dark .quote-nav button { border-color: rgba(250,249,246,0.3); color: var(--ivory); }
.quote-block blockquote { font-size: clamp(20px, 2.2vw, 26px); }

/* ---- Reviews: constant-height stage (2026-09-15) --------------------------
   All quotes are stacked in one grid cell; only .on is visible. The stage is
   as tall as the longest quote, so paging never shifts the page. */
.quote-stage { display: grid; }
.quote-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; align-self: start; }
.quote-slide.on { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
.quote-slide blockquote { margin-bottom: 22px; }
/* Long reviews set smaller, so the tallest slide does not dwarf the short ones. */
.quote-slide.long blockquote { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }

/* ---- Team: one uniform circular card for every tier (2026-09-15) ---------
   James: "circular icons and same size ... and don't have a widow". Both
   tiers share the same card; main.js sets the column count per tier so the
   last row is always full. */
.team-grid, .team-grid.compact { gap: 34px 24px; }
.team-card, .team-grid.compact .team-card { border-top: 0; padding-top: 0; text-align: center; }
.team-card .team-photo, .team-grid.compact .team-card .team-photo,
.team-card .monogram, .team-grid.compact .team-card .monogram {
  width: min(100%, 168px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  margin: 0 auto 16px; overflow: hidden;
}
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.team-card .monogram, .team-grid.compact .team-card .monogram { font-size: 34px; display: flex; align-items: center; justify-content: center; background: var(--sand); color: var(--ink-soft); border: 1px solid var(--line); }
.team-card h3, .team-grid.compact .team-card h3 { font-size: 20px; line-height: 1.25; }
.team-card span, .team-grid.compact .team-card span { font-size: 10.5px; letter-spacing: 0.2em; }
.team-card .team-mail, .team-grid.compact .team-card .team-mail { font-size: 12px; margin-top: 6px; }
@media (max-width: 480px) {
  .team-card .team-photo, .team-grid.compact .team-card .team-photo,
  .team-card .monogram, .team-grid.compact .team-card .monogram { width: 132px; }
  .team-card h3, .team-grid.compact .team-card h3 { font-size: 17px; }
  /* The older phone rule gave the email a dashed rule and left alignment; the
     circular card is centered, so keep the 44px tap target and drop the rest. */
}
/* The 780px phone rule above makes the email a flex row with a dashed top
   border; the circular card is centered, so keep the 44px tap target only. */
@media (max-width: 780px) {
  .team-card .team-mail { border-top: 0; justify-content: center; text-align: center; }
}

/* ---- Services: nav dropdown + the two-door chooser (2026-09-25) ------------ */

/* The Services menu is two lines, not a two-column building list. */
.nav-menu-sm { min-width: 300px; padding: 14px 16px 12px; }
.nav-menu-sm .nav-menu-list { column-count: 1; padding-bottom: 0; }
.nav-menu-sm .nav-menu-list a { padding: 10px 12px; }
@media (hover: hover) and (min-width: 961px) {
  .nav-item-services:hover::after,
  .nav-item-services.open::after { width: 300px; }
}
/* Inside the phone menu the panel is an inline accordion; the desktop
   padding above would leave a visible gap while it is collapsed. */
@media (max-width: 960px) {
  .nav-menu-sm { padding: 0; min-width: 0; }
  .nav-menu-sm .nav-menu-list a { padding: 11px 0; }
}

/* /services: one card per offering, the whole card is the link. */
.svc-choice { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 44px); }
.svc-card { display: block; color: inherit; text-decoration: none; }
.svc-card .svc-media { aspect-ratio: 5 / 3; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.svc-card .svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover .svc-media img { transform: scale(1.045); }
.svc-card .svc-body { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 22px; }
.svc-card .eyebrow { margin-bottom: 10px; }
.svc-card h2 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 10px; }
.svc-card p:not(.eyebrow) { color: var(--ink-soft); font-size: 16px; margin-bottom: 16px; max-width: 46ch; }
.svc-card .text-link { display: inline-block; }
.svc-card:hover .text-link { color: var(--brass-dark); }
.svc-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; border-radius: var(--radius); }
@media (max-width: 860px) {
  .svc-choice { grid-template-columns: 1fr; gap: 36px; }
  .svc-card .svc-media { aspect-ratio: 16 / 10; }
}