/* Modern theme (Option B) — interior-page reskin, wired 2026-07-08.
   Loads AFTER tokens.css and site.css on every page in the /modern/ tree
   (via {{page.theme_css}} in the head partial). Two layers:
   1. token overrides — warm paper/ink palette, radius 0, so every component
      site.css draws is re-tinted at the source;
   2. component reskins — Montserrat-400 editorial type, ghost buttons,
      hairline rules, stone bands in place of dark bands, plus the K chrome
      (solid peek-a-boo header, compact menu, light footer).
   The Modern homepage (/modern/) is chrome:false and uses k-modern.css instead. */

/* Keyboard-scrolled focus targets must clear the sticky header (WCAG 2.4.11) */
html { scroll-padding-top: 84px; }

:root {
  --ink: #211e1a;
  --paper: #faf8f4;
  --line: #ddd6ca;
  --line-dark: #38342e;
  --muted: #57524a;
  --gold-text: #8a6519;
  --radius: 0px;
  --k-stone: #e9e4da;
  --k-paper-deep: #f2eee7;
  --k-brass: #8a6519;
  --k-disp: 'Montserrat', Arial, sans-serif;
}

body { font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 400; line-height: 1.2; letter-spacing: -0.005em; }
h1 { font-size: clamp(31px, 3.4vw, 44px); }
h2 { font-size: clamp(24px, 2.5vw, 32px); }
h3 { font-size: 19px; font-weight: 500; }
.skip-link { background: var(--ink); color: var(--paper); }

/* ---------- K chrome: solid peek-a-boo header ---------- */
.k-head { position: sticky; top: 0; z-index: 40; background: rgba(250,248,244,.97); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(33,30,26,.05); transition: transform .45s ease; }
.k-head.k-hidden { transform: translateY(-100%); }
.k-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 30px; max-width: 1400px; margin: 0 auto; }
.k-logo { display: block; flex-shrink: 0; }
.k-logo img { height: 42px; width: auto; display: block; mix-blend-mode: multiply; }
nav.k-nav { display: flex; align-items: center; gap: 22px; }
/* six-group nav (2026-08-28) measures ~700px; tighten the gap on narrow
   desktops so it clears the utility cluster with margin */
@media (max-width: 1439px) { nav.k-nav { gap: 15px; } }
nav.k-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; font-family: var(--k-disp); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; padding: 12px 0 6px; border-bottom: 1px solid transparent; transition: border-color .3s; }
nav.k-nav a:hover, nav.k-nav a:focus { border-bottom-color: var(--k-brass); }
nav.k-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.k-head-utility { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.k-phone { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: var(--ink); white-space: nowrap; flex-shrink: 0; position: relative; }
/* hover: brass rule sweeps in under the number (gold when the bar sits on a dark band) */
.k-phone::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--k-brass); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.k-phone:hover::after, .k-phone:focus-visible::after { transform: scaleX(1); }
.k-head[data-tone="dark"] .k-phone::after { background: #e8c988; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--k-disp); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 0 20px; min-height: 42px; border: 2px solid var(--ink); background: transparent; color: var(--ink); transition: background .3s, color .3s; white-space: nowrap; }
.k-btn:hover, .k-btn:focus { background: var(--ink); color: var(--paper); }


/* Nav hover dropdowns (interior header): pure CSS :hover/:focus-within. */
.k-nav-item { position: relative; display: inline-flex; align-items: center; }
.k-drop { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(8px); padding-top: 12px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 60; }
.k-drop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; }
.k-nav-item:hover > .k-drop, .k-nav-item:focus-within > .k-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.k-drop-panel { min-width: 224px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--ink); box-shadow: 0 18px 44px rgba(33,30,26,.16); padding: 8px 0; }
nav.k-nav .k-drop-panel a { display: block; padding: 11px 20px; color: var(--ink); font-family: var(--k-disp); font-size: 13px; font-weight: 500; letter-spacing: 0.03em; text-transform: none; border-bottom: 0; white-space: nowrap; }
nav.k-nav .k-drop-panel a:hover, nav.k-nav .k-drop-panel a:focus { background: var(--k-paper-deep); border-bottom: 0; }

/* Utility portal login (wide widths only; the compact Menu panel carries the
   portal links below the breakpoint). The .nav-menu class keeps site.js
   outside-click/Escape behavior. */
.k-login { position: relative; }
.k-login summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.k-login summary::-webkit-details-marker { display: none; }
.k-login summary::after { content: "\25BE"; color: var(--k-brass); transition: transform 0.15s ease; }
.k-login[open] summary::after { transform: rotate(180deg); }
.k-login summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper); }
.k-login-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: block; min-width: 200px; list-style: none; margin: 0; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--ink); box-shadow: 0 18px 44px rgba(33,30,26,.16); padding: 8px 0; }
.k-login-panel li { list-style: none; }
.k-login-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; color: var(--ink); text-decoration: none; font-family: var(--k-disp); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; }
.k-login-panel a:hover, .k-login-panel a:focus { background: var(--k-paper-deep); }

/* Compact menu (≤1360px): same no-JS <details> pattern as Classic, K skin.
   The .nav-menu class keeps site.js outside-click/Escape behavior. */
.k-nav-menu { display: none; }
@media (max-width: 1360px) {
  nav.k-nav, .k-phone, .k-login { display: none; }
  .k-head-inner { padding: 11px 22px; }
  .k-logo img { height: 36px; }
  .k-nav-menu { display: block; position: relative; }
  .k-nav-menu summary { list-style: none; cursor: pointer; font-family: var(--k-disp); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border: 2px solid var(--ink); padding: 0 16px; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; }
  .k-nav-menu summary::-webkit-details-marker { display: none; }
  .k-nav-menu summary::after { content: "\25BE"; color: var(--k-brass); transition: transform 0.15s ease; }
  .k-nav-menu[open] summary::after { transform: rotate(180deg); }
  .k-nav-menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper); }
  .k-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: block; min-width: 270px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--ink); box-shadow: 0 18px 44px rgba(33,30,26,.18); padding: 8px 0; }
  .k-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 22px; color: var(--ink); text-decoration: none; font-family: var(--k-disp); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; border-left: 3px solid transparent; }
  .k-menu-panel a:hover, .k-menu-panel a:focus { background: var(--k-paper-deep); }
  .k-menu-panel a[aria-current="page"] { border-left-color: var(--gold); color: var(--k-brass); }
  .k-menu-panel li.menu-rule { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
}
/* Four utility items (phone, Log In, Rental Analysis, Menu) overflow a 375px
   viewport — measured scrollWidth 416 vs clientWidth 375, originating at
   .k-head-utility. Drop the two the Menu panel already duplicates verbatim
   ("Call <number>", Owner Portal, Resident Portal) and keep the primary owner
   CTA plus the Menu. Nothing becomes unreachable. Must stay in sync with the
   same rule in k-modern.css: the homepage ships its own inline header. */
@media (max-width: 560px) {
  .k-head-utility .k-phone,
  .k-head-utility .k-login { display: none; }
  /* Hiding the two duplicated items is not enough on its own. At 320px:
     16 outer + 100 logo + 6 head gap + 120 CTA + 6 utility gap +
     64 Menu = 312px, leaving 8px. */
  .k-head-inner { padding: 10px 8px; gap: 6px; }
  .k-logo { width: 100px; min-height: 38px; display: flex; align-items: center; }
  .k-logo img { width: 100%; height: auto; }
  .k-head-utility { gap: 6px; min-width: 0; }
  .k-head-cta { width: 120px; font-size: 10.5px; padding: 0 6px; min-height: 38px; letter-spacing: 0.04em; }
  .k-cta-free { display: none; } /* "Free Rental Analysis" at 9.5px overflowed its 120px box by 6px at 375; the Menu panel keeps the full label */
  .k-nav-menu summary { justify-content: center; width: 64px; padding: 0 6px; min-height: 38px; gap: 4px; font-size: 9.5px; letter-spacing: 0.04em; }
}

/* ---------- K chrome: light footer ---------- */
footer.k-footer { background: var(--paper); color: var(--muted); border-top: 1px solid var(--line); padding: 76px 0 40px; font-size: 15px; }
footer.k-footer a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; transition: color .3s; }
footer.k-footer a:hover, footer.k-footer a:focus { color: var(--ink); text-decoration: underline; }
footer.k-footer a:focus-visible { outline: 2px solid var(--k-brass); outline-offset: 2px; }
.k-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.k-foot-grid h2 { font-family: var(--k-disp); font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-brass); margin-bottom: 16px; }
.k-foot-brand h2 { color: var(--ink); font-size: 13px; letter-spacing: 0.14em; }
.k-foot-grid ul { list-style: none; }
.k-foot-grid li { margin-bottom: 8px; }
.k-foot-grid address { font-style: normal; line-height: 1.8; }
.k-foot-stack section + section { margin-top: 22px; }
.k-foot-legal { padding-top: 26px; display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); }
.k-foot-legal p { max-width: none; line-height: 1.7; }
/* affiliation marks: HUD Equal Housing mark + member wordmarks (swap the
   wordmarks for official logo files from the NAR/NARPM member portals when
   Greg supplies them) */
.k-foot-marks { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.k-foot-marks .k-mark-word { font-family: var(--k-disp); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; border: 1px solid currentColor; padding: 5px 9px; white-space: nowrap; }
@media (max-width: 900px) { .k-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 620px) { .k-foot-grid { grid-template-columns: 1fr; } }

/* ---------- Section rhythm ---------- */
.lead { padding: 66px 0 52px; border-bottom: 1px solid var(--line); }
/* Hero rhythm: the H1 sits 66px below the nav on every section page. An eyebrow row
   (breadcrumbs or a back link, 19px + 14px margin = 33px) lives INSIDE that zone.
   preflight.py and tools/a11y-check.mjs guard this; keep them in sync. */
.lead:has(> .wrap > .crumbs), .lead:has(> .wrap > .lead-eyebrow) { padding-top: 33px; }
.lead p.intro { margin-top: 14px; font-size: 17.5px; }
.listings { padding: 56px 0 52px; }
.renter-services { background: var(--k-paper-deep); padding: 62px 0; }
.team { padding: 62px 0; }

/* ---------- Buttons: gold slabs become ink; ghosts stay ghosts ---------- */
.btn { font-family: var(--k-disp); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); min-height: 48px; }
.btn:hover, .btn:focus { background: transparent; color: var(--ink); }
.btn-gold { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-gold:hover, .btn-gold:focus { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--ink); color: var(--paper); }
.btn-ghost-light { border-color: rgba(255,255,255,.6); }

/* ---------- Panels, links, FAQ blocks ---------- */
.panel { background: var(--k-paper-deep); border: 1px solid var(--line); border-top: 2px solid var(--ink); }
.panel a.panel-link { font-family: var(--k-disp); font-weight: 600; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 1px solid var(--k-brass); }
.panel a.panel-link:hover, .panel a.panel-link:focus { color: var(--k-brass); }
a.see-all { display: inline-flex; align-items: center; min-height: 24px; }
.grid-foot a.see-all { font-family: var(--k-disp); font-weight: 600; font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: 1px solid var(--k-brass); }
.qa { border-top: 1px solid var(--line); padding-top: 18px; }
.qa h3 { font-size: 17.5px; }

/* ---------- Owner band: dark charcoal becomes stone ---------- */
.owners { background: var(--k-stone); color: var(--ink); }
.owners h2 { color: var(--ink); }
.owners ul li::before { background: var(--k-brass); }
.owners .cta { border-color: rgba(56,52,46,.3); }
.owners .cta p.small { color: var(--muted); }
.owners .fine { color: var(--muted); }
.link-light { color: var(--ink); text-decoration: underline; }
.manager-strip p { color: var(--muted); }
.manager-strip .faces img { border-color: var(--paper); background: var(--k-stone); }
.lead-form { border: 1px solid var(--line); }
.lead-form input, .lead-form textarea, .filter select { border-color: #7a746b; } /* was var(--line) #ddd6ca, ~1.4:1 on white; 4.63:1 now */
.lead-form label, .filter label { font-family: var(--k-disp); letter-spacing: 0.1em; }

/* ---------- Listing cards & detail ---------- */
.card .rent { font-family: var(--k-disp); font-weight: 500; font-size: 21px; }
.card .avail { color: var(--k-brass); letter-spacing: 0.1em; }
.card h3 { font-weight: 500; }
/* The no-photo placeholder inverts for this theme: stone ground with a warm
   brass wash instead of the classic theme's ink panel, and an ink glyph so
   the watermark stays legible on a light card. */
.no-photo {
  background:
    radial-gradient(115% 85% at 84% 14%, rgba(154, 122, 60, 0.16), transparent 62%),
    linear-gradient(158deg, #f2eee6 0%, var(--k-stone) 62%, #ddd6c8 100%);
  border-top: 2px solid var(--ink);
  --no-photo-glyph: rgba(33, 30, 26, 0.15);
  --no-photo-rule: rgba(33, 30, 26, 0.14);
}
.no-photo-addr { color: var(--ink); }
.no-photo-note { color: #4f4a43; } /* brass measured 3.8:1 on the card gradient */
.office-strip { background: var(--k-paper-deep); }
.office-strip-inner img, .office-photo, .hero-photo img, .gallery img { border-color: var(--line); }

/* ---------- Team ---------- */
.person { background: transparent; border: none; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 2px 4px; align-items: flex-start; }
.person:hover { border-color: var(--ink); }
.person img { border-radius: 0; border: none; width: 92px; height: 92px; object-position: 50% 20%; filter: saturate(.92); }
.person a.tel { color: var(--k-brass); }

/* ---------- Resources / knowledge base ---------- */
.crumbs, .lead-eyebrow { font-family: var(--k-disp); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.notice { background: var(--k-paper-deep); border-left: 3px solid var(--k-brass); }
.reviewed { color: var(--k-brass); letter-spacing: 0.12em; }
sup.fn a { color: var(--k-brass); }

/* ---------- Path banner keeps its gold; everything else calms down ---------- */
.path-banner { background: var(--gold); }

/* ---------- Property maps (modern reskin) ---------- */
.view-toggle { border-color: var(--line); }
.view-toggle button { font-family: var(--k-disp); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; background: var(--paper); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.leaflet-popup-content a { color: var(--k-brass); font-family: var(--k-disp); }

/* Quick tiles, K skin: squared corners and display-face labels. */
.qtile { border-radius: 0; border: 1px solid var(--line); }
.qt-text b { font-family: var(--k-disp); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.qt-text i { font-size: 12.5px; letter-spacing: 0.02em; }

/* Color-smart header (ported from lucchesikatzin.com, 2026-08-05): k-site.js
   probes the section beneath the sticky bar and sets data-tone + --header-bg,
   so the bar blends with whatever band it floats over (dark footer included). */
.k-head { background: var(--header-bg, rgba(250,248,244,.97)); }
.k-head .k-logo-light { display: none; }
.k-head[data-tone="dark"] { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.22); }
.k-head[data-tone="dark"] .k-logo-dark { display: none; }
.k-head[data-tone="dark"] .k-logo-light { display: block; mix-blend-mode: normal; }
.k-head[data-tone="dark"] nav.k-nav > a,
.k-head[data-tone="dark"] nav.k-nav > .k-nav-item > a { color: #f5f2ec; }
.k-head[data-tone="dark"] .k-head-utility { color: #f5f2ec; }
.k-head[data-tone="dark"] .k-head-utility summary { color: #f5f2ec; }
.k-head[data-tone="dark"] .k-phone { color: #f5f2ec; }
.k-head[data-tone="dark"] .k-btn { color: #f5f2ec; border-color: #f5f2ec; }
.k-head[data-tone="dark"] .k-btn:hover, .k-head[data-tone="dark"] .k-btn:focus { background: #f5f2ec; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .k-head { transition: none; } .k-phone::after { transition: none; } }

/* ---------- contrast + target-size overrides (measured 2026-08-20) ---------- */
.leaflet-control-attribution { background: #fff !important; color: #333; }
.leaflet-control-attribution a { color: #005a8c !important; }
.lf-directories a { display: inline-block; padding: 4px 0; }
/* Header phone measured 94x23 at 1280 on 2026-08-29: one pixel under WCAG 2.5.8's
   24px minimum, and a utility-bar item has no inline-text exception to lean on.
   Padding only, never display: the breakpoints above hide this link on narrow
   screens and an unconditional display here would resurrect it. */
.k-phone { padding: 1px 0; }

/* Option B: full-width photograph and inverse text; Option A above is unchanged. */
:is(.lead,.lf-hero).photo-lead {
 background-image:linear-gradient(rgba(0,0,0,.40),rgba(0,0,0,.40)),var(--study-image);
 background-position:center,var(--study-position,50% 57%);
 color:#fff;
 border-bottom-color:rgba(255,255,255,.28);
}
:is(.lead,.lf-hero).photo-lead :is(h1,p.intro,p.intro a,.crumbs,.crumbs a,.crumbs .sep,.ov2-owner-links,.ov2-owner-links a,.ov2-owner-links-label,.ov2-jump,.community-guide-nav,.community-guide-nav a,.community-guide-nav strong){color:#fff}
:is(.lead,.lf-hero).photo-lead :is(.ov2-owner-links,.community-guide-nav,.ov2-proof,.ov2-proof-row){border-color:rgba(255,255,255,.32)}
:is(.lead,.lf-hero).photo-lead .ov2-proof{background:transparent}
:is(.lead,.lf-hero).photo-lead :is(.ov2-proof,.ov2-proof p,.ov2-proof p a,.ov2-proof-row,.ov2-proof-row strong){color:#fff}
:is(.lead,.lf-hero).photo-lead .community-guide-nav{background:transparent}
:is(.lead,.lf-hero).photo-lead .community-guide-nav a{border-bottom-color:#e8c988}
:is(.lead,.lf-hero).photo-lead .btn{background:#faf8f4;color:#211e1a;border-color:#faf8f4}
:is(.lead,.lf-hero).photo-lead .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
:is(.lead,.lf-hero).photo-lead .btn:hover,:is(.lead,.lf-hero).photo-lead .btn:focus-visible{background:#e9e4da;color:#211e1a}
:is(.lead,.lf-hero).photo-lead a:focus-visible{outline:2px solid #e8c988;outline-offset:4px}

:is(.lead,.lf-hero).photo-lead .community-guide-label{color:#e8c988}

/* Light local shadow supports inverse text without dimming the photograph. */
:is(.lead,.lf-hero).photo-lead :is(h1,p.intro,.crumbs,.ov2-owner-links,.ov2-jump,.community-guide-nav,.ov2-proof){text-shadow:0 1px 3px rgba(0,0,0,.55)}
:is(.lead,.lf-hero).photo-lead .btn{text-shadow:none}
/* Hills contain more natural shadow than the office: let more daylight through. */
:is(.lead,.lf-hero).photo-lead:is(.ov2-hero,.resident-guide-hero){background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),var(--study-image)}
/* Text-local contrast support. These layers do not change flow or hero sizing. */
:is(.lead,.lf-hero).photo-lead :is(p.intro,.crumbs,.ov2-owner-links,.ov2-jump,.community-guide-nav,.ov2-proof .manager-strip p,.ov2-proof-row){position:relative;isolation:isolate;text-shadow:none}
:is(.lead,.lf-hero).photo-lead :is(p.intro,.crumbs,.ov2-owner-links,.ov2-jump,.community-guide-nav,.ov2-proof .manager-strip p,.ov2-proof-row)::before{
 content:"";position:absolute;inset:-24px;z-index:-1;pointer-events:none;
 background:rgba(0,0,0,var(--contrast-alpha,.20));
 mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 24px),transparent);
 mask-composite:intersect;
}
:is(.lead,.lf-hero).photo-lead .community-guide-label{color:#fff}
:is(.lead,.lf-hero).photo-lead .btn-ghost{background:rgba(0,0,0,.20)}

@media(min-width:1000px){:is(.lead,.lf-hero).photo-lead:is(.ov2-hero,.resident-guide-hero) p.intro{--contrast-alpha:0}}
@media(max-width:999px){:is(.lead,.lf-hero).photo-lead{--contrast-alpha:.30}}
/* Sitewide preview: shared regional image, with the office reserved for Contact. */
:is(.lead,.lf-hero).photo-lead{--study-image:url('/assets/hero-hills-2400.jpg');--study-position:50% 57%}
:is(.lead,.lf-hero).contact-lead{--study-image:url('/assets/office-522-dusk.jpg');--study-position:50% 20%}
:is(.lead,.lf-hero).photo-lead .filter label{color:#fff;text-shadow:0 1px 3px #000}
:is(.lead,.lf-hero).photo-lead :is(input,select,textarea){color:#211e1a;background:#faf8f4;text-shadow:none}
/* Segmented controls on a photo hero: the SELECTED option is the filled cream pill (same as the primary
   button on photo heroes); unselected options are ghost pills (translucent, white text). Greg 2026-09-11:
   a black selected pill next to a cream one read as unselected. Applies to the Residential/Commercial presort,
   the Grid/Map toggle, and the embed site's rentals section pills. */
:is(.lead,.lf-hero).photo-lead :is(.view-toggle,.kind-presort,.rentals-nav){color:#fff;text-shadow:none}
:is(.lead,.lf-hero).photo-lead .view-toggle{border-color:rgba(255,255,255,.8);background:rgba(0,0,0,.20)}
:is(.lead,.lf-hero).photo-lead .view-toggle button{background:transparent;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
:is(.lead,.lf-hero).photo-lead .view-toggle button+button{border-left-color:rgba(255,255,255,.8)}
:is(.lead,.lf-hero).photo-lead .view-toggle button:not([aria-pressed=true]):is(:hover,:focus-visible){background:rgba(255,255,255,.14)}
:is(.lead,.lf-hero).photo-lead .view-toggle button[aria-pressed=true]{background:#faf8f4;color:#211e1a;text-shadow:none}
:is(.lead,.lf-hero).photo-lead .view-toggle button:focus-visible{outline:2px solid #e8c988;outline-offset:-2px}
:is(.lead,.lf-hero).photo-lead .rentals-nav a{background:rgba(0,0,0,.20);color:#fff;border-color:rgba(255,255,255,.8)}
:is(.lead,.lf-hero).photo-lead .rentals-nav a:not([aria-current=page]):is(:hover,:focus-visible){background:rgba(255,255,255,.14);color:#fff}
:is(.lead,.lf-hero).photo-lead .rentals-nav a[aria-current=page]{background:#faf8f4;color:#211e1a;border-color:#faf8f4}
@media(max-width:999px){
 :is(.lead,.lf-hero).photo-lead :is(p.intro,.crumbs,.ov2-owner-links,.ov2-jump,.community-guide-nav,.ov2-proof .manager-strip p,.ov2-proof-row)::before{content:none}
 :is(.lead,.lf-hero).photo-lead :is(h1,p.intro,.crumbs,.ov2-owner-links,.ov2-jump,.community-guide-nav,.ov2-proof){text-shadow:none}
 :is(.lead,.lf-hero).contact-lead{--study-position:60% 25%}
}
@media(forced-colors:active){
 :is(.lead,.lf-hero).photo-lead{background:Canvas;color:CanvasText}
 :is(.lead,.lf-hero).photo-lead :is(h1,p,a,.crumbs,.crumbs a,.ov2-proof,.ov2-proof p,.ov2-proof-row strong,.filter label){color:CanvasText;text-shadow:none}
 :is(.lead,.lf-hero).photo-lead ::before{display:none}
}
/* Mobile shading is part of the image itself, so it cannot create boxes or overflow. */
@media(max-width:999px){
 :is(.lead,.lf-hero).photo-lead,
 :is(.lead,.lf-hero).photo-lead:is(.ov2-hero,.resident-guide-hero){
  background-image:linear-gradient(to bottom,rgba(0,0,0,.56),rgba(0,0,0,.54) 50%,rgba(0,0,0,.46)),var(--study-image);
 }
}

:is(.lead,.lf-hero).photo-lead{background-size:cover;background-repeat:no-repeat}
@media(max-width:900px){:is(.lead,.lf-hero).photo-lead:not(.contact-lead){--study-image:url('/assets/hero-hills-1200.jpg')}}
/* Preserve the approved Contact height and top-aligned site heading rhythm. */
@media(min-width:1000px){.lead.photo-lead.contact-lead{min-height:clamp(363.5px,calc(322.7px + 4.08vw),375.5px)}}

/* Interior templates also have status, subtitle, review-date and resource-link text. */
:is(.lead,.lf-hero).photo-lead :is(p:not(.notice),.reviewed,.community-guide-reviewed,.law-finder-backlink a){color:#fff}
:is(.lead,.lf-hero).photo-lead :is(.ld-status,.ld-title-sub,.lead-eyebrow,.law-finder-backlink){text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* Methodology notices retain their existing paper surface and dark type. */
:is(.lead,.lf-hero).photo-lead .notice{color:var(--ink);text-shadow:none}
@media(forced-colors:active){
 :is(.lead,.lf-hero).photo-lead{background-image:none!important;background-color:Canvas;color:CanvasText}
 :is(.lead,.lf-hero).photo-lead :is(p:not(.notice),.reviewed,.community-guide-reviewed,.law-finder-backlink a){color:CanvasText;text-shadow:none}
}

/* Breathing room between each manager hero and the portrait/bio section. */
.mgr-about { padding-top: 24px; }

/* Owner FAQ disclaimer echoes the transparent Owners hero proof panel. */
.lead.photo-lead .owner-faq-notice {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.lead.photo-lead .owner-faq-notice :is(strong,a) { color: inherit; }
@media (forced-colors: active) {
  .lead.photo-lead .owner-faq-notice { border-color: CanvasText; color: CanvasText; text-shadow: none; }
}

/* Accessibility (WCAG 2.2): Escape dismisses a hover/focus dropdown without
   moving the pointer or focus (1.4.13); a header that holds keyboard focus or
   an open menu never slides out of view (2.4.7, 2.4.11). */
.k-nav-item[data-dismissed] > .k-drop { opacity: 0; visibility: hidden; pointer-events: none; }
.k-head:focus-within, .k-head:has(details[open]) { transform: none; }