/*
Theme Name: Leslie Wells Realty
Theme URI: https://www.lesliewellsrealty.com/
Author: Etch & Anchor
Author URI: https://etchandanchor.com/
Description: Custom theme for Leslie Wells Realty. Maroon and navy brand palette with bright coastal Florida imagery (Fort Hamer Bridge, Gulf beaches, horse country, golf courses) layered over the "North of the River" identity. Designed to wrap IDX Broker / IMPress listing, search, and agent-roster pages seamlessly inside the site's own header, footer, and typography.
Version: 2.10.111
Requires PHP: 7.4
Text Domain: lwr
GitHub Theme URI: shawntabat-star/lesliewellsrealty
Primary Branch: main
Update URI: https://github.com/shawntabat-star/lesliewellsrealty
*/

/*
 * The three headers above exist so this theme can be updated from GitHub
 * rather than by uploading a zip every time.
 *
 * `GitHub Theme URI` and `Primary Branch` are read by Git Updater, which puts
 * the theme on the normal Dashboard > Updates screen. The repository is
 * private, so Git Updater also needs a GitHub personal access token with
 * `repo` scope, entered under Settings > Git Updater.
 *
 * `Update URI` is WordPress core's own header. It stops wordpress.org ever
 * serving an update for a theme whose slug happens to collide with one in the
 * public directory, which would overwrite this theme with someone else's.
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  --lwr-navy:        #182B5C;   /* logo/banner navy, matches her real site */
  --lwr-navy-dark:   #0F1D42;
  --lwr-sand:        #FFFFFF;   /* her real site runs a clean white base */
  --lwr-sand-deep:   #EEF1F5;
  --lwr-ink:         #1E2430;   /* body text */
  --lwr-blue:        #1C74C6;   /* her real nav-bar / CTA royal blue */
  --lwr-blue-light:  #5FA8E0;
  --lwr-blue-deep:   #1A6CB9;   /* brand blue for text on the grey #EEF1F5 surfaces, 4.77:1 */
  --lwr-maroon:      #8E1B30;   /* her real banner/star cardinal red */
  --lwr-maroon-dark: #661320;
  --lwr-white:       #FFFFFF;
  --lwr-sky:         #4FA8D8;   /* Gulf/bay water blue, used sparingly */

  --lwr-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lwr-font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lwr-font-data:    'Public Sans', sans-serif;

  --lwr-radius: 2px;
  --lwr-max: 1180px;
  --lwr-gutter: clamp(1.25rem, 4vw, 3rem);
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--lwr-sand);
  color: var(--lwr-ink);
  font-family: var(--lwr-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--lwr-navy); text-decoration: none; }
a:hover{ color: var(--lwr-maroon); }
/* Links inside running text are underlined: a navy link next to ink body
   text differs by color alone, which isn't enough (WCAG 1.4.1). Buttons
   and classed links keep their own styling. */
.site-main p a:not([class]), .site-main dd a:not([class]){ text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--lwr-maroon);
  outline-offset: 2px;
}
/* Visible to screen readers only, e.g. labeling an icon-only button. */
/* Skip link: the first tab stop on every page, hidden until focused. */
.skip-link{
  position: absolute; left: 1rem; top: -200px; z-index: 100000;
  padding: 0.75rem 1.1rem;
  background: var(--lwr-navy-dark); color: var(--lwr-white);
  font-weight: 600; border-radius: var(--lwr-radius);
}
.skip-link:focus{ top: calc(1rem + var(--wp-admin--admin-bar--height, 0px)); color: var(--lwr-white); outline: 3px solid var(--lwr-blue-light); outline-offset: 2px; }
.site-main:focus{ outline: none; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
h1,h2,h3,h4{
  font-family: var(--lwr-font-display);
  color: var(--lwr-navy-dark);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 500; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
p{ margin: 0 0 1.2em; }
.container{
  max-width: var(--lwr-max);
  margin: 0 auto;
  padding: 0 var(--lwr-gutter);
}
.eyebrow{
  font-family: var(--lwr-font-data);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lwr-blue);
  font-weight: 600;
}
.btn{
  display:inline-block;
  font-family: var(--lwr-font-data);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.7em;
  border-radius: var(--lwr-radius);
  border: 1.5px solid var(--lwr-blue);
  color: var(--lwr-blue);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{ background: var(--lwr-blue); color: var(--lwr-white); }
.btn-solid{ background: var(--lwr-maroon); border-color: var(--lwr-maroon); color: var(--lwr-white); }
.btn-solid:hover{ background: var(--lwr-ink); border-color: var(--lwr-ink); color: var(--lwr-white); }
/* A form on its way (assets/main.js, v2.10.35): "Sending…", held in place, further clicks ignored. */
.btn.is-sending,
.btn.is-sending:hover{ background: var(--lwr-ink); border-color: var(--lwr-ink); color: var(--lwr-white); opacity: 0.85; cursor: progress; }

/* =========================================================
   3. SITE HEADER
   Utility bar + white main bar with dropdown panels at 1240px and up
   (1100px until v2.10.56, when the menu grew to six items);
   below that, a compact bar that opens the full-screen navy
   .mobile-menu. On the front page both float over the hero video until
   the visitor scrolls past it (main.js toggles .is-scrolled).
   ========================================================= */
.utility-bar{
  background: var(--lwr-navy-dark);
  color: #DCE6F2;
  font-family: var(--lwr-font-data);
  font-size: 0.8rem;
}
/* 52px since v2.10.53: the 42px anniversary badge plus 5px above and
   below (62px with the 52px badge from v1.70.0). The floating header's top
   offset below matches it. Two groups (mockup B): how to reach the office
   on the left, beside the badge; visitor tools and "Let's talk" on the
   right. */
.utility-bar-inner{
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 52px;
  padding-block: 5px;
}
.utility-bar a{ color: #DCE6F2; }
.utility-bar a:hover{ color: var(--lwr-white); }
.utility-bar .utility-links--contact{ margin-right: auto; } /* beats the later .utility-links margin: 0 */
.utility-bar .utility-links--contact a{ display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.utility-links--contact svg{ flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utility-bar a.utility-phone{ color: var(--lwr-white); font-weight: 600; }
.utility-bar a.utility-cta{
  display: inline-block; padding: 0.2rem 0.9rem;
  border-radius: 999px; background: var(--lwr-maroon);
  color: var(--lwr-white); font-weight: 600;
}
.utility-bar a.utility-cta:hover{ background: var(--lwr-maroon-dark); color: var(--lwr-white); }
/* Saved homes: the visitor's IDX account (v1.82.0). */
.utility-bar a.utility-saved{ display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.utility-saved svg{ flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.utility-links{ align-items: center; }
/* Accessibility: opens the UserWay toolbar (inc/userway.php), styled like its neighbors. */
.utility-bar .utility-a11y{
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  padding: 0; border: 0; background: none; font: inherit; color: #DCE6F2; cursor: pointer;
}
.utility-bar .utility-a11y:hover{ color: var(--lwr-white); }
.utility-a11y svg, .mobile-menu-a11y svg{ flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utility-anniversary{ display: inline-flex; align-items: center; gap: 0.5rem; }
.utility-anniversary img{ display: block; width: 42px; height: 42px; }
/* Below 1240px there's no utility bar, so the badge sits beside the name
   (tablets, and phones 375px and wider): navy lettering on the white
   header, cream over the homepage hero. */
.header-badge{ display: none; }
.header-badge img{ display: block; width: 38px; height: 38px; }
.header-badge-light{ display: none !important; }
.site-header--floating:not(.is-scrolled) .header-badge-navy{ display: none; }
.site-header--floating:not(.is-scrolled) .header-badge-light{ display: block !important; }
@media (min-width: 641px) and (max-width: 1239px){
  .header-badge{ display: block; margin: 0 auto 0 -1rem; }
  .site-header-inner > .site-brand{ margin-right: 0; }
}
/* Phones 375-640px (v1.72.0): 34px beside the name, 12px each side. It
   leaves 13px before the buttons at 375 and 28px at 390. Below 375 it
   would push the menu button off screen, so those phones keep only the
   badge at the foot of the menu. */
@media (min-width: 375px) and (max-width: 640px){
  /* .site-header prefix: the base .site-header-inner rule comes later. */
  .site-header .site-header-inner{ gap: 12px; }
  .site-header-inner > .site-brand{ margin-right: 0; flex: none; white-space: nowrap; }
  .header-badge{ display: block; margin: 0 auto 0 0; }
  .header-badge img{ width: 34px; height: 34px; }
}
.header-badge{ flex: none; }
.utility-links{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--lwr-white);
  border-bottom: 1px solid #E3E7EE;
}
body.admin-bar .site-header{ top: 32px; }
.site-header-inner{
  position: relative;
  display: flex; align-items: center; gap: 2rem;
  min-height: 76px;
}
.site-brand{
  display: flex; flex-direction: column; gap: 2px;
  margin-right: auto;
  color: var(--lwr-navy-dark);
  text-decoration: none;
}
.site-title{
  font-family: var(--lwr-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
@media (max-width: 360px){
  .site-header-inner{ gap: 0.75rem; }
  .site-header .site-title{ font-size: 1.15rem; }
  .site-header .site-tagline{ letter-spacing: 0.1em; }
}
.site-tagline{
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lwr-blue);
}

.desk-nav-list{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.desk-nav-item{ position: relative; }
.desk-nav-link{
  display: flex; align-items: center; gap: 0.3rem;
  height: 76px; padding: 0; box-sizing: border-box;
  border: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--lwr-font-data); font-size: 0.95rem; font-weight: 600;
  color: var(--lwr-navy);
  cursor: pointer;
}
.desk-nav-link:hover,
.desk-nav-link[aria-current="page"],
.desk-nav-link.is-current,
.has-panel.is-open > .desk-nav-link{
  color: var(--lwr-navy-dark);
  border-bottom-color: var(--lwr-maroon);
}
.nav-chevron{
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.has-panel.is-open .nav-chevron{ transform: rotate(180deg); }

.nav-panel{
  position: absolute; top: 100%; left: -1.25rem; z-index: 60;
  background: var(--lwr-white);
  border-top: 1px solid #E3E7EE;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 40px rgba(15,29,66,0.22);
  /* Shown instantly, no fade: an opacity transition here made Chromium
     paint the open panel as if half transparent under the page banner. */
  visibility: hidden;
}
.has-panel.is-open > .nav-panel{ visibility: visible; }
@media (hover: hover) and (pointer: fine){
  .has-panel:hover > .nav-panel{ visibility: visible; }
}
.nav-panel svg{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-panel-eyebrow{
  display: block;
  font-family: var(--lwr-font-data);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lwr-blue);
}
.nav-panel-links{ list-style: none; margin: 0; padding: 0.6rem 0; }
.nav-panel-links a{
  display: block; padding: 0.55rem 1.25rem;
  color: var(--lwr-navy); font-weight: 500; white-space: nowrap;
}
.nav-panel-links a:hover{ background: #F2F5F9; color: var(--lwr-maroon); }
.nav-panel--list{ min-width: 230px; }
/* The right-hand list panels open leftward: at 1100px the old Insights panel ran 2px past the edge (a sideways scroll even while hidden). */
.desk-nav--right .desk-nav-item:not(:first-child) > .nav-panel:not(.nav-panel--towns){ left: auto; right: -1.25rem; }

.nav-panel--buy{ display: flex; width: 580px; }
.nav-panel--buy .nav-panel-links{ min-width: 210px; border-right: 1px solid #E6E9EF; }
.nav-search{ flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem 1.25rem; }
.nav-search-row{
  display: flex;
  border: 1px solid #CBD3DF; border-radius: 6px; overflow: hidden;
}
.nav-search-row:focus-within{ border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.18); }
.nav-search-row input{
  flex: 1; min-width: 0;
  border: 0; outline: 0; padding: 0.7rem 0.8rem;
  font: inherit; font-size: 0.95rem;
}
.nav-search-row button{
  width: 46px; border: 0; cursor: pointer;
  background: var(--lwr-maroon); color: var(--lwr-white);
  display: flex; align-items: center; justify-content: center;
}
.nav-search-row button:hover{ background: var(--lwr-maroon-dark); }
.nav-search-hint{ font-size: 0.82rem; color: #566072; }
.nav-search-towns{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nav-town-chip{
  padding: 0.35rem 0.85rem;
  border: 1px solid #CBD3DF; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--lwr-navy);
}
.nav-town-chip:hover,
.nav-town-chip.is-match{ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); }
/* "All communities" closes the row (v2.10.38): outlined in navy, with its arrow. */
.nav-town-chip-all{ display: inline-flex; align-items: center; gap: 0.35rem; border-color: var(--lwr-navy); }
.nav-town-chip-all svg{ width: 0.85em; height: 0.85em; flex: none; }

.has-panel--towns{ position: static; }
.nav-panel--towns{ left: var(--lwr-gutter); right: var(--lwr-gutter); display: flex; gap: 2rem; padding: 1.75rem 2rem; }
.nav-towns{ flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.nav-town-card{
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid #E3E7EE; border-top: 3px solid var(--lwr-navy); border-radius: 6px;
  color: var(--lwr-ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.nav-town-card:hover{ border-top-color: var(--lwr-maroon); transform: translateY(-2px); color: var(--lwr-ink); }
.nav-town-name{ font-family: var(--lwr-font-display); font-size: 1.3rem; font-weight: 600; color: var(--lwr-navy-dark); }
.nav-town-zip{ font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--lwr-blue); }
.nav-town-blurb{ flex: 1; font-size: 0.88rem; line-height: 1.45; color: #4A5366; }
.nav-town-cta{ display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--lwr-maroon); }
.nav-panel-side{ width: 220px; flex-shrink: 0; padding-left: 1.5rem; border-left: 1px solid #E6E9EF; }
.nav-panel-side ul{ list-style: none; margin: 0.5rem 0 0; padding: 0; }
.nav-panel-side a{ display: block; padding: 0.45rem 0; border-bottom: 1px solid #EEF1F5; color: var(--lwr-navy); font-weight: 500; }
.nav-panel-side a:hover{ color: var(--lwr-maroon); }

/* Desktop: Menu 2 layout, wordmark centered between the two halves of the menu. */
@media (min-width: 1240px){
  .site-header-inner{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
  .desk-nav--left{ justify-self: start; }
  .desk-nav--right{ justify-self: end; }
  .site-header-inner > .site-brand{ margin-right: 0; align-items: center; text-align: center; }
  .site-header-inner > .site-brand .site-title{ font-size: 1.7rem; }
}
/* Six menu items (Leslie's handoff, v2.10.56): a label never wraps, and
   the header gets more room than the page's 1180px column. 1240-1439px
   tightens the type and gaps so all six fit on one line. */
.desk-nav-link{ white-space: nowrap; }
.utility-bar .container,
.site-header .container{ max-width: 1400px; }
@media (min-width: 1240px) and (max-width: 1439px){
  .site-header .container{ padding-inline: 1.5rem; }
  .desk-nav-list{ gap: 1.05rem; }
  .desk-nav-link{ font-size: 0.88rem; gap: 0.2rem; }
  .site-header .site-header-inner{ gap: 1rem; }
  .site-header-inner > .site-brand .site-title{ font-size: 1.45rem; }
  .desk-search-btn{ width: 34px; }
}
.site-header-actions{ display: none; gap: 0.5rem; }
.icon-btn{
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #CFD6E1; border-radius: 50%;
  background: var(--lwr-white); color: var(--lwr-navy);
  cursor: pointer;
}
.icon-btn svg{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1239px){
  .utility-bar,
  .desk-nav{ display: none; }
  .site-header-actions{ display: flex; }
  .site-header-inner{ min-height: 64px; }
  .site-title{ font-size: 1.25rem; }
}
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}

/* Front page: float over the hero video, then settle into the normal
   white bar once scrolled past it. */
.utility-bar--floating{
  position: absolute; top: 0; left: 0; right: 0; z-index: 51;
  background: rgba(15,29,66,0.4);
}
.site-header--floating{
  position: absolute; top: 52px; left: 0; right: 0;
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 1239px){
  .site-header--floating{ top: 0; }
}
body.admin-bar .utility-bar--floating{ top: 32px; }
body.admin-bar .site-header--floating{ top: 84px; }
@media (max-width: 1239px){
  body.admin-bar .site-header--floating{ top: 32px; }
}
@media (max-width: 782px){
  body.admin-bar .site-header--floating{ top: 46px; }
}
.site-header--floating:not(.is-scrolled) .site-title,
.site-header--floating:not(.is-scrolled) .desk-nav-link{
  color: var(--lwr-white);
  text-shadow: 0 1px 6px rgba(16,28,48,0.5);
}
.site-header--floating:not(.is-scrolled) .site-tagline{ color: #BFD8F0; }
.site-header--floating:not(.is-scrolled) .desk-nav-link:hover,
.site-header--floating:not(.is-scrolled) .has-panel.is-open > .desk-nav-link{ border-bottom-color: var(--lwr-white); }
.site-header--floating:not(.is-scrolled) .icon-btn{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
  color: var(--lwr-white);
}
.site-header--floating.is-scrolled{
  position: fixed; top: 0;
  background: var(--lwr-white);
  border-bottom-color: #E3E7EE;
  box-shadow: 0 2px 14px rgba(15,26,49,0.12);
}
body.admin-bar .site-header--floating.is-scrolled{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header--floating.is-scrolled{ top: 46px; }
}

/* Full-screen menu, below 1240px. */
.mobile-menu{
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--lwr-navy-dark); color: var(--lwr-white);
}
.mobile-menu[hidden]{ display: none; }
/* Logged-in staff: WordPress's toolbar sits above everything and would
   cover the close button. */
body.admin-bar .mobile-menu{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .mobile-menu{ top: 46px; }
}
.mobile-menu-inner{
  min-height: 100%; box-sizing: border-box;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 0 var(--lwr-gutter) 1.5rem;
}
.mobile-menu-head{ display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.mobile-menu .site-brand{ margin-right: 0; }
.mobile-menu .site-title{ color: var(--lwr-white); font-size: 1.25rem; }
.mobile-menu .site-tagline{ color: #8FC1EA; }
.mobile-menu .icon-btn{ background: transparent; border-color: rgba(255,255,255,0.35); color: var(--lwr-white); }
.mobile-menu-list{ list-style: none; margin: 0.25rem 0 0; padding: 0; }
.mobile-menu-list > li{ padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu-link{ display: flex; align-items: baseline; gap: 0.9rem; color: var(--lwr-white); }
.mobile-menu-link:hover{ color: var(--lwr-white); }
/* Communities on phones (2026-10-21): a section label, not a link; "All
   communities" under it is the link. */
.mobile-menu-label{ cursor: default; }
.mobile-menu-num{ width: 1.4rem; flex-shrink: 0; font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600; color: #8FC1EA; }
.mobile-menu-link span:last-child{ font-family: var(--lwr-font-display); font-size: 2rem; font-weight: 500; line-height: 1.15; }
.mobile-menu-sub{ list-style: none; margin: 0.2rem 0 0 2.3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.mobile-menu-sub a{ display: inline-block; padding: 0.4rem 0; font-size: 0.92rem; color: #C9DDF1; }
.mobile-menu-sub a:hover{ color: var(--lwr-white); }
.mobile-menu-eyebrow{
  font-family: var(--lwr-font-data);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8FC1EA;
}
.mobile-menu-towns{ margin-top: 1.25rem; }
.mobile-menu-chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.mobile-menu-chips a{
  min-height: 40px; padding: 0 1rem;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  font-size: 0.92rem; color: var(--lwr-white);
}
.mobile-menu-foot{ margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.mobile-menu-actions{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.mobile-menu-actions a{
  height: 64px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: rgba(255,255,255,0.08);
  font-size: 0.82rem; font-weight: 600; color: var(--lwr-white);
}
.mobile-menu-actions svg,
.mobile-menu-join svg{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-menu-join{ display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; color: var(--lwr-white); }
.mobile-menu-a11y{
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; width: 100%;
  padding: 0; border: 0; background: none; font: inherit; font-size: 0.92rem; color: #DCE6F2; text-align: left; cursor: pointer;
}
.mobile-menu-a11y[hidden]{ display: none; }
.mobile-menu-badge{ align-self: flex-start; display: block; }
.mobile-menu-badge img{ display: block; width: 72px; height: 72px; }
/* Nosy News and the social accounts (v1.52.0, lwr_social_links()). */
.mobile-menu-nosy{ display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--lwr-white); }
.mobile-menu-nosy-icon{ flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1877F2; color: #fff; }
.mobile-menu-nosy-text{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mobile-menu-nosy-text strong{ font-size: 1rem; }
.mobile-menu-nosy-text span{ font-size: 0.82rem; line-height: 1.35; color: rgba(255,255,255,0.75); }
.mobile-menu-nosy > svg{ flex: 0 0 auto; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The sign-up card (v2.10.68) in the Nosy News card's place: a mail mark
   instead of Facebook's blue. */
.mobile-menu-signup .mobile-menu-nosy-icon{ background: rgba(255,255,255,0.16); }
.mobile-menu-signup .mobile-menu-nosy-icon svg{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mobile-menu-social{ display: flex; gap: 0.6rem; }
.mobile-menu-social a{ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; color: var(--lwr-white); }
.mobile-menu-social a:focus-visible, .mobile-menu-nosy:focus-visible{ outline: 2px solid var(--lwr-blue-light); outline-offset: 2px; }
html.menu-open{ overflow: hidden; }
@media (min-width: 1240px){
  .mobile-menu{ display: none; }
}

/* =========================================================
   4. RIVER DIVIDER: section break

   Signature-graphic SVG (a stroked river-bend line) removed
   2026-09-23 per direct feedback that it read as thin/decorative
   rather than intentional. What's left, and all that's left, is the
   gradient fade below, which was already doing the real work: it's
   driven entirely by adjacent-sibling detection (:is()/:has()/+ read
   the actual DOM), so it self-corrects regardless of whether a given
   lwr_river_divider() call site happens to pass 'navy' or not. The
   variant param and .on-navy class are kept on the PHP side only for
   backward compatibility with existing call sites, they no longer
   affect anything here.
   ========================================================= */
.river-divider{
  display:block; width:100%; height: 46px;
  margin: 0; padding: 0;
}

/* Fading OUT of a dark section immediately above: dark at the top
   edge, transparent by the bottom, blending out of whatever just
   ended instead of cutting straight to white. */
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .river-divider,
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .photo-credits + .river-divider{
  background: linear-gradient(to bottom, var(--lwr-navy-dark), transparent);
}

/* Fading INTO a dark section immediately below: transparent at the
   top, dark by the bottom edge, blending into whatever's about to
   start instead of a light strip cutting straight to dark. */
.river-divider:has(+ .section-navy){
  background: linear-gradient(to bottom, transparent, var(--lwr-navy-dark));
}

/* Both at once, a dark section immediately before AND after: solid
   dark the full height, not a fade-to-white flash sandwiched between
   two sections that read as one continuous dark passage. Listed last
   so it wins the cascade over the two single-sided rules above for
   any divider matching both. */
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .river-divider:has(+ .section-navy){
  background: var(--lwr-navy-dark);
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 92vh;
  /* svh: the viewport with the browser's toolbars showing, so the hero
     and its buttons fit a phone's first screen. Same as vh on desktop. */
  min-height: 92svh;
  display:flex; align-items:flex-end;
  background: var(--lwr-navy-dark);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
}
/* Poster art: a <picture> with <source media="..."> rather than the
   <video poster> attribute, since a <video> only supports one poster
   total, but there are two hand-cropped stills (desktop 16:9, mobile
   9:16, see front-page.php's hero comment for why the mobile crop
   specifically isn't just object-fit:cover on the desktop still).
   Sits behind the video (opacity 0 until ready) and under the
   skeleton, shows through until the video's opacity transitions in,
   and again briefly if autoplay is blocked. */
.hero-poster{ position:absolute; inset:0; display:block; }
.hero-media video{
  width:100%; height:100%;
  /* 2px shorter than the poster photo under it (v1.60.0): the largest paint is
     measured by area, so a video 1px larger than the poster would replace it
     as the page's largest paint the moment it starts, seconds later. The
     strip shows the poster (the same frame) under the dark bottom fade. */
  height: calc(100% - 2px);
  background: var(--lwr-navy-dark);
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Keeps the video on its own GPU compositing layer permanently, rather
     than only for the duration of the opacity transition. Without this,
     some browser/driver combinations promote the video to its own layer
     while the opacity animates, then demote it back once the transition
     finishes, and that demotion can freeze the video's rendered output on
     whatever frame was showing at that instant, the exact frame it froze
     on played for as long as the 0.5s fade took, and never updates again,
     even though decode and currentTime keep advancing invisibly behind
     the frozen frame. translateZ(0) is the standard, low-cost way to force
     a permanent layer instead of a transition-scoped one. */
  transform: translateZ(0);
  will-change: opacity;
}
.hero-media video.is-ready{ opacity: 1; }
.hero-skeleton{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    100deg,
    var(--lwr-navy-dark) 40%,
    #1c2f52 50%,
    var(--lwr-navy-dark) 60%
  );
  background-size: 240% 100%;
  animation: lwr-shimmer 1.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.hero-skeleton.is-hidden{ opacity: 0; pointer-events: none; }
@keyframes lwr-shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-skeleton{ animation: none; background: var(--lwr-navy-dark); }
}
.hero-video{ object-fit:cover; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  opacity: 1;
}
.hero-river-still{
  position:absolute; inset:0;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  /* Dark at the very top (so the floating nav stays legible over
     whatever the video's doing there), clear through the middle (lets
     the video's color read through, per earlier feedback), dark again
     at the bottom (headline/subhead legibility, paired with text-shadow
     since there's no frosted panel behind them anymore). */
  background: linear-gradient(
    180deg,
    rgba(16,28,48,0.55) 0%,
    rgba(16,28,48,0) 18%,
    rgba(16,28,48,0) 55%,
    rgba(16,28,48,0.55) 100%
  );
}
.hero-content{
  position:relative; z-index:2;
  padding: 2rem var(--lwr-gutter) 3rem;
  /* Deliberately wider than the site's normal --lwr-max (1180px, used
     by .container elsewhere), so the headline can stretch across most
     of the screen on desktop instead of being capped to the same
     width as body copy sections. */
  max-width: 1600px; margin:0 auto; width:100%;
  color: var(--lwr-sand);
}
.hero-content h1{
  color: var(--lwr-white);
  max-width: 100%;
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  margin-bottom: 0.6rem;
  text-shadow: 0 4px 20px rgba(16,28,48,0.7);
}
@media (max-width: 780px){
  .hero-content h1{ font-size: clamp(2rem, 8.5vw, 3rem); max-width: 15ch; }
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.cta-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-actions .btn{ border-color: var(--lwr-blue-light); color: var(--lwr-white); padding: 1em 2em; font-size: 1rem; }
.hero-actions .btn:hover{ background: var(--lwr-blue-light); color: var(--lwr-navy-dark); }
.hero-actions .btn-solid{ border-color: var(--lwr-maroon); }

/* Phones (v1.60.0). This block used to sit above the base hero rules,
   so they overrode it: the height, padding and darker overlay never
   applied, and the light blue subtitle sat on bright sunset. */
@media (max-width: 780px){
  .hero{ min-height: 88vh; min-height: 88svh; }
  .hero-content{ padding-top: 1.5rem; padding-bottom: 2rem; }
  .hero-media::after{
    background: linear-gradient(
      180deg,
      rgba(16,28,48,0.55) 0%,
      rgba(16,28,48,0) 14%,
      rgba(16,28,48,0) 34%,
      rgba(16,28,48,0.72) 100%
    );
  }
}
/* Pause button for the hero video (v1.60.0, WCAG 2.2.2), shown by main.js
   once the video plays. aria-pressed="true" means paused. */
.hero-video-toggle{
  position: absolute; z-index: 3; right: var(--lwr-gutter); bottom: 1rem;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 50%;
  background: rgba(15,29,66,0.45); color: var(--lwr-white); cursor: pointer;
}
.hero-video-toggle[hidden]{ display: none; }
.hero-video-toggle:hover{ background: rgba(15,29,66,0.75); }
.hero-video-toggle:focus-visible{ outline: 3px solid var(--lwr-blue-light); outline-offset: 2px; }
.hero-video-toggle svg{ fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-video-toggle .icon-play{ display: none; fill: currentColor; stroke: none; }
.hero-video-toggle[aria-pressed="true"] .icon-play{ display: block; }
.hero-video-toggle[aria-pressed="true"] .icon-pause{ display: none; }

/* The one full-bleed editorial break below the hero (see front-page.php
   "This is North of the River"). Deliberately not full viewport height
   like the hero, cinematic-strip proportions instead, so it reads as
   a magazine spread rather than a second hero competing with the
   first. No button lives in here, ever, that's the point of it. */
.section-fullbleed{
  position: relative;
  /* Explicit width:100% is load-bearing here, not decorative: with
     aspect-ratio and max-height both set but no explicit width, some
     browsers compute this box's width FROM the clamped max-height via
     the ratio (520px * 21/9 = ~1213px) instead of filling the
     container and computing height from that, which left an
     unexplained gap on the right and made the centered text look
     left-aligned. Found by measuring the rendered rect directly,
     width was short by exactly that math. */
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-height: 520px;
  overflow: hidden;
}
.section-fullbleed-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The same dark fade as before, plus (v1.66.0) a shade from the left,
   where the words now sit, so the body copy keeps AA contrast over the
   bridge and water. */
.section-fullbleed::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,28,48,0.62) 0%, rgba(16,28,48,0.4) 30%, rgba(16,28,48,0) 60%),
    linear-gradient(180deg, rgba(16,28,48,0.15) 0%, rgba(16,28,48,0.55) 100%);
}
/* Left-aligned with the page's content edge, the words filling roughly
   the left third of the photo (v1.66.0; it was one centered quote). */
.section-fullbleed-content{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  gap: 0.6rem;
  padding: 2.5rem var(--lwr-gutter) 3rem;
  max-width: var(--lwr-max);
  margin: 0 auto;
}
.section-fullbleed-content > *{ max-width: min(30rem, 34vw); }
.section-fullbleed-title{
  margin: 0;
  color: var(--lwr-white);
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(16,28,48,0.65);
}
/* Tablets: the band is shorter here, so the words get more width and
   fewer lines, and can never outgrow it. They cover more of the photo,
   so the shade from the left reaches further. */
@media (min-width: 641px) and (max-width: 1023px){
  .section-fullbleed-content > *{ max-width: 58vw; }
  .section-fullbleed::after{
    background:
      linear-gradient(90deg, rgba(16,28,48,0.74) 0%, rgba(16,28,48,0.52) 45%, rgba(16,28,48,0) 80%),
      linear-gradient(180deg, rgba(16,28,48,0.15) 0%, rgba(16,28,48,0.55) 100%);
  }
}
@media (max-width: 640px){
  .section-fullbleed{ aspect-ratio: 4 / 5; max-height: 460px; }
}

/* Small brand mark strip below the hero, deliberately capped in size */
.brand-strip{
  background: var(--lwr-white);
  padding: 2rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(24,43,92,0.08);
}
.brand-strip-note{
  font-family: var(--lwr-font-data);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lwr-ink);
  opacity: 0.55;
  margin: 0 0 1.5rem;
}
.brand-strip-row{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.brand-strip-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.brand-strip-item-current .brand-strip-logo{
  max-width: 150px;
}
.brand-strip-logo{
  display: block;
  max-width: 120px;
  width: 100%;
  height: auto;
}
.brand-strip-label{
  font-family: var(--lwr-font-data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lwr-blue);
  font-weight: 600;
}
.brand-strip-item-current .brand-strip-label{
  color: var(--lwr-maroon);
}
@media (max-width: 640px){
  .brand-strip-row{ gap: 2rem; }
  .brand-strip-item-current{ order: -1; flex-basis: 100%; margin-bottom: 0.5rem; }
}

/* =========================================================
   6. SECTIONS
   ========================================================= */
.section{ padding: clamp(3rem, 7vw, 6rem) 0; }
.section-navy{ background: var(--lwr-navy-dark); color: var(--lwr-sand); }
.section-navy h2, .section-navy h3{ color: var(--lwr-white); }
.section-navy .eyebrow{ color: var(--lwr-blue-light); }
/* Text links in a navy band: the default navy link color disappears on
   the navy-dark background, and the maroon hover does too. */
.section-navy p a:not([class]), .section-navy dd a:not([class]){ color: var(--lwr-white); }
.section-navy p a:not([class]):hover, .section-navy dd a:not([class]):hover{ color: var(--lwr-blue-light); }
/* The grey surfaces: the brand blue is 4.25:1 on #EEF1F5, short of the
   4.5:1 that small text needs, so inside them the blue token becomes the
   deeper shade. Fills and borders follow, so buttons and accents stay
   consistent within each surface. */
:is(.idx-omnibar-form, .idx-not-connected, .path-card, .agent-favorites, .story-card, .leslies-take, .tool-results, .fact, .mag-subscribe, .mag-columns-section, .community-snapshot, .community-explore, .community-filters){ --lwr-blue: var(--lwr-blue-deep); }
/* Outline .btn's default blue border/text (fine on the white sections
   it's normally used on) reads as blue-on-navy here, same hue family
   as the background, low differentiation. Same white-text treatment
   already used for .hero-actions .btn on its own dark background. */
.section-navy .btn:not(.btn-solid){ color: var(--lwr-white); border-color: var(--lwr-blue-light); }
.section-navy .btn:not(.btn-solid):hover{ background: var(--lwr-blue-light); color: var(--lwr-navy-dark); }
.section-head{ margin-bottom: 2.5rem; }
.section-head p{ max-width: 60ch; }

.grid{ display:grid; gap: 1.75rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns: 1fr; }
  /* .grid-scroll (used on the homepage agent preview and lifestyle
     photo sections) becomes a horizontal swipe carousel on mobile
     instead of a tall vertical stack: each card gets real width to
     be seen properly, without ballooning to full screen height one
     after another. NOT used on the full team roster page, where a
     normal scrolling list of 40 people is the better fit. */
  /* .grid-scroll moved to the end of this file (v1.60.0). */
}

/* Scroll-dots: pagination dots injected by main.js after every
   .grid-scroll carousel, the only signal (besides the card peek)
   that there's more to swipe through. Hidden above 640px, where
   grid-scroll isn't a carousel at all. */
.scroll-dots{
  display:none;
  justify-content:center;
  align-items:center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
@media (max-width: 640px){
  .scroll-dots{ display:flex; }
}
.scroll-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(24,43,92,0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}
.scroll-dot.is-active{
  background: var(--lwr-maroon);
  transform: scale(1.3);
}
.section-navy .scroll-dot{ background: rgba(255,255,255,0.28); }
.section-navy .scroll-dot.is-active{ background: var(--lwr-blue-light); }

/* Listing / feature cards: wood-grain edge instead of drop shadow.
   display:flex/column so a trailing .btn (see the rule below) can be
   pushed to the bottom with margin-top:auto, keeping CTA buttons
   level across a .grid row even when card copy runs different
   lengths (the grid's own default stretch behavior already equalizes
   card height, this equalizes where the button sits within it). */
.card{
  display: flex;
  flex-direction: column;
  background: var(--lwr-white);
  color: var(--lwr-ink);
  border: 1px solid rgba(74,55,40,0.12);
  border-left: 4px solid var(--lwr-blue);
  border-radius: var(--lwr-radius);
  padding: 1.6rem 1.7rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.card:hover{ border-left-color: var(--lwr-maroon); transform: translateY(-2px); }
.card h3{ margin-bottom:0.35rem; color: var(--lwr-navy-dark); }
.card .btn:last-child{ margin-top: auto; align-self: flex-start; }
.card .card-meta{
  font-family: var(--lwr-font-data);
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--lwr-blue); text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.card img{
  border-radius: var(--lwr-radius);
  margin: -1.6rem -1.7rem 1rem;
  width: calc(100% + 3.4rem);
  max-width: none;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Agent cards */
.agent-card{ text-align:center; }
/* Tall photos crop from near the top, where faces are (v2.10.55: the center
   crop cut off Bryor's and Cyndi's heads); square photos are unchanged. */
.agent-card img{ border-radius: 50%; width: 140px; height:140px; object-fit:cover; object-position: 50% 15%; margin: 0 auto 1rem; }
.agent-card .agent-role{ color: var(--lwr-blue); font-family: var(--lwr-font-data); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; }

/* Full roster (page-our-team.php, 40+ agents). The generic .grid-4
   rule drops to one column under 640px, which on the roster meant one
   agent per screen-height, 40-plus screens of scrolling (reported
   2026-09-24). The roster stays 3-up on small tablets and 2-up on
   phones with smaller photos, so a phone shows roughly six agents per
   screen instead of one. Selector is doubled-up so it outranks the
   generic .grid-4 media rules regardless of source order.
   Five across on desktop (Shawn, 2026-10-15; Leslie's magazine roster
   is five wide), four on narrow laptops. */
.grid.agent-roster-grid{ grid-template-columns: repeat(5, 1fr); gap: 2rem 1.25rem; }
@media (max-width: 1100px){
  .grid.agent-roster-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px){
  .grid.agent-roster-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; }
}
@media (max-width: 640px){
  .grid.agent-roster-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.75rem; }
  .agent-roster-grid .agent-card img{ width: 96px; height: 96px; margin-bottom: 0.6rem; }
  .agent-roster-grid .agent-card h3{ font-size: 1.05rem; margin-bottom: 0.15rem; }
  .agent-roster-grid .agent-card .agent-role{ font-size: 0.75rem; }
}

/* =========================================================
   7. IDX / WRAPPER CONTENT
   These rules give any IDX Broker / IMPress shortcode output
   (search widgets, results grids, agent roster, property detail)
   a look consistent with the rest of the theme, without fighting
   IDX's own inline styles.
   ========================================================= */
.idx-wrapper{
  padding: 2.5rem 0 4rem;
}
.idx-wrapper .container{ max-width: var(--lwr-max); }
.idx-wrapper h1, .idx-wrapper h2{ font-family: var(--lwr-font-display); }
/* :not(.btn) matters here, not cosmetic: this rule is meant for plain
   inline text links in body copy, but "a" alone is more specific than
   a single class like .btn-solid (element+class beats class-only), so
   without the exclusion this rule silently overrides button text
   color to navy whenever a .btn/.btn-solid happens to sit inside an
   .idx-wrapper, a real bug found 2026-08-25 on the Communities page's
   "Explore our communities" button (navy text on a maroon background,
   nearly unreadable). Buttons already carry their own color via
   .btn/.btn-solid and should never be affected by this rule. */
.idx-wrapper a:not(.btn){ color: var(--lwr-navy); }
.idx-wrapper .idxwidget-button, .idx-wrapper button{
  font-family: var(--lwr-font-data) !important;
}

/* Property search form (lwr_render_property_search_form() in
   functions.php). These class names were originally pulled from the
   [idx-omnibar] shortcode's own rendered markup, and are now reused
   deliberately for our own real, working form that replaced it
   2026-09-19 (that shortcode's inputs have no `name` attributes and
   can never actually submit a search, see that function's doc
   comment), so this CSS didn't need to change at all. Structure: a
   flat list of children, a bare text input with no wrapper, four
   .idx-omnibar-extra label+input/select pairs (price min/max, beds,
   baths), then the submit button, all as direct siblings. Reshaped
   with flexbox instead of fighting that structure. align-items:
   flex-end matters here: the bare text input has no visible label
   above it while the four .idx-omnibar-extra fields do, flex-end
   keeps every input's bottom edge level despite that. */
.idx-omnibar-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--lwr-sand-deep);
  border-radius: var(--lwr-radius);
}
.idx-omnibar-form .idx-omnibar-input{
  flex: 2 1 260px;
}
.idx-omnibar-extra{
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.idx-omnibar-extra label{
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lwr-navy);
}

.idx-omnibar-form input[type="text"],
.idx-omnibar-form input[type="number"],
.idx-omnibar-form select{
  width: 100%;
  padding: 0.85em 1em;
  border: 1.5px solid #d7dce3;
  border-radius: var(--lwr-radius);
  font-family: var(--lwr-font-data);
  font-size: 0.95rem;
  color: var(--lwr-ink);
  background: var(--lwr-white);
}
.idx-omnibar-form input:focus,
.idx-omnibar-form select:focus{
  outline: none;
  border-color: var(--lwr-blue);
}
.idx-omnibar-extra-button{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--lwr-font-data) !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.7em;
  border-radius: var(--lwr-radius);
  border: 1.5px solid var(--lwr-maroon);
  background: var(--lwr-maroon);
  color: var(--lwr-white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.idx-omnibar-extra-button:hover{
  background: var(--lwr-ink);
  border-color: var(--lwr-ink);
  color: var(--lwr-white);
}

/* Fallback notice from lwr_render_real_homes() (functions.php), shown
   whenever the widget-based real-homes fetch comes back empty
   (network hiccup, or a genuinely empty account). The search form
   (lwr_render_property_search_form()) always renders for real now, it
   has no fallback state of its own to style here. */
.idx-not-connected{
  padding: 1.5rem;
  text-align: center;
  color: var(--lwr-navy);
  background: var(--lwr-sand-deep);
  border: 1px dashed var(--lwr-navy);
  border-radius: var(--lwr-radius);
}

/* Result count line above lwr_render_search_results()'s card grid
   (functions.php). Deliberately plain, the grid of real cards right
   below it is the actual content. */
.search-results-count{
  font-family: var(--lwr-font-data);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lwr-navy);
  margin: 0 0 1.25rem;
}
.idx-wrapper .search-results-count a{
  margin-left: 0.35rem;
  color: var(--lwr-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.idx-wrapper .search-results-count a:hover{ color: var(--lwr-maroon); }

/* IDX Broker widget embeds (lwr_idx_widget() in functions.php), e.g.
   page-homes-by-map-search.php's Prime Map Search widget. The widget
   sets itself to height:100% of its container internally, so it needs
   an explicit height to actually fill, without one it renders at 0px.
   Sized from what the real widget rendered at on the InstaWP demo
   (map + a scrolling listing carousel alongside it). */
.idx-widget-holder{
  min-height: 640px;
  border-radius: var(--lwr-radius);
  overflow: hidden;
}
@media (max-width: 780px){
  .idx-widget-holder{ min-height: 480px; }
}

/* Newsletter signup, on the navy band at the foot of the homepage */
.newsletter-form{
  display:flex;
  gap: 0.6rem;
  justify-content:center;
  flex-wrap: wrap;
}
.newsletter-form input[type="email"]{
  flex: 1 1 260px;
  max-width: 340px;
  padding: 0.85em 1em;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--lwr-radius);
  background: rgba(255,255,255,0.06);
  color: var(--lwr-white);
  font-family: var(--lwr-font-data);
  font-size: 0.95rem;
}
.newsletter-form input[type="email"]::placeholder{ color: rgba(255,255,255,0.5); }
.newsletter-form input[type="email"]:focus{
  outline: 2px solid var(--lwr-blue-light);
  outline-offset: 1px;
  background: rgba(255,255,255,0.1);
}
.newsletter-form .btn{ flex: 0 0 auto; }
@media (max-width: 480px){
  .newsletter-form input[type="email"], .newsletter-form .btn{ flex: 1 1 100%; max-width:none; }
}

/* Numbered steps on the Sell page. Numbering is honest here, it's a
   real sequence a seller moves through, not decoration. */
.sell-steps{
  list-style: none;
  counter-reset: sell-step;
  margin: 0 0 1.6rem;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 1rem;
}
.sell-steps li{
  counter-increment: sell-step;
  position: relative;
  padding-left: 3rem;
}
.sell-steps li::before{
  content: counter(sell-step);
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: var(--lwr-maroon);
  color: var(--lwr-white);
  font-family: var(--lwr-font-data);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Buy / Sell split on the homepage. Both panels are deliberately
   identical in size and weight, the seller path is not a lesser
   option, which is the whole reason this block exists. */
.path-split{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 820px){ .path-split{ grid-template-columns: 1fr; gap: 1.5rem; } }
.path-card{
  display:flex;
  flex-direction:column;
  gap: 0.9rem;
  padding: 2rem 1.9rem 2.1rem;
  background: var(--lwr-sand-deep);
  border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.path-card h3{ margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.path-card p{ margin: 0; }
.path-list{
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.55rem;
  font-family: var(--lwr-font-data);
  font-size: 0.93rem;
}
.path-list li{
  position: relative;
  padding-left: 1.2rem;
  color: var(--lwr-ink);
}
.path-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lwr-maroon);
}
.path-card .cta-actions{ margin-top: auto; padding-top: 0.9rem; }

/* Editorial pull-quote: a large, serif-set statement used instead of
   another bullet list where the point is trust rather than features
   (the homepage Sell panel, the Real People story cards). Reusable
   wherever a single sentence needs to carry a section, not tied to
   any one component. .pull-quote-sm is the smaller variant used
   inside a 3-up grid, where the full size would overpower the card. */
.pull-quote{
  font-family: var(--lwr-font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  color: var(--lwr-navy-dark);
  margin: 0;
}
.pull-quote-sm{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.section-navy .pull-quote{ color: var(--lwr-white); }

/* Three-point proof list for the homepage Sell panel: label + one
   supporting line each, deliberately calmer than .path-list's bullet
   dots, this is the one moment on the page meant to feel unhurried. */
.proof-points{
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.85rem;
}
.proof-points li{ display:flex; flex-direction:column; gap: 0.15rem; }
.proof-points strong{
  font-family: var(--lwr-font-data);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lwr-maroon);
}
.proof-points span{ font-size: 0.95rem; }
.path-card-editorial{ justify-content: flex-start; }
/* This one line is the whole point of the seller panel, per the art-
   direction brief: give it more room than the base .pull-quote size,
   so it reads as the statement the visitor is meant to remember, not
   just another line of copy. */
.path-card-editorial .pull-quote{
  font-size: clamp(1.5rem, 2.9vw, 1.95rem);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

/* Communities hub: four large editorial cards, one per town */
.community-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
@media (max-width: 820px){ .community-grid{ grid-template-columns: 1fr; gap: 2rem; } }
.community-card{ display:flex; flex-direction:column; }
.community-card img{
  width:100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--lwr-radius);
}
.community-card-body{ display:flex; flex-direction:column; gap:0.7rem; padding-top:1.1rem; }
.community-card-body h2{ margin:0; font-size:1.7rem; }
.community-card-body h2 a{ color: inherit; text-decoration:none; }
.community-card-body h2 a:hover{ color: var(--lwr-maroon); }
.community-card-body p{ margin:0; }
.community-card-body .btn{ align-self:flex-start; margin-top:0.4rem; }

/* Individual agent profile pages, served at /agents/{slug}/ */
.agent-profile{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 2.5rem;
  align-items:start;
}
@media (max-width: 780px){ .agent-profile{ grid-template-columns: 1fr; gap: 1.75rem; } }
/* Grid columns grow to their content's minimum width; the listings swipe row
   (v1.60.0) would otherwise widen the column past the screen. */
.agent-profile > *{ min-width: 0; }
.agent-profile-media img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: 50% 15%; /* as .agent-card img */
  border-radius: var(--lwr-radius);
}
.agent-profile-body h2{ margin-top: 2rem; }
.agent-profile-body h2:first-child{ margin-top: 0; }

/* Active-listing preview on agent pages (template-agent.php, v1.33.0).
   Three compact cards in the ~740px body column. auto-fill instead of
   .grid-3's viewport breakpoints, because the column's width, not the
   window's, decides how many fit: three on desktop, two in the narrow
   tablet column, one on phones. Two classes so it outranks the .grid-3
   media rules. */
.grid.agent-listings-grid{
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.listing-card-agent{ padding: 1.1rem 1.2rem 1.2rem; }
.listing-card-agent img{ margin: -1.1rem -1.2rem 0.8rem; width: calc(100% + 2.4rem); }
.listing-card-agent .listing-price{ margin-top: 0.2rem; font-size: 1.25rem; }
.listing-card-agent h3{ font-family: var(--lwr-font-body); font-size: 0.98rem; font-weight: 600; line-height: 1.35; }
.listing-card-agent p{ margin: 0; font-size: 0.88rem; }

/* Text button vs. readable number: an sms: link only has a handler
   on phones/tablets, on a mouse-driven desktop it silently does
   nothing (reported 2026-09-24). (hover:hover) and (pointer:fine)
   targets mouse/trackpad devices specifically, not just wide screens,
   so a large tablet still gets the working Text button. */
.agent-phone-desktop{ display: none; margin-top: 1rem; font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine){
  .agent-text-btn,
  .agent-call-btn{ display: none; }
  .agent-phone-desktop{ display: block; }
}

/* Call, Text and Save contact under the agent's photo (v2.10.67): one
   full-width column the photo's width, so they never wrap unevenly. On a
   desktop only Save contact shows (Call and Text are touch-only, above). */
.agent-contact-actions{ display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.1rem; }
.agent-contact-actions .btn{ width: 100%; text-align: center; }

/* "Worked with {first}?" (v2.10.67): the agent's reviews and the form. */
.agent-reviews{ margin-top: 2.5rem; }
.agent-reviews > p{ margin: 0 0 1rem; }
.reviews-agent-actions{ justify-content: center; margin-top: 2.5rem; }

/* On phones the three buttons wrapped 2 + 1 at mismatched widths and
   read as cramped. Stacked full-width instead: same width, same tap
   target, one clear column. */
@media (max-width: 600px){
  .agent-profile-actions{ flex-direction: column; gap: 0.75rem; }
  .agent-profile-actions .btn{ width: 100%; text-align: center; }
}

/* "Contact {agent} directly" (v2.10.27): the tools' lead form in a light
   panel, so it doesn't read as more MLS fine print right above it. */
.tool-lead.agent-contact{
  margin-top: 2.25rem;
  padding: 1.5rem 1.5rem 1.1rem;
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 3px solid var(--lwr-blue);
  background: var(--lwr-sand-deep);
  border-radius: var(--lwr-radius);
}
.agent-contact h2{ font-size: 1.45rem; margin: 0 0 0.35rem; }
.agent-contact > p{ margin: 0; }
.agent-contact .tool-lead-form{ margin-top: 1.1rem; }
.agent-contact .tool-lead-form input[type="text"],
.agent-contact .tool-lead-form input[type="email"],
.agent-contact .tool-lead-form input[type="tel"],
.agent-contact .tool-lead-form textarea{ background: var(--lwr-white); }
@media (max-width: 600px){
  .tool-lead.agent-contact{ padding: 1.25rem 1rem 0.9rem; }
  .agent-contact .tool-lead-submit .btn{ width: 100%; text-align: center; }
}

/* "Local guide" facts under the agent photo: where they'd send you,
   not production stats. Empty fields are skipped in the template. */
.agent-favorites{
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.35rem;
  background: var(--lwr-sand-deep);
  border-left: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  align-items: baseline;
}
.agent-favorites dt{
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lwr-blue);
  font-weight: 600;
  margin: 0;
}
.agent-favorites dd{
  margin: 0;
  font-size: 0.95rem;
  color: var(--lwr-ink);
}
.agent-video{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--lwr-radius);
  overflow: hidden;
}
.agent-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Agent roster cards link through to those profiles */
.agent-card h3 a{ color: inherit; text-decoration: none; }
.agent-card h3 a:hover{ color: var(--lwr-maroon); }

/* Drive-time photo tiles (lwr_render_drive_times()) on Why Parrish and
   Communities. Photo tiles get a top and bottom scrim so the white text
   reads on any image; a tile without a photo is plain navy. */
.drive-group{
  margin: 2rem 0 0.9rem;
  font-family: var(--lwr-font-data);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lwr-blue);
}
.drive-tiles{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.drive-tile{
  position: relative; isolation: isolate;
  min-height: 300px; padding: 1.25rem; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 8px; overflow: hidden;
  background: var(--lwr-navy); color: var(--lwr-white);
}
.drive-tile-img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.drive-tile:not(.drive-tile--plain)::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,29,66,0.78) 0%, rgba(15,29,66,0.3) 30%, rgba(15,29,66,0) 46%, rgba(15,29,66,0.9) 100%);
}
.drive-tile-pre{ display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.drive-tile-num{ display: block; font-family: var(--lwr-font-display); font-size: 3.6rem; font-weight: 600; line-height: 1; }
.drive-tile-top,
.drive-tile-bot{ text-shadow: 0 1px 10px rgba(15,29,66,0.45); }
.drive-tile-num small{ margin-left: 0.25rem; font-family: var(--lwr-font-data); font-size: 1rem; font-weight: 600; }
.drive-tile-word{ display: block; max-width: 8ch; margin-top: 0.75rem; font-family: var(--lwr-font-display); font-size: 2.2rem; font-weight: 600; line-height: 1.1; }
.drive-tile-icon{ display: block; width: 44px; height: 44px; color: #8FC1EA; }
.drive-tile-icon svg{ display: block; width: 100%; height: 100%; }
.drive-tile-icon + .drive-tile-pre{ margin-top: 0.9rem; }
.drive-tile-bot :is(h3, h4){ margin: 0; font-family: var(--lwr-font-data); font-size: 1.1rem; font-weight: 600; color: var(--lwr-white); }
.drive-tile-bot p{ margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.45; color: rgba(255,255,255,0.92); }
.drive-footnote{ margin-top: 1.5rem; text-align: center; font-size: 0.88rem; opacity: 0.7; }
@media (max-width: 900px){
  .drive-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: each group becomes a swipeable row, so tiles keep a
   readable size instead of shrinking into a 2-column postage stamp. */
@media (max-width: 560px){
  .drive-tiles{
    display: flex; gap: 0.75rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--lwr-gutter)); padding: 0 var(--lwr-gutter) 0.5rem;
    scroll-padding: 0 var(--lwr-gutter);
  }
  .drive-tile{ flex: 0 0 78%; min-height: 280px; scroll-snap-align: start; }
}

.join-referral{
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(24,43,92,0.12);
}
.join-referral .eyebrow{ display: block; margin-bottom: 0.4rem; }

/* Referral page: the chairs sit low in the frame, keep them in the crop. */
.referral-photo{ object-position: center 75%; }
.referral-lead{
  font-family: var(--lwr-font-display);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--lwr-navy-dark);
}
.referral-lead strong{ color: var(--lwr-maroon); }
.referral-perks{
  list-style: none; margin: 1.5rem 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem;
}
.referral-perks li{
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #E3E7EE; border-radius: var(--lwr-radius);
  font-family: var(--lwr-font-data); font-weight: 600; color: var(--lwr-navy);
}
.referral-perks svg{ flex-shrink: 0; fill: none; stroke: var(--lwr-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.referral-perks .referral-perk-highlight{ background: var(--lwr-maroon); border-color: var(--lwr-maroon); color: var(--lwr-white); }
.referral-perks .referral-perk-highlight svg{ stroke: var(--lwr-white); }
@media (max-width: 560px){
  .referral-perks{ grid-template-columns: 1fr; }
}
.recruit-card{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-left: 4px solid var(--lwr-maroon);
}
.recruit-card h2{ margin: 0.3rem 0 0.5rem; }
.recruit-card p{ margin: 0; }
.card.recruit-card .btn:last-child{ margin-top: 0; align-self: center; flex-shrink: 0; }
@media (max-width: 700px){
  .recruit-card{ flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .card.recruit-card .btn:last-child{ align-self: stretch; text-align: center; }
}

/* Full-width town photo on the hyperlocal neighborhood landing pages */
.town-photo{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--lwr-radius);
  margin-bottom: 1.75rem;
}

/* CC BY-SA attribution line, printed by lwr_render_photo_credits() from
   footer.php only on pages that show a credited photo. After a dark
   section it takes that section's navy, so it reads as the end of the
   page rather than a white strip wedged in before the footer. */
.photo-credits{ padding: 0.9rem 0 1.1rem; text-align: center; }
.photo-credits p{
  margin: 0;
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(30,36,48,0.72);
}
.photo-credits a{ color: inherit; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .photo-credits{ background: var(--lwr-navy-dark); }
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .photo-credits p{ color: rgba(238,241,245,0.8); }
/* Collapsed to one "Photo credits +" line that opens to the list, at
   every width (v1.80.0). */
.photo-credits{ padding: 0.5rem 0 0.7rem; }
.photo-credits summary{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(30,36,48,0.72);
}
.photo-credits summary::-webkit-details-marker{ display: none; }
.photo-credits summary::after{ content: "+"; font-size: 0.95rem; line-height: 1; }
.photo-credits details[open] summary::after{ content: "\2212"; }
.photo-credits details p{ margin-top: 0.4rem; }
:is(.hero, .section-navy, .section-fullbleed, .page-banner) + .photo-credits summary{ color: rgba(238,241,245,0.8); }

/* Page-header banner used above IDX content (Properties, Team, etc.) */
.page-banner{
  background: var(--lwr-navy-dark);
  color: var(--lwr-sand);
  padding: 3.2rem 0 3rem;
}
.page-banner .eyebrow{ color: var(--lwr-blue-light); }
.page-banner h1{ color: var(--lwr-white); margin-bottom: 0.3rem; }
.page-banner p{ color: var(--lwr-blue-light); margin:0; max-width: 60ch; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer{
  background: var(--lwr-ink);
  color: var(--lwr-sand-deep);
  padding: 3.5rem 0 2rem;
}
.site-footer a{ color: var(--lwr-blue-light); }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1100px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer-grid > div:first-child{ grid-column: 1 / -1; }
}
.footer-grid h4{
  color: var(--lwr-blue-light); font-family: var(--lwr-font-data);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom: 0.55rem; }
/* Footer sections (Phase 3.6, v1.56.0): brand and office, Explore (the
   header's sections), North of the River with the four towns, Company. */
.footer-grid--sections{ grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer-grid .footer-heading{
  margin: 0 0 1rem;
  color: var(--lwr-blue-light); font-family: var(--lwr-font-data);
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}
.footer-office{ margin-top: 1rem !important; }
.footer-nosy{ margin: 0.9rem 0 0; font-size: 0.88rem; }
/* "Be the First to Know" (v2.10.68): the sign-up link where Nosy News was. */
.footer-first{ margin: 0.9rem 0 0; font-size: 0.88rem; }
.footer-first a{ display: inline-block; font-weight: 700; }
.footer-first span{ display: block; margin-top: 0.2rem; opacity: 0.85; }
/* 2.10.102: the Facebook page with its followers (lwr_render_facebook_callout()),
   under the footer's icons (replacing 2.10.99's text link) and in the homepage's magazine band. */
.fb-callout{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; }
.fb-callout-icon{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #1877f2; color: #fff; }
.fb-callout-icon svg{ width: 1.5rem; height: 1.5rem; }
.fb-callout-text{ flex: 1 1 11rem; margin: 0; font-weight: 700; line-height: 1.35; color: var(--lwr-white); }
.fb-callout .fb-callout-btn{ white-space: nowrap; color: var(--lwr-white); border-color: var(--lwr-blue-light); }
.fb-callout .fb-callout-btn:hover, .fb-callout .fb-callout-btn:focus-visible{ background: var(--lwr-blue-light); color: var(--lwr-navy-dark); }
.fb-callout--footer{ margin-top: 1rem; padding: 1rem; border: 1px solid rgba(245,240,228,0.15); border-radius: var(--lwr-radius); }
.fb-callout--footer .fb-callout-text{ font-size: 0.95rem; }
.fb-callout--home{ justify-content: center; max-width: 46rem; margin: 2.5rem auto 0; padding: 1.25rem 1.5rem; border: 1px solid rgba(245,240,228,0.2); border-radius: var(--lwr-radius); }
.fb-callout--home .fb-callout-text{ flex: 0 1 auto; font-size: 1.15rem; }
.fb-callout--home{ text-align: center; }
.fb-callout-text{ text-wrap: balance; }
.footer-towns{ display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.9rem !important; padding-top: 0.9rem !important; border-top: 1px solid rgba(245,240,228,0.15); }
.footer-towns li{ margin: 0; }
/* "Town guides" (2026-10-21): the four town pages, named as guides so the
   list doesn't read as all of North of the River. The label takes the
   list's divider. */
.footer-towns-label{ margin: 0.9rem 0 0.45rem; padding-top: 0.9rem; border-top: 1px solid rgba(245,240,228,0.15); font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,228,0.85); }
.footer-towns-label + .footer-towns{ margin-top: 0 !important; padding-top: 0 !important; border-top: 0; }
.footer-legal{ display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1100px){
  .footer-grid--sections{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid--sections > .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  .footer-grid--sections{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .site-footer .footer-social a{ width: 44px; height: 44px; }
  .footer-col li a, .footer-legal a{ display: inline-block; padding: 0.2rem 0; }
}
.footer-social{
  display: flex;
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.footer-social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245,240,228,0.3);
  color: var(--lwr-sand-deep);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.footer-social a:hover{
  background: var(--lwr-blue);
  border-color: var(--lwr-blue);
  color: var(--lwr-white);
}
.site-footer .footer-bottom{
  border-top: 1px solid rgba(245,240,228,0.15);
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(245,240,228,0.6);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
}

/* Equal Housing Opportunity and the brokerage license (v2.10.27,
   inc/disclosures.php), just above the copyright line. */
.footer-disclosures{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: rgba(245,240,228,0.75);
}
.footer-eho{ display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.footer-eho-mark{ flex: none; width: 22px; height: 22px; }

/* =========================================================
   9. UTILITIES / MOTION
   ========================================================= */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .nav-chevron{ transition:none; }
}

/* =========================================================
   10. STATS BAR & REVIEWS
   ========================================================= */
.stats-bar{
  background: var(--lwr-white);
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.stat-item{
  text-align: center;
}
.stat-number{
  display: block;
  font-family: var(--lwr-font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--lwr-navy-dark);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label{
  font-family: var(--lwr-font-data);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lwr-blue);
  font-weight: 600;
}
@media (max-width: 640px){
  .stats-bar .grid-4{ grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
}

/* Stat row folded inside the Leslie section (see front-page.php):
   same .stat-item/.stat-number/.stat-label as the old standalone
   .stats-bar, just no longer its own full-width band. Sits on navy,
   so the numbers and labels need the light-on-dark overrides below,
   same pattern as .section-navy .eyebrow. */
.stat-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 640px){
  .stat-row{ grid-template-columns: 1fr 1fr; row-gap: 1.75rem; }
}
.section-navy .stat-number{ color: var(--lwr-white); }
.section-navy .stat-label{ color: var(--lwr-blue-light); }

/* v2.10.59: the stat row restored inside the homepage's light story
   section, three figures (Leslie's 50 years, the brokerage's 25, the
   roster count), and the "people you'll work with" lines over the agents. */
.section:not(.section-navy) .stat-row{ border-top-color: rgba(24,43,92,0.14); }
/* v2.10.65: three figures again (50, 25, FoxBrook's 277), each year in
   small type under its label; one column on phones. */
#our-story .stat-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 820px; margin-left: auto; margin-right: auto; }
.stat-note{ display: block; margin-top: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; color: var(--lwr-muted, #4a5468); }
/* v2.10.66 (Shawn): a label that wraps splits into even lines, so no word
   is left alone on the last line ("…WHICH LESLIE HELPED / DEVELOP"). */
#our-story .stat-label{ display: block; text-wrap: balance; }
@media (max-width: 640px){
  #our-story .stat-row{ grid-template-columns: 1fr; row-gap: 1.25rem; }
}
.story-split img{ width: 100%; border-radius: var(--lwr-radius); }
.home-team-head{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.home-team-head h3{ margin: 0.2rem 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2rem); }

/* Star display (reviews page, homepage teaser): plain characters
   colored via CSS rather than an icon font, so a failed font load
   can't make ratings disappear. */
.star-rating{ display: inline-flex; gap: 0.15rem; font-size: 1.1rem; }
.star-rating .star{ color: rgba(24,43,92,0.2); }
.star-rating .star-filled{ color: var(--lwr-maroon); }

/* Star rating *input* (Leave a Review form): CSS-only radio picker,
   no JS required. Markup order is 5,4,3,2,1 on purpose, combined with
   row-reverse this lets the sibling combinator fill "this star and
   everything to its left" using only :checked/:hover, standard
   pattern for a dependency-free star picker. */
.star-input{
  position: relative; /* the required rating's browser message points at the stars */
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.2rem;
}
.star-input input{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.star-input label{
  font-size: 2rem;
  line-height: 1;
  color: rgba(24,43,92,0.2);
  cursor: pointer;
  transition: color 0.15s ease;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{
  color: var(--lwr-maroon);
}
.star-input input:focus-visible + label{
  outline: 2px solid var(--lwr-maroon);
  outline-offset: 2px;
}
/* Leave a Review controls (v1.66.0): the site's font and at least 44px
   tall at every width. On desktop the text fields had the browser's
   13px default and were 36px tall, so the new agent picker wouldn't
   have matched them. */
.review-form input[type="text"],
.review-form textarea{ font: inherit; color: inherit; }
.review-form input[type="text"],
.review-form select{ min-height: 44px; line-height: 1.25; }
/* The agent picker matches the text fields: same padding, border and
   width. */
.review-agent-select{
  width: 100%;
  min-height: 44px;
  margin-top: 0.3em;
  padding: 0.7em;
  font: inherit;
  color: inherit;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.2);
  border-radius: 2px;
}

/* Honeypot field on the review form: off-screen rather than
   display:none, some bots specifically skip display:none fields. A
   real visitor never sees or fills this in. */
.lwr-honeypot{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   11. PROPERTIES PAGES
   All three property pages (page-allhomes.php,
   page-homes-by-map-search.php, page-homes-by-features-search.php)
   originally ran the same real IMPress for IDX Broker shortcodes;
   AllHomes and Features Search now use the real search form instead,
   see lwr_render_property_search_form() (functions.php) and the
   .idx-omnibar-form rules above. Confirmed from the live site's own
   export: production itself
   never built genuinely distinct map/feature-filter experiences for
   these, all three pages use this same combo there too. A real, so
   far unused "Prime Map Search Widget" turned up separately in that
   export (a different embed mechanism, a <script> tag rather than a
   shortcode), worth trying later as a real map-search page, see the
   header comment in page-homes-by-map-search.php.
   ========================================================= */

/* Small tab bar linking between the three pages, injected by
   lwr_property_subnav() in functions.php right below the page banner. */
.property-subnav{
  background: var(--lwr-white);
  border-bottom: 1px solid rgba(24,43,92,0.1);
}
.property-subnav ul{
  list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0;
  overflow-x: auto;
}
.property-subnav a{
  display: block;
  padding: 1.1rem 0.2rem;
  font-family: var(--lwr-font-data);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--lwr-ink);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.property-subnav a:hover{ color: var(--lwr-maroon); }
.property-subnav a.is-active{
  color: var(--lwr-navy-dark);
  border-bottom-color: var(--lwr-maroon);
}

/* Listing cards (allhomes + features search): same .card base, plus
   a prominent price line real search-results pages need that the
   homepage's plainer "Featured Listings" cards don't bother with. */
.listing-price{
  font-family: var(--lwr-font-display);
  font-size: 1.5rem;
  color: var(--lwr-navy-dark);
  margin: 0.9rem 0 0.2rem;
}
.price-unit{ font-size: 0.6em; font-weight: 400; margin-left: 0.15em; opacity: 0.75; }
.listing-mode-toggle{
  display: inline-flex;
  margin-bottom: 1.25rem;
  border: 1px solid var(--lwr-navy);
  border-radius: 999px;
  overflow: hidden;
}
.listing-mode-toggle a{
  padding: 0.55rem 1.4rem;
  font-family: var(--lwr-font-data);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--lwr-navy);
  text-decoration: none;
}
.listing-mode-toggle a + a{ border-left: 1px solid var(--lwr-navy); }
.listing-mode-toggle a:hover{ background: var(--lwr-sand-deep); }
.listing-mode-toggle a.is-active{ background: var(--lwr-navy); color: var(--lwr-white); }
.listing-card-compact{ padding: 1.1rem 1.3rem; }
.listing-card-compact .listing-price{ margin-top: 0; font-size: 1.2rem; }
.listing-card-compact p{ margin-bottom: 0; }

/* Community badge on the homepage listing preview cards (see
   front-page.php "Homes worth a second look"), also where a real
   "New construction" flag would go once IDX data provides one.
   Positioned relative to .listing-card itself, not a wrapper around
   the image: .card img bleeds past the card's padding with a negative
   margin (see the .card img rule above), so a wrapper around just the
   image collapses to an unreliable height and an absolute badge
   anchored to it lands in the wrong place, the same issue already
   worked out for the CC BY-SA photo credits. Anchoring to the stable
   outer card avoids it entirely. */
.listing-card{ position: relative; }
.listing-badge{
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lwr-white);
  background: rgba(15,29,66,0.72);
  padding: 0.25rem 0.65rem;
  border-radius: var(--lwr-radius);
}

/* =========================================================
   12. EDITORIAL STORY COMPONENTS
   Added in the 2026-08-12 refinement pass: real client stories
   (homepage "Real People. Real Moves.") and a reusable "Leslie's
   Take" pattern. Both intentionally plainer than a card grid, quote-
   led rather than icon-led, story-card imagery for pull is
   0 by design, this is text-first content.
   ========================================================= */
.story-card{
  display:flex;
  flex-direction:column;
  gap: 0.9rem;
  padding: 1.9rem 1.8rem;
  background: var(--lwr-sand-deep);
  border-radius: var(--lwr-radius);
}
/* Each homepage review is the reviewer's own words, whole (2.10.104, Leslie,
   October 26: "Shorten these"); the case-study lines we wrote around them
   are gone. */
.story-full-quote{
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.story-attribution{
  margin-top: auto;
  padding-top: 0.6rem;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  font-family: var(--lwr-font-data);
  font-size: 0.85rem;
}
.story-reviewer{ font-weight: 600; color: var(--lwr-ink); }
.story-agent{ color: var(--lwr-ink); opacity: 0.75; }
.story-agent a{ color: var(--lwr-navy); text-decoration: underline; }

/* Magazine section feature + supporting layout (homepage "What's
   happening around here?"): one large feature tile plus a stack of
   smaller supporting tiles, instead of four uniform grid cards.
   Lives on .section-navy, so h3 inherits the light-on-dark color
   already set by ".section-navy h2, .section-navy h3".

   Desktop row height is an explicit clamp() rather than left to content:
   an earlier version let the feature's own 4:3 image set the row height
   and had the two stacked supporting images grow to match it, on the
   assumption the feature (wider column) would always be the taller
   natural height. In practice the two stacked images + two headings
   came out taller than the single feature image + heading, so the
   feature column stretched to match but its image stayed at its fixed
   aspect ratio, leaving the feature image/heading finishing well above
   the supporting column's, i.e. visibly uneven bottoms. Giving the grid
   its own fixed height and making every image (feature included)
   flex:1 + min-height:0 makes both columns fill the exact same height
   regardless of content, so their bottoms always align.

   A first version of this fix set height:100% on .magazine-feature and
   .magazine-supporting to pass the grid row's height down to their
   flex:1 images. That broke in production (though not in the local
   WP Playground test): a percentage height on a grid item isn't
   guaranteed to resolve against the stretch-aligned row size the way
   a percentage normally resolves against a definite containing block,
   so it can compute back to auto. When it did, the flex:1 images had
   no definite height to grow into and fell back to their own
   intrinsic aspect ratio at full column width, i.e. the beach photo's
   tall native crop rendered near full height and spilled out past the
   grid row into the CTA buttons below it. min-height:0 on the grid
   items themselves (the same fix already applied one level down on
   .magazine-supporting-item, for the same underlying flex/grid
   min-height:auto "don't shrink below content" trap) is what actually
   makes stretch alignment win without depending on percentage
   resolution at all. */
.magazine-feature-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  height: clamp(420px, 38vw, 600px);
}
.magazine-feature{ display:flex; flex-direction:column; min-height: 0; }
.magazine-feature img{
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--lwr-radius);
}
.magazine-feature h3{ margin-top: 0.9rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.magazine-supporting{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}
.magazine-supporting-item{ flex: 1; display:flex; flex-direction:column; min-height: 0; }
.magazine-supporting-item img{
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--lwr-radius);
}
.magazine-supporting-item h3{ margin-top: 0.6rem; font-size: 1.05rem; }
@media (max-width: 780px){
  .magazine-feature-grid{ grid-template-columns: 1fr; height: auto; }
  .magazine-feature img{ flex: none; aspect-ratio: 4 / 3; }
  .magazine-supporting{ flex-direction: row; }
  .magazine-supporting-item img{ flex: none; aspect-ratio: 4 / 3; }
}
@media (max-width: 480px){
  .magazine-supporting{ flex-direction: column; }
}

/* This month's real magazine cover (homepage), pulled live via
   lwr_get_latest_magazine_issue(). 4/5 rather than square or a taller
   magazine ratio: the magazine's own covers have been square for
   their last three issues but portrait before that, 4/5 crops both
   reasonably via object-fit without badly letterboxing either. */
.magazine-cover-split{ align-items: center; gap: 2.5rem; margin-bottom: 2.5rem; }
.magazine-cover-link{ display: block; }
.magazine-cover-img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--lwr-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: transform 0.2s ease;
}
.magazine-cover-link:hover .magazine-cover-img{ transform: translateY(-3px); }
@media (max-width: 780px){
  .magazine-cover-split{ grid-template-columns: 1fr; }
  .magazine-cover-img{ max-width: 320px; margin: 0 auto; }
}

/* "Leslie's Take": a reusable editorial callout for her own
   perspective (what she's watching in the market, what buyers are
   asking this month, and so on).
   Populated usage, once a real quote exists:
     <aside class="leslies-take">
       <span class="leslies-take-label">Leslie&rsquo;s take</span>
       <p class="pull-quote">&hellip;</p>
       <cite>Leslie Wells</cite>
     </aside>
   Placeholder usage, .is-placeholder, currently live on
   page-why-parrish.php: visually distinct on purpose, dashed border,
   muted italic copy, no <cite>, so it reads unmistakably as an empty
   content slot rather than a real (if generic) quote, per the
   2026-08-12 art-direction brief's explicit ask for a "clearly marked
   placeholder" rather than omitting the component entirely:
     <aside class="leslies-take is-placeholder">
       <span class="leslies-take-label">Leslie&rsquo;s take</span>
       <p>Leslie&rsquo;s perspective on what she&rsquo;s seeing in the
          market right now, coming soon.</p>
     </aside>
*/
.leslies-take{
  padding: 2rem 2.2rem;
  background: var(--lwr-sand-deep);
  border-left: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.leslies-take-label{
  display:block;
  font-family: var(--lwr-font-data);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lwr-maroon);
  margin-bottom: 0.7rem;
}
.leslies-take .pull-quote{ margin-bottom: 0.7rem; }
.leslies-take cite{
  display:block;
  font-family: var(--lwr-font-data);
  font-size: 0.85rem;
  font-style: normal;
  opacity: 0.7;
}
.leslies-take.is-placeholder{
  background: transparent;
  border: 1px dashed rgba(24,43,92,0.3);
  border-left: 1px dashed rgba(24,43,92,0.3);
}
.leslies-take.is-placeholder .leslies-take-label{ color: var(--lwr-blue); }
.leslies-take.is-placeholder p{
  margin: 0;
  font-style: italic;
  opacity: 0.65;
}

/* =========================================================
   13. MAGAZINE SIGN-UP PANEL
   A small panel in the bottom corner, a sheet along the bottom on
   phones (v2.10.56, Leslie: less intrusive). No backdrop and no
   fade: it shows at once (an opacity fade painted fixed panels half
   transparent in Chromium, see the header notes). main.js owns the
   [hidden] attribute and when it opens.
   ========================================================= */
.subscribe-popup{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: min(360px, calc(100vw - 2.5rem));
}
/* Author CSS beats the browser's own [hidden]{ display:none } (origin
   beats specificity), so a fixed box needs this to really go away
   (found 2026-09-24, when an invisible full-page popup blocked clicks). */
.subscribe-popup[hidden]{ display: none; }
.subscribe-popup-card{
  position: relative;
  background: var(--lwr-white);
  border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(15,29,66,0.18);
}
.subscribe-popup-card:focus{ outline: none; }
.subscribe-popup-card:focus-visible{ outline: 2px solid var(--lwr-blue-deep); outline-offset: 2px; }

.subscribe-popup-close{
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--lwr-navy-dark);
  cursor: pointer;
}
.subscribe-popup-close:hover{ background: #F2F5F9; }

/* The cover beside the heading, big enough to read (v2.10.59, Shawn: at
   64px nobody could see it). Leslie's 50th anniversary cover is cropped to
   the cover itself (assets/magazine-cover-50-years.jpg), so it shows whole
   at the magazine's own letter-size proportions. A cover chosen in the
   Customizer, padded to a square by the magazine, still fits (contain). */
.subscribe-popup-cover{
  float: right;
  width: 116px;
  height: auto;
  aspect-ratio: 360 / 466;
  margin: 2.6rem 1.1rem 0.6rem 0.9rem;
  object-fit: contain;
  background: var(--lwr-navy-dark);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(24,43,92,0.22);
}
.subscribe-popup-body{ padding: 1.1rem 1.25rem 1.2rem; }
.subscribe-popup-body .eyebrow{ display: block; margin: 0 2.5rem 0.35rem 0; color: var(--lwr-blue-deep); }
.subscribe-popup-body h2{ margin-bottom: 0.4rem; font-size: 1.3rem; color: var(--lwr-navy-dark); }
.subscribe-popup-body > p{ margin-bottom: 0.8rem; font-size: 0.92rem; }
.subscribe-popup-body form p{ margin-bottom: 0.6rem; }
.subscribe-popup-body label{ display: block; margin-bottom: 0.2rem; font-size: 0.85rem; font-weight: 600; color: var(--lwr-navy-dark); }
.subscribe-popup-body input[type="text"],
.subscribe-popup-body input[type="email"]{
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid rgba(24,43,92,0.3);
  border-radius: var(--lwr-radius);
  font-family: inherit;
  font-size: 0.95rem;
}
.subscribe-popup-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.6rem;
}
.subscribe-popup-row input{ min-width: 0; }
.subscribe-popup-submit{ width: 100%; text-align: center; margin-top: 0.2rem; }
.subscribe-popup .form-privacy{ font-size: 0.78rem; }

/* "Get the Magazine" opens the fields; it's only needed on phones. */
.subscribe-popup-expand{ display: none; }

/* Phones: a sheet along the bottom, one field per row. Opened by
   scrolling it starts as a strip (.is-compact): the heading and one
   button, about 150px, until the visitor asks for the fields. */
@media (max-width: 640px){
  .subscribe-popup.is-compact .subscribe-popup-body > p,
  .subscribe-popup.is-compact .subscribe-popup-body form{ display: none; }
  .subscribe-popup.is-compact .subscribe-popup-expand{ display: block; width: 100%; text-align: center; }
  .subscribe-popup.is-compact .subscribe-popup-body{ padding: 0.8rem 1rem 0.9rem; }
  .subscribe-popup.is-compact .subscribe-popup-body h2{ margin-right: 2.25rem; font-size: 1.15rem; }
  .subscribe-popup{ right: 0; bottom: 0; left: 0; width: auto; }
  .subscribe-popup-card{ border-radius: var(--lwr-radius) var(--lwr-radius) 0 0; max-height: 70vh; max-height: 70dvh; }
  /* Phones (v2.10.59): the cover shows here too, beside the heading. */
  .subscribe-popup-cover{ float: left; width: 64px; margin: 0.85rem 0.85rem 0.5rem 1rem; }
  .subscribe-popup-row{ grid-template-columns: minmax(0, 1fr); }
  /* 16px or iPhones zoom the page when a field is tapped. */
  .subscribe-popup-body input[type="text"],
  .subscribe-popup-body input[type="email"]{ font-size: 16px; }
}

/* =========================================================
   14. SINGLE LISTING (single-listing.php)
   Themes the real estate detail page for IMPress's "Listing" CPT.
   Overriding this template file replaces all 5 of the plugin's
   built-in styles entirely, so this owns the full page, not a
   patch over the plugin's own markup/CSS (which never loads once
   this file exists in the theme).
   ========================================================= */
.lwr-listing-hero{
  position: relative;
  height: 46vh;
  min-height: 320px;
  max-height: 520px;
  overflow: hidden;
  background: var(--lwr-navy-dark);
}
.lwr-listing-hero-img{
  position: absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.lwr-listing-hero-placeholder{
  background:
    linear-gradient(135deg, var(--lwr-navy) 0%, var(--lwr-navy-dark) 100%);
}
.lwr-listing-hero-overlay{
  position: absolute; inset:0;
  display:flex; align-items:flex-end;
  padding-bottom: 2rem;
  background: linear-gradient(
    180deg,
    rgba(16,28,48,0) 40%,
    rgba(16,28,48,0.75) 100%
  );
}
.lwr-listing-hero-overlay .eyebrow{ color: var(--lwr-blue-light); }
.lwr-listing-hero-overlay h1{
  color: var(--lwr-white);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.2rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.lwr-listing-location{
  color: var(--lwr-white);
  opacity: 0.9;
  font-family: var(--lwr-font-data);
}

.lwr-listing-layout{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
  padding: 2.5rem 0 3rem;
}
@media (max-width: 900px){
  .lwr-listing-layout{ grid-template-columns: 1fr; }
}

.lwr-listing-factbar{
  display:flex; flex-wrap:wrap; align-items:center; gap: 1.2rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(24,43,92,0.12);
}
.lwr-listing-price{
  font-family: var(--lwr-font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--lwr-maroon);
}
.lwr-listing-facts{
  display:flex; flex-wrap:wrap; gap: 0.4rem 1.4rem;
  font-family: var(--lwr-font-data);
  color: var(--lwr-ink);
  font-size: 0.95rem;
}
.lwr-listing-facts strong{ color: var(--lwr-navy-dark); }

.lwr-listing-description{ margin-bottom: 2rem; }
.lwr-listing-gallery, .lwr-listing-video, .lwr-listing-map{ margin-bottom: 2rem; }
.lwr-listing-gallery img{ border-radius: var(--lwr-radius); }
.lwr-listing-map iframe{ border-radius: var(--lwr-radius); display:block; }

.lwr-listing-fineprint{
  font-size: 0.78rem;
  color: rgba(30,36,48,0.72);
  border-top: 1px solid rgba(24,43,92,0.12);
  padding-top: 1rem;
  margin-top: 2rem;
}

.lwr-listing-sidebar{
  display:flex; flex-direction:column; gap: 1.25rem;
  position: sticky;
  top: 6.5rem;
}
.lwr-listing-contact-card h3{ margin-bottom: 0.4rem; }
.lwr-listing-contact-card p{ margin-bottom: 1rem; font-size: 0.92rem; }
@media (max-width: 900px){
  .lwr-listing-sidebar{ position: static; flex-direction: row; flex-wrap: wrap; }
  .lwr-listing-contact-card{ flex: 1 1 260px; }
}

/* The magazine sign-up sits at the bottom of the screen (v2.10.56), clear of WordPress's admin bar. */

/* =========================================================
   15. RESOURCE COMPONENTS (inc/components.php, v1.32.0)
   Shared pieces for the Buyer/Seller Resource Centers, Communities
   and North of the River pages: breadcrumbs, FAQ accordion, closing
   CTA, "where to next" links, and the missing-data states.
   ========================================================= */

/* Breadcrumbs sit inside the navy .page-banner, above the eyebrow. */
.breadcrumbs{ margin: 0 0 1.1rem; }
.breadcrumbs ol{
  display: flex; flex-wrap: wrap; gap: 0.2rem 0;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--lwr-font-data); font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--lwr-navy);
}
.breadcrumbs li + li::before{ content: "/"; margin: 0 0.55rem; opacity: 0.5; }
.breadcrumbs a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(24,43,92,0.35); }
.breadcrumbs a:hover{ color: var(--lwr-maroon); }
.page-banner .breadcrumbs ol{ color: var(--lwr-blue-light); }
.page-banner .breadcrumbs a{ text-decoration-color: rgba(95,168,224,0.45); }
.page-banner .breadcrumbs a:hover{ color: var(--lwr-white); }
.page-banner .breadcrumbs [aria-current="page"]{ color: var(--lwr-sand-deep); }

/* FAQ: <details>/<summary>, works without JS and from the keyboard. */
.faq{ margin: 2.75rem 0; }
.faq-heading{ margin-bottom: 0.8rem; }
.faq-list{ border-top: 1px solid rgba(24,43,92,0.15); }
.faq-item{ border-bottom: 1px solid rgba(24,43,92,0.15); }
.faq-item summary{
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 2.6rem 1.1rem 0;
  font-weight: 600; font-size: 1.05rem; line-height: 1.4;
  color: var(--lwr-navy-dark);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--lwr-font-data); font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--lwr-maroon);
}
.faq-item[open] summary::after{ content: "\2212"; }
.faq-item summary:hover{ color: var(--lwr-maroon); }
.faq-item summary:focus-visible{ outline: 3px solid var(--lwr-maroon); outline-offset: 2px; }
.faq-answer{ padding: 0 0 1.25rem; max-width: 68ch; }

/* New Construction's long directories fold away behind one button each
   (2.10.104, Leslie's October 26 review: the page was too long); a jump
   link to a section opens it (assets/main.js). */
.nc-more{ margin-top: 1rem; }
.nc-more > summary{
  display: inline-flex; align-items: center; gap: 0.6rem;
  list-style: none; cursor: pointer;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(24,43,92,0.3); border-radius: var(--lwr-radius);
  font-weight: 600; color: var(--lwr-navy-dark);
  white-space: nowrap;
}
.nc-more > summary::-webkit-details-marker{ display: none; }
.nc-more > summary::after{ content: "+"; font-family: var(--lwr-font-data); font-size: 1.25rem; line-height: 1; color: var(--lwr-maroon); }
.nc-more[open] > summary::after{ content: "\2212"; }
.nc-more > summary:hover{ color: var(--lwr-maroon); }
.nc-more > summary:focus-visible{ outline: 3px solid var(--lwr-maroon); outline-offset: 2px; }
.nc-more[open] > summary{ margin-bottom: 1.25rem; }
.faq-answer > :last-child{ margin-bottom: 0; }

/* Closing navy call-to-action (lwr_cta()). */
.cta-block .container{ text-align: center; }
.cta-block-body{ max-width: 56ch; margin: 0 auto 1.5rem; }
.cta-block .cta-actions{ justify-content: center; }

/* "Where to next" (lwr_next_steps()). */
.next-steps{ margin: 3rem 0 0; }
.next-steps-heading{ font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 1rem; }
.next-steps-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.next-step{
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.15rem 1.35rem 1.25rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 3px solid var(--lwr-blue);
  border-radius: var(--lwr-radius);
  color: var(--lwr-ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.next-step:hover{ border-top-color: var(--lwr-maroon); transform: translateY(-2px); color: var(--lwr-ink); }
.next-step-kicker{
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue);
}
.next-step-title{ font-family: var(--lwr-font-display); font-size: 1.15rem; font-weight: 600; color: var(--lwr-navy-dark); }
.next-step-text{ font-size: 0.93rem; line-height: 1.5; color: rgba(30,36,48,0.8); }

/* Missing data: what visitors see, and the editors-only badge. */
.data-unconfirmed{ font-style: italic; color: rgba(30,36,48,0.72); }
.data-unconfirmed a{ font-style: normal; text-decoration: underline; text-underline-offset: 2px; }
.needs-data{
  display: inline-block;
  vertical-align: middle;
  padding: 0.12em 0.5em;
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700; font-style: normal;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #5c4300; background: #fff1bf; border: 1px solid #e3c25a; border-radius: var(--lwr-radius);
}
@media (prefers-reduced-motion: reduce){
  .next-step, .next-step:hover{ transition: none; transform: none; }
}

/* =========================================================
   16. TOOLS (inc/tools.php + assets/tools/, v1.34.0)
   The frame every calculator sits in: fields on one side, results on
   the other, then "How we calculate this" and the optional follow-up.
   Tool-specific markup lives in template-parts/tools/{slug}.php and
   uses these classes.
   ========================================================= */
.tool{
  margin: 2.75rem 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 4px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
}
.tool-head{ margin-bottom: 1.5rem; }
.tool-head h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0.3rem 0 0.4rem; }
.tool-intro{ max-width: 62ch; margin: 0; }

.tool-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 780px){ .tool-grid{ grid-template-columns: 1fr; } }
.tool-fields{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; }
/* minmax(0, 1fr) and min-width: 0: a fieldset and a grid track both default to their content's width, which pushed the repair tool 57px off a 375px screen. */
.tool-fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.tool-fieldset legend{
  padding: 0; margin-bottom: 0.25rem;
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue);
}
.tool-field label{ display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.93rem; color: var(--lwr-navy-dark); }
.tool-field .hint{ display: block; margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; color: rgba(30,36,48,0.72); }

/* Input with an optional "$" / "%" / "/yr" affix. Text inputs with
   inputmode="decimal" rather than type=number, so "$450,000" typed with
   commas still works; LWRTools.num() strips the formatting. */
.tool-input{
  display: flex; align-items: center;
  background: var(--lwr-white);
  border: 1.5px solid #d7dce3;
  border-radius: var(--lwr-radius);
}
.tool-input:focus-within{ border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.15); }
.tool-input input,
.tool-input select{
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 0.8em 0.9em;
  font-family: var(--lwr-font-data); font-size: 1rem; color: var(--lwr-ink);
}
.tool-input input:focus, .tool-input select:focus{ outline: none; }
.tool-affix{ padding: 0 0.8em; font-family: var(--lwr-font-data); color: rgba(30,36,48,0.72); white-space: nowrap; }
.tool-affix:first-child{ padding-right: 0; }
.tool-affix:last-child{ padding-left: 0; }

/* Results panel */
.tool-results{
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--lwr-sand-deep);
  border-radius: var(--lwr-radius);
}
.tool-result-label{
  display: block;
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue);
}
.tool-result-value{
  display: block; margin: 0.2rem 0 0.8rem;
  font-family: var(--lwr-font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1;
  color: var(--lwr-navy-dark);
  font-variant-numeric: tabular-nums;
}
.tool-breakdown{ width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tool-breakdown caption{ text-align: left; font-weight: 600; margin-bottom: 0.4rem; color: var(--lwr-navy-dark); }
.tool-breakdown th, .tool-breakdown td{ padding: 0.5rem 0; border-bottom: 1px solid rgba(24,43,92,0.12); text-align: left; font-weight: 400; vertical-align: top; }
.tool-breakdown td{ text-align: right; padding-left: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-breakdown .is-total th, .tool-breakdown .is-total td{ font-weight: 700; border-top: 2px solid var(--lwr-navy); border-bottom: 0; }
.tool-breakdown .row-note{ display: block; font-size: 0.8rem; color: rgba(30,36,48,0.7); }
.tool-note{ margin: 0.9rem 0 0; font-size: 0.85rem; color: rgba(30,36,48,0.75); }

/* "How we calculate this" (lwr_method_note()) */
.method-note{ margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid rgba(24,43,92,0.12); }
.method-note summary{
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; list-style: none;
  font-weight: 600; color: var(--lwr-navy);
}
.method-note summary::-webkit-details-marker{ display: none; }
.method-note summary::before{ content: "+"; font-family: var(--lwr-font-data); font-size: 1.2rem; line-height: 1; color: var(--lwr-maroon); }
.method-note[open] summary::before{ content: "\2212"; }
.method-note summary:focus-visible{ outline: 3px solid var(--lwr-maroon); outline-offset: 2px; }
.method-note-body{ margin-top: 0.9rem; max-width: 72ch; font-size: 0.93rem; }
.method-sources-heading{ margin-bottom: 0.4rem; font-weight: 600; }
.source-list{ margin: 0 0 1rem; padding-left: 1.15rem; }
.source-list li{ margin-bottom: 0.4rem; }
.source-list a{ text-decoration: underline; text-underline-offset: 2px; }
.method-disclaimer{ margin: 0; font-size: 0.85rem; color: rgba(30,36,48,0.75); }

/* Optional follow-up form under the results (lwr_tool_lead_form()) */
.tool-lead{ margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px dashed rgba(24,43,92,0.25); }
.tool-lead h3{ font-size: 1.25rem; margin-bottom: 0.35rem; }
.tool-lead-form{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; margin-top: 1rem; }
.tool-lead-form p{ margin: 0 0 0.9rem; }
.tool-lead-form .tool-lead-full{ grid-column: 1 / -1; }
.tool-lead-form label{ display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.tool-lead-form .optional{ font-weight: 400; opacity: 0.7; }
.tool-lead-form input[type="text"],
.tool-lead-form input[type="email"],
.tool-lead-form input[type="tel"],
.tool-lead-form textarea{
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1.5px solid #d7dce3; border-radius: var(--lwr-radius);
  font: inherit; font-size: 0.97rem; color: var(--lwr-ink); background: var(--lwr-white);
}
.tool-lead-form input:focus, .tool-lead-form textarea:focus{ outline: none; border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.15); }
.tool-lead-submit{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.tool-lead-note{ font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.form-error{ color: var(--lwr-maroon); font-weight: 600; }

/* =========================================================
   17. RESOURCE GUIDES (Buyer/Seller Resource Centers, v1.36.0)
   Long-form guide pages: a readable column, the numbered roadmap,
   the timeline, the "what's different here" fact cards, and the
   small link chips under each step (lwr_steps(), inc/components.php).
   ========================================================= */
.container.resource-body{ max-width: 820px; }
.resource-body > h2{ margin-top: 2.75rem; }
.resource-body > h2:first-child{ margin-top: 0; }

/* Numbered roadmap */
.roadmap{ list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: roadmap; }
.roadmap-step{ position: relative; padding: 0 0 1.6rem 3.4rem; counter-increment: roadmap; }
.roadmap-step::before{
  content: counter(roadmap);
  position: absolute; left: 0; top: 0.05rem;
  width: 2.3rem; height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lwr-navy); color: var(--lwr-white);
  font-family: var(--lwr-font-display); font-size: 1.1rem; font-weight: 600;
}
.roadmap-step + .roadmap-step{ border-top: 1px solid rgba(24,43,92,0.1); padding-top: 1.4rem; }
.roadmap-step + .roadmap-step::before{ top: 1.45rem; }
.roadmap-title, .timeline-title{ font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: 0 0 0.4rem; }
.roadmap-body > :last-child, .timeline-body > :last-child{ margin-bottom: 0.5rem; }
.roadmap-body ul, .timeline-body ul{ padding-left: 1.2rem; }
.roadmap-body li, .timeline-body li{ margin-bottom: 0.45rem; }

/* Timeline */
.timeline{ list-style: none; margin: 1.25rem 0 0 0.5rem; padding: 0 0 0 1.75rem; border-left: 2px solid rgba(24,43,92,0.18); }
.timeline-step{ position: relative; padding-bottom: 1.6rem; }
.timeline-step::before{
  content: "";
  position: absolute; left: calc(-1.75rem - 8px); top: 0.4rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lwr-maroon); border: 3px solid var(--lwr-white); box-shadow: 0 0 0 1px var(--lwr-maroon);
}
.timeline-step:last-child{ padding-bottom: 0.25rem; }

/* Link chips under a step */
.step-links{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0; }
.step-links a{
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(28,116,198,0.45); border-radius: 999px;
  font-family: var(--lwr-font-data); font-size: 0.85rem; font-weight: 600;
  color: var(--lwr-blue);
}
.idx-wrapper .step-links a{ color: var(--lwr-blue); }
.step-links a::after{ content: "\2192"; }
.step-links a:hover{ background: var(--lwr-blue); border-color: var(--lwr-blue); color: var(--lwr-white); }

/* "What's different about buying here" */
.fact-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1rem; }
@media (max-width: 700px){ .fact-list{ grid-template-columns: 1fr; } }
.fact{ padding: 1.25rem 1.4rem; background: var(--lwr-sand-deep); border-left: 3px solid var(--lwr-blue); border-radius: var(--lwr-radius); }
.fact h3{ font-size: 1.1rem; margin-bottom: 0.45rem; }
.fact p{ margin: 0; font-size: 0.95rem; }
.fact a, .resource-body p a, .resource-body li a{ text-decoration: underline; text-underline-offset: 2px; }
.resource-body .step-links a{ text-decoration: none; }

/* Tool modes (e.g. Monthly payment / What can I afford?) and small
   additions to the tool frame for v1.37.0. */
.tool [hidden]{ display: none !important; }
.resource-body--wide.container{ max-width: 1000px; }
.tool-modes{
  display: inline-flex; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--lwr-navy); border-radius: 999px; overflow: hidden;
}
.tool-mode{ position: relative; cursor: pointer; }
.tool-mode input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-mode span{
  display: block; padding: 0.55rem 1.3rem;
  font-family: var(--lwr-font-data); font-weight: 600; font-size: 0.92rem; color: var(--lwr-navy);
}
.tool-mode + .tool-mode span{ border-left: 1px solid var(--lwr-navy); }
.tool-mode input:checked + span{ background: var(--lwr-navy); color: var(--lwr-white); }
.tool-mode input:focus-visible + span{ outline: 3px solid var(--lwr-maroon); outline-offset: -3px; }
.tool-mode:hover input:not(:checked) + span{ background: var(--lwr-sand-deep); }
.tool-result-sub{ margin: -0.4rem 0 1rem; font-size: 0.92rem; color: rgba(30,36,48,0.8); }
.tool-result-sub:empty{ display: none; }
/* Keep the results in view while scrolling a long field list (desktop). */
@media (min-width: 781px){
  .tool-grid > .tool-results{ position: sticky; top: 6.5rem; }
  body.admin-bar .tool-grid > .tool-results{ top: calc(6.5rem + 32px); }
}

/* Guide pages that hold calculators use a wider column (tools need the
   room); the prose inside stays at reading width. */
.resource-prose{ max-width: 780px; }
.resource-prose > h2{ margin-top: 2.75rem; }
/* Terms of Use and MLS Notices (v2.10.13). */
.terms-updated{ margin: 0 0 1.5rem; font-size: 0.9rem; color: rgba(30,36,48,0.75); }
.terms-of-use > h2{ margin-top: 2.25rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }

/* Comparison tables (HOA vs. CDD, later the community comparison). On
   phones each row becomes a stacked card, labeled by the column name. */
.data-table-wrap{ margin: 1rem 0 1.5rem; }
.data-table{ width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td{ padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(24,43,92,0.12); }
.data-table thead th{ font-family: var(--lwr-font-data); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-blue); border-bottom: 2px solid var(--lwr-navy); }
.data-table tbody th{ font-weight: 600; color: var(--lwr-navy-dark); width: 22%; }
.data-table a{ text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px){
  .data-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td{ display: block; width: 100%; }
  .data-table tr{ padding: 0.9rem 0; border-bottom: 1px solid rgba(24,43,92,0.15); }
  .data-table th, .data-table td{ border: 0; padding: 0.2rem 0; }
  .data-table tbody th{ width: auto; margin-bottom: 0.3rem; }
  .data-table td[data-label]::before{ content: attr(data-label) ": "; font-weight: 700; color: var(--lwr-blue); }
}
/* In-page jumps (a tool's follow-up form returns to #tool-...-lead, the
   roadmap links to #roadmap) land below the sticky header, not under it. */
.tool, .tool-lead, .resource-body h2[id], .resource-prose h2[id], .roadmap-step[id], .timeline-step[id]{ scroll-margin-top: 7rem; }
body.admin-bar .tool, body.admin-bar .tool-lead, body.admin-bar .resource-body h2[id], body.admin-bar .resource-prose h2[id], body.admin-bar .roadmap-step[id], body.admin-bar .timeline-step[id]{ scroll-margin-top: calc(7rem + 32px); }

/* Estimate disclaimer, rendered by the tool frame inside every results
   panel, directly under the numbers (lwr_tool_estimate_note(), v1.41.0).
   Plain and readable, not fine print, and never behind an accordion. */
.tool-estimate{
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-left: 3px solid var(--lwr-blue);
  border-radius: var(--lwr-radius);
  font-size: 0.86rem; line-height: 1.5; color: var(--lwr-ink);
}
.tool-estimate p{ margin: 0; }
.tool-estimate p + p{ margin-top: 0.45rem; }
.tool-estimate strong{ color: var(--lwr-navy-dark); }
.tool-estimate a{ font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tool-fieldset-note{ margin: -0.35rem 0 0.25rem; font-size: 0.85rem; color: rgba(30,36,48,0.75); }
.tool-assumptions{ font-style: italic; }
/* A results panel taller than the window stops sticking, so the
   disclaimer at its foot can always be scrolled into view (tools-core.js
   adds .is-tall). */
.tool-grid > .tool-results.is-tall{ position: static; }

/* "How we do it": the brokerage's own approach to a step, from ACF
   (How Leslie Launches a Listing, v1.45.0). Empty fields render nothing. */
.step-approach{ margin: 0.9rem 0 0.4rem; padding: 0.85rem 1rem; background: rgba(28,116,198,0.06); border-left: 3px solid var(--lwr-blue); border-radius: 0 var(--lwr-radius) var(--lwr-radius) 0; }
.step-approach-label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.step-approach > :last-child{ margin-bottom: 0; }
/* Editors-only notes about missing content; visitors never get this markup. */
.editor-note{ margin: 1.5rem 0 0; padding: 0.75rem 1rem; font-size: 0.9rem; border: 1px dashed #e3c25a; background: #fffaf0; border-radius: var(--lwr-radius); }
.editor-note .needs-data{ margin-right: 0.4rem; }

/* Checklists (lwr_checklist(), v1.44.0): real checkboxes, saved in the
   visitor's browser by main.js, printable. */
.checklist{ margin: 2.75rem 0 0; }
.checklist-meta{ font-family: var(--lwr-font-data); font-size: 0.88rem; color: rgba(30,36,48,0.78); }
.checklist-meta button{
  margin-left: 0.4rem; padding: 0.25rem 0.75rem;
  font: 600 0.82rem var(--lwr-font-data); color: var(--lwr-blue);
  background: transparent; border: 1px solid rgba(28,116,198,0.45); border-radius: 999px; cursor: pointer;
}
.checklist-meta button:hover{ background: var(--lwr-blue); color: var(--lwr-white); }
.checklist-group{ margin: 1.25rem 0 0; padding: 1rem 1.2rem; border: 1px solid rgba(24,43,92,0.14); border-radius: var(--lwr-radius); }
.checklist-group legend{
  padding: 0 0.4rem;
  font-family: var(--lwr-font-data); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue);
}
.checklist-item{ display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.45rem 0; cursor: pointer; }
.checklist-item input{ width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--lwr-navy); flex: 0 0 auto; }
.checklist-item input:checked + span{ color: rgba(30,36,48,0.55); text-decoration: line-through; }
.checklist-item a{ text-decoration: underline; }

/* Moving Timeline results (v1.46.0): a dated list inside the results
   panel. Key dates (moving day, closings) stand out; passed dates are
   marked rather than dropped. */
.move-plan{ list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid rgba(24,43,92,0.14); }
.move-item{ display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.2rem 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(24,43,92,0.1); font-size: 0.92rem; line-height: 1.5; }
.move-when{ font-family: var(--lwr-font-data); font-size: 0.82rem; font-weight: 600; color: var(--lwr-navy); }
.move-what a{ text-decoration: underline; text-underline-offset: 2px; }
.move-item.is-key .move-when, .move-item.is-key .move-what strong{ color: var(--lwr-blue); }
.move-item.is-key{ background: rgba(28,116,198,0.07); margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.move-item.is-past .move-what{ color: rgba(30,36,48,0.7); }
.move-flag{ display: block; margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a5a00; }
@media (max-width: 480px){
  .move-item{ grid-template-columns: 1fr; }
}
.move-plan-actions{ margin: 1rem 0 0; }
.tool-print{
  padding: 0.45rem 1rem;
  font: 600 0.85rem var(--lwr-font-data); color: var(--lwr-blue);
  background: var(--lwr-white); border: 1px solid rgba(28,116,198,0.45); border-radius: 999px; cursor: pointer;
}
.tool-print:hover{ background: var(--lwr-blue); color: var(--lwr-white); }

/* =========================================================
   18. MAGAZINE PAGE (page-magazine.php, inc/magazine.php, v1.47.0)
   The current issue with its sign-up, recent stories, the monthly
   columns and the archive, all live from the magazine's site.
   ========================================================= */
.mag-feature{ display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mag-feature-cover{ display: block; justify-self: center; width: 100%; max-width: 440px; }
.mag-feature-cover img{ display: block; width: 100%; height: auto; border-radius: var(--lwr-radius); box-shadow: 0 28px 60px -22px rgba(15,29,66,0.55), 0 6px 18px -8px rgba(15,29,66,0.35); transition: transform 0.3s ease; }
.mag-feature-cover:hover img, .mag-feature-cover:focus-visible img{ transform: translateY(-4px); }
.mag-feature-body h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0.35rem 0 0.8rem; }
.mag-feature-body h2.mag-feature-label{ font-size: 0.78rem; line-height: 1.4; margin: 0 0 0.8rem; }
.mag-feature-body > p{ font-size: 1.08rem; line-height: 1.65; max-width: 52ch; }
.mag-feature-actions{ margin: 1.4rem 0 0; }
.mag-cover-placeholder{
  display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 1rem;
  font-family: var(--lwr-font-display); font-size: 1.3rem; text-align: center; color: var(--lwr-white);
  background: linear-gradient(160deg, var(--lwr-navy), var(--lwr-navy-dark)); border-radius: var(--lwr-radius);
}

/* The sign-up (lwr_magazine_subscribe_form()). */
.mag-subscribe{ margin-top: 2rem; padding: 1.4rem 1.5rem 1.5rem; background: var(--lwr-sand-deep); border-top: 3px solid var(--lwr-maroon); border-radius: var(--lwr-radius); }
.mag-subscribe h3{ margin: 0 0 0.3rem; font-size: 1.25rem; }
.mag-subscribe > p{ margin: 0 0 1rem; color: rgba(30,36,48,0.8); }
.mag-subscribe-form{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: end; }
.mag-subscribe-form p{ margin: 0; }
.mag-subscribe-form label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 600; color: var(--lwr-navy); }
.mag-subscribe-form input[type="text"], .mag-subscribe-form input[type="email"]{
  width: 100%; padding: 0.7rem 0.8rem; font: inherit; font-size: 1rem;
  background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.25); border-radius: var(--lwr-radius);
}
.mag-subscribe-form input:focus{ outline: 2px solid var(--lwr-blue); outline-offset: 1px; }
.mag-subscribe-form .lwr-honeypot{ position: absolute; left: -9999px; }
.mag-subscribe .form-error{ color: var(--lwr-maroon); font-weight: 600; }
.mag-subscribe:target, #subscribe{ scroll-margin-top: 7rem; }

/* Recent stories. */
.mag-stories{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.mag-story{ display: flex; flex-direction: column; }
.mag-story-image{ display: block; overflow: hidden; border-radius: var(--lwr-radius); background: var(--lwr-sand-deep); }
.mag-story-image img{ display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
.mag-story:hover .mag-story-image img{ transform: scale(1.04); }
.mag-story-body{ padding-top: 0.9rem; }
.mag-meta{ font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.mag-story h3{ font-size: 1.2rem; line-height: 1.3; margin: 0.35rem 0 0.5rem; }
.mag-story h3 a{ color: var(--lwr-navy-dark); text-decoration: none; }
.mag-story h3 a:hover, .mag-story h3 a:focus-visible{ text-decoration: underline; }
.mag-story p{ margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(30,36,48,0.8); }
.mag-more{ margin: 2rem 0 0; text-align: center; }
.mag-more a, .mag-link{ font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mag-link{ display: inline-block; padding: 0.2rem 0; }

/* The monthly columns. */
.mag-columns-section{ background: var(--lwr-sand-deep); }
.mag-columns{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.mag-column{ display: flex; flex-direction: column; background: var(--lwr-white); border-radius: var(--lwr-radius); overflow: hidden; box-shadow: 0 10px 30px -18px rgba(15,29,66,0.4); }
.mag-column-image img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.mag-column-body{ padding: 1.1rem 1.25rem 1.3rem; }
.mag-column-body h3{ font-size: 1.15rem; margin: 0 0 0.35rem; }
.mag-column-body p{ margin: 0 0 0.8rem; font-size: 0.95rem; color: rgba(30,36,48,0.8); }

/* The archive. */
.mag-issues{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.mag-issue{ display: block; text-decoration: none; color: var(--lwr-navy-dark); }
.mag-issue img, .mag-issue .mag-cover-placeholder{ display: flex; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--lwr-radius); box-shadow: 0 10px 24px -14px rgba(15,29,66,0.5); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mag-issue:hover img, .mag-issue:focus-visible img{ transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(15,29,66,0.55); }
.mag-issue-label{ display: block; margin-top: 0.6rem; font-family: var(--lwr-font-data); font-size: 0.88rem; font-weight: 600; }

@media (max-width: 900px){
  .mag-feature{ grid-template-columns: 1fr; }
  .mag-feature-cover{ max-width: 320px; }
  .mag-stories, .mag-columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .mag-stories, .mag-columns{ grid-template-columns: 1fr; }
  .mag-subscribe-form{ grid-template-columns: 1fr; }
  .mag-issues{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .mag-feature-cover img, .mag-story-image img, .mag-issue img{ transition: none; }
}

/* =========================================================
   19. COMMUNITIES (inc/communities.php, v1.49.0)
   A community page (single-lwr_community.php) and the shared community
   card used on the index, in "similar communities" and featured spots.
   ========================================================= */
.community-page > .container > * + *{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.community-page .editor-note{ margin: 0 0 1.5rem; }

.community-hero-image{ margin: 0; }
.community-hero-image img{ display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--lwr-radius); }
.community-hero-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.community-hero:not(.has-image) .community-hero-actions{ margin-top: 0; }
.community-best{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 1.25rem; }
.community-best-label{ font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.community-chips{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.community-chips li{ padding: 0.25rem 0.7rem; font-family: var(--lwr-font-data); font-size: 0.82rem; font-weight: 600; color: var(--lwr-navy); background: var(--lwr-sand-deep); border-radius: 999px; }

.community-columns{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.community-main > * + *{ margin-top: 2rem; }
.community-overview h2, .community-take h2, .community-snapshot h2{ font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 0.8rem; }

.community-take{ position: relative; padding: 1.5rem 1.6rem 1.4rem; background: var(--lwr-navy); color: var(--lwr-white); border-radius: var(--lwr-radius); }
.community-take h2{ color: var(--lwr-white); }
.community-take-body p{ font-family: var(--lwr-font-display); font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.94); }
.community-take-by{ margin: 0.6rem 0 0; font-family: var(--lwr-font-data); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; color: var(--lwr-blue-light); }
.community-tip{ padding: 1rem 1.2rem; background: #fff8e8; border-left: 3px solid #d9a441; border-radius: 0 var(--lwr-radius) var(--lwr-radius) 0; }
.community-tip-label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a5a00; }
.community-tip p:last-child{ margin-bottom: 0; }

.community-snapshot{ padding: 1.4rem 1.5rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.community-snapshot dl{ margin: 0; }
.snapshot-row{ display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid rgba(24,43,92,0.12); }
.snapshot-row:first-child{ border-top: 0; padding-top: 0; }
.snapshot-row dt{ font-family: var(--lwr-font-data); font-size: 0.85rem; font-weight: 700; color: var(--lwr-navy); }
.snapshot-row dd{ min-width: 0; margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.fact-note{ display: block; margin-top: 0.2rem; font-size: 0.8rem; color: rgba(30,36,48,0.7); }
.snapshot-verified{ margin: 1rem 0 0; font-size: 0.82rem; color: rgba(30,36,48,0.75); }

.community-listing-summary{ margin: -1rem 0 1.5rem; }
.community-listings-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 900px){ .community-listings-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .community-listings-grid{ grid-template-columns: 1fr; } }
.community-listing-note{ display: block; margin-top: 0.2rem; font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.community-see-all{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
.community-no-listings{ font-size: 1.05rem; }
.community-homes, #explore, #homes{ scroll-margin-top: 7rem; }

.community-gallery-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.community-gallery-grid img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--lwr-radius); }
.community-drive-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.community-drive-list strong{ display: block; font-family: var(--lwr-font-display); font-size: 1.4rem; color: var(--lwr-navy); }
/* Airport cards (v2.10.2, template-parts/components/airport-cards.php):
   the "Flying out" group under the drive tiles on Why Manatee County? and
   Communities (a row per home town), and every community page (its own
   town, --here). Stacked on phones; each time stays on one line. */
.airport-cards{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.airport-card{ display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; box-sizing: border-box; background: var(--lwr-sand-deep); border-top: 3px solid var(--lwr-blue-deep); border-radius: var(--lwr-radius); color: var(--lwr-ink); }
.airport-card-head{ display: flex; align-items: center; gap: 0.6rem; }
.airport-card-icon{ display: block; flex: 0 0 auto; width: 30px; height: 30px; color: var(--lwr-blue-deep); }
.airport-card-icon svg{ display: block; width: 100%; height: 100%; }
.airport-card-code{ font-family: var(--lwr-font-display); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: var(--lwr-navy); }
.airport-card-name{ margin: 0.75rem 0 0; font-family: var(--lwr-font-data); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--lwr-navy); }
.airport-card-name a{ color: inherit; text-decoration: none; }
.airport-card-name a:hover,
.airport-card-name a:focus-visible{ text-decoration: underline; }
.airport-card-city{ margin: 0.15rem 0 0; font-size: 0.85rem; color: rgba(30,36,48,0.75); }
.airport-card-times{ margin: 0.9rem 0 0; }
.airport-card-row{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.1rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid rgba(24,43,92,0.12); }
.airport-card-row dt{ font-size: 0.88rem; font-weight: 600; color: var(--lwr-navy); }
.airport-card-row dd{ margin: 0; font-size: 0.88rem; white-space: nowrap; }
.airport-card-row.is-unconfirmed dd{ font-style: italic; color: rgba(30,36,48,0.7); }
.airport-card-row .airport-card-note{ flex-basis: 100%; font-size: 0.8rem; white-space: normal; color: rgba(30,36,48,0.7); }
/* One place (a community page): the time is the headline. */
.airport-cards--here .airport-card-row{ display: block; }
.airport-cards--here .airport-card-row dt{ font-size: 0.8rem; font-weight: 600; color: rgba(30,36,48,0.75); }
.airport-cards--here .airport-card-row dd{ margin-top: 0.15rem; font-family: var(--lwr-font-display); font-size: 1.3rem; font-weight: 600; color: var(--lwr-navy); }
.airport-cards--here .airport-card-row.is-unconfirmed dd{ font-family: var(--lwr-font-body); font-size: 0.95rem; font-weight: 400; color: rgba(30,36,48,0.7); }
@media (max-width: 900px){
  .airport-cards{ grid-template-columns: minmax(0, 1fr); }
}
/* Tablets: name on the left, times on the right, so a full-width card
   doesn't stretch one row across the page. */
@media (min-width: 561px) and (max-width: 900px){
  .airport-card{ display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .airport-card > :not(.airport-card-times){ grid-column: 1; }
  .airport-card-times{ grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .airport-card-times .airport-card-row:first-child{ border-top: 0; padding-top: 0; }
}
.community-drives-sub{ margin: 1.75rem 0 0.75rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue-deep); }
.community-drives h2 + .community-drives-sub{ margin-top: 0.5rem; }
.community-drives-note{ margin: 1rem 0 0; font-size: 0.85rem; color: rgba(30,36,48,0.75); }

.community-explore{ padding: clamp(1.4rem, 3vw, 2rem); background: var(--lwr-sand-deep); border-top: 3px solid var(--lwr-maroon); border-radius: var(--lwr-radius); }
.community-explore h2{ font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 0.4rem; }
.community-explore .tool-lead-form{ max-width: 760px; }
.community-alert-opt label{ display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.community-alert-opt input{ width: 1.1rem; height: 1.1rem; accent-color: var(--lwr-navy); }

/* The community card. */
.community-tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.community-tile{ display: flex; flex-direction: column; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.12); border-radius: var(--lwr-radius); overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.community-tile:hover{ box-shadow: 0 16px 34px -20px rgba(15,29,66,0.5); transform: translateY(-2px); }
.community-tile-image img, .community-tile-placeholder{ display: flex; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.community-tile-placeholder{ align-items: center; justify-content: center; padding: 1rem; font-family: var(--lwr-font-display); font-size: 1.35rem; text-align: center; color: var(--lwr-white); background: linear-gradient(150deg, var(--lwr-navy), var(--lwr-navy-dark)); }
.community-tile-body{ display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.2rem 1.25rem; }
.community-tile-title{ margin: 0; font-size: 1.3rem; }
.community-tile-title a{ color: var(--lwr-navy-dark); text-decoration: none; }
.community-tile-title a:hover, .community-tile-title a:focus-visible{ text-decoration: underline; }
.community-tile-body p{ margin: 0; font-size: 0.95rem; color: rgba(30,36,48,0.8); }
.community-tile .community-chips{ margin-top: 0.35rem; }
/* Community cards (v1.64.0): the photo 5:4, the name in white over a
   dark fade along the bottom 30%, the town as a badge. Everything sits in
   one grid cell, so the name paints over the photo while its link (which
   covers the whole photo) stays the card's only link. Place cards keep the
   layout above. */
.community-tile-media{ position: relative; display: grid; aspect-ratio: 5 / 4; overflow: hidden; background: linear-gradient(150deg, var(--lwr-navy), var(--lwr-navy-dark)); }
.community-tile-media > *{ grid-area: 1 / 1; }
.community-tile-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.community-tile-media .community-tile-title{ align-self: end; display: flex; align-items: flex-end; min-height: 30%; margin: 0; padding: 1.4rem 1.1rem 0.95rem; font-size: 1.35rem; line-height: 1.2; color: var(--lwr-white); background: linear-gradient(to bottom, rgba(15,29,66,0), rgba(15,29,66,0.72) 65%, rgba(15,29,66,0.82)); text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.community-tile-media .community-tile-title a{ color: inherit; text-decoration: none; }
.community-tile-media .community-tile-title a::after{ content: ""; position: absolute; inset: 0; }
.community-tile-media .community-tile-title a:focus-visible{ outline: none; text-decoration: underline; }
.community-tile-media .community-tile-title a:focus-visible::after{ outline: 3px solid var(--lwr-white); outline-offset: -5px; box-shadow: inset 0 0 0 5px var(--lwr-blue); }
.community-tile:hover .community-tile-media .community-tile-title a{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.community-tile-town{ align-self: start; justify-self: start; margin: 0.8rem; padding: 0.22rem 0.7rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--lwr-navy-dark); background: rgba(255,255,255,0.93); border-radius: 999px; }
.community-tile-needs{ position: relative; z-index: 1; align-self: start; justify-self: end; margin: 0.8rem; }
.community-tile--no-photo .community-tile-title{ background: none; }
/* A card with no summary or details yet is just the photo: it doesn't
   stretch to its row into an empty white panel. */
.community-tile.community-tile--bare, .community-tile-wrap > .community-tile.community-tile--bare{ align-self: start; height: auto; }

/* Index filters (v1.50.0). */
.community-filters{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.2rem; padding: 1.1rem 1.25rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.community-filters p{ margin: 0; }
.community-filter label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; color: var(--lwr-navy); }
.community-filter select, .community-compare-form select{ min-width: 11rem; padding: 0.55rem 0.7rem; font: inherit; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.25); border-radius: var(--lwr-radius); }
.community-filter-checks{ display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; padding: 0; border: 0; }
.community-filter-checks legend{ width: 100%; margin-bottom: 0.3rem; padding: 0; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; color: var(--lwr-navy); }
.community-filter-checks label{ display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; cursor: pointer; }
.community-filter-checks input{ width: 1rem; height: 1rem; accent-color: var(--lwr-navy); }
.community-filter-status{ flex-basis: 100%; font-size: 0.88rem; font-weight: 600; color: var(--lwr-navy); }
.community-filter-note{ margin: 0.6rem 0 1.75rem; font-size: 0.85rem; color: rgba(30,36,48,0.72); }
.community-tile-wrap > .community-tile{ height: 100%; }
.community-filter-empty{ margin-top: 1rem; }
.link-button{ padding: 0; font: inherit; color: var(--lwr-blue); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.community-index-links{ margin-top: 2rem; }

/* Compare (v1.50.0). */
.community-compare-form{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem 1.2rem; margin-bottom: 2rem; }
.community-compare-form p{ margin: 0; }
.community-compare-form label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; color: var(--lwr-navy); }
.community-compare-table thead th a{ color: var(--lwr-navy-dark); font-family: var(--lwr-font-display); font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
.compare-unknown{ font-style: italic; color: rgba(30,36,48,0.72); }
.community-compare-note{ font-size: 0.9rem; color: rgba(30,36,48,0.78); }

/* Community Matchmaker (v1.51.0). */
.matchmaker-promise{ margin: 0 0 1.25rem; padding: 0.75rem 1rem; font-size: 0.92rem; background: rgba(28,116,198,0.07); border-left: 3px solid var(--lwr-blue); border-radius: 0 var(--lwr-radius) var(--lwr-radius) 0; }
.matchmaker-checks{ display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.matchmaker-checks .tool-field-label{ flex-basis: 100%; font-weight: 600; font-size: 0.9rem; }
.matchmaker-checks label{ display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; cursor: pointer; }
.matchmaker-checks input,
.community-filters label > input[type="checkbox"],
.community-explore label > input[type="checkbox"]{ width: 1.15rem; height: 1.15rem; accent-color: var(--lwr-navy); }
.matchmaker-checks label{ min-height: 24px; }
.tool-field-note{ margin: 0; font-size: 0.9rem; color: rgba(30,36,48,0.72); }
.matchmaker-results{ margin-top: 1rem; }
.match-group + .match-group{ margin-top: 1.5rem; }
.match-group-title{ margin: 0 0 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-blue); }
.match-group-note{ margin: 0 0 0.75rem; font-size: 0.88rem; color: rgba(30,36,48,0.75); }
.match-card{ margin-top: 0.75rem; padding: 0.9rem 1rem; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.12); border-radius: var(--lwr-radius); }
.match-card h3{ margin: 0; font-size: 1.15rem; }
.match-card h3 a{ color: var(--lwr-navy-dark); }
.match-town{ margin: 0.1rem 0 0.4rem; font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.match-checks{ margin: 0.4rem 0; padding: 0; list-style: none; font-size: 0.9rem; }
.match-checks li{ display: flex; gap: 0.45rem; padding: 0.15rem 0; }
.match-mark{ flex: 0 0 1.1rem; font-weight: 700; text-align: center; }
.match-checks .is-yes .match-mark{ color: #1f7a3d; }
.match-checks .is-no .match-mark{ color: var(--lwr-maroon); }
.match-checks .is-unknown{ color: rgba(30,36,48,0.7); }
.match-checks .is-unknown .match-mark{ color: #8a5a00; }
.match-listings{ margin: 0.4rem 0 0; font-size: 0.85rem; }

@media (max-width: 900px){
  .community-columns{ grid-template-columns: 1fr; }
  /* v2.10.41: stacked, the Good to know panel needs room before the next section. */
  .single-lwr_place .community-columns{ margin-bottom: 2.5rem; }
}
@media (max-width: 480px){
  .snapshot-row{ grid-template-columns: 1fr; gap: 0.15rem; }
  .community-hero-actions .btn, .community-see-all .btn{ width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .community-tile, .community-tile:hover{ transition: none; transform: none; }
}

/* =========================================================
   20. NORTH OF THE RIVER (inc/north-of-the-river.php,
   inc/leslies-take.php, v1.53.0): the hub, What's Being Built, Both
   Sides of the River, place and project pages, Leslie's Take, and the
   homepage additions.
   ========================================================= */
.nor-hub > .container > * + *{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.nor-intro{ max-width: 72ch; }
.nor-jump{ margin-top: 1.5rem !important; }
.nor-section .section-head{ margin-bottom: 1.5rem; }
.nor-towns{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.nor-towns a{ padding: 0.45rem 1rem; font-family: var(--lwr-font-data); font-weight: 600; color: var(--lwr-navy); border: 1px solid rgba(24,43,92,0.25); border-radius: 999px; }
.nor-towns a:hover, .nor-towns a:focus-visible{ background: var(--lwr-navy); color: var(--lwr-white); }
/* "Town guides" (2026-10-21): names the four buttons as the town pages,
   not as the whole of North of the River. */
.nor-towns-label{ align-self: center; margin-right: 0.25rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-navy); }
.nor-more{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }
@media (max-width: 600px){ .nor-more .btn{ flex: 1 1 100%; justify-content: center; text-align: center; } }
/* ~ rather than +: main.js puts the swipe-row dots between the two rows (v1.60.0). */
.nor-section .mag-columns ~ .mag-stories{ margin-top: 2rem; }
.community-connection h2{ font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 1rem; }

/* Projects. */
.development-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.development-card{ display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.12); border-top: 3px solid var(--lwr-blue); border-radius: var(--lwr-radius); }
.development-card-top{ display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; }
.development-status{ padding: 0.15rem 0.6rem; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; background: var(--lwr-sand-deep); color: var(--lwr-navy); }
.development-status.status-construction{ background: #fff1bf; color: #5c4300; }
.development-status.status-opening, .development-status.status-open{ background: #e3f3e8; color: #1f5f33; }
.development-when{ font-size: 0.85rem; color: rgba(30,36,48,0.75); }
.development-card-title{ margin: 0; font-size: 1.2rem; }
.development-card-title a{ color: var(--lwr-navy-dark); }
.development-card p{ margin: 0; font-size: 0.95rem; }
.development-where{ font-size: 0.88rem !important; color: rgba(30,36,48,0.75); }
.wbb-archive-title{ margin: 2rem 0 0.6rem; font-size: 1.1rem; }
.wbb-archive{ display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.wbb-archive a{ text-decoration: underline; text-underline-offset: 2px; }

/* Places. */
.place-nav{ margin: 1.5rem 0 2rem; }
.place-grid{ margin-top: 1rem; }

/* Leslie's Take. */
.editorial-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.editorial-card{ display: flex; flex-direction: column; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.12); border-radius: var(--lwr-radius); overflow: hidden; }
.editorial-card-image img{ display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.editorial-card-body{ display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.2rem 1.3rem; }
.editorial-card-title{ margin: 0; font-size: 1.25rem; line-height: 1.3; }
.editorial-card-title a{ color: var(--lwr-navy-dark); text-decoration: none; }
.editorial-card-title a:hover, .editorial-card-title a:focus-visible{ text-decoration: underline; }
.editorial-card-body p{ margin: 0; font-size: 0.95rem; color: rgba(30,36,48,0.8); }
.editorial-card.is-featured{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.editorial-card.is-featured .editorial-card-image img{ height: 100%; aspect-ratio: auto; min-height: 280px; }
.editorial-card.is-featured .editorial-card-body{ justify-content: center; padding: clamp(1.25rem, 3vw, 2.25rem); }
.editorial-card.is-featured .editorial-card-title{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.editorial-featured{ margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.editorial-card.is-featured.no-image{ display: flex; }
.editorial-card.is-featured.no-image .editorial-card-body{ max-width: 760px; }
.editorial-topics a[aria-current="page"]{ background: var(--lwr-navy); color: var(--lwr-white); border-color: var(--lwr-navy); }
.editorial-topics{ margin-bottom: 2rem; }
.editorial-pagination ul{ display: flex; gap: 0.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.editorial-pagination a, .editorial-pagination span{ display: inline-block; min-width: 2.4rem; padding: 0.4rem 0.7rem; text-align: center; border: 1px solid rgba(24,43,92,0.2); border-radius: var(--lwr-radius); }
.editorial-pagination .current{ background: var(--lwr-navy); color: var(--lwr-white); }
.editorial-article{ max-width: 860px; }
.editorial-article > * + *{ margin-top: clamp(2rem, 4vw, 3rem); }
.editorial-body{ font-size: 1.08rem; line-height: 1.75; }

/* Homepage additions. */
.home-columns{ margin: 2.5rem 0; }
.section-navy .mag-column h3{ color: var(--lwr-navy-dark); }
.section-navy .mag-column .mag-link{ color: var(--lwr-blue); }
.home-subhead{ margin: 2.5rem 0 1rem; font-size: 1.35rem; }

@media (max-width: 760px){
  .editorial-card.is-featured{ grid-template-columns: 1fr; }
  .editorial-card.is-featured .editorial-card-image img{ min-height: 0; aspect-ratio: 16 / 10; }
}

/* Printing a guide: the content and its checklist, without site chrome,
   tools or the closing sections. */
@media print{
  .utility-bar, .site-header, .site-footer, .mobile-menu, .river-divider, .cta-block, .next-steps, .tool:not(.tool--printable), .faq, .photo-credits, .breadcrumbs, .checklist-meta button, .subscribe-popup, .print-hide{ display: none !important; }
  /* A printable tool (the Moving Timeline) prints its results only. */
  .tool--printable .tool-modes, .tool--printable .tool-fields, .tool--printable .tool-lead, .tool--printable .method-note, .tool--printable .move-plan-actions, .tool--printable .tool-estimate-review{ display: none !important; }
  .tool--printable .tool-grid{ display: block; }
  .tool--printable .tool-results{ position: static; background: none; padding: 0; }
  .move-item{ break-inside: avoid; }
  .move-item.is-key{ background: none; }
  .page-banner{ background: none; color: #000; padding: 0 0 1rem; }
  .page-banner h1, .page-banner p, .page-banner .eyebrow{ color: #000; }
  .checklist-group{ break-inside: avoid; }
}

/* =========================================================
   PHASE 4.5: PHONES (v1.60.0)
   From measurements at 320 to 430px; see README.
   ========================================================= */

/* Swipe rows on phones: the homepage's communities, agents and featured
   listings, community and agent listing previews, and the magazine rows
   on the homepage and North of the River (the shared renderers add the
   class only for two or more cards). Stacked full width, six listings
   took 2,800px of scrolling on a community page. The next card peeks in
   and main.js adds dots. Kept last so it outranks each row's own
   display:grid. /allhomes/, the team roster and /magazine/ stay lists. */
@media (max-width: 640px){
  .grid-scroll{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin: 0 calc(-1 * var(--lwr-gutter));
    padding: 0 var(--lwr-gutter) 0.75rem;
    -webkit-overflow-scrolling: touch;
  }
  .grid-scroll > *{
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: center;
  }
}

/* iOS Safari zooms the page when a field under 16px gets focus. The
   contact, valuation, join and review forms were 13.3px (the browser
   default), and calculator follow-ups and the listings search 15.2 to
   15.5px. */
@media (pointer: coarse), (max-width: 780px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  :is(select, textarea):not([data-lwr-small]){ font-size: max(16px, 1rem); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  select:not([data-lwr-small]){ min-height: 44px; }
}

/* Touch screens: 44px tap targets. Mouse users keep the compact sizes. */
@media (pointer: coarse){
  .step-links a{ min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .method-note summary{ min-height: 44px; }
  .listing-mode-toggle a{ display: inline-flex; align-items: center; min-height: 44px; }
  .tool-mode span{ display: flex; align-items: center; min-height: 44px; }
  .checklist-meta button{ min-height: 44px; padding-left: 1rem; padding-right: 1rem; }
  .mag-link{ padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .matchmaker-checks label,
  .community-filters label:has(> input[type="checkbox"]),
  .community-explore label:has(> input[type="checkbox"]){ display: inline-flex; align-items: center; min-height: 44px; }
  /* Footer: the space between links moves into the links, so each one's
     tap area fills its row and the spacing looks the same. */
  .footer-grid li{ margin-bottom: 0; }
  .footer-col li a, .footer-legal a{ display: flex; align-items: center; min-height: 44px; padding: 0.3rem 0; }
  /* Mobile menu: section links were 36px, town chips 40px. */
  .mobile-menu-sub{ gap: 0 1.5rem; }
  .mobile-menu-sub a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0.2rem 0; }
  .mobile-menu-chips a{ min-height: 44px; }
  .site-header .site-brand{ min-height: 44px; justify-content: center; }
  .checklist-item{ min-height: 44px; }
  .community-compare-table thead a{ display: inline-block; padding: 0.6rem 0; }
}

/* Calculators at 320px: the page gutter, the tool card, the results
   panel and the estimate note each padded their sides, leaving the
   "Estimate only" text a 165px column. */
@media (max-width: 400px){
  .tool{ padding: 1.1rem 0.9rem; }
  .tool-results{ padding: 1rem 0.9rem; }
  .tool-estimate{ padding: 0.75rem 0.8rem; }
}

/* =========================================================
   PHASE 5.1: PHONE REFINEMENTS (v1.62.0)
   Phones only (640px and narrower). Above that, nothing here applies
   and every layout is as before. See README.
   ========================================================= */

/* Blocks that exist for one side of the breakpoint only. Lazy images in
   a hidden block aren't fetched, so each side loads only its own photos. */
.lifestyle-rail,
.mag-column-rails,
.footer-mobile{ display: none; }

@media (max-width: 640px){
  .lifestyle-rail,
  .mag-column-rails,
  .footer-mobile{ display: block; }
  .magazine-feature-grid,
  .mag-columns--grid,
  .site-footer .footer-grid--sections{ display: none; }

  /* The Fort Hamer band: taller, the words up in the sky with a darker
     fade behind them, the bridge below them in full view. It was a
     4:5 box capped at 460px with the words over the bridge. */
  .section-fullbleed{ aspect-ratio: auto; height: auto; min-height: 70vh; min-height: 70svh; max-height: none; }
  .section-fullbleed-img{ object-position: 50% 60%; }
  .section-fullbleed::after{
    background: linear-gradient(180deg, rgba(16,28,48,0.8) 0%, rgba(16,28,48,0.6) 38%, rgba(16,28,48,0) 62%, rgba(16,28,48,0.2) 100%);
  }
  /* v1.66.0: still centered, but higher (and the fade a little deeper)
     so the longer copy stays in the darker sky, above the bright glow
     at the horizon. */
  .section-fullbleed-content{ justify-content: flex-start; align-items: center; text-align: center; gap: 0.6rem; padding-top: clamp(1.5rem, 6vw, 2.25rem); padding-bottom: 2rem; }
  .section-fullbleed-content > *{ max-width: 100%; }
  .section-fullbleed-title{ font-size: clamp(1.4rem, 6.4vw, 1.75rem); line-height: 1.2; }

  /* Life beyond your front door: the drive-time tiles as a swipe row. */
  .lifestyle-rail{ margin-top: 0.25rem; }
  .lifestyle-rail-heading{ margin: 0 0 1rem; font-size: 1.5rem; }
  .lifestyle-rail .drive-tile{ min-height: 360px; }
  /* The note is faded by its text color, not opacity, so its link keeps full contrast on navy (2026-10-11). */
  .lifestyle-rail .drive-footnote{ margin: 0.75rem 0 0; text-align: left; opacity: 1; color: rgba(255,255,255,0.75); }

  /* Client reviews as swipe cards: the review in the reviewer's words, then who (2.10.104). */
  .story-rail .story-card{ gap: 0.8rem; padding: 1.5rem 1.35rem; }

  /* Magazine rails: each keeps its own shape so stories, editions and
     past issues don't read as one list. */
  .mag-stories.grid-scroll > *{ flex-basis: 80%; }
  .mag-issues.grid-scroll > *{ flex-basis: 38%; }
  .mag-issues.grid-scroll .mag-issue-label{ font-size: 0.82rem; }
  .mag-column-rail + .mag-column-rail{ margin-top: 2.25rem; }
  .mag-column-rail h3{ margin: 0 0 0.25rem; padding-left: 0.7rem; border-left: 4px solid var(--lwr-navy); font-size: 1.2rem; }
  .mag-column-rail--calendar h3{ border-left-color: var(--lwr-maroon); }
  .mag-column-rail--stats h3{ border-left-color: var(--lwr-blue); }
  .mag-column-rail > p{ margin: 0 0 0.9rem; font-size: 0.92rem; color: rgba(30,36,48,0.78); }
  .mag-editions.grid-scroll > *{ flex-basis: 62%; }
  /* Cards the row hasn't reached yet skip rendering, which also holds back
     their lazy images: in a swipe row Chrome otherwise loads every one at
     once, alongside the cover (the page's largest paint).
     Edition and past-issue cards are shorter than 320px, and a skipped
     card's placeholder height stretched every card in the row to match,
     leaving about 110px of blank card under each date (v1.63.0). Those
     rows now always render their first cards, which set the row's height,
     and the rest count as zero height until they render. Story cards are
     taller than 320px, so they keep the placeholder. */
  .mag-stories.grid-scroll > *{ content-visibility: auto; contain-intrinsic-size: auto 320px; }
  .mag-editions.grid-scroll > :nth-child(n+3), .mag-issues.grid-scroll > :nth-child(n+4){ content-visibility: auto; contain-intrinsic-size: auto none; }
  .mag-edition{ display: block; overflow: hidden; border-radius: var(--lwr-radius); background: var(--lwr-white); color: var(--lwr-navy-dark); text-decoration: none; box-shadow: 0 10px 24px -18px rgba(15,29,66,0.45); }
  .mag-edition img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
  .mag-edition-label{ display: block; padding: 0.7rem 0.9rem 0.8rem; font-family: var(--lwr-font-data); font-size: 0.9rem; font-weight: 600; }
  .mag-column-rail .mag-link{ margin-top: 0.6rem; }

  /* Footer: contact first, then the groups. Only the Nosy News card
     carries an accent; links are a quiet light gray, with room between. */
  .footer-mobile{ margin-bottom: 2rem; }
  .footer-m-contact{ padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(245,240,228,0.15); }
  .footer-m-name{ margin: 0 0 0.5rem; font-family: var(--lwr-font-display); font-size: 1.5rem; color: var(--lwr-white); }
  .footer-m-office{ list-style: none; margin: 0 0 1rem; padding: 0; }
  .footer-m-office a{ display: inline-flex; align-items: center; min-height: 44px; color: var(--lwr-sand-deep); }
  .footer-mobile .footer-social{ margin: 0 0 1.25rem; }
  .footer-mobile .mobile-menu-nosy{ padding: 1rem 1.1rem; background: var(--lwr-maroon); color: var(--lwr-white); }
  .footer-mobile .mobile-menu-nosy-text span{ color: rgba(255,255,255,0.88); }
  .footer-m-groups{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .footer-mobile ul{ list-style: none; margin: 0; padding: 0; }
  .footer-mobile .footer-heading{ margin: 0 0 0.4rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238,241,245,0.62); }
  .footer-mobile .footer-col a{ color: rgba(238,241,245,0.86); }
  .footer-mobile .footer-col a:hover{ color: var(--lwr-white); }
}

/* ==========================================================
   PHONE REFINEMENTS, PART 2 (v1.68.0)
   From Shawn's review on an iPhone. 640px and narrower only, except
   the base rule that hides the phone-only rail tabs on desktop.
   ========================================================== */
.rail-tabs{ display: none; }
@media (max-width: 640px){
  /* Hero: the two buttons share a row instead of stacking. */
  .hero-actions{ flex-wrap: nowrap; gap: 0.6rem; }
  .hero-actions .btn{ flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.85em 0.55em; font-size: 0.95rem; line-height: 1.25; }

  /* Magazine: its two buttons share a row, right after the magazine; the
     lifestyle rail follows as its own block, its drive-time link now part
     of the footnote. */
  .mag-cta-actions{ flex-wrap: nowrap; gap: 0.6rem; }
  .mag-cta-actions .btn{ flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.85em 0.55em; line-height: 1.25; }
  .lifestyle-rail{ margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(238,241,245,0.16); }
  .lifestyle-rail .drive-footnote a{ color: var(--lwr-blue-light); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

  /* Finding home / Leaving home: side by side in a swipe row, the next
     card peeking in, with a switch above (main.js, rail tabs). The cards
     skip the fade-in so the peeking card shows. */
  .path-split.grid-scroll{ gap: 0.75rem; align-items: flex-start; }
  .path-split.grid-scroll > *{ flex-basis: 86%; }
  .path-split > .reveal{ opacity: 1; transform: none; }
  .path-card{ padding: 1.5rem 1.25rem 1.6rem; }
  .path-card .cta-actions{ flex-wrap: nowrap; gap: 0.5rem; }
  .path-card .cta-actions .btn{ flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.8em 0.5em; line-height: 1.25; }
  .rail-tabs{ display: flex; gap: 0.5rem; margin: 0 0 1rem; }
  .rail-tab{ flex: 1 1 0; min-height: 44px; padding: 0.5rem 0.75rem; font-family: var(--lwr-font-data); font-size: 0.92rem; font-weight: 600; color: var(--lwr-navy); background: transparent; border: 1.5px solid rgba(24,43,92,0.28); border-radius: 999px; cursor: pointer; }
  .rail-tab[aria-pressed="true"]{ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); }
  .rail-tab:focus-visible{ outline: 2px solid var(--lwr-maroon); outline-offset: 2px; }

  /* Community cards: two across (when there are two or more), photo and
     name only; the description and details are on each community's
     page. Things to Do place cards keep their layout. */
  .community-tiles:has(> :nth-child(2)):not(:has(.place-card)){ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .community-tiles:has(> :nth-child(2)):not(:has(.place-card)) .community-tile-body{ display: none; }
  .community-tiles:has(> :nth-child(2)) .community-tile-media .community-tile-title{ min-height: 45%; padding: 1rem 0.7rem 0.6rem; font-size: 1.05rem; }
  .community-tiles:has(> :nth-child(2)) .community-tile-town{ margin: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.68rem; }
  .community-tiles:has(> :nth-child(2)) .community-tile-needs{ margin: 0.5rem; font-size: 0.62rem; }

  /* Mobile menu: the four towns on one row. */
  .mobile-menu-chips{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .mobile-menu-chips a{ justify-content: center; text-align: center; padding: 0.25rem 0.3rem; font-size: 0.86rem; line-height: 1.15; border-radius: 22px; }
}

/* =========================================================
   PHONE REVIEW FIXES (v1.77.0)
   From Shawn's phone review of ww1. Kept last so each outranks the
   earlier rule it corrects.
   ========================================================= */

/* The line under every form that takes someone's details, with the
   privacy policy link (lwr_form_privacy_note()). */
.form-privacy{ margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.5; opacity: 0.75; }
.form-privacy a{ text-decoration: underline; text-underline-offset: 2px; }
.tool-lead-form .form-privacy{ grid-column: 1 / -1; }

/* An optional checkbox above a form's send button: since v2.10.31 only
   marketing calls and texts (v2.10.28 to v2.10.30 also had a home-search
   account box). Two element names so it outranks each form's own label
   rule (block, bold). */
p.form-account{ margin: 0.2rem 0 1rem; }
p.form-account label{ display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; padding: 0.15rem 0; font-weight: 400; font-size: 0.9rem; line-height: 1.45; cursor: pointer; }
p.form-account input[type="checkbox"]{ flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--lwr-navy); cursor: pointer; }
p.form-account input[type="checkbox"]:focus-visible{ outline: 2px solid var(--lwr-blue); outline-offset: 2px; }

/* Marketing calls and texts (v2.10.30): optional and unchecked, a touch
   smaller so the longer wording wraps quietly. */
p.form-consent label{ font-size: 0.84rem; }
p.form-consent strong{ font-weight: 600; }
.agent-contact-phone{ font-weight: 700; white-space: nowrap; }

/* Carousel dots right above a row of buttons (an agent's listings, then
   See all / Recently sold) had no room under them. */
.scroll-dots + .cta-actions{ margin-top: 1.5rem; }

/* Homepage Finding home / Leaving home: the seller card's line was a
   pull-quote, bigger and lighter than the buyer card's heading, so the
   two headlines didn't match. Same size and weight now. */
.path-card-editorial .pull-quote{
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
}

@media (max-width: 780px){
  /* The hero fills the phone's first screen; at 88% the next section's
     navy showed under it as an empty band. The content keeps clear of
     the video's pause button, which gets the bottom corner to itself
     instead of sitting on the Search homes button. */
  .hero{ min-height: 100vh; min-height: 100svh; }
  .hero-content{ padding-bottom: calc(44px + 1.75rem); }
  .hero-video-toggle{ bottom: 0.9rem; }
}

@media (max-width: 640px){
  /* Buttons in a row stack full width, one line each, instead of a
     one-line label beside a two-line one. */
  .hero-actions,
  .cta-actions{ flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero-actions > .btn,
  .cta-actions > .btn{ width: 100%; text-align: center; }

  /* Finding home / Leaving home: the two cards in the swipe row are the
     same height, so each card's buttons sit at its bottom, level with
     the other card's. */
  .path-split.grid-scroll{ align-items: stretch; }

  /* The page path stays on one line. "Home" is left off when there are
     three or more steps (the logo does that job on a phone), and the
     current page shortens with an ellipsis if it's still too long. */
  .breadcrumbs ol{ flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .breadcrumbs li{ flex: 0 0 auto; }
  .breadcrumbs li:last-child{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .breadcrumbs li:first-child:nth-last-child(n+3){ display: none; }
  .breadcrumbs li:first-child:nth-last-child(n+3) + li::before{ content: none; }
}

/* =========================================================
   KNOWLEDGE CENTER (Phase 7, v1.84.0)
   The mega menu, the center, hub and guide templates, and the shared
   cross-link components (inc/knowledge.php). Same language as the rest
   of the site: Fraunces headings, Public Sans text, cards with a blue
   top rule that turns maroon on hover.
   ========================================================= */

/* The mega menu: three equal columns, Buying, Living Here and Selling. */
.nav-panel--knowledge{ width: min(760px, calc(100vw - 2 * var(--lwr-gutter))); padding: 1.5rem 1.75rem 0; }
.nav-kc{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.nav-kc-head{
  display: flex; align-items: center; gap: 0.35rem;
  margin-bottom: 0.35rem; padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--lwr-navy);
  font-family: var(--lwr-font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--lwr-navy-dark);
}
a.nav-kc-head:hover{ color: var(--lwr-maroon); border-bottom-color: var(--lwr-maroon); }
.nav-kc-links{ list-style: none; margin: 0; padding: 0; }
.nav-kc-links a{ display: block; padding: 0.45rem 0; color: var(--lwr-navy); font-weight: 500; }
.nav-kc-links a:hover{ color: var(--lwr-maroon); }
.nav-kc-foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  margin-top: 1rem; padding: 0.9rem 0 1.1rem;
  border-top: 1px solid #E6E9EF;
  font-size: 0.9rem;
}
.nav-kc-all{ display: inline-flex; align-items: center; gap: 0.35rem; margin-right: auto; font-weight: 600; color: var(--lwr-maroon); }
.nav-kc-tool{ color: var(--lwr-navy); font-weight: 500; }
.nav-kc-tool:hover, .nav-kc-all:hover{ color: var(--lwr-maroon-dark); }

/* Phones and tablets: one short line of links per shelf. */
.mobile-menu-kc{ display: grid; gap: 0.5rem; margin: 0.35rem 0 0 2.3rem; }
.mobile-menu-kc-head{
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8FC1EA;
}
a.mobile-menu-kc-head:hover{ color: var(--lwr-white); }
.mobile-menu-kc .mobile-menu-sub{ margin: 0.1rem 0 0; }

/* Page frames */
.kc-center, .kc-hub{ padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }
.kc-hub-intro{ margin-bottom: 1.5rem; }
.kc-guide{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.kc-guide-body > .kc-section:first-child h2{ margin-top: 0; }
.kc-section + .kc-section{ margin-top: 2.25rem; }
.kc-after{ padding-bottom: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 1100px){
  .kc-guide{ grid-template-columns: 230px minmax(0, 780px); gap: 3rem; justify-content: center; }
  .kc-guide-aside .kc-toc{ position: sticky; top: 7rem; }
}
/* Jump links land below the sticky header. */
.kc-section h2, .kc-block h2, .kc-guide-body h2[id]{ scroll-margin-top: 6.5rem; }

/* TOC */
.kc-toc{
  padding: 1rem 1.25rem;
  background: var(--lwr-sand-deep);
  border-left: 3px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
}
.kc-toc-heading{
  margin: 0 0 0.5rem;
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue);
}
.kc-toc ol{ margin: 0; padding-left: 1.2rem; }
.kc-toc li{ margin: 0.3rem 0; font-size: 0.93rem; line-height: 1.4; }
.kc-toc a{ color: var(--lwr-navy); }
.kc-toc a:hover{ color: var(--lwr-maroon); }
.kc-toc--inline{ margin-bottom: 0.5rem; }
.kc-toc--inline ol{ display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; padding: 0; list-style: none; }

/* Blocks */
.kc-block{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kc-block > h2{ margin: 0 0 1rem; }
.kc-block-intro{ margin: -0.4rem 0 1.25rem; color: rgba(30,36,48,0.8); }

/* Guide cards (Helpful Guides, the hub shelves) */
.kc-guide-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.kc-guide-card{
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.15rem 1.35rem 1.25rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 3px solid var(--lwr-blue);
  border-radius: var(--lwr-radius);
  color: var(--lwr-ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.kc-guide-card:hover{ border-top-color: var(--lwr-maroon); transform: translateY(-2px); color: var(--lwr-ink); }
.kc-guide-kicker{
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue);
}
.kc-guide-title{ font-family: var(--lwr-font-display); font-size: 1.15rem; font-weight: 600; color: var(--lwr-navy-dark); }
.kc-guide-text{ font-size: 0.93rem; line-height: 1.5; color: rgba(30,36,48,0.8); }

/* Continue Exploring */
.kc-explore-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.kc-explore-link{
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-left: 3px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
  color: var(--lwr-ink);
}
.kc-explore-link:hover{ border-left-color: var(--lwr-maroon); color: var(--lwr-ink); }
.kc-explore-kicker{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue); }
.kc-explore-title{ font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; color: var(--lwr-navy-dark); }

/* Market Snapshot */
.kc-snapshot-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin: 0 0 0.75rem; }
.kc-snapshot-fact{ padding: 0.9rem 1.1rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.kc-snapshot-fact dt{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.kc-snapshot-fact dd{ margin: 0.2rem 0 0; font-family: var(--lwr-font-display); font-size: 1.35rem; font-weight: 600; color: var(--lwr-navy-dark); }
.kc-snapshot-source, .kc-snapshot-stats{ margin: 0.35rem 0 0; font-size: 0.92rem; color: rgba(30,36,48,0.8); }

/* Current Listings, tools */
.kc-listings-more{ margin: 1rem 0 0; }
.kc-tool-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Author Card */
.kc-author{
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.5rem; padding: 1.1rem 1.25rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-radius: var(--lwr-radius);
}
.kc-author-mark, .kc-author-photo{ flex: none; width: 52px; height: 52px; border-radius: 50%; }
.kc-author-mark{ display: grid; place-items: center; background: var(--lwr-navy); color: var(--lwr-white); font-family: var(--lwr-font-display); font-weight: 600; }
.kc-author-photo{ object-fit: cover; }
.kc-author .kc-author-body p{ margin: 0; }
.kc-author-name{ font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; color: var(--lwr-navy-dark); }
.kc-author-text, .kc-author-meta{ font-size: 0.9rem; color: rgba(30,36,48,0.78); }

/* The center's three shelves */
.kc-shelves{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; }
@media (max-width: 900px){ .kc-shelves{ grid-template-columns: 1fr; } }
.kc-shelf-card{
  padding: 1.35rem 1.5rem 1.4rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-top: 3px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
}
.kc-shelf-card h2{ margin: 0 0 0.35rem; font-size: 1.5rem; }
.kc-shelf-card h2 a{ color: var(--lwr-navy-dark); }
.kc-shelf-card h2 a:hover{ color: var(--lwr-maroon); }
.kc-shelf-text{ margin: 0 0 0.75rem; font-size: 0.95rem; color: rgba(30,36,48,0.8); }
.kc-shelf-links{ list-style: none; margin: 0; padding: 0; }
.kc-shelf-links a{ display: block; padding: 0.45rem 0; border-bottom: 1px solid #EEF1F5; color: var(--lwr-navy); font-weight: 500; }
.kc-shelf-links a:hover{ color: var(--lwr-maroon); }
.kc-shelf-more{ margin: 0.9rem 0 0; font-weight: 600; }
.kc-shelf-more a{ color: var(--lwr-maroon); }

/* Editors only: what a page still needs, and drafts waiting. */
.kc-editor-note{
  margin: 1rem 0; padding: 0.8rem 1rem;
  border: 1px dashed #C99A2E; border-radius: var(--lwr-radius);
  background: #FFF8E5; color: #5B4A1A; font-size: 0.9rem;
}
.kc-editor-note ul{ margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* =========================================================
   NORTH RIVER MARKET PULSE (Phase 8.3, v1.90.0)
   template-parts/components/market-pulse.php, replacing v1.86.0's Market
   Snapshot card. A branded card: the Pulse name, the community in
   Fraunces, when it was updated (or "Updating market data…"), seven
   figures with 30-day trend arrows, and the way into its homes. Two
   figures across on phones, four on wider screens; labels stay on one
   line down to 320px ("no broken continuous lines").
   ========================================================= */
.mp-card{
  display: grid; gap: 1.1rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(1.1rem, 3vw, 2rem);
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 4px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.mp-head{ display: grid; gap: 0.2rem; }
.mp-brand{
  font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lwr-maroon);
}
.mp-card .mp-name{ margin: 0; font-family: var(--lwr-font-display); font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 600; line-height: 1.15; color: var(--lwr-navy-dark); }
.mp-updated{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.88rem; color: rgba(30,36,48,0.72); }
.mp-refreshing{
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.1rem 0.6rem; border-radius: 999px;
  background: rgba(28,116,198,0.1); color: var(--lwr-blue);
  font-size: 0.8rem; font-weight: 600;
}
.mp-refreshing::before{ content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference){
  .mp-refreshing::before{ animation: mp-blink 1.6s ease-in-out infinite; }
  @keyframes mp-blink{ 50%{ opacity: 0.25; } }
}
.mp-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0; }
/* Two across, an odd last figure takes the whole row. */
@media (max-width: 899px){ .mp-grid > .mp-metric:last-child:nth-child(odd){ grid-column: 1 / -1; } }
@media (min-width: 900px){ .mp-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Label on top, figure below, trend under it; rows stay level. */
.mp-metric{ display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.mp-metric dt{ font-family: var(--lwr-font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-blue); white-space: nowrap; }
.mp-metric dd{ margin: 0; }
.mp-value{ margin-top: auto; font-family: var(--lwr-font-display); font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.2; color: var(--lwr-navy-dark); font-variant-numeric: tabular-nums; }
.mp-trend{ display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--lwr-navy); font-variant-numeric: tabular-nums; }
.mp-trend--up{ color: var(--lwr-navy); }
.mp-trend--down{ color: var(--lwr-maroon); }
.mp-trend--flat{ color: rgba(30,36,48,0.72); }
.mp-foot{ display: grid; gap: 0.6rem; }
.mp-foot .mp-cta{ justify-self: start; } /* its own width on wider screens; full width on phones (below) */
.mp-source{ margin: 0; font-size: 0.82rem; line-height: 1.5; color: rgba(30,36,48,0.66); }
.mp-card--waiting .mp-foot{ margin-top: -0.2rem; }
@media (max-width: 640px){
  .mp-card{ padding-inline: 1rem; }
  .mp-metric{ padding: 0.8rem 0.75rem; }
  .mp-metric dt{ font-size: min(0.7rem, 2.75vw); letter-spacing: 0.04em; }
  .mp-cta{ display: flex; justify-content: center; width: 100%; }
}

/* Living Here (v1.87.0): the Selling row under the menu's three columns. */
.nav-kc-sell{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem;
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid #E6E9EF;
  font-size: 0.92rem;
}
.nav-kc-sell-head{ margin-right: 0.25rem; font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; color: var(--lwr-navy-dark); }
a.nav-kc-sell-head:hover{ color: var(--lwr-maroon); }
.nav-kc-sell a:not(.nav-kc-sell-head){ color: var(--lwr-navy); font-weight: 500; }
.nav-kc-sell a:not(.nav-kc-sell-head):hover{ color: var(--lwr-maroon); }
.nav-kc-sell + .nav-kc-foot{ margin-top: 0.9rem; }

/* =========================================================
   SEARCH NORTH OF THE RIVER (Phase 7.2, v1.88.0)
   The header button, the overlay, the search box component
   (template-parts/components/search.php), its suggestions and the
   results page (template-search-results.php). The overlay slides; it
   never fades (an opacity transition painted header panels half
   transparent in Chromium).
   ========================================================= */

/* Header buttons */
.desk-nav-search{ display: flex; align-items: stretch; }
.desk-search-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--lwr-navy);
}
.desk-search-btn svg{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.desk-search-btn:hover, .desk-search-btn:focus-visible{ color: var(--lwr-maroon); }
.site-header--floating:not(.is-scrolled) .desk-search-btn{ color: var(--lwr-white); }
.header-search-btn svg{ fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (max-width: 640px){ .header-search-btn{ display: none; } }

.mobile-menu-search{
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  margin: 0.25rem 0 0.75rem; padding: 0.85rem 1rem; min-height: 48px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
  background: rgba(255,255,255,0.07); color: #C9DDF1;
  font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer;
}
.mobile-menu-search svg{ flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-menu-search:hover{ color: var(--lwr-white); border-color: rgba(255,255,255,0.4); }

/* The overlay */
html.search-open{ overflow: hidden; }
.search-overlay{ position: fixed; inset: 0; z-index: 200; background: rgba(15,29,66,0.55); }
.search-overlay[hidden]{ display: none; }
body.admin-bar .search-overlay{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .search-overlay{ top: 46px; } }
.search-overlay-panel{
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--lwr-white);
  box-shadow: 0 18px 40px rgba(15,29,66,0.28);
  padding-block: clamp(1rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
.search-overlay.is-open .search-overlay-panel{ transform: none; }
@media (prefers-reduced-motion: reduce){ .search-overlay-panel{ transition: none; } }
.search-overlay-inner{ max-width: 860px; display: grid; gap: 0.85rem; }
.search-overlay-top{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.search-overlay-eyebrow{ font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-maroon); }
.search-overlay-close svg{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-overlay-hint{ margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; font-size: 0.9rem; color: rgba(30,36,48,0.7); }
.search-overlay-hint a{ font-weight: 600; color: var(--lwr-navy); }
.search-overlay-hint a:hover{ color: var(--lwr-maroon); }

/* The search box (component) */
.lwr-search-block{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } /* minmax: fits 320px (v1.91.0) */
.lwr-search-block--spaced, .lwr-search--embedded{ margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.lwr-search-heading{ margin: 0; }
.lwr-search-intro{ margin: -0.2rem 0 0.2rem; color: rgba(30,36,48,0.78); }
.lwr-search{ position: relative; margin: 0; }
.lwr-search-field{
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  background: var(--lwr-white);
  border: 1.5px solid #CBD3DF; border-radius: 6px;
}
.lwr-search-field:focus-within{ border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.18); }
.lwr-search-icon{ flex: none; fill: none; stroke: #6B7588; stroke-width: 2; stroke-linecap: round; }
.lwr-search-input{
  flex: 1; min-width: 0; min-height: 44px;
  border: 0; outline: 0; background: transparent; padding: 0.4rem 0.2rem;
  font-family: var(--lwr-font-data); font-size: max(16px, 1.02rem); color: var(--lwr-ink);
}
.lwr-search-input::-webkit-search-cancel-button{ cursor: pointer; }
/* The field shows focus (its blue ring); no second outline inside it. */
.lwr-search-input:focus, .lwr-search-input:focus-visible{ outline: none; box-shadow: none; }
.lwr-search-submit{
  flex: none; min-height: 44px; padding: 0 1.2rem;
  border: 0; border-radius: 4px; cursor: pointer;
  background: var(--lwr-maroon); color: var(--lwr-white);
  font-family: var(--lwr-font-data); font-size: 0.95rem; font-weight: 600;
}
.lwr-search-submit:hover{ background: var(--lwr-maroon-dark); }
.lwr-search--overlay .lwr-search-field{ padding-left: 1.1rem; }
.lwr-search--overlay .lwr-search-input{ font-size: clamp(1.1rem, 2.4vw, 1.4rem); min-height: 52px; }
@media (max-width: 480px){ .lwr-search-submit{ padding: 0 0.9rem; } }

/* Suggestions: a dropdown under an embedded box, in the flow in the overlay. */
.lwr-search-suggest{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-radius: 6px;
  box-shadow: 0 16px 36px rgba(15,29,66,0.18);
  padding: 0.35rem;
}
.lwr-search--overlay .lwr-search-suggest{ position: static; margin-top: 0.6rem; max-height: none; box-shadow: none; }
.lwr-suggest-item{
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0.85rem; align-items: center;
  padding: 0.55rem 0.6rem; border-radius: 4px; color: var(--lwr-ink);
}
.lwr-suggest-item:hover, .lwr-suggest-item.is-active{ background: #F2F5F9; color: var(--lwr-ink); }
.lwr-suggest-thumb, .lwr-result-thumb{ display: block; width: 52px; height: 52px; border-radius: 4px; object-fit: cover; background: var(--lwr-sand-deep); }
.lwr-suggest-thumb--none, .lwr-result-thumb--none{ display: grid; place-items: center; font-family: var(--lwr-font-display); font-size: 1.2rem; font-weight: 600; color: var(--lwr-navy); }
.lwr-suggest-body, .lwr-result-body{ display: grid; gap: 0.15rem; min-width: 0; }
.lwr-suggest-title{ font-family: var(--lwr-font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: var(--lwr-navy-dark); }
.lwr-suggest-text{ font-size: 0.86rem; line-height: 1.4; color: rgba(30,36,48,0.72); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lwr-suggest-all{
  display: block; margin-top: 0.3rem; padding: 0.75rem 0.6rem 0.55rem;
  border-top: 1px solid #E6E9EF; border-radius: 0 0 4px 4px;
  font-weight: 600; color: var(--lwr-maroon);
}
.lwr-suggest-all:hover, .lwr-suggest-all.is-active{ background: #F2F5F9; color: var(--lwr-maroon-dark); }
.lwr-suggest-empty{ margin: 0; padding: 0.8rem 0.6rem; color: rgba(30,36,48,0.78); }

/* Category badges */
.lwr-badge{
  justify-self: start;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  font-family: var(--lwr-font-data); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lwr-navy); background: var(--lwr-sand-deep);
}
.lwr-badge--community{ color: var(--lwr-white); background: var(--lwr-navy); }
.lwr-badge--guide{ color: var(--lwr-blue); background: rgba(28,116,198,0.1); }
.lwr-badge--lifestyle{ color: var(--lwr-maroon); background: rgba(142,27,48,0.09); }
.lwr-badge--magazine{ color: #5B4A1A; background: #F4EBD6; }
.lwr-badge--team{ color: var(--lwr-navy); background: transparent; box-shadow: inset 0 0 0 1px rgba(24,43,92,0.3); }

/* The results page */
.lwr-results{ padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4rem); max-width: 900px; }
.lwr-results-filters{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.lwr-results-filters a{
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px;
  padding: 0.35rem 0.9rem; border: 1px solid #CBD3DF; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--lwr-navy);
}
.lwr-results-filters a span{ font-weight: 500; color: rgba(30,36,48,0.72); }
.lwr-results-filters a:hover{ border-color: var(--lwr-navy); }
.lwr-results-filters a[aria-current="true"]{ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); }
.lwr-results-filters a[aria-current="true"] span{ color: rgba(255,255,255,0.75); }
.lwr-results-count{ margin: 1rem 0 0; font-size: 0.92rem; color: rgba(30,36,48,0.72); }
.lwr-results-group{ margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.lwr-results-group h2{ display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.5rem; }
.lwr-results-group-count{ font-family: var(--lwr-font-data); font-size: 0.9rem; font-weight: 600; color: rgba(30,36,48,0.72); }
.lwr-results-list{ list-style: none; margin: 0; padding: 0; }
.lwr-results-list li + li{ border-top: 1px solid #E6E9EF; }
.lwr-result{
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 0.95rem 0.5rem; color: var(--lwr-ink);
}
.lwr-result:hover{ background: #F7F9FB; color: var(--lwr-ink); }
.lwr-result .lwr-result-thumb{ width: 76px; height: 76px; }
.lwr-result-title{ font-family: var(--lwr-font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--lwr-navy-dark); }
.lwr-result:hover .lwr-result-title{ color: var(--lwr-maroon); }
.lwr-result-text{ font-size: 0.93rem; line-height: 1.5; color: rgba(30,36,48,0.78); }
.lwr-results-empty{ margin-top: 1.5rem; }
@media (max-width: 480px){
  .lwr-result{ grid-template-columns: 56px minmax(0, 1fr); gap: 0.8rem; }
  .lwr-result .lwr-result-thumb{ width: 56px; height: 56px; }
}

/* =========================================================
   CONNECTIONS (Phase 8.4, v1.91.0)
   template-parts/components/connections.php: "Living in {community}",
   one panel per relationship type (schools, guides, lifestyle nearby,
   the magazine). Each row: a small kicker, the name, and why it's there.
   One column on phones, two from 700px, up to four on wide screens.
   ========================================================= */
.rel-hub{ scroll-margin-top: 7rem; }
.rel-hub .section-head{ margin-bottom: 1.1rem; }
.rel-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 700px){ .rel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .rel-grid{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.rel-panel{
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 3px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
}
.rel-panel .rel-type{
  margin: 0; font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-maroon);
}
.rel-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.rel-item{ display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.rel-item + .rel-item{ padding-top: 0.7rem; border-top: 1px solid #E6E9EF; }
.rel-kicker{ font-family: var(--lwr-font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.rel-name{ font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--lwr-navy-dark); overflow-wrap: anywhere; }
a.rel-name:hover{ color: var(--lwr-maroon); }
.rel-note{ font-size: 0.85rem; line-height: 1.45; color: rgba(30,36,48,0.7); }

.rel-foot{ margin: auto 0 0; padding-top: 0.25rem; font-size: 0.82rem; line-height: 1.5; color: rgba(30,36,48,0.66); }
.rel-foot a{ display: inline-block; margin-top: 0.25rem; font-weight: 600; }
.rel-nearby .kc-explore-kicker{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Entity lists in a guide section (the schools guide's confirmed schools). */
.entity-list-heading{ margin: 1.25rem 0 0.5rem; font-size: 1.1rem; }
.entity-list-items{ margin: 0; padding-left: 1.1rem; }
.entity-list-items li{ margin: 0.35rem 0; }
.entity-list-text{ display: block; font-size: 0.92rem; color: rgba(30,36,48,0.75); }

/* =========================================================
   COMPARE (Phase 8.2, v1.92.0)
   template-compare.php at /compare/. Rows and values come from
   inc/compare.php; this lays them out. Phones: each row's label across
   the top, the two values side by side, each marked with its community.
   From 700px: label | first | second, with the communities as column
   heads. Under each value, where it came from.
   ========================================================= */
.cmp-form{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin: 0 0 2rem; }
@media (min-width: 700px){ .cmp-form{ grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; } }
.cmp-pick, .cmp-submit{ margin: 0; }
.cmp-pick label{ display: block; margin-bottom: 0.3rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; color: var(--lwr-navy); }
.cmp-pick select{ width: 100%; min-height: 44px; padding: 0.55rem 0.7rem; font: inherit; background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.25); border-radius: var(--lwr-radius); }
.cmp-submit .btn{ width: 100%; min-height: 44px; text-align: center; }
@media (min-width: 700px){ .cmp-submit .btn{ width: auto; } }

.cmp-table{ background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.14); border-radius: var(--lwr-radius); overflow: hidden; }
.cmp-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.9rem; padding: 0.85rem 1rem; border-top: 1px solid #E6E9EF; }
.cmp-row:first-child{ border-top: 0; }
.cmp-label{ grid-column: 1 / -1; font-family: var(--lwr-font-data); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-blue); white-space: nowrap; }
.cmp-head{ background: var(--lwr-navy-dark); color: var(--lwr-white); padding-block: 1rem; }
.cmp-corner{ display: none; }
.cmp-col a{ font-family: var(--lwr-font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; color: var(--lwr-white); }
.cmp-col a:hover{ color: var(--lwr-blue-light); }
.cmp-col-town{ display: block; margin-top: 0.15rem; font-size: 0.8rem; color: rgba(255,255,255,0.75); }
.cmp-group{ background: var(--lwr-sand-deep); padding-block: 0.6rem; }
.cmp-group-label{ grid-column: 1 / -1; font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; color: var(--lwr-navy-dark); }
.cmp-cell{ display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cmp-who{ font-size: 0.7rem; font-weight: 600; color: rgba(30,36,48,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-value{ font-family: var(--lwr-font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--lwr-navy-dark); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
a.cmp-value{ text-decoration: underline; text-decoration-color: rgba(24,43,92,0.3); text-underline-offset: 3px; }
a.cmp-value:hover{ color: var(--lwr-maroon); }
.cmp-note{ font-size: 0.78rem; line-height: 1.4; color: rgba(30,36,48,0.66); }
.cmp-cell--live .cmp-note{ color: var(--lwr-blue-deep); }
.cmp-cell--confirmed .cmp-note{ color: var(--lwr-navy); font-weight: 600; }
.cmp-cell--none .cmp-value{ font-family: var(--lwr-font-body); font-size: 0.95rem; font-weight: 500; color: rgba(30,36,48,0.72); }
@media (min-width: 700px){
  .cmp-row{ grid-template-columns: minmax(9rem, 0.8fr) repeat(2, minmax(0, 1fr)); align-items: start; padding: 0.9rem 1.25rem; }
  .cmp-label{ grid-column: auto; padding-top: 0.25rem; white-space: normal; }
  .cmp-corner{ display: block; }
  .cmp-who{ display: none; }
}
.cmp-legend{ margin-top: 1rem; font-size: 0.88rem; line-height: 1.55; color: rgba(30,36,48,0.78); }
.cmp-legend p{ margin: 0.4rem 0; }
.cmp-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
@media (max-width: 640px){ .cmp-actions .btn{ width: 100%; text-align: center; } }

/* =========================================================
   ASK LESLIE CONCIERGE (Phase 8.5, v1.93.0)
   template-parts/components/concierge.php. A white card with the
   maroon rule the Market Pulse uses; the four priorities are big
   toggles, 2x2 on phones and in a row from 700px; contact fields go
   three across from 700px. Every control is at least 44px tall.
   ========================================================= */
.concierge{
  display: grid; gap: 1.1rem;
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: clamp(1.35rem, 3.5vw, 2.25rem) clamp(1.1rem, 3.5vw, 2.25rem);
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14);
  border-top: 4px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  scroll-margin-top: 7rem;
}
.concierge-head{ display: grid; gap: 0.35rem; }
.concierge-brand{ font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lwr-maroon); }
.concierge-head h2{ margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; }
.concierge-intro{ margin: 0; max-width: 62ch; color: rgba(30,36,48,0.82); }
.concierge-form{ display: grid; gap: 1rem; }
.concierge-form p{ margin: 0; }
.concierge-form label, .concierge-priorities legend{ display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.92rem; color: var(--lwr-navy-dark); }
.concierge-form .optional{ font-weight: 400; opacity: 0.7; }
.concierge-about{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.95rem; }
.concierge-about span{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue); }
.concierge-about strong{ font-family: var(--lwr-font-display); font-size: 1.1rem; color: var(--lwr-navy-dark); }
.concierge-priorities{ margin: 0; padding: 0; border: 0; min-width: 0; }
.concierge-chips{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 700px){ .concierge-chips{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.concierge-chip{ position: relative; display: block; margin: 0 !important; cursor: pointer; }
.concierge-chip input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.concierge-chip span{
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 48px; padding: 0.5rem 0.75rem;
  border: 1.5px solid #CBD3DF; border-radius: 999px;
  background: var(--lwr-white); color: var(--lwr-navy);
  font-family: var(--lwr-font-data); font-size: 0.95rem; font-weight: 600; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.concierge-chip span::before{ content: "+"; font-weight: 700; }
.concierge-chip:hover span{ border-color: var(--lwr-navy); }
.concierge-chip input:checked + span{ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); }
.concierge-chip input:checked + span::before{ content: "✓"; }
.concierge-chip input:focus-visible + span{ outline: 3px solid var(--lwr-maroon); outline-offset: 2px; }
.concierge-fields{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 700px){ .concierge-fields{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.concierge-form input[type="text"], .concierge-form input[type="email"], .concierge-form input[type="tel"], .concierge-form textarea{
  width: 100%; min-height: 44px; padding: 0.6rem 0.75rem;
  font: inherit; font-size: max(16px, 1rem); color: var(--lwr-ink);
  background: var(--lwr-white); border: 1px solid rgba(24,43,92,0.28); border-radius: var(--lwr-radius);
}
.concierge-form input:focus, .concierge-form textarea:focus{ outline: none; border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.18); }
.concierge-alerts label{ display: flex; align-items: flex-start; gap: 0.55rem; font-weight: 500; }
.concierge-alerts input{ width: 20px; height: 20px; margin-top: 0.15rem; flex: none; }
.concierge-submit .btn{ width: 100%; min-height: 48px; font-size: 1rem; }
@media (min-width: 700px){ .concierge-submit .btn{ width: auto; min-width: 12rem; } }

/* =========================================================
   GUIDE FRAME (Phase 8.7, v1.93.0): the byline under a guide's title,
   and the Continue Exploring band on the older guide templates. Byline
   items wrap as whole items, never mid-item.
   ========================================================= */
.guide-meta{ display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin: 0.9rem 0 0 !important; font-family: var(--lwr-font-data); font-size: 0.88rem; color: inherit; opacity: 0.9; }
.guide-by{ flex-basis: 100%; }
.guide-when{ white-space: nowrap; }
.guide-by + .guide-when::before{ content: "·"; margin: 0 0.55rem; opacity: 0.7; }
.guide-sep{ margin: 0 0.25rem; opacity: 0.7; }
.guide-by + .guide-when::before{ display: none; }
@media (min-width: 640px){
  .guide-by{ flex-basis: auto; }
  .guide-by + .guide-when::before{ display: inline; }
}
.page-banner .guide-meta{ color: rgba(255,255,255,0.85); }
.guide-after{ padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem); }
.guide-after .kc-block{ margin-top: 0; }

/* Search 2.0 (Phase 8.6, v1.94.0): why a community matched a topic. */
.lwr-result-why, .lwr-suggest-why{ display: block; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 600; color: var(--lwr-blue-deep); }
.lwr-suggest-why{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   TRUST AND POLISH (Phase 8.1, v1.99.0)
   ========================================================= */
/* Compare: the community names in the navy header were navy too, because
   .idx-wrapper a:not(.btn) outranked .cmp-col a (about 1.3:1). */
.idx-wrapper .cmp-head .cmp-col a{ color: var(--lwr-white); }
.idx-wrapper .cmp-head .cmp-col a:hover, .idx-wrapper .cmp-head .cmp-col a:focus-visible{ color: var(--lwr-blue-light); }

/* Market Pulse with nothing for sale: one clear sentence, not a grid of 0s. */
.mp-none{ display: grid; gap: 0.35rem; justify-items: start; padding: 1rem 1.1rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.mp-none-title{ margin: 0; font-family: var(--lwr-font-display); font-size: clamp(1.1rem, 2.6vw, 1.3rem); font-weight: 600; color: var(--lwr-navy-dark); }
.mp-none-facts{ margin: 0; font-size: 0.9rem; color: rgba(30,36,48,0.78); font-variant-numeric: tabular-nums; }
.mp-none-cta{ margin-top: 0.4rem; }

/* Community hero: a shorter aerial, so the three actions (and on wide
   screens the Market Pulse) are in the first screen. */
.community-hero-image img{ max-height: clamp(190px, 25vw, 300px); aspect-ratio: auto; }
@media (max-width: 640px){ .mp-none-cta{ width: 100%; text-align: center; } }
/* AA contrast on the grey panels: brand blue (#1C74C6) is 4.25:1 on
   #EEF1F5; the deeper brand blue is 4.77:1 (v1.99.0). */
.mp-metric dt, .mp-refreshing, .kc-toc-heading{ color: var(--lwr-blue-deep); }
.lwr-badge--guide{ color: var(--lwr-blue-deep); }

/* =========================================================
   COMMUNITY HERO AND SNAPSHOT STRIP (Phase 9.1, v2.00.0)
   template-parts/components/community-hero.php and community-snapshot.php.
   A full-width photo with a navy shade (left to right on wide screens,
   bottom up on phones), the name in Fraunces, one sentence, three quick
   facts and two actions; then the Market Pulse as one strip that rises
   over the hero's lower edge.
   ========================================================= */
.ch{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(480px, 66vh, 660px);
  background: var(--lwr-navy-dark); color: var(--lwr-white);
}
.ch-img{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ch-shade{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,29,66,0.94) 0%, rgba(15,29,66,0.82) 36%, rgba(15,29,66,0.3) 68%, rgba(15,29,66,0.08) 100%),
    linear-gradient(0deg, rgba(15,29,66,0.6) 0%, rgba(15,29,66,0) 42%);
}
/* The header fits the screen (2026-10-20). On a phone the one-line
   breadcrumb set the column's width, so long community names pushed the
   whole header past the screen, where .ch clipped it. The column may now
   shrink below its widest item, and the breadcrumb is held to the column,
   so its own phone rule shortens the current page with an ellipsis. */
.ch-inner{ position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; justify-items: start; padding-block: clamp(2.75rem, 7vw, 4.75rem) clamp(4rem, 8vw, 5.5rem); }
.ch .breadcrumbs{ margin-bottom: 0.4rem; max-width: 100%; }
.ch .breadcrumbs ol{ color: rgba(255,255,255,0.82); }
.ch .breadcrumbs a{ text-decoration-color: rgba(255,255,255,0.45); }
.ch .breadcrumbs a:hover{ color: var(--lwr-white); }
.ch-eyebrow{ color: var(--lwr-blue-light); }
.ch .ch-title{ margin: 0; max-width: 16ch; color: var(--lwr-white); font-size: clamp(2.6rem, 6.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.01em; }
.ch-line{ margin: 0.3rem 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,0.92); }
.ch-facts{
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(1.5rem, 3.5vw, 2.75rem);
  margin: 1.1rem 0 0.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.24);
}
.ch-fact dt{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue-light); white-space: nowrap; }
.ch-fact dd{ margin: 0.2rem 0 0; font-family: var(--lwr-font-display); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; color: var(--lwr-white); white-space: nowrap; }
.ch-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.ch-actions .btn{ min-height: 48px; }
.ch-btn-light{ border-color: rgba(255,255,255,0.85); color: var(--lwr-white); }
.ch-btn-light:hover, .ch-btn-light:focus-visible{ background: var(--lwr-white); border-color: var(--lwr-white); color: var(--lwr-navy-dark); }
@media (max-width: 700px){
  .ch{ min-height: 0; }
  .ch-shade{ background: linear-gradient(0deg, rgba(15,29,66,0.97) 0%, rgba(15,29,66,0.92) 52%, rgba(15,29,66,0.5) 80%, rgba(15,29,66,0.28) 100%); }
  .ch-inner{ padding-top: clamp(8rem, 42vw, 12rem); padding-bottom: 3.75rem; }
  .ch-facts{ grid-template-columns: minmax(0, 1fr); gap: 0.55rem; width: 100%; }
  .ch-fact{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .ch-fact dd{ margin: 0; text-align: right; }
  .ch-actions{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ch-actions .btn{ width: 100%; text-align: center; padding-inline: 0.5em; }
}

/* The strip: overlaps the hero's lower edge (the page wrapper's top
   padding is 2.5rem, the hero leaves 4rem+ for it). */
.community-page > .container > .cs-strip:first-child{ margin-top: calc(-2.5rem - clamp(2.25rem, 5vw, 3rem)); }
.cs-strip{
  position: relative; z-index: 2; display: grid; gap: 0.75rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.6rem) 0.9rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  box-shadow: 0 14px 34px rgba(15,29,66,0.1);
}
.cs-head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; }
.cs-brand{ font-family: var(--lwr-font-data); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lwr-maroon); }
.cs-updated{ font-size: 0.85rem; color: rgba(30,36,48,0.75); font-variant-numeric: tabular-nums; }
.cs-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; }
.cs-metric{ padding: 0.35rem 1rem 0.35rem 0; }
.cs-metric + .cs-metric{ padding-left: 1rem; border-left: 1px solid #E6E9EF; }
.cs-metric dt{ font-family: var(--lwr-font-data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lwr-blue-deep); white-space: nowrap; }
.cs-metric dd{ margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; font-family: var(--lwr-font-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.15; color: var(--lwr-navy-dark); font-variant-numeric: tabular-nums; }
.cs-trend{ font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 600; }
.cs-none{ margin: 0; font-size: 1rem; }
.cs-none strong{ font-family: var(--lwr-font-display); font-size: 1.15rem; color: var(--lwr-navy-dark); margin-right: 0.35rem; }
.cs-source{ margin: 0; font-size: 0.8rem; line-height: 1.45; color: rgba(30,36,48,0.72); }
@media (max-width: 899px){
  .cs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0; }
  .cs-metric, .cs-metric + .cs-metric{ padding: 0.55rem 0.75rem; border-left: 0; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
  .cs-grid{ gap: 0.5rem; }
  .cs-grid > .cs-metric:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .cs-metric dt{ font-size: min(0.7rem, 2.9vw); letter-spacing: 0.05em; }
}

/* =========================================================
   LESLIE'S PERSPECTIVE (Phase 9.2, v2.01.0)
   template-parts/components/leslies-take.php: portrait left, her words
   as a large editorial quote, three short notes. Stacks on phones.
   ========================================================= */
.lt{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--lwr-sand-deep);
  border-left: 4px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
@media (min-width: 760px){ .lt{ grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } }
.lt-portrait{ margin: 0; display: grid; gap: 0.6rem; justify-items: start; }
.lt-portrait img, .lt-mark{ width: 160px; height: 160px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 4px solid var(--lwr-white); box-shadow: 0 8px 24px rgba(15,29,66,0.12); }
.lt-mark{ display: grid; place-items: center; background: var(--lwr-navy); color: var(--lwr-white); font-family: var(--lwr-font-display); font-size: 2.2rem; }
.lt-portrait figcaption{ display: grid; font-family: var(--lwr-font-display); font-weight: 600; font-size: 1.1rem; color: var(--lwr-navy-dark); }
.lt-portrait figcaption span{ font-family: var(--lwr-font-body); font-size: 0.85rem; font-weight: 500; color: rgba(30,36,48,0.75); }
.lt-body{ display: grid; gap: 0.6rem; min-width: 0; }
.lt-kicker{ font-family: var(--lwr-font-data); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lwr-maroon); }
.lt .lt-title{ margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.lt-quote{ margin: 0.25rem 0 0; padding: 0; border: 0; font-family: var(--lwr-font-display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.6; color: var(--lwr-navy-dark); }
.lt-quote p{ margin: 0 0 0.8em; }
.lt-quote p:last-child{ margin-bottom: 0; }
.lt-notes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1.5rem; margin: 0.75rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(24,43,92,0.15); }
.lt-notes dt{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue-deep); }
.lt-notes dd{ margin: 0.25rem 0 0; font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 759px){ .lt-portrait{ grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; } .lt-portrait img, .lt-mark{ width: 88px; height: 88px; } }

/* =========================================================
   CONVERSION (Phase 9.3, v2.02.0)
   ========================================================= */
/* Community pages: the action rail beside the page from 1200px; a card
   at the end of the page below that. */
.community-flow > * + *{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.community-flow{ min-width: 0; }
.cr-card{
  display: grid; gap: 0.75rem;
  padding: 1.35rem 1.35rem 1.25rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.14); border-top: 3px solid var(--lwr-navy);
  border-radius: var(--lwr-radius);
  box-shadow: 0 10px 28px rgba(15,29,66,0.07);
}
.cr-kicker{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lwr-maroon); }
.cr .cr-title{ margin: 0; font-size: 1.3rem; line-height: 1.25; }
.cr-actions{ display: grid; gap: 0.55rem; }
.cr-actions .btn{ width: 100%; min-height: 46px; text-align: center; padding-inline: 1em; }
.cr-phone{ margin: 0.2rem 0 0; font-size: 0.88rem; color: rgba(30,36,48,0.78); }
.cr-phone a{ font-weight: 600; white-space: nowrap; }
.community-layout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1200px){
  .community-layout{ grid-template-columns: minmax(0, 1fr) 260px; gap: 2.75rem; align-items: start; }
  .cr{ position: sticky; top: calc(96px + var(--wp-admin--admin-bar--height, 0px)); }
}
@media (min-width: 700px) and (max-width: 1199px){
  .cr-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Guides: the moving-here prompt inside the article. */
.guide-cta{
  display: grid; gap: 0.45rem;
  margin: 2.5rem 0; padding: 1.4rem 1.5rem;
  background: var(--lwr-navy-dark); color: var(--lwr-white);
  border-radius: var(--lwr-radius);
}
.resource-prose .guide-cta p, .guide-cta p{ margin: 0; }
.guide-cta-title{ font-family: var(--lwr-font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--lwr-white); }
.guide-cta-text{ color: rgba(255,255,255,0.86); }
.guide-cta-actions{ display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.5rem !important; }
.guide-cta .btn:not(.btn-solid){ border-color: rgba(255,255,255,0.85); color: var(--lwr-white); }
.guide-cta .btn:not(.btn-solid):hover{ background: var(--lwr-white); color: var(--lwr-navy-dark); }
.resource-prose .guide-cta a.btn{ text-decoration: none; }
@media (max-width: 520px){
  .guide-cta-actions{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-cta-actions .btn{ width: 100%; text-align: center; padding-inline: 0.5em; }
}

/* Compare: "Compare another community" floats at the foot of the screen
   while the table is in view, then rests under it. */
.cmp-float{ position: sticky; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; justify-content: flex-end; margin-top: 1rem; pointer-events: none; }
.cmp-float .btn{ pointer-events: auto; border-radius: 999px; box-shadow: 0 10px 26px rgba(15,29,66,0.22); min-height: 48px; }
@media (max-width: 520px){ .cmp-float{ justify-content: center; } .cmp-float .btn{ width: 100%; text-align: center; } }
/* Beside the rail the page is narrower: the overview and the snapshot of
   facts stack, so the facts keep a readable width. */
@media (min-width: 1200px){
  .community-flow .community-columns{ grid-template-columns: minmax(0, 1fr); }
  .community-flow .community-snapshot dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .community-flow .snapshot-row:nth-child(2){ border-top: 0; padding-top: 0; }
}

/* =========================================================
   Phase 9.4 (v2.03.0): search overlay, before anything is typed.
   Recent searches (this browser only) and popular ones, in the box
   itself so the arrow keys move through them like suggestions.
   ========================================================= */
.search-overlay-hint > span{ font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-blue-deep); }
.lwr-search--overlay .lwr-search-suggest.is-discover:not([hidden]){
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.25rem;
  border: 0; padding: 0.35rem 0 0;
}
@media (min-width: 700px){
  .lwr-search--overlay .lwr-search-suggest.is-discover.has-recent:not([hidden]){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lwr-suggest-group{ display: grid; gap: 0.1rem; align-content: start; min-width: 0; }
.lwr-suggest-group-label{
  padding: 0 0.6rem 0.35rem;
  font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lwr-blue-deep);
}
.lwr-suggest-term{
  display: flex; align-items: center; gap: 0.7rem; min-height: 44px; min-width: 0;
  padding: 0.45rem 0.6rem; border-radius: 4px;
  font-family: var(--lwr-font-data); font-size: 1rem; font-weight: 500; color: var(--lwr-navy-dark);
}
.lwr-suggest-term svg{ flex: none; fill: none; stroke: #6B7588; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lwr-suggest-term-text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwr-suggest-term:hover, .lwr-suggest-term.is-active{ background: #F2F5F9; color: var(--lwr-maroon-dark); }
.lwr-suggest-term:hover svg, .lwr-suggest-term.is-active svg{ stroke: var(--lwr-maroon); }
.lwr-search-clear{
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.25rem; padding: 0 0.6rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--lwr-font-data); font-size: 0.86rem; font-weight: 600; color: var(--lwr-blue-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.lwr-search-clear:hover{ color: var(--lwr-maroon); }
.lwr-search-clear[hidden]{ display: none; }
.search-overlay-hint[hidden]{ display: none; }

/* =========================================================
   Phase 9.5 (v2.04.0): editorial photography (inc/photography.php).
   A stand-in photo (the town's or the region's, or a place category's)
   is a touch quieter than a real one and, on a place card, says what
   it shows, so it never passes for the place itself.
   ========================================================= */
.is-fallback img{ filter: saturate(0.82); }
/* That filter paints the photo in the positioned layer, which covered a
   community tile's name and town badge (v2.10.3). z-index works on grid
   items without positioning them, so the name's link still covers the
   whole tile. */
.community-tile-media > .community-tile-title,
.community-tile-media > .community-tile-town{ z-index: 1; }
.community-tile-image{ position: relative; display: block; }
.photo-stand-in{
  position: absolute; left: 0.55rem; bottom: 0.55rem; max-width: calc(100% - 1.1rem);
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(15,29,66,0.78); color: var(--lwr-white);
  font-family: var(--lwr-font-data); font-size: 0.72rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.community-gallery-item{ margin: 0; display: grid; gap: 0.45rem; align-content: start; }
.community-gallery-item figcaption{ font-family: var(--lwr-font-data); font-size: 0.82rem; line-height: 1.4; color: rgba(30,36,48,0.74); }
@media (min-width: 900px){
  .community-gallery--region .community-gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Phase 9.6 (v2.05.0): the trust band, before the closing call to
   action on community pages and guides. Light, quiet, two columns
   from 900px: what clients say, and why Leslie Wells Realty.
   ========================================================= */
.trust{ padding-block: clamp(2.25rem, 5vw, 3.5rem); background: var(--lwr-white); border-top: 1px solid #E6E9EF; }
.trust-inner{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px){
  .trust-inner{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; }
  .trust-reviews{ padding-right: clamp(2rem, 4vw, 3.5rem); border-right: 1px solid #E6E9EF; }
  .trust-expertise{ padding-left: clamp(2rem, 4vw, 3.5rem); }
  .trust--solo .trust-inner{ grid-template-columns: minmax(0, 1fr); }
  .trust--solo .trust-expertise{ padding-left: 0; }
}
.trust-kicker{ margin: 0 0 0.9rem; font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-maroon); }
.trust-score{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0 0 1.1rem; }
.trust-average{ font-family: var(--lwr-font-display); font-size: clamp(2.2rem, 4vw, 2.75rem); font-weight: 600; line-height: 1; color: var(--lwr-navy-dark); }
.trust-score .star-rating{ font-size: 1.2rem; }
.trust-count{ font-family: var(--lwr-font-data); font-size: 0.9rem; font-weight: 600; color: var(--lwr-blue-deep); }
a.trust-count{ text-decoration: underline; text-underline-offset: 3px; }
a.trust-count:hover{ color: var(--lwr-maroon); }
.trust-quotes{ display: grid; }
.trust-quotes.is-live .trust-quote{ grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.trust-quotes.is-live .trust-quote.is-current{ visibility: visible; opacity: 1; transition: opacity 0.5s ease; }
@media (prefers-reduced-motion: reduce){ .trust-quotes.is-live .trust-quote{ transition: none; } }
.trust-quote{ margin: 0; }
.trust-quote blockquote{ margin: 0; padding: 0; border: 0; }
.trust-quote blockquote p{ margin: 0; font-family: var(--lwr-font-display); font-size: clamp(1.1rem, 1.9vw, 1.28rem); line-height: 1.5; color: var(--lwr-ink); }
.trust-quote figcaption{ margin-top: 0.8rem; font-family: var(--lwr-font-data); font-size: 0.9rem; font-weight: 600; color: var(--lwr-navy); }
.trust-quote figcaption span{ display: block; font-weight: 400; color: rgba(30,36,48,0.72); }
.trust-toggle{
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; padding: 0 0.1rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--lwr-font-data); font-size: 0.86rem; font-weight: 600; color: var(--lwr-blue-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.trust-toggle:hover{ color: var(--lwr-maroon); }
.trust-toggle[hidden]{ display: none; }
.trust-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 1.5rem; }
.trust-stats--1{ grid-template-columns: minmax(0, 1fr); }
.trust-stats--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-stats--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-stat{ display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.35rem; margin: 0; }
.trust-stat dt{ font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--lwr-blue-deep); }
.trust-stat dd{ margin: 0; font-family: var(--lwr-font-display); font-size: clamp(2rem, 3.6vw, 2.5rem); font-weight: 600; line-height: 1; color: var(--lwr-navy-dark); }
.trust-stat-note{ display: block; margin-top: 0.15rem; font-family: var(--lwr-font-data); font-size: 0.74rem; font-weight: 400; line-height: 1.35; color: rgba(30,36,48,0.72); }
.trust-badge{
  display: flex; align-items: center; gap: 0.75rem; margin: 0;
  padding: 0.8rem 1rem; border: 1px solid rgba(24,43,92,0.16); border-radius: 6px; background: #F7F8FA;
  font-size: 0.95rem; line-height: 1.45; color: var(--lwr-ink);
}
.trust-badge svg{ flex: none; fill: none; stroke: var(--lwr-maroon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-badge strong{ color: var(--lwr-navy-dark); }
/* Phones: each figure is a row, number then label, so nothing squeezes. */
@media (max-width: 560px){
  .trust-stats, .trust-stats--2, .trust-stats--3{ grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .trust-stat{ flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 0.85rem; }
  .trust-stat dd{ flex: none; min-width: 3.2ch; font-size: 1.9rem; }
}

/* =========================================================
   Phase 9.8 (v2.07.0): mobile excellence.
   ========================================================= */
/* A guide's contents fold to one row on phones ("On this page · 6
   sections"); from 1100px they're open beside the guide as before. */
.kc-toc-fold > summary{
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 44px; margin: 0; cursor: pointer; list-style: none;
}
.kc-toc-fold > summary::-webkit-details-marker{ display: none; }
.kc-toc-fold > summary::after{
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: -0.2rem 0.25rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.kc-toc-fold[open] > summary::after{ margin-top: 0.3rem; transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce){ .kc-toc-fold > summary::after{ transition: none; } }
.kc-toc-count{ margin-left: auto; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgba(30,36,48,0.72); }
.kc-toc-fold[open] > ol{ margin-top: 0.25rem; }
.kc-toc:has(.kc-toc-fold){ padding-block: 0.35rem; }
.kc-toc:has(.kc-toc-fold[open]){ padding-bottom: 0.9rem; }
@media (max-width: 1099px){
  /* Thumb-sized rows for the section links. */
  .kc-toc-fold li{ margin: 0; }
  .kc-toc-fold li a{ display: block; padding: 0.55rem 0; }
}
@media (min-width: 1100px){
  .kc-toc-fold > summary{ min-height: 0; margin-bottom: 0.5rem; cursor: default; }
  .kc-toc-fold > summary::after, .kc-toc-count{ display: none; }
  .kc-toc:has(.kc-toc-fold){ padding-block: 1rem; }
}

/* Compare on phones: each row a card, the two communities stacked as
   labeled lines (name on the left, value and source on the right), with
   the same colored key as the header. Tablets and up keep the table. */
@media (max-width: 560px){
  .cmp-row:not(.cmp-head):not(.cmp-group){ grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0.95rem 1rem 0.45rem; }
  .cmp-row:not(.cmp-head):not(.cmp-group) .cmp-label{ margin-bottom: 0.2rem; white-space: normal; }
  .cmp-cell{
    display: grid; grid-template-columns: minmax(0, 6.6rem) minmax(0, 1fr);
    column-gap: 0.8rem; row-gap: 0.1rem; align-items: baseline;
    padding: 0.55rem 0;
  }
  .cmp-cell + .cmp-cell{ border-top: 1px solid #EEF1F5; }
  .cmp-who{ grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 0.2rem; font-size: 0.74rem; line-height: 1.3; white-space: normal; overflow: visible; }
  .cmp-value, .cmp-note{ grid-column: 2; }
  .cmp-who::before, .cmp-head .cmp-col::before{
    content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem;
    border-radius: 50%; background: var(--lwr-navy); vertical-align: 0.05em;
  }
  .cmp-row > .cmp-cell:nth-child(3) .cmp-who::before{ background: var(--lwr-maroon); }
  .cmp-head .cmp-col::before{ background: var(--lwr-white); }
  .cmp-head .cmp-col:nth-child(3)::before{ background: #E07A8A; }
}

/* =========================================================
   Phase 9.10 (v2.08.2): Compare, presentation polish.
   ========================================================= */
.cmp-value{ font-size: 1.08rem; }
.cmp-note{ margin-top: 0.1rem; }
/* The long "Confirmed. Recent MLS listings report…" notes read lighter. */
.cmp-cell--confirmed .cmp-note{ font-weight: 500; }
@media (min-width: 700px){
  /* More room, and each label on its value's first baseline. */
  .cmp-row{ grid-template-columns: minmax(11rem, 0.75fr) repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; padding: 1.05rem 1.75rem; align-items: baseline; }
  .cmp-label{ padding-top: 0; }
  .cmp-head{ padding-block: 1.25rem 1.15rem; align-items: end; }
  .cmp-col a{ font-size: 1.3rem; }
  .cmp-group{ padding-block: 0.8rem; }
  .cmp-group-label{ font-size: 1.1rem; }
}
/* Phones: the colored key sits beside each name, the name on one line
   when it fits, the town under the name. */
@media (max-width: 560px){
  .cmp-head .cmp-col{ display: grid; grid-template-columns: 0.5rem minmax(0, 1fr); column-gap: 0.45rem; align-items: baseline; }
  .cmp-head .cmp-col::before{ margin: 0; align-self: start; margin-top: 0.5em; }
  .cmp-head .cmp-col a{ font-size: 1.05rem; line-height: 1.25; }
  .cmp-head .cmp-col-town{ grid-column: 2; }
}

/* =========================================================
   Phase 9.10 (v2.08.3): Search, empty states.
   ========================================================= */
/* Nothing matched: a quiet note with the popular searches. */
.lwr-results-empty{
  margin-top: 1.75rem; padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #F7F8FA; border: 1px solid rgba(24,43,92,0.12); border-radius: 10px;
}
.lwr-results-empty > p{ margin: 0 0 0.4rem; color: rgba(30,36,48,0.8); }
.lwr-results-empty .lwr-results-empty-title{
  margin-bottom: 0.35rem; font-family: var(--lwr-font-display); font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 600; line-height: 1.25;
  color: var(--lwr-navy-dark); overflow-wrap: anywhere;
}
.lwr-search-suggestions{ margin-top: 1.4rem; }
.lwr-results-empty .lwr-search-suggestions{ margin-top: 1.25rem; }
.lwr-search-suggestions-heading{
  margin: 0 0 0.6rem; font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lwr-blue-deep);
}
.lwr-search-suggestions ul{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.lwr-search-suggestions a{
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem;
  border: 1.5px solid var(--lwr-navy); border-radius: 999px; background: var(--lwr-white);
  font-family: var(--lwr-font-data); font-size: 0.92rem; font-weight: 600; color: var(--lwr-navy); text-decoration: none;
}
.lwr-search-suggestions a:hover, .lwr-search-suggestions a:focus-visible{ background: var(--lwr-navy); color: var(--lwr-white); }
/* Phones: equal pills in two columns; an odd last one takes the row. */
@media (max-width: 560px){
  .lwr-search-suggestions ul{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lwr-search-suggestions li:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .lwr-search-suggestions a{ width: 100%; padding: 0 0.5rem; text-align: center; font-size: 0.86rem; white-space: nowrap; }
}
@media (max-width: 359px){
  .lwr-search-suggestions ul{ grid-template-columns: minmax(0, 1fr); }
}
/* The as-you-type box's "no matches" note sits above the popular searches. */
.lwr-suggest-empty + .lwr-suggest-group{ margin-top: 0.1rem; border-top: 1px solid #E6E9EF; padding-top: 0.6rem; }

/* =========================================================
   Phase 9.10 (v2.08.5): presentation QA fixes.
   ========================================================= */
/* The magazine's column graphics are square with their title set in the
   artwork; a 4:3 crop cut the bottom off ("Sale Stats for Single Family
   Homes North of the River" lost "the River"). Show them whole. */
.mag-column-image img{ aspect-ratio: 1 / 1; object-fit: contain; background: var(--lwr-sand-deep); }
/* The community rail: every button one line and the same height ("Compare
   this community" wrapped in a 260px rail). */
@media (min-width: 1200px){
  .community-layout{ grid-template-columns: minmax(0, 1fr) 280px; }
}
.cr-actions .btn{ padding-inline: 0.75em; white-space: nowrap; }
/* Guide cards: when four across would leave one card alone on the last
   row (nine on Living Here), three across instead. */
@media (min-width: 1040px){
  .kc-guide-grid:has(> :last-child:nth-child(4n+1)){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Search results without a photo: a line icon for their kind, not a
   letter in a gray square that read as a missing picture. */
.lwr-result-thumb--none svg, .lwr-suggest-thumb--none svg{
  width: 24px; height: 24px; fill: none; stroke: var(--lwr-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.lwr-result-thumb--none, .lwr-suggest-thumb--none{ background: #EEF1F5; }
/* The magazine's story images are square too (every one checked), most
   with their headline set in the art; a 3:2 crop cut "Boating, Sunsets &
   Love of Country" to "…Countr". */
.mag-story-image img{ aspect-ratio: 1 / 1; }
/* The Magazine page's sign-up: its consent line across the whole form,
   not squeezed under the Name field. */
.mag-subscribe-form .form-privacy{ grid-column: 1 / -1; margin: 0.15rem 0 0; }

/* =========================================================
   Phase 9.11 (v2.09.0): refinement pass.
   ========================================================= */
/* The Next steps rail is a sticky sidebar from 1024px (it was 1200px, so
   laptops and narrower desktop windows had it at the end of the page). It
   sticks just under the header, stops with the community content before
   the search and footer, and phones are unchanged. */
@media (min-width: 1024px) and (max-width: 1199px){
  .community-layout{ grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem; align-items: start; }
  .cr{ position: sticky; top: calc(88px + var(--wp-admin--admin-bar--height, 0px)); }
  .cr-actions{ grid-template-columns: minmax(0, 1fr); }
  .community-flow .community-columns{ grid-template-columns: minmax(0, 1fr); }
  .community-flow .community-snapshot dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .community-flow .snapshot-row:nth-child(2){ border-top: 0; padding-top: 0; }
}
/* Compare: rows where the two communities differ get a light tint and
   navy values; equal rows stay as they are. No green or red. */
.cmp-row--differs{ background: #F3F6FB; }
.cmp-row--differs .cmp-value{ color: var(--lwr-navy); }
.cmp-row--differs .cmp-label{ color: var(--lwr-navy); }
@media (min-width: 700px){
  .cmp-row--differs{ box-shadow: inset 3px 0 0 var(--lwr-navy); }
}
@media (max-width: 560px){
  .cmp-row--differs{ box-shadow: inset 3px 0 0 var(--lwr-navy); }
}
/* Editorial sweep: section headings break into balanced lines (no word left
   alone on the last line) and body copy avoids a one-word last line. The
   heroes keep their own breaks. */
main :is(h2, h3){ text-wrap: balance; }
main :is(.section-head p, .resource-prose p, .kc-hub-intro p, .mag-story-body p, .editorial-card-body p, .community-tile-body p, .card p, .lwr-result-text, .kc-guide-card p){ text-wrap: pretty; }
/* Magazine excerpts: at most three lines, so a row of stories reads evenly. */
.mag-story-body p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The home page's "Neighborhoods to know": one or two featured
   communities sit centered at a tile's width, not stretched or left alone
   at the start of an empty row. */
@media (min-width: 700px){
  #communities .community-tiles:not(:has(> :nth-child(3))){ grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; }
}
/* Leslie's Take cards (home page, community pages, the archive): the
   excerpt at most three lines, like the magazine's stories (v2.09.1). */
.editorial-card:not(.is-featured) .editorial-card-body p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
/* Every Leslie's Take card's excerpt, the featured one too, is at most
   three lines (v2.09.2). The full text stays in the page for screen
   readers; only the view is clipped. */
.editorial-card .editorial-card-body p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }

/* ---------------------------------------------------------
   Phase 10 (v2.10.0): the regional platform
   --------------------------------------------------------- */

/* All Properties' Area and Home type sit in the same row of fields. */
.idx-omnibar-area-container, .idx-omnibar-type-container{ flex: 1 1 170px; }

/* Features Search: "how do you want to live". The choices are chips:
   the whole label is the target (44px tall), the real checkbox or radio
   stays in the page for keyboards and screen readers, and a chosen chip
   turns navy. */
.feature-search{
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--lwr-sand-deep);
  border-radius: var(--lwr-radius);
}
.feature-search-where{ display: flex; flex-wrap: wrap; gap: 1rem; }
.feature-search-where .idx-omnibar-extra{ flex: 1 1 220px; }
.feature-search select{
  width: 100%;
  min-height: 44px;
  padding: 0.75em 1em;
  border: 1.5px solid #d7dce3;
  border-radius: var(--lwr-radius);
  font-family: var(--lwr-font-data);
  font-size: 0.95rem;
  color: var(--lwr-ink);
  background: var(--lwr-white);
}
.feature-search-group{ margin: 0; padding: 0; border: 0; min-width: 0; }
.feature-search-group legend{
  padding: 0;
  margin-bottom: 0.55rem;
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lwr-navy);
}
.feature-chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feature-chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55em 1em;
  border: 1.5px solid #cfd6df;
  border-radius: 999px;
  background: var(--lwr-white);
  font-family: var(--lwr-font-data);
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--lwr-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.feature-chip input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.feature-chip:hover{ border-color: var(--lwr-navy); }
.feature-chip:has(input:checked){ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); }
.feature-chip:has(input:focus-visible){ outline: 3px solid var(--lwr-blue); outline-offset: 2px; }
.feature-search-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; }
.feature-search-note{ margin-top: 2rem; font-size: 0.95rem; color: rgba(30,36,48,0.8); }

/* Features Search basics (v2.10.37): price, then beds and baths side by
   side, each one row of equal buttons that never wraps. */
.feature-search-counts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.seg-choice{
  display: grid;
  grid-template-columns: repeat(var(--seg-count, 6), minmax(0, 1fr));
  border: 1.5px solid #cfd6df;
  border-radius: var(--lwr-radius);
  background: var(--lwr-white);
  overflow: hidden;
}
.seg-option{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-left: 1.5px solid #cfd6df;
  font-family: var(--lwr-font-data);
  font-size: 0.92rem;
  color: var(--lwr-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-option:first-child{ border-left: 0; }
.seg-option input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-option:hover{ background: #eef1f5; }
.seg-option:has(input:checked){ background: var(--lwr-navy); color: var(--lwr-white); }
.seg-option:has(input:focus-visible){ outline: 3px solid var(--lwr-blue); outline-offset: -3px; }

/* More filters: the community, gated or golf, water and sewer, open
   houses. Closed until opened, open when one of them is chosen. */
.feature-search-more{ border-top: 1.5px solid #d7dce3; padding-top: 0.75rem; }
.feature-search-more summary{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  min-height: 44px;
  padding: 0.6rem 0;
  font-family: var(--lwr-font-data);
  cursor: pointer;
  list-style: none;
}
.feature-search-more summary::-webkit-details-marker{ display: none; }
.feature-search-more summary::before{ content: "+"; font-weight: 700; color: var(--lwr-maroon); width: 1em; }
.feature-search-more[open] summary::before{ content: "\2212"; }
.feature-search-more-title{ font-weight: 700; color: var(--lwr-navy); }
.feature-search-more-list{ font-size: 0.88rem; color: rgba(30,36,48,0.75); }
.feature-search-more summary:focus-visible{ outline: 3px solid var(--lwr-blue); outline-offset: 2px; }
.feature-search-more-body{ display: grid; gap: 1.25rem; padding-top: 0.75rem; }

/* Price range (v2.10.37): two selects without JavaScript; with it, one
   track and two handles (assets/main.js) that set those selects. The
   selects stay in the form (hidden), so it still sends lp and hp. */
.price-range{ display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.price-range-label{
  font-family: var(--lwr-font-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lwr-navy);
}
.price-range-selects{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.price-range-selects label{ display: flex; flex-direction: column; gap: 0.25rem; }
.price-range-selects label span{ font-family: var(--lwr-font-data); font-size: 0.8rem; color: var(--lwr-ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.price-range.is-enhanced .price-range-selects{ display: none; }
.price-slider{ display: grid; gap: 0.1rem; }
.price-slider-value{ font-family: var(--lwr-font-data); font-size: 0.98rem; font-weight: 600; color: var(--lwr-ink); }
.price-slider-track{ position: relative; height: 44px; margin: 0 13px; }
.price-slider-track::before{ content: ""; position: absolute; left: -13px; right: -13px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: #cfd6df; }
.price-slider-fill{ position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--lwr-navy); }
.price-slider input[type="range"]{
  position: absolute;
  left: -13px;
  top: 0;
  width: calc(100% + 26px);
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track{ height: 44px; background: transparent; border: 0; }
.price-slider input[type="range"]::-moz-range-track{ height: 44px; background: transparent; border: 0; }
.price-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  pointer-events: auto;
  width: 26px;
  height: 26px;
  margin-top: 9px;
  border-radius: 50%;
  border: 2px solid var(--lwr-navy);
  background: var(--lwr-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: grab;
}
.price-slider input[type="range"]::-moz-range-thumb{
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--lwr-navy);
  background: var(--lwr-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  cursor: grab;
}
.price-slider input[type="range"]:focus{ outline: none; }
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb{ outline: 3px solid var(--lwr-blue); outline-offset: 2px; }
.price-slider input[type="range"]:focus-visible::-moz-range-thumb{ outline: 3px solid var(--lwr-blue); outline-offset: 2px; }
@media (max-width: 600px){
  .feature-search-counts{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px){
  .feature-search{ padding: 1.1rem; }
  /* The buttons stack full width, never a wrapped half-row. */
  .feature-search-actions{ display: grid; grid-template-columns: minmax(0, 1fr); }
  .feature-search-actions .btn{ width: 100%; text-align: center; }
}

/* Home hero (Shawn, 2026-10-19): the headline and buttons only, no caption
   over the photo. The buttons take the space the lines under the headline
   used to give them, and phones keep enough room under the buttons for
   the pause button (bottom right) to clear the last one. The magazine
   eyebrow uses the eyebrow-part classes: two phrases, each on its own
   line on phones instead of breaking mid-phrase.
   2026-10-21: one line under the headline, Leslie's sitewide message,
   near-white with a soft shadow so it reads over the brightest sky. Its
   two sentences are kept whole (Shawn): on one row where they fit, the
   second on its own row where they don't, and on phones the long second
   sentence splits into two even lines. */
.hero-content h1 + .hero-actions{ margin-top: 1rem; }
.hero-content .hero-line{ margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.5; color: #F1F6FC; text-shadow: 0 1px 8px rgba(16,28,48,0.75); }
.hero-line-part{ display: inline-block; white-space: nowrap; }
.hero-eyebrow-part{ white-space: nowrap; }
@media (max-width: 780px){
  .hero-content{ padding-bottom: 4.25rem; }
  .hero-content .hero-line{ font-size: 1rem; margin-bottom: 1.25rem; }
  .hero-eyebrow-sep{ display: none; }
  .hero-eyebrow-part{ display: block; }
}
@media (max-width: 640px){
  .hero-line-part{ display: block; white-space: normal; text-wrap: balance; }
}
/* "Leslie Wells Realty" on one line (v2.10.68, Leslie's October 18 review,
   p6 and p7), around the name only (lwr_keep_name(), inc/copy.php). */
.lwr-name{ white-space: nowrap; }
/* Phrases, names and phone numbers on one line, and a break between
   sentences before one inside a sentence (2026-10-22 ww1 review;
   lwr_keep_phrases() and lwr_sentences_html(), inc/copy.php). */
.lwr-keep{ white-space: nowrap; }
.lwr-sentence{ display: inline-block; }

/* "Where we work" on Why Manatee County? (v2.10.0): the service area as
   a wrap of links; the four home towns carry a small river mark. */
.area-links{ list-style: none; margin: 1.1rem 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.area-links a{
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5em 1em;
  border: 1.5px solid #cfd6df; border-radius: 999px; background: var(--lwr-white);
  font-family: var(--lwr-font-data); font-size: 0.92rem; color: var(--lwr-navy); text-decoration: none;
}
.area-links a:hover, .area-links a:focus-visible{ border-color: var(--lwr-navy); }
.area-links .is-home a{ border-color: var(--lwr-navy); font-weight: 600; }
.area-links .is-home a::before{ content: ""; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: var(--lwr-maroon); }
.area-links-note{ font-size: 0.92rem; color: rgba(30,36,48,0.8); }

/* Community hero eyebrow (v2.10.0): "Town, Florida · Master-planned
   community" or "· In Lakewood Ranch". Each phrase stays whole; on
   phones they stack instead of wrapping mid-phrase. */
.ch-eyebrow-part{ white-space: nowrap; }
@media (max-width: 600px){
  .ch-eyebrow-sep{ display: none; }
  .ch-eyebrow-part{ display: block; }
}
/* A master-planned community's neighborhoods, and a neighborhood's
   pointer back to it (template-parts/components/community-family.php). */
.community-family{ margin: 3rem 0; }
.community-family-intro{ max-width: 60ch; color: rgba(30,36,48,0.82); }
.community-family .community-tiles{ margin-top: 1.25rem; }
.community-family-part{ margin: 2rem 0; padding: 1rem 1.25rem; background: var(--lwr-sand-deep); border-left: 3px solid var(--lwr-navy); }
/* The registry's neighborhoods without pages (v2.10.2): name, county when
   it differs, verified builders and one line, then their homes for sale. */
.community-family-more{ margin: 2rem 0 0.75rem; font-size: 1.15rem; }
.community-family-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.community-family-item{ display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.85rem 0 0.9rem; border-top: 1px solid rgba(24,43,92,0.12); }
.community-family-name{ font-family: var(--lwr-font-data); font-weight: 700; color: var(--lwr-navy); }
.community-family-meta{ font-size: 0.85rem; color: rgba(30,36,48,0.78); }
.community-family-line{ font-size: 0.92rem; line-height: 1.45; }
.community-family-homes{ align-self: flex-start; margin-top: 0.2rem; font-size: 0.9rem; font-weight: 600; }
.community-family-note{ margin: 1rem 0 0; font-size: 0.82rem; color: rgba(30,36,48,0.75); }
.mp-thin .mp-none-title{ font-size: 1rem; }
@media (max-width: 700px){ .community-family-list{ grid-template-columns: minmax(0, 1fr); } }

/* New construction hub (v2.10.0, inc/new-construction.php). A row of
   jump links, then sections in the page's own rhythm. The builders table
   scrolls inside itself on a narrow phone rather than widening the page. */
.nc-jump{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.nc-jump a{
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5em 1em;
  border: 1.5px solid #cfd6df; border-radius: 999px; background: var(--lwr-white);
  font-family: var(--lwr-font-data); font-size: 0.92rem; color: var(--lwr-navy); text-decoration: none;
}
.nc-jump a:hover, .nc-jump a:focus-visible{ border-color: var(--lwr-navy); }
.nc-section{ margin: 0 0 3rem; scroll-margin-top: 110px; }
.nc-section > p{ max-width: 64ch; }
#nc-guide{ scroll-margin-top: 110px; }
.nc-section .community-tiles{ margin-top: 1.25rem; }
.nc-compare{ margin-top: 1.5rem; }
.nc-builders{ width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
.nc-builders th, .nc-builders td{ text-align: left; padding: 0.8rem 0.9rem; border-bottom: 1px solid #dde2ea; vertical-align: top; }
.nc-builders thead th{ font-family: var(--lwr-font-data); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lwr-navy); border-bottom-width: 2px; }
.nc-builders tbody th{ font-weight: 600; }
@media (max-width: 600px){
  .nc-jump{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nc-jump a{ justify-content: center; text-align: center; }
  .nc-builders, .nc-builders tbody, .nc-builders tr, .nc-builders th, .nc-builders td{ display: block; width: 100%; }
  .nc-builders thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nc-builders tr{ padding: 0.6rem 0; border-bottom: 1px solid #dde2ea; }
  .nc-builders th, .nc-builders td{ border: 0; padding: 0.2rem 0; }
}
.community-nc{ margin: 3rem 0; }
@media (max-width: 600px){
  /* An odd last jump link takes the whole row, never a half-row alone. */
  .nc-jump a:last-child:nth-child(odd){ grid-column: 1 / -1; }
}

/* Photo credits from the media library (v2.10.0): small and quiet, on
   the photo's own corner. The office's own photos carry none. */
.photo-credit{ margin: 0.4rem 0 0; font-size: 0.78rem; color: rgba(30,36,48,0.7); }
.photo-credit a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Not by color alone (WCAG 1.4.1). */
/* v2.10.41: an agent pick's licensed photo, with room before the text. */
.agent-pick-photo{ margin: 0 0 2rem; }
/* On a community hero it sits at the top corner (v2.10.5): at the bottom
   the Market Pulse strip, which rises over the hero's lower edge, covered
   it, and a Creative Commons credit must stay readable. A soft backing
   keeps it legible over a light sky. */
.ch-credit{
  position: absolute; z-index: 2; right: var(--lwr-gutter); top: 0.6rem; margin: 0;
  padding: 0.12rem 0.55rem; border-radius: 999px; background: rgba(15,29,66,0.55);
  font-size: 0.72rem; color: rgba(255,255,255,0.92);
}
.ch-credit a{ color: inherit; }
/* Leslie's own recommendation on a place page. */
.place-recommended .community-tip-label{ color: var(--lwr-maroon); }
/* "No preference" is the resting state, not a pick: outlined, not solid. */
.feature-chip.is-any:has(input:checked){ background: var(--lwr-white); color: var(--lwr-navy); border-color: var(--lwr-navy); font-weight: 600; }
/* Chips are links, never underlined text (beats the prose link rule). */
ul.area-links li a, nav.nc-jump a{ text-decoration: none; }
ul.area-links li a:hover{ text-decoration: none; }
.area-links .is-primary a{ border-color: var(--lwr-navy); font-weight: 600; }
@media (max-width: 600px){
  .nc-jump a{ border-radius: 12px; line-height: 1.25; }
}
/* All Properties on phones (v2.10.0): with Area and Home type added the
   wrapped row went uneven, so it's a tidy grid: address, area, type and
   the button full width; price min and max, beds and baths in pairs. */
@media (max-width: 600px){
  .idx-omnibar-form{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .idx-omnibar-form > .idx-omnibar-input,
  .idx-omnibar-form > .idx-omnibar-area-container,
  .idx-omnibar-form > .idx-omnibar-type-container,
  .idx-omnibar-form > .idx-omnibar-price-container,
  .idx-omnibar-form > .idx-omnibar-extra-button{ grid-column: 1 / -1; }
  .idx-omnibar-form > .idx-omnibar-extra-button{ justify-content: center; }
  .idx-omnibar-form > input[type="hidden"]{ display: none; }
}
/* All Properties above phones: two even rows of six columns, the address,
   area and home type on the first; prices, beds, baths and the button on
   the second (the button keeps the last two columns, For rent too). */
@media (min-width: 601px){
  .idx-omnibar-form{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
  .idx-omnibar-form > .idx-omnibar-input,
  .idx-omnibar-form > .idx-omnibar-area-container,
  .idx-omnibar-form > .idx-omnibar-type-container,
  .idx-omnibar-form > .idx-omnibar-price-container{ grid-column: span 2; }
  .idx-omnibar-form > .idx-omnibar-extra-button{ grid-column: -3 / -1; justify-content: center; }
  .idx-omnibar-form > input[type="hidden"]{ display: none; }
}

/* ---------------------------------------------------------
   Phase 10.1 (v2.10.1): Place Intelligence
   --------------------------------------------------------- */

/* Explore Manatee County (/communities/). */
.explore-manatee .explore-subhead{ margin: 2.25rem 0 0.9rem; font-family: var(--lwr-font-data); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-maroon); }
.explore-regions{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.explore-region{ position: relative; padding: 1.4rem 1.4rem 1.2rem; background: var(--lwr-white); border: 1px solid #dde2ea; border-top: 3px solid var(--lwr-blue); border-radius: var(--lwr-radius); }
.explore-region.is-home{ border-top-color: var(--lwr-maroon); }
.explore-region h4{ margin: 0 0 0.4rem; font-size: 1.35rem; }
.explore-region h4 a{ color: inherit; text-decoration: none; }
.explore-region h4 a:hover{ text-decoration: underline; }
.explore-region > p{ margin: 0 0 0.9rem; font-size: 0.95rem; color: rgba(30,36,48,0.82); }
.explore-badge{ display: inline-block; margin-bottom: 0.5rem; padding: 0.2em 0.6em; font-family: var(--lwr-font-data); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lwr-white); background: var(--lwr-maroon); border-radius: 2px; }
.explore-areas{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.explore-areas > li{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.55rem 0; border-top: 1px solid #eef1f5; min-height: 44px; }
.explore-areas > li > a{ font-weight: 600; color: var(--lwr-navy); }
.explore-meta{ font-size: 0.85rem; color: rgba(30,36,48,0.72); }
.explore-meta a{ color: inherit; }
/* Each town's communities by name under it (v2.10.38): small chips on their
   own line, up to eight, then "N more" to the town's page. */
.explore-communities{ flex: 1 0 100%; list-style: none; margin: 0.35rem 0 0.15rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.explore-communities a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.2rem 0.75rem;
  border: 1px solid #d7dce3;
  border-radius: 999px;
  font-family: var(--lwr-font-data);
  font-size: 0.85rem;
  color: var(--lwr-navy);
  text-decoration: none;
  background: var(--lwr-white);
}
.explore-communities a:hover{ border-color: var(--lwr-navy); }
.explore-communities .is-more a{ border-color: var(--lwr-navy); font-weight: 600; }
.explore-count{ margin-left: 0.35em; font-size: 0.8rem; font-weight: 400; color: rgba(30,36,48,0.65); }
.explore-note{ margin-top: 0.5rem; font-size: 0.85rem; color: rgba(30,36,48,0.72); }
.explore-questions{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.5rem 1.5rem; }
.explore-questions a{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; padding: 0.6rem 0; border-bottom: 1px solid #dde2ea; color: var(--lwr-navy); font-weight: 600; text-decoration: none; }
.explore-questions a:hover{ color: var(--lwr-maroon); }

/* Where a community sits. */
.community-place{ margin: 1.5rem 0 0.5rem; padding: 1.1rem 1.25rem; background: var(--lwr-sand-deep); border-radius: var(--lwr-radius); }
.community-place-line{ margin: 0 0 0.75rem; font-size: 1.02rem; }
.community-place-line a{ color: var(--lwr-navy); font-weight: 600; }
.community-place-links{ margin: 0; }
.community-place-also{ margin: 0.75rem 0 0; font-size: 0.92rem; }
.community-place-also span{ font-weight: 600; margin-right: 0.35em; }

/* Market context: the community beside the ones most like it. */
.market-context{ margin: 3rem 0; }
.market-context-intro{ max-width: 64ch; color: rgba(30,36,48,0.82); }
.market-context-table{ width: 100%; border-collapse: collapse; margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.market-context-table th, .market-context-table td{ padding: 0.75rem 0.8rem; text-align: left; border-bottom: 1px solid #dde2ea; vertical-align: top; }
.market-context-table thead th{ font-family: var(--lwr-font-data); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lwr-navy); border-bottom-width: 2px; }
.market-context-table tbody th{ font-weight: 600; }
.market-context-table tr.is-self{ background: #F3F6FB; }
.market-context-why{ display: block; font-size: 0.8rem; font-weight: 400; color: rgba(30,36,48,0.7); }
.market-context-compare a{ display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 700px){
  .market-context-table thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .market-context-table, .market-context-table tbody, .market-context-table tr{ display: block; width: 100%; }
  .market-context-table tr{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.75rem 0.5rem; border-bottom: 1px solid #dde2ea; }
  .market-context-table th, .market-context-table td{ display: block; border: 0; padding: 0.25rem 0.3rem; }
  .market-context-table tbody th, .market-context-table td.market-context-compare{ grid-column: 1 / -1; }
  .market-context-table td[data-label]::before{ content: attr(data-label); display: block; font-family: var(--lwr-font-data); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lwr-navy); }
  .market-context-table td.market-context-compare:empty{ display: none; }
}

/* =========================================================
   21. LISTING TO LESLIE (inc/listing-inquiry.php, v2.10.7)
   Every listing card names who listed the home, then its MLS number
   and status (Stellar MLS Article 19.22: beside the home's facts, in a
   readily visible color and type no smaller than its other facts, so
   these inherit the card's text size and are never muted), then the
   two actions. The MLS disclosures follow each grid. The inquiry page
   (/ask-about-a-home/) holds the two forms.
   ========================================================= */
.listing-card .listing-courtesy,
.listing-card .listing-mls{ margin: 0.35rem 0 0; color: var(--lwr-ink); }
.listing-card .listing-courtesy{ font-weight: 600; }
.listing-card .listing-mls span{ white-space: nowrap; }
.listing-card .listing-actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  margin: auto 0 0;
  padding-top: 0.95rem;
}
.listing-card .listing-actions a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--lwr-blue);
  border-radius: var(--lwr-radius);
  font-family: var(--lwr-font-data);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: var(--lwr-blue);
  background: var(--lwr-white);
}
.listing-card .listing-actions a:hover,
.listing-card .listing-actions a:focus-visible{ background: var(--lwr-blue); color: var(--lwr-white); }
.listing-held-note{ margin: 1rem 0 0; font-size: 0.92rem; color: rgba(30,36,48,0.8); }

/* The MLS disclosures: Stellar's source line and 19.24 text, then IDX
   Broker's own Stellar text and logo, all as written. */
.mls-disclaimer{
  margin: 1.75rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(24,43,92,0.14);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(30,36,48,0.85);
}
.mls-disclaimer p{ margin: 0 0 0.7rem; }
.mls-disclaimer .mls-disclaimer-source{ font-weight: 600; color: var(--lwr-ink); }
.mls-disclaimer-idx{ display: flow-root; }
.mls-disclaimer-idx p{ margin: 0; }
.mls-disclaimer-logo{ float: left; width: 80px; height: auto; margin: 0.2rem 0.85rem 0.35rem 0; }
.section-navy .mls-disclaimer{ border-top-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
.section-navy .mls-disclaimer .mls-disclaimer-source{ color: var(--lwr-white); }

/* The inquiry page: the home, then the two forms side by side (stacked
   on phones, the one the visitor chose first). */
.inquiry-page{ padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.inquiry-home{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.inquiry-photo{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.inquiry-price{
  margin: 0 0 0.3rem;
  font-family: var(--lwr-font-display);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.1;
  color: var(--lwr-navy-dark);
}
.inquiry-facts h1{ margin: 0 0 0.2rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2; }
.inquiry-place{ margin: 0 0 0.9rem; color: rgba(30,36,48,0.85); }
.inquiry-meta{ display: flex; flex-wrap: wrap; gap: 0.45rem 0.5rem; margin: 0 0 1.1rem; }
.inquiry-meta span{
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(24,43,92,0.22);
  border-radius: 999px;
  font-family: var(--lwr-font-data);
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--lwr-ink);
}
.inquiry-listed{
  margin: 0 0 0.9rem;
  padding: 1rem 1.15rem;
  background: var(--lwr-sand);
  border-left: 4px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--lwr-ink);
}
.inquiry-full{ margin: 0; font-family: var(--lwr-font-data); font-weight: 600; }
.inquiry-forms{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.inquiry-form{
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: #F7F8FA;
  border: 1px solid rgba(24,43,92,0.12);
  border-radius: 10px;
  scroll-margin-top: 6rem;
}
.inquiry-form h2{ margin: 0 0 1rem; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.inquiry-form form p{ margin: 0 0 0.9rem; }
.inquiry-form label{ display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.inquiry-optional{ font-weight: 400; opacity: 0.75; }
.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="date"],
.inquiry-form input[type="time"],
.inquiry-form textarea{
  width: 100%;
  min-height: 44px;
  padding: 0.7em 0.85em;
  border: 1.5px solid #d7dce3;
  border-radius: var(--lwr-radius);
  font: inherit;
  font-size: 1rem;
  color: var(--lwr-ink);
  background: var(--lwr-white);
}
.inquiry-form input:focus,
.inquiry-form textarea:focus{ outline: none; border-color: var(--lwr-blue); box-shadow: 0 0 0 3px rgba(28,116,198,0.15); }
.inquiry-when{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.inquiry-form .btn{ width: 100%; text-align: center; }
.inquiry-thanks{ margin: 0; padding: 1rem 1.1rem; background: var(--lwr-white); border-left: 4px solid var(--lwr-blue); font-weight: 600; }
/* The home-search account note after a form that goes to IDX Broker (v2.10.10). */
.inquiry-account-thanks{ margin: 0.85rem 0 0; font-size: 0.95rem; line-height: 1.55; }
.inquiry-error{ margin: 0 0 1rem; color: var(--lwr-maroon); font-weight: 600; }
.inquiry-missing{ max-width: 640px; margin: 0 auto; text-align: center; }
.inquiry-missing-actions{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.inquiry-missing-actions .btn{ text-align: center; }
@media (max-width: 820px){
  .inquiry-home,
  .inquiry-forms{ grid-template-columns: 1fr; }
  .inquiry-forms--showing #showing{ order: -1; }
}

/* ---------------------------------------------------------
   Lifestyle, live (v2.10.39): the events lists (inc/events.php) and the
   public places directory (inc/lifestyle-directory.php) on the guides.
   --------------------------------------------------------- */
.events-group,
.directory-town{ margin: 1.5rem 0 0.6rem; font-size: 1.15rem; }
.events{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.event{ display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.75rem; border: 1px solid #e3e7ee; border-radius: var(--lwr-radius); background: var(--lwr-white); }
.event-date{ display: grid; justify-items: center; padding: 0.35rem 0; border-radius: var(--lwr-radius); background: var(--lwr-navy); color: var(--lwr-white); font-family: var(--lwr-font-data); line-height: 1.1; }
.event-month{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.event-day{ font-size: 1.35rem; font-weight: 700; }
.event-body{ display: grid; gap: 0.2rem; min-width: 0; }
.event-title{ font-weight: 600; color: var(--lwr-navy); overflow-wrap: anywhere; }
.event-meta{ font-size: 0.9rem; color: rgba(30,36,48,0.78); }
/* Events and traditions the office adds (v2.10.48, inc/our-events.php). */
.event-note{ font-size: 0.92rem; }
.event-by{ justify-self: start; margin-top: 0.15rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--lwr-sand-deep); font-family: var(--lwr-font-data); font-size: 0.78rem; color: var(--lwr-navy); }
.tradition .event-day{ font-size: 1rem; line-height: 1.35; }
.events-source,
.directory-source{ margin-top: 0.9rem; font-size: 0.88rem; color: rgba(30,36,48,0.72); }
.directory-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.directory-item{ display: grid; gap: 0.3rem; padding: 0.8rem 0.9rem; border: 1px solid #e3e7ee; border-radius: var(--lwr-radius); background: var(--lwr-white); }
.directory-name{ font-weight: 600; color: var(--lwr-navy); }
.directory-name a{ color: inherit; }
.directory-meta{ font-size: 0.9rem; color: rgba(30,36,48,0.78); overflow-wrap: anywhere; }
.directory-amenities{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.directory-amenity{ padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--lwr-sand-deep); font-family: var(--lwr-font-data); font-size: 0.8rem; color: var(--lwr-navy); }
.directory-access{ font-size: 0.9rem; line-height: 1.5; }
.directory-notice{ font-size: 0.88rem; font-weight: 600; color: var(--lwr-maroon); }
.directory-directions{ justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; font-weight: 600; }

/* The Shopping guide and the local food and drink directory (v2.10.43,
   inc/shopping.php, inc/food-directory.php): the parks directory's rows,
   with a short description, the "as listed" date and the center's links. */
.shopping-description{ font-size: 0.95rem; }
.shopping-asof{ font-size: 0.8rem; color: rgba(30,36,48,0.68); }
.shopping-links{ display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
.shopping-links a{ display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.shopping-item:target{ border-color: var(--lwr-navy); box-shadow: 0 0 0 2px rgba(30,52,90,0.18); }
.shopping-close-by .directory-list{ margin-bottom: 0.8rem; }

/* Agent picks (v2.10.41): who recommends a place, on its page and its card. */
.community-tip.agent-pick{ margin-bottom: 2.5rem; }
.agent-pick .community-tip-label{ color: var(--lwr-navy); }
.agent-pick .community-tip-label a{ color: inherit; }
.agent-pick-meta{ font-size: 0.9rem; color: var(--lwr-muted, #4a5468); }
.agent-pick-unverified{ font-size: 0.9rem; font-weight: 600; color: #8a5a00; }
.place-card-note{ margin: 0; font-size: 0.88rem; color: var(--lwr-muted, #4a5468); }
.agent-pick-card .agent-pick-by,
.agent-pick-card .agent-pick-spot{ margin: 0; font-size: 0.92rem; }
.agent-pick-card .agent-pick-links{ margin: 0.25rem 0 0; font-size: 0.92rem; }
.local-favorites-section{ margin: 2.5rem 0 0; scroll-margin-top: 6rem; }
.local-favorites-section > h2{ margin-bottom: 1rem; }
.pick-filter{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: -0.75rem 0 1.5rem; }
.pick-filter[hidden]{ display: none; }
.pick-filter-label{ font-family: var(--lwr-font-data); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lwr-navy); }
.pick-filter-options{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pick-filter-option{ min-height: 44px; padding: 0.45rem 0.95rem; border: 1px solid rgba(24,43,92,0.3); border-radius: 999px; background: var(--lwr-white); color: var(--lwr-navy); font: inherit; font-size: 0.92rem; cursor: pointer; }
.pick-filter-option[aria-pressed="true"]{ background: var(--lwr-navy); border-color: var(--lwr-navy); color: var(--lwr-white); font-weight: 600; }
.pick-filter-option:focus-visible{ outline: 3px solid var(--lwr-sky, #4aa3df); outline-offset: 2px; }
.pick-filter-status{ flex-basis: 100%; margin: 0; font-size: 0.9rem; color: var(--lwr-muted, #4a5468); }
.pick-filter-status:empty{ display: none; }
.agent-own-picks{ padding: 2.5rem 0; }
/* v2.10.42: one line to Local Favorites where it fits (lwr_agent_picks_more_link()). */
.picks-more-link{ margin: 1.25rem 0 0; font-weight: 600; }
.picks-more-link a::after{ content: " \2192"; }
.picks-more-link--center{ margin-top: 1.5rem; text-align: center; }

/* =========================================================
   LESLIE'S OCTOBER 13 REFINEMENTS (v2.10.56)
   docs/revisions/2026-10-13-leslie-handoff.md. Kept together so the
   whole pass reads in one place: brighter supporting text on navy,
   smaller title sections, lighter shadows, content that never waits
   on a fade, and the pieces the new copy needs.
   ========================================================= */

/* Supporting text on navy: 12.5:1 instead of 6.4:1 (the brand's light
   blue stays for eyebrows, rules and buttons). */
:root{
  --lwr-on-navy-text:   #CFE3F5;
  --lwr-on-navy-accent: #9CC8EE;   /* 9.3:1 on the dark navy */
}
.page-banner p{ color: var(--lwr-on-navy-text); }
.page-banner .eyebrow,
.section-navy .eyebrow{ color: var(--lwr-on-navy-accent); }
.page-banner .breadcrumbs ol{ color: var(--lwr-on-navy-text); }
.footer-bottom,
.footer-disclosures{ color: rgba(245,240,228,0.85); }

/* Smaller title sections. */
.page-banner{ padding: 2.25rem 0 2rem; }
.page-banner h1{ font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; }
.hero{ min-height: 76vh; min-height: 76svh; }
.hero-content h1{ font-size: clamp(2.6rem, 6vw, 5rem); }
@media (max-width: 780px){
  .hero{ min-height: 80vh; min-height: 80svh; }
}

/* Lighter shadows: short and soft instead of deep and blurred. */
.magazine-cover-img{ box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.mag-feature-cover img{ box-shadow: 0 6px 18px rgba(15,29,66,0.2); }
.mag-column{ box-shadow: 0 2px 10px rgba(15,29,66,0.1); }
.mag-issue:hover img, .mag-issue:focus-visible img{ box-shadow: 0 6px 14px rgba(15,29,66,0.2); }
.community-tile:hover{ box-shadow: 0 6px 16px rgba(15,29,66,0.14); }
.cs-strip{ box-shadow: 0 4px 12px rgba(15,29,66,0.08); }
.cr-card{ box-shadow: 0 2px 8px rgba(15,29,66,0.05); }
.nav-panel{ box-shadow: 0 8px 20px rgba(15,29,66,0.14); }
.search-overlay-panel{ box-shadow: 0 8px 20px rgba(15,29,66,0.18); }

/* Content is there from the start: .reveal no longer hides anything
   until it scrolls into view (main.js still adds .is-visible, harmless). */
.reveal,
.reveal.is-visible{ opacity: 1; transform: none; transition: none; }

/* The Communities page's town cards are h3s under "Explore your options." */
.community-card-body h3{ margin: 0; font-size: 1.7rem; }
.community-card-body h3 a{ color: inherit; text-decoration: none; }
.community-card-body h3 a:hover{ color: var(--lwr-maroon); }
.explore-manatee .community-grid{ margin-bottom: 2.5rem; }

/* Homepage: "Let's plan your next move." Three equal paths, one row from
   700px, a full-width stack on phones. */
.plan-paths{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; max-width: 960px; margin: 0 auto; }
@media (min-width: 700px){
  .plan-paths{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.plan-path{
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 72px; padding: 1.1rem 1.35rem;
  background: var(--lwr-white);
  border: 1px solid rgba(24,43,92,0.18); border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
  color: var(--lwr-navy-dark);
  font-family: var(--lwr-font-display); font-size: 1.25rem; font-weight: 600;
  text-decoration: none;
}
.plan-path svg{ flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-path:hover,
.plan-path:focus-visible{ background: var(--lwr-sand-deep); color: var(--lwr-maroon); }

/* Homepage: the new-construction invitation. */
.home-callout{
  max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
  background: var(--lwr-sand-deep);
  border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.home-callout .eyebrow{ color: var(--lwr-blue-deep); }
.home-callout p{ max-width: 58ch; margin-left: auto; margin-right: auto; }

/* Homepage rhythm (v2.10.58, Shawn found it stretched): 64px a section on
   desktop and 40px on phones, instead of the site's 96px and 48px. Its
   river dividers now sit only next to the hero and the magazine
   (front-page.php). */
.home .site-main > .section{ padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* Knowledge Center hubs: a featured tool right under the intro (v2.10.58,
   the Community Matchmaker on Buying). One row from 760px, the button
   full width on phones. */
.kc-feature{
  display: grid; gap: 1rem; align-items: center;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--lwr-sand-deep);
  border-top: 3px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.kc-feature .eyebrow{ color: var(--lwr-blue-deep); }
.kc-feature h2{ margin: 0.2rem 0 0.4rem; }
.kc-feature p{ margin: 0; max-width: 62ch; }
.kc-feature .btn{ display: block; text-align: center; white-space: nowrap; }
@media (min-width: 760px){
  .kc-feature{ grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
}

/* A listing that isn't simply active says so on the photo. */
.listing-status-flag{
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
  padding: 0.4rem 0.6rem;
  background: var(--lwr-maroon); color: var(--lwr-white);
  border-radius: var(--lwr-radius);
  font-family: var(--lwr-font-data); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.1;
  text-transform: uppercase;
}

/* /allhomes/: Leslie's three buttons in the banner, and the grid's label. */
.page-banner .banner-actions{ margin-top: 1.25rem; }
.page-banner .btn:not(.btn-solid){ color: var(--lwr-white); border-color: var(--lwr-blue-light); }
.page-banner .btn:not(.btn-solid):hover{ background: var(--lwr-blue-light); color: var(--lwr-navy-dark); }
.page-banner .banner-areas{ margin-top: 1rem; font-size: 0.92rem; }
.page-banner .banner-areas a{ color: inherit; text-decoration: underline; }
.listing-grid-head{ margin-bottom: 1.25rem; }
.listing-grid-head h2{ margin-bottom: 0.3rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.listing-grid-head p{ margin: 0; color: var(--lwr-muted, #4a5468); }
/* Three buttons on a phone: a full-width stack, never a ragged wrap. */
@media (max-width: 560px){
  .page-banner .banner-actions,
  #our-story .cta-actions,
  .resource-prose .cta-actions{ flex-direction: column; align-items: stretch; }
  .page-banner .banner-actions .btn,
  #our-story .cta-actions .btn,
  .resource-prose .cta-actions .btn{ text-align: center; }
}

/* New Construction: Leslie's note. */
.leslies-note{
  margin: 1.75rem 0 2rem; padding: 1.1rem 1.3rem 1.15rem;
  background: var(--lwr-sand-deep);
  border-left: 4px solid var(--lwr-maroon);
  border-radius: var(--lwr-radius);
}
.leslies-note-label{
  display: block; margin-bottom: 0.35rem;
  font-family: var(--lwr-font-data); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lwr-maroon);
}
.leslies-note p{ margin: 0; font-size: 1.05rem; color: var(--lwr-navy-dark); }

/* About: Leslie's portrait beside the opening section. */
.about-portrait{ margin: 0 auto 1.5rem; max-width: 260px; text-align: center; }
.about-portrait img{ display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--lwr-radius); }
.about-portrait figcaption{ margin-top: 0.5rem; font-size: 0.85rem; color: var(--lwr-muted, #4a5468); }
@media (min-width: 700px){
  .about-portrait{ float: right; width: 240px; margin: 0.4rem 0 1.25rem 2rem; }
}

/* Footer: Leslie's line. */
.footer-tagline{ margin: 0 0 0.6rem; font-weight: 600; color: var(--lwr-white); }
.footer-m-contact .footer-tagline{ margin-top: -0.25rem; font-size: 0.92rem; }


/* Living in Manatee County: room between a section's guide links and the next heading. */
.living-links{ margin-bottom: 2rem; }

/* A scroll rail holds its own absolutely placed pieces (the visually hidden
   story headlines on phones). The fade-in's transform used to do that for
   cards still waiting to fade in; with the fade gone (v2.10.56) they escaped
   the rail and widened the page. */
.grid-scroll{ position: relative; }

/* =========================================================
   v2.10.60: Shawn's homepage flow (2026-10-14)
   ========================================================= */

/* Let's plan your next move: one section, three cards (buying, selling,
   new construction), each with one button. Three across from 961px; one
   column to 641px; on phones the swipe row with its switch, as the two-card
   split had. */
.path-split--three{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 960px){ .path-split--three{ grid-template-columns: 1fr; } }
@media (min-width: 961px){
  .path-split--three .path-card{ padding: 1.75rem 1.6rem 1.9rem; }
}

/* Life beyond your front door: the lifestyle photos and the phones' drive
   tiles moved here from the magazine's navy band, so the rail's note and
   rule take the light section's colors. Six guide cards, three across. */
#local-life .magazine-feature-grid{ margin-bottom: 0.5rem; }
#local-life .next-steps{ margin-top: 2.5rem; }
@media (min-width: 900px){
  #local-life .next-steps-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #local-life .lifestyle-rail{ margin-top: 0; padding-top: 0; border-top: 0; }
  #local-life .lifestyle-rail .drive-footnote{ color: var(--lwr-ink); opacity: 0.8; }
  /* Guide buttons stacked on phones (2026-10-22 ww1 review): side by
     side, "Explore communities" wrapped to two lines. */
  .guide-cta-actions{ grid-template-columns: 1fr; }
}

/* Phone numbers stay together in author cards and other body copy. */
a[href^="tel:"]{ white-space: nowrap; }

/* The Community Matchmaker on the homepage: the Knowledge Center's block. */
.home-matchmaker .kc-feature{ margin: 0; }

/* Line breaks (2026-10-22 ww1 review; Shawn's rule: labels, names and
   phone numbers don't break across lines on phones, and a heading breaks
   between its sentences or clauses, not inside them). Sizes come from
   measured widths at 320, 360 and 390px. */
.mobile-menu-link span:last-child{ font-size: min(2rem, 7vw); white-space: nowrap; } /* "Magazine and Local Life" fits at 320px */
.agent-card .agent-role{ text-wrap: balance; } /* "Office Manager / and Agent" in a narrow card */
.page-banner h1, .page-banner p{ text-wrap: balance; }
@media (min-width: 900px){
  .subscribe-popup{ width: min(420px, calc(100vw - 2.5rem)); } /* "Be the First to Know" fits beside the cover */
}
@media (min-width: 1024px){
  .section-fullbleed-title{ max-width: min(46rem, 52vw); } /* each clause of the river band heading on one line */
  .step-links.place-nav{ max-width: 46rem; } /* Local Favorites: two even rows of chips, not 6 and 1 */
}
@media (max-width: 640px){
  .footer-mobile .footer-col a{ white-space: nowrap; font-size: min(1.0625rem, calc(5vw - 3px)); }
  .property-subnav ul{ gap: min(2rem, 3.5vw); justify-content: space-between; }
  .property-subnav a{ font-size: min(0.92rem, 3.75vw); }
}
/* Desktop Communities menu: "Town guides" over the four town cards, across
   the grid's full row (2026-10-22 ww1 review). */
.nav-towns-label{ grid-column: 1 / -1; margin-bottom: -0.4rem; }
.nav-towns{ grid-template-rows: auto 1fr; } /* the label's row only as tall as the label */
.nav-panel-side{ width: 240px; } /* "Living in Manatee County" on one line */

/* Questions for Leslie (2026-10-22, page-leslie-checklist.php). */
.lq{ max-width: 52rem; }
.lq-intro{ margin-bottom: 2rem; }
.lq-progress{ font-family: var(--lwr-font-data); color: var(--lwr-navy); }
.lq-topics{ margin-top: 0.75rem; }
.lq-lock{ max-width: 32rem; padding: 1.5rem; border: 1px solid var(--lwr-sand-deep); border-radius: 6px; }
.lq-lock input[type="password"]{ width: 100%; max-width: 20rem; padding: 0.6em; border: 1px solid rgba(24,43,92,0.25); border-radius: var(--lwr-radius); }
.lq-topic{ margin: 2.5rem 0 0; }
.lq-topic h2{ margin-bottom: 0.2rem; }
.lq-topic-count{ margin: 0 0 1rem; font-family: var(--lwr-font-data); font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.lq-items{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lq-item{ padding: 1.1rem 1.25rem 1.2rem; border: 1px solid #E3E7EE; border-left: 4px solid var(--lwr-navy); border-radius: 6px; background: var(--lwr-white); }
.lq-item.is-answered{ border-left-color: #2E7D4F; }
.lq-q{ display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.4rem; font-size: 1.15rem; line-height: 1.35; }
.lq-mark{ flex: none; width: 1.05rem; height: 1.05rem; border: 2px solid var(--lwr-navy); border-radius: 3px; transform: translateY(0.15rem); }
.lq-item.is-answered .lq-mark{ background: #2E7D4F; border-color: #2E7D4F; box-shadow: inset 0 0 0 2px var(--lwr-white); }
.lq-badge{ display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--lwr-maroon); color: var(--lwr-white); font-family: var(--lwr-font-data); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.lq-context{ font-size: 0.95rem; color: rgba(30,36,48,0.85); }
.lq-context p{ margin: 0 0 0.6rem; }
.lq-choices{ margin: 0.6rem 0 0.4rem; padding: 0; border: 0; }
.lq-choices legend, .lq-note-label{ display: block; margin: 0.4rem 0 0.35rem; font-weight: 600; color: var(--lwr-navy); }
.lq-note-label span{ font-weight: 400; color: rgba(30,36,48,0.65); }
.lq-choice{ display: flex; gap: 0.55rem; align-items: flex-start; margin: 0 0 0.35rem; cursor: pointer; }
.lq-choice input{ flex: none; margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--lwr-navy); }
.lq-note{ width: 100%; padding: 0.6em; border: 1px solid rgba(24,43,92,0.25); border-radius: var(--lwr-radius); font: inherit; }
.lq-actions{ display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.6rem; }
.lq-saved{ color: #2E7D4F; font-weight: 700; }
.lq-error{ color: var(--lwr-maroon); font-weight: 700; }
.lq-when{ font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.lq-settled-list{ padding-left: 1.2rem; }
.lq-settled-list li{ margin-bottom: 0.8rem; }
.lq-settled-answer{ margin-top: 0.25rem; color: rgba(30,36,48,0.8); }
/* 2.10.94: priorities, the sort buttons and the AI assistant card. */
.lq-item-critical{ border-left-color: var(--lwr-maroon); }
.lq-badge-medium{ background: #8A5A00; }
.lq-badge-low{ background: #5B6577; }
.lq-tag{ display: inline-block; margin: 0 0 0.5rem; padding: 0.1rem 0.55rem; border: 1px solid #C9D1DD; border-radius: 999px; font-family: var(--lwr-font-data); font-size: 0.75rem; color: var(--lwr-navy); white-space: nowrap; }
.lq-list-top{ scroll-margin-top: 6rem; }
.lq-sort{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; }
.lq-sort-label{ font-family: var(--lwr-font-data); font-size: 0.85rem; color: rgba(30,36,48,0.7); }
.lq-sort-btn{ display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 1.1rem; border: 1px solid var(--lwr-navy); border-radius: 999px; color: var(--lwr-navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lq-sort-btn:hover{ background: rgba(24,43,92,0.08); }
/* .idx-wrapper a:not(.btn) would outrank the white label (navy on navy). */
.idx-wrapper .lq-sort-btn.is-active{ background: var(--lwr-navy); color: var(--lwr-white); }
.lq-ai{ margin: 0 0 2.5rem; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--lwr-sand-deep); border-radius: 6px; background: var(--lwr-sand); }
.lq-ai h2{ margin: 0 0 0.4rem; font-size: 1.35rem; }
.lq-ai > p{ margin: 0 0 0.75rem; }
.lq-ai-steps{ margin: 0; padding-left: 1.3rem; display: grid; gap: 1rem; }
.lq-ai-actions{ display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0.6rem 0 0.4rem; }
.lq-ai-copied{ font-weight: 700; color: #2E7D4F; }
.lq-ai-text-wrap summary{ cursor: pointer; color: var(--lwr-navy); font-weight: 600; }
.lq-ai-text{ margin-top: 0.5rem; font-family: var(--lwr-font-data); font-size: 0.8rem; background: var(--lwr-white); }
.lq-ai-form{ margin-top: 0.4rem; }
.lq-ai-form .lq-note{ background: var(--lwr-white); }