/* Modern design (Option B) - Variant K 'Heritage Editorial', wired 2026-07-08.
   Loaded only by the owner-modern page (chrome:false). All classes k-prefixed
   and vars --k-* so nothing collides with site.css. Photo URLs resolve within
   /assets/. */
:root {
    --k-paper: #faf8f4;
    --k-paper-deep: #f2eee7;
    --k-stone: #e9e4da;
    --k-ink: #211e1a;
    --k-ink-soft: #57524a;
    --k-brass: #8a6519;
    --k-gold: #f0a000;
    --k-line: #ddd6ca;
    --k-disp: 'Montserrat', 'Helvetica Neue', sans-serif;
    --k-sans: 'Lato', 'Helvetica Neue', sans-serif;
  }
  .kx, .kx * { margin: 0; padding: 0; box-sizing: border-box; }
  .kx { font-family: var(--k-sans); color: var(--k-ink); background: var(--k-paper); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
  .kx img { max-width: 100%; display: block; }
  .kx a { color: inherit; }

  .k-wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
  .k-kicker { font-family: var(--k-disp); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-brass); }
  .k-kicker::after { content: ""; display: inline-block; width: 42px; height: 1px; background: var(--k-brass); margin: 0 0 4px 16px; opacity: .55; }
  .kx h1, .kx h2, .kx h3 { font-family: var(--k-disp); font-weight: 400; line-height: 1.18; letter-spacing: -0.005em; }

  /* fade-up reveal. Below-the-fold sections are JS-gated (IntersectionObserver
     adds .k-in). The HERO must NOT be: its text is the page's LCP element, and
     gating it on deferred JS pushed mobile LCP past 5s while the network sat
     idle. The hero fades via a pure-CSS animation that starts at first paint. */
  .k-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
  .k-rv.k-in { opacity: 1; transform: none; }
  @keyframes k-fadeup { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .k-hero .k-rv { animation: k-fadeup .9s ease .05s both; transition: none; }
  @media (prefers-reduced-motion: reduce) { .k-rv, .k-hero .k-rv { opacity: 1; transform: none; transition: none; animation: none; } }
  /* With scripting off nothing would ever reveal these blocks, so they start visible. */
  @media (scripting: none) { .k-rv, .k-hero .k-rv { opacity: 1; transform: none; transition: none; animation: none; } }

  /* buttons */
  .k-btn { display: inline-block; font-family: var(--k-disp); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 19px 42px; border: 2px solid currentColor; background: transparent; transition: background .35s ease, color .35s ease, border-color .35s ease; }
  .k-btn-light { color: #fff; }
  .k-btn-light:hover { background: #fff; color: var(--k-ink); }
  /* Keep hero controls visually integrated with the photography. Pure-white
     type, border, and a restrained dark text shadow preserve the intended
     transparent treatment without the opaque brown backing. The hero scrim
     remains the primary contrast layer; scrolled controls restyle on paper. */
  .k-head:not(.k-scrolled) .k-btn-light,
  .k-head:not(.k-scrolled) .k-nav-menu summary {
    background: transparent;
    color: #fff;
    border-color: #fff;
    text-shadow: 0 1px 3px rgba(18, 15, 12, .9);
  }
  .k-head:not(.k-scrolled) {
    background: linear-gradient(180deg, rgba(18, 15, 12, .18) 0%, rgba(18, 15, 12, .05) 72%, transparent 100%);
  }
  .k-head:not(.k-scrolled) .k-btn-light:hover,
  .k-head:not(.k-scrolled) .k-btn-light:focus {
    background: #fff;
    color: var(--k-ink);
    text-shadow: none;
  }
  .k-nav-menu summary:focus-visible,
  .k-login summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(33, 30, 26, .85);
  }
  .k-head.k-scrolled .k-nav-menu summary:focus-visible,
  .k-head.k-scrolled .k-login summary:focus-visible {
    outline-color: var(--k-ink);
    box-shadow: 0 0 0 5px rgba(250, 248, 244, .95);
  }
  .k-btn-ink { color: var(--k-ink); }
  .k-btn-ink:hover { background: var(--k-ink); color: var(--k-paper); }
  .k-textlink { font-family: var(--k-disp); font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--k-brass); padding-bottom: 5px; transition: border-color .3s, color .3s; }
  .k-textlink:hover { color: var(--k-brass); }
  /* hover: the arrow nudges forward */
  .k-textlink::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .3s ease; }
  .k-textlink:hover::after, .k-textlink:focus-visible::after { transform: translateX(6px); }
  .k-hero .k-textlink:hover { color: #e8c988; border-bottom-color: #fff; }

  /* ============ peek-a-boo header ============ */
  .kx { position: relative; }
  .k-head { position: absolute; top: 0; left: 0; right: 0; z-index: 40; transition: transform .45s ease, background .35s ease, box-shadow .35s ease; }
  .k-head.k-scrolled, .k-head.k-hidden { position: fixed; }
  .k-head.k-hidden { transform: translateY(-100%); }
  .k-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 18px 34px; max-width: 1400px; margin: 0 auto; transition: padding .35s ease; }
  .k-logo { display: block; text-decoration: none; flex-shrink: 0; }
  .k-logo img { height: 42px; width: auto; transition: height .35s ease; }
  .k-logo .k-logo-dark { display: none; }
  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: #fff; 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-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
  nav.k-nav a:hover { border-bottom-color: rgba(255,255,255,.75); }
  .k-head-utility { display: flex; align-items: center; gap: 20px; color: #fff; flex-shrink: 0; }
  .k-head-utility .k-phone { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; position: relative; }
  /* hover: gold rule sweeps in under the number (brass once the bar is on paper) */
  .k-head-utility .k-phone::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: #e8c988; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .k-head-utility .k-phone:hover::after, .k-head-utility .k-phone:focus-visible::after { transform: scaleX(1); }
  .k-head.k-scrolled:not([data-tone="dark"]) .k-phone::after { background: var(--k-brass); }
  .k-head-utility .k-btn { padding: 12px 24px; font-size: 11px; }
  /* scrolled state: white text -> dark on paper */
  .k-head.k-scrolled { background: var(--header-bg, rgba(250,248,244,.97)); box-shadow: 0 1px 0 var(--k-line), 0 8px 30px rgba(33,30,26,.06); }
  .k-head.k-scrolled .k-head-inner { padding: 12px 34px; }
  .k-head.k-scrolled .k-logo .k-logo-light { display: none; }
  .k-head.k-scrolled .k-logo .k-logo-dark { display: block; }
  .k-head.k-scrolled nav.k-nav a { color: var(--k-ink); }
  .k-head.k-scrolled nav.k-nav a:hover { border-bottom-color: var(--k-brass); }
  .k-head.k-scrolled .k-head-utility { color: var(--k-ink); }
  .k-head.k-scrolled .k-head-utility .k-btn { color: var(--k-ink); }
  .k-head.k-scrolled .k-head-utility .k-btn:hover { background: var(--k-ink); color: var(--k-paper); }
  .k-head.k-scrolled .k-logo .k-logo-dark { mix-blend-mode: multiply; }
  /* Color-smart returned bar over dark sections (Work With Us, footer):
     the probe in k-modern.js sets data-tone + --header-bg. */
  .k-head.k-scrolled[data-tone="dark"] { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.25); }
  .k-head.k-scrolled[data-tone="dark"] .k-logo .k-logo-light { display: block; }
  .k-head.k-scrolled[data-tone="dark"] .k-logo .k-logo-dark { display: none; }
  .k-head.k-scrolled[data-tone="dark"] nav.k-nav a { color: #f5f2ec; }
  .k-head.k-scrolled[data-tone="dark"] .k-head-utility { color: #f5f2ec; }
  .k-head.k-scrolled[data-tone="dark"] .k-head-utility summary,
  .k-head.k-scrolled[data-tone="dark"] .k-head-utility .k-phone { color: #f5f2ec; }
  .k-head.k-scrolled[data-tone="dark"] .k-head-utility .k-btn { color: #f5f2ec; border-color: #f5f2ec; }
  .k-head.k-scrolled[data-tone="dark"] .k-head-utility .k-btn:hover { background: #f5f2ec; color: var(--k-ink); }
  @media (prefers-reduced-motion: reduce) { .k-head { transition: none; } .k-phone::after, .k-textlink::after { transition: none; } }



  /* Nav hover dropdowns: pure CSS (:hover/:focus-within), so keyboard users get
     them and touch users still have working top-level links. ::before bridges
     the hover gap between the link and the panel. */
  .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: 14px; 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: 14px; }
  .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(--k-paper); border: 1px solid var(--k-line); border-top: 2px solid var(--k-ink); box-shadow: 0 18px 44px rgba(33,30,26,.18); padding: 8px 0; }
  .k-nav .k-drop-panel a, .k-head.k-scrolled .k-nav .k-drop-panel a { display: block; padding: 11px 20px; color: var(--k-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; }
  .k-nav .k-drop-panel a:hover, .k-nav .k-drop-panel a:focus { background: var(--k-paper-deep); border-bottom: 0; }

  /* Utility portal login: white over the hero, ink once the header goes solid.
     Hidden at compact widths (the Menu panel carries the portal links there). */
  .k-login { position: relative; }
  .k-login summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: #fff; 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: #e8c988; transition: transform 0.15s ease; }
  .k-login[open] summary::after { transform: rotate(180deg); }
  .k-head.k-scrolled .k-login summary { color: var(--k-ink); }
  .k-head.k-scrolled .k-login summary::after { color: var(--k-brass); }
  .k-login-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: block; min-width: 200px; list-style: none; margin: 0; padding: 8px 0; background: var(--k-paper); border: 1px solid var(--k-line); border-top: 2px solid var(--k-ink); box-shadow: 0 18px 44px rgba(33,30,26,.22); }
  .k-login-panel li { list-style: none; }
  .k-login-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; color: var(--k-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 (home): hidden on desktop; K-styled <details> disclosure below 1180.
     White chrome over the hero, dark once the header goes solid. */
  .k-nav-menu { display: none; }
  @media (max-width: 1360px) {
    .k-login { display: none; }
    .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: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; border: 2px solid #fff; padding: 10px 14px; 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: #e8c988; transition: transform 0.15s ease; }
    .k-nav-menu[open] summary::after { transform: rotate(180deg); }
    .k-head.k-scrolled .k-nav-menu summary { color: var(--k-ink); border-color: var(--k-ink); }
    .k-head.k-scrolled .k-nav-menu summary::after { color: var(--k-brass); }
    .k-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: block; min-width: 270px; list-style: none; margin: 0; padding: 8px 0; background: var(--k-paper); border: 1px solid var(--k-line); border-top: 2px solid var(--k-ink); box-shadow: 0 18px 44px rgba(33,30,26,.22); }
    .k-menu-panel li { list-style: none; }
    .k-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 22px; color: var(--k-ink); text-decoration: none; font-family: var(--k-disp); font-weight: 500; font-size: 13.5px; letter-spacing: 0.04em; }
    .k-menu-panel a:hover, .k-menu-panel a:focus { background: var(--k-paper-deep); }
    .k-menu-panel li.k-menu-rule { border-top: 1px solid var(--k-line); margin-top: 8px; padding-top: 8px; }
  }
  @media (max-width: 560px) {
    .k-nav-menu summary { padding: 8px 10px; font-size: 10px; letter-spacing: 0.1em; }
    /* Four utility items (phone, Log In, Rental Analysis, Menu) overflow a
       375px viewport — measured scrollWidth 416 vs clientWidth 375. Drop the
       two that the Menu panel already duplicates verbatim ("Call <number>",
       Owner Portal, Resident Portal), keeping the primary owner CTA and the
       Menu. Nothing becomes unreachable. */
    /* The phone hero source and scrim USED to live here and never applied: the
       unconditional .k-hero::before/::after below carry equal specificity and
       come later in the file, so they won at every width. Both now live in the
       last 560 block at the bottom, which wins. Do not put them back here. */
    .k-head-utility .k-phone,
    .k-head-utility .k-login { display: none; }
    .k-head-utility { gap: 10px; }
    /* Sizing for this breakpoint lives in the LAST 560 block near the bottom
       of this file — it wins the cascade over anything set here. */
  }

  /* ============ hero ============ */
  .k-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; isolation: isolate; }
  .k-hero::before { content: ""; position: absolute; inset: 0; background: url('office-522-dusk.jpg') center 38% / cover no-repeat; z-index: -2; }
  /* axe flags the white header text on this page as low-contrast: it cannot
     see the photo (::before) or this scrim (::after), so it tests against the
     paper body. Composited against the actual scrim the text measures ≥5:1 —
     verified manually 2026-07-10; do not "fix" by darkening the approved hero. */
  /* Hero legibility (Greg, 2026-08-05): the lower ramp starts earlier and
     lands a touch deeper so the lower-left text block always sits on glass,
     while the top half of the photo stays as clean as before. */
  /* Two scrim layers: the vertical ramp (unchanged) plus a left band that
     carries the bare eyebrow with no outline/chip (both rejected, Greg
     2026-08-27/28). Measured against the actual asset: brightest pixel in the
     eyebrow zone is rgb(255,255,239); stacked alphas put worst-case contrast
     at ~5.5:1 for white text. The band fades out by 62% so the house and
     porch stay untouched. */
  .k-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,19,15,.50) 0%, rgba(22,19,15,.34) 36%, rgba(22,19,15,0) 62%), linear-gradient(180deg, rgba(22,19,15,.52) 0%, rgba(22,19,15,.30) 32%, rgba(22,19,15,.58) 58%, rgba(22,19,15,.80) 100%); z-index: -1; }
  .k-hero-content { color: #fff; padding: 140px 48px 68px; max-width: 1400px; margin: 0 auto; width: 100%; }
  /* Bare white eyebrow: no outline, chip, or box (all rejected). The left
     scrim band on .k-hero::after carries its contrast; see the measurement
     note there before touching either. */
  .k-hero .k-kicker { color: #fff; font-size: 11px; }
  .k-hero .k-kicker::after { background: #e8c988; }
  .k-hero h1 { font-size: clamp(28px, 3.3vw, 44px); max-width: 20ch; margin: 20px 0 22px; font-weight: 400; }
  .k-hero p { max-width: 52ch; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.92); }
  .k-hero-ctas { display: flex; align-items: center; gap: 32px; margin-top: 34px; flex-wrap: wrap; }
  .k-hero .k-btn { padding: 16px 36px; }
  .k-hero .k-textlink { color: #fff; border-bottom-color: #e8c988; }
  .k-hero-hairline { position: absolute; left: 48px; right: 48px; bottom: 0; height: 1px; background: rgba(255,255,255,.28); }

  /* ============ statement ============ */
  .k-statement { padding: 122px 0 108px; text-align: center; }
  .k-statement h2 { font-size: clamp(30px, 3.3vw, 46px); font-weight: 400; max-width: 26ch; margin: 30px auto 34px; }
  .k-statement h2 em { font-style: italic; font-weight: 400; color: var(--k-brass); }
  .k-statement > .k-wrap > p { max-width: 62ch; margin: 0 auto; color: var(--k-ink-soft); font-size: 17.5px; }
  .k-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; max-width: 1080px; margin: 70px auto 0; border-top: 1px solid var(--k-line); }
  .k-pillar { padding: 42px 40px 8px; border-left: 1px solid var(--k-line); text-align: left; }
  .k-pillar:first-child { border-left: none; }
  .k-pillar h3 { font-size: 19px; margin-bottom: 12px; font-weight: 500; }
  .k-pillar p { font-size: 15.5px; color: var(--k-ink-soft); line-height: 1.65; }

  /* ============ owner services (stone band) ============ */
  .k-services { background: var(--k-stone); padding: 116px 0; }
  .k-services-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 90px; align-items: start; }
  .k-services h2 { font-size: clamp(29px, 2.8vw, 40px); font-weight: 400; margin: 26px 0 26px; }
  .k-services .k-lede { color: var(--k-ink-soft); font-size: 17px; max-width: 46ch; }
  .k-services .k-fine { margin-top: 28px; font-size: 15px; color: var(--k-ink-soft); }
  .k-services-cta { margin-top: 40px; }
  .k-svc-list { border-top: 1px solid rgba(56,52,46,.28); }
  .k-svc { display: grid; grid-template-columns: 74px 1fr; gap: 22px; padding: 32px 6px; border-bottom: 1px solid rgba(56,52,46,.28); }
  .k-svc .k-num { font-family: var(--k-disp); font-size: 20px; color: var(--k-brass); font-weight: 400; padding-top: 2px; }
  .k-svc h3 { font-size: 19px; font-weight: 500; margin-bottom: 8px; }
  .k-svc p { font-size: 15.5px; color: var(--k-ink-soft); line-height: 1.65; }

  /* ============ heritage band ============ */
  .k-heritage { position: relative; padding: 160px 0; color: #fff; isolation: isolate; }
  .k-heritage::before { content: ""; position: absolute; inset: 0; background: url('office-522-front.jpg') center 30% / cover no-repeat; z-index: -2; }
  .k-heritage::after { content: ""; position: absolute; inset: 0; background: rgba(23,20,16,.68); z-index: -1; }
  .k-heritage { text-align: center; }
  .k-heritage .k-kicker { color: #e8c988; }
  .k-heritage .k-kicker::after { background: #e8c988; }
  .k-heritage h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 400; max-width: 24ch; margin: 26px auto 24px; }
  .k-heritage p { max-width: 60ch; margin: 0 auto; color: rgba(255,255,255,.88); font-size: 16.5px; }
  .k-heritage .k-heritage-facts { display: flex; justify-content: center; gap: 54px; margin-top: 44px; flex-wrap: wrap; }
  .k-heritage .k-fact { font-family: var(--k-disp); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #e8c988; border-top: 1px solid rgba(232,201,136,.45); padding-top: 14px; }
  .k-heritage a.k-fact { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(232,201,136,.55); }
  .k-heritage a.k-fact:hover, .k-heritage a.k-fact:focus-visible { text-decoration-color: #e8c988; }

  /* ============ managers ============ */
  .k-statement-mgrs { margin-top: 62px; text-align: left; }
  .k-managers { background: var(--k-paper-deep); padding: 114px 0; }
  .k-managers-head { text-align: center; max-width: 640px; margin: 0 auto 62px; }
  .k-managers h2 { font-size: clamp(29px, 2.8vw, 40px); font-weight: 400; margin: 24px 0 20px; }
  .k-managers-head p { color: var(--k-ink-soft); }
  .k-mgr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
  .k-mgr { border-top: 2px solid var(--k-ink); padding-top: 18px; }
  /* Portrait 3:4 frame: the headshots are 3:4 crops (the old WordPress files carried
     white side padding that a square cover-fit kept on screen, 2026-09-14). */
  .k-mgr-photo { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 16px; }
  .k-mgr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
  .k-mgr .k-m-name { font-family: var(--k-disp); font-size: 15.5px; font-weight: 600; }
  .k-mgr .k-m-dre { font-size: 12px; letter-spacing: 0.08em; color: var(--k-ink-soft); margin-top: 4px; }
  .k-mgr .k-m-tel { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; margin-top: 6px; }
  .k-mgr .k-m-tel a { text-decoration: none; color: var(--k-brass); }

  /* ============ listings ============ */
  .k-leasing { padding: 120px 0 104px; }
  .k-leasing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 54px; }
  .k-leasing h2 { font-size: clamp(29px, 2.8vw, 40px); font-weight: 400; margin-top: 24px; }
  .k-leasing-side { padding-bottom: 10px; }
  .k-track-wrap { position: relative; padding: 0 68px; }
  .k-track-wrap button { position: absolute; top: 33%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--k-ink); background: var(--k-paper); color: var(--k-ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 6px 22px rgba(33,30,26,.14); transition: background .3s, color .3s, opacity .3s; }
  .k-track-wrap button:hover { background: var(--k-ink); color: var(--k-paper); }
  .k-track-wrap button[disabled] { opacity: .3; cursor: default; pointer-events: none; }
  .k-track-wrap .k-lz-prev { left: 6px; }
  .k-track-wrap .k-lz-next { right: 6px; }
  .k-listing-track { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .k-listing-track::-webkit-scrollbar { display: none; }
  .k-listing-track .k-card { flex: 0 0 calc((100% - 60px) / 3); }
  .k-card { text-decoration: none; display: block; }
  .k-card .k-ph { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 20px; background: var(--k-stone); }
  .k-card .k-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
  .k-card:hover .k-ph img { transform: scale(1.045); }
  .k-card .k-rent { font-family: var(--k-disp); font-size: 21px; font-weight: 500; }
  .k-card .k-rent span { font-family: var(--k-sans); font-size: 13px; font-weight: 400; color: var(--k-ink-soft); letter-spacing: 0.04em; }
  .k-card .k-addr { font-size: 15px; color: var(--k-ink-soft); margin-top: 5px; }
  .k-card .k-meta { font-family: var(--k-disp); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-brass); margin-top: 12px; border-top: 1px solid var(--k-line); padding-top: 12px; }
  .k-leasing-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--k-line); display: flex; justify-content: space-between; align-items: center; gap: 30px; font-size: 15px; color: var(--k-ink-soft); }

  /* ============ closing cta ============ */
  .k-close-cta { position: relative; padding: 140px 0; text-align: center; color: #fff; isolation: isolate; }
  .k-close-cta::before { content: ""; position: absolute; inset: 0; background: url('office-522-dusk.jpg') center 62% / cover no-repeat; z-index: -2; }
  .k-close-cta::after { content: ""; position: absolute; inset: 0; background: rgba(23,20,16,.72); z-index: -1; }
  .k-close-cta .k-kicker { color: #e8c988; }
  .k-close-cta .k-kicker::after { background: #e8c988; }
  .k-close-cta h2 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 400; max-width: 24ch; margin: 26px auto 22px; }
  .k-close-cta p { max-width: 52ch; margin: 0 auto; color: rgba(255,255,255,.88); }
  .k-close-cta .k-hero-ctas { justify-content: center; }
  .k-close-cta .k-phone-line { margin-top: 30px; font-size: 14px; letter-spacing: 0.06em; color: rgba(255,255,255,.75); }
  .k-close-cta .k-phone-line a { color: #e8c988; text-decoration: none; font-weight: 700; }

  /* ============ quiet renter line ============ */
  .k-renter-line { background: var(--k-paper); padding: 34px 0; border-bottom: 1px solid var(--k-line); }
  .k-renter-line .k-wrap { display: flex; justify-content: center; gap: 14px; align-items: baseline; flex-wrap: wrap; text-align: center; }
  .k-renter-line p { font-size: 15px; color: var(--k-ink-soft); }
  .k-renter-line a { color: var(--k-brass); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(138,101,25,.4); }

  /* ============ footer ============ */
  .k-footer { color: var(--k-ink-soft); background: var(--k-paper); font-size: 15px; border-top: 1px solid var(--k-line); padding: 76px 0 40px; }
  .k-footer .wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; }
  .k-footer a { color: var(--k-ink-soft); display: inline-flex; align-items: center; min-height: 32px; }
  .k-footer a:hover, .k-footer a:focus { color: var(--k-ink); text-decoration: underline; }
  .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(--k-line); }
  .k-foot-brand .k-fb-name { color: var(--k-ink); font-family: var(--k-disp); font-size: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .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(--k-ink); font-size: 13px; letter-spacing: 0.14em; }
  .k-foot-stack section + section { margin-top: 22px; }
  .k-foot-grid ul { list-style: none; }
  .k-foot-grid li { margin-bottom: 8px; font-size: 15px; }
  .k-foot-grid a { text-decoration: none; transition: color .3s; }
  .k-foot-grid address { font-style: normal; font-size: 15px; color: var(--k-ink-soft); line-height: 1.8; }
  .k-foot-legal { padding-top: 26px; display: grid; gap: 8px; font-size: 12.5px; color: var(--k-ink-soft); }
  .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; }

  /* ============ responsive ============ */
  @media (max-width: 1360px) {
    nav.k-nav { display: none; }
    .k-mgr-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
  }
  @media (max-width: 900px) {
    .k-wrap, .k-footer .wrap { padding: 0 26px; }
    .k-head-inner { padding: 14px 26px; }
    .k-head.k-scrolled .k-head-inner { padding: 10px 26px; }
    .k-hero-content { padding: 120px 26px 60px; }
    .k-hero-hairline { left: 26px; right: 26px; }
    .k-track-wrap { padding: 0; }
    .k-track-wrap button { display: none; }
    .k-listing-track { display: grid; grid-template-columns: 1fr; gap: 22px; overflow: visible; }
    .k-listing-track .k-card { flex: none; }
    .k-listing-track .k-card:nth-child(n+4) { display: none; }
    .k-pillars { grid-template-columns: 1fr; border-top: none; }
    .k-pillar { border-left: none; border-top: 1px solid var(--k-line); padding: 34px 6px 6px; }
    .k-services-grid, .heritage-grid { grid-template-columns: 1fr; gap: 48px; }
    .k-leasing-head { flex-direction: column; align-items: flex-start; }
    .k-foot-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
    .k-mgr-grid { grid-template-columns: repeat(2, 1fr); }
    .k-head-utility .k-phone { display: none; }
  }
  @media (max-width: 620px) {
    .k-foot-grid { grid-template-columns: 1fr; gap: 36px; }
  }
  /* NOTE: this is the THIRD max-width:560px block in this file and it wins the
     cascade, so header sizing for small screens has to live HERE. An earlier
     560 block above sets the same properties and is overridden. */
  @media (max-width: 560px) {
    /* 320px budget: 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-utility .k-head-cta { width: 120px; padding: 0 6px; min-height: 38px; font-size: 9.5px; letter-spacing: 0.04em; }
    .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; }

    /* Phone hero. These two rules were written into the FIRST 560 block on
       2026-08-20 and never took effect, because the unconditional .k-hero
       pseudo-element rules sit lower in the file at the same specificity. So
       phones have been served the 1312w desktop image and the desktop scrim.
       Re-measured 2026-08-29 at 320px against the glyph boxes: eyebrow 3.04:1
       and h1 2.33:1, both under WCAG 1.4.3. Restored here, where they win. */
    .k-hero::before { background-image: url('office-522-dusk-m.jpg'); }
    /* The two photo bands lower on the page had no phone variant at all, so a
       412px phone was also downloading the 1360w heritage photo (349KB) and the
       1312w dusk photo again for the closing band (250KB): measured 2026-09-01,
       715KB of office photos on one phone visit. Both are decorative backgrounds
       behind a dark scrim, so the 880w crops are more than enough. This is the
       LAST 560 block, which is the one that wins. */
    .k-heritage::before { background-image: url('office-522-front-m.jpg'); }
    .k-close-cta::before { background-image: url('office-522-dusk-m.jpg'); }
    /* Phone crop puts bright sky behind the eyebrow and white stucco behind
       the middle of the h1, so this ramp is heavier than the desktop one
       through the whole text zone. */
    .k-hero::after { background: linear-gradient(180deg, rgba(22,19,15,.58) 0%, rgba(22,19,15,.60) 28%, rgba(22,19,15,.84) 55%, rgba(22,19,15,.92) 100%); }
  }
  /* Tablet hero. Between 561 and 900px the eyebrow is nearly as wide as the
     viewport, so its tail runs past the 62% fade-out of the desktop left band:
     measured 4.38:1 at 768 on 2026-08-29, just under the 4.5 minimum. Same two
     layers as desktop, band deepened slightly and its fade pushed right. */
  @media (min-width: 561px) and (max-width: 900px) {
    .k-hero::after { background: linear-gradient(100deg, rgba(22,19,15,.56) 0%, rgba(22,19,15,.42) 40%, rgba(22,19,15,0) 82%), linear-gradient(180deg, rgba(22,19,15,.52) 0%, rgba(22,19,15,.30) 32%, rgba(22,19,15,.58) 58%, rgba(22,19,15,.80) 100%); }
  }
  /* target size: manager name/phone links get a >=24px hit box without layout shift */
  .k-mgr .k-m-name a, .k-mgr .k-m-tel a { display: inline-block; padding: 4px 0; margin: -4px 0; }
  .k-textlink, .k-phone-line a { display: inline-block; padding: 4px 0; margin: -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 900px block above hides this
     link on phones and an unconditional display here would resurrect it. */
  .k-head-utility .k-phone { padding: 1px 0; }

/* 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; }