:root {
    /* Type system — Adobe Fonts family names (see style guide), except
       --font-accent which is Inter Tight (Google Fonts, weight 400). */
    --font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;   /* all headings + display figures */
    --font-accent:  'Inter Tight', 'Helvetica Neue', Arial, sans-serif;  /* italic / quote accents, bold */
    --font-body:    'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  /* Backstop, not a fix for any specific section: one overflowing element
     anywhere on a page this long (20+ sections) otherwise widens the whole
     document and every section shifts/clips on mobile, not just the one
     that's actually too wide. Real overflow sources still get fixed at the
     source; this just keeps a future one from taking the whole page down.
     Scoped to body only: giving html any explicit overflow stops the browser
     from letting body's overflow control page scroll, which silently broke
     every modal's scroll lock (fcLockScroll only ever sets body.style.overflow). */
  body { overflow-x: hidden; }
  body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--mist);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -0.01em;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }

  /* uploaded header/footer */
  .header-img, .footer-img { width: 100%; display: block; }

  .page { margin: 0 auto; }

  /* ACF background-video support: any section that can take a background
     image (hero, map fallback, testimonials, CTA banner, green split,
     amenity cards) can instead take a video. isolation:isolate keeps the
     injected <video>'s negative z-index contained to its own section
     instead of escaping to an ancestor stacking context. */
  .fc-has-bg-video { isolation: isolate; }
  .fc-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
  }
  .hero .fc-bg-video { filter: brightness(0.63); }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: #0f1814;
    /* Horizontal inset comes from .hero-inner's frame gutter only. */
    padding-left: 0;
    padding-right: 0;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1800&q=80');
    background-size: cover;
    background-position: center;
    filter: brightness(0.63);
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Holds dark to where the one-line accent ("...Eco-Community") ends,
       roughly 76% of a 1440px screen, then clears to the right edge. */
    background: linear-gradient(90deg, rgba(15,24,20,0.65) 0%, rgba(15,24,20,0.56) 50%, rgba(15,24,20,0.4) 76%, transparent 100%);
  }
  .hero-inner {
    position: relative;
    z-index: 2;
    /* Same frame as the header and .search-wrap (--fc-frame-* in style.css),
       so the headline lines up with the logo and the search card. */
    max-width: calc(var(--fc-frame-max) + 2 * var(--fc-frame-gutter));
    margin: 0 auto;
    padding: 90px var(--fc-frame-gutter) 160px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
  }
  .hero .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--mist);
    margin-bottom: 22px;
    font-weight: 500;
  }
  .hero h1 {
    font-size: 70px;
    color: #fff;
    max-width: 720px;
    margin-bottom: 24px;
    font-weight: 300;
    line-height: 1em;
  }
  .hero h1 em, .hero h1 b {
    font-family: var(--font-accent);
    color: var(--green);
    font-weight: 400;
  }
  .hero h1 b { font-size: 66px; }
  .hero p {
    font-size: 18px;
    max-width: 540px;
    margin-bottom: 38px;
    color: rgba(255,255,255,0.9);
    line-height: 1.55;
  }
  .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
  a.btn, a.btn:visited, a.btn:link, a.btn:hover, a.btn:focus {
    text-decoration: none !important;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-family: inherit;
    text-decoration: none !important;
  }
  .btn-primary, a.btn-primary, a.btn-primary:visited, a.btn-primary:hover {
    background: var(--green) !important;
    color: #fff !important;
    border: 1.5px solid var(--green) !important;
  }
  .btn-primary:hover, a.btn-primary:hover {
    background: var(--green-dark) !important;
    border-color: var(--green-dark) !important;
    transform: translateY(-2px);
  }
  .btn-outline, a.btn-outline, a.btn-outline:visited {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.6) !important;
  }
  .btn-outline:hover, a.btn-outline:hover {
    background: #fff !important;
    color: var(--ink) !important;
    border-color: #fff !important;
  }
  .btn-dark, a.btn-dark { background: var(--ink) !important; color: #fff !important; }
  .btn-dark:hover, a.btn-dark:hover { background: var(--green-dark) !important; }
  .btn-green, a.btn-green, a.btn-green:visited { background: var(--green) !important; color: #fff !important; }
  .btn-green:hover, a.btn-green:hover { background: var(--green-dark) !important; }
  /* Heritage Purple accent — kept intentional for the sustainability CTA even
     though the site's main accent unified to green. */
  .btn-purple, a.btn-purple, a.btn-purple:visited { background: #6B3E8F !important; color: #fff !important; }
  .btn-purple:hover, a.btn-purple:hover { background: #5B357A !important; }
  /* Press feedback: cancel the hover lift and compress slightly. Faster in
     (0.1s) than out, so the press reads as instant. */
  .btn:active,
  a.btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
  }

  /* ============ SEARCH BAR ============ */
  .search-wrap {
    max-width: calc(var(--fc-frame-max) + 2 * var(--fc-frame-gutter));
    margin: -55px auto 0;
    padding: 0 var(--fc-frame-gutter);
    position: relative;
    z-index: 5;
  }
  .search-bar {
    background: #fff;
    padding: 26px 30px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.25fr) minmax(185px, 1fr) minmax(300px, 1.4fr) minmax(190px, auto) !important;
    gap: 22px 20px !important;
    align-items: end;
    box-shadow: 0 20px 60px rgba(31, 36, 25, 0.12), 0 1px 3px rgba(0,0,0,0.04);
    border-top: 3px solid var(--green);
  }
  .field-group label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--warm-gray);
    margin-bottom: 8px;
    font-weight: 600;
  }
  .field-group select, .field-group input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 32px 10px 0 !important;
    line-height: 1.25;
    border: none;
    border-bottom: 1.5px solid var(--line);
    background: transparent;
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234a7c3a' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    box-sizing: border-box;
  }
  .field-group select {
    overflow: visible;
    text-overflow: clip;
    color-scheme: light;
  }
  /* Windows (Chrome/Edge) renders the native option popup itself and honors
     padding/background-color/color on <option>, unlike macOS which ignores
     them, so the popup looks cramped there without this. */
  .field-group select option {
    padding: 10px 14px;
    background-color: #fff;
    color: var(--ink);
  }
  .field-group input {
    background-image: none;
    cursor: text;
    padding-right: 8px !important;
  }

  /* Custom listbox that replaces the native <select> only on fine-pointer
     (mouse/trackpad) devices — see finney-custom-select.js. Chromium can't
     restyle a native select's border-radius/shadow or its selected/hovered
     row (always OS blue), so mouse users get this instead; touch devices
     never run the enhancement and keep the native OS picker untouched. */
  .cs-wrap {
    position: relative;
    width: 100%;
  }
  .cs-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* !important throughout: Astra's dynamic customizer CSS styles every
     <button> with the site's accent button color, at higher priority than
     this stylesheet's normal cascade position can beat on its own. */
  .cs-trigger {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 32px 10px 0 !important;
    line-height: 1.25;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1.5px solid var(--line) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234a7c3a' stroke-width='1.5' fill='none'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: normal !important;
    color: var(--ink) !important;
    text-align: left;
    text-transform: none !important;
    cursor: pointer;
  }
  .cs-trigger:hover {
    background-color: transparent !important;
    color: var(--ink) !important;
  }
  .cs-trigger:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }
  .cs-wrap.is-open .cs-trigger {
    border-bottom-color: var(--green) !important;
  }
  .cs-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(31, 36, 25, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
    scrollbar-width: thin;
    scrollbar-color: var(--green) var(--mist);
  }
  /* Same scrollbar as the crossroads map list (.loc-list). */
  .cs-list::-webkit-scrollbar { width: 8px; }
  .cs-list::-webkit-scrollbar-track { background: var(--mist); }
  .cs-list::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 4px;
  }
  .cs-list::-webkit-scrollbar-thumb:hover { background: var(--ink); }
  .cs-option {
    padding: 10px 12px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
  }
  .cs-option.is-active {
    background-color: var(--green-pale);
  }
  .cs-option.is-selected {
    color: var(--green-dark);
    font-weight: 600;
  }
  .field-group input.search-move-in,
  .field-group input[type="date"] {
    min-width: 185px !important;
    min-height: 46px;
    padding: 12px 34px 10px 0 !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--line) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 16px 16px !important;
    font-family: var(--font-display);
    font-size: 17px;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    color-scheme: light;
  }
  .field-group input[type="date"]::-webkit-datetime-edit,
  .field-group input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  .field-group input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
  }
  .field-group input[type="date"]::-webkit-calendar-picker-indicator {
    width: 36px;
    height: 100%;
    margin: 0 -34px 0 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Zillow-style min/max price range */
  .price-range {
    display: grid;
    grid-template-columns: minmax(126px, 1fr) auto minmax(126px, 1fr) !important;
    align-items: center;
    gap: 8px;
    min-width: 290px !important;
  }
  .price-range select {
    font-size: 15px;
    min-height: 46px;
    padding: 12px 32px 10px 0 !important;
  }
  .price-range .cs-trigger {
    font-size: 15px !important;
  }
  .price-range .price-sep {
    color: var(--warm-gray);
    font-family: var(--font-display);
    font-size: 18px;
    padding: 0 2px;
  }
  .search-btn {
    padding: 14px 32px;
    min-width: 200px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    height: 48px;
    font-family: inherit;
  }
  .search-btn:hover { background: var(--green-dark); }

  /* Zillow-style datepicker popup */
  .ui-datepicker {
    z-index: 99999 !important;
    width: 316px;
    padding: 14px;
    border: 1px solid rgba(31, 36, 25, 0.18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(31, 36, 25, 0.12) inset, 0 12px 32px rgba(31, 36, 25, 0.18);
    font-family: var(--font-body);
    color: var(--ink);
  }
  .ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 36px 10px;
    border: 0;
    background: transparent;
  }
  .ui-datepicker .ui-datepicker-title {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    top: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }
  .ui-datepicker .ui-datepicker-prev { left: 0; }
  .ui-datepicker .ui-datepicker-next { right: 0; }
  .ui-datepicker .ui-datepicker-prev:hover,
  .ui-datepicker .ui-datepicker-next:hover {
    border-color: var(--green);
    background: rgba(74, 124, 58, 0.08);
  }
  .ui-datepicker .ui-datepicker-prev span,
  .ui-datepicker .ui-datepicker-next span {
    display: none;
  }
  .ui-datepicker .ui-datepicker-prev::before,
  .ui-datepicker .ui-datepicker-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--green);
    border-left: 2px solid var(--green);
  }
  .ui-datepicker .ui-datepicker-prev::before {
    transform: translate(-35%, -50%) rotate(-45deg);
  }
  .ui-datepicker .ui-datepicker-next::before {
    transform: translate(-65%, -50%) rotate(135deg);
  }
  .ui-datepicker table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 3px;
    border-width: 0px !important;
    font-size: 13px;
  }
  .ui-datepicker th {
    padding: 6px 0;
    color: var(--warm-gray);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
  }
  .ui-datepicker td {
    padding: 0;
    border: 0;
  }
  .ui-datepicker td span,
  .ui-datepicker td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    padding: 0;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--ink) !important;
    text-align: center;
    text-decoration: none !important;
  }
  .ui-datepicker td a:hover {
    background: rgba(74, 124, 58, 0.10) !important;
    color: var(--green-dark) !important;
  }
  .ui-datepicker .ui-datepicker-current-day a,
  .ui-datepicker .ui-state-active {
    background: var(--green) !important;
    color: #fff !important;
    font-weight: 700;
  }
  .ui-datepicker .ui-datepicker-today a {
    box-shadow: inset 0 0 0 1px var(--green);
  }
  .ui-datepicker .ui-datepicker-other-month span,
  .ui-datepicker .ui-datepicker-other-month a,
  .ui-datepicker .ui-state-disabled span {
    color: rgba(107, 110, 99, 0.38) !important;
  }
  /* Today / Done button row */
  .ui-datepicker .ui-datepicker-buttonpane {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 12px -2px 0;
    padding: 12px 2px 0;
    border-top: 1px solid var(--line);
  }
  /* Today / Done — primary (Today) + secondary (Done) pair, brand styled. */
  .ui-datepicker .ui-datepicker-buttonpane button,
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
    flex: 1 1 0;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 16px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  /* Primary — Today (matches .search-btn). */
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
  }
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
  }
  /* Secondary — Done (outlined). */
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
    background: #fff;
    border-color: var(--green);
    color: var(--green-dark);
  }
  .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover {
    background: rgba(74, 124, 58, 0.08);
  }

  /* ============ SECTION BASICS ============ */
  section { padding: 110px 60px; }
  .section-head { text-align: center; max-width: 720px; margin: 0 auto 70px; }
  .section-head .eyebrow {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--green);
    margin-bottom: 18px;
    font-weight: 600;
  }
  .section-head h2 {
    font-size: 54px;
    margin-bottom: 20px;
    color: var(--ink);
  }
  .section-head h2 em, .section-head h2 b { font-family: var(--font-accent); font-weight: 300; color: var(--green); font-size: 51px; }
  .section-head p {
    font-size: 17px;
    color: var(--warm-gray);
    line-height: 1.7;
  }

  /* Inline text links inside body copy (section text, split-text) */
  .section-head p a,
  .split-text p a {
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
  }
  .section-head p a:hover,
  .split-text p a:hover {
    color: var(--green-dark);
  }

  /* ============ VALUES (4-col) ============ */
  #why { display: none; }
  .values-section { background: var(--mist); }
  .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; max-width: 1280px; margin: 0 auto; }
  .value {
    text-align: center;
  }
  .value-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    color: var(--green);
  }
  .value-icon svg { width: 32px; height: 32px; }
  .value h3 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .value p {
    font-size: 14.5px;
    color: var(--warm-gray);
    line-height: 1.65;
  }

  /* Every carousel's prev/next button shares this class (values, listings,
     amenities, testimonials, news). touch-action: manipulation drops the
     ~300ms double-tap-to-zoom delay mobile browsers apply to buttons by
     default — tapping the same arrow twice in quick succession (to skip
     two cards at once) was being read as a double-tap and zooming the
     whole page instead of just scrolling the carousel. */
  button.values-nav { touch-action: manipulation; }

  /* ============ VALUES — CAROUSEL (Patagonia-style) ============ */
  /* Section head stays boxed/centered (inherits the default .section-head). */
  /* Full-bleed cards: keep the left edge at the section gutter, run the track off
     the right viewport edge so the next card is cut off like Patagonia. */
  .values-carousel {
    position: relative;
    margin-right: -60px;
  }

  /* Eyebrow-style header above the cards */
  .values-carousel__header { margin-bottom: 22px; }
  .values-carousel__title {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--green);
    font-weight: 600;
  }

  /* Viewport gives the nav arrows a positioning context aligned to the cards */
  .values-carousel__viewport { position: relative; }
  .values-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* Cards used to drift up/down inside the track on touch: overflow-x:auto
       with overflow-y left at visible computes overflow-y to auto, making the
       track its own vertical scroller over the padding below, so a vertical
       swipe scrolled the track instead of the page. Pinning overflow-y to
       hidden removes that scroller at the source. touch-action then only
       needs to rule out pinch/double-tap zoom — it must keep pan-y, or the
       browser swallows vertical swipes here rather than scrolling the page. */
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    /* Generous top/bottom padding: overflow-y is clipped (above), so this
       keeps the hover lift (top corners) and the drop shadow (bottom) from being
       cut. The hover shadow (0 18px 40px) needs ~58px of room below the card —
       64px leaves a small margin. */
    padding: 24px 2px 64px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .values-track::-webkit-scrollbar { display: none; }
  /* Mouse/trackpad drag-to-scroll, added by carousel-drag.js; touch already
     scrolls these natively. */
  .values-track { cursor: grab; }
  .values-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
  .value-card {
    flex: 0 0 320px;
    height: 460px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, opacity 0.5s ease;
  }
  .value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(31, 36, 25, 0.12);
  }
  .value-card__media {
    position: relative;
    flex: 0 0 30%;
    background: #e7e2d7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* A — image zoom on hover (clipped by the rounded media frame) */
  .value-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .value-card:hover .value-card__img { transform: scale(1.06); }
  .value-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    color: var(--green);
  }
  .value-card__icon svg { width: 28px; height: 28px; }
  .value-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 26px 24px;
    flex: 1;
  }
  .value-card__meta {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
  }
  .value-card__title { font-size: 26px; line-height: 1em; }
  .value-card__text {
    font-size: 14.5px;
    color: var(--warm-gray);
    line-height: 1.6;
  }
  .value-card .value-card__cta,
  .value-card a.value-card__cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 7px 16px;
    background: var(--ink) !important;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #fff !important;
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  .value-card a.value-card__cta:hover { background: #000 !important; color: #fff !important; transform: translateY(-1px); }

  /* C — CTA hidden until hover/focus (only where hover is available) */
  @media (hover: hover) {
    .value-card .value-card__cta,
    .value-card a.value-card__cta {
      opacity: 0;
      transform: translateY(8px);
    }
    .value-card:hover .value-card__cta,
    .value-card:focus-within .value-card__cta {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* F — staggered fade-up entrance (auto-plays, so gate behind reduced-motion) */
  @media (prefers-reduced-motion: no-preference) {
    .values-section--carousel .value-card {
      opacity: 0;
      transform: translateY(28px);
    }
    .values-section--carousel .value-card.is-in {
      opacity: 1;
      transform: none;
    }
    .values-section--carousel .value-card.is-in:hover {
      transform: translateY(-4px);
    }
  }

  /* Nav arrows — white circle floating over the image band, like Patagonia.
     High specificity + !important to override Elementor kit button resets. */
  .values-section--carousel .values-carousel__viewport button.values-nav {
    position: absolute;
    top: calc(24px + 460px / 2);
    transform: translateY(-50%);
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #fff !important;
    color: var(--ink) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(31, 36, 25, 0.22) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
  }
  .values-section--carousel .values-carousel__viewport button.values-nav svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
  }
  .values-section--carousel .values-carousel__viewport button.values-nav--prev { left: -28px; }
  .values-section--carousel .values-carousel__viewport button.values-nav--next { right: 28px; }
  .values-section--carousel .values-carousel__viewport button.values-nav:hover {
    transform: translateY(-50%) scale(1.06);
    background: #fff !important;
    box-shadow: 0 6px 22px rgba(31, 36, 25, 0.28) !important;
  }
  .values-section--carousel .values-carousel__viewport button.values-nav:disabled {
    opacity: 0;
    pointer-events: none;
  }


  /* ============ FIND YOUR HOME — LIVE LISTINGS CAROUSEL ============ */
  /* This is the "Find your home" section: live AppFolio availability, styled
     with the same .card design a static mockup grid used to render here.
     Rides the values carousel's track/nav-arrow scaffolding
     (.values-section--carousel, .values-track, .values-carousel__viewport…);
     only the track-fitting pieces — card width, arrow height — live here. */

  .listings-section { background: var(--mist); }

  /* Sits right under the floating search bar (.search-wrap) — the base
     110px section padding plus the 70px section-head margin left too much
     air between the two, so both are trimmed here. */
  .listings-section { padding-top: 70px; }
  .listings-section .section-head { margin-bottom: 40px; }

  /* Only a handful of cards, so keep the track centred instead of running it off
     the right edge. `safe` keeps the first card reachable once it does overflow;
     browsers without it fall back to flex-start, which is also fine. */
  .listings-section .values-carousel { margin-right: 0; }
  .listings-section .values-track { justify-content: safe center; }

  /* .card has no intrinsic width outside the "Find your home" grid — give each
     slide a fixed track width, matching the values carousel's card sizing. */
  .listings-section .card.listing-card {
    flex: 0 0 360px;
    scroll-snap-align: start;
  }

  /* Staggered fade-up entrance on scroll into view, same as the values carousel
     (which keys off .value-card — these slides are .card, so they need their
     own copy of the same before/after state). */
  @media (prefers-reduced-motion: no-preference) {
    .listings-section .card.listing-card {
      opacity: 0;
      transform: translateY(28px);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, opacity 0.5s ease;
    }
    .listings-section .card.listing-card.is-in { opacity: 1; transform: none; }
    .listings-section .card.listing-card.is-in:hover { transform: translateY(-4px); }
  }

  /* Centre the arrows on the full card (photo + body — roughly 541px tall
     end to end), not just the .card-img photo band, so they sit level with
     the card row instead of riding high over the photo. Also deepen the
     shadow so the circles read clearly against the photos behind them. */
  .listings-section .values-carousel__viewport button.values-nav {
    top: calc(24px + 541px / 2);
    box-shadow: 0 10px 30px rgba(31, 36, 25, 0.4) !important;
  }
  .listings-section .values-carousel__viewport button.values-nav:hover {
    box-shadow: 0 12px 36px rgba(31, 36, 25, 0.46) !important;
  }

  /* The track already carries 40px of bottom padding for the hover lift. */
  .listings-section .all-link { margin-top: 10px; }

  /* Shown instead of the carousel when AppFolio has no available units. */
  .listings-empty {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
  }
  .listings-empty__text {
    font-size: 17px;
    color: var(--warm-gray);
    line-height: 1.7;
    margin-bottom: 28px;
  }

  /* ============ SPLIT — VERMONT GREEN ============ */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
  }
  .split-img {
    background-size: cover;
    background-position: center;
    min-height: 620px;
  }
  .split--overlay .split-img {
    position: relative;
    display: flex;
    align-items: flex-end;
  }
  .split-text {
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .split-text .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--green);
    margin-bottom: 18px;
    font-weight: 600;
  }
  .split-text h2 {
    font-size: 54px;
    margin-bottom: 24px;
  }
  .split-text h2 em, .split-text h2 b { font-family: var(--font-accent); font-weight: 300; color: var(--green); font-size: 51px; }
  .split-text p {
    font-size: 16px;
    color: var(--warm-gray);
    margin-bottom: 18px;
    line-height: 1.75;
  }
  /* Since the stats moved into the overlay badge/bar on the photo, the CTA
     now follows copy directly with nothing to space it out — give it its
     own breathing room instead of relying on the last <p>'s margin alone. */
  .split-text__cta {
    margin-top: 14px;
  }
  .stat-grid--overlay {
    margin: 0 24px 24px;
    width: calc(100% - 48px);
    display: flex;
    /* flex (not a fixed 3-col grid) so a 4th tile fits evenly without
       needing a separate layout. */
    background: rgba(31, 36, 25, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    overflow: hidden;
  }
  .stat-grid--overlay .stat {
    flex: 1 1 0;
    position: relative;
    padding: 24px 20px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.16);
  }
  .stat-grid--overlay .stat:last-child { border-right: none; }
  .stat-grid--overlay .num {
    font-family: var(--font-display);
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
  }
  .stat-grid--overlay .lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
  }
  /* Scroll-triggered entrance, same treatment as .amenity-card: rise, sharpen
     out of a soft blur and settle with the same decelerated ease, staggered
     left-to-right so the row reads as one unfolding motion. */
  @media (prefers-reduced-motion: no-preference) {
    .stat-grid--overlay .stat {
      opacity: 0;
      transform: translateY(42px) scale(0.94);
      filter: blur(10px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity, filter;
    }
    .stat-grid--overlay .stat.is-in {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
  }
  /* ============ SUSTAINABILITY POPUP (bento stat grid) ============
     Opened from the Vermont Green section's "Learn More" button. Same
     fixed-backdrop modal shell as .testi-modal (assets/testimonials.css),
     with its own high z-index so it's never trapped under the mobile menu
     (9999) or any other overlay on the page. */
  .fc-sustain-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .fc-sustain-modal[hidden] { display: none; }
  .fc-sustain-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,20,12,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .fc-sustain-modal.is-open .fc-sustain-modal__backdrop { opacity: 1; }
  /* The panel itself no longer scrolls — its inner __scroll child does, so
     the close button (absolute, below) stays pinned to the panel's corner
     instead of sliding away with the content. overflow:hidden keeps that
     scrolling child inside the rounded corners. */
  .fc-sustain-modal__panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--mist);
    color: var(--ink);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .fc-sustain-modal__scroll {
    overflow-y: auto;
    /* Without this, scrolling past the top/bottom of this panel's own
       scroll chains to the page behind it. */
    overscroll-behavior: contain;
    padding: 48px;
  }
  .fc-sustain-modal.is-open .fc-sustain-modal__panel {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .fc-sustain-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 0;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .fc-sustain-modal__close:hover { background: #222; }
  .fc-sustain-modal__close svg { width: 16px; height: 16px; stroke: #fff; }
  .fc-sustain-modal__head {
    max-width: 60ch;
    margin-bottom: 28px;
  }
  .fc-sustain-modal__head .eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--green-dark);
  }
  .fc-sustain-modal__head h2 {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1.1em;
    margin: 8px 0;
    color: var(--ink);
  }
  .fc-sustain-modal__head h2 b, .fc-sustain-modal__head h2 em {
    font-family: var(--font-accent);
    font-weight: 300;
    color: var(--green);
  }
  .fc-sustain-modal__head p {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(31,36,25,0.72);
    margin: 0;
  }

  /* Bento grid: dense auto-flow lets a "wide" card fill 2 columns and a
     "tall" card fill 2 rows without leaving gaps in the surrounding cells. */
  .fc-sustain-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
    gap: 14px;
  }
  .fc-sustain-bento__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 22px 24px;
    border-radius: 18px;
    overflow: hidden;
  }
  .fc-sustain-bento__card--wide { grid-column: span 2; }
  .fc-sustain-bento__card--tall { grid-row: span 2; justify-content: flex-end; }
  .fc-sustain-bento__card--green {
    background: var(--green);
    color: #fff;
  }
  .fc-sustain-bento__card--slate {
    background: var(--fc-slate-900);
    color: #fff;
  }
  .fc-sustain-bento__card--mist {
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(31,36,25,0.1);
  }
  .fc-sustain-bento__num {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1em;
  }
  .fc-sustain-bento__card--tall .fc-sustain-bento__num { font-size: 56px; }
  .fc-sustain-bento__lbl {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.85;
  }
  .fc-sustain-bento__desc {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
    opacity: 0.78;
    max-width: 32ch;
  }

  @media (max-width: 921px) {
    /* The sticky mobile header sits on top of the viewport at a fixed
       height (--fc-mobile-header-h, set by mobile-menu.js); centering the
       modal on the full viewport let it start underneath that header, and
       the backdrop covered the header too, blurring/dimming it even though
       the header's own z-index (100) sits under the modal's (100000). */
    .fc-sustain-modal {
      align-items: flex-start;
      padding: calc(var(--fc-mobile-header-h, 60px) + 16px) 24px 24px;
    }
    .fc-sustain-modal__backdrop {
      top: var(--fc-mobile-header-h, 60px);
    }
    .fc-sustain-modal__panel {
      max-height: calc(100vh - var(--fc-mobile-header-h, 60px) - 32px);
    }
  }

  @media (max-width: 760px) {
    .fc-sustain-modal__panel { border-radius: 18px; }
    .fc-sustain-modal__scroll { padding: 32px 24px; }
    .fc-sustain-modal__head h2 { font-size: 28px; }
    .fc-sustain-bento {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: minmax(108px, auto);
    }
    /* Every card back to 1x1 on mobile — the bento layout's uneven cell
       sizes only work with room to breathe; on a phone they just make cards
       an inconsistent, cramped size. */
    .fc-sustain-bento__card--wide,
    .fc-sustain-bento__card--tall {
      grid-column: span 1;
      grid-row: span 1;
      justify-content: center;
    }
    .fc-sustain-bento__num { font-size: 32px; }
    .fc-sustain-bento__card--tall .fc-sustain-bento__num { font-size: 32px; }
    .fc-sustain-bento__desc { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fc-sustain-modal__backdrop, .fc-sustain-modal__panel { transition: none; }
  }

  /* ============ APARTMENT CARD ============ */
  /* Used by the "Find your home" live listings carousel (.listings-section)
     further down the page — see that section's own CSS block for the
     track/carousel-fitting rules. */
  .card {
    background: #fff;
    overflow: hidden;
    border-radius: var(--fc-radius-card);
    box-shadow: var(--fc-shadow-rest);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-hover); }
  .card-img {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    color: var(--green-dark);
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .card-body { padding: 24px 26px 28px; }
  .card-body h3 {
    font-size: 24px;
    margin-bottom: 6px;
  }
  /* The unit, in the accent face and green, as on the results grid and the
     single listing's title. */
  .card-body h3 b {
    font-family: var(--font-accent);
    font-weight: 400;
    color: var(--green);
  }
  .card-body .addr {
    font-size: 12.5px;
    color: var(--warm-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
  }
  /* Same spec row as the results grid and the single listing: green icon,
     the figure in bold, the unit in the regular weight. */
  .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
  }
  .card-meta .m {
    font-size: 13px;
    color: var(--warm-gray);
    display: flex;
    /* Baseline so the bold figure and the regular label share one line;
       the icon alone is centered (below). */
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }
  .card-meta .m strong {
    color: var(--ink);
    font-weight: 600;
  }
  .card-meta .m svg {
    flex: none;
    align-self: center;
    width: 16px;
    height: 16px;
    color: var(--green);
  }
  .price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .price {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--ink);
  }
  .price small {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--warm-gray);
    font-weight: 400;
    margin-left: 4px;
  }
  .view-link {
    color: var(--green);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .card-cta,
  a.card-cta,
  a.card-cta:visited {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--fc-slate-900) !important;
    color: #fff !important;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    text-decoration: none !important;
  }
  .card-cta:hover,
  .card-cta:focus,
  a.card-cta:hover,
  a.card-cta:focus {
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
  }
  .all-link {
    text-align: center;
    margin-top: 50px;
  }
  .all-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--green);
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .all-link a:hover { background: var(--green-dark); color: #fff; }

  /* ============ AMENITIES — Apple-inspired cards ============ */
  .amenities-section { background: var(--mist); }
  /* Grid by default (desktop through tablet); becomes a horizontal-scroll
     carousel — same viewport/nav-arrow scaffolding as the Why Finney
     Crossing / Find Your Home carousels — only at the mobile breakpoint
     below. Nav arrows stay hidden until then since there's nothing to scroll. */
  .amenities-carousel .values-carousel__viewport { position: relative; }
  .amenities-carousel .values-nav { display: none; }
  .amenities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .amenity-card {
    position: relative;
    background: linear-gradient(160deg, #2a2f24 0%, var(--ink) 70%);
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
  }
  .amenity-card__icon {
    position: absolute;
    top: 26px;
    left: 22px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    z-index: 1;
  }
  .amenity-card__icon svg { width: 26px; height: 26px; }
  /* Full-bleed image, shadowed toward the bottom so the overlaid title/copy
     stay legible over any photo. */
  .amenity-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.88) 100%);
    pointer-events: none;
  }
  /* Blur the bottom third of the photo itself (in addition to the dark
     scrim above) so overlaid text stays readable over busy images. */
  .amenity-card__blur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
    mask-image: linear-gradient(to bottom, transparent, #000 55%);
    pointer-events: none;
  }
  .amenity-card__body {
    position: relative;
    z-index: 1;
    padding: 22px 22px 26px;
    color: #fff;
    width: 100%;
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .amenity-card__meta {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
  }
  .amenity-card__title {
    color: #fff !important;
    font-size: 22px;
    line-height: 1em;
    padding-right: 34px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }
  /* Grid-rows reveal instead of max-height: animates to the description's
     actual height (any length) in one continuous motion, instead of
     interpolating toward an arbitrary max-height cap — that mismatch was
     what made the reveal and the toggle/body padding change (below) look
     out of sync. */
  .amenity-card__desc {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .amenity-card.is-open .amenity-card__desc {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px;
  }
  .amenity-card__desc-inner {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    padding-right: 44px;
    overflow: hidden;
    min-height: 0;
  }
  /* High specificity + !important: Astra/Elementor's global button reset
     (block display, theme accent background, square corners) otherwise wins. */
  .amenity-card button.amenity-card__toggle {
    position: absolute !important;
    right: 22px !important;
    bottom: 26px !important;
    z-index: 2;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #000 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.3s ease;
  }
  .amenity-card button.amenity-card__toggle svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #fff !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .amenity-card button.amenity-card__toggle:hover { background: #222 !important; }
  .amenity-card.is-open .amenity-card__toggle svg { transform: rotate(45deg); }
  /* Clear the toggle's 32px circle (bottom:26px) so the expanded description's
     last line always finishes above it, never underneath. Timed and eased to
     match the description reveal above so the card doesn't resize in a
     separate beat from the text fading in. */
  .amenity-card.is-open .amenity-card__body { padding-bottom: 64px; }

  /* Scroll-triggered entrance — cards rise, sharpen out of a soft blur and
     settle into place with an Apple-style decelerated ease, staggered
     left-to-right/top-to-bottom so a full grid reads as one unfolding
     motion rather than N identical cards firing at once. Gated behind
     reduced-motion since it's a pure auto-playing flourish. */
  @media (prefers-reduced-motion: no-preference) {
    .amenities .amenity-card {
      opacity: 0;
      transform: translateY(42px) scale(0.94);
      filter: blur(10px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity, filter;
    }
    .amenities .amenity-card.is-in {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
  }

  /* ============ LOCATION ============ */
  .location-section { background: #fff; }
  /* Both map sections sit 20px closer to their intro text than the 70px
     every other section gets. */
  .location-section .section-head,
  .walkbike-section .section-head { margin-bottom: 50px; }
  .loc-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .map {
    height: 520px;
    position: relative;
    /* Own stacking context, so everything inside (the .map-cta-pill at z-20
       especially) is capped at this element's level in the page rather than
       competing page-wide. position:relative alone does not do that, and
       without it the pill's 20 is measured against the sticky mobile header's
       100 (style.css) by coincidence rather than by structure. Keeps the pill
       over the map and under the header, whatever an ancestor does later. */
    z-index: 0;
    /* Without this, a grid item's automatic min-width defaults to its
       content's min-content size, which the fixed 420px .map-radar (before
       Google's async init reparents it into a clipped pane) can stretch
       past a phone's viewport, forcing the whole .loc-grid track wider. */
    min-width: 0;
    /* Normally Google's own map panes clip their contents (including
       .map-radar, a fixed 420px sprite), but that only holds once Maps has
       actually initialized — a slow connection, an ad blocker, or any key/
       quota issue leaves .map-radar sitting in its plain server-rendered DOM
       position instead of reparented into Google's clipped overlay pane,
       and a 420px box is wider than most phones. This is the real safety
       net, not a substitute for Google's own clipping. */
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--fc-radius-stage);
    background: var(--mist);
  }
  .map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-family: var(--font-body);
    background: var(--mist);
  }

  /* Map skeleton (fc_home_map_skeleton() in template-homepage.php), shared by
     the Crossroads and Walkable, Bikeable maps: a plain box with a shimmer
     passing over it. Sits over the map until the
     map's script adds .is-loaded to its parent once Google's tiles are in,
     then fades. The shimmer stops after about 15 seconds, so a map that never
     arrives (blocked script, bad key) settles into a still placeholder
     rather than pulsing forever. */
  .fc-map-skel {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: var(--mist-dark);
    pointer-events: none;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
  }
  .is-loaded > .fc-map-skel { opacity: 0; visibility: hidden; }
  .fc-map-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    animation: fc-map-skel-shimmer 1.5s ease-in-out 10;
  }
  @keyframes fc-map-skel-shimmer {
    to { transform: translateX(100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fc-map-skel::after { animation: none; }
  }

  .map-radar {
    /* position/left/top are set by the RadarOverlay (google.maps.OverlayView)
       in location-tabs.js, which anchors this to the FC point via Google's
       own overlayLayer pane — above map tiles, below markers/InfoWindows. */
    width: 420px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle, rgba(10,14,8,0.55) 0%, rgba(10,14,8,0.35) 55%, rgba(10,14,8,0) 78%);
  }
  .map-radar[hidden] { display: none; }
  .map-radar svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6));
  }
  /* Chips floating on a map share one shape and one type style: a pill in
     the body face at 12px / 600, sentence case, with the float shadow. Same
     as the Walk / Bike map's legend and place labels. */
  .map-label {
    position: absolute;
    z-index: 20;
    bottom: 16px; left: 16px;
    background: #fff;
    padding: 9px 14px;
    border-radius: var(--fc-radius-pill);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    box-shadow: var(--fc-shadow-float);
    pointer-events: none;
  }
  /* Low-commitment link out to the full /location/ page, opposite the
     map-label chip. Lives inside the map itself rather than adding a new
     CTA row below the section. Shared by the crossroads .map and the
     walk/bike .wb-map. */
  .map-cta-pill {
    position: absolute;
    z-index: 20;
    bottom: 16px; right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--ink) !important;
    padding: 9px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--fc-radius-pill);
    box-shadow: var(--fc-shadow-float);
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .map-cta-pill:hover { background: var(--green); color: #fff !important; }
  .map-cta-pill svg { width: 10px; height: 10px; }

  /* Phones: the "Finney Crossing · Williston, VT" chip comes out of both maps.
     On a ~340px-wide map it and the Explore Full Map pill are two chips
     fighting over the same strip along the bottom edge, and the label only
     repeats what the section heading directly above it already says. The pill
     stays, since it is the only route from the section to the full map. */
  @media (max-width: 640px) {
    .map-label,
    .wb-map-label {
      display: none;
    }
  }

  /* ---- Google Maps InfoWindow (pin tooltip) ----
     Google renders its own chrome around whatever we hand it (box, tail)
     with unstyled defaults unless overridden here; the .loc-popup-* classes
     below style our content inside that chrome.
     Google's own close button (.gm-ui-hover-effect) is hidden — the content
     ships its own .loc-popup-close instead, so it can carry the amenity
     card's icon and sit correctly in the corner of the centered layout. */
  .gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 16px 32px rgba(31, 36, 25, 0.17), 0 2px 9px rgba(31, 36, 25, 0.075) !important;
    max-width: 240px !important;
  }
  .gm-style .gm-style-iw-d {
    overflow: hidden !important;
    max-width: none !important;
    background: #fff !important;
    border-radius: 13px !important;
  }
  .gm-style .gm-style-iw-t::after,
  .gm-style .gm-style-iw-tc::after {
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(31, 36, 25, 0.1) !important;
  }
  .gm-style .gm-style-iw-c button.gm-ui-hover-effect { display: none !important; }
  /* Google reserves a header row above the content for its close button
     even with the button itself hidden — this is the real source of the
     extra dead space at the top of the card, not our own padding. */
  .gm-style .gm-style-iw-chr { display: none !important; }

  .loc-popup {
    position: relative;
    /* Top clears the close button's own footprint (7px offset + 22px size)
       so it never overlaps the place name, however long. */
    padding: 27px 19px 16px;
    min-width: 150px;
    font-family: var(--font-body);
    background: #fff;
    text-align: center;
  }
  .loc-popup-eyebrow {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 4px;
  }
  .loc-popup-place {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.25;
    color: var(--ink);
    display: block;
  }
  .loc-popup-time {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 12px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--green);
    border-radius: 20px;
  }
  /* Mist-toned close button on the new white card (was a black circle on
     the old khaki card, which read too heavy against white). */
  .loc-popup button.loc-popup-close {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    z-index: 2;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--mist) !important;
    color: var(--ink) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .loc-popup button.loc-popup-close:hover { background: var(--line) !important; }
  .loc-popup button.loc-popup-close svg {
    width: 11px !important;
    height: 11px !important;
    stroke: var(--ink) !important;
    transform: rotate(45deg);
  }
  .distances {
    background: #fff;
    height: 520px;
    display: flex;
    flex-direction: column;
  }
  .loc-tabs {
    display: flex;
    /* All 5 tabs must fit one row on desktop — nowrap plus the tightened
       .loc-tab sizing below fits them at the panel's usual ~460px width;
       overflow-x is just a safety net for narrower in-between viewports,
       not the primary layout mechanism. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 2px;
    /* top: 1px (not 0) lines the tab row up with the .map box's own 1px
       border, so the two panels' tops read as flush. */
    padding: 1px 12px 0 10px;
    border-bottom: 1px solid var(--line);
  }
  .loc-tabs::-webkit-scrollbar { display: none; }
  .loc-tab {
    appearance: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 4px 4px 0 0 !important;
    cursor: pointer;
    padding: 10px 12px 10px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    box-sizing: border-box;
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--warm-gray) !important;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  }
  .loc-tab:hover { color: var(--ink) !important; }
  .loc-tab.is-active {
    color: var(--ink) !important;
    background: var(--mist) !important;
    border-bottom-color: var(--mist) !important;
  }
  .loc-list {
    padding: 12px 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--green) var(--mist);
  }
  .loc-list::-webkit-scrollbar { width: 8px; }
  .loc-list::-webkit-scrollbar-track { background: var(--mist); }
  .loc-list::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 4px;
  }
  .loc-list::-webkit-scrollbar-thumb:hover { background: var(--ink); }
  .distance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .distance:hover { background: var(--mist); }
  .distance:last-child { border-bottom: none; }
  .distance[hidden] { display: none; }

  /* Category filter: the whole visible set fades/slides out first, then the
     next set fades/slides in — a clean two-beat swap (see SWAP_MS in
     location-tabs.js) rather than rows crossfading over each other, with
     direction matching the clicked tab's side (Linear's homepage nav does
     the same: the flyout shifts toward whichever side you moved to).
     .dir-right/.dir-left is toggled on .loc-list based on the clicked tab's
     position relative to the previously active one. Scoped to
     .distances .loc-list, not just .loc-list, since the walk/bike list
     further down the page also carries the .loc-list class (for its shared
     padding/scrollbar styling) and must not pick up this transition. */
  @media (prefers-reduced-motion: no-preference) {
    .distances .loc-list .distance {
      transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Promote to their own compositor layer only while actually animating
       (not permanently, to avoid bloating memory across 20+ rows).
       translate3d over translateX so the GPU layer reliably spins up. */
    .distances .loc-list .distance.is-swap-out,
    .distances .loc-list .distance.is-swap-in {
      will-change: opacity, transform;
    }
    .distances .loc-list.dir-right .distance.is-swap-out {
      opacity: 0;
      transform: translate3d(-16px, 0, 0);
      pointer-events: none;
    }
    .distances .loc-list.dir-right .distance.is-swap-in {
      opacity: 0;
      transform: translate3d(16px, 0, 0);
    }
    .distances .loc-list.dir-left .distance.is-swap-out {
      opacity: 0;
      transform: translate3d(16px, 0, 0);
      pointer-events: none;
    }
    .distances .loc-list.dir-left .distance.is-swap-in {
      opacity: 0;
      transform: translate3d(-16px, 0, 0);
    }
  }
  .distance .place {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--ink);
    /* The place name is what gives way when the row runs out of room, so a
       range like "20-50 min" keeps its own line (see .time below). */
    min-width: 0;
    flex: 1 1 auto;
  }
  .distance .place small {
    display: block;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--warm-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
    font-weight: 500;
  }
  .distance .time {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--green);
    font-weight: 500;
    /* A range ("20-50") would otherwise break at the hyphen and push the unit
       onto a second line, so the whole time, unit included, stays on one. */
    white-space: nowrap;
    flex: 0 0 auto;
    padding-left: 16px;
  }
  .distance .time small {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--warm-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 2px;
    font-weight: 500;
  }

  /* ============ TESTIMONIALS ============ */
  .testi-section {
    background: var(--ink);
    color: #fff;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  /* Photo layer (::before) and gradient layer (::after) are split so the
     ACF background-image override in template-homepage.php can swap the
     photo without ever knocking out the gradient. Both sit at z-index -1;
     ::after paints on top of ::before by tree order. */
  .testi-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1800&q=80') center/cover;
  }
  .testi-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(31,36,25,0.5) 0%, rgba(20,24,16,0.88) 100%);
    pointer-events: none;
  }
  /* ============ WALKABLE / BIKEABLE ============ */
  .walkbike-section { background: var(--mist); }
  .wb-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .wb-map {
    position: relative;
    /* Same reason as .map, see the comment there. */
    z-index: 0;
    height: 520px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--mist-dark);
  }
  .wb-map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-family: var(--font-body);
    background: var(--mist-dark);
  }
  /* Google's own copyright/logo controls are the only chrome left after
     disableDefaultUI — kept, just dimmed slightly so they don't fight the
     ring/pin overlay for attention. */
  .wb-map-canvas .gm-style { font-family: var(--font-body) !important; }
  .wb-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }
  .wb-ring {
    fill: rgba(74, 124, 58, 0.12);
    stroke: var(--green);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
    transition: r 0.35s ease;
  }
  .wb-pins { position: absolute; inset: 0; z-index: 3; }
  /* .wb-pin itself is a zero-size anchor (left/top set in px by JS to the
     pin's exact map position) — .wb-pin-dot and .wb-pin-label both position
     off that same point independently, rather than one flex box centered on
     their combined width, so the dot sits exactly on the real position and
     the label can extend to either side of it without shifting that point. */
  .wb-pin {
    position: absolute;
    transition: opacity 0.3s ease;
  }
  .wb-pin-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--warm-gray);
  }
  .wb-pin-label {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255,255,255,0.9);
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(31,36,25,0.12);
  }
  /* Added by walkbike.js: normally when the pin sits left of the map's
     center point, so the label reads outward, away from the radius rings,
     instead of overlapping them. Flipped either way if that default side
     would run the label past the map's edge, so it stays fully readable. */
  .wb-pin.wb-pin--label-left .wb-pin-label {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
  }
  /* Set by walkbike.js when this pin's label would overlap an already-
     placed one (common once fitZoomForTier zooms out to fit a wide ring,
     pulling nearby dots closer together in pixel terms without shrinking
     their fixed-size labels). The dot itself stays visible either way; the
     full name is still in the reached-places list beside the map. */
  .wb-pin--label-hidden .wb-pin-label { display: none; }
  .wb-pin:not(.is-reached) { opacity: 0.45; }
  .wb-pin:not(.is-reached) .wb-pin-dot { border-color: var(--warm-gray); background: #fff; }
  .wb-pin.is-reached .wb-pin-dot { background: var(--green); border-color: var(--green-dark); }
  .wb-pin.is-reached .wb-pin-label { color: var(--green-dark); }
  .wb-figure {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    transform: translate(-50%, -50%);
    transition: left 0.35s ease, top 0.35s ease;
    box-shadow: 0 2px 8px rgba(31,36,25,0.35);
  }
  .wb-map-label {
    position: absolute;
    z-index: 6;
    bottom: 16px;
    left: 16px;
    background: #fff;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  }

  .wb-controls {
    background: #fff;
    height: 520px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
  }
  .wb-controls-row {
    display: flex;
    /* Wraps rather than forcing the scrubber's min-width to hold — without
       this, a narrow viewport can't fit the toggle + scrubber on one line
       and the whole row (and everything below it, since one overflowing
       flex row widens its whole ancestor chain) pushes the page wider than
       the screen instead of just stacking. */
    flex-wrap: wrap;
    /* stretch (not center): the scrubber has no real content of its own to
       size itself by (everything inside is position:absolute), so it needs
       to take its height from the toggle next to it rather than the other
       way around. */
    align-items: stretch;
    gap: 20px;
    margin-bottom: 26px;
  }
  .wb-mode-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
  }
  .wb-mode {
    appearance: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    padding: 9px 20px !important;
    border-radius: 7px !important;
    cursor: pointer;
    color: var(--warm-gray) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .wb-mode.is-active { background: var(--green) !important; color: #fff !important; }

  /* "Property panel" style scrubber (think a design tool's Opacity/Scale
     slider), in the brand green rather than that reference's near-black —
     a label on the left, the live value on the right, a lighter fill
     sweeping up from the left edge to show the current position, and a
     round handle riding the fill's leading edge so the control reads as
     draggable even when the fill alone would look like a flat, static bar
     (most visibly at the 15-min/full-width default). The three
     .wb-scrubber-step buttons are invisible, each covering a third of the
     bar's width, so clicking/tapping anywhere lands on whichever step is
     closest instead of requiring a precise hit on a small target.
     .wb-scrubber-track (not .wb-scrubber itself) owns overflow:hidden, so
     the handle can sit outside it in the DOM and isn't clipped when it
     rides all the way to either edge. */
  .wb-scrubber {
    position: relative;
    flex: 1;
    min-width: 200px;
    /* Only matters once .wb-controls-row wraps and the scrubber lands alone
       on its own line: with nothing beside it to stretch against, and every
       one of its own children position:absolute, it would otherwise render
       at zero height. */
    min-height: 44px;
    /* Negative top/bottom margin, not a fixed height: with .wb-controls-row's
       align-items: stretch, this grows the scrubber by 2px total past the
       toggle's own height while keeping it centered against it, instead of
       pinned to one edge. */
    margin: -1px 0;
    border-radius: 10px;
    transition: box-shadow 0.15s ease;
  }
  .wb-scrubber-track {
    position: absolute;
    inset: 0;
    background: var(--green);
    border-radius: 10px;
    overflow: hidden;
    /* A subtle inward "groove" so the bar reads as a track a handle sits
       in, rather than a flat solid label. */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
  }
  .wb-scrubber-fill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .wb-scrubber-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
  }
  .wb-scrubber-handle {
    position: absolute;
    top: 50%;
    z-index: 2;
    /* Thin rather than a chunky pill: at the 15-min default the handle
       sits right at the track's right edge, over the "15 mins" value
       text, so it needs to be narrow enough to never cover a word. */
    width: 5px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -50%);
    transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.15s ease, box-shadow 0.15s ease;
    pointer-events: none;
  }
  .wb-scrubber:hover .wb-scrubber-handle,
  .wb-scrubber:focus-within .wb-scrubber-handle {
    transform: translate(-50%, -50%) scaleY(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.25);
  }
  /* At the 15-min default the handle rests on the lighter .wb-scrubber-fill
     rather than the darker track, so its normal shadow is much less visible
     there than at the 5/10-min positions; darken it to compensate. */
  .wb-scrubber-handle--end {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.16);
  }
  .wb-scrubber:hover .wb-scrubber-handle--end,
  .wb-scrubber:focus-within .wb-scrubber-handle--end {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.25);
  }
  .wb-scrubber:hover .wb-scrubber-track { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28); }
  .wb-scrubber:active .wb-scrubber-handle,
  .wb-scrubber.is-dragging .wb-scrubber-handle { transform: translate(-50%, -50%) scaleY(1.05); }
  /* Real cursor feedback (NN/g's top recommendation) rather than relying on
     the grip icon alone: grab at rest, grabbing for the full drag gesture
     even once the pointer drifts outside the bar (pointer capture keeps the
     cursor tied to whichever element captured it). */
  .wb-scrubber,
  .wb-scrubber-step { cursor: grab; }
  .wb-scrubber.is-dragging,
  .wb-scrubber.is-dragging .wb-scrubber-step { cursor: grabbing; }
  .wb-scrubber-label,
  .wb-scrubber-value {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    /* Above the handle (z-index: 2): at the 5-min step the handle's rest
       position sits right where "Distance" ends, and without this the
       handle's white pill + shadow visually cut the word off. */
    z-index: 3;
  }
  .wb-scrubber-label { left: 16px; }
  .wb-scrubber-value { right: 16px; font-variant-numeric: tabular-nums; opacity: 0.85; }
  .wb-scrubber-step {
    appearance: none !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33.333%;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .wb-scrubber-step[data-wb-tier="1"] { left: 33.333%; }
  .wb-scrubber-step[data-wb-tier="2"] { left: 66.666%; }
  .wb-scrubber-step:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .wb-scrubber-fill,
    .wb-scrubber-handle { transition-duration: 0.01ms !important; }
  }

  .wb-stat {
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    display: block;
  }
  .wb-stat-count {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--green-dark);
    line-height: 1;
    margin-bottom: 4px;
  }
  .wb-stat-label { font-size: 13px; color: var(--warm-gray); }
  .wb-stat-label b { color: var(--ink); font-weight: 600; }

  /* wb-list carries the .loc-list class (padding/scrollbar) and each row
     carries .distance (typography/hover/border) so this list and the
     Crossroads list above share their styling from a single source instead
     of a parallel set of rules — see .loc-list / .distance in the LOCATION
     block above.

     The negative margins cancel .wb-controls' 28px padding so the list runs
     full width and down to the panel's bottom edge, the way .loc-list does
     inside the unpadded .distances panel. That puts the scrollbar hard
     against the panel's right edge and lets the row hover highlight span the
     full width instead of floating in a narrower inset column. The 28px the
     panel padding used to contribute is handed straight back by .distance's
     own horizontal padding, so the text itself doesn't move. Vertical
     padding, scrollbar styling and row spacing all come from .loc-list /
     .distance; the only thing genuinely different here is that these rows
     aren't clickable, since there's no map to pan to. */
  .wb-list { list-style: none; margin: 18px -28px -28px; }
  .wb-list .distance { cursor: default; }
  .wb-list-empty {
    font-size: 13px;
    color: var(--warm-gray);
    font-style: italic;
    padding: 18px 28px;
  }

  @media (max-width: 900px) {
    .wb-grid { grid-template-columns: 1fr; }
  }

  .testi-section .section-head h2 { color: #fff; }
  .testi-section .section-head h2 em, .testi-section .section-head h2 b { color: var(--green); }
  .testi-section .section-head .eyebrow { color: var(--mist); }
  .testi-section .section-head p { color: #fff; }
  /* Testimonials ride the values-carousel track/nav-arrow scaffolding
     (.values-section--carousel, .values-track, .values-carousel__viewport…);
     see the VALUES — CAROUSEL block for the shared rules. */
  .testi-section .values-carousel { margin-right: 0; }
  /* overflow-anchor: none stops the browser nudging scrollLeft on its own
     once the fading-in cards settle (the same scroll-snap resting-position
     quirk noted on the arrow disabled check below), which otherwise reads as
     the whole row hopping a few pixels left right after the entrance. */
  .testi-section .values-track { justify-content: safe center; overflow-anchor: none; }
  .testi-section .values-carousel__viewport button.values-nav { top: 50%; }
  /* Hold the arrows back until the cards have finished arriving. They sit on
     top of the cards, so appearing at full strength against a card that's
     still blurred and mid-rise reads as two unrelated things happening at
     once. The carousel script adds .is-revealed when the entrance is done.
     Only a visibility gate — :disabled still governs whether an arrow is
     usable once shown. */
  @media (prefers-reduced-motion: no-preference) {
    .testi-section .values-carousel:not(.is-revealed) .values-carousel__viewport button.values-nav {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.45s ease;
    }
  }

  /* The card itself (.testimonial, .quote-mark, .testi-text, .testi-author,
     .avatar) and the "Read more" modal live in assets/testimonials.css, which
     loads ahead of this file. They moved there when testimonials became their
     own post type, so pages other than the homepage can render the same card
     via the [fc_testimonials] shortcode. Only the section and carousel rules
     above are homepage-specific and stayed here. */

  /* ============ NEWS ============ */
  .news-section { background: var(--mist); }
  /* Grid by default (desktop through tablet); becomes a horizontal-scroll
     carousel, same viewport/nav-arrow scaffolding as the amenity cards,
     only at the mobile breakpoint below. Nav arrows stay hidden until then
     since there's nothing to scroll. */
  .news-carousel .values-carousel__viewport { position: relative; }
  .news-carousel .values-nav { display: none; }
  .news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1280px; margin: 0 auto; }
  .news-item {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(31, 36, 25, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
  }
  .news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(31, 36, 25, 0.14);
  }
  /* Scroll-triggered entrance, same treatment as .amenity-card: rise, sharpen
     out of a soft blur, same decelerated ease. See .amenities .amenity-card. */
  @media (prefers-reduced-motion: no-preference) {
    .news .news-item,
    .values-track .testimonial {
      opacity: 0;
      transform: translateY(42px) scale(0.94);
      filter: blur(10px);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity, filter;
    }
    .news .news-item.is-in,
    .values-track .testimonial.is-in {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
    /* Restated at the entrance rule's specificity: .is-in sets transform:none,
       which would otherwise outrank the plain :hover above and kill the lift
       once a card has finished arriving. */
    .news .news-item.is-in:hover { transform: translateY(-4px); }

    /* A scroll-snap area must not move horizontally while it animates.
       A track with scroll-snap-type: x mandatory stays snapped to the card's
       *transformed* start edge, so a centre-origin scale(0.94) parks the track
       at (1 - 0.94) x cardWidth / 2 (measured: 9px at 390px, 12px at 1440px)
       and then walks it back to 0 as the card grows to full size. That reads
       as the whole row sliding right straight after the cards fade in, and it
       leaves Previous enabled on the first card until the slide finishes.
       Scaling from the start edge instead pins that edge, so the snap position
       is identical before and after the entrance and the track never moves.
       Only cards that are snap areas need it: the testimonials track is always
       a carousel; .news-item and .amenity-card only become one at the mobile
       breakpoint, where the same rule is repeated. */
    .values-track .testimonial { transform-origin: left center; }
  }
  .news-img {
    height: 220px;
    background-size: cover;
    background-position: center;
  }
  .news-body {
    padding: 28px 30px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .news-date {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--green);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .news-body h3 {
    font-size: 24px;
    margin-bottom: 14px;
    line-height: 1em;
  }
  .news-body p {
    font-size: 14.5px;
    color: var(--warm-gray);
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .news-link {
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    border-bottom: 1.5px solid var(--green);
    padding-bottom: 2px;
    align-self: flex-start;
    margin-top: auto;
  }

  /* ============ CTA BANNER ============ */
  .cta-banner {
    background: var(--ink);
    color: #fff;
    padding: 110px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=1800&q=80') center/cover;
    opacity: 0.18;
  }
  .cta-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
  .cta-banner .eyebrow {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--mist);
    margin-bottom: 22px;
    font-weight: 600;
  }
  .cta-banner h2 {
    font-size: 54px;
    margin-bottom: 22px;
    color: #fff;
  }
  .cta-banner h2 em, .cta-banner h2 b { font-family: var(--font-accent); font-weight: 300; color: var(--green); font-size: 51px; }
  .cta-banner p {
    font-size: 17px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 38px;
    line-height: 1.65;
  }
  .cta-banner .btn-row { justify-content: center; }
  .contact-strip {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.15);
    flex-wrap: wrap;
  }
  .contact-strip .ci {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,0.9);
    font-size: 14.5px;
  }
  .contact-strip a.ci {
    transition: color 0.15s;
  }
  .contact-strip a.ci:hover { color: var(--green); }
  .contact-strip .ci svg {
    flex: 0 0 13px !important;
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    color: var(--green) !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible;
  }
  .contact-strip .ci svg path,
  .contact-strip .ci svg circle,
  .contact-strip .ci svg rect,
  .contact-strip .ci svg line,
  .contact-strip .ci svg polyline {
    stroke-width: 1.35 !important;
    vector-effect: non-scaling-stroke;
  }

  /* ============ RESPONSIVE ============ */
  /* Amenities: drop a column earlier than the rest of this file's grids so
     cards don't get too cramped on tablet-width screens — 3-up well before
     the general 1024px tablet query, 2-up well before the general 640px
     mobile query, then a single-card carousel (Why Finney Crossing style)
     once it's truly mobile. */
  @media (max-width: 1180px) {
    .amenities { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) {
    .amenities { grid-template-columns: repeat(2, 1fr); }
  }

  /* .search-bar's own fix lives in a dedicated max-width:1200px query below,
     not in this block — see that query's comment for why it needs a wider
     trigger than everything else here. Widening this whole block to match
     would also pull hero size, section padding, and these grid columns
     earlier than intended. */
  @media (max-width: 1024px) {
    .hero h1 { font-size: 60px; }
    .hero h1 b { font-size: 57px; }

    section { padding: 80px 30px; }
    .section-head h2 { font-size: 49px; }
    .section-head h2 em, .section-head h2 b { font-size: 46px; }
    .values, .testimonials, .news { grid-template-columns: repeat(2, 1fr); }
    .values-section--carousel .values-carousel { margin-right: -30px; }
    .values-section--carousel .values-carousel__viewport button.values-nav--prev { left: 8px; }
    .values-section--carousel .values-carousel__viewport button.values-nav--next { right: 16px; }
    .split { grid-template-columns: 1fr; }
    .split-img { min-height: 380px; }
    .split-text { padding: 60px 30px; }
    /* Green section only: stacked layout reads better text-first, photo after. */
    .split--overlay .split-text { order: -1; }
    /* minmax(0,1fr), not plain 1fr: a bare 1fr track still sizes to the
       min-content of its widest child. .loc-tabs used to rely on
       overflow-x:auto to scroll past that, but a scrollable flex row's
       max-content width (all 5 tabs, unwrapped) still won the track's
       "auto" minimum here, forcing .map/.distances to ~589px and pushing
       them off a 375px viewport. minmax(0,…) lets the track shrink to the
       actual container width instead. */
    .loc-grid { grid-template-columns: minmax(0, 1fr); }
    /* Chips (background, rounded) read as tappable filters better than the
       underlined text tabs used on desktop. Wrapped into two rows instead
       of a horizontal scroll — a phone-width row only fits ~2.5 of the 5
       tabs, and a swipeable row hides tabs with no visible cue. */
    .loc-tabs {
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 16px;
    }
    .loc-tab {
      flex: 1 1 calc(33.333% - 6px);
      padding: 10px 6px !important;
      min-height: 44px;
      white-space: normal !important;
      text-align: center;
      border: 1px solid var(--line) !important;
      border-radius: 20px !important;
      background: #fff !important;
    }
    .loc-tab.is-active {
      background: var(--ink) !important;
      border-color: var(--ink) !important;
      color: #fff !important;
    }
  }

  /* .search-bar alone: the base grid's five minmax() tracks plus gaps need
     ~1055px of content width, and once .search-wrap's and .search-bar's own
     padding (120px + 60px) come off the viewport, that needs a ~1235px
     viewport to fit. Below that the single-row layout doesn't shrink, it
     overflows — pushing Find My Home out past the white card. This used to
     be folded into the max-width:1024px query above, leaving 1025-1195px
     broken; it needs its own wider breakpoint instead. */
  @media (max-width: 1240px) {
    .search-bar {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 20px 18px !important;
    }
    .field-group input.search-move-in,
    .field-group input[type="date"] {
      min-width: 0 !important;
    }
    .search-btn {
      grid-column: span 2;
      width: 100%;
      min-width: 0;
    }
  }
  @media (max-width: 640px) {
    /* Site-wide mobile side-padding standard (matches the leasing/apply
       page): 30px (inherited from the 1024px tablet rule below) reads as
       noticeably more than every other page's mobile gutter. Horizontal
       only — each section still owns its own vertical padding. */
    section { padding-left: 16px; padding-right: 16px; }
    /* The tablet rule above gives every section 80px top and bottom, which
       on a phone is a lot of empty banner before the eyebrow starts and
       leaves the copy squeezed into what's left of the 540px. Half of it is
       plenty here, and the artwork behind is unaffected either way. */
    .hero { height: 540px; padding-top: 40px; padding-bottom: 40px; }
    /* Vertically centering (the desktop default) pushes the button row low
       enough that the search bar's -55px overlap (see .search-wrap) covers
       it once the paragraph wraps to 3 lines. Anchor to the top and pull
       padding/margins in tight so the CTA row clears that overlap with
       room to spare. */
    .hero-inner { padding: 12px var(--fc-frame-gutter) 0; justify-content: flex-start; }
    .hero .eyebrow { line-height: 1.265; margin-bottom: 14px; }
    /* The forced <br> in the title (desktop line-break) just wastes a line
       on narrow screens now that the copy wraps naturally; drop it and let
       the h1 wrap on its own so the whole hero sits higher. */
    .hero h1 br { display: none; }
    .hero h1 { font-size: 50px; line-height: 1em; margin-bottom: 16px; }
    .hero h1 b { font-size: 47px; }
    .hero p { margin-bottom: 24px; }
    .values, .testimonials { grid-template-columns: 1fr; }
    .value-card { flex-basis: 82%; }
    .listings-section .card.listing-card { flex: 0 0 82%; }

    /* Mobile: always show the Learn More pill (no hover to reveal it). */
    .values-section--carousel .value-card .value-card__cta,
    .values-section--carousel .value-card a.value-card__cta {
      opacity: 1 !important;
      transform: none !important;
    }

    /* Re-bleed to match this breakpoint's now-16px section padding (was
       tuned to the 30px tablet gutter inherited from the 1024px query
       above — that gutter itself doesn't change here, only this section's
       does). */
    .values-section--carousel .values-carousel { margin-right: -16px; }

    /* Mobile: move both arrows into a row below the cards, aligned right. */
    .values-section--carousel .values-track { padding-top: 16px; padding-bottom: 16px; }
    .values-section--carousel .values-carousel__viewport { padding-bottom: 60px; }
    .values-section--carousel .values-carousel__viewport button.values-nav {
      display: flex !important;
      top: auto;
      bottom: 0;
      transform: none;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
    }
    .values-section--carousel .values-carousel__viewport button.values-nav:hover {
      transform: none;
    }
    .values-section--carousel .values-carousel__viewport button.values-nav--prev {
      left: auto;
      right: 86px;
    }
    .values-section--carousel .values-carousel__viewport button.values-nav--next {
      right: 30px;
    }
    /* Keep both arrows visible even when an end is reached (dim instead of hide). */
    .values-section--carousel .values-carousel__viewport button.values-nav:disabled {
      opacity: 0.35;
    }

    /* Find Your Home: keep the arrows right-aligned (shared default above),
       and put "View All Apartments" — now a plain text link, not the boxed
       button — in the same row to their left, instead of centered below. */
    .listings-section .all-link {
      position: absolute;
      left: 2px;
      right: 130px;
      bottom: 0;
      top: auto;
      height: 44px;
      margin: 0;
      text-align: left;
      display: flex;
      align-items: center;
    }
    .listings-section .all-link a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      background: none;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .listings-section .all-link a:hover {
      background: none;
      color: var(--green);
    }

    /* Amenities: single-card horizontal carousel, matching the Why Finney
       Crossing / Find Your Home carousel pattern — bleed the right edge off
       the viewport for the Patagonia-style peek, snap-scroll the cards, and
       show the nav arrows (hidden above this breakpoint since the grid
       doesn't scroll). */
    .amenities-carousel { margin-right: -16px; }
    .amenities {
      display: flex;
      grid-template-columns: none;
      max-width: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 16px;
      padding: 4px 2px 60px;
      cursor: grab;
    }
    .amenities::-webkit-scrollbar { display: none; }
    .amenities.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    .amenity-card { flex: 0 0 82%; scroll-snap-align: start; }
    /* These cards are snap areas only at this width, so their entrance scale
       has to grow from the start edge here, or the track re-snaps to the
       scaled edge and slides right as the cards settle. Full reasoning on
       .values-track .testimonial above. */
    .amenities .amenity-card { transform-origin: left center; }
    .amenities-carousel .values-nav {
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      width: 44px;
      height: 44px;
      min-width: 44px;
      padding: 0;
      border-radius: 50%;
      border: 0;
      background: #fff;
      color: var(--ink);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(31, 36, 25, 0.22);
      z-index: 2;
      transition: opacity 0.25s ease, box-shadow 0.25s ease;
    }
    .amenities-carousel .values-nav svg { width: 20px; height: 20px; stroke-width: 2; }
    .amenities-carousel .values-nav--prev { left: auto; right: 86px; }
    .amenities-carousel .values-nav--next { right: 30px; }
    /* Faded out (not just dimmed) once there's nothing left to scroll that
       direction — e.g. the left arrow on the first card. */
    .amenities-carousel .values-nav:disabled {
      opacity: 0.25;
      box-shadow: none;
      pointer-events: none;
    }

    /* News & Events: same single-card horizontal carousel treatment as the
       amenity cards above, bleed the right edge off the viewport, snap-scroll,
       nav arrows shown (hidden above this breakpoint since the grid doesn't
       scroll). */
    .news-carousel { margin-right: -16px; }
    .news {
      display: flex;
      grid-template-columns: none;
      max-width: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 16px;
      padding: 4px 2px 60px;
      cursor: grab;
    }
    .news::-webkit-scrollbar { display: none; }
    .news.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    .news-item { flex: 0 0 82%; scroll-snap-align: start; }
    /* Snap area only at this width, same as the amenity cards, so the
       entrance scale grows from the start edge here too. */
    .news .news-item { transform-origin: left center; }
    .news-carousel .values-nav {
      display: flex;
      position: absolute;
      top: auto;
      bottom: 0;
      width: 44px;
      height: 44px;
      min-width: 44px;
      padding: 0;
      border-radius: 50%;
      border: 0;
      background: #fff;
      color: var(--ink);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(31, 36, 25, 0.22);
      z-index: 2;
      transition: opacity 0.25s ease, box-shadow 0.25s ease;
    }
    .news-carousel .values-nav svg { width: 20px; height: 20px; stroke-width: 2; }
    .news-carousel .values-nav--prev { left: auto; right: 86px; }
    .news-carousel .values-nav--next { right: 30px; }
    .news-carousel .values-nav:disabled {
      opacity: 0.25;
      box-shadow: none;
      pointer-events: none;
    }

    /* Residents: same single-card horizontal carousel treatment as the
       amenity/news cards above. The desktop card is a fixed 400px (see
       .testimonial in testimonials.css) and the track is horizontally
       centered (.testi-section .values-track above) — both wrong here: the
       fixed width runs wider than most phone viewports and spills off the
       right edge, and centering an overflowing track starts scrollLeft off
       of 0, which threw off the prev arrow's disabled state on load. Switch
       to the same 82%-card / left-aligned / bled-right pattern instead. */
    .testi-section .values-carousel { margin-right: -16px; }
    .testi-section .values-track { justify-content: flex-start; }
    .testi-section .values-track .testimonial { flex: 0 0 82%; }

    /* .stat-grid--overlay now lives inside .split-img (not .split-text). Stacking
       the 3 stats into a column (previous approach) made the bar tall enough to
       cover most of the photo behind it — keep it a slim row across the bottom
       instead, just with tighter padding/type so the labels still fit 3-up. */
    .stat-grid--overlay { margin: 0 16px 16px; width: calc(100% - 32px); }
    .stat-grid--overlay .stat { padding: 14px 8px; }
    .stat-grid--overlay .num { font-size: 19px; margin-bottom: 4px; }
    .stat-grid--overlay .lbl { font-size: 8px; letter-spacing: 0.6px; }
    .split-text { padding: 60px 20px; }
    /* minmax(0, ...) so the widest field can't hold the column open past
       the card on a 320px screen. */
    .search-bar {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 18px !important;
      padding: 24px 22px;
    }
    .search-btn { grid-column: 1 / -1; }
    /* The desktop 290px floor (two 126px selects) is wider than the card's
       content box on a 320px screen. */
    .price-range {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
      min-width: 0 !important;
    }

    /* CTA banner: tighter mobile pass. Brighter background photo (opacity
       up, gradient lightened at the top) since the old 0.18 + heavy overlay
       read as almost solid black on a phone. Copy block shrunk so the
       button is reachable sooner, button goes full-width, and the contact
       row becomes a bordered 3-up grid (icon over label) instead of a
       centered flex row, since that flex row has no room to fit all three
       items at this width and was wrapping into a tall stack with big gaps. */
    .cta-banner { padding: 48px 22px 28px; }
    .cta-banner::before { opacity: 0.34; }
    .cta-banner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15,20,14,0.22) 0%, rgba(15,20,14,0.8) 100%);
    }
    .cta-banner .eyebrow { font-size: 10.5px; letter-spacing: 2px; margin-bottom: 12px; }
    .cta-banner h2 { font-size: 41px; line-height: 1em; margin-bottom: 14px; }
    /* --green reads too dark against the darkened photo/gradient at this
       width — swap the accent word to --mist so it stays legible. Font-size
       also needs restating here: the base rule's 51px (sized for the 54px
       desktop h2) was leaking through unscaled against this 41px mobile h2,
       making "learn more?" balloon past the rest of the heading. */
    .cta-banner h2 em, .cta-banner h2 b { color: var(--mist); font-size: 39px; }
    .cta-banner p { font-size: 14px; line-height: 1.5; margin: 0 auto 22px; max-width: 300px; }
    .cta-banner .btn-row { display: block; }
    .cta-banner .btn-row .btn {
      display: block;
      width: 100%;
      text-align: center;
      padding: 17px 18px;
      border-radius: 3px;
      box-shadow: 0 10px 24px rgba(74, 124, 58, 0.35);
    }
    .contact-strip {
      margin-top: 22px;
      padding-top: 0;
      gap: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      flex-wrap: nowrap;
    }
    .contact-strip .ci {
      flex-direction: column;
      gap: 6px;
      padding: 16px 4px 14px;
      border-right: 1px solid rgba(255,255,255,0.14);
      font-size: 11px;
      text-align: center;
      white-space: normal;
    }
    .contact-strip .ci:last-child { border-right: 0; }
    .contact-strip .ci svg {
      width: 18px !important;
      height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
    }
    /* The full email address doesn't fit this column's width; swap it for
       a short label on mobile only (desktop keeps the real address). */
    .contact-strip .ci--mail .ci-text { display: none; }
    .contact-strip .ci--mail::after { content: 'Email Us'; }
  }