/* ==========================================================================
   The Cara: 2026 refresh stylesheet
   --------------------------------------------------------------------------
   This file is loaded AFTER the older style.css, so anything here wins.
   style.css is never edited; to undo the refresh, remove the one <link>
   to this file in _inc/header.php.

   HOW TO CHANGE A BRAND COLOUR
   1. Find the colour in the ":root" list just below (for example --orange).
   2. Replace the six-character code after the colon, e.g. #FF6B43, with
      the new one. Keep the "#" and the semicolon at the end.
   3. Save, then change the number after "refresh.css?v=" in
      _inc/header.php (any new number) so visitors' browsers fetch the new
      file instead of an old saved copy.
   Every button, band and heading that uses that colour updates at once.

   New pieces all have names starting with "r-" so they can never clash
   with the older styles.
   ========================================================================== */

:root {
  --orange: #FF6B43;    /* buttons, accents */
  --orange-hover: #FF8460;
  --brown: #50210F;     /* dark bands, headings, footer */
  --cream: #FAF9F5;     /* page background */
  --paper: #F3F1EA;     /* slightly deeper cream for alternating bands */
  --olive: #9F8F53;     /* small labels */
  --charcoal: #353333;  /* body text */
  --muted: #6B6464;     /* small secondary text on cream */
  --line: rgba(53, 51, 51, .12);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;   /* headlines */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;     /* body text, labels */

  --max: 1240px;                       /* widest the content gets */
  --gutter: clamp(16px, 4vw, 48px);    /* space at the left and right edges */
  --hdr: 96px;                         /* header height */
}

/* --------------------------------------------------------------------------
   Fonts (self-hosted, SIL Open Font License: see assets/fonts/OFL-*.txt)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-latin-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Base for the new pieces. style.css makes all text white, headings
   uppercase and lists white, so each new area resets those for itself.
   -------------------------------------------------------------------------- */
body.homepage,
body.availability,
body.amenities,
body.gallery,
body.equalhousing,
body.floorplans,
body.neighborhood,
body.contact,
body.residents,
body.privacy {
  background: var(--cream);
}

.r-util,
.r-header,
.r-main,
.r-footer {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}
.r-util *, .r-header *, .r-main *, .r-footer * { box-sizing: border-box; }

.r-main h1, .r-main h2, .r-main h3,
.r-footer h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  color: inherit;
  margin: 0;
}
.r-main p, .r-footer p { margin: 0; }
.r-main a, .r-util a, .r-header a, .r-footer a { color: inherit; }
.r-main img, .r-footer img { display: block; max-width: 100%; height: auto; }
.r-main picture { display: block; }

.r-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.r-eyebrow {
  display: inline-block;
  font: 500 13px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Visible keyboard focus everywhere in the new pieces */
.r-util a:focus-visible,
.r-header a:focus-visible,
.r-header button:focus-visible,
.r-main a:focus-visible,
.r-footer a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}
.r-cta a:focus-visible { outline-color: var(--brown); }

/* "Skip to content" link: style.css shows it unstyled (white on cream) when focused */
.u-skip-link.u-sr-only:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--brown);
  color: var(--cream);
  font: 600 14px/1 var(--sans);
}

/* --------------------------------------------------------------------------
   Buttons and arrow links
   -------------------------------------------------------------------------- */
.r-btn {
  display: inline-block;
  padding: 14px 24px;
  font: 600 14px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.r-header .r-btn--orange,
.r-main .r-btn--orange { background: var(--orange); color: var(--brown); }
.r-header .r-btn--orange:hover,
.r-main .r-btn--orange:hover { background: var(--orange-hover); }
.r-main .r-btn--brown { background: var(--brown); color: var(--cream); }
.r-main .r-btn--brown:hover { background: #6a2e17; }
.r-main .r-btn--ghost { border-color: var(--cream); color: var(--cream); }
.r-main .r-btn--ghost:hover { background: var(--cream); color: var(--brown); }
.r-main .r-btn--line { border-color: var(--brown); color: var(--brown); }
.r-main .r-btn--line:hover { background: var(--brown); color: var(--orange); }

.r-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.r-main .r-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
}
.r-link-arrow::after {
  content: "\2192";
  font-size: 18px;
  transition: transform .2s;
}
.r-link-arrow:hover::after,
.r-link-arrow:focus-visible::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Utility bar (address, phone, pay rent)
   -------------------------------------------------------------------------- */
.r-util {
  background: var(--brown);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.4;
}
.r-util__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 32px;
}
.r-util a { text-decoration: none; }
.r-util a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Header (logo, menu, Check availability)
   style.css gives .site-header a beige background, centred text and padding;
   the two-class selector below overrides those without !important.
   -------------------------------------------------------------------------- */
.site-header.r-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  text-align: left;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.r-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--hdr);
  padding: 0 32px;
}

/* The real Cara logo artwork, used as a mask so it can be drawn in any
   brand colour (brown in the header, cream in the footer). */
.r-logo {
  display: block;
  flex: none;
  width: 176px;
  aspect-ratio: 1027 / 439;
  background-color: var(--brown);
  -webkit-mask: url(../img/logos/the-cara-logo-mask.png) center / contain no-repeat;
  mask: url(../img/logos/the-cara-logo-mask.png) center / contain no-repeat;
}
.r-header .r-logo:focus-visible,
.r-footer .r-logo:focus-visible { outline-offset: 6px; }
@media (forced-colors: active) {
  .r-logo { forced-color-adjust: none; background-color: CanvasText; }
}

/* Menu: desktop layout */
.r-nav { display: flex; align-items: center; }
.r-nav__panel { display: flex; align-items: center; gap: 30px; }
.r-header .r-nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--charcoal);
}
.r-nav__links li { margin: 0; padding: 0; }
.r-header .r-nav__links a {
  display: block;
  padding: 6px 0;
  font: 500 14px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s;
}
.r-header .r-nav__links a:hover,
.r-header .r-nav__links li.is-active a { border-bottom-color: var(--orange); }
.r-nav__cta { flex: none; }

.r-nav__toggle { display: none; }

/* Narrower desktops: tighten the menu so all seven links and the button fit */
@media (max-width: 1280px) {
  .r-nav__panel, .r-header .r-nav__links { gap: 20px; }
  .r-header .r-nav__links a { font-size: 13px; }
  .r-header .r-nav__cta { padding: 13px 18px; font-size: 13px; }
}

/* Menu: phone and tablet layout. The menu is hidden until the Menu button
   is pressed; app.min.js then adds the class "toggled" to #site-navigation. */
@media (max-width: 1100px) {
  .r-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 0;
    background: none;
    border: 0;
    color: var(--brown);
    font: 600 13px/1 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .r-nav__icon {
    display: block;
    width: 22px;
    height: 12px;
    border-top: 2px solid var(--brown);
    border-bottom: 2px solid var(--brown);
    transition: transform .2s;
  }
  .r-nav.toggled .r-nav__icon {
    height: 2px;
    border-bottom: 0;
    transform: rotate(45deg);
    box-shadow: none;
  }
  .r-nav.toggled .r-nav__icon::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-top: -2px;
    background: var(--brown);
    transform: rotate(-90deg);
  }

  /* The open menu drops down under the header, full width */
  .r-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--hdr));
    overflow-y: auto;
    padding: 8px var(--gutter) 24px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(53, 51, 51, .08);
  }
  .r-nav.toggled .r-nav__panel { display: flex; }

  .r-nav__panel, .r-header .r-nav__links { gap: 0; }
  .r-header .r-nav__links { display: block; }
  .r-header .r-nav__links a {
    padding: 14px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(53, 51, 51, .1);
  }
  .r-header .r-nav__links li.is-active a { border-bottom-color: var(--orange); }
  .r-header .r-nav__cta { margin-top: 16px; padding: 14px 24px; font-size: 14px; }
}

@media (max-width: 900px) {
  :root { --hdr: 80px; }
  .r-header .r-logo { width: 140px; }
  .r-util__extra { display: none; }
}
@media (max-width: 700px) {
  .r-util__inner, .r-header__inner { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   Announcement banner (home page)
   The slim strip under the header. Its text lives in index.php between the
   "ANNOUNCEMENT BANNER" comments. Brown text on orange: 4.75:1 contrast.
   -------------------------------------------------------------------------- */
.r-announce {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--brown);
}
.r-main .r-announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  max-width: var(--max);
  min-height: 48px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  font: 500 15px/1.4 var(--sans);
  text-align: center;
}
.r-announce__icon {
  flex: none;
  display: block;
}
.r-announce__label {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--brown);
  font: 600 12px/1.3 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Home: hero
   -------------------------------------------------------------------------- */
.r-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 2400 / 1142;
  min-height: 540px;
  overflow: hidden;
  color: var(--cream);
  background: var(--brown);
}
.r-main .r-hero__media,
.r-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.r-main .r-hero__media img {
  max-width: none;
  object-fit: cover;
  object-position: 50% 60%;
}
.r-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 12, 4, .74) 0%, rgba(30, 12, 4, .5) 38%, rgba(30, 12, 4, 0) 66%),
    linear-gradient(180deg, rgba(30, 12, 4, 0) 55%, rgba(30, 12, 4, .3) 100%);
}
.r-hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(36px, 7vw, 80px);
}
.r-hero .r-eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.r-main .r-hero h1 {
  max-width: 12ch;
  margin: 14px 0 28px;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Home: prices and Walk Score
   -------------------------------------------------------------------------- */
.r-pricing { padding: clamp(40px, 6vw, 72px) 0; }
.r-pricing__grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 32px;
  align-items: end;
}
.r-main .r-pricing h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  color: var(--charcoal);
}
.r-main .r-price {
  display: block;
  padding: 16px 0 4px;
  text-decoration: none;
  border-top: 1.5px solid var(--brown);
  transition: border-color .2s, box-shadow .2s;
}
.r-main .r-price:hover { border-top-color: var(--orange); box-shadow: inset 0 3px 0 var(--orange); }
.r-main .r-price:focus-visible { outline-offset: 6px; border-top-color: var(--orange); }
.r-price__type {
  display: block;
  font: 500 13px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.r-price__from { font-size: 14px; color: var(--muted); }
.r-price__amount {
  display: block;
  font: 400 clamp(34px, 3.6vw, 46px)/1.1 var(--serif);
  color: var(--brown);
}
.r-price__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
}
.r-price__view::after { content: "\2192"; font-size: 16px; transition: transform .2s; }
.r-price:hover .r-price__view { color: #c2401c; }
.r-price:hover .r-price__view::after,
.r-price:focus-visible .r-price__view::after { transform: translateX(4px); }

.r-walkscore {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(53, 51, 51, .15);
  font-size: 15px;
}
.r-walkscore q { font: 400 22px/1.2 var(--serif); color: var(--brown); }

/* --------------------------------------------------------------------------
   Home: three cards
   -------------------------------------------------------------------------- */
.r-cards { padding: 0 0 clamp(48px, 7vw, 96px); }
.r-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.r-main .r-card img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}
.r-main .r-card h3 {
  margin: 20px 0 8px;
  font: 500 15px/1.3 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.r-main .r-card p { margin: 0 0 16px; font-size: 16px; }

/* --------------------------------------------------------------------------
   Home: photo + text bands
   -------------------------------------------------------------------------- */
.r-band { padding: clamp(56px, 8vw, 112px) 0; }
.r-band--brown { background: var(--brown); color: var(--cream); }
.r-band--paper { background: var(--paper); }
.r-band__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.r-band--flip .r-band__grid { grid-template-columns: 1fr 1.25fr; }
.r-band--flip .r-band__media { order: 2; }
.r-main .r-band h2 {
  margin: 14px 0 20px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
}
.r-main .r-band p { margin: 0 0 24px; max-width: 52ch; }
.r-band--brown .r-eyebrow,
.r-main .r-band--brown .r-link-arrow { color: var(--orange); }
.r-band--paper .r-eyebrow { color: var(--olive); }
.r-main .r-band__media img { width: 100%; }

/* --------------------------------------------------------------------------
   Home: closing call to action
   -------------------------------------------------------------------------- */
.r-cta {
  padding: clamp(44px, 6vw, 72px) 0;
  background: var(--orange);
  color: var(--brown);
}
.r-cta__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.r-main .r-cta h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; }

/* --------------------------------------------------------------------------
   Simple content page (Availability)
   -------------------------------------------------------------------------- */
.r-page { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 112px); }
.r-page .r-eyebrow { color: var(--olive); }
.r-main .r-page h1 {
  margin: 12px 0 16px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  color: var(--brown);
}
.r-main .r-page__intro { max-width: 60ch; margin-bottom: 32px; }
.r-listings { min-height: 120px; margin-bottom: 32px; }
.r-main .r-page__fallback a { color: var(--brown); font-weight: 600; }

/* --------------------------------------------------------------------------
   Floorplans page (floorplans.php + assets/js/floorplans.js)
   Everything is scoped to .r-fp, the wrapper on that page. The old table
   classes (.c-floorplans, .c-table, .c-unit-images) are no longer used.
   Without JavaScript (html.no-js) the filters and preview are hidden and
   each row shows its own PDF and 3D tour links.
   -------------------------------------------------------------------------- */
body.floorplans main.site-main { padding-top: 0; } /* style.css adds 34px here */

.r-fp .r-fp-vh,
.r-fp .r-fp-lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Intro */
.r-fp-intro { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.r-fp-intro .r-eyebrow { color: var(--olive); }
.r-fp .r-fp-intro h1 {
  margin: 12px 0 14px;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  color: var(--brown);
}
.r-fp .r-fp-intro p { max-width: 56ch; }

/* Filters and sort */
.r-fp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px 32px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--brown);
}
.r-fp-fgroup { min-width: 0; margin: 0; padding: 0; border: 0; }
.r-fp-fgroup legend,
.r-fp-sort label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.r-fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r-fp .r-fp-chip {
  margin: 0;
  padding: 11px 16px;
  font: 500 14px/1 var(--sans);
  letter-spacing: .02em;
  color: var(--brown);
  background: transparent;
  border: 1.5px solid rgba(80, 33, 15, .35);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.r-fp .r-fp-chip:hover { border-color: var(--brown); }
.r-fp .r-fp-chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.r-fp-sort { margin-left: auto; }
.r-fp .r-fp-sort select {
  margin: 0;
  padding: 10px 36px 10px 12px;
  font: 500 14px/1 var(--sans);
  color: var(--brown);
  background-color: var(--cream);
  background-image: linear-gradient(45deg, transparent 50%, var(--brown) 50%), linear-gradient(135deg, var(--brown) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1.5px solid rgba(80, 33, 15, .35);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.r-fp .r-fp-count { margin: 18px 0 6px; font: 400 22px/1.2 var(--serif); color: var(--brown); }

.r-fp .r-fp-chip:focus-visible,
.r-fp .r-fp-pick:focus-visible,
.r-fp .r-fp-close:focus-visible,
.r-fp .r-fp-sort select:focus-visible,
.r-fp .r-fp-panel a:focus-visible,
.r-fp .r-fp-unit > a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* List + sticky preview, side by side */
.r-fp-browse {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(56px, 8vw, 104px);
}
.r-fp-head {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 52px 72px 60px 160px;
  align-items: center;
  padding: 10px 0 10px 16px;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(53, 51, 51, .15);
}
.r-fp-head span:nth-child(4) { padding-right: 14px; text-align: right; }
.r-fp .r-fp-units { margin: 0; padding: 0; list-style: none; color: var(--charcoal); }
.r-fp .r-fp-unit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 160px;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr) + 8px);
}
.r-fp .r-fp-pick {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 52px 72px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 11px 0 11px 16px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.r-fp-num { font: 500 24px/1 var(--serif); color: var(--brown); }
.r-fp-layout { font-size: 15.5px; font-weight: 500; }
.r-fp-bath { font-size: 14px; font-weight: 400; color: var(--muted); }
.r-fp-bath::before { content: "\0020\00b7\0020"; } /* space, middle dot, space */
.r-fp-tag { display: none; }
.r-fp-floor,
.r-fp-sqft { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.r-fp-sqft { padding-right: 14px; text-align: right; }

/* "Accessible (ADA)" tag: brown on cream, 12:1 contrast */
.r-fp-ada {
  display: table;
  margin-top: 4px;
  padding: 2px 8px;
  font: 600 12px/1.35 var(--sans);
  letter-spacing: .02em;
  color: var(--brown);
  background: var(--cream);
  border: 1px solid var(--brown);
  border-radius: 999px;
  white-space: nowrap;
}

.r-fp .r-fp-pdf,
.r-fp .r-fp-tour {
  justify-self: start;
  padding: 8px 0;
  font: 600 12.5px/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
}
.r-fp .r-fp-pdf { display: inline-flex; align-items: center; gap: 6px; }
.r-fp-pdf::before {
  content: "";
  width: 11px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  -webkit-clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%);
}
.r-fp .r-fp-tour { color: #c2401c; } /* darker orange: 4.6:1 on cream */
.r-fp-same { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.r-fp .r-fp-pdf:hover,
.r-fp .r-fp-tour:hover { text-decoration: underline; text-underline-offset: 3px; }
.r-fp .r-fp-unit:hover { background: rgba(243, 241, 234, .7); }
/* Selected row: paper fill and an orange rule on the left */
.r-fp .r-fp-unit.is-selected { background: var(--paper); box-shadow: inset 4px 0 0 var(--orange); }
.r-fp .r-fp-empty { padding: 24px 0; }

/* Preview panel */
.r-fp-slot { position: -webkit-sticky; position: sticky; top: calc(var(--hdr) + 20px); }
.r-fp-panel { padding: 22px 24px 24px; background: #fff; border: 1px solid var(--line); }
.r-fp-panel:focus { outline: none; }
.r-fp-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.r-fp .r-fp-panel h2 { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; color: var(--brown); }
.r-fp .r-fp-ada--panel { margin-top: 0; }
.r-fp .r-fp-facts { margin: 4px 0 0; font-size: 15px; color: #4d4848; }
.r-fp-facts b { font-weight: 600; color: var(--charcoal); }
.r-fp .r-fp-panel figure { margin: 0; }
.r-fp-render {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(300px, 42vh, 430px);
  margin-top: 16px;
  background: #f2f2f1;
}
.r-fp .r-fp-render img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.r-fp .r-fp-panel figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.r-fp-panel__foot {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.r-fp .r-fp-keyplan a { display: block; }
.r-fp .r-fp-keyplan img { width: 180px; height: auto; border: 1px solid var(--line); }
.r-fp .r-fp-keyplan a:hover img { border-color: var(--brown); }
.r-fp-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.r-fp-actions .r-btn { padding: 14px 10px; letter-spacing: .06em; }
.r-fp .r-fp-tournote { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.r-fp-close { display: none; }

/* Floor by floor */
.r-fp-floors { padding: clamp(56px, 8vw, 104px) 0; background: var(--paper); }
.r-fp-floors__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.r-fp-floors .r-eyebrow { color: var(--olive); }
.r-fp .r-fp-floors h2 { margin: 14px 0 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; }
.r-fp-floors dl { margin: 0; }
.r-fp-floors__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(53, 51, 51, .15);
}
.r-fp-floors__row:first-child { border-top: 1.5px solid var(--brown); }
.r-fp-floors dt { font: 500 13px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.r-fp-floors dd { margin: 0; font: 400 21px/1.35 var(--serif); }

/* Without JavaScript: no filters or preview; the list is the whole page */
.no-js .r-fp-filters,
.no-js .r-fp-slot { display: none; }
.no-js .r-fp-browse { grid-template-columns: minmax(0, 1fr); }
.no-js .r-fp .r-fp-pick { cursor: default; }

/* Tablet and phone: one column, compact rows, preview opens under the unit */
@media (max-width: 900px) {
  .r-fp-sort { margin-left: 0; }
  .r-fp-browse { grid-template-columns: minmax(0, 1fr); }
  .r-fp-slot { display: none; }
  .r-fp-head { display: none; }
  .r-fp .r-fp-unit { grid-template-columns: minmax(0, 1fr); }
  .js .r-fp .r-fp-unit > .r-fp-pdf,
  .js .r-fp .r-fp-unit > .r-fp-tour { display: none; }
  .r-fp .r-fp-pick {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-areas: "num layout sqft" "num floor sqft";
    row-gap: 2px;
    padding: 12px 0 12px 12px;
  }
  .r-fp-num { grid-area: num; align-self: center; font-size: 26px; }
  .r-fp-layout { grid-area: layout; }
  .r-fp-floor { grid-area: floor; font-size: 13.5px; color: var(--muted); }
  .r-fp-sqft { grid-area: sqft; align-self: center; padding-right: 8px; font: 400 19px/1 var(--serif); color: var(--brown); }
  .r-fp .r-fp-lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .r-fp-sqft .r-fp-lbl { font: 400 13px var(--sans); color: var(--muted); }
  .r-fp-tag { display: inline; font-weight: 600; color: #c2401c; }
  .r-fp .r-fp-unit.is-selected { box-shadow: inset 0 3px 0 var(--orange); }
  .r-fp .r-fp-unit:hover { background: transparent; }
  .r-fp .r-fp-unit.is-selected:hover { background: var(--paper); }
  .r-fp .r-fp-unit > .r-fp-panel { grid-column: 1 / -1; margin: 0 -8px 12px; padding: 18px 16px; }
  .r-fp-render { height: auto; max-height: 70vh; }
  .r-fp .r-fp-render img { max-height: 70vh; }
  .r-fp-panel__foot { grid-template-columns: minmax(0, 1fr); }
  .r-fp .r-fp-keyplan img { width: 100%; }
  .r-fp .r-fp-close {
    display: inline-block;
    margin: 0 0 0 auto;
    padding: 8px 0;
    font: 600 12.5px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--brown);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .r-fp-floors__grid { grid-template-columns: minmax(0, 1fr); }
  .r-fp-floors__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* No JavaScript on a phone: PDF and tour links sit under each unit */
  .no-js .r-fp .r-fp-unit { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 20px; padding: 0 0 8px 12px; }
  .no-js .r-fp .r-fp-pick { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 700px) {
  .r-fp .r-fp-unit > .r-fp-panel { margin: 0 0 12px; }
}

/* Keep "hidden" hidden, whatever display a class above sets */
.r-fp [hidden] { display: none; }


/* --------------------------------------------------------------------------
   "Virtually staged" tag (Gallery photos and the Home "Modern apartments" card)
   Put it inside an element with position: relative (the gallery photo link,
   or <div class="r-staged-wrap"> around a picture); it sits bottom-left.
   Charcoal on cream: 11:1 contrast.
   -------------------------------------------------------------------------- */
.r-staged-wrap { position: relative; }
.r-staged-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 9px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: rgba(250, 249, 245, .92);
  pointer-events: none;
}
@media (max-width: 700px) {
  .r-staged-tag { left: 6px; bottom: 6px; padding: 4px 6px; font-size: 9.5px; }
}

/* --------------------------------------------------------------------------
   Amenities page (amenities.php). Everything is scoped to .r-amen / r-amen-.
   -------------------------------------------------------------------------- */

.r-amen-intro { padding: clamp(40px, 6vw, 80px) 0 0; }
.r-amen-intro .r-eyebrow { color: var(--olive); }
.r-main .r-amen-intro h1 {
  margin: 12px 0 20px;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  color: var(--brown);
}
.r-amen-jump { display: flex; flex-wrap: wrap; gap: 14px 32px; }

.r-main.r-amen .r-amen-lead { margin: clamp(28px, 4vw, 48px) auto 0; }
.r-main .r-amen-lead img { width: 100%; height: auto; aspect-ratio: 2400 / 1142; object-fit: cover; }

/* Captions under every photo: small olive label, same voice as the Home eyebrows */
.r-main.r-amen figcaption {
  margin-top: 10px;
  font: 500 12.5px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.r-main.r-amen figure { margin: 0; }

.r-amen-group { padding: clamp(56px, 8vw, 104px) 0; scroll-margin-top: var(--hdr); }
.r-amen-group--paper { background: var(--paper); }
.r-amen-head { padding-bottom: 18px; border-bottom: 1.5px solid var(--brown); }
.r-main .r-amen-head h2 {
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1.08;
  color: var(--brown);
}

/* The amenity lists: plain text, thin rules, filled column by column */
.r-main .r-amen-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 3;
  column-gap: clamp(24px, 4vw, 56px);
  color: var(--charcoal);
}
.r-main .r-amen-list li {
  break-inside: avoid;
  margin: 0;
  padding: 14px 0 14px 22px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.35;
}
.r-main .r-amen-list--2 { columns: 2; }
.r-amen-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 8px;
  height: 8px;
  background: var(--orange);
}

/* Photo grids: three columns */
.r-amen-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 40px) 24px;
  margin-top: clamp(40px, 5vw, 64px);
}
/* A photo two columns wide: its picture takes no height of its own, so the row
   height comes from the normal photo beside it; the picture then fills that
   space and is cropped to fit (no stretching). */
.r-amen-photo--span2 { grid-column: span 2; display: flex; flex-direction: column; }
.r-main .r-amen-photo--span2 img { flex: 1 1 0; min-height: 0; height: 0; width: 100%; aspect-ratio: auto; object-fit: cover; }

.r-amen-note { padding: 28px 0; border-top: 1px solid var(--line); }
.r-main .r-amen-note p { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .r-main .r-amen-list { columns: 2; }
  .r-amen-photos { grid-template-columns: 1fr 1fr; }
  .r-amen-photo--span2 { display: block; }
  .r-amen-photo--end { grid-column: auto; } /* the last wide photo becomes a normal tile beside "Elevator" */
  .r-main .r-amen-photo--span2 img { height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 700px) {
  .r-main .r-amen-list { columns: 1; }
  .r-amen-photos { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .r-amen-photos--three .r-amen-photo:first-child { grid-column: span 2; }
  .r-main.r-amen .r-amen-photo figcaption { font-size: 12px; letter-spacing: .1em; }
  .r-main .r-amen-lead { padding: 0; }
  .r-main .r-amen-lead figcaption { padding: 0 var(--gutter); }
}

/* --------------------------------------------------------------------------
   Gallery page (gallery.php + assets/js/gallery.js). Everything is r-gallery.
   Without JavaScript (html.no-js) the filter chips are hidden and each photo
   simply opens its large version.
   -------------------------------------------------------------------------- */
body.gallery main.site-main { padding-top: 0; } /* style.css adds 34px here */

.r-gallery__intro { padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px); }
.r-gallery__intro .r-eyebrow { color: var(--olive); }
.r-main .r-gallery__intro h1 {
  margin: 12px 0 16px;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.03;
  color: var(--brown);
}
.r-main .r-gallery__intro p { max-width: 60ch; }

/* Filter chips: stay under the sticky header while scrolling */
.r-gallery__filters {
  position: -webkit-sticky;
  position: sticky;
  top: var(--hdr);
  z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.no-js .r-gallery__filters { display: none; }
.r-main .r-gallery__chips {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.r-gallery__chips::-webkit-scrollbar { display: none; }
.r-main .r-gallery__chips li { flex: none; margin: 0; padding: 0; }
.r-main .r-gallery__chip {
  margin: 0;
  min-width: 0; /* style.css gives every button min-width: 160px */
  padding: 10px 16px;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown);
  background: transparent;
  border: 1.5px solid rgba(80, 33, 15, .35);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.r-main .r-gallery__chip:hover { border-color: var(--brown); }
.r-main .r-gallery__chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.r-main .r-gallery__chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Sections */
.r-gallery__section { padding: clamp(40px, 6vw, 72px) 0; scroll-margin-top: calc(var(--hdr) + 64px); }
.r-gallery__section + .r-gallery__section { border-top: 1px solid var(--line); }
.r-gallery__section--paper { background: var(--paper); }
.r-gallery__section[hidden] { display: none; }
.r-gallery__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  margin-bottom: 24px;
}
.r-gallery__head .r-eyebrow { color: var(--olive); }
.r-main .r-gallery__head h2 {
  margin-top: 8px;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.05;
  color: var(--brown);
}
.r-gallery__links { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-bottom: 6px; }
.r-main .r-gallery__credit { max-width: 90ch; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.r-main .r-gallery__credit a { color: var(--brown); }

/* Grid: one large lead photo, then even 3:2 tiles in three columns */
.r-main .r-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-main .r-gallery__item { margin: 0; padding: 0; }
.r-gallery__item--lead { grid-column: span 2; grid-row: span 2; }
.r-gallery__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}
.r-main .r-gallery__link img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .4s ease, opacity .2s;
}
.r-gallery__link:hover img { transform: scale(1.03); }
.r-main .r-gallery__link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* The owner's neighborhood photos are small originals (600 px wide): they are never
   the large lead photo; a section marked 'small' has no lead photo (r-gallery__grid--small). */

/* Lightbox (photo viewer) */
.r-gallery-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #1a0b05;
  color: var(--cream);
  font-family: var(--sans);
}
.r-gallery-lb[hidden] { display: none; }
.r-gallery-lb__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(12px, 3vw, 28px);
  font-size: 14px;
}
.r-gallery-lb__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 clamp(8px, 7vw, 96px);
}
.r-gallery-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-height: 100%; max-width: 100%; }
.r-gallery-lb__img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; }
.r-gallery-lb__cap { max-width: 80ch; padding: 12px 4px 18px; font-size: 14.5px; line-height: 1.5; text-align: center; color: var(--cream); }
.r-gallery-lb__cap strong { display: inline-block; margin-right: 8px; padding: 3px 7px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal); background: var(--cream); }
.r-gallery-lb button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 1.5px solid rgba(250, 249, 245, .45);
  border-radius: 0;
  cursor: pointer;
}
.r-gallery-lb button:hover { border-color: var(--cream); }
.r-gallery-lb button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.r-gallery-lb .r-gallery-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 22px; }
.r-gallery-lb__prev { left: clamp(8px, 2vw, 28px); }
.r-gallery-lb__next { right: clamp(8px, 2vw, 28px); }
.r-gallery-lb button[disabled] { opacity: .3; cursor: default; }
body.r-gallery-lb-open { overflow: hidden; }

@media (max-width: 900px) {
  .r-main .r-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .r-gallery__item--lead { grid-column: 1 / -1; grid-row: auto; }
  /* An odd photo left over at the end fills the row (not in the small-photo grid) */
  .r-gallery__grid:not(.r-gallery__grid--small) .r-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .r-gallery-lb__stage { padding: 0; }
  .r-gallery-lb .r-gallery-lb__nav { top: auto; bottom: 8px; transform: none; }
  .r-gallery-lb__fig { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .r-gallery__link:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Equal Housing page (equalhousing.php). Everything is r-eho.
   -------------------------------------------------------------------------- */

.r-eho-page { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 128px); }
.r-main .r-eho-page h1 {
  max-width: 18ch;
  margin: 0 0 clamp(32px, 4vw, 52px);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  color: var(--brown);
}
.r-eho-body {
  display: grid;
  grid-template-columns: 112px minmax(0, 68ch);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1.5px solid var(--brown);
}
/* The Equal Housing Opportunity artwork (white on transparent) used as a mask,
   so it can be drawn in brand brown. */
.r-eho-logo {
  display: block;
  width: 112px;
  aspect-ratio: 185 / 176;
  background-color: var(--brown);
  -webkit-mask: url(../img/homepage/equal-housing.webp) center / contain no-repeat;
  mask: url(../img/homepage/equal-housing.webp) center / contain no-repeat;
}
@media (forced-colors: active) { .r-eho-logo { forced-color-adjust: none; background-color: CanvasText; } }
.r-main .r-eho-text p { margin: 0 0 1.2em; }
.r-main .r-eho-statement { font: 400 clamp(21px, 2vw, 25px)/1.5 var(--serif); color: var(--charcoal); }
/* The long visible web address must wrap on phones, or the page scrolls sideways */
.r-main .r-eho-link {
  color: var(--brown);
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-underline-offset: 3px;
}
.r-main .r-eho-link:hover { color: #c2401c; }

/* Accessible-apartments note: its own panel, clearly apart from the legal statement */
.r-main .r-eho-ada {
  max-width: calc(112px + clamp(24px, 4vw, 48px) + 68ch);
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: 18px 22px;
  background: var(--paper);
  border-left: 4px solid var(--orange);
  font-size: 17px;
  color: var(--charcoal);
}
.r-main .r-eho-ada a { color: var(--brown); font-weight: 600; text-underline-offset: 3px; }
.r-main .r-eho-ada a:hover { color: #c2401c; }

@media (max-width: 700px) {
  .r-eho-body { grid-template-columns: 1fr; }
  .r-eho-logo { width: 84px; }
}

/* --------------------------------------------------------------------------
   Maps (Neighborhood and Contact pages). Everything is r-map.
   The maps are drawn by MapLibre GL JS (assets/vendor/maplibre/) from the
   style in assets/data/map-style-cara.json; assets/js/cara-map.js sets them
   up. These rules restyle MapLibre's own pieces in the brand: square corners,
   thin borders, the site's type. The map credits stay visible and readable.
   -------------------------------------------------------------------------- */
.r-map {
  position: relative;
  z-index: 0;              /* keeps the map's layers under the sticky header */
  isolation: isolate;
  width: 100%;
  height: 100%;
  background: var(--paper);
  border: 1px solid rgba(80, 33, 15, .18);
  font-family: var(--sans);
}
.r-map, .r-map * { box-sizing: content-box; }
.r-map.is-failed { visibility: hidden; }

/* zoom buttons */
.r-map .maplibregl-ctrl-group { border: 1px solid rgba(80, 33, 15, .22); border-radius: 0; background: #FFFDF9; }
.r-map .maplibregl-ctrl-group:not(:empty) { box-shadow: 0 1px 3px rgba(30, 12, 4, .12); }
.r-map .maplibregl-ctrl-group button { width: 34px; height: 34px; border-radius: 0; }
.r-map .maplibregl-ctrl-group button + button { border-top-color: rgba(80, 33, 15, .15); }
.r-map .maplibregl-ctrl-group button:focus-visible { box-shadow: 0 0 0 2px var(--orange) inset; }

/* map credits */
.r-map .maplibregl-ctrl-attrib { padding: 2px 8px; background: rgba(255, 253, 249, .9); color: var(--charcoal); font: 11px/1.5 var(--sans); }
.r-map .maplibregl-ctrl-attrib a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.r-map .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 0; }

/* markers: real buttons */
.r-map .r-map-pin { width: 24px; height: 32px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.r-map .r-map-pin--cara { width: 36px; height: 46px; }
.r-map-pin__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(30, 12, 4, .45)); }
.r-map-pin path { stroke: #fff; stroke-width: 1.5; }
.r-map-pin--dining path { fill: var(--orange); }
.r-map-pin--shops path { fill: var(--olive); }
.r-map-pin--transit path { fill: var(--charcoal); }
.r-map-pin__dot { fill: #fff; }
.r-map-pin--cara path { fill: var(--brown); stroke: var(--orange); stroke-width: 2; }
.r-map-pin--cara .r-map-pin__house { fill: var(--cream); stroke: none; }
.r-map .r-map-pin:focus-visible, .r-map .r-map-stop:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.r-map .maplibregl-marker.is-active { z-index: 4; }

/* shuttle stops: small square "bus stop" markers */
.r-map .r-map-stop { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.r-map-stop__dot { display: block; width: 9px; height: 9px; background: #FFFDF9; border: 2.5px solid var(--brown); box-shadow: 0 1px 2px rgba(30, 12, 4, .35); }

/* "The Cara" label beside its pin */
.r-map .r-map-label {
  position: absolute;
  right: 44px;
  top: 7px;
  padding: 4px 8px;
  background: var(--brown);
  box-shadow: 0 1px 3px rgba(30, 12, 4, .35);
  color: var(--cream);
  font: 600 12px/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* pop-ups */
.r-map .r-map-pop .maplibregl-popup-content { min-width: 180px; padding: 14px 30px 14px 16px; border-radius: 0; background: #FFFDF9; border-top: 3px solid var(--orange); box-shadow: 0 4px 16px rgba(30, 12, 4, .22); color: var(--charcoal); font-family: var(--sans); }
.r-map .r-map-pop .maplibregl-popup-tip { box-shadow: none; }
.r-map .r-map-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #FFFDF9; }
.r-map .r-map-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--orange); }
.r-map .maplibregl-popup-close-button { width: 28px; height: 28px; border-radius: 0; color: var(--muted); font-size: 20px; }
.r-main .r-map-pop__kicker { margin: 0 0 4px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.r-main .r-map-pop__name { margin: 0 18px 4px 0; font: 400 20px/1.15 var(--serif); color: var(--brown); }
.r-main .r-map-pop__addr { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.r-main .r-map-pop__link {
  display: inline-flex;
  gap: 6px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
}
.r-main .r-map-pop__link::after { content: "\2197"; }
.r-main .r-map-pop__link:hover { text-decoration: underline; }

/* "Show all" / "Nearby" */
.r-map-viewctl { display: flex; flex-direction: column; background: #FFFDF9; border: 1px solid rgba(80, 33, 15, .22); box-shadow: 0 1px 3px rgba(30, 12, 4, .12); }
.r-map .r-map-viewctl__btn {
  margin: 0;
  padding: 10px 12px;
  background: #FFFDF9;
  border: 0;
  border-bottom: 1px solid rgba(80, 33, 15, .15);
  border-radius: 0;
  color: var(--brown);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.r-map .r-map-viewctl__btn:last-child { border-bottom: 0; }
.r-map .r-map-viewctl__btn:hover { background: var(--paper); }
.r-map .r-map-viewctl__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* shuttle legend */
.r-map-legend { display: flex; flex-direction: column; gap: 3px; max-width: 230px; padding: 8px 10px; background: rgba(255, 253, 249, .94); border: 1px solid rgba(80, 33, 15, .18); color: var(--charcoal); font: 500 12px/1.3 var(--sans); }
.r-map-legend[hidden] { display: none; }
.r-map-legend__row { display: flex; align-items: center; gap: 8px; }
.r-map-legend__line { flex: none; width: 26px; height: 0; border-top: 3px dashed var(--brown); }
.r-map-legend__line--ruggles { border-top-style: dotted; border-top-color: var(--muted); }
.r-map-legend__note { margin-top: 2px; color: var(--muted); font-size: 11px; }

/* "Click the map to zoom" hint */
.r-map-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1000;
  max-width: 80%;
  padding: 10px 16px;
  background: rgba(53, 51, 51, .86);
  color: var(--cream);
  font: 500 14px/1.3 var(--sans);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .2s;
}
.r-map-hint.is-on { opacity: 1; }
/* MapLibre's own two-finger message on phones, in the site type */
.r-map .maplibregl-cooperative-gesture-screen { background: rgba(53, 51, 51, .6); font: 500 15px/1.4 var(--sans); }

/* Shown instead of the map when it cannot be loaded */
.r-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
  border: 1px solid rgba(80, 33, 15, .18);
  text-align: center;
}
.r-main .r-map-fallback p { max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--charcoal); }
@media (prefers-reduced-motion: reduce) { .r-map-hint { transition: none; } }

/* --------------------------------------------------------------------------
   Neighborhood page (neighborhood.php). Everything is r-nbhd.
   Intro, then the place lists beside the map (assets/js/neighborhood-map.js),
   the Newmarket shuttle, photos and the closing band.
   -------------------------------------------------------------------------- */
body.neighborhood main.site-main { padding-top: 0; } /* style.css adds 34px here */

/* Intro */
.r-nbhd-intro { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); }
.r-nbhd-intro .r-eyebrow { color: var(--olive); }
.r-main .r-nbhd-intro h1 {
  margin: 12px 0 6px;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  color: var(--brown);
}
.r-main .r-nbhd-intro__sub { font: 400 clamp(22px, 2.4vw, 30px)/1.2 var(--serif); color: var(--charcoal); }
.r-main .r-nbhd-intro__lead { max-width: 56ch; margin-top: 18px; font-size: 18px; }
.r-nbhd-intro__walk { margin-top: 28px; }

/* Lists beside the map */
.r-nbhd { padding: 0 0 clamp(48px, 7vw, 96px); }
.r-main .r-nbhd__heading {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  color: var(--charcoal);
}
.r-nbhd__layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  grid-template-rows: auto clamp(500px, 68vh, 640px);
  grid-template-areas: "chips chips" "panel map";
  column-gap: 28px;
}
.r-nbhd__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.r-nbhd__panel {
  grid-area: panel;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1.5px solid var(--brown);
  scrollbar-width: thin;
}
.r-nbhd__mapwrap { grid-area: map; position: relative; min-height: 0; }

.r-main .r-nbhd__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 13px;
  background: transparent;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  color: var(--brown);
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.r-main .r-nbhd__chip:hover { background: var(--paper); }
.r-main .r-nbhd__chip[aria-pressed="true"] { background: var(--brown); color: var(--cream); }
.r-main .r-nbhd__chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.r-nbhd__count { font-weight: 500; opacity: .7; }

.r-nbhd__swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--cream);
}
.r-nbhd__chip--dining .r-nbhd__swatch, .r-nbhd__swatch--dining { background: var(--orange); }
.r-nbhd__chip--shops .r-nbhd__swatch, .r-nbhd__swatch--shops { background: var(--olive); }
.r-nbhd__chip--transit .r-nbhd__swatch, .r-nbhd__swatch--transit { background: var(--charcoal); }

.r-main .r-nbhd__group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 4px 8px;
  font: 500 13px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.r-nbhd__group-title .r-nbhd__swatch { box-shadow: none; }
.r-nbhd__group[hidden] { display: none; }
.r-main .r-nbhd__list { margin: 0; padding: 0; list-style: none; }
.r-main .r-nbhd__list li {
  color: var(--charcoal);
  position: relative;   /* anchors the screen-reader-only text inside the scrolling list */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.r-main .r-nbhd__place {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 11px 4px 11px 10px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--charcoal);
  font: inherit;
  text-align: left;
}
.r-main button.r-nbhd__place { cursor: pointer; transition: background-color .15s; }
.r-main button.r-nbhd__place:hover { background: var(--paper); }
.r-main button.r-nbhd__place:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.r-main button.r-nbhd__place.is-active { background: var(--paper); border-left-color: var(--orange); }
.r-nbhd__name { display: block; font: 500 16px/1.3 var(--sans); color: var(--brown); }
.r-nbhd__meta { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.r-nbhd__dist { white-space: nowrap; }
.r-main .r-nbhd__gmaps {
  flex: none;
  padding: 8px 6px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  white-space: nowrap;
}
.r-main .r-nbhd__gmaps:hover { text-decoration: underline; }
.r-main .r-nbhd__gmaps::after { content: " \2197"; }
.r-main .r-nbhd__note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* Without JavaScript: no map or filter, just the full two-column list */
.r-nbhd:not(.r-nbhd--js) .r-nbhd__layout { display: block; height: auto; }
.r-nbhd:not(.r-nbhd--js) .r-nbhd__chips,
.r-nbhd:not(.r-nbhd--js) .r-nbhd__mapwrap { display: none; }
.r-nbhd:not(.r-nbhd--js) .r-nbhd__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; overflow: visible; }

/* "Back to list" (shown after a list entry moved the page down to the map) */
.r-main .r-nbhd-back {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 1001;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--brown);
  border: 0;
  color: var(--cream);
  font: 600 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(30, 12, 4, .3);
  cursor: pointer;
}
.r-main .r-nbhd-back::before { content: "\2191"; font-size: 15px; }
.r-main .r-nbhd-back[hidden] { display: none; }
.r-main .r-nbhd-back:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Getting around: the Newmarket shuttle */
.r-nbhd-go { padding: clamp(48px, 7vw, 88px) 0; background: var(--paper); }
.r-nbhd-go__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.r-nbhd-go .r-eyebrow { color: var(--olive); }
.r-main .r-nbhd-go h2 { margin: 12px 0 18px; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; color: var(--brown); }
.r-main .r-nbhd-go__pass { margin: 0 0 18px; padding: 16px 18px; background: var(--cream); border-left: 3px solid var(--orange); font: 400 clamp(19px, 1.8vw, 23px)/1.35 var(--serif); color: var(--brown); }
.r-main .r-nbhd-go p { max-width: 54ch; margin: 0 0 16px; }
.r-main .r-nbhd-go__connect { margin: 0 0 22px; padding: 0; list-style: none; }
.r-main .r-nbhd-go__connect li { color: var(--charcoal); display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.r-nbhd-go__connect strong { min-width: 9.5em; font-weight: 600; color: var(--brown); }
.r-nbhd-go__lines { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.r-main .r-nbhd-go__line-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); }
.r-main .r-nbhd-go__stops { margin: 0; padding: 0; list-style: none; counter-reset: stop; }
.r-main .r-nbhd-go__stops li { color: var(--charcoal); position: relative; display: flex; margin: 0; border-bottom: 1px solid var(--line); counter-increment: stop; }
.r-main .r-nbhd-go__stops .r-nbhd__place { padding: 9px 4px 9px 36px; }
.r-nbhd-go__stops li::before { content: counter(stop); position: absolute; left: 4px; top: 9px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--brown); background: var(--cream); color: var(--brown); font: 600 11px/18px var(--sans); text-align: center; pointer-events: none; }
.r-nbhd-go__stops .r-nbhd__name { font-size: 15px; }
.r-nbhd-go__stops li.is-nearest .r-nbhd__name::after { content: "Nearest stop"; display: inline-block; margin-left: 8px; padding: 2px 6px; background: var(--orange); color: var(--brown); font: 600 10px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; }
.r-nbhd-go__swatch { flex: none; width: 26px; height: 0; border-top: 3px dashed var(--brown); }
.r-nbhd-go__swatch--ruggles { border-top-style: dotted; border-top-color: var(--muted); }

/* Photos: a small mosaic; wide photos span two columns; never shown larger than their files */
.r-nbhd-photos { padding: clamp(48px, 7vw, 88px) 0; }
.r-main .r-nbhd-photos h2 { margin: 0 0 20px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; color: var(--charcoal); }
.r-main .r-nbhd-photos__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 14px;
  max-width: 1180px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-main .r-nbhd-photos__grid li { margin: 0; }
.r-main .r-nbhd-photos__grid li.is-wide { grid-column: span 2; }
.r-main .r-nbhd-photos__grid li.is-big { grid-column: span 2; grid-row: span 2; position: relative; aspect-ratio: 1200 / 808; }
.r-main .r-nbhd-photos__grid li.is-tall { grid-row: span 2; position: relative; min-height: 100%; }
.r-main .r-nbhd-photos__grid img { width: 100%; height: 100%; aspect-ratio: 574 / 383; object-fit: cover; }
.r-main .r-nbhd-photos__grid li.is-wide img { aspect-ratio: auto; }
/* the large photos fill the two rows the small ones set, without changing the row height */
.r-main .r-nbhd-photos__grid li.is-big img,
.r-main .r-nbhd-photos__grid li.is-tall img { position: absolute; inset: 0; aspect-ratio: auto; }
.r-main .r-nbhd-photos__credit { max-width: 90ch; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.r-main .r-nbhd-photos__credit a { color: var(--brown); }

/* Tablet and phone: chips, then the map, then the full list */
@media (max-width: 900px) {
  .r-nbhd__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "chips" "map" "panel";
  }
  .r-nbhd__mapwrap { height: min(62vh, 460px); margin-bottom: 20px; }
  .r-nbhd__panel { overflow: visible; }
  .r-main .r-nbhd-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .r-nbhd-go__grid, .r-nbhd-go__lines { grid-template-columns: 1fr; }
  .r-nbhd:not(.r-nbhd--js) .r-nbhd__panel { display: block; }
}
@media (max-width: 420px) {
  .r-main .r-nbhd__chip { padding: 8px 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .r-main .r-nbhd__chip, .r-main button.r-nbhd__place { transition: none; }
}

/* --------------------------------------------------------------------------
   Contact page (contact.php). Everything is r-contact.
   The form keeps its original names, reCAPTCHA button and PHP handler; only
   its look changes here. The map uses the shared "Maps" rules above.
   -------------------------------------------------------------------------- */
body.contact main.site-main { padding-top: 0; } /* style.css adds 34px here */

.r-contact-page { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 88px); }
.r-main .r-contact-page h1 {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  color: var(--brown);
}
.r-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* The form, on a slightly deeper cream panel */
.r-contact-formcard { padding: clamp(24px, 3.5vw, 44px); background: var(--paper); }
.r-main .r-contact-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--brown);
}
.r-main .r-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0;
}
.r-contact-field { min-width: 0; }
.r-contact-field--full { grid-column: 1 / -1; }
.r-main .r-contact-form label {
  display: block;
  margin: 0 0 7px;
  font: 600 15px/1.3 var(--sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--brown);
}
.r-main .r-contact-form input,
.r-main .r-contact-form textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  font: 400 17px/1.4 var(--sans);   /* 16px or more: phones don't zoom in on tap */
  color: var(--charcoal);
  background: #fff;
  border: 1.5px solid rgba(53, 51, 51, .3);
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.r-main .r-contact-form textarea { min-height: 160px; resize: vertical; }
.r-main .r-contact-form input:focus,
.r-main .r-contact-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--brown); }
.r-main .r-contact-submit { min-width: 200px; min-height: 52px; border-radius: 0; box-shadow: none; cursor: pointer; }
.r-main .r-contact-submit:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* The two existing messages: error above the form, thank-you in its place */
.r-main .r-contact-alert,
.r-main .r-contact-thanks {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--cream);
  border-left: 4px solid var(--orange);
  font-size: 17px;
  color: var(--charcoal);
}
.r-main .r-contact-thanks { margin: 0; border-left-color: var(--brown); font: 400 22px/1.4 var(--serif); color: var(--brown); }

/* Contact details: label over a thin brown rule, like the Home price blocks */
.r-contact-details { display: grid; gap: 28px; }
.r-contact-block { padding-top: 14px; border-top: 1.5px solid var(--brown); }
.r-main .r-contact-block h2 {
  margin: 0 0 8px;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
}
.r-main .r-contact-block p + p { margin-top: 8px; }
.r-main .r-contact-block a { color: var(--brown); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.r-main .r-contact-block a:hover { color: #c2401c; }
.r-main .r-contact-phone { font: 400 30px/1.15 var(--serif); text-decoration: none; }
.r-main .r-contact-email { overflow-wrap: anywhere; }
.r-main .r-contact-social { margin: 0; padding: 0; list-style: none; }
.r-main .r-contact-social li { color: var(--charcoal); display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 0; }
.r-contact-icon { flex: none; color: var(--brown); }

/* Directions */
.r-contact-map { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); background: var(--paper); }
.r-main .r-contact-map h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--brown);
}
.r-contact-mapwrap { position: relative; height: clamp(320px, 32vw, 420px); }
/* no JavaScript: no map area, just the Get directions button */
.no-js .r-contact-mapwrap,
.r-contact-mapwrap:has(> .r-map:not(.is-ready)) { display: none; }
.r-main .r-contact-dir { margin-top: 20px; }

@media (max-width: 900px) {
  .r-contact-grid { grid-template-columns: 1fr; }
  .r-contact-details { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 560px) {
  .r-main .r-contact-form { grid-template-columns: 1fr; gap: 18px; }
  .r-contact-formcard { margin: 0 calc(-1 * var(--gutter)); padding: 24px var(--gutter) 28px; }
  .r-main .r-contact-submit { width: 100%; }
  .r-contact-details { grid-template-columns: 1fr; gap: 24px; }
  .r-main .r-contact-dir .r-btn { display: block; }
}

/* --------------------------------------------------------------------------
   Residents page (residents.php). Everything is r-res.
   -------------------------------------------------------------------------- */
body.residents main.site-main { padding-top: 0; } /* style.css adds 34px here */

.r-res-page { padding: clamp(40px, 7vw, 104px) 0 clamp(56px, 9vw, 128px); }
.r-res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.r-main .r-res-text h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  color: var(--brown);
}
.r-main .r-res-lead { max-width: 34ch; margin: 0 0 32px; font-size: 20px; line-height: 1.5; }
.r-main .r-res-btn { padding: 18px 30px; font-size: 15px; }
.r-main .r-res-help { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.r-main .r-res-help a { color: var(--brown); font-weight: 600; text-underline-offset: 3px; }
.r-main .r-res-help a:hover { color: #c2401c; }
.r-main .r-res-photo { margin: 0; }
.r-main .r-res-photo img { width: 100%; aspect-ratio: 953 / 667; object-fit: cover; }

/* Portal action tiles */
.r-res-actions { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); background: var(--paper); }
.r-main .r-res-actions__h {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  color: var(--brown);
}
.r-main .r-res-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.r-main .r-res-tiles li { margin: 0; color: var(--charcoal); }
.r-main .r-res-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  background: var(--cream);
  border-top: 3px solid var(--brown);
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.r-main .r-res-tile:hover { border-top-color: var(--orange); box-shadow: 0 6px 18px rgba(53, 51, 51, .08); }
.r-main .r-res-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.r-res-tile__icon { display: block; width: 48px; height: 48px; color: var(--brown); }
.r-res-tile__accent { fill: var(--orange); stroke: none; }
.r-res-tile__accent-line { stroke: var(--orange); }
.r-res-tile__label {
  display: block;
  margin: 18px 0;
  font: 400 clamp(21px, 1.8vw, 24px)/1.2 var(--serif);
  color: var(--brown);
}
.r-res-tile__go {
  display: block;
  margin-top: auto;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown);
}
.r-res-tile__go::after { content: "\2197"; margin-left: 8px; font-size: 15px; }

@media (max-width: 1000px) {
  .r-main .r-res-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .r-res-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .r-main .r-res-btn { display: block; width: 100%; }
  .r-res-text .r-actions { display: block; }
  .r-main .r-res-tiles { gap: 12px; }
  .r-main .r-res-tile { padding: 20px 16px 18px; }
  .r-res-tile__icon { width: 40px; height: 40px; }
  .r-main .r-res-tile__label { margin: 14px 0; font-size: 19px; }
  .r-res-tile__go { font-size: 11.5px; letter-spacing: .06em; }
}

/* --------------------------------------------------------------------------
   Privacy page (privacy.php). Everything is r-privacy.
   Deliberately quiet: one narrow column, small type, a modest heading.
   -------------------------------------------------------------------------- */
body.privacy main.site-main { padding-top: 0; } /* style.css adds 34px here */

.r-privacy-page { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.r-privacy-body { max-width: 62ch; }
.r-main .r-privacy-body h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.2vw, 38px);
  line-height: 1.1;
  color: var(--brown);
}
.r-main .r-privacy-body p { margin: 0 0 1em; font-size: 15px; line-height: 1.65; }
.r-main .r-privacy-body .r-privacy-effective {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.r-main .r-privacy-body strong { font-weight: 600; color: var(--brown); }
.r-main .r-privacy-body a { color: var(--brown); font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 3px; }
.r-main .r-privacy-body a:hover { color: #c2401c; }
.r-main .r-privacy-body .r-privacy-owner { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }

/* --------------------------------------------------------------------------
   Footer
   style.css has no footer rules, but its white list text and uppercase
   headings are reset here.
   -------------------------------------------------------------------------- */
.site-footer.r-footer {
  padding: 56px 0 28px;
  background: var(--brown);
  color: var(--cream);
  font-size: 15px;
}
.r-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.r-footer .r-logo--footer {
  width: 200px;
  margin-bottom: 18px;
  background-color: var(--cream);
}
.r-footer__brand p { margin-top: 10px; }
/* Orange headings on brown: 4.75:1 contrast */
.r-footer .r-footer__heading {
  margin: 0 0 12px;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.r-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2;
  color: var(--cream);
}
.r-footer a { text-decoration: none; }
.r-footer a:hover { text-decoration: underline; }
.r-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 249, 245, .2);
  font-size: 13px;
}
.r-footer .copyright { margin: 0; }
.r-footer__eho { display: flex; align-items: center; gap: 10px; }
.r-footer .r-footer__eho img {
  width: auto;
  height: 40px;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* --------------------------------------------------------------------------
   Tablet and phone
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .r-pricing__grid { grid-template-columns: 1fr; gap: 20px; }
  .r-walkscore { flex-direction: column; align-items: flex-start; }
  .r-cards__grid { grid-template-columns: 1fr; gap: 40px; }
  .r-band__grid,
  .r-band--flip .r-band__grid { grid-template-columns: 1fr; }
  .r-band--flip .r-band__media { order: 0; }
  .r-footer__inner { grid-template-columns: 1fr 1fr; }
  .r-footer__legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  /* Phone hero: photo on top, headline and buttons on brown below,
     so nothing covers the skyline or The BASE. */
  .r-hero {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
  }
  .r-main .r-hero__media {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 6 / 7;
  }
  .r-hero::after { display: none; }
  .r-hero__text { padding-top: 28px; padding-bottom: 28px; }
  .r-main .r-hero h1 { margin-bottom: 24px; }
}

/* Visitors who ask their device for less motion get no slides or smooth effects */
@media (prefers-reduced-motion: reduce) {
  .r-util *, .r-header *, .r-main *, .r-footer *,
  .r-util *::after, .r-header *::after, .r-main *::after, .r-footer *::after {
    transition: none !important; /* !important: must beat every component's own transition */
    animation: none !important;
  }
  .r-link-arrow:hover::after,
  .r-price:hover .r-price__view::after { transform: none; }
}