/* =====================================================================
   zoyasolovyeva.com: location page template (mock-up)
   Load after /assets/site.css. One language per URL:
     <html lang="en" data-lang="en" data-lang-fixed>   /featured-communities/{place}-realtor/
     <html lang="ru" data-lang="ru" data-lang-fixed>   /ru-{place}/
   Section order (plan 4.4): hero, at a glance, reviews, Atlas crop (the signature
   moment, built by scripts/build-location-map.mjs), buying, selling, neighborhoods,
   prices, getting around + schools, pros and cons, FAQ, contact, links, footer.
   Images: square corners, alt text in the page language, never a real listing.
   Review helpers: ?review=1 outlines [data-confirm] (Zoya), [data-review="broker"]
   and [data-review="attorney"] and lists them in a panel (/assets/location.js).
   ===================================================================== */

/* ---------- Shared bits ---------- */
.lp-sec { padding: clamp(64px, 8vw, 112px) 0; }
.lp-sec + .lp-sec.is-plain { padding-top: 0; }
.sec-num { font-variant-numeric: tabular-nums; margin-right: 10px; color: var(--ink-soft); }
.on-dark .sec-num { color: var(--on-dark-soft); }
.lp-head { max-width: 46em; }
.lp-head .sec-lede { max-width: 40em; }
.src {
  display: inline-block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); text-underline-offset: 3px;
}
a.src { padding-block: 12px; margin-block: -12px; }
a.src:hover { color: var(--ink); text-decoration-color: currentColor; }
.on-dark .src { color: var(--on-dark-soft); text-decoration-color: color-mix(in srgb, var(--mist) 35%, transparent); }
.prose { max-width: 40em; }
.prose p { margin: 0 0 16px; color: var(--ink-soft); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn):not(.text-link) { color: var(--lake); text-underline-offset: 3px; padding-block: 12px; }
.lp-figure { margin: 0; }
.lp-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.twin {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 15px; color: var(--lake); text-decoration: none;
}
.twin svg { width: 18px; height: 18px; flex: none; }
.twin:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.lp-hero { padding: clamp(18px, 2.4vw, 36px) 0 clamp(48px, 6vw, 88px); }
.lp-topline { display: flex; justify-content: space-between; align-items: center; gap: 4px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: clamp(22px, 3vw, 44px); }
.crumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: color-mix(in srgb, var(--ink) 30%, transparent); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.lp-eyebrow { margin: 0 0 14px; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--lake); }
.lp-h1 { margin: 0; display: flex; flex-direction: column; text-wrap: balance; }
.h1-place { font: 400 clamp(56px, 7.4vw, 116px)/.94 var(--display); letter-spacing: -.025em; color: var(--ink); }
.h1-place i { font-style: italic; font-size: .5em; letter-spacing: 0; color: var(--lake); }
.h1-role { order: 2; margin-top: 14px; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--body); color: var(--lake); }
/* Russian H1: "Недвижимость в" above, the place large, "(Winter Park), Флорида" below */
.lp-h1.ru .h1-role { order: 0; margin: 0 0 10px; }
.lp-h1.ru .h1-place { font-size: clamp(46px, 6.6vw, 104px); hyphens: manual; }
.lp-h1.ru .h1-alt { order: 3; margin-top: 12px; font: 600 clamp(17px, 1.4vw, 20px)/1.3 var(--body); color: var(--ink-soft); }

.lp-who { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: clamp(22px, 2.6vw, 34px); max-width: 34em; }
.lp-portrait { width: 76px; height: 76px; overflow: hidden; background: var(--sun); }
/* Head and shoulders from the 800 x 1000 headshot (face at about 47% / 21% of the square box) */
.lp-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(3.4); transform-origin: 45.9% 12.3%; }
.lp-who p { margin: 0; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--ink); }
.lp-proof { margin: 14px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
.lp-proof a { color: inherit; text-underline-offset: 3px; padding-block: 12px; white-space: nowrap; }
.lp-cta { margin-top: clamp(20px, 2.4vw, 30px); max-width: 30em; }
.lp-cta .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lp-cta .row .btn { width: 100%; }
.lp-cta .firm { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.lp-cta .firm a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--ink); padding-block: 12px; } /* WCAG 1.4.1 */
.lp-cta .more-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }

.lp-hero-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--lake) 20%, var(--mist)); }
.lp-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }

/* ---------- At a glance ---------- */
.glance { padding-top: 0; }
.glance-sheet { background: var(--paper); padding: clamp(24px, 3.6vw, 56px); box-shadow: 0 1px 2px rgba(15, 42, 51, .05), 0 40px 70px -56px rgba(15, 42, 51, .45); }
.glance-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; padding-bottom: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--line); }
.glance-top .sec-title { font-size: clamp(32px, 3.6vw, 50px); }
.glance-top p { margin: 0; color: var(--ink-soft); font-size: 17px; }
.glance-top .stat-src { margin-top: 10px; font-size: 14px; }
.g span.src a { color: inherit; text-underline-offset: 3px; padding-block: 13px; }
.glance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.g { padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 28px) clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.g + .g { padding-left: clamp(16px, 2vw, 28px); }
.g:nth-child(3n + 1) { padding-left: 0; }
.g:nth-child(3n + 2), .g:nth-child(3n + 3) { border-left: 1px solid var(--line); }
.g:nth-last-child(-n + 3) { border-bottom: 0; padding-bottom: 0; }
.g dt { font: 700 14px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lake); }
.g dd { margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.g .v { display: block; margin-top: 8px; font: 400 clamp(28px, 2.6vw, 38px)/1.08 var(--display); letter-spacing: -.01em; color: var(--ink); }
.g .v.sm { font-size: clamp(24px, 2.1vw, 30px); }
.g .n { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.g .src { margin-top: auto; padding-top: 10px; }
.g a.src { padding-block: 12px 12px; margin-block: -2px -12px; }
.drive-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.drive-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.drive-rows li:first-child { border-top: 0; padding-top: 0; }
.drive-rows b { font: 400 26px/1 var(--display); color: var(--ink); white-space: nowrap; }
.drive-rows b small { font: 500 14px var(--body); color: var(--ink-soft); }

/* ---------- Reviews ---------- */
.lp-reviews .lp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 32px; flex-wrap: wrap; max-width: none; }
.lr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 52px); margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 36px); }
.lr { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.lr blockquote { margin: 12px 0 0; font: italic 400 clamp(20px, 1.7vw, 24px)/1.4 var(--display); text-wrap: pretty; }
.lr .trans-label { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--lake); }
.lr .lr-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.lr figcaption { margin-top: auto; }
.lr .q-cite { margin-top: 14px; }

/* ---------- Atlas crop (the signature moment) ---------- */
.lp-atlas { background: var(--lake); color: var(--on-dark); padding: clamp(64px, 8vw, 112px) 0; overflow: hidden; }
.lp-atlas .eyebrow { margin: 0 0 16px; font: 500 14px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.lp-atlas h2 { margin: 0; font: 400 clamp(34px, 4.2vw, 58px)/1.06 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.lp-atlas h2 em { font-style: italic; }
.lp-atlas .lede { margin: 18px 0 0; font-size: 18px; color: var(--on-dark-soft); max-width: 34em; }
.atlas-crop-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.crop-side { min-width: 0; }
.crop-wrap { min-width: 0; width: 100%; max-width: 520px; justify-self: end; position: sticky; top: calc(var(--header-h) + 24px); }

.crop { position: relative; width: 100%; aspect-ratio: 106 / 150; background: color-mix(in srgb, var(--lake-deep) 45%, var(--lake)); outline: 1px solid var(--line-dark); }
.crop > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: block; }
.crop-limits { fill: color-mix(in srgb, var(--sun) 10%, transparent); stroke: color-mix(in srgb, var(--sun) 70%, transparent); stroke-width: 1.4; stroke-dasharray: 6 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.crop-lakes { fill: color-mix(in srgb, var(--mist) 16%, transparent); stroke: color-mix(in srgb, var(--mist) 42%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crop-lakes-minor { fill: color-mix(in srgb, var(--mist) 11%, transparent); stroke: none; }
.crop-grat { stroke: color-mix(in srgb, var(--mist) 9%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.crop-tick { position: absolute; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: color-mix(in srgb, var(--mist) 45%, transparent); pointer-events: none; white-space: nowrap; }
.crop-tick.lat { right: 6px; transform: translateY(-120%); }
.crop-tick.lon { top: 6px; transform: translateX(4px); }
.crop-railline { fill: none; stroke: var(--mist); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.crop-i4line { fill: none; stroke: var(--citrus); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.crop-lake, .crop-rail, .crop-i4, .crop-pin, .crop-home, .crop-off { position: absolute; transform: translate(-50%, -50%); }
.crop-lake { font: italic 500 13px/1.2 var(--body); letter-spacing: .02em; color: var(--on-dark-soft); white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px var(--lake), 0 0 6px var(--lake), 0 0 10px var(--lake); }
.crop-rail { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--on-dark); background: color-mix(in srgb, var(--lake) 88%, transparent); padding: 3px 5px; white-space: nowrap; pointer-events: none; }
.crop-i4 { font: 500 13px/1 var(--mono); letter-spacing: .06em; background: var(--citrus); color: var(--ink); padding: 4px 6px; border-radius: 3px; pointer-events: none; }

.crop-pin { display: block; width: 44px; height: 44px; text-decoration: none; color: var(--on-dark); }
.crop-pin .dot { position: absolute; inset: 16px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 3px var(--lake); transition: background .3s var(--ease); }
.crop-pin.is-downtown .dot { border-radius: 0; inset: 17px; background: transparent; box-shadow: none; border: 1.5px solid var(--on-dark); }
.crop-pin .lbl { position: absolute; top: 50%; left: 33px; transform: translateY(-50%); font: 500 13px/1.15 var(--mono); letter-spacing: .01em; white-space: nowrap; background: color-mix(in srgb, var(--lake) 92%, transparent); padding: 3px 5px; border-radius: 3px; }
.crop-pin .nm { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mist) 40%, transparent); text-underline-offset: 3px; }
.crop-pin.l .lbl { left: auto; right: 33px; }
.crop-pin .crop-min { display: block; margin-top: 3px; color: var(--on-dark-soft); }
.crop-pin:hover .dot, .crop-pin:focus-visible .dot { background: var(--citrus); }
.crop-pin:hover .nm { text-decoration-color: var(--citrus); }

.crop-home { width: 44px; height: 44px; pointer-events: none; }
.crop-home .dot { position: absolute; inset: 14px; border-radius: 50%; background: var(--citrus); box-shadow: 0 0 0 3px var(--lake); }
.crop-home .ring { position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid var(--citrus); animation: halo 2.6s var(--ease) 3; }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .3; } }
.crop-home .lbl { position: absolute; top: 50%; right: 34px; transform: translateY(-50%); font: italic 400 clamp(22px, 2vw, 28px)/1 var(--display); color: var(--on-dark); white-space: nowrap; background: color-mix(in srgb, var(--lake) 72%, transparent); padding: 3px 6px 5px; }
.crop-home .lbl small { display: none; }

.crop-off { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.2 var(--mono); color: var(--on-dark); background: var(--lake-deep); border: 1px solid var(--line-dark); padding: 5px 8px 5px 6px; white-space: nowrap; pointer-events: none; }
.crop-off svg { display: block; width: 16px; height: 16px; flex: none; color: var(--citrus); }
.crop-off b { font-weight: 500; color: var(--citrus); margin-left: 6px; }
.crop-off-mk { transform: translate(-4%, -50%); margin-top: -8px; }
.crop-off-mco { transform: translate(-50%, -50%); margin-left: 8px; }   /* F5: clear of the Downtown label */
.crop-scale { position: absolute; right: 4%; top: 11%; height: 8px; border: 1.5px solid var(--on-dark-soft); border-top: 0; pointer-events: none; }
.crop-scale span { position: absolute; right: 0; bottom: 14px; font: 500 13px/1 var(--mono); color: var(--on-dark-soft); white-space: nowrap; }
.crop-north { position: absolute; right: 3.5%; top: 2.6%; font: 500 13px/1 var(--mono); color: var(--on-dark-soft); padding-top: 14px; }
.crop-north::before { content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 9px solid var(--on-dark-soft); border-top: 0; }
.crop-credit { margin: 10px 0 0; font-size: 14px; color: var(--on-dark-soft); }
.crop-credit a { color: inherit; text-underline-offset: 3px; padding-block: 12px; }

.nb-list { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; border-top: 1px solid var(--line-dark); }
.nb-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; }
.nb-list .nm { font: 400 clamp(22px, 2vw, 27px)/1.15 var(--display); }
.nb-list .meta { grid-column: 1; font-size: 14px; color: var(--on-dark-soft); }
.nb-list svg { grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; color: var(--citrus); transition: transform .3s var(--ease); }
.nb-list a:hover .nm { text-decoration: underline; text-decoration-color: var(--citrus); text-underline-offset: 5px; }
.nb-list a:hover svg { transform: translateX(3px); }
.lakes-note { margin-top: clamp(28px, 3.4vw, 44px); }
.lakes-note h3 { margin: 0 0 8px; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.lakes-note p { margin: 0; color: var(--on-dark); font-size: 16px; line-height: 1.6; }
.lake-sizes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.lake-sizes li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-dark); font-size: 15px; color: var(--on-dark-soft); }
.lake-sizes b { font: 400 22px/1 var(--display); color: var(--on-dark); white-space: nowrap; }
.lake-sizes b small { font: 500 14px var(--body); color: var(--on-dark-soft); }
.legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--on-dark-soft); }
.legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.legend svg { width: 28px; height: 12px; }

/* ---------- Two column text sections ---------- */
.lp-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.lp-cols > header { position: sticky; top: calc(var(--header-h) + 36px); }
.lp-cols > header .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 18px; }

.checks { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: c; }
.checks li { position: relative; padding: 18px 0 18px 54px; border-top: 1px solid var(--line); counter-increment: c; }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li::before { content: counter(c); position: absolute; left: 0; top: 14px; font: italic 400 30px/1 var(--display); color: var(--lake); }
.checks h3 { margin: 0; font: 600 clamp(18px, 1.5vw, 20px)/1.35 var(--body); }
.checks p { margin: 6px 0 0; color: var(--ink-soft); }
.checks a { color: var(--lake); text-underline-offset: 3px; padding-block: 12px; }

.lp-band { margin-top: clamp(40px, 5vw, 72px); aspect-ratio: 21 / 9; overflow: hidden; background: color-mix(in srgb, var(--lake) 18%, var(--mist)); }
.lp-band img { width: 100%; height: 100%; object-fit: cover; }

.selling-sec { background: var(--paper); }
.sell-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sell-stats div { padding: 16px 12px 14px 0; min-width: 0; }
.sell-stats div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.sell-stats b { display: block; font: 400 clamp(30px, 2.8vw, 40px)/1 var(--display); }
.sell-stats span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }

/* ---------- Neighborhoods ---------- */
.nbh { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 5vw, 72px); counter-reset: n; }
.nbh li { position: relative; padding: 22px 0 24px 58px; border-top: 1px solid var(--line); counter-increment: n; min-width: 0; }
.nbh li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 22px; font: italic 400 24px/1.1 var(--display); color: var(--lake); }
.nbh h3 { margin: 0; font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--display); }
.nbh .kind { display: block; margin-top: 6px; font: 700 14px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--lake); }
.nbh p { margin: 8px 0 0; color: var(--ink-soft); }
.nbh-foot { margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 52em; }

/* ---------- Prices ---------- */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 4vw, 48px); }
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table caption { text-align: left; padding-bottom: 12px; font: 700 14px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lake); }
.stat-table th, .stat-table td { padding: 14px 0; border-top: 1px solid var(--line); vertical-align: baseline; text-align: left; }
.stat-table tr:last-child th, .stat-table tr:last-child td { border-bottom: 1px solid var(--line); }
.stat-table th { font-weight: 500; font-size: 16px; color: var(--ink-soft); padding-right: 16px; }
.stat-table td { text-align: right; }
.stat-table td b { display: block; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--display); color: var(--ink); white-space: nowrap; }
.stat-table td span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.stat-src { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.stat-src a { color: inherit; text-underline-offset: 3px; padding-block: 12px; }
.price-note { margin: 24px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 52em; }
.listings-cta { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; padding: clamp(20px, 2.6vw, 30px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.listings-cta h3 { margin: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--display); }
.listings-cta p { margin: 8px 0 0; color: var(--ink-soft); }
.listings-cta .firm { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: center; }

/* ---------- Getting around and schools ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.panel h2 { margin-bottom: 0; }
.drive-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.drive-table th, .drive-table td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.drive-table tr:last-child > * { border-bottom: 1px solid var(--line); }
.drive-table th { font-weight: 600; font-size: 16px; padding-right: 12px; }
.drive-table td { text-align: right; color: var(--ink-soft); font-size: 15px; white-space: nowrap; }
.drive-table td b { font: 400 28px/1 var(--display); color: var(--ink); }
.drive-table thead th { font: 700 14px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lake); border-top: 0; padding-top: 0; }
.drive-table thead th:last-child, .drive-table thead th:nth-child(2) { text-align: right; }
.facts-list { list-style: none; margin: 18px 0 0; padding: 0; }
.facts-list li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.facts-list li:last-child { border-bottom: 1px solid var(--line); }
.facts-list strong { color: var(--ink); font-weight: 600; }
.school-box { background: var(--paper); padding: clamp(22px, 3vw, 36px); }
.school-box .v { display: block; margin: 10px 0 4px; font: 400 clamp(26px, 2.4vw, 32px)/1.15 var(--display); }

/* ---------- Pros and cons ---------- */
.pc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(28px, 4vw, 48px); }
.pc h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--lake); }
.pc h3 svg { width: 26px; height: 26px; flex: none; }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.pc li:last-child { border-bottom: 1px solid var(--line); }
.pc li strong { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 2px; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 16px; align-items: center; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 clamp(17px, 1.4vw, 19px)/1.4 var(--body); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--lake); color: var(--lake); font: 400 20px/1 var(--body); transition: transform .3s var(--ease); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .a { padding: 0 46px 22px 0; color: var(--ink-soft); max-width: 46em; }
.faq-item .a p { margin: 0 0 12px; }
.faq-item .a p:last-child { margin-bottom: 0; }
.faq-item .a a { color: var(--lake); text-underline-offset: 3px; padding-block: 12px; }

/* ---------- Links ---------- */
.lp-links { padding: clamp(56px, 7vw, 96px) 0; }
.link-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); }
.link-groups h3 { margin: 0 0 6px; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--lake); }
.link-groups ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.link-groups a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.link-groups a small { font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.link-groups a:hover span { text-decoration: underline; text-decoration-color: var(--citrus); text-underline-offset: 4px; }
.sources-line { margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 70em; }

/* Contact band tweaks for location pages */
.contact .twin { color: var(--on-dark); margin-top: 18px; }

/* ---------- Review helpers (?review=1) ---------- */
html.show-review [data-confirm] { outline: 2px dashed #C2410C; outline-offset: 3px; }
html.show-review [data-review="broker"] { outline: 2px dashed #7C3AED; outline-offset: 3px; }
html.show-review [data-review="attorney"] { outline: 2px solid #B91C1C; outline-offset: 3px; }
html.show-review .flash { animation: flash 1.4s ease 2; }
@keyframes flash { 50% { background: #FDE68A; } }
.rv-panel {
  position: fixed; z-index: 60; right: 12px; top: calc(var(--header-h) + 12px); width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--header-h) - 150px); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(15, 42, 51, .5); font-size: 14px;
}
.rv-panel .rv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.rv-panel button { font: 600 14px/1 var(--body); min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--mist-2); cursor: pointer; }
.rv-panel .rv-body { overflow: auto; padding: 6px 14px 12px; }
.rv-panel.is-closed .rv-body { display: none; }
.rv-panel h4 { margin: 12px 0 4px; font: 700 14px/1.3 var(--body); }
.rv-panel h4 i { display: inline-block; width: 18px; height: 0; border-top: 2px dashed currentColor; vertical-align: middle; margin-right: 8px; }
.rv-panel ol { margin: 0; padding-left: 20px; }
.rv-panel li { margin: 2px 0; }
.rv-panel li button { display: block; width: 100%; text-align: left; font-weight: 500; line-height: 1.35; padding: 8px 6px; border: 0; background: none; min-height: 44px; }
.rv-panel li button b { font-weight: 700; }
.rv-panel li button:hover { background: var(--mist); }
@media (min-width: 1200px) {
  /* F6: the map leads on wide screens */
  .atlas-crop-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .crop-wrap { max-width: 680px; }
}
@media (max-width: 900px) {
  .crop-tick, .crop-grat { display: none; }
  /* F11: the hero photo and the street band meet the next section, no leftover strip */
  .lp-hero { padding-bottom: 0; }
  .ends-with-band { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .sec-num { display: none; }   /* F7: no section numbers on phones */
}
@media (max-width: 399px) {
  /* F5: corner furniture collides with labels on small phones */
  .crop-scale, .crop-north { display: none; }
}
@media (max-width: 360px) {
  .crop-lake.is-maitland { display: none; }   /* listed under the map with its size */
}
@media (max-width: 900px) {
  .rv-panel { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); max-height: 55dvh; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g:nth-child(n) { padding-left: clamp(16px, 2vw, 28px); border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: clamp(18px, 2.2vw, 26px); }
  .g:nth-child(2n + 1) { padding-left: 0; }
  .g:nth-child(2n) { border-left: 1px solid var(--line); }
  .g:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0; }
  .link-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero-grid, .glance-top, .atlas-crop-grid, .lp-cols, .price-grid, .pair, .pc { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-media { aspect-ratio: 3 / 2; }
  .lp-cols > header { position: static; }
  .crop-wrap { position: static; }
  .crop-side { display: contents; }
  .atlas-crop-grid > .crop-wrap { order: 2; }
  .crop-side > .crop-intro { order: 1; }
  .crop-side > .nb-list, .crop-side > .lakes-note { order: 3; }
  .nbh { grid-template-columns: minmax(0, 1fr); }
  .lp-band { aspect-ratio: 3 / 2; }
}
@media (max-width: 700px) {
  .lp-hero { padding-top: 6px; }
  .lp-topline { margin-bottom: 2px; border-bottom: 0; justify-content: flex-end; }
  .lp-topline .crumbs { display: none; }
  .lp-eyebrow { margin-bottom: 10px; letter-spacing: .05em; }
  .h1-place { font-size: clamp(46px, 13.4vw, 64px); }
  .lp-h1.ru .h1-place { font-size: clamp(40px, 11.6vw, 56px); }
  .h1-role { margin-top: 10px; font-size: 17px; }
  .lp-h1.ru .h1-alt { margin-top: 8px; font-size: 16px; }
  .lp-who { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; margin-top: 18px; }
  .lp-portrait { width: 64px; height: 64px; }
  .lp-who p { font-size: 16px; }
  .lp-proof { margin-top: 10px; }
  .lp-cta { margin-top: 16px; }
  .lp-hero-media { margin-inline: calc(-1 * var(--gutter)); }
  .glance-sheet { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .glance-grid { grid-template-columns: minmax(0, 1fr); }
  .g:nth-child(n) { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .g:last-child { border-bottom: 0; padding-bottom: 0; }
  .lr-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .lr { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .crop { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); outline: 0; }
  .crop-pin .lbl, .crop-off, .crop-rail, .crop-scale span, .crop-north { font-family: var(--body); font-weight: 600; letter-spacing: 0; }
  .crop-home .lbl { font-size: 22px; }
  .lake-sizes { grid-template-columns: minmax(0, 1fr); }
  .sell-stats { grid-template-columns: minmax(0, 1fr); }
  .sell-stats div, .sell-stats div + div { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .sell-stats div:first-child { border-top: 0; }
  .sell-stats span { margin-top: 0; text-align: right; }
  .listings-cta { grid-template-columns: minmax(0, 1fr); }
  .listings-cta .btn { width: 100%; }
  .link-groups { grid-template-columns: minmax(0, 1fr); }
  .faq-item .a { padding-right: 0; }
  .nb-list { margin-top: 0; }
  /* Drive table: one row per place, minutes over distance */
  .drive-table thead { display: none; }
  .drive-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  .drive-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .drive-table th, .drive-table td, .drive-table tr:last-child > * { padding: 0; border: 0; }
  .drive-table th[scope="row"] { grid-row: 1 / span 2; }
  .drive-table td { grid-column: 2; }
  .drive-table td + td { font-size: 14px; }
  .nbh li { padding-left: 46px; }
  .checks li { padding-left: 44px; }
}
@media (max-width: 380px) {
  .lp-cta .row { gap: 8px; }
  .lp-cta .row .btn { padding-inline: 12px; gap: 8px; }
  .lp-eyebrow { letter-spacing: .02em; }
  .lp-eyebrow .wide-only { display: none; }
  .drive-table td b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .crop-home .ring { animation: none; }
}

/* Jim 2026-11-08: on tablets and desktop the hero photo reads as a print, like Zoya's portrait on the homepage
   (white border, soft shadow, slight tilt); phones keep the full bleed photo */
@media (min-width: 701px) {
  .lp-hero-media { border: 12px solid var(--paper); border-bottom-width: 16px; box-shadow: 0 2px 4px rgba(15, 42, 51, .08), 0 40px 60px -34px rgba(15, 42, 51, .55); }
}
@media (min-width: 901px) {
  .lp-hero-media { transform: rotate(-1.6deg); }
}