/* Engine styles for every customer site. Reads only the tokens in tokens.css.
   Layout, spacing, radius, and type scale are engine. Colors and fonts come from the site theme. */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:15px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--c-link);text-decoration:none;text-underline-offset:3px;transition:color 140ms var(--ease)}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--c-ink);text-wrap:balance}
.num,.stat b,.price{font-variant-numeric:tabular-nums}
button{font-family:inherit}
/* Skip link (audit A4): off screen until a keyboard user tabs to it, the first stop on every page. A mouse never shows it. */
.skip{position:absolute;left:12px;top:12px;z-index:100;padding:12px 18px;border-radius:var(--r-control);background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--c-deep) 30%,transparent);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}

/* Type scale from the spec. Mobile first, tablet at 768, desktop at 1200. */
.t-hero{font-size:var(--t-hero);font-weight:800;line-height:.92;letter-spacing:-.04em}
.t-display{font-size:var(--t-display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.t-h2,h2{font-size:var(--t-h2);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.t-h3,h3{font-size:16px;font-weight:700;line-height:1.3}
.t-body-lg{font-size:17px;line-height:1.7}
.t-small{font-size:12px;font-weight:500;color:var(--c-ink-2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-link)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--c-accent)}
@media (min-width:768px){.t-h3,h3{font-size:17px}}
@media (min-width:1200px){.t-h3,h3{font-size:18px}}

/* Page shell: gutters 20 / 40 / 56, content max 1168, section gaps 56 / 72 / 96. */
.wrap{max-width:1168px;margin:0 auto;padding-inline:20px}
section.block{padding-block:56px}
section.block.alt{background:var(--c-muted)}
section.block.tint{background:var(--c-tint)}
section.block .eyebrow{margin-bottom:12px}
section.block h2{margin-bottom:24px}
.bleed{width:100%}
@media (min-width:768px){.wrap{padding-inline:40px}section.block{padding-block:72px}}
@media (min-width:1200px){.wrap{padding-inline:56px}section.block{padding-block:96px}}

/* Buttons: 12px display caps, heights 48 / 52 / 56 / 64, radius control. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-control);font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background 140ms var(--ease),color 140ms var(--ease),border-color 140ms var(--ease)}
.btn:hover{text-decoration:none}
.btn.solid{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.outline{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn.outline:hover{border-color:var(--c-ink)}
.btn.outline.on-dark{color:#fff;border-color:rgba(255,255,255,.45)}
.btn.cta{background:var(--c-cta);color:var(--c-cta-ink);border-color:var(--c-cta)}
.btn.tall{min-height:56px;padding:0 28px}
.btn.wide{width:100%}
@media (min-width:768px){.btn{min-height:52px}}
@media (min-width:1200px){.btn{min-height:56px;padding:0 26px}}

/* Header (D53): one treatment on every page. Transparent over the hero band every page opens with, then an opaque compact bar
   once the hero has scrolled past. No page kind has its own header variant. */
html{scroll-padding-top:72px}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;height:72px;display:flex;align-items:center}
.site-header .wrap{display:flex;align-items:center;gap:20px;width:100%}
.site-header .logo{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--c-ink);text-decoration:none}
.site-header .logo img{height:32px;width:auto}
.site-header .logo .white{display:none}
.site-header nav.main{display:none;gap:22px;margin-left:auto}
.site-header nav.main>a,.site-header .dd-btn{font-size:13px;font-weight:600;color:var(--c-ink);text-decoration:none}
.site-header .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.site-header .signin{font-size:13px;font-weight:600;color:var(--c-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
.site-header .menu{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.site-header .phone{display:none}
body.has-hero .site-header{color:#fff}
body.has-hero .site-header .logo,body.has-hero .site-header nav.main>a,body.has-hero .site-header .dd-btn,body.has-hero .site-header .signin,body.has-hero .site-header .menu{color:#fff}
body.has-hero .site-header .logo .white{display:block}
body.has-hero .site-header .logo .dark{display:none}
.site-header.compact{position:fixed;background:var(--c-bg);border-bottom:1px solid var(--c-line);height:60px;color:var(--c-ink)}
body.has-hero .site-header.compact .logo,body.has-hero .site-header.compact nav.main>a,body.has-hero .site-header.compact .dd-btn,body.has-hero .site-header.compact .signin,body.has-hero .site-header.compact .menu{color:var(--c-ink)}
body.has-hero .site-header.compact .logo .white{display:none}
body.has-hero .site-header.compact .logo .dark{display:block}
@media (min-width:1200px){.site-header{height:80px}.site-header nav.main{display:flex}.site-header .menu{display:none}.site-header .phone{display:inline-flex;min-height:44px;padding:0 18px;border:1px solid var(--c-brand);border-radius:var(--r-control);font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--c-brand);color:var(--c-brand-ink);text-decoration:none;align-items:center}body.has-hero .site-header .phone{background:#fff;color:var(--c-deep);border-color:#fff}body.has-hero .site-header .phone:hover{background:rgba(255,255,255,.92)}body.has-hero .site-header.compact .phone{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}}

/* Mobile menu sheet */
.menu-sheet{position:fixed;inset:0;z-index:40;background:var(--c-bg);padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column;gap:6px}
.menu-sheet.open{display:flex}
.menu-sheet a{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--c-ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--c-line)}
.menu-sheet .close{align-self:flex-end;background:none;border:0;font:600 14px var(--font-body);color:var(--c-ink);min-height:44px;min-width:44px;cursor:pointer}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--c-ink-2);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:inherit}
.hero .crumbs{color:rgba(255,255,255,.88)}

/* Hero. Restyled fully in step 2; shell keeps the heights and the protection gradient from the spec. */
.hero{position:relative;min-height:460px;display:flex;align-items:center;background:var(--c-deep) center/cover no-repeat;color:#fff;isolation:isolate}
/* One hero wash on every page (Truman, 2026-10-01): the home page's fade, dark at the top under the menu, light in the middle, deep at
   the bottom. Heroes whose text sits mid-photo (communities, content pages, the short heroes) add a light even wash on phones and a
   scrim from the left behind the text column on wider screens, so white text reads on any photo an agent uploads. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
.hero:not(.home-hero)::before{background:linear-gradient(color-mix(in srgb,var(--c-deep) 30%,transparent),color-mix(in srgb,var(--c-deep) 30%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
@media (min-width:768px){.hero:not(.home-hero)::before{background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 72%,transparent) 0%,color-mix(in srgb,var(--c-deep) 45%,transparent) 40%,color-mix(in srgb,var(--c-deep) 0%,transparent) 72%),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,color-mix(in srgb,var(--c-deep) 10%,transparent) 30%,color-mix(in srgb,var(--c-deep) 35%,transparent) 55%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}}
.hero h1,.hero .sub,.hero .crumbs{text-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 45%,transparent),0 2px 28px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.hero .wrap{width:100%;padding-top:96px;padding-bottom:48px}
.hero h1{color:#fff;font-size:var(--t-hero);font-weight:800;line-height:.92;letter-spacing:-.04em;margin:10px 0 12px}
.hero .sub{font-size:15px;color:rgba(255,255,255,.94);max-width:640px;margin:0 0 24px;text-wrap:balance}
.hero .sub-brand{display:inline-block;margin-bottom:18px}
.hero .sub-brand img{height:40px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(7,28,43,.45))}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:768px){.hero{min-height:540px}.hero .wrap{padding-top:112px}.hero .sub{font-size:18px}.hero .sub-brand img{height:48px}}
@media (min-width:1200px){.hero{min-height:620px}.hero .wrap{padding-top:120px}.hero .sub{font-size:20px;max-width:720px}.hero .sub-brand img{height:56px}}

/* Stats row. Four equal cells with hairlines, labels on one line, freshness on its own row. */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding:24px 0 16px;border-bottom:1px solid var(--c-line)}
.stats .stat{display:grid;gap:6px;min-width:0}
.stats .stat b{font-family:var(--font-display);font-size:var(--t-stat);font-weight:800;line-height:1;color:var(--c-ink);letter-spacing:-.02em;white-space:nowrap}
.stats .stat span{font-size:12px;color:var(--c-ink-2);white-space:nowrap}
.stats .fresh{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c-ink-2);padding-top:4px}
.stats .fresh::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c-live)}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 0}.stats .stat{padding:0 24px;border-left:1px solid var(--c-line)}.stats .stat:first-child{padding-left:0;border-left:0}.stats .stat span{font-size:13px}}
@media (min-width:1200px){.stats .stat b{font-size:34px}}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);background:var(--c-chip);color:var(--c-ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.chip small{font-weight:500;color:var(--c-ink-2)}
.chip:hover{text-decoration:none;background:var(--c-line)}
@media (min-width:768px){.chips{flex-wrap:wrap;overflow:visible}.chip{min-height:40px}}

/* Cards, generic until the listing card restyle in step 2 */
.card{display:block;text-decoration:none;color:inherit;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden}
.card .photo{aspect-ratio:4/3;background:var(--c-muted) center/cover;position:relative;overflow:hidden}
.card .body{padding:16px 18px 18px;display:grid;gap:6px}
.card .body b{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.card .body span{font-size:14px;color:var(--c-ink-2);line-height:1.5}
.card .body small{font-size:12px;color:var(--c-ink-2)}
.card:hover{text-decoration:none}
.badge{position:absolute;top:10px;left:10px;background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-chip)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 24px}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail .card{scroll-snap-align:start}

/* Content blocks, generic until step 3 */
/* Quick facts strip: a quiet row under the chips, same language as the stats row. No boxes, no icons. */
.facts-strip{list-style:none;padding:0 0 24px;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;border-bottom:1px solid var(--c-line)}
.facts-strip li{display:block;min-width:0}
.facts-strip .ficon{display:none}
.facts-strip div{display:grid;gap:4px;min-width:0}
.facts-strip span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);font-family:var(--font-display);font-weight:700}
.facts-strip b{font-size:15px;font-weight:600;line-height:1.3;text-wrap:balance} /* long values wrap inside their own column, never into the next (2026-10-04) */
@media (min-width:768px){.facts-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.facts-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:28px}.facts-strip li{padding:0 20px;border-left:1px solid var(--c-line)}.facts-strip li:first-child{padding-left:0;border-left:0}}
.facts{padding-block:8px}
.market{background:var(--c-tint)}
.market .wrap{display:grid;gap:24px}
.market .video{display:grid;place-items:center;aspect-ratio:16/9;background:var(--c-deep);color:#fff;border-radius:var(--r-media);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:1200px){.market .wrap{grid-template-columns:1.5fr 1fr;gap:64px;align-items:center}}
.subs .grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.editorial{max-width:68ch}
.editorial p{font-size:17px;line-height:1.7;margin:0 0 20px;color:var(--c-ink)}
.editorial p a{color:var(--c-link);text-decoration:underline;text-underline-offset:3px}
/* Panel card pattern: photo bleeds to the panel edge, no border, muted fill, rounded as one object.
   Used by the feature block now and by the listing detail village card later. */
.panel-card{display:grid;background:var(--c-muted);border-radius:var(--r-panel);overflow:hidden}
.panel-card .photo{aspect-ratio:16/10;background:var(--c-muted) center/cover;min-height:100%}
/* The club and other feature panels sit on a raised card a shade off their section, so all four corners show (Truman, 2026-10-04). */
.feature .panel-card{background:color-mix(in srgb,var(--c-ink) 9%,var(--sec,var(--c-bg)));border-radius:calc(var(--r-panel) * 2)}
.panel-card .text{padding:28px 24px 30px}
.panel-card .text h2{margin-bottom:12px}
.panel-card .text p{font-size:17px;line-height:1.65;color:var(--c-ink-2);margin:0 0 18px;max-width:46ch}
.panel-card .text .tlink{font-weight:600}
@media (min-width:768px){.panel-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.panel-card .photo{aspect-ratio:auto;height:100%;min-height:320px}.panel-card .text{padding:36px 40px}}
@media (min-width:1200px){.panel-card{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}.panel-card .text{padding:44px 48px}}
.faq{max-width:68ch}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:300;color:var(--c-ink-2)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 20px;color:var(--c-ink-2);font-size:15px;line-height:1.6;max-width:68ch}
.agent .wrap{display:grid;gap:20px}
.agent .avatar{width:120px;height:120px;border-radius:var(--r-panel);overflow:hidden;filter:grayscale(1)}
.agent .avatar img{width:100%;height:100%;object-fit:cover}
.agent .actions{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:768px){.agent .wrap{grid-template-columns:auto 1fr;align-items:center;gap:32px}}
.video-frame{aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--c-deep)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-block .caption{color:var(--c-ink-2);font-size:12px;margin-top:10px}

/* Forms */
.lead-form{display:grid;gap:30px;max-width:560px}

/* Underlined fields with a floating label. Colors come only from the theme tokens, so every site brands its own forms. */
.field{position:relative;display:block;padding-top:20px}
.field input,.field textarea{display:block;width:100%;margin:0;padding:8px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body);outline:none;box-shadow:none;appearance:none;transition:border-color 200ms var(--ease)}
.field textarea{resize:vertical;min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:transparent;transition:color 200ms var(--ease)}
.field :is(input,textarea):focus::placeholder{color:var(--c-ink-2);opacity:.7}
.field .fl{position:absolute;left:0;top:28px;font-size:17px;line-height:1.45;color:var(--c-ink-2);pointer-events:none;transform-origin:left top;transition:transform 220ms var(--ease),color 220ms var(--ease),letter-spacing 220ms var(--ease)}
.field :is(input,textarea):is(:focus,:not(:placeholder-shown))+.fl{transform:translateY(-26px) scale(.7);letter-spacing:.02em}
.field :is(input,textarea):focus+.fl{color:var(--c-link)}
.field:hover :is(input,textarea){border-bottom-color:var(--c-ink-2)}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-cta);transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field :is(input,textarea):-webkit-autofill{-webkit-text-fill-color:var(--c-ink);transition:background-color 99999s 0s}
.field :is(input,textarea):user-invalid{border-bottom-color:#c0392b}
.lead-form .tcpa{font-size:11px;color:var(--c-ink-2);line-height:1.55;margin:0}
.sms-ok{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--c-ink-2);line-height:1.55;cursor:pointer}
.sms-ok input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--c-cta);cursor:pointer}
.tcpa a{color:inherit;text-decoration:underline}
.lead-form .ts:empty{display:none}
.lead-form .ts:not(:empty){margin:-6px 0 4px;width:100%;min-width:0;border-radius:var(--r-control);overflow:hidden}
.lead-form .ts iframe{width:100%!important;max-width:100%!important}
.lead-form .hp,.alert-finish-form .hp,.gate-form .hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-form button{justify-self:start}

/* Search page and results, generic until step 5 */
.results .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--c-line);color:var(--c-ink-2);font-size:13px}
.results .sort select{font:inherit;min-height:44px;padding:0 10px;border:1px solid var(--c-line);border-radius:var(--r-control);margin-left:6px;background:var(--c-surface);color:var(--c-ink)}
.results .grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.results .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.results .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:32px;font-weight:600;font-size:14px}
.pager a{min-height:44px;display:inline-flex;align-items:center}
.pager a:last-child{justify-self:end}
.gate{max-width:560px}

/* Footer */
.site-footer{background:var(--c-deep);color:rgba(255,255,255,.72);padding-block:56px calc(32px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:1.6}
.site-footer a{color:#fff}
.site-footer .fcols{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:40px}
.site-footer .office{grid-column:1/-1;display:grid;gap:12px;justify-items:start;align-content:start}
.site-footer .office p{margin:0}
.site-footer .office strong{color:#fff;font-weight:600}
.site-footer .logo{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;margin-bottom:4px}
.site-footer .logo img{height:34px;width:auto;display:block}
.site-footer .fphone{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.site-footer .lic{font-size:12px;color:rgba(255,255,255,.55)}
.site-footer .fcol{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .fcol h2{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 6px;line-height:1.4}
.site-footer .fcol a{min-height:40px;display:inline-flex;align-items:center;color:rgba(255,255,255,.88);text-decoration:none}
.site-footer .fcol a:hover{color:#fff;text-decoration:underline}
.site-footer .fbase{display:flex;gap:14px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}
.site-footer .eho{flex:none;color:rgba(255,255,255,.7);display:inline-flex;margin-top:1px}
.site-footer .legal{margin:0;color:rgba(255,255,255,.55);font-size:12px;line-height:1.6;max-width:90ch}
.site-footer .legal p{margin:0 0 6px}.site-footer .legal p:last-child{margin:0}
.idx-mark{display:inline-flex;vertical-align:-3px;margin-right:6px;color:currentColor}
/* Platform credit (D28): mark and name in the site accent, muted until hover. */
.site-footer .powered{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--c-accent);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1;white-space:nowrap;transition:filter 200ms var(--ease)}
.site-footer .powered:hover,.site-footer .powered:focus-visible{filter:brightness(1.3);text-decoration:none}
.site-footer .powered svg{flex:none;margin-left:2px}
.site-footer .powered .pname{font-family:var(--pfont);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.site-footer .powered sup{font-family:var(--pmono);font-size:7px;font-weight:400;letter-spacing:.02em;vertical-align:5px;margin-left:2px;text-transform:none}
@media (max-width:767px){.site-footer .fbase{flex-wrap:wrap}.site-footer .legal{flex:1 1 0;min-width:0}.site-footer .powered{flex-basis:calc(100% - 36px);margin-left:36px}}
@media (min-width:768px){.site-footer{padding-top:72px}.site-footer .fcols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.site-footer .fcols{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px}.site-footer .office{grid-column:auto}}
@media (max-width:767px){body.has-sticky .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* Footer top tier (D138): a search launcher that is a link, not a field (Let's talk sits right above, and forms never touch),
   the live market line, and one call button. On-dark values are the footer's own, from white over --c-deep, like .photo-band. */
.site-footer{--f-ink:#fff;--f-ink-2:color-mix(in srgb,#fff 72%,transparent);--f-ink-3:color-mix(in srgb,#fff 52%,transparent);--f-line:color-mix(in srgb,#fff 12%,transparent);--f-fill:color-mix(in srgb,#fff 6%,transparent)}
.site-footer .ftop{display:grid;gap:32px;padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--f-line)}
.site-footer .ftitle{margin:0 0 16px;font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--f-ink);text-wrap:balance}
.site-footer .flaunch{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;min-height:60px;padding:0 12px 0 20px;border-radius:999px;background:var(--f-fill);border:1px solid color-mix(in srgb,#fff 18%,transparent);color:var(--f-ink-2);font:500 16px/1.3 var(--font-body);text-decoration:none;transition:border-color 160ms var(--ease),background 160ms var(--ease),color 160ms var(--ease)}
.site-footer .flaunch svg{flex:none;color:var(--c-accent)}
.site-footer .flaunch span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-footer .flaunch:hover{border-color:var(--c-accent);background:color-mix(in srgb,#fff 10%,transparent);color:var(--f-ink);text-decoration:none}
.site-footer .flaunch:focus-visible,.site-footer .fcol a:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.site-footer .fkbd{display:none;flex:none;place-items:center;min-width:30px;height:30px;padding:0 8px;border:1px solid color-mix(in srgb,#fff 22%,transparent);border-radius:var(--r-control);font:600 13px/1 var(--font-body);color:var(--f-ink-3)}
@media (hover:hover) and (min-width:1024px){.site-footer .fkbd{display:inline-grid}}
.site-footer .fmarket{display:flex;align-items:baseline;gap:10px;margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--f-ink-2)}
.site-footer .fmarket .dot{flex:none;position:relative;top:-1px;width:7px;height:7px;border-radius:50%;background:var(--c-live);box-shadow:0 0 0 0 color-mix(in srgb,var(--c-live) 60%,transparent)}
.site-footer .fstack{display:grid;gap:24px;align-content:start}

@media (min-width:1200px){.site-footer .fcols{grid-template-columns:minmax(220px,1.2fr);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:36px}}
@media (min-width:768px) and (max-width:1199px){.site-footer .fcols{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (max-width:767px){.site-footer .ftop{padding-bottom:36px;margin-bottom:36px}.site-footer .flaunch{min-height:56px}.site-footer .fcol a{min-height:36px;line-height:1.35}}
@media (prefers-reduced-motion:no-preference){.site-footer .fmarket .dot{animation:f-live 2.6s var(--ease) infinite}}
@keyframes f-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-live) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.site-footer .flaunch,.site-footer .powered{transition:none}}

/* The search sheet the launcher opens: the hero search bar's look, one field and the button. */
dialog.sheet.search-sheet h2{margin:4px 0 18px;padding-right:40px;font-size:clamp(22px,2.2vw,26px)}
dialog.search-sheet .ss-form input::placeholder{color:color-mix(in srgb,var(--c-ink-2) 60%,transparent)}
dialog.search-sheet .ss-form{grid-template-columns:minmax(0,1fr) auto;margin:0;box-shadow:none;padding:0;background:transparent;max-width:none}
dialog.search-sheet .ss-form label{background:var(--c-muted);box-shadow:inset 0 0 0 1px var(--c-line)}
dialog.search-sheet .ss-form .btn{padding:0 18px}
dialog.search-sheet .ss-all{margin:16px 0 0;font-size:14px}
dialog.search-sheet .ss-all a{color:var(--c-link)}
@media (min-width:768px){dialog.sheet.search-sheet{width:min(600px,100%)}}
@media (prefers-reduced-motion:reduce){dialog.sheet.search-sheet[open]{animation:none}}

/* Mobile sticky bar: Text outline, Call solid, 48px */
.sticky-bar{display:none}
@media (max-width:767px){html:has(body.has-sticky){scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.sticky-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--c-surface);border-top:1px solid var(--c-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}.sticky-bar .btn{min-height:48px}}

/* Step 2: listing card, results region, sidebar */
.lcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:transparent} /* minmax: a long price line wraps instead of widening the card past its column */
.lphoto{display:block;position:relative;aspect-ratio:3/2;max-width:100%;border-radius:var(--r-media);background:var(--c-muted);overflow:hidden;text-decoration:none}
.lphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lphoto.short{aspect-ratio:16/10}
.lsoon,.lx-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--c-ink-2);font-size:13px;font-weight:500;letter-spacing:.01em;background:var(--c-muted)}
.lsoon{position:absolute;inset:0}.lsoon~.ldots,.lsoon~.lcount{display:none}
.lx-soon{height:clamp(220px,40vh,520px)}
@media (min-width:1200px) and (hover:hover){.lphoto img{transition:transform 560ms var(--ease)}.lcard:hover .lphoto img{transform:scale(1.04)}}
.ltag{position:absolute;top:12px;left:12px;background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:var(--r-chip)}
.ldots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.ldots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.ldots i.on{background:#fff}
.lcount{position:absolute;bottom:10px;right:12px;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lsave{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--r-control);background:color-mix(in srgb,var(--c-surface) 95%,transparent);color:var(--c-ink);display:grid;place-items:center;cursor:pointer}
.lbody{padding:14px 0 0;display:grid;gap:6px}
.lprice{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.lprice b{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.lprice span{font-size:12px;color:var(--c-ink-2);white-space:nowrap}
.lspecs{display:flex;align-items:center;font-size:14px;font-weight:600}
.lspecs span+span{margin-left:12px;padding-left:12px;border-left:1px solid var(--c-line);line-height:12px}
.laddr{font-size:15px;color:var(--c-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:10px;border-top:1px solid var(--c-line);min-width:0}
.lvillage{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-link);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lmls{font-size:11px;color:var(--c-ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.lmls i{font-style:normal;font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.08em;border:1px solid var(--c-line);padding:2px 4px;border-radius:2px}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 24px}
.lgrid.more{margin-top:48px}
.lgrid.more .lprice b,.lgrid.three .lprice b{font-size:22px}
@media (min-width:768px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.lgrid{gap:48px 32px}.lgrid.more,.lgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

.results-region{padding-block:8px 56px}
.toolbar{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-line);margin-bottom:24px;font-size:13px}
.toolbar .count{font-weight:600;color:var(--c-ink);white-space:nowrap}
.toolbar .count span{font-weight:400;color:var(--c-ink-2)}
.toolbar .views{display:flex;gap:4px;margin-left:auto}
.toolbar .views button{background:none;border:0;border-bottom:2px solid transparent;min-height:44px;padding:0 10px;font:600 13px var(--font-body);color:var(--c-ink-2);cursor:pointer}
.toolbar .views button.on{color:var(--c-ink);border-bottom-color:var(--c-ink)}
.toolbar .tools{display:flex;gap:4px}
.toolbar .tlink{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font-weight:600;color:var(--c-ink);text-decoration:none}
@media (max-width:767px){.toolbar .views button:not(:last-child){display:none}.toolbar .tools .tlink:last-child{display:none}}
.results-shell{display:grid;gap:40px}
.results-foot{display:grid;justify-items:center;gap:12px;margin-top:48px;text-align:center}
.results-foot p{margin:0;font-size:13px;color:var(--c-ink-2)}
.results-foot .progress{width:220px;height:2px;background:var(--c-line)}
.results-foot .progress i{display:block;height:100%;background:var(--c-brand)}
.results-foot .btn{min-width:320px;min-height:56px}
@media (max-width:767px){.results-foot .btn{width:100%;min-width:0}}
.results-side{display:none}
@media (min-width:1200px){.results-shell{grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}.results-side{display:grid;gap:24px;position:sticky;top:96px}}
.side-agent,.side-today{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px;box-shadow:0 1px 3px rgba(13,27,36,.06)}
.side-agent .sa-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.side-agent .sa-head .eyebrow{margin-bottom:4px}
.side-agent .sa-name{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink)}
.side-agent .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;filter:grayscale(1)}
.side-agent .avatar img{width:100%;height:100%;object-fit:cover}
.side-agent .statement{font-size:14.5px;line-height:1.6;margin:0 0 18px;color:var(--c-ink-2)}
.side-agent .actions{display:flex;gap:8px}
.side-agent .btn{flex:1;min-height:48px;padding:0 12px}
.side-today h3{margin-bottom:10px}
.side-today dl{margin:0;display:grid}
.side-today dl div{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--c-line);font-size:14px}
.side-today dt{color:var(--c-ink-2)}
.side-today dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.side-today dd a{font-weight:600}

/* Related communities as guide cards */
.related .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:8px}
.rcard{position:relative;display:flex;align-items:flex-end;min-height:150px;padding:16px;border-radius:var(--r-media);overflow:hidden;background:linear-gradient(160deg,var(--c-deep),var(--c-brand));color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.15}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,43,0) 30%,rgba(7,28,43,.8) 100%)}
.rcard{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px}
.rcard span{position:relative;z-index:1}
.rcard .rkind{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rcard .rgo{position:absolute;top:14px;right:16px;font-size:18px;opacity:.7;transition:transform 160ms var(--ease),opacity 160ms var(--ease)}
.rcard:hover .rgo{transform:translateX(3px);opacity:1}
.rcard:not(:has(img))::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 14px)}
.rcard:hover{text-decoration:none}
@media (min-width:1200px){.related .rgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.rcard{min-height:180px}}

/* Contact section: statement beside the form */
.contact .wrap{display:grid;gap:32px}
.contact .say h2{margin-bottom:12px}
.contact .say p{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0 0 24px;max-width:46ch}
.contact .direct{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:center;border-top:1px solid var(--c-line);padding-top:24px;max-width:480px}
.contact .direct .avatar{width:64px;height:64px;border-radius:var(--r-control);overflow:hidden;filter:grayscale(1)}
.contact .direct .avatar img{width:100%;height:100%;object-fit:cover}
.contact .direct:not(:has(.avatar)) .dtext{grid-column:1/-1}
.contact .dtext{display:grid;gap:2px}
.contact .dlabel{font-size:13px;color:var(--c-ink-2)}
.contact .dphone{font-family:var(--font-display);font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--c-ink);text-decoration:none;line-height:1.2}
.contact .dphone:hover{color:var(--c-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.contact .dnote{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-2)}
.contact .dnote .dot{width:7px;height:7px;border-radius:50%;background:var(--c-live)}
.contact .panel{padding:0}
.contact .panel .lead-form{max-width:none}
.contact .panel .lead-form button{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1200px){.contact .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}.contact .panel{padding-top:34px}}
/* Photo band (alerts, contact): the page hero behind a deep brand wash, eased a step on 2026-10-04 so the photo shows more (Truman). Tokens are redefined for dark ground so fields, links, and the button follow the site theme. */
.photo-band{position:relative;isolation:isolate;overflow:hidden;background:var(--c-deep);--c-ink:#fff;--c-ink-2:rgba(255,255,255,.74);--c-line:rgba(255,255,255,.3);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.photo-band .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2}
.photo-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 92%,transparent) 0%,color-mix(in srgb,var(--c-deep) 80%,transparent) 50%,color-mix(in srgb,var(--c-deep) 68%,transparent) 100%)}
.photo-band .eyebrow::before{background:var(--c-accent)}
.photo-band .field::after{background:var(--c-accent)}
.photo-band .dnote .dot{background:#3fd08f}
.site-footer{border-top:1px solid rgba(255,255,255,.08)}

/* Dark mode uses the white wordmark on every header state, including the compact header over a hero page. */
@media (prefers-color-scheme:dark){
  [data-theme="auto"] .site-header .logo .dark,[data-theme="auto"] body.has-hero .site-header.compact .logo .dark{display:none}
  [data-theme="auto"] .site-header .logo .white,[data-theme="auto"] body.has-hero .site-header.compact .logo .white{display:block}
}
[data-theme="dark"] .site-header .logo .dark,[data-theme="dark"] body.has-hero .site-header.compact .logo .dark{display:none}
[data-theme="dark"] .site-header .logo .white,[data-theme="dark"] body.has-hero .site-header.compact .logo .white{display:block}

/* Step 3: content blocks */
/* Promoted content: band and subtle */
.promo.band{background:var(--c-tint);padding-block:0}
.promo.band .wrap{display:grid;gap:0;padding-inline:0}
.promo.band .media .video-frame{border-radius:0}
.promo.band .text{padding:26px 20px 34px}
.promo.band .text .eyebrow{margin-bottom:18px}
.promo.band .text h2{font-size:clamp(28px,3vw,40px);line-height:1.06;margin:0 0 20px;max-width:18ch}
.promo.band .dek{font-size:17px;line-height:1.65;color:var(--c-ink-2);margin:0 0 30px;max-width:46ch}
.promo.band .actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.promo.band .meta{font-size:13px;color:var(--c-ink-2)}
@media (min-width:768px){.promo.band .wrap{padding-inline:40px}.promo.band{padding-block:56px}.promo.band .media .video-frame{border-radius:var(--r-media)}.promo.band .text{padding:28px 0 0}}
@media (min-width:1200px){.promo.band{padding-block:96px}.promo.band .wrap{grid-template-columns:1.4fr 1fr;gap:72px;align-items:center;padding-inline:56px}.promo.band .text{padding:0}}

/* Video poster treatment */
.poster{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--c-deep);box-shadow:0 18px 44px rgba(7,28,43,.28)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,43,0) 55%,rgba(7,28,43,.45) 100%);pointer-events:none}
.poster:hover img{transform:scale(1.03)}
.poster .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:var(--c-deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform 220ms var(--ease);z-index:1}
.poster .play svg{width:28px;height:28px;margin-left:4px}
.poster .play:hover{transform:scale(1.06)}
.poster .dur{position:absolute;right:14px;bottom:12px;padding:5px 9px;border-radius:var(--r-chip);background:rgba(7,28,43,.75);color:#fff;font:600 12px var(--font-body);z-index:1}
.poster iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster.playing::after{display:none}
.poster .play:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
/* Plain video blocks (search pages, video blocks, blog posts): same corners as a bare embed, no shadow. */
.poster.flat{border-radius:var(--r-media);box-shadow:none}
.post-body .poster{margin:0 0 28px;border-radius:var(--r-panel)}
.post-body .poster img{margin:0;height:100%;border-radius:0}
.promo.band .media .poster{border-radius:0}
@media (min-width:768px){.promo.band .media .poster{border-radius:14px}}

/* Price slider with histogram */
.pricebar{margin:0 0 32px}
.results-region{padding-top:28px}
@media (min-width:1200px){.pricebar{position:sticky;top:60px;z-index:5;background:var(--c-bg);padding:14px 0 10px;margin:-14px 0 24px}.pricebar.stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;background:inherit}section.alt .pricebar{background:var(--c-muted)}.results-main{align-self:stretch}}
.pb-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pb-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.pb-out{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pb-reset{margin-left:auto;background:none;border:0;color:var(--c-link);font:600 13px var(--font-body);cursor:pointer;min-height:32px}
.pb-track{position:relative;height:56px}
.pb-hist{position:absolute;left:0;right:0;bottom:22px;height:34px;display:flex;align-items:flex-end;gap:2px}
.pb-hist i{flex:1;display:block;background:color-mix(in srgb,var(--c-brand) 22%,var(--c-surface));border-radius:2px 2px 0 0;min-height:4px}
/* Dark keeps the chip tint for the bars; light wears a soft brand tint instead of gray (Truman, 2026-09-30). */
[data-theme="dark"] .pb-hist i{background:var(--c-chip)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .pb-hist i{background:var(--c-chip)}}
.pb-track::before{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--c-line);border-radius:1px}
.pb-fill{position:absolute;bottom:14px;height:2px;background:var(--c-brand);border-radius:1px}
.pb-track input[type=range]{position:absolute;left:0;right:0;bottom:0;width:100%;height:30px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.pb-track input[type=range]::-webkit-slider-runnable-track{height:2px;background:transparent}
.pb-track input[type=range]::-moz-range-track{height:2px;background:transparent}
.pb-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.22);cursor:grab}
.pb-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.22);cursor:grab}
.pb-track input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.pb-track input[type=range]:focus-visible{outline:none}
.pb-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--c-accent);outline-offset:2px}
.pb-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--c-ink-2);margin-top:2px;font-variant-numeric:tabular-nums}
#results-live.loading,#results-more.loading{opacity:.55;transition:opacity 140ms var(--ease)}

/* Filters button, active chips, and the drawer */
.pb-filters{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.pb-filters:hover{border-color:var(--c-ink)}
.pb-filters .n{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-brand);color:var(--c-brand-ink);font:700 11px var(--font-display);align-items:center;justify-content:center}
.pb-filters .n.on{display:inline-flex}
.pb-reset{margin-left:0}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 24px}
.fchips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 6px 0 12px;border-radius:var(--r-chip);background:var(--c-chip);font:600 13px var(--font-body);color:var(--c-ink)}
.fchip button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--c-ink-2);font:400 18px/1 var(--font-body);cursor:pointer}
.fchip button:hover{background:var(--c-line);color:var(--c-ink)}
.fdrawer{position:fixed;inset:0;z-index:60;display:none}
.fdrawer.open{display:block}
.fdrawer .scrim{position:absolute;inset:0;background:rgba(4,25,38,.7)}
.fdrawer .panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;background:var(--c-surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:0 -12px 40px rgba(0,0,0,.3);transform:translateY(0)}
.fdrawer .fhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid var(--c-line)}
.fdrawer .fhead h3{font-size:18px;margin:0}
.fdrawer .fhead .fclear{background:none;border:0;color:var(--c-link);font:600 13px var(--font-body);cursor:pointer;min-height:40px;padding:0 8px}
.fdrawer .fhead .fx{width:40px;height:40px;border:0;border-radius:50%;background:var(--c-chip);color:var(--c-ink);font:400 20px/1 var(--font-body);cursor:pointer}
.fdrawer .fbody{overflow:auto;padding:8px 20px 20px}
.fgroup{padding:18px 0;border-bottom:1px solid var(--c-line)}
.fgroup:last-child{border-bottom:0}
.fgroup h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 12px}
.fgroup .pricebar,.fgroup .sqftbar{margin:0;max-width:none;position:static;padding:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{min-width:52px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.seg button.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.tog{display:flex;gap:8px;flex-wrap:wrap}
.tog button{min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-chip);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.tog button.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.fsel{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.fsel label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--c-ink-2)}
.fsel select{font:inherit;font-size:15px;min-height:44px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink)}
.fdrawer .ffoot{padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c-line);background:var(--c-surface)}
.fdrawer .ffoot .btn{width:100%;min-height:52px}
@media (min-width:1200px){.fdrawer .panel{left:auto;top:0;bottom:0;width:440px;max-height:none;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.3)}.fdrawer .fbody{padding:8px 28px 28px}.fdrawer .fhead{padding:22px 28px 14px}.fdrawer .ffoot{padding:16px 28px 22px}}
.sqftbar .pb-track{height:52px}
body.drawer-open{overflow:hidden}
#results-live .lgrid-empty{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--c-ink-2)}
.promo.subtle{padding-block:32px;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.promo.subtle .wrap{display:grid;grid-template-columns:136px minmax(0,1fr);gap:20px;align-items:center}
.promo.subtle .thumb .video-frame{border-radius:var(--r-media)}
.promo.subtle .kicker{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link)}
.promo.subtle h2{font-size:16px;margin:4px 0 6px}
.promo.subtle p{margin:0 0 6px;font-size:14px;color:var(--c-ink-2)}
@media (min-width:768px){.promo.subtle .wrap{grid-template-columns:260px minmax(0,1fr)}.promo.subtle h2{font-size:22px}}
@media (min-width:1200px){.promo.subtle .wrap{grid-template-columns:340px minmax(0,1fr);gap:32px}.promo.subtle h2{font-size:26px}}

/* Community guide. The guide photo sits faintly behind the section, fading into the section color. */
section.block{--sec:var(--c-bg)}
section.block.alt{--sec:var(--c-muted)}
.guide{position:relative;overflow:hidden;isolation:isolate}
.guide .gbg{position:absolute;top:0;bottom:0;left:0;width:62%;height:100%;object-fit:cover;object-position:center;opacity:.22;filter:saturate(.75);z-index:-2;pointer-events:none}
.guide::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--sec) 35%,transparent) 0%,color-mix(in srgb,var(--sec) 75%,transparent) 30%,var(--sec) 62%,var(--sec) 100%)}
.guide .wrap{position:relative;display:grid;gap:28px}
.guide .gmedia{margin:0}
.guide .gmedia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-media)}
.guide .gmedia figcaption{font-size:12px;color:var(--c-ink-2);margin-top:8px}
.guide .prose p{font-size:17px;line-height:1.7;margin:0 0 20px;max-width:68ch}
.guide .prose.dropcap>p:first-child::first-letter{float:left;font-family:var(--font-display);font-size:64px;font-weight:800;line-height:.8;color:var(--c-brand);padding:6px 10px 0 0}
.guide .more summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-link);min-height:44px;display:inline-flex;align-items:center}
.guide .more summary::-webkit-details-marker{display:none}
.guide .more[open] summary{display:none}
.guide .gtext h2{margin-bottom:20px}
@media (min-width:768px){.guide .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}.guide .gmedia{position:sticky;top:96px}}
.guide--text .gcols{display:grid;gap:0}
@media (min-width:768px){.guide.guide--text .wrap{grid-template-columns:minmax(0,1fr)}.guide--text .gcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}.guide--text .gcols--one{grid-template-columns:minmax(0,1fr)}.guide--text .gtext h2{max-width:22ch}}

/* Pull quote */
.quote{background:var(--c-bg);color:var(--c-ink);padding-block:72px;text-align:center;position:relative;overflow:hidden}
.quote::before{content:"\201C";position:absolute;left:50%;top:-10px;transform:translateX(-50%);font-family:var(--font-display);font-size:280px;line-height:1;font-weight:800;color:var(--c-accent);opacity:.14;pointer-events:none}
.quote .wrap{position:relative}
.quote blockquote{margin:0 auto;font-family:var(--font-display);font-size:clamp(26px,3.6vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance;max-width:22ch}
.quote blockquote::after{content:"";display:block;width:48px;height:3px;background:var(--c-accent);margin:26px auto 0}
.quote cite{display:block;margin-top:14px;font:500 13px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);font-style:normal}
@media (min-width:1200px){.quote{padding-block:96px}.quote::before{font-size:360px;top:-24px}}

/* Villages */
.vgrid{display:grid;grid-auto-flow:column;grid-auto-columns:220px;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vgrid::-webkit-scrollbar{display:none}
.vcard{display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;scroll-snap-align:start}
.vcard .photo{aspect-ratio:5/3;background:var(--c-muted);border-radius:var(--r-media);overflow:hidden}
.vcard .photo img{width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.vcard:hover .photo img{transform:scale(1.04)}
.vcard:hover{text-decoration:none}
.vcard b{font-family:var(--font-display);font-size:15px;font-weight:700;margin-top:6px}
.vcard span{font-size:13px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
@media (min-width:768px){.vgrid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:32px 24px;overflow:visible}}
@media (min-width:1200px){.vgrid{gap:40px 32px}.vcard b{font-size:19px;margin-top:10px}.vcard span{font-size:14px}}

/* Alerts band */
.alerts .wrap{display:grid;gap:32px;align-items:center}
.alerts .say h2{margin-bottom:12px}
.alerts .say p{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0;max-width:46ch}
.alert-form{max-width:none}
.alert-form button{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1200px){.alerts .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}}

/* Agent block with form */
.agent .wrap{display:grid;gap:28px}
.agent .who .avatar{width:120px;height:120px;border-radius:var(--r-panel);overflow:hidden;filter:grayscale(1);margin-bottom:16px}
.agent .who .avatar img{width:100%;height:100%;object-fit:cover}
.agent .who .actions{display:flex;gap:10px;flex-wrap:wrap}
.lead-form.ask{max-width:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
.lead-form .two{display:grid;gap:30px 32px}
.lead-form .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lead-form .reply{font-size:13px;color:var(--c-ink-2)}
@media (min-width:768px){.lead-form .two{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.agent:not(.solo) .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.lead-form.ask{padding:32px}}
/* Agent without a form: one panel card, portrait left, statement right. The page's single form lives in the contact section. */
.agent.solo .who{display:grid;gap:18px;background:var(--c-muted);border-radius:var(--r-panel);overflow:hidden;padding:28px 24px}
.agent.solo .who.no-photo{grid-template-columns:1fr !important}
.agent.solo .wtext{display:grid;gap:10px;justify-items:start}
.agent.solo .wtext .actions{margin-top:6px}
.agent.solo .who .avatar{width:100%;max-width:220px;aspect-ratio:1;height:auto;border-radius:var(--r-media);margin:0}
.agent.solo .who .eyebrow{margin-bottom:0}
.agent.solo .who h2{margin-bottom:8px}
.agent.solo .who p{margin:0 0 6px;color:var(--c-ink-2)}
@media (min-width:768px){.agent.solo .who{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:32px;padding:32px}}
@media (min-width:1200px){.agent.solo .who{grid-template-columns:260px minmax(0,1fr);gap:48px;padding:40px 48px}.agent.solo .who .avatar{max-width:260px}}

/* Fine print fact grid */

/* Sheet: centered dialog on desktop, bottom sheet on phones. Step two of listing alerts. */
dialog.sheet{border:0;padding:32px 24px calc(28px + env(safe-area-inset-bottom,0px));width:min(480px,100%);max-width:100%;max-height:92vh;overflow:auto;background:var(--c-surface);color:var(--c-ink);border-radius:var(--r-sheet);box-shadow:0 24px 64px rgba(6,18,26,.4)}
dialog.sheet::backdrop{background:color-mix(in srgb,var(--c-deep) 82%,transparent)} /* a tint, not a blur: a full-screen backdrop blur over a busy page lagged (Truman, 2026-10-02) */
dialog.sheet[open]{animation:sheet-in 260ms var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
dialog.sheet h2{font-size:var(--t-h2);margin:10px 0 8px}
dialog.sheet .sheet-dek{color:var(--c-ink-2);font-size:15px;line-height:1.6;margin:0 0 20px}
dialog.sheet .sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink-2);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
dialog.sheet .sheet-x:hover{color:var(--c-ink);background:var(--c-muted)}
dialog.sheet .lead-form{max-width:none;gap:26px}
dialog.sheet .lead-form button{justify-self:stretch;min-height:56px}
@media (max-width:767px){dialog.sheet{margin:auto 0 0;width:100%;border-radius:var(--r-sheet) var(--r-sheet) 0 0}}
@media (min-width:768px){dialog.sheet{padding:40px 40px 36px}}

/* Your guide with a transparent cutout (D32).
   Agent: a one third / two thirds row. The cutout fills the first third and stands on the section's bottom edge; the text takes the rest.
   Team: centered content with the team cutout behind it along the bottom edge, fading upward so the text stays readable.
   Cutouts are soft-faded at their sides so cropped shoulders never end in a hard line. */
.agent.solo:has(.who.cutout),.agent.solo:has(.who.team){padding-bottom:0}
.agent.solo .who[hidden]{display:none !important}
.agent.solo:has(.who.cutout) > .wrap,.agent.solo:has(.who.team) > .wrap{display:block}
.agent.solo .who.cutout{display:flex;flex-direction:column;gap:32px;background:none;border-radius:0;padding:0;overflow:visible}
.agent.solo .who.cutout .wtext{order:1}
.agent.solo .who.cutout .cut{order:2;margin:0 -20px}
/* Eased fade at both sides (many stops so the ramp reads as a curve, not a line). */
.agent.solo .who.cutout .cut img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 66%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.66) 80%,rgba(0,0,0,.38) 87%,rgba(0,0,0,.14) 94%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.62) 11%,rgba(0,0,0,.88) 15%,#000 19%,#000 66%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.66) 80%,rgba(0,0,0,.38) 87%,rgba(0,0,0,.14) 94%,rgba(0,0,0,0) 100%)}
@media (min-width:768px){
  .agent.solo:has(.who.cutout){padding-top:56px}
  .agent.solo .who.cutout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
  .agent.solo .who.cutout .cut{order:0;margin:0;align-self:end}
  .agent.solo .who.cutout .wtext{padding-bottom:56px;max-width:600px}
}
@media (min-width:1200px){.agent.solo:has(.who.cutout){padding-top:72px}.agent.solo .who.cutout{gap:72px}.agent.solo .who.cutout .wtext{padding-bottom:72px}}
/* Your guide as a round portrait: for a headshot whose cutout edge reads badly on a dark section. Full color, a soft tint
   behind a transparent cutout, a ring in the site's accent, and the text beside it. */
.agent.solo .who.portrait{display:flex;flex-direction:column;align-items:flex-start;gap:28px;background:none;border-radius:0;padding:0;overflow:visible}
.agent.solo .who.portrait .avatar{flex:none;margin:6px;width:min(200px,56vw);height:auto;aspect-ratio:1;border-radius:50%;filter:none;background:radial-gradient(circle at 50% 35%,var(--c-tint),var(--c-muted));box-shadow:0 0 0 4px var(--c-bg),0 0 0 6px var(--c-accent),0 18px 40px rgba(0,0,0,.35)}
.agent.solo .who.portrait .avatar img{object-position:50% 12%}
/* A cutout photo (transparent background) sits on a light backdrop so it never floats on the dark band. */
.agent.solo .who.portrait .avatar.lit{background:radial-gradient(circle at 50% 38%,#fff 0%,color-mix(in srgb,var(--c-accent) 30%,#fff) 100%)}
.agent.solo .who.portrait .avatar.lit img{object-position:50% 0;padding-top:9%}
@media (min-width:768px){.agent.solo .who.portrait{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}.agent.solo .who.portrait .avatar{width:220px}.agent.solo .who.portrait .wtext{max-width:600px}}

.agent.solo .who.team{position:relative;display:grid;grid-template-columns:minmax(0,1fr) !important;justify-items:center;text-align:center;background:none;border-radius:0;padding:0 0 calc(24vw + 56px);overflow:visible}
.agent.solo .who.team .wtext{position:relative;z-index:1;justify-items:center;max-width:620px}
.agent.solo .who.team .wtext .actions{justify-content:center}
.agent.solo .who.team .tphoto{position:absolute;left:-20px;right:-20px;bottom:0;z-index:0;pointer-events:none}
.agent.solo .who.team .tphoto img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 45%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
@media (min-width:768px){
  .agent.solo .who.team{padding-bottom:clamp(200px,21vw,270px)}
  .agent.solo .who.team .tphoto{left:50%;right:auto;width:min(1080px,100%);transform:translateX(-50%)}
}
/* Local preview toggle between agent and team (dev only). */
.agent .wrap{position:relative}
.vtoggle{position:absolute;top:0;right:20px;z-index:3;display:inline-flex;padding:3px;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-line);box-shadow:0 2px 8px rgba(13,27,36,.08)}
.vtoggle button{border:0;background:transparent;color:var(--c-ink-2);font:600 12px/1 var(--font-body);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:34px}
.vtoggle button[aria-pressed="true"]{background:var(--c-brand);color:var(--c-brand-ink)}
@media (max-width:767px){.vtoggle{position:static;display:flex;width:max-content;margin:0 auto 24px}}
@media (min-width:768px){.vtoggle{right:40px}}
@media (min-width:1200px){.vtoggle{right:56px}}
/* Small avatars built from a cutout: face at the top, soft tint behind. */
.side-agent .avatar,.contact .direct .avatar{background:#fff;border-radius:50%;overflow:hidden;filter:none}
.side-agent .avatar img,.contact .direct .avatar img{object-fit:cover;object-position:center top;transform:translateY(7%) scale(.96);transform-origin:50% 100%}

/* Community page depth (planning/15, D33). Colors only from theme tokens. */
.wrap.narrow{max-width:880px}
p.answer{font-size:17px;line-height:1.6;color:var(--c-ink-2);max-width:68ch;margin:-12px 0 28px}
section.block h2 + p.answer{margin-top:-8px}
.fine{font-size:12px;line-height:1.5;color:var(--c-ink-2);margin:16px 0 0;max-width:80ch}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.sec-head h2{margin-bottom:12px !important}
.sec-head p.answer{margin:0}
.scrollbox{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.scrollbox:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* Chart / Table switch */
.vswitch{display:inline-flex;padding:3px;border-radius:999px;background:var(--c-chip);border:1px solid var(--c-line);flex:none}
.vswitch button{border:0;background:transparent;color:var(--c-ink-2);font:600 12px/1 var(--font-body);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:34px}
.vswitch button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 3px rgba(13,27,36,.12)}
[data-pane][hidden]{display:none !important}

/* At a glance */
.glance{padding:28px 0 8px;max-width:880px}
.glance h2{font-size:var(--t-h2);margin:0 0 10px}
.glance .answer{margin:0 0 16px;color:var(--c-ink);font-size:18px}
.glance ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.glance li{position:relative;padding-left:22px;color:var(--c-ink-2);font-size:15px;line-height:1.55}
.glance li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--c-accent)}
@media (min-width:768px){.glance ul{grid-template-columns:1fr 1fr;gap:10px 32px}}

/* Chapter jump bar: pins under the 60px compact header. The price bar pins under it. */
body:has(.jumpbar){--jb:48px}
.jumpbar{position:sticky;top:60px;z-index:20;background:color-mix(in srgb,var(--c-bg) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--c-line);margin-top:20px}
.jumpbar .wrap{padding-inline:0}
.jb-track{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:47px;align-items:center;padding-inline:20px;scroll-padding-inline:20px}
.jb-track::-webkit-scrollbar{display:none}
.jumpbar a{flex:none;display:inline-flex;align-items:center;height:47px;padding:0 12px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.jumpbar a:hover{color:var(--c-ink)}
.jumpbar a.on{color:var(--c-ink);border-bottom-color:var(--c-accent)}
.ch-anchor,#listings,#costs{scroll-margin-top:calc(60px + var(--jb,0px) + 8px)}
@media (min-width:768px){.jb-track{padding-inline:28px;scroll-padding-inline:28px}}
@media (min-width:1200px){
  .jb-track{padding-inline:44px}
  .pricebar{top:calc(60px + var(--jb,0px))}
  .results-side{top:calc(96px + var(--jb,0px))}
}

/* Market trend */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 36px;background:var(--c-line);border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden}
.tiles div{background:var(--c-surface);padding:18px 18px 16px;display:grid;gap:6px;align-content:start}
.tiles dt{font-size:12px;color:var(--c-ink-2)}
.tiles dd{margin:0;font-family:var(--font-display);font-size:var(--t-stat);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles div{padding:22px 24px 20px}}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.chart-head h3{margin:0;min-width:0}
.tchart .plot{position:relative;height:220px;margin:0 0 8px}
@media (min-width:768px){.tchart .plot{height:280px}}
.tchart .gl{position:absolute;left:0;right:0;border-top:1px solid var(--c-line)}
.tchart .gl span{position:absolute;left:0;bottom:3px;font-size:11px;color:var(--c-ink-2);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--sec,var(--c-bg)) 85%,transparent);padding-right:4px}
section.alt .tchart .gl span{--sec:var(--c-muted)}
.tchart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tchart path{fill:none;stroke:var(--c-accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}
.tchart .dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px var(--c-bg);pointer-events:none}
section.alt .tchart .dot{box-shadow:0 0 0 2px var(--c-muted)}
.tchart .dot.pt{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.tchart .endlabel{position:absolute;transform:translate(-100%,-150%);font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--c-ink);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.tchart .xhair{position:absolute;top:0;bottom:0;width:1px;background:var(--c-ink-2);opacity:.5;pointer-events:none}
.tchart .hits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.tchart .hits button{background:transparent;border:0;padding:0;margin:0;cursor:crosshair}
.tchart .hits button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.tchart .tip{position:absolute;top:0;transform:translateX(-50%);background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-control);box-shadow:0 6px 20px rgba(13,27,36,.16);padding:8px 12px;font-size:12px;white-space:nowrap;pointer-events:none;z-index:2}
.tchart .tip b{display:block;font-family:var(--font-display);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.tchart .tip span{color:var(--c-ink-2)}
.tchart .xl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));text-align:center;font-size:11px;color:var(--c-ink-2)}
@media (max-width:767px){.tchart .xl .odd{visibility:hidden}}
.ttable table,.ctable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ttable th,.ttable td,.ctable th,.ctable td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--c-line);white-space:nowrap}
.ttable th[scope="row"],.ttable thead th:first-child,.ctable th[scope="row"]{text-align:left}
.ttable thead th,.ctable thead th{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-2)}
.ttable tbody tr:last-child > *,.ctable tbody tr:last-child > *{border-bottom:0}
.ttable th[scope="row"],.ctable th[scope="row"]{font-weight:600}

/* Compare table: first column sticks while the table scrolls sideways on phones. */
.ctable th[scope="row"]{position:sticky;left:0;background:var(--c-surface);z-index:1;color:var(--c-ink)}
.ctable thead th{font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--c-ink);font-weight:800;vertical-align:bottom}
.ctable thead th small{display:block;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link);margin-top:2px}
.ctable .me{background:var(--c-tint)}
.ctable thead .me{box-shadow:inset 0 3px 0 var(--c-accent)}

/* Cost calculator */
.calc{display:grid;gap:28px;min-width:0}
.cform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px;min-width:0}
.cin{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.cin .cl{font-size:12px;font-weight:600;color:var(--c-ink-2)}
.cin .cl em{font-style:normal;font-weight:500;color:var(--c-ink-2)}
.cbox{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--c-line);min-height:44px;transition:border-color 140ms var(--ease)}
.cbox:focus-within{border-bottom-color:var(--c-cta);box-shadow:0 1px 0 var(--c-cta)}
.cbox i{font-style:normal;font-size:13px;color:var(--c-ink-2);white-space:nowrap}
.cbox input,.cbox select{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--c-ink);font:600 17px var(--font-body);font-variant-numeric:tabular-nums;padding:6px 0;outline:none;-moz-appearance:textfield}
.cin:first-child{grid-column:1/-1}
.cout{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
.cout > .cl{font-size:12px;font-weight:600;color:var(--c-ink-2)}
.ctotal{display:block;font-family:var(--font-display);font-size:clamp(36px,5vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:6px 0 18px;font-variant-numeric:tabular-nums}
.cout ul{list-style:none;margin:0;padding:0}
.cout li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--c-line);font-size:15px}
.cout li b{font-variant-numeric:tabular-nums}
@media (min-width:768px){.calc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}.cout{padding:32px}}
.cbox input::-webkit-inner-spin-button,.cbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (min-width:1200px){.cform{gap:22px 28px}}

/* Before you buy */
.cl{counter-reset:cl}
ol.cl{list-style:none;margin:0;padding:0;display:grid;gap:0}
ol.cl li{counter-increment:cl;position:relative;padding:18px 0 18px 48px;border-top:1px solid var(--c-line)}
ol.cl li:last-child{border-bottom:1px solid var(--c-line)}
ol.cl li::before{content:counter(cl);position:absolute;left:0;top:18px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--c-accent);color:var(--c-ink);font:800 13px/27px var(--font-display);text-align:center}
ol.cl b{font-family:var(--font-display);font-size:16px}
ol.cl p{margin:6px 0 0;color:var(--c-ink-2);line-height:1.6}

/* Getting around */
.around-grid{display:grid;gap:28px}
.drives{list-style:none;margin:0;padding:0}
.drives li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--c-line)}
.drives li:last-child{border-bottom:1px solid var(--c-line)}
.drives b{font-family:var(--font-display);font-size:18px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.drives sup{color:var(--c-ink-2);font-size:12px;margin-left:2px}
.schools{margin:20px 0 0;font-size:15px}
.map{min-height:320px;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);border:1px solid var(--c-line);z-index:0}
@media (min-width:768px){.around-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:stretch}.around-grid.solo{grid-template-columns:minmax(0,1fr)}.map{min-height:420px}}

/* Outdoors */
.odl{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.odl li{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:22px}
.odl b{font-family:var(--font-display);font-size:17px}
.odl p{margin:8px 0 0;color:var(--c-ink-2);line-height:1.6}
@media (min-width:768px){.odl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.odl.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Every way to search */
.dgroups{display:grid;gap:28px}
.dgroup h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 10px}
.dgroup ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.dgroup li{break-inside:avoid;padding:6px 0;font-size:15px}
@media (min-width:768px){.dgroups{grid-template-columns:1fr 2fr 1fr 1fr;gap:40px}.dgroup ul{columns:1}.dgroup:nth-child(2) ul{columns:2}}

/* Sources */
.sources{border-top:1px solid var(--c-line)}
section.sources.block{padding-block:48px}
.sources h2{font-size:20px}
.sources ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--c-ink-2);font-size:14px;line-height:1.6}

/* Listing detail (planning/16, D34) */
.lx-top{padding-top:16px}
/* Photos are the hero: edge to edge under the header. On phones the first photo fills the width and the rest swipe. */
.lx-hero{background:var(--c-deep);position:relative}
/* Photos run under the transparent header (D36, D53); a soft wash keeps the logo and links readable on any photo. Until the
   first photo paints, the band and its photo buttons are the deep color, so the white header is never white on light grey. */
.lx-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:140px;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 60%,transparent),transparent);pointer-events:none;z-index:2}
.lx-hero .lx-gallery{margin:0;padding:0;scroll-padding:0;grid-auto-columns:100%;gap:2px}
.lx-hero .lx-gallery button{border-radius:0;background:var(--c-deep)}
.lx-gallery{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
.lx-gallery::-webkit-scrollbar{display:none}
.lx-gallery button{border:0;padding:0;margin:0;background:var(--c-muted);cursor:zoom-in;scroll-snap-align:start;border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/3}
.lx-gallery img{width:100%;height:100%;object-fit:cover}
.lx-gwrap{position:relative}
.lx-gwrap .gall{position:absolute;right:12px;bottom:12px;z-index:1;border:0;cursor:pointer;background:color-mix(in srgb,var(--c-surface) 94%,transparent);color:var(--c-ink);font:700 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-radius:var(--r-control);box-shadow:0 2px 10px rgba(13,27,36,.2);min-height:40px}
.lx-gallery.few{grid-auto-columns:100%}
@media (min-width:768px){
  .lx-gallery{margin:0;padding:0;overflow:hidden;grid-auto-flow:row;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:clamp(440px,64vh,780px)}
  .lx-gallery button{aspect-ratio:auto;border-radius:0}
  .lx-gallery .g0{grid-row:1/3}
  .lx-gwrap .gall{right:24px;bottom:24px}
  .lx-gallery.few{grid-template-columns:1fr;grid-template-rows:1fr}
  .lx-gallery.few .g0{grid-row:auto}
  .lx-gallery.few button:not(.g0){display:none}
}

.lx-shell{display:grid;gap:0;padding-top:20px;padding-bottom:24px}
.lx-side{display:none}
@media (min-width:1200px){.lx-shell{grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}.lx-side{display:grid;gap:20px;margin-top:-4px}.lx-slot{display:none}}
.lx-price{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.lx-price .price{font-family:var(--font-display);font-size:var(--t-price-lg);font-weight:800;letter-spacing:-.03em;line-height:1}
.lx-price .ltag{position:static;border:1px solid var(--c-line)}
.lx-tools{margin-left:auto;display:flex;gap:6px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer}
.icon-btn:hover{border-color:var(--c-ink)}
.lx-sold{margin:8px 0 0;font-size:14px;color:var(--c-ink-2)}
.lx-head h1{font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:14px 0 0}
.lx-head h1 span{display:block;font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:0;color:var(--c-ink-2);margin-top:4px}
.lx-specs{list-style:none;margin:18px 0 0;padding:16px 0;display:flex;flex-wrap:wrap;gap:8px 28px;border-block:1px solid var(--c-line);font-size:15px;color:var(--c-ink-2)}
.lx-specs b{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--c-ink);margin-right:2px;font-variant-numeric:tabular-nums}
.lx-attr{display:flex;align-items:center;gap:0;margin:14px 0 0;font-size:15px;color:var(--c-ink-2)}.lx-attr b{color:var(--c-ink);font-weight:600}.lx-attr a{color:inherit}
.lcourtesy{display:flex;align-items:center;margin:4px 0 0;font-size:12px;color:var(--c-ink-3,var(--c-ink-2));min-width:0}.lcourtesy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:14px 0 0;font-size:13px;color:var(--c-ink-2)}
.lx-slot{display:grid;gap:20px;margin-top:28px}
.lx-agent{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px;box-shadow:0 1px 3px rgba(13,27,36,.06);display:grid;gap:12px}
.lx-agent .sa-head{display:flex;align-items:center;gap:14px}
.lx-agent .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff}
.lx-agent .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:translateY(7%) scale(.96);transform-origin:50% 100%}
.lx-agent .eyebrow{margin-bottom:4px}
.lx-agent .sa-name{display:block;font-family:var(--font-display);font-size:18px;font-weight:800}
.lx-agent .statement{margin:0;font-size:14.5px;line-height:1.6;color:var(--c-ink-2)}
.lx-agent .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lx-agent .btn{min-height:48px}
.lx-phone{justify-self:center;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--c-ink)}
.lx-sec{padding-top:40px}
.lx-sec h2{font-size:22px;margin-bottom:16px}
.remarks p{font-size:16px;line-height:1.75;margin:0 0 12px;max-width:68ch}
.remarks .more summary{list-style:none;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-link);min-height:44px;display:inline-flex;align-items:center}
.remarks .more summary::-webkit-details-marker{display:none}
.remarks .more[open] summary{display:none}
.muted{color:var(--c-ink-2)}
/* Facts flow down two columns, group by group, so short groups never leave a hole; a long list sits under its label (2026-10-08). */
.lx-facts{display:grid;gap:24px}
.lx-fgroup{break-inside:avoid}
.lx-facts dl div.long{display:block}
.lx-facts dl div.long dd{text-align:left;margin-top:4px;font-weight:500;line-height:1.5}
.lx-facts h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:0 0 6px}
.lx-facts dl{margin:0}
.lx-facts dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-facts dt{color:var(--c-ink-2);white-space:nowrap}
.lx-facts dd{margin:0;font-weight:600;text-align:right}
@media (min-width:768px){.lx-facts{display:block;columns:2;column-gap:48px}.lx-fgroup{padding-bottom:28px}}
.lx-sec .map{min-height:300px}
@media (min-width:768px){.lx-sec .map{min-height:380px}}
/* The map band (2026-10-08): full bleed under the details, a card over its left side on wide screens and above it on
   phones. Zoom shows on hover only, so the band reads as a picture until someone reaches for it. */
.lx-mapband{position:relative;margin-top:24px;background:var(--c-muted);border-block:1px solid var(--c-line)}
.lx-mapband .map{height:340px;min-height:0;border-radius:0;border:0}
.lx-mapband__wrap{padding-block:24px}
.lx-mapcard{display:grid;gap:10px}
.lx-mapcard h2{margin:0;font-size:22px;line-height:1.25}
.lx-mapcard p{margin:0;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.lx-mapcard p a{color:var(--c-link)}
.lx-mapcard__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.lx-drives{display:grid;gap:6px;margin-top:4px}
.lx-drives>span{font-size:12px;color:var(--c-ink-2)}
.lx-drives ul{list-style:none;margin:0;padding:0;display:grid}
.lx-drives li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.lx-drives li:last-child{border-bottom:0}
.lx-drives b{white-space:nowrap;font-variant-numeric:tabular-nums}
.lx-mapcard__acts .btn{min-height:44px;padding:0 18px}
@media (min-width:900px){
  .lx-mapband{display:grid}
  .lx-mapband .map,.lx-mapband__wrap{grid-area:1/1}
  .lx-mapband .map{height:auto;min-height:500px}
  .lx-mapband__wrap{width:100%;display:flex;align-items:center;padding-block:40px;pointer-events:none}
  .lx-mapcard{pointer-events:auto;width:380px;padding:28px;border-radius:var(--r-card,18px);background:color-mix(in srgb,var(--c-surface) 94%,transparent);border:1px solid var(--c-line);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:saturate(1.2)}
}
.lx-mapband .gm-bundled-control,.lx-mapband .leaflet-control-zoom{opacity:0;transition:opacity 160ms var(--ease)}
.lx-mapband:hover .gm-bundled-control,.lx-mapband:focus-within .gm-bundled-control,.lx-mapband:hover .leaflet-control-zoom,.lx-mapband:focus-within .leaflet-control-zoom{opacity:1}
@media (hover:none){.lx-mapband .gm-bundled-control,.lx-mapband .leaflet-control-zoom{opacity:1}}
/* A similar home on the map: its price as a small chip that opens it. */
.gpin.price{text-decoration:none}
.gpin.price i{display:none}
.gpin.price span{position:static;transform:none;opacity:1;pointer-events:auto;border:0;cursor:pointer}
.gpin.price:hover span,.gpin.price:focus-visible span{transform:scale(1.08);background:var(--c-ink);color:var(--c-bg)}
.gpin.price:hover{z-index:2}
.related-homes .more-link{margin:36px 0 0;text-align:center}
.sources.block .eyebrow + ul{margin-top:4px}
/* Full photo list: a scrolling column of every photo, like a printed brochure. */
dialog.lx-lightbox{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--c-bg);color:var(--c-ink)}
dialog.lx-lightbox::backdrop{background:var(--c-deep)}
.lb-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:16px;height:60px;padding:0 12px 0 20px;background:color-mix(in srgb,var(--c-bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line);font-weight:600}
.lb-bar .lb-n{color:var(--c-ink-2);font-weight:500;font-size:14px}
.lb-x{margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink);font-size:28px;cursor:pointer;border-radius:50%}
.lb-x:hover{background:var(--c-muted)}
.lb-list{display:grid;gap:8px;max-width:1100px;margin:0 auto;padding:12px 0 40px}
.lb-list img{width:100%;height:auto;scroll-margin-top:72px}
@media (min-width:768px){.lb-list{grid-template-columns:1fr 1fr;padding:16px 16px 48px}.lb-list img:nth-child(3n+1){grid-column:1/-1}}
/* Registration gate: the sheet renders in place without JavaScript and upgrades to a modal. */
dialog.gate-sheet:not(:modal){position:relative;inset:auto;margin:24px auto;box-shadow:none;border:1px solid var(--c-line)}
body.gated .lx-shell,body.gated .costs,body.gated .trend,body.gated .related-homes{opacity:.22;pointer-events:none;user-select:none} /* faded, not blurred: cheap to draw (blur over these lagged under the sign-up wall) */
/* Google map pins (HTML overlays, colored from the theme). The label shows on hover. */
.gpin{position:absolute;transform:translate(-50%,-50%);cursor:default}
.gpin i{display:block;width:14px;height:14px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px var(--c-bg),0 2px 6px rgba(0,0,0,.3)}
.gpin.main i{width:22px;height:22px;background:var(--c-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-brand) 30%,transparent),0 0 0 7px var(--c-bg),0 3px 10px rgba(0,0,0,.35)}
.gpin span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-control);padding:5px 9px;font:600 12px var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity 140ms var(--ease)}
.gpin:hover span,.gpin.main span{opacity:1}

/* Listing sidebar cards: tour scheduler, lender, keep searching. On phones they sit in the page flow. */
.lx-card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:22px;box-shadow:0 1px 3px rgba(13,27,36,.06);display:grid;gap:14px;min-width:0}
.lx-card h2{font-size:19px;margin:-6px 0 0}
.lx-card .statement{margin:0;font-size:14.5px;line-height:1.6;color:var(--c-ink-2)}
.lx-card .avatar{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff}
.lx-card .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lx-card .avatar img[src*=".png"]{transform:translateY(7%) scale(.96);transform-origin:50% 100%}
.lx-card .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 14px var(--font-display)}
.tour-card{border-color:color-mix(in srgb,var(--c-brand) 35%,var(--c-line));box-shadow:0 8px 28px rgba(13,27,36,.1)}
.tc-type{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-control);background:var(--c-chip)}
.tc-type button{border:0;background:transparent;color:var(--c-ink-2);font:600 13px var(--font-body);min-height:38px;border-radius:calc(var(--r-control) - 2px);cursor:pointer}
.tc-type button.on{background:var(--c-surface);color:var(--c-ink);box-shadow:0 1px 3px rgba(13,27,36,.14)}
.tc-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(54px,1fr);gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-2px;padding:2px}
.tc-days::-webkit-scrollbar{display:none}
.tc-days button{display:grid;justify-items:center;gap:1px;padding:8px 0;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);cursor:pointer}
.tc-days small{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2)}
.tc-days b{font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.1}
.tc-days button.on,.tc-times button.on{border-color:var(--c-brand);box-shadow:inset 0 0 0 1px var(--c-brand);background:color-mix(in srgb,var(--c-brand) 8%,var(--c-surface))}
.tc-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.tc-times button{min-height:38px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);cursor:pointer;font-variant-numeric:tabular-nums}
.tc-note{margin:-4px 0 0;text-align:center;font-size:12px;color:var(--c-ink-2)}
.tc-agent{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--c-line)}
.tc-agent strong{display:block;font-family:var(--font-display);font-size:15px}
.tc-agent span{font-size:12px;color:var(--c-ink-2)}
.tc-quick{margin-left:auto;display:flex;gap:6px}
.tc-quick .icon-btn{min-height:36px;padding:0 10px;text-decoration:none}
.lc-who{display:flex;align-items:center;gap:12px}
.lc-who strong{display:block;font-family:var(--font-display);font-size:15px}
.lc-who span{font-size:12px;color:var(--c-ink-2)}
.keep ul{list-style:none;margin:-4px 0 -8px;padding:0}
.keep li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);font-size:14.5px;font-weight:500;text-decoration:none}
.keep li:last-child a{border-bottom:0}
.keep li a span{color:var(--c-ink-2);transition:transform 140ms var(--ease)}
.keep li a:hover{color:var(--c-link)}
.keep li a:hover span{transform:translateX(3px);color:var(--c-link)}
.tour-pick{display:inline-flex;margin:0 0 6px;padding:6px 10px;border-radius:var(--r-control);background:var(--c-tint);font-weight:600;font-size:14px;color:var(--c-ink)}
@media (min-width:1200px){.lx-slot{display:none}}

/* Home page (D37) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home-hero{min-height:620px;align-items:flex-end;overflow:hidden}
.hero picture,.hc-card picture,.hs-photo picture,.bphoto picture,.ph-photo picture,.post-body picture{display:contents}
.hero .hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.home-hero .wrap{padding-top:140px;padding-bottom:56px}
.home-hero h1{font-size:var(--t-hero);font-weight:800;line-height:.95;letter-spacing:-.04em;color:#fff;margin:0 0 16px;max-width:14ch}
.home-hero .sub{font-size:17px;max-width:560px}
.hsearch{display:grid;gap:8px;margin-top:8px;background:var(--c-surface);border-radius:var(--r-panel);padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.35);max-width:940px}
.hsearch label{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:var(--r-control);background:var(--c-muted);color:var(--c-ink-2)}
.hsearch input,.hsearch select{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none;height:100%}
.hsearch input::placeholder{color:var(--c-ink-2)}
.hsearch label:focus-within{box-shadow:inset 0 0 0 2px var(--c-cta)}
.hsearch .btn{min-height:52px}
.hs-sel{display:none !important}
@media (min-width:768px){.hsearch{grid-template-columns:minmax(0,1fr) 170px 150px auto}.hs-sel{display:flex !important}.hsearch label{background:transparent}.hsearch .hs-q{background:var(--c-muted)}.hsearch .hs-sel{border-left:1px solid var(--c-line);border-radius:0}}
.hchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px -20px 0;padding:0 20px}
.hchips::-webkit-scrollbar{display:none}
.hchips a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);font-size:13px;font-weight:600;text-decoration:none}
.hchips a:hover{background:rgba(255,255,255,.2);text-decoration:none}
.hfresh{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.hfresh .dot{width:7px;height:7px;border-radius:50%;background:#3fd08f}
@media (min-width:768px){.home-hero{min-height:680px}.hchips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0}}
@media (min-width:1200px){.home-hero{min-height:760px}.home-hero .wrap{padding-bottom:72px}.home-hero .sub{font-size:20px}}

.hc-grid{display:grid;gap:12px}
.hc-card{position:relative;display:flex;align-items:flex-end;min-height:220px;border-radius:var(--r-panel);overflow:hidden;background:var(--c-deep);color:#fff;text-decoration:none;isolation:isolate}
.hc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 560ms var(--ease)}
.hc-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--c-deep) 88%,transparent) 100%)}
.hc-text{display:grid;gap:4px;padding:20px}
.hc-text b{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.hc-text span{font-size:13px;color:rgba(255,255,255,.88)}
.hc-go{position:absolute;right:18px;bottom:20px;font-size:20px}
.hc-card:hover{text-decoration:none}
.hc-card:hover img{transform:scale(1.04)}
@media (min-width:768px){.hc-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:240px;gap:16px}.hc-card{min-height:0}.hc-card.lead{grid-column:span 2;grid-row:span 2}.hc-card.lead .hc-text b{font-size:32px}}

.hnew .sec-head .btn{flex:none}
.ht-grid{display:grid;gap:12px}
.ht-card{display:grid;gap:8px;align-content:start;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.ht-card svg{color:var(--c-accent);margin-bottom:6px}
.ht-card b{font-family:var(--font-display);font-size:18px;font-weight:800}
.ht-card span{color:var(--c-ink-2);font-size:14.5px;line-height:1.55}
.ht-card em{font-style:normal;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-link);margin-top:6px}
.ht-card:hover{border-color:var(--c-ink);text-decoration:none;transform:translateY(-2px)}
@media (min-width:768px){.ht-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1200px){.ht-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Hero search: borderless fields, and the button runs flush to the box edges (Truman, 2026-09-30). */
.hsearch{padding:0;gap:0;overflow:hidden}
.hsearch label,.hsearch .hs-q{background:transparent;border:0;border-radius:0;min-height:60px;padding:0 18px}
.hsearch label:focus-within{box-shadow:none}
.hsearch .hs-sel{border-left:1px solid var(--c-line)}
.hsearch .btn{min-height:60px;border-radius:0;margin:0;padding:0 32px}
@media (max-width:767px){.hsearch .hs-q{border-bottom:1px solid var(--c-line)}}

/* Buyer accounts and portal (D39) */
[data-save].saved{color:var(--c-cta)}
[data-save].saved svg{fill:currentColor}
.lsave.saved{color:var(--c-cta)}
.gate-alt{margin:4px 0 0;text-align:center;font-size:14px;color:var(--c-ink-2)}
/* Account screens (2026-09-29): a full-height photo band in the Let's talk style. Reasons on the left, glass form card on the right. */
.auth{padding:104px 0 56px;min-height:100svh;display:flex;align-items:center}
/* Phones: headline, then the form, then the reasons. Desktop: reasons stacked on the left, card on the right. */
.auth .auth-grid{display:grid;gap:28px;width:100%;align-items:center;grid-template-areas:"say" "card" "more"}
.auth-say{grid-area:say}.auth-card{grid-area:card}.auth-more{grid-area:more}
.auth-say h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:.98;letter-spacing:-.03em;margin:12px 0 14px;max-width:14ch}
.auth-lead{font-size:16px;line-height:1.6;color:var(--c-ink-2);max-width:46ch;margin:0}
.auth-perks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#fff}
.auth-perks svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--c-accent)}
.auth-live{font-size:14px;color:var(--c-ink-2);margin:0 0 22px}
.auth-live b{color:#fff;font-variant-numeric:tabular-nums}
.auth-direct{display:flex;align-items:center;gap:14px;border-top:1px solid var(--c-line);padding-top:20px;max-width:440px}
.auth-direct .avatar{flex:none;width:52px;height:52px;border-radius:var(--r-control);overflow:hidden;filter:grayscale(1)}
.auth-direct .avatar img{width:100%;height:100%;object-fit:cover}
.auth-direct .dlabel{display:block;font-size:13px;color:var(--c-ink-2)}
.auth-direct .dphone{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.auth-card{width:min(520px,100%);justify-self:end;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sheet);padding:28px 22px 26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(4,25,38,.35)}
.auth-card .eyebrow{margin-bottom:4px}
.auth-card h1,.auth-card .h1{color:#fff;font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;margin:14px 0 8px}
.auth-dek{color:var(--c-ink-2);margin:0 0 20px;line-height:1.6;font-size:15px}
.auth-dek b{color:#fff}
.auth-card .lead-form{max-width:none;gap:26px}
/* Create account / Sign in toggle: one bordered segmented control; the selected half is solid out to the border (Truman, 2026-09-29). */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:-6px 0 26px;padding:0;background:none}
.auth-tabs + .h1{margin-top:0}
.auth-tabs a{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(255,255,255,.28);color:var(--c-ink-2);font-weight:600;font-size:14px;text-decoration:none;transition:background 140ms var(--ease),color 140ms var(--ease)}
.auth-tabs a:first-child{border-radius:var(--r-control) 0 0 var(--r-control)}
.auth-tabs a:last-child{border-radius:0 var(--r-control) var(--r-control) 0;margin-left:-1px}
.auth-tabs a:hover{color:#fff;text-decoration:none}
.auth-tabs a.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink);z-index:1}
.auth-msg{margin:0 0 18px;padding:12px 14px;border-radius:var(--r-control);background:rgba(255,255,255,.1);color:#fff;font-size:14.5px;line-height:1.5}
.auth-msg.err{box-shadow:inset 3px 0 0 var(--c-cta)}
.auth-steps{margin:0 0 18px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5;color:#fff}
.auth-steps b{font-weight:700}
.auth-fine{font-size:12.5px;line-height:1.55;color:var(--c-ink-2);margin:16px 0 0}
.auth-fine a,.auth-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.auth-alt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--c-ink-2)}
@media (min-width:768px){.auth{padding:124px 0 72px}.auth-card{padding:34px 30px 30px}}
@media (min-width:1024px){.auth .auth-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"say card" "more card";gap:24px 56px;align-items:start}.auth-say{align-self:end}.auth-card{align-self:center}.auth-lead{font-size:17px}}
@media (min-width:768px){.auth-card{padding:40px}}

.portal{padding:32px 0 72px;background:var(--c-muted);min-height:70vh}
.p-head{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-bottom:8px}
.p-grid{display:grid;gap:20px}
.p-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:0 20px}
.p-nav::-webkit-scrollbar{display:none}
.p-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;color:var(--c-ink-2);font-weight:600;font-size:14px;text-decoration:none;background:var(--c-surface);border:1px solid var(--c-line)}
.p-nav a span{font-size:12px;color:var(--c-ink-2);background:var(--c-chip);border-radius:999px;padding:1px 8px}
.p-nav a.on{background:var(--c-brand);color:var(--c-brand-ink);border-color:var(--c-brand)}
.p-nav a.on span{background:color-mix(in srgb,var(--c-brand-ink) 20%,transparent);color:var(--c-brand-ink)}
.p-main{min-width:0;display:grid;gap:28px;align-content:start}
.p-tiles{margin:0}
.p-sec h2{font-size:20px;margin:0}
.p-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.p-sec-h a{font-weight:600;font-size:14px}
.p-sec.lx-card h2{margin-bottom:4px}
.p-empty{display:grid;justify-items:start;gap:8px;padding:28px;border:1px dashed var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.p-empty b{font-family:var(--font-display);font-size:17px}
.p-empty p{margin:0 0 8px;color:var(--c-ink-2)}
.p-home{display:grid;gap:8px;align-content:start}
.p-note{margin:0;font-size:13px;font-weight:600;color:var(--c-ink-2)}
.p-note.down{color:var(--c-live)}
.p-note.underway{color:var(--c-ink)}.p-home.underway .lcard{opacity:.62}.p-home.underway .lcard:hover{opacity:1}
.p-searches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-search{display:grid;gap:12px;padding:18px 20px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel)}
.ps-main{display:grid;gap:4px;min-width:0}
.ps-name{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--c-ink)}
.ps-where{font-size:13.5px;color:var(--c-ink-2)}
.ps-count{font-size:14px}
.ps-count em{font-style:normal;font-weight:700;color:var(--c-live)}
.ps-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ps-tools form{margin:0}
.ps-tools select{min-height:40px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 13px var(--font-body);padding:0 10px}
@media (min-width:768px){.p-search{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.p-form{max-width:none;gap:24px}
.p-channel{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.p-channel legend{font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:8px;padding:0}
.p-channel label{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.p-agent .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p-agent .tc-agent{border-top:0;padding-top:0}
@media (min-width:1200px){
  .portal{padding-top:48px}
  .p-grid{grid-template-columns:220px minmax(0,1fr) 300px;gap:32px;align-items:start}
  .p-nav{flex-direction:column;margin:0;padding:0;position:sticky;top:84px}
  .p-nav a{justify-content:space-between;border:0;background:transparent;border-radius:var(--r-control)}
  .p-nav a:hover{background:var(--c-surface)}
  .p-agent{position:sticky;top:84px}
}
.save-search{margin:0}
.results-save{display:flex;justify-content:center;margin-top:16px}
.toolbar .save-search{margin-left:auto}
@media (min-width:768px){.p-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.p-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:767px){.p-tiles div{padding:14px 12px}.p-tiles dd{font-size:24px}}

/* Blog (D41) */
.btopics{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px}
.btopics::-webkit-scrollbar{display:none}
.btopics a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--c-line);color:var(--c-ink);font-size:13px;font-weight:600;text-decoration:none;background:var(--c-surface)}
.btopics a small{color:var(--c-ink-2);font-weight:500}
.btopics a.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.btopics a.on small{color:inherit;opacity:.8}
@media (min-width:768px){.btopics{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.blog-list{padding:40px 0 80px}
.bgrid{display:grid;gap:36px 24px}
@media (min-width:768px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}}
.bcard{display:grid;gap:14px;align-content:start;min-width:0}
.bphoto{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--c-muted)}
.bphoto img{width:100%;height:100%;object-fit:cover;transition:transform 560ms var(--ease)}
.bcard:hover .bphoto img{transform:scale(1.03)}
.bvideo{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:4px;background:color-mix(in srgb,var(--c-surface) 94%,transparent);color:var(--c-ink);font:700 10px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.bbody{display:grid;gap:8px}
.bcat{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-link);text-decoration:none}
.bcard h2{font-size:20px;line-height:1.25;margin:0}
.bcard h2 a{color:var(--c-ink);text-decoration:none}
.bcard h2 a:hover{color:var(--c-link)}
.bcard p{margin:0;color:var(--c-ink-2);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bmeta{font-size:12.5px;color:var(--c-ink-2)}
.bcard.lead{margin-bottom:48px}
@media (min-width:768px){.bcard.lead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}.bcard.lead h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em}.bcard.lead p{-webkit-line-clamp:4;font-size:17px}}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:48px;font-weight:600}

.post-meta{margin:0;color:var(--c-ink-2);font-size:14px}
.post-meta b{color:var(--c-ink)}
.wrap.narrow{max-width:800px}
.post-body{font-size:18px;line-height:1.75;padding-top:clamp(28px,4vw,48px);padding-bottom:16px}
.post-body p,.post-body ul,.post-body ol{margin:0 0 22px}
.post-body h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:44px 0 16px}
.post-body h3{font-size:21px;margin:32px 0 12px}
.post-body img{border-radius:var(--r-media);margin:8px 0;height:auto}
.post-body hr{border:0;border-top:1px solid var(--c-line);margin:40px 0}
.post-body blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--c-accent);color:var(--c-ink-2);font-size:20px}
.post-body a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px}
.post-body .video-frame{margin:0 0 28px;border-radius:var(--r-panel);overflow:hidden}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px;display:block;overflow-x:auto}
.post-body td,.post-body th{border-bottom:1px solid var(--c-line);padding:10px 12px;text-align:left}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 32px}
.post-tags a{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--c-chip);color:var(--c-ink);text-decoration:none}
/* Blog workover (2026-09-30): topics sit above the posts instead of on the hero photo; titles clamp so rows line up. */
.blog-list .btopics{margin-bottom:40px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.blog-list .btopics a:last-child{margin-right:40px}
.bcard h2{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard.lead h2{-webkit-line-clamp:4}
.post-body h2[id]{scroll-margin-top:96px}
.blive{margin:36px 0 44px;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-muted);font-size:15px;line-height:1.55}
.blive-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.blive-h a{font-weight:600;font-size:14px}
.blive .lgrid.three{grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:768px){.blive .lgrid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.post-body .blive a{text-decoration:none}.post-body .blive .laddr{color:var(--c-ink)}.post-body .blive{font-size:15px;line-height:1.5}
/* Blog bodies style every img (natural height, margins, rounded); listing cards in the rail keep their own fixed photo box. */
.post-body .lphoto img{height:100%;margin:0;border-radius:0}
.post-body .blive .lgrid.three{column-gap:24px}
/* The dots are decoration; in three-across rails the card is too narrow for them and the photo count together. */
.lgrid.three .ldots,.blive .ldots{display:none}

/* Home: lifestyle tiles and the homeowner section */
.hl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hl-card{min-height:180px}
.hl-card.wide{grid-column:1/-1;min-height:240px}
.hl-card .hc-text b{font-size:19px}
.hl-card.wide .hc-text b{font-size:26px}
.hl-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 0}
.hl-more span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);margin-right:6px}
.hl-more a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color 160ms var(--ease)}
.hl-more a:hover{border-color:var(--c-ink);text-decoration:none}
@media (min-width:768px){
  .hl-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:16px}
  .hl-card,.hl-card.wide{min-height:0}
  .hl-card.wide{grid-column:span 2}
  .hl-card.wide .hc-text b{font-size:32px}
}
@media (min-width:1200px){.hl-grid{grid-auto-rows:300px}}

.hsell .wrap{display:grid;gap:32px}
.hs-photo{border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);aspect-ratio:4/3}
.hs-photo img{width:100%;height:100%;object-fit:cover}
.hs-text h2{margin:14px 0 14px}
.hs-dek{font-size:17px;line-height:1.7;color:var(--c-ink-2);margin:0 0 26px;max-width:52ch}
.hs-value{display:grid;gap:14px;max-width:560px}
.hs-value .btn{justify-self:start}
.hs-note{margin:12px 0 0;font-size:13px;color:var(--c-ink-2)}
.hs-note a{text-decoration:underline;text-underline-offset:3px}
.hs-steps{list-style:none;counter-reset:st;margin:36px 0 0;padding:0;display:grid;gap:0;max-width:560px}
.hs-steps li{counter-increment:st;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 0;padding:16px 0;border-top:1px solid var(--c-line)}
.hs-steps li::before{content:"0" counter(st);grid-row:span 2;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--c-accent);padding-top:2px}
.hs-steps b{font-family:var(--font-display);font-size:16px}
.hs-steps span{color:var(--c-ink-2);font-size:15px;line-height:1.6}
.hs-link{display:inline-block;margin-top:18px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:768px){.hs-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}.hs-value .btn{justify-self:stretch}}
@media (min-width:1200px){.hsell .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:center}.hs-photo{aspect-ratio:4/5}}
.ht-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* D298: the instant home value page */
.hv-hero-note{display:block;margin-top:10px;font-size:15px;opacity:.85}
.hv-facts-line{margin:4px 0 0;font-size:14px;opacity:.8}
.hv-facts{margin-top:22px;max-width:640px;padding:22px 24px;border-radius:18px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 18px 40px rgba(10,20,30,.22)}
.hv-facts-say{margin:0 0 4px;font-size:16px;line-height:1.5;color:var(--c-ink)}
.hv-facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.hv-pool{display:flex;align-items:center;gap:20px;border:0;margin:16px 0 18px;padding:0;font-size:16px}
.hv-pool legend{float:left;margin-right:6px;color:var(--c-ink-2)}
.hv-pool label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.hv-next-wrap{display:grid;gap:32px}
.hv-agent{display:flex;align-items:center;gap:14px;margin-top:20px}
.hv-agent img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:top;background:var(--c-tint)}
.hv-agent b{display:block;font-size:16px}
.hv-agent a{color:var(--c-link);font-size:15px}
.hv-details{display:grid;gap:16px;align-content:start}
.hv-details .btn{justify-self:start}
.hv-plan{display:grid;gap:10px;border:0;margin:0;padding:0}
.hv-plan legend{margin-bottom:10px;font-size:13px;color:var(--c-ink-2)}
.hv-plan label{display:flex;align-items:center;gap:10px;font-size:17px;cursor:pointer}
.hv-plan input{width:18px;height:18px;accent-color:var(--c-brand)}
.hv-select{display:grid;gap:6px;font-size:13px;color:var(--c-ink-2)}
.hv-select select{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body)}
.hv-sent{align-self:start;padding:24px;border-radius:18px;background:var(--c-surface)}
.hv-sent b{font-size:18px}
.hv-sent p{margin:6px 0 0;color:var(--c-ink-2)}
@media (min-width:768px){.hv-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.hv-next-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}}
/* D298: the home value field in three steps, with address suggestions */
.hv-form{display:grid;gap:14px;max-width:620px}
.hv-step{display:grid;gap:14px}
.hv-form.on .hv-step:not(.cur){display:none}
.hv-step .btn{justify-self:start}
.hv-addr{position:relative}
.hv-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);border-radius:12px;box-shadow:0 14px 34px rgba(10,20,30,.18);max-height:300px;overflow:auto}
.hv-pick{margin:8px 0 0;font-size:14px;font-weight:600}
.hv-list li{padding:11px 12px;border-radius:8px;font-size:15px;line-height:1.35;cursor:pointer}
.hv-list li:hover,.hv-list li[aria-selected=true]{background:var(--c-tint)}
.hv-for{justify-self:start;margin:0;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--c-ink-2);text-align:left;cursor:pointer}
.hv-for::after{content:" \00b7  Change";color:var(--c-link)}
.hv-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.hv-form .tcpa{font-size:11px;color:var(--c-ink-2);line-height:1.55;margin:0;grid-column:1/-1}
.hv-form .sms-ok{grid-column:1/-1}
.photo-band .hv-form .tcpa,.photo-band .hv-form .sms-ok,.photo-band .hv-for{color:rgba(255,255,255,.72)}
@media (min-width:768px){.hv-step1,.hv-step2{grid-template-columns:minmax(0,1fr) auto;align-items:end}.hv-step3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}.hv-step .btn{justify-self:stretch}}
@media (max-width:767px){.hv-step .btn{width:100%}}
@media (max-width:767px){.hl-card:not(.wide) .hc-text{padding:16px}.hl-card:not(.wide) .hc-text b{font-size:16px}.hs-value .btn{width:100%}}

/* Community page: homeowner band and price-reduced rail */
.hv-band .wrap{display:grid;gap:36px}
.hv-say h2{margin:14px 0 14px;max-width:16ch}
.hv-say p{color:var(--c-ink-2);font-size:17px;line-height:1.7;max-width:52ch;margin:0 0 26px}
.hv-say .hs-value,.hv-say .hv-form{max-width:620px}
.hv-say .hs-note{margin-top:12px;font-size:13px}
.hv-stats{margin:0;display:grid;gap:0;border-top:1px solid var(--c-line)}
.hv-stats div{padding:18px 0;border-bottom:1px solid var(--c-line)}
.hv-stats dt{font-size:13px;color:var(--c-ink-2)}
.hv-stats dd{margin:4px 0 0;font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--c-ink);font-variant-numeric:tabular-nums}
@media (min-width:1200px){.hv-band .wrap{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:80px;align-items:center}}
.reduced .results-foot{margin-top:40px}
/* Open houses (D186): a plain heading per local day, the time window above each card. */
.oh-day{margin-top:48px}
.oh-day:first-of-type{margin-top:8px}
.oh-day h3{margin:0 0 16px}
.oh-wk{font-size:14px;font-weight:500;color:var(--c-ink-2);margin-left:8px}
.oh-item{display:flex;flex-direction:column;min-width:0}
.oh-item .lcard{flex:1}
.oh-time{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--c-ink)}
.oh-filter label{font-size:14px;color:var(--c-ink-2)}
.oh-filter select{font:inherit;min-height:44px;padding:0 10px;border:1px solid var(--c-line);border-radius:var(--r-control);margin-left:6px;background:var(--c-surface);color:var(--c-ink)}
.lx-open a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Home: review slider (D42). One centered quote at a time on the section ground, muted source marks, dots. */
.hrev{text-align:center}
.rev-head .eyebrow{justify-content:center}
.rev-head h2{margin-bottom:10px}
.rev-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin:0 0 8px;color:var(--c-ink-2);font-size:14px}
.rev-badges .rb{display:inline-flex;align-items:center;gap:8px;color:var(--c-ink-2);text-decoration:none}
.rev-badges .rb b{color:var(--c-ink);font-family:var(--font-display);font-weight:800}
.rev-badges i{width:4px;height:4px;border-radius:50%;background:var(--c-line)}
/* Each source's badge (2026-10-04): its real logo, small stars, the rating, and the count. */
.rev-badges .rb-logo{display:block;flex:none}
.rev-badges .rb-logo.z{width:auto;height:17px;color:var(--c-ink)}
.rev-badges .rb .stars svg{width:14px;height:14px}
.rev-badges .rb .stars{gap:2px}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:28px;outline:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-slide{scroll-snap-align:center;margin:0;padding:8px 4px;display:grid;justify-items:center;gap:22px}
.rev-meta{display:grid;justify-items:center;gap:12px}
.stars{display:inline-flex;gap:3px}
.stars svg{fill:var(--c-line)}
.stars svg.on{fill:var(--c-accent)}
.rev-slide blockquote{margin:0;max-width:46ch;font-family:var(--font-display);font-size:clamp(17px,1.7vw,21px);font-weight:500;line-height:1.55;letter-spacing:-.005em;color:var(--c-ink-2);text-wrap:balance}
.rev-slide blockquote::before{content:"\201C"}
.rev-slide blockquote::after{content:"\201D"}
.rev-slide figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:14px;color:var(--c-ink-2)}
.rev-slide figcaption b{color:var(--c-ink);font-weight:600}
.rev-when{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.rev-on{color:var(--c-ink-2);font-size:13px}
a.rev-on{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
a.rev-on:hover{color:var(--c-ink);text-decoration-color:currentColor}
/* Each dot is drawn by ::before inside a 24px tall button, so the tap target meets the 24px minimum while the dot stays small. */
.rev-dots{display:flex;justify-content:center;gap:2px;margin-top:22px}
.rev-dots button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width 240ms var(--ease)}
.rev-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--c-ink) 22%,transparent);transition:width 240ms var(--ease),background 240ms var(--ease)}
.rev-dots button[aria-current="true"]{width:36px}
.rev-dots button[aria-current="true"]::before{width:26px;background:var(--c-ink)}
.rev-dots button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:999px}
.rev-sample{margin:22px 0 0;font-size:12px;color:var(--c-ink-2)}
/* /reviews/ (D186): every review as a calm card, in a grid that grows with the screen. */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.rev-card{margin:0;display:grid;align-content:start;gap:14px;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.rev-card blockquote{margin:0;max-width:65ch;font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.rev-card figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--c-ink-2)}
.rev-card figcaption b{color:var(--c-ink);font-weight:600}
/* The trust line under a community or seller hero (D186): one plain sentence, no stars or badges. */
.hero .trust{margin:0 0 20px;font-size:14px;color:rgba(255,255,255,.9)}
.hero .trust a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.hero .trust a:hover{text-decoration-color:currentColor}
.hero .sub+.trust{margin-top:-12px}
@media (min-width:1200px){.rev-slide blockquote{max-width:50ch}}
.rd-item[hidden]{display:none !important}
.rd-item{display:contents}
.reduced .results-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.reduced .results-foot .rd-count{flex-basis:100%;text-align:center;margin:0}

/* Buyer and seller pages (planning/23, D44). Colors only from theme tokens. */
.guide-hero{min-height:400px;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-line:rgba(255,255,255,.4);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.guide-hero .eyebrow{margin-top:18px}
.guide-hero h1{font-size:clamp(36px,5.6vw,68px);line-height:.98}
.guide-hero .field::after{background:var(--c-accent)}
.gh-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:rgba(255,255,255,.9)}
.gh-points li{display:flex;align-items:center;gap:8px}
.gh-points svg{color:var(--c-accent)}
.gh-value{max-width:620px}
.gh-value .hs-value{gap:16px}
@media (min-width:768px){.guide-hero{min-height:460px}.gh-value .hs-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.gchecks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.gchecks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5}
.gchecks svg{color:var(--c-accent);margin-top:3px}
.gchecks.small{margin-top:14px;gap:8px}
.gchecks.small li{font-size:14px;color:var(--c-ink-2)}
.cin.wide{grid-column:1/-1}
.cout li[hidden]{display:none}
.cwhy{font-size:14px;line-height:1.55;color:var(--c-ink-2);margin:14px 0 0}
.cgo{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
@media (max-width:767px){.cgo .btn{flex:1 1 100%}}
.gpa .wrap,.gvalue .wrap{display:grid;gap:40px}
@media (min-width:900px){.gpa .wrap,.gvalue .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.gpa-lender{margin-top:32px;padding-top:22px;border-top:1px solid var(--c-line)}
.gpa-lender .cl,.gt .cl{display:block;font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:12px}
.gpa-form{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);padding:24px}
@media (min-width:768px){.gpa-form{padding:36px}}
.gvalue .hs-value{margin-top:8px}
.gp-grid{display:grid;gap:0}
.gp{padding:24px 0;border-top:1px solid var(--c-line)}
.gp b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em}
.gp p{margin:8px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.65;max-width:52ch}
@media (min-width:768px){.gp-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.gp{padding:28px 0}}
@media (min-width:1100px){.gp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gsteps{list-style:none;margin:0;padding:0}
.gsteps li{display:grid;grid-template-columns:52px minmax(0,1fr);padding:22px 0;border-top:1px solid var(--c-line)}
.gsteps li:last-child{border-bottom:1px solid var(--c-line)}
.gs-n{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--c-link);padding-top:4px}
.gsteps em{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);margin-bottom:4px}
.gsteps b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800}
.gsteps p{margin:6px 0 0;color:var(--c-ink-2);font-size:15px;line-height:1.65}
.gs-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--c-ink-2)}
.gt-grid{display:grid;gap:12px}
@media (min-width:768px){.gt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gt{padding:24px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.gt .cl{margin-bottom:6px}
.gt b{display:block;font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.gt p{margin:10px 0 0;color:var(--c-ink-2);font-size:14.5px;line-height:1.55}
.glinks .ht-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.guide-hero .sub{max-width:56ch}
.gpa-lender .avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff}
.gpa-lender .avatar img{width:100%;height:100%;object-fit:cover}
.gpa-lender .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 14px var(--font-display)}

/* Neighborhood pages (D45): the way back to the community guide. Full bleed photo, photos sell. */
.parent-link{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:560px;overflow:hidden;background:var(--c-deep);color:#fff;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.82);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink)}
.parent-link > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pl-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 5%,transparent) 0%,color-mix(in srgb,var(--c-deep) 40%,transparent) 40%,color-mix(in srgb,var(--c-deep) 92%,transparent) 100%)}
.parent-link .wrap{width:100%;padding-top:96px;padding-bottom:56px}
.pl-body{display:grid;gap:16px;max-width:780px}
.pl-title{margin:0 !important;font-size:clamp(36px,5.4vw,68px);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.pl-dek{margin:0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88);max-width:58ch}
.pl-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:6px 0 8px}
.pl-facts div{display:flex;flex-direction:column-reverse}
.pl-facts dt{font-size:12px;color:rgba(255,255,255,.78)}
.pl-facts dd{margin:0;font-family:var(--font-display);font-size:clamp(24px,2.8vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em}
.pl-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:767px){.pl-actions .btn{flex:1 1 100%}}
@media (min-width:768px){.parent-link{min-height:620px}.parent-link .wrap{padding-bottom:72px}}
@media (min-width:1200px){.parent-link{min-height:680px}.parent-link .wrap{padding-bottom:88px}}

/* /communities/ (D47) */
.ci-hero{min-height:420px}
/* Short hero (D53): every page without a full hero opens with this band. Tokens go to their dark-ground values so stat lines,
   dates, and topic chips read on the photo. */
.hero.short{min-height:0;--c-ink:#fff;--c-ink-2:rgba(255,255,255,.8);--c-line:rgba(255,255,255,.4);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink);--c-chip:rgba(255,255,255,.14)}
.hero.short .wrap{padding-top:108px;padding-bottom:36px}
.hero.short h1{font-size:clamp(32px,4.8vw,56px);line-height:1;margin:8px 0 10px}
.hero.short .sub{font-size:16px;margin:0 0 10px}
.hero.short .statline{font-size:14px;color:var(--c-ink-2)}
.hero.short .statline b{color:#fff;font-variant-numeric:tabular-nums}
.hero.short .eyebrow{margin-top:0}
.hero.short .btopics{margin-top:18px}
.hero.short .btopics a{background:rgba(255,255,255,.08)}
.hero.short .btopics a.on{background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink)}
.hero.short .doc-intro,.hero.short .post-meta{color:var(--c-ink-2)}
.hero.short .doc-date{margin:14px 0 0}
.hero.short .doc-draft{margin:14px 0 0}
.hero.short .sub-brand{margin-bottom:12px}
@media (min-width:768px){.hero.short .wrap{padding-top:124px;padding-bottom:44px}.hero.short .sub{font-size:18px}}
@media (min-width:1200px){.hero.short .wrap{padding-top:136px;padding-bottom:52px}}
.ci-hero .eyebrow{color:#fff;margin-top:18px}
.ci-hero h1{font-size:clamp(36px,5.6vw,68px);line-height:.98}
.ci-hero .sub{max-width:56ch}
.hsearch.ci-search{grid-template-columns:minmax(0,1fr) auto;max-width:720px}
.ci-sort thead button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit}
.ci-sort thead button::after{content:"\2195";font-size:11px;opacity:.45}
.ci-sort th[aria-sort="ascending"] button::after{content:"\2191";opacity:1}
.ci-sort th[aria-sort="descending"] button::after{content:"\2193";opacity:1}
.ci-sort thead button:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px}
.ci-sort td{text-align:right;font-variant-numeric:tabular-nums}
.ci-sort thead th:not(:first-child){text-align:right}
.ci-groups{display:grid;gap:36px 40px}
@media (min-width:768px){.ci-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ci-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ci-group h3{font-size:17px;margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--c-line)}
.ci-group p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--c-ink-2)}
.ci-group ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.ci-group li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ci-group li a{padding:6px 0;font-size:15px}
.ci-group li small{font-size:12px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
/* Full width, full bleed map: edge to edge, no frame, and it runs to the bottom of its section. */
section.block.ci-map{padding-bottom:0}
.ci-map .map{width:100%;height:480px;min-height:0;border:0;border-radius:0}
@media (min-width:768px){.ci-map .map{height:600px}}
@media (min-width:1200px){.ci-map .map{height:680px}}
@media (max-width:767px){.ci-search .hs-q{border-bottom:0}.ci-search .btn{padding:0 22px}}

/* Simple document pages: legal (D48). */
.doc-intro{font-size:18px;line-height:1.6;color:var(--c-ink-2);max-width:62ch;margin:0}
.doc-date{font-size:13px;color:var(--c-ink-2);margin:18px 0 32px}
.doc-draft{display:inline-block;font-size:13px;font-weight:600;color:var(--c-ink);background:var(--c-chip);border:1px solid var(--c-line);border-radius:var(--r-control);padding:8px 12px;margin:-16px 0 32px}
.doc-grid{display:grid;gap:36px}
.doc-toc .cl{display:block;font-size:12px;font-weight:600;color:var(--c-ink-2);margin-bottom:10px}
.doc-toc ol{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px}
.doc-body section{padding:4px 0 20px;scroll-margin-top:84px}
.doc-body h2{font-size:22px;margin:0 0 12px}
.doc-body p,.doc-body li{font-size:16px;line-height:1.7;color:var(--c-ink-2);max-width:68ch}
.doc-body p{margin:0 0 12px}
.doc-body ul{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.doc-more{margin-top:24px !important;padding-top:20px;border-top:1px solid var(--c-line);font-size:14px !important}
@media (min-width:1000px){.doc-head .wrap.narrow,.doc .wrap.narrow{max-width:1080px}.doc-grid{grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}.doc-toc{position:sticky;top:84px}}

/* Contact and thanks (D48) */
.contact-hero .wrap,.thanks-hero .wrap{padding-bottom:64px}
.ways{display:grid;gap:12px;margin-top:28px;max-width:980px}
@media (min-width:900px){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}}
.way{display:grid;gap:4px;align-content:start;padding:22px;border-radius:var(--r-panel);background:color-mix(in srgb,var(--c-deep) 55%,transparent);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;backdrop-filter:blur(6px);transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.way:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px);text-decoration:none}
.way svg{color:var(--c-accent);margin-bottom:8px}
.way .cl{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.way b{font-family:var(--font-display);font-size:clamp(16px,1.7vw,19px);font-weight:800;line-height:1.3;overflow-wrap:break-word}
.way em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:rgba(255,255,255,.85)}
.thanks-hero{min-height:560px}
.thanks-hero .sub a{color:#fff;text-decoration:underline}

/* About, team, profiles, vendors (D48) */
.gs-row{display:flex;justify-content:center;max-width:960px;margin:0 auto}
.gs-row div{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;padding:4px 16px;text-align:center;border-left:1px solid var(--c-line)}
.gs-row div:first-child{border-left:0}
.gs-row dt{font-size:14px;color:var(--c-ink-2)}
.gs-row dd{margin:0;font-family:var(--font-display);font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1}
section.gstats.block{padding-block:40px}
.tm-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:1000px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tm-card{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;padding:22px 48px 22px 22px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color 140ms var(--ease),transform 140ms var(--ease)}
.tm-card:hover{border-color:var(--c-ink);transform:translateY(-2px);text-decoration:none}
.tm-photo,.st-photo,.mh-photo{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--c-tint);color:var(--c-ink);font:800 20px var(--font-display)}
.tm-photo{width:72px;height:72px}
.tm-photo img,.st-photo img,.mh-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tm-text{display:grid;gap:2px;min-width:0}
.tm-text b{font-family:var(--font-display);font-size:17px}
.tm-text span{font-size:13px;color:var(--c-ink-2)}
.tm-text em{font-style:normal;font-size:13px;font-weight:600;color:var(--c-link)}
.tm-go{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--c-ink-2)}
.tm-join{border-style:dashed;background:transparent}
.tm-join .tm-photo{font-size:28px;font-weight:400}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:760px}
.st-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--c-line)}
.st-list li:last-child{border-bottom:1px solid var(--c-line)}
.st-photo{width:48px;height:48px;font-size:15px}
.st-list b{display:block;font-family:var(--font-display);font-size:16px}
.st-list span span{font-size:13px;color:var(--c-ink-2)}
.st-list a{font-size:13px;font-weight:600}
.gl-row{display:grid;gap:28px;align-items:center}
.gl-card{display:grid;gap:18px;padding:28px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);max-width:420px}
.gl-actions{display:flex;flex-wrap:wrap;gap:12px}
.gl-actions .btn{flex:0 1 auto;padding-inline:24px}
.gl-card .lc-who{gap:16px}
.gl-card .lc-who strong{font-size:18px}
.gl-card .lc-who span{font-size:14px}
.gl-card .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden}
.gl-card .avatar.mono{display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink);font:800 17px var(--font-display)}
.gl-card .fine{margin:0}
@media (min-width:900px){.gl-row{grid-template-columns:minmax(0,1fr) 420px;gap:64px}}
.member-hero{min-height:520px}
.mh-row{display:grid;gap:28px;align-items:end}
.mh-photo{width:180px;height:180px;background:#fff;font-size:48px;border:4px solid rgba(255,255,255,.85)}
@media (min-width:900px){.mh-row{grid-template-columns:minmax(0,1fr) 280px}.mh-photo{width:280px;height:280px;justify-self:end}}
.member-body h3{font-size:16px;margin:28px 0 12px}
.member-body .chips{list-style:none;padding:0;margin:0}
.vendors-head .wrap{max-width:1168px}
.vfilter{display:flex;align-items:center;gap:10px;max-width:520px;min-height:52px;padding:0 16px;margin-top:4px;border-radius:var(--r-control);background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-ink-2)}
.vfilter:focus-within{border-color:var(--c-cta)}
.vfilter input{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none}
.vjump{display:flex;gap:8px;overflow-x:auto;padding:20px 0 28px;scrollbar-width:none}
.vjump .chip{white-space:nowrap}
.vgroup{margin-bottom:48px}
.vgroup > h2{margin:0 0 20px !important;padding-bottom:12px;border-bottom:2px solid var(--c-ink)}
.vcats{display:grid;gap:28px 40px}
@media (min-width:768px){.vcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.vcats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vcat{scroll-margin-top:84px}
.vcat h3{font-size:15px;margin:0 0 6px;color:var(--c-ink-2);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.vcat ul{list-style:none;margin:0;padding:0}
.vcat li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--c-line)}
.vwho{display:grid;gap:2px;min-width:0}
.vwho b{font-size:15px}
.vwho span{font-size:13px;color:var(--c-ink-2)}
.vwho em{font-style:normal;font-size:12px;color:var(--c-ink-2)}
.vsp{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-link)}
.vphone{white-space:nowrap;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.vcat[hidden],.vgroup[hidden],.vcat li[hidden]{display:none}
.units-table th,.units-table td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.units-table th:first-child,.units-table tbody th{text-align:left}
.nf-links{margin-top:22px}
/* Neighborhood cards without a photo yet: brand gradient with a quiet place mark. */
.vcard .photo.ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--c-deep),var(--c-brand));color:rgba(255,255,255,.55)}
/* The card line shows whole: blurbs are written as one short line, and a clamp under the grid's stretch showed half a third line. */
.vcard span{display:block;align-self:start}
/* Photo section (D94): one photo, full width of the column, or edge to edge when wide. */
.photo-block figure{margin:0}
.photo-block img{display:block;width:100%;height:auto;border-radius:var(--r-media)}
.photo-block.wide img{border-radius:0;max-height:70vh;object-fit:cover}
.photo-block figcaption{font-size:13px;color:var(--c-ink-2);margin-top:10px}
.photo-block.wide figcaption{padding:0 24px}
.editorial img{max-width:100%;height:auto;border-radius:var(--r-media)}
.editorial h2,.editorial h3{font-family:var(--font-display);margin:28px 0 12px}
.editorial ul,.editorial ol{font-size:17px;line-height:1.7;margin:0 0 20px;padding-left:24px}
.editorial blockquote{margin:0 0 20px;padding-left:18px;border-left:3px solid var(--c-brand);font-size:19px;color:var(--c-ink-2)}
/* Call to action band (D94): heading, a line, and buttons; on the page photo when asked. */
.cta-band{position:relative;overflow:hidden}
.cta-band .cta-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-band .dek{font-size:18px;line-height:1.6;color:var(--c-ink-2);margin:0;max-width:60ch}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cta-band.on-photo{background:var(--c-deep);color:#fff;padding:88px 0}
.cta-band.on-photo .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.cta-band.on-photo .wrap{position:relative}
.cta-band.on-photo .dek{color:rgba(255,255,255,.82)}
.cta-band.on-photo h2{color:#fff}
/* Custom forms (D113): plain options with round or square marks, never pills; a select and a date in the field's underline style. */
.cf-block .lead-form{max-width:640px}
/* The form section with words (D117 design pass): the statement beside the form on wide screens, as on Let's talk; the send button
   runs the full width of the form. */
.cf-split{display:grid;gap:28px}
.cf-say .eyebrow{margin-bottom:12px}
.cf-block .cf-say h2{margin-bottom:14px}
.cf-say .answer{margin:0;max-width:46ch;font-size:17px;line-height:1.7;color:var(--c-ink-2)}
.cf-panel .lead-form button[type="submit"]{justify-self:stretch;min-height:56px;margin-top:4px}
@media (min-width:1024px){.cf-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.cf-say{position:sticky;top:140px;padding-top:8px}.cf-split .cf-panel .lead-form{max-width:none}}
.cf-who{margin:0;font-size:15px;color:var(--c-ink-2)}
.cf-group{border:0;margin:0;padding:0;min-width:0}
.cf-label{display:block;font-size:13px;letter-spacing:.02em;color:var(--c-ink-2);margin:0 0 10px;padding:0}
.cf-req{color:var(--c-ink-2)}
.cf-opts{display:grid;gap:10px}
.cf-opt{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.4;cursor:pointer;min-height:32px}
.cf-opt input{width:20px;height:20px;margin:0;accent-color:var(--c-cta);flex:none}
.cf-select select,.cf-date input{display:block;width:100%;margin:0;padding:8px 0 12px;border:0;border-bottom:1px solid var(--c-line);border-radius:0;background:transparent;color:var(--c-ink);font:400 17px/1.45 var(--font-body);outline:none}
.cf-select select:focus,.cf-date input:focus{border-bottom-color:var(--c-cta)}
.cf-missing{margin:0 0 24px;padding-left:20px;font-size:17px}
@media (min-width:768px){.cf-opts{grid-template-columns:1fr 1fr}}

/* Section backgrounds (D110). Light, Mid, and Dark are the theme's surface, tint, and deep, so they follow the site's dark mode.
   A custom color sets --band inline; on-dark turns the words white, on-light turns them black where the theme is dark. The
   sections inside drop their own background; two bands of one color in a row share a gap (sbg--join, set by joinBands). */
.sbg{background:var(--band);color:var(--c-ink)}
.sbg--light{--band:var(--c-surface)}
.sbg--mid{--band:var(--c-tint)}
.sbg--dark{--band:var(--c-deep)}
.sbg>section,.sbg>section.block.alt,.sbg>section.block.tint{background:transparent}
.sbg.sbg--join>section{padding-top:0}
.sbg.on-dark{--c-ink:#fff;--c-ink-2:rgba(255,255,255,.78);--c-line:rgba(255,255,255,.28);--c-link:#fff;--c-brand:var(--c-cta);--c-brand-ink:var(--c-cta-ink);--c-surface:rgba(255,255,255,.08);--c-muted:rgba(255,255,255,.07);--c-tint:rgba(255,255,255,.07);--c-chip:rgba(255,255,255,.14)}
/* A custom color can sit near the middle, where white and black both only just pass; faded secondary words would not. On a
   custom band the secondary words take the main word color (the rule after the dark-theme ones below wins over them). */
[data-theme="dark"] .sbg.on-light{--c-ink:rgba(0,0,0,.88);--c-ink-2:rgba(0,0,0,.68);--c-line:rgba(0,0,0,.16);--c-link:rgba(0,0,0,.88);--c-surface:rgba(255,255,255,.72);--c-muted:rgba(0,0,0,.05);--c-tint:rgba(0,0,0,.05);--c-chip:rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .sbg.on-light{--c-ink:rgba(0,0,0,.88);--c-ink-2:rgba(0,0,0,.68);--c-line:rgba(0,0,0,.16);--c-link:rgba(0,0,0,.88);--c-surface:rgba(255,255,255,.72);--c-muted:rgba(0,0,0,.05);--c-tint:rgba(0,0,0,.05);--c-chip:rgba(0,0,0,.08)}}
.sbg[data-band^="#"],[data-theme] .sbg.on-light[data-band^="#"]{--c-ink-2:var(--c-ink)}

/* Rows that swipe (D111, D117 design pass): blog posts and the video carousel. The track runs past the page column to the window
   edge, so the next card peeks in; the column's left edge stays the snap line. Arrows beside the heading on wider screens, the
   reviews slider's dots under the row on phones. */
section.hrow{overflow-x:clip}
.hrow-side{display:flex;align-items:center;gap:20px}
.hrow-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);text-decoration:none}
.hrow-all svg{transition:transform 220ms var(--ease)}
.hrow-all:hover{text-decoration:none;color:var(--c-link)}
.hrow-all:hover svg{transform:translateX(3px)}
.hrow-nav{display:none;gap:10px}
.hrow-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:background 200ms var(--ease),color 200ms var(--ease),border-color 200ms var(--ease),opacity 200ms var(--ease),transform 120ms var(--ease)}
.hrow-btn:hover:not(:disabled){background:var(--c-ink);border-color:var(--c-ink);color:var(--band,var(--c-bg))}
.hrow-btn:active:not(:disabled){transform:scale(.94)}
.hrow-btn:disabled{opacity:.3;cursor:default;box-shadow:none}
.hrow--still .hrow-nav,.hrow--still .hrow-dots{display:none}
.hrow-track{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(50% - 50vw);padding:6px calc(50vw - 50%) 20px;scroll-padding-inline:calc((100vw - min(100vw,1168px))/2 + var(--gut,20px))}
section.hrow{--gut:20px}
@media (min-width:768px){section.hrow{--gut:40px}}
@media (min-width:1200px){section.hrow{--gut:56px}}
.hrow-track::-webkit-scrollbar{display:none}
.hrow-track>*{scroll-snap-align:start;min-width:0}
.hrow-track:focus-visible{outline:none}
.hrow-track:focus-visible>*:first-child{outline:2px solid var(--c-accent);outline-offset:4px;border-radius:var(--r-panel)}
.hrow-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
.hrow-dots button{display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.hrow-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--c-ink) 22%,transparent);transition:width 240ms var(--ease),background 240ms var(--ease)}
.hrow-dots button[aria-current="true"]{width:36px}
.hrow-dots button[aria-current="true"]::before{width:26px;background:var(--c-ink)}
.hrow-dots button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:999px}
@media (min-width:768px){.hrow-nav{display:flex}.hrow-dots{display:none}.hrow-track{grid-auto-columns:calc((100% - 24px)/2);gap:24px}}
@media (min-width:1200px){.hrow-track{grid-auto-columns:calc((100% - 56px)/3);gap:28px}}

/* Blog post cards: a 3:2 photo that lifts and slowly zooms, the category as a small eyebrow, the title clamped to three lines with
   an underline that draws in, the date and a round arrow pinned to the bottom so a row lines up. */
.pcard a{display:grid;grid-template-rows:auto 1fr;height:100%;color:inherit;text-decoration:none}
.pcard a:hover{text-decoration:none}
.pcard-photo{position:relative;aspect-ratio:3/2;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.pcard-photo picture{display:block;height:100%}
.pcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.pcard-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--c-deep) 30%,transparent));opacity:0;transition:opacity 420ms var(--ease);pointer-events:none}
.pcard-ph{position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--c-accent) 45%,transparent),transparent 60%),linear-gradient(150deg,var(--c-deep),var(--c-brand))}
.pcard a:hover .pcard-photo{transform:translateY(-4px);box-shadow:0 22px 44px -18px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.pcard a:hover .pcard-photo img{transform:scale(1.06)}
.pcard a:hover .pcard-photo::after{opacity:1}
.pcard-body{display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:20px 2px 0}
.pcard-cat{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-link)}
.pcard-cat::before{content:"";width:16px;height:2px;background:var(--c-accent)}
.pcard h3{margin:0;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size 480ms var(--ease)}
.pcard a:hover h3 span{background-size:100% 1.5px}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:end;padding-top:6px}
.pcard time{font-size:13px;color:var(--c-ink-2)}
.pcard-go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--c-line);color:var(--c-ink);flex:none;transition:background 260ms var(--ease),border-color 260ms var(--ease),color 260ms var(--ease)}
.pcard-go svg{transition:transform 260ms var(--ease)}
.pcard a:hover .pcard-go{background:var(--c-ink);border-color:var(--c-ink);color:var(--band,var(--c-bg))}
.pcard a:hover .pcard-go svg{transform:translateX(2px)}
.pcard a:focus-visible{outline:none}
.pcard a:focus-visible .pcard-photo{outline:3px solid var(--c-accent);outline-offset:3px}
@media (min-width:1200px){.pcard h3{font-size:20px}}

/* Videos (D111, D117 design pass): 16:9 pictures under a soft scrim, one glass play button over the whole picture that fills white
   on hover, the title under the picture in a grid and on it in the carousel. A Vimeo video shows a play card in the theme's colors. */
.vid-grid{display:grid;gap:36px 24px}
@media (min-width:768px){.vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vid-grid.one{grid-template-columns:minmax(0,1fr);max-width:880px}}
@media (min-width:1200px){.vid-grid:not(.one):not(.two){grid-template-columns:repeat(3,minmax(0,1fr))}.vid-grid{gap:44px 28px}}
.vid{margin:0;display:grid;gap:16px;align-content:start;min-width:0}
.vid .vid-poster{border-radius:var(--r-panel);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 10%,transparent);transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.vid .vid-poster::after{background:linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 18%,transparent) 0%,transparent 35%,transparent 55%,color-mix(in srgb,var(--c-deep) 72%,transparent) 100%);transition:opacity 420ms var(--ease)}
.vid .vid-poster img{transition:transform 900ms var(--ease)}
.vid .vid-poster:hover{transform:translateY(-4px);box-shadow:0 24px 48px -20px color-mix(in srgb,var(--c-deep) 60%,transparent)}
.vid .vid-poster:hover img{transform:scale(1.05)}
.vid .vid-poster.playing{transform:none}
.vid .poster .play{left:0;top:0;width:100%;height:100%;margin:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;z-index:2}
.vid .poster .play:hover{transform:none}
.vid .poster .play:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px;border-radius:var(--r-panel)}
.play-dot{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform 320ms var(--ease),background 320ms var(--ease),color 320ms var(--ease),border-color 320ms var(--ease)}
.play-dot svg{width:24px;height:24px;margin-left:3px}
.vid .poster .play:hover .play-dot,.vid .poster .play:focus-visible .play-dot{background:#fff;border-color:#fff;color:var(--c-deep);transform:scale(1.08)}
.vid .poster.vimeo{background:radial-gradient(90% 120% at 90% 0%,color-mix(in srgb,var(--c-accent) 50%,transparent),transparent 60%),linear-gradient(150deg,var(--c-deep),var(--c-brand))}
.vid-over{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:#fff;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.35);pointer-events:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:767px){.play-dot{width:56px;height:56px}.play-dot svg{width:20px;height:20px}.vid-over{left:16px;right:16px;bottom:14px;font-size:16px}}
.vid figcaption{display:grid;gap:6px}
.vid figcaption b{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--c-ink)}
.vid figcaption span{font-size:14px;line-height:1.55;color:var(--c-ink-2)}

/* Photo gallery (D111, D117 design pass): an even grid, Featured (the first photo large, the rest beside it), or rows that keep each
   photo's shape. Tight gaps; on hover a photo zooms slowly and an expand mark shows; captions sit on the photo. */
.gal-list{list-style:none;margin:0;padding:0}
.gal-list li{min-width:0}
.gal--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:768px){.gal--grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media (min-width:1200px){.gal--grid{grid-template-columns:repeat(4,1fr)}}
.gal--grid .gal-open{aspect-ratio:4/3}
.gal--featured{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gal--featured li:first-child{grid-column:1/-1}
.gal--featured .gal-open{aspect-ratio:1}
.gal--featured li:first-child .gal-open{aspect-ratio:3/2}
@media (max-width:767px){.gal--featured:is([data-n="2"],[data-n="4"],[data-n="6"],[data-n="8"]) li:last-child{grid-column:1/-1}.gal--featured:is([data-n="2"],[data-n="4"],[data-n="6"],[data-n="8"]) li:last-child .gal-open{aspect-ratio:2/1}}
@media (min-width:768px){
  .gal--featured{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,240px);gap:10px}
  .gal--featured .gal-open,.gal--featured li:first-child .gal-open{aspect-ratio:auto;height:100%}
  .gal--featured li:first-child{grid-column:span 2;grid-row:span 2}
  .gal--featured[data-n="1"] li:first-child{grid-column:1/-1}
  .gal--featured[data-n="2"] li:nth-child(2),.gal--featured[data-n="3"] li:not(:first-child),.gal--featured[data-n="4"] li:nth-child(2){grid-column:span 2}
  .gal--featured[data-n="2"] li:nth-child(2){grid-row:span 2}
  .gal--featured[data-n="6"] li:nth-child(6){grid-column:1/-1}
  .gal--featured[data-n="7"] li:nth-child(n+6),.gal--featured[data-n="8"] li:nth-child(6){grid-column:span 2}
}
.gal--rows{display:flex;flex-wrap:wrap;gap:8px}
.gal--rows::after{content:"";flex-grow:999}
.gal--rows li{flex:1 1 auto;height:180px;min-width:120px}
@media (min-width:768px){.gal--rows{gap:10px}.gal--rows li{height:260px}}
.gal--rows .gal-open{height:100%}
.gal--rows .gal-open img{width:auto;min-width:100%}
.gal-open{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--r-control);overflow:hidden;background:var(--c-muted);cursor:zoom-in;isolation:isolate}
.gal-open img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease),filter 420ms var(--ease)}
.gal-open::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c-deep) 14%,transparent);opacity:0;transition:opacity 420ms var(--ease);pointer-events:none}
.gal-open:hover img{transform:scale(1.05)}
.gal-open:hover::after{opacity:1}
.gal-zoom{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--c-deep);opacity:0;transform:scale(.85);transition:opacity 260ms var(--ease),transform 260ms var(--ease);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.gal-open:hover .gal-zoom,.gal-open:focus-visible .gal-zoom{opacity:1;transform:none}
.gal-open:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
.gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:36px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));color:#fff;font-size:13px;line-height:1.4;text-align:left;text-wrap:balance}
/* The viewer: a dark stage, a top bar with the count and Close, glass arrows, and each photo fading in as it loads. */
dialog.gal-box{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,10,12,.94);color:#fff;overflow:hidden}
dialog.gal-box[open]{animation:gal-in 260ms var(--ease)}
dialog.gal-box::backdrop{background:rgba(0,0,0,.86)}
@keyframes gal-in{from{opacity:0}}
html.gal-lock{overflow:hidden}
.gal-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 22px}
.gal-count{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.gal-box figure{position:absolute;inset:64px 12px 56px;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;place-items:center}
.gal-box img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-media);opacity:0;transform:scale(.985);transition:opacity 320ms var(--ease),transform 420ms var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.gal-box img.in{opacity:1;transform:none}
.gal-box figcaption{font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);text-align:center;max-width:70ch;text-wrap:balance}
.gal-x,.gal-prev,.gal-next{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background 200ms var(--ease),color 200ms var(--ease),transform 120ms var(--ease)}
.gal-prev,.gal-next{position:absolute;z-index:2;bottom:14px}
.gal-prev{left:14px}
.gal-next{right:14px}
.gal-x:hover,.gal-prev:hover,.gal-next:hover{background:#fff;color:#111}
.gal-prev:active,.gal-next:active{transform:scale(.94)}
.gal-x:focus-visible,.gal-prev:focus-visible,.gal-next:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:768px){.gal-box figure{inset:72px 96px 40px}.gal-prev,.gal-next{top:50%;bottom:auto;margin-top:-28px;width:56px;height:56px}.gal-prev{left:24px}.gal-next{right:24px}.gal-bar{padding:16px 18px 16px 32px}}

/* Link list (D111, D117 design pass): link-in-bio cards, one column, centered. A photo or an icon tile on the left, a round arrow that
   nudges on hover, a soft lift. On a dark band the cards turn to glass (the band's surface is a light veil). */
.llist .ll,.llist .sec-head{max-width:640px;margin-inline:auto}
.llist .sec-head{justify-content:center;text-align:center}
.llist .sec-head .eyebrow{justify-content:center}
.ll{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ll-btn{display:flex;align-items:center;gap:16px;min-height:76px;padding:10px 14px 10px 10px;border-radius:18px;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 6%,transparent),0 10px 26px -16px color-mix(in srgb,var(--c-deep) 28%,transparent);transition:transform 260ms var(--ease),box-shadow 260ms var(--ease),border-color 260ms var(--ease)}
.ll-btn:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--c-ink) 24%,transparent);box-shadow:0 2px 4px color-mix(in srgb,var(--c-deep) 8%,transparent),0 20px 40px -18px color-mix(in srgb,var(--c-deep) 42%,transparent)}
.ll-btn:active{transform:translateY(0) scale(.99)}
.ll-btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.ll-img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.ll-icon{display:grid;place-items:center;background:var(--c-tint);color:var(--c-link)}
.ll-text{flex:1;display:grid;gap:3px;min-width:0}
.ll-text b{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.ll-text small{font-size:13px;line-height:1.4;color:var(--c-ink-2)}
.ll-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-brand);color:var(--c-brand-ink)}
.ll-go svg{transition:transform 260ms var(--ease)}
.ll-btn:hover .ll-go svg{transform:translateX(3px)}
.ll-btn[target="_blank"]:hover .ll-go svg{transform:translate(2px,-2px)}
.sbg.on-dark .ll-btn{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px -18px rgba(0,0,0,.6)}
.sbg.on-dark .ll-icon{background:rgba(255,255,255,.12);color:#fff}
@media (min-width:768px){.ll-btn{min-height:84px;padding:12px 16px 12px 12px}.ll-img{width:60px;height:60px}.ll-text b{font-size:17px}}

/* Everything that moves on hover holds still for reduced motion. */
@media (prefers-reduced-motion:reduce){
  .hrow-track{scroll-behavior:auto}
  .pcard-photo,.pcard-photo img,.vid .vid-poster,.vid .vid-poster img,.gal-open img,.gal-box img,.ll-btn,.ll-go svg,.pcard-go svg,.hrow-all svg,.play-dot,.gal-zoom{transition:none !important;transform:none !important}
  dialog.gal-box[open]{animation:none}
  dialog.sheet[open]{animation:none}
  .ht-card,.tm-card,.ht-card:hover,.tm-card:hover{transition:none;transform:none}
}

/* Custom code (D112): the sandboxed frame, sized by the height its content reports. */
.ccode-frame{display:block;width:100%;height:160px;border:0}

/* Blog layout (D118). The post and the blog index run wider than the page column; the reading text keeps a measure near 70
   characters, and the rails use the rest of a wide screen. */
.wrap.wide{max-width:1600px}
/* A small photo behind a hero on purpose: blurred and darkened over the deep color, never a soft picture stretched to the window. */
.hero.blurred{overflow:hidden;background:radial-gradient(90% 120% at 88% 0%,color-mix(in srgb,var(--c-accent) 24%,transparent),transparent 62%),var(--c-deep)}
.hero .hbg.hblur{inset:-72px;width:calc(100% + 144px);height:calc(100% + 144px);filter:blur(40px) saturate(1.2);opacity:.6}
.hero.blurred::before{background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 86%,transparent) 0%,color-mix(in srgb,var(--c-deep) 58%,transparent) 55%,color-mix(in srgb,var(--c-deep) 40%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--c-deep) 55%,transparent) 0%,transparent 34%,transparent 66%,color-mix(in srgb,var(--c-deep) 75%,transparent) 100%)}

/* The post's title band: words on the left, the post's own photo sharp in a framed card at no more than its natural size. */
.ph-in{display:grid;gap:28px;align-items:center}
.ph-text{min-width:0}
.hero.post-head h1{font-size:clamp(32px,3.8vw,60px);line-height:1.03;letter-spacing:-.032em;margin:16px 0 14px;max-width:22ch}
.hero.post-head .ph-dek{font-size:17px;line-height:1.55;max-width:58ch;margin:0 0 22px;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-head .post-meta{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.post-head .post-meta b{color:#fff}
.pm-photo{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.pm-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ph-photo{position:relative;margin:0;width:100%;max-width:520px;aspect-ratio:3/2;border-radius:var(--r-panel);overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 32px 64px -28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14)}
.ph-photo img{width:100%;height:100%;object-fit:cover}
.ph-watch{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--c-deep);font:700 11px var(--font-display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25);text-shadow:none}
.ph-watch:hover{background:#fff;text-decoration:none}
@media (min-width:768px){.hero.post-head .wrap{padding-top:124px;padding-bottom:52px}.hero.post-head .ph-dek{font-size:18px}}
@media (min-width:1024px){.ph-in{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(48px,5vw,96px)}.ph-photo{justify-self:end}}
@media (min-width:1200px){.hero.post-head .wrap{padding-top:140px;padding-bottom:72px}}

/* The body: one column under 1024 (the list a card under the title, the author and share after the post), the text with a right
   rail from 1024, and three columns from 1400 with the list on the left. Rails stick under the header. */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.post-grid>*{width:100%;max-width:44rem;margin-inline:auto;min-width:0}
.post-toc{order:0;margin-bottom:28px}
.post-main{order:1}
.post-side{order:2;display:grid;gap:20px;align-content:start}
.post-grid .post-body{padding-top:0}
.post-body>p:first-child{font-size:1.1em;line-height:1.65;color:var(--c-ink)}
.post-body h2[id]{scroll-margin-top:96px}
@media (min-width:1200px){.post-body{font-size:19px}}

.post-toc details{border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.post-toc summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;cursor:pointer;list-style:none}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--c-ink-2);border-bottom:2px solid var(--c-ink-2);transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease)}
.post-toc details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.toc-n{margin-left:auto;font-size:13px;color:var(--c-ink-2)}
.post-toc ol{list-style:none;margin:0;padding:0 20px 14px;counter-reset:toc}
.post-toc li{counter-increment:toc}
.post-toc li+li{border-top:1px solid var(--c-line)}
.post-toc a{display:grid;grid-template-columns:30px minmax(0,1fr);padding:11px 0;color:var(--c-ink);font-size:15px;line-height:1.4;font-weight:500;text-decoration:none;transition:color 140ms var(--ease)}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font:700 12px/1.75 var(--font-display);letter-spacing:.04em;color:var(--c-ink-2)}
.post-toc a:hover{color:var(--c-link);text-decoration:none}
.post-toc a[aria-current]{color:var(--c-ink);font-weight:650}
.post-toc a[aria-current]::before{color:var(--c-accent)}

/* Written by: the author's card, with Call and Text when the author is the site's agent. */
.post-author{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface)}
.post-author .pa-photo{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--c-muted)}
.post-author .pa-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pa-who{flex:1;display:grid;gap:3px;min-width:0}
.pa-label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2)}
.pa-who b{font-family:var(--font-display);font-size:18px;line-height:1.2;letter-spacing:-.01em}
.pa-phone{font-size:14px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.pa-acts{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pa-acts .btn{min-height:46px;padding:0 14px}

/* A short listing alerts prompt in the rail; under 1024 the alerts band right after the post does this job. */
.post-ask{display:none}
.post-ask .eyebrow{color:rgba(255,255,255,.78)}
.post-ask b{font-family:var(--font-display);font-size:20px;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.post-ask p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.74)}
.post-ask .btn{margin-top:8px;min-height:46px;background:var(--c-cta);border-color:var(--c-cta);color:var(--c-cta-ink)}
.post-ask .pq-alt{justify-self:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}

.post-share{display:grid;gap:10px}
.ps-row{display:flex;flex-wrap:wrap;gap:8px}
.ps-row a,.ps-row button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--c-line);background:var(--c-surface);color:var(--c-ink);cursor:pointer;transition:background 160ms var(--ease),color 160ms var(--ease),border-color 160ms var(--ease)}
.ps-row a:hover,.ps-row button:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg);text-decoration:none}
.ps-row button span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 9px;border-radius:var(--r-chip);background:var(--c-ink);color:var(--c-bg);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.ps-row button.done span{opacity:1}

@media (min-width:1024px){
  .post-grid{grid-template-columns:minmax(0,44rem) minmax(260px,320px);grid-template-rows:auto 1fr;justify-content:center;column-gap:56px}
  .post-grid>*{max-width:none;margin:0}
  .post-main{grid-column:1;grid-row:1/span 2}
  .post-side{grid-column:2;grid-row:1}
  .post-toc{grid-column:2;grid-row:2;position:sticky;top:96px;margin-top:36px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
  .post-grid:not(.has-toc) .post-side{grid-row:1/span 2;position:sticky;top:96px}
  .post-toc details{border:0;border-radius:0;background:none}
  .post-toc summary{min-height:0;padding:0 0 14px;cursor:default}
  .post-toc summary::after,.toc-n{display:none}
  .post-toc ol{padding:0;border-left:1px solid var(--c-line)}
  .post-toc li+li{border-top:0}
  .post-toc a{display:block;margin-left:-1px;padding:8px 0 8px 18px;border-left:2px solid transparent;font-size:14px;color:var(--c-ink-2)}
  .post-toc a::before{display:none}
  .post-toc a:hover{color:var(--c-ink)}
  .post-toc a[aria-current]{color:var(--c-ink);border-left-color:var(--c-accent)}
  .post-ask{display:grid;gap:10px;padding:24px;border-radius:var(--r-panel);background:var(--c-deep);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  /* Videos and the For sale now row reach a little past the text, into the gutter. */
  .post-body>.poster,.post-body>.video-frame,.post-body>figure,.post-main .blive{margin-inline:-32px}
}
@media (min-width:1400px){
  .post-grid,.post-grid.has-toc{grid-template-columns:minmax(200px,1fr) minmax(0,44rem) minmax(260px,1fr);grid-template-rows:auto;column-gap:clamp(56px,4.5vw,88px)}
  .post-main{grid-column:2;grid-row:1}
  .post-toc{grid-column:1;grid-row:1;justify-self:end;max-width:280px;margin-top:4px}
  .post-side,.post-grid:not(.has-toc) .post-side{grid-column:3;grid-row:1;justify-self:start;max-width:340px;position:sticky;top:96px}
  .post-body>.poster,.post-body>.video-frame,.post-body>figure,.post-main .blive{margin-inline:-40px}
}

/* The blog index: four cards across on wide screens (twelve a page fills three rows). */
@media (min-width:1500px){.blog-list .bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blog-head .wrap{padding-bottom:44px}
@media (min-width:1200px){.blog-head .wrap{padding-bottom:60px}}
/* The bands after a post carry the post's small photo; blurred like the title band so it never shows soft and stretched. */
article.post~.photo-band .bgimg{filter:blur(32px);transform:scale(1.12)}
/* Three narrow cards in a post: the days on market always sits under the price, so one long price never sets its card out of line. */
@media (min-width:768px){.blive .lprice{flex-direction:column;align-items:flex-start;gap:2px}}

/* The YouTube channel block (D119; one card since Truman's note on 2026-10-02): photo, name and counts, and Subscribe together. */
.ytc{container-type:inline-size;margin-top:32px}
.ytc--under{margin-top:18px}
.ytc-row{display:inline-flex;align-items:center;gap:18px;max-width:100%;padding:10px 10px 10px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-ink) 12%,transparent);background:color-mix(in srgb,var(--c-surface) 70%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 36px -28px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ytc-id{flex:0 1 auto;display:flex;align-items:center;gap:12px;min-width:0;color:var(--c-ink);text-decoration:none}
.ytc-id:hover{text-decoration:none}
.ytc-av{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--c-chip);box-shadow:0 0 0 1px color-mix(in srgb,var(--c-ink) 12%,transparent)}
.ytc-av img{width:100%;height:100%;object-fit:cover}
.ytc-mono{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--c-ink)}
.ytc-who{display:grid;gap:2px;min-width:0;padding-right:4px}
.ytc-name{font-family:var(--font-display);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline transparent 1px;text-underline-offset:3px;transition:text-decoration-color 200ms var(--ease)}
.ytc-id:hover .ytc-name{text-decoration-color:currentColor}
.ytc-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;line-height:1.35;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.ytc-sub{position:relative;isolation:isolate;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--c-ink);color:var(--c-surface);font-size:14px;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:box-shadow 240ms var(--ease),transform 240ms var(--ease)}
.ytc-sub::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--c-surface) 18%,transparent) 50%,transparent 70%);transform:translateX(-110%);transition:transform 750ms var(--ease)}
.ytc-sub:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(0,0,0,.55)}
.ytc-sub:hover::after{transform:translateX(110%)}
.ytc-icon{flex:none;display:block;width:26px;height:18px}
.ytc-arrow{flex:none;opacity:.65;transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.ytc-sub:hover .ytc-arrow{opacity:1;transform:translateX(3px)}
@media (min-width:768px){.vid-grid.one+.ytc{max-width:880px}}
.ytc--compact{margin-top:16px}
.ytc--compact .ytc-row{gap:12px;padding:7px 7px 7px 8px}
.ytc--compact .ytc-av{width:34px;height:34px}
.ytc--compact .ytc-mono{font-size:14px}
.ytc--compact .ytc-name{font-size:13.5px}
.ytc--compact .ytc-sub{height:36px;padding:0 12px 0 11px;font-size:13px}
@container (max-width:380px){.ytc-row{gap:10px}.ytc-arrow{display:none}.ytc-sub{padding:0 13px 0 11px}}
@media (prefers-reduced-motion:reduce){.ytc-sub,.ytc-sub::after,.ytc-arrow,.ytc-name{transition:none !important}.ytc-sub:hover,.ytc-sub:hover .ytc-arrow{transform:none}.ytc-sub::after{display:none}}

/* Communities menu (lib/menu.ts). Desktop: the nav item opens a wide panel under the header; communities with neighborhoods
   on the left, the one under the pointer or focus on the right. Phone: nested sections in the menu sheet. Theme tokens only. */
.site-header nav.main{align-items:center}
.dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.dd-caret{transition:transform 200ms var(--ease);opacity:.8}
.nav-dd.open .dd-caret{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% - 6px);left:50%;width:min(1120px,calc(100vw - 48px));z-index:35;visibility:hidden;opacity:0;transform:translate(-50%,-6px);transition:opacity 180ms var(--ease),transform 220ms var(--ease),visibility 0s linear 220ms}
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-dd.open .nav-panel{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity 180ms var(--ease),transform 220ms var(--ease),visibility 0s}
/* A grid: the left column's items in column 1, the pane showing in column 2 across every row, so the panel is as tall as
   whichever is taller and never a fixed box. */
.np-in{display:grid;grid-template-columns:300px minmax(0,1fr);align-content:start;padding:16px 0;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(90deg,var(--c-muted) 300px,var(--c-line) 300px,var(--c-line) 301px,var(--c-surface) 301px);color:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 2px 6px color-mix(in srgb,var(--c-deep) 8%,transparent),0 28px 64px -24px color-mix(in srgb,var(--c-deep) 45%,transparent)}
.np-item{grid-column:1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 12px;min-height:46px;padding:0 14px;border:0;border-radius:0 var(--r-control) var(--r-control) 0;background:none;color:var(--c-ink);font:700 15px/1.25 var(--font-display);letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer;transition:background 160ms var(--ease),box-shadow 160ms var(--ease)}
.np-item.np-gap{margin-top:21px}
.np-item.np-gap::before{content:"";position:absolute;left:0;right:0;top:-11px;border-top:1px solid var(--c-line)}
.np-item .np-chev{flex:none;color:var(--c-ink-2);opacity:0;transform:translateX(-4px);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}
.np-item:hover,.np-item.on{text-decoration:none;background:var(--c-surface);box-shadow:inset 2px 0 0 var(--c-accent),0 1px 2px color-mix(in srgb,var(--c-deep) 6%,transparent)}
.np-item.on .np-chev,.np-item:hover .np-chev{opacity:1;transform:none}
.np-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.np-pane{display:none;grid-column:2;grid-row:1/-1;padding:14px 36px 16px;min-width:0}
.np-pane.on{display:block;animation:np-in 220ms var(--ease)}
@keyframes np-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.np-head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding-bottom:20px;margin-bottom:16px;border-bottom:1px solid var(--c-line)}
.np-head.has-photo{grid-template-columns:minmax(0,1fr) 240px}
.np-count{margin:0 0 8px;font:700 11px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.np-title{margin:0;font:800 28px/1.08 var(--font-display);letter-spacing:-.025em;color:var(--c-ink)}
.np-dek{margin:10px 0 0;max-width:56ch;font-size:15px;line-height:1.5;color:var(--c-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-view{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px;color:var(--c-link);font-size:13px;font-weight:600;text-decoration:none}
.np-view:hover{text-decoration:underline}
.np-view .np-chev{transition:transform 160ms var(--ease)}
.np-view:hover .np-chev{transform:translateX(3px)}
.np-photo{display:block;aspect-ratio:8/5;border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 10%,transparent)}
.np-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.np-photo:hover img{transform:scale(1.04)}
.np-links,.np-az,.np-cities ul{list-style:none;margin:0;padding:0}
.np-links{column-width:170px;column-gap:28px}
.np-links li{break-inside:avoid}
.np-pane a:not(.np-view):not(.np-photo){display:inline-block;padding:6px 0;color:var(--c-ink);font-size:14px;line-height:1.35;text-decoration:none;transition:color 140ms var(--ease)}
.np-pane a:not(.np-view):not(.np-photo):hover{color:var(--c-link);text-decoration:underline}
.np-sub{margin:20px 0 6px;font:700 11px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.np-head+.np-sub,.np-head+.np-cities .np-sub{margin-top:0}
/* All communities: the cities as one row of larger names, then every community A to Z with its letter in a gutter. */
.np-cities{padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--c-line)}
.np-cities ul{display:flex;flex-wrap:wrap;gap:0 28px}
.np-pane .np-cities a:not(.np-view):not(.np-photo){font:700 16px/1.3 var(--font-display);letter-spacing:-.01em}
.np-az{column-width:150px;column-gap:24px}
.np-az li{break-inside:avoid}
.np-pane .np-az a:not(.np-view):not(.np-photo){padding:5px 0}

/* Phone menu sheet: it scrolls, and Communities opens into its places, each into its neighborhoods. */
.menu-sheet{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.menu-sheet details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-sheet details summary::-webkit-details-marker{display:none}
.menu-sheet details summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--c-ink-2);border-bottom:2px solid var(--c-ink-2);transform:translateY(-2px) rotate(45deg);transition:transform 200ms var(--ease)}
.menu-sheet details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.ms-dd>summary{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--c-ink);padding:12px 0;border-bottom:1px solid var(--c-line)}
.ms-body{padding:4px 0 8px}
.ms-2>summary{min-height:52px;padding:0 0 0 14px;font:700 17px var(--font-display);color:var(--c-ink);border-bottom:1px solid var(--c-line)}
.ms-2>summary span{flex:1;min-width:0}
.ms-2>summary small{font:500 13px var(--font-body);color:var(--c-ink-2)}
.ms-2[open]>summary{color:var(--c-link)}
.menu-sheet .ms-links{display:grid;padding:6px 0 12px 28px;border-bottom:1px solid var(--c-line)}
.menu-sheet .ms-links a{display:flex;align-items:center;min-height:44px;padding:0;border:0;font:500 16px var(--font-body);color:var(--c-ink)}
.menu-sheet .ms-links a.ms-view{font-weight:600;color:var(--c-link)}
.ms-2[open] .ms-links{animation:np-in 200ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-dd.open .nav-panel{transition:none;transform:translate(-50%,0)}
  .np-pane.on,.ms-2[open] .ms-links{animation:none}
  .dd-caret,.np-item,.np-item .np-chev,.np-view .np-chev,.np-photo img,.menu-sheet details summary::after{transition:none}
}
/* Social links as a row of round icons under the office block (Truman, 2026-10-03). One color, the footer's own. */
.site-footer .fsocials{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.site-footer .fsoc{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,#fff 22%,transparent);color:var(--f-ink-2);font:700 15px/1 var(--font-display);text-decoration:none;transition:border-color 160ms var(--ease),background 160ms var(--ease),color 160ms var(--ease)}
.site-footer .fsoc:hover{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 16%,transparent);color:var(--f-ink);text-decoration:none}
.site-footer .fsoc:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
@media (max-width:767px){.site-footer .fsoc{width:44px;height:44px}}

/* The open search page (D139, pages/open-search.tsx): one form, quick pickers, the Filters sheet, chips, and the results.
   The search area sits in the header's own container (.wrap), so their edges line up; the grid fills it. Colors are theme
   tokens only. */
.osearch{padding-block:28px 72px}
.os-form{display:grid;gap:4px}
.os-bar{display:grid;gap:10px;position:relative}
@media (min-width:1000px){.os-bar{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:stretch}}
.os-q{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:0 8px 0 18px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink-2);box-shadow:0 1px 2px color-mix(in srgb,var(--c-deep) 8%,transparent);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.os-q:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 18%,transparent)}
.os-q input{flex:1;min-width:0;height:56px;border:0;background:transparent;color:var(--c-ink);font:500 16px var(--font-body);outline:none}
.os-q input::placeholder,.os-text input::placeholder{color:var(--c-ink-2);opacity:.55}
.os-q .os-go{min-height:44px;padding:0 18px}
.os-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;margin:0;padding:6px;list-style:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 18px 48px color-mix(in srgb,var(--c-deep) 22%,transparent);max-height:min(380px,60vh);overflow:auto}
.os-sug li{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-control);cursor:pointer}
.os-sug li b{font:600 15px var(--font-body);color:var(--c-ink)}
.os-sug li span{font-size:12px;color:var(--c-ink-2)}
.os-sug li span:empty{display:none}
.os-sug li.on,.os-sug li:hover{background:var(--c-muted)}
.os-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:relative}
@media (min-width:640px){.os-quick{display:flex}}
.os-pick{position:static}
@media (min-width:640px){.os-pick{position:relative}}
.os-pick summary,.os-filters{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-panel);background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer;list-style:none;white-space:nowrap;text-decoration:none;transition:border-color 140ms var(--ease),background 140ms var(--ease)}
@media (min-width:1000px){.os-pick summary,.os-filters{min-height:58px;padding:0 16px}}
.os-pick summary::-webkit-details-marker{display:none}
.os-pick summary:hover,.os-filters:hover,.os-pick[open] summary{border-color:var(--c-ink)}
.os-pick summary .k{font-weight:500;color:var(--c-ink-2)}
.os-pick summary b{font-weight:700;overflow:hidden;text-overflow:ellipsis;margin-right:auto}
.os-pick summary svg{color:var(--c-ink-2);transition:transform 200ms var(--ease)}
.os-pick[open] summary svg{transform:rotate(180deg)}
.os-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;padding:18px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-panel);box-shadow:0 18px 48px color-mix(in srgb,var(--c-deep) 22%,transparent)}
@media (min-width:640px){.os-pop{right:auto;min-width:320px}.os-pick[data-pick=type] .os-pop{min-width:380px}}
@media (prefers-reduced-motion:no-preference){.os-pick[open] .os-pop{animation:os-pop 180ms var(--ease)}}
@keyframes os-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.os-filters .n{display:none;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--c-brand);color:var(--c-brand-ink);font:700 11px var(--font-display);align-items:center;justify-content:center}
.os-filters .n.on{display:inline-flex}
.os-filters svg{color:var(--c-ink-2)}
.os-filters span:not(.n){margin-right:auto}
.os-row{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.os-row legend{padding:0;margin-bottom:10px;font:600 13px var(--font-body);color:var(--c-ink-2)}
.os-pop .os-row legend{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.os-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer;user-select:none;transition:background 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}
.pill span:hover{border-color:var(--c-ink-2)}
.pill input:checked+span{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink)}
.pill input:focus-visible+span{outline:2px solid var(--c-accent);outline-offset:2px}
.os-range{margin:22px 0 0}
.os-range .pb-out{font-size:18px}
.os-range .pb-track input[type=range]{cursor:pointer}
/* Quick toggles under the price: one row, lit when on. Phones scroll it sideways inside the page gutter, no bar showing. */
.os-toggles{display:flex;gap:8px;margin:18px -20px 0;padding:2px 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.os-toggles::-webkit-scrollbar{display:none}
@media (min-width:640px){.os-toggles{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}}
.os-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--c-line);border-radius:20px;background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}
.os-toggle:hover{border-color:var(--c-ink-2)}
.os-toggle .ck{display:none}
.os-toggle.on{background:var(--c-brand);border-color:var(--c-brand);color:var(--c-brand-ink);padding-left:12px}
.os-toggle.on .ck{display:block}
.os-toggle:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.os-toggle{transition:none}}
.os-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.os-chips:empty{display:none}
.os-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px 0 14px;border-radius:18px;background:var(--c-chip);color:var(--c-ink);font:600 13px var(--font-body);text-decoration:none}
.os-chip.area{background:var(--c-tint)}
.os-chip i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:400 17px/1 var(--font-body);font-style:normal;color:var(--c-ink-2);transition:background 140ms var(--ease)}
.os-chip:hover i{background:var(--c-line);color:var(--c-ink)}
.os-chip-clear{padding:0 6px;font:600 13px var(--font-body);color:var(--c-link);text-decoration:none}
.os-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:24px 0 32px;padding-bottom:18px;border-bottom:1px solid var(--c-line)}
.os-count{margin:0;font-size:15px;color:var(--c-ink-2);flex:1 1 auto}
.os-count b{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink);font-variant-numeric:tabular-nums;margin-right:2px}
.os-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-2)}
.os-sort select{font:600 14px var(--font-body);min-height:40px;padding:0 10px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);cursor:pointer}
.os-toolbar .save-search{margin:0}
@media (max-width:639px){.os-count{flex-basis:100%}.os-sort{flex:1;min-width:0}.os-sort select{flex:1;min-width:0}.pill span{padding:0 13px}}
/* The search page's map (D201): price pins, and a layer to draw an area on. */
.os-mapbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:20px;background:var(--c-bg);color:var(--c-ink);font:600 14px var(--font-body);cursor:pointer}
.os-mapbtn.on{background:var(--c-chip);border-color:var(--c-ink-2)}
.os-map{position:relative;margin:0 0 32px;border:1px solid var(--c-line);border-radius:var(--r-panel);overflow:hidden;background:var(--c-muted)}
.os-map[hidden]{display:none}
.os-map__canvas{height:min(60vh,520px);z-index:0}
.os-map__stage{position:relative}
.os-map__ink{position:absolute;inset:0;z-index:500;cursor:crosshair;touch-action:none;background:color-mix(in srgb,var(--c-bg) 12%,transparent)}
.os-map__ink svg{width:100%;height:100%;display:block}
.os-map__ink path{fill:color-mix(in srgb,var(--c-brand) 10%,transparent);stroke:var(--c-brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.os-map__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;background:var(--c-surface);border-top:1px solid var(--c-line)}
.os-map__link{padding:0;border:0;background:none;color:var(--c-link);font:600 14px var(--font-body);cursor:pointer}
.os-map__link:disabled{color:var(--c-ink-2);opacity:.6;cursor:default}
.os-map__idle,.os-map__drawing,.os-map__pointing{display:none;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--c-ink)}
.os-map__bar[data-mode="idle"] .os-map__idle,.os-map__bar[data-mode="draw"] .os-map__drawing,.os-map__bar[data-mode="points"] .os-map__pointing{display:flex}
.os-map__idle [hidden]{display:none}
.os-map__canvas.aim,.os-map__canvas.aim .leaflet-grab,.os-map__canvas.aim .leaflet-interactive{cursor:crosshair}
.os-map__note{font-size:13px;color:var(--c-ink-2)}
.os-pins{position:absolute;left:0;top:0}
.os-cluster{position:absolute;transform:translate(-50%,-50%);width:var(--s,32px);height:var(--s,32px);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--c-brand);color:var(--c-brand-ink);font:700 13px/1 var(--font-body);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brand) 35%,transparent),0 0 0 5px var(--c-bg),0 2px 8px rgba(0,0,0,.3)}
.os-cluster:hover,.os-cluster:focus-visible{background:var(--c-accent);z-index:2}
.os-map__handles{position:absolute;inset:0;z-index:600;pointer-events:none}
.os-handle{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;padding:0;border:2px solid var(--c-brand);border-radius:50%;background:var(--c-bg);pointer-events:auto;cursor:grab;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.os-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25)}
@media (pointer:coarse){.os-handle{width:24px;height:24px}}
.os-map__back{display:none}
/* On a phone the open map fills the screen; Show the list goes back to the results. */
@media (max-width:639px){
  .os-map.full{position:fixed;inset:0;z-index:1200;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:var(--c-bg)}
  .os-map.full .os-map__stage{flex:1;min-height:0}
  .os-map.full .os-map__canvas{height:100%}
  .os-map.full .os-map__back{display:inline-flex;align-items:center;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:700;min-height:40px;padding:0 18px;border:0;border-radius:20px;background:var(--c-surface);color:var(--c-ink);font:600 14px var(--font-body);box-shadow:0 4px 14px rgba(0,0,0,.3)}
  .os-map.full .os-map__bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.os-map-full{overflow:hidden}
}
/* A home on a map is its price in a brand pill, always shown (2026-10-08, Truman: "a more contrasting color"); the
   listing page's similar-home pins (.gpin.price) look the same. Hover lifts it and opens the home's card. */
.os-pin,.gpin.price span{display:block;padding:6px 11px;border-radius:999px;background:var(--c-brand);color:var(--c-brand-ink);font:700 13px/1 var(--font-body);white-space:nowrap;text-decoration:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c-bg) 70%,transparent),0 3px 10px rgba(0,0,0,.35);transition:transform 120ms var(--ease),background 120ms var(--ease)}
.os-pin{position:absolute;transform:translate(-50%,-50%)}
.os-pin:hover,.os-pin:focus-visible{transform:translate(-50%,-50%) scale(1.08);background:var(--c-ink);color:var(--c-bg);z-index:3}
.leaflet-marker-icon .os-pin{position:static;transform:translate(-50%,-50%)}
@media (max-width:639px){.os-toolbar .os-sort{flex:1 1 100%}.os-mapbtn{min-height:44px}}
/* Without a Maps key (local development) the street tiles are toned toward the theme, so the preview reads like the Google map. */
.os-tiles{filter:grayscale(1) contrast(.9) brightness(1.05)}
.os-map__canvas,.os-map .leaflet-container{background:var(--c-muted)}
[data-theme="dark"] .os-tiles{filter:grayscale(1) invert(1) brightness(.78) contrast(.9)}
@media (prefers-color-scheme:dark){[data-theme="auto"] .os-tiles{filter:grayscale(1) invert(1) brightness(.78) contrast(.9)}}
.os-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:40px 24px;transition:opacity 140ms var(--ease)}
@media (min-width:1200px){.os-grid{gap:48px 32px}}
.os-grid.loading{opacity:.5}
.os-empty{grid-column:1/-1;padding:56px 0;text-align:center}
.os-empty h2{font-size:24px;margin-bottom:8px}
.os-empty p{margin:0 auto;max-width:46ch;color:var(--c-ink-2)}
.os-pager{margin-top:48px}
/* The Filters sheet: from the right on wide screens, from the bottom to full height on phones. Works with scripts off through
   :target; the script adds .open instead, so the address keeps no hash. */
.os-panel{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none;transition:visibility 0s linear 380ms}
.os-panel.open,.os-panel:target{visibility:visible;pointer-events:auto;transition-delay:0s}
.os-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--c-deep) 64%,transparent);opacity:0;transition:opacity 380ms var(--ease)}
.os-panel.open .os-scrim,.os-panel:target .os-scrim{opacity:1}
.os-sheet{position:absolute;left:0;right:0;bottom:0;top:12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--c-surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:0 -12px 40px color-mix(in srgb,var(--c-deep) 30%,transparent);transform:translateY(100%);transition:transform 380ms var(--ease)}
.os-panel.open .os-sheet,.os-panel:target .os-sheet{transform:none}
@media (min-width:900px){.os-sheet{left:auto;top:0;width:min(560px,100%);border-radius:0;box-shadow:-12px 0 40px color-mix(in srgb,var(--c-deep) 30%,transparent);transform:translateX(100%)}}
.os-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--c-line)}
.os-head h2{font-size:22px}
.os-x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-chip);color:var(--c-ink);font:400 22px/1 var(--font-body);text-decoration:none}
.os-body{overflow:auto;overscroll-behavior:contain;padding:0 24px 24px}
@media (min-width:900px){.os-head{padding:26px 32px 18px}.os-body{padding:0 32px 32px}}
.os-group{display:grid;gap:22px;padding:26px 0 28px;border-bottom:1px solid var(--c-line)}
.os-group:last-child{border-bottom:0}
.os-group h3{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2)}
.os-note{margin:-12px 0 0;font-size:13px;line-height:1.5;color:var(--c-ink-2);max-width:52ch}
.os-group .os-range{margin:0}
.os-text{position:relative;display:grid;gap:8px;font:600 13px var(--font-body);color:var(--c-ink-2)}
.os-text input{min-height:48px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font:500 16px var(--font-body);outline:none;transition:border-color 140ms var(--ease)}
.os-text input:focus{border-color:var(--c-brand)}
.os-foot{display:flex;align-items:center;gap:20px;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c-line);background:var(--c-surface)}
@media (min-width:900px){.os-foot{padding:18px 32px 22px}}
.os-clear{font:600 14px var(--font-body);color:var(--c-link);text-decoration:none;white-space:nowrap}
.os-foot .btn{flex:1;min-height:54px}
#os-apply.loading{opacity:.85}
@media (prefers-reduced-motion:reduce){.os-panel,.os-scrim,.os-sheet,.os-grid,.os-pick summary svg{transition:none}}
/* Schools (D139): names as the listing gives them, and one quiet line of official links on community pages. No ratings. */
.lx-schools dl{margin:0;max-width:560px}
.lx-schools dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-schools dt{color:var(--c-ink-2)}
.lx-schools dd{margin:0;font-weight:600;text-align:right}
.lx-schools .fine{margin-top:12px}
.schools-band{padding-block:40px;border-bottom:1px solid var(--c-line)}
.schools-line{margin:0;max-width:75ch;font-size:15px;line-height:1.6;color:var(--c-ink-2)}
.schools-line b{color:var(--c-ink)}

/* Texted homes (D143): /picks/<token>/ */
.picks .lgrid{margin-top:8px}
.picks-gone{margin:0 0 24px;font-size:15px;color:var(--c-ink-2)}
.picks-more{margin:40px 0 0;text-align:center;font-weight:600}

/* Reactions (D144): one button on a card shows the pick; a small menu offers Love it, Maybe, Not for me. */
.lsave .i-maybe,.lsave .i-no{display:none}
.lsave[data-react=maybe] .i-love,.lsave[data-react=no] .i-love{display:none}
.lsave[data-react=maybe] .i-maybe,.lsave[data-react=no] .i-no{display:block}
.lsave[data-react=maybe]{color:var(--c-link)}
.lsave[data-react=no]{color:var(--c-ink-2)}
.lsave:focus-visible,.rtray button:focus-visible,.lx-react .icon-btn:focus-visible{outline:2px solid var(--c-cta);outline-offset:2px}
.rtray{position:fixed;z-index:60;min-width:188px;padding:6px;border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface);color:var(--c-ink);box-shadow:0 10px 30px color-mix(in srgb,var(--c-ink) 18%,transparent)}
.rtray[hidden],.rtray button[hidden]{display:none}
.rtray button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;color:inherit;font:600 14px var(--font-body);text-align:left;cursor:pointer}
.rtray button:hover,.rtray button:focus-visible{background:var(--c-muted)}
.rtray button[aria-checked=true]{color:var(--c-cta)}
.rtray button[aria-checked=true] .i-love{fill:currentColor}
.rtray-i{display:grid;place-items:center;width:20px;height:20px}
.rtray-i svg{display:block}
.rtray .rtray-clear{min-height:40px;margin-top:4px;border-top:1px solid var(--c-line);border-radius:0 0 6px 6px;color:var(--c-ink-2);font-weight:500}
@media (prefers-reduced-motion:no-preference){.rtray:not([hidden]){animation:rtray-in .14s var(--ease)}@keyframes rtray-in{from{opacity:0;transform:translateY(-4px)}}}
.lx-react{display:flex;gap:6px;flex-wrap:wrap}
.lx-react .icon-btn[aria-pressed=true]{border-color:var(--c-cta);color:var(--c-cta);background:color-mix(in srgb,var(--c-cta) 8%,var(--c-surface))}
.lx-react .icon-btn[aria-pressed=true][data-react-set=love] svg{fill:currentColor}
/* Listing actions: Love it | Maybe | Not for me as one joined bar on its own row, Share as a matching square beside it. */
.lx-price .lx-tools{flex-basis:100%;margin:6px 0 0;gap:8px;align-items:stretch}
.lx-tools .lx-react{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--c-line);border-radius:var(--r-control);overflow:hidden}
.lx-tools .lx-react .icon-btn{border:0;border-radius:0;justify-content:center;min-height:46px;padding:0 10px;white-space:nowrap}
.lx-tools .lx-react .icon-btn+.icon-btn{border-left:1px solid var(--c-line)}
.lx-tools .lx-react .icon-btn:hover{background:var(--c-muted)}
.lx-tools [data-share]{min-height:48px;justify-content:center}
@media (max-width:599px){.lx-tools [data-share]{width:48px;padding:0}.lx-tools [data-share] [data-share-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (min-width:600px){.lx-tools .lx-react{flex:0 1 420px}}
/* Not for me in the buyer's own search: at the end, dimmed, behind Show hidden. */
.lcard--hidden{opacity:.5}
.lcard--hidden:hover,.lcard--hidden:focus-within{opacity:.85}
.os-hidden{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--c-ink-2);cursor:pointer}
.os-hidden input{width:18px;height:18px;accent-color:var(--c-cta)}

/* Home report (planning/56): one homeowner's monthly page. The hero carries the estimate; sections reuse the market trend,
   listing cards, and lender card, so only the pieces new to this page are here. */
.mh-hero{min-height:0}
.mh-hero .wrap{padding-top:120px;padding-bottom:44px}
.mh-hero h1{font-size:clamp(34px,5.4vw,68px);line-height:.98;margin:10px 0 12px}
.mh-hero-value{display:grid;gap:22px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.28);max-width:880px}
.mh-k{display:block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mh-big{display:block;font-family:var(--font-display);font-size:clamp(44px,6.4vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:8px 0 10px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 28px color-mix(in srgb,var(--c-deep) 55%,transparent)}
.mh-range-big{font-size:clamp(36px,5.6vw,76px)}
.mh-range-big span{white-space:nowrap;font-size:.42em;font-weight:600;letter-spacing:0;opacity:.75;margin:0 .18em;vertical-align:.32em}
.mh-move{font-size:15px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.mh-move.up{color:#7fe3b4}
.mh-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mh-quiet{color:rgba(255,255,255,.9);font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
@media (min-width:768px){.mh-hero .wrap{padding-top:140px;padding-bottom:56px}.mh-hero-value{grid-template-columns:minmax(0,1fr) auto;align-items:end}.mh-hero-value:has(.mh-range-big){grid-template-columns:minmax(0,1fr);gap:18px}}
@media (min-width:1200px){.mh-hero .wrap{padding-top:160px;padding-bottom:72px}}

.mh-cols{display:grid;gap:40px;min-width:0}
.mh-left,.mh-right{min-width:0}
@media (min-width:1000px){.mh-cols{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.mh-rates .mh-cols{grid-template-columns:minmax(0,8fr) minmax(300px,4fr)}}
.mh-chart .plot{height:220px}
@media (min-width:768px){.mh-chart .plot{height:260px}}
.mh-chart path.area{stroke:none}
.mh-chart .xl span{white-space:nowrap;overflow:visible}
@media (max-width:767px){.mh-chart .xl .skip{visibility:hidden}}

/* The range: a thin track, the estimate as a marker, low and high under the ends. */
.mh-range{margin:8px 0 32px}
.mh-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--c-accent) 18%,transparent),color-mix(in srgb,var(--c-accent) 55%,transparent),color-mix(in srgb,var(--c-accent) 18%,transparent))}
.mh-track i{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--c-surface);border:5px solid var(--c-brand);box-shadow:0 2px 8px rgba(13,27,36,.2)}
.mh-ends{position:relative;display:flex;justify-content:space-between;margin-top:14px;font-family:var(--font-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.mh-ends span{display:grid;gap:2px}
.mh-ends span:last-child{text-align:right}
.mh-ends .mid{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:19px;color:var(--c-brand)}
.mh-ends em{font:500 12px var(--font-body);color:var(--c-ink-2);font-style:normal}
.mh-facts{margin:0;display:grid;border-top:1px solid var(--c-line)}
.mh-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.mh-facts dt{font-size:14px;color:var(--c-ink-2)}
.mh-facts dd{margin:0;font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.mh-facts dd.up{color:var(--c-live)}
.mh-facts dd small{font-size:13px;font-weight:700;margin-left:4px}
.mh-facts dd.plain{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0}

/* The exact value ask: one quiet panel, one button. */
.mh-exact{display:grid;gap:20px;margin-top:48px;padding:28px;border-radius:var(--r-panel);background:var(--c-tint)}
.mh-exact h3{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.mh-exact p{margin:0;color:var(--c-ink-2);line-height:1.65;max-width:68ch}
@media (min-width:900px){.mh-exact{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;padding:36px 40px}}

/* The agent's month, read like an article: head and byline, the video at full width, then the note in two columns on wide screens. */
.mh-month-head{display:grid;gap:0;margin-bottom:32px}
.mh-month-head h2{font-size:var(--t-display);line-height:1.05;margin:0 0 20px;max-width:22ch}
.mh-by{display:flex;align-items:center;gap:14px}
.mh-by .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--c-surface);flex:none}
.mh-by .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mh-by strong{display:block;font-size:15px}
.mh-by span{font-size:13px;color:var(--c-ink-2)}
.mh-video{margin:0 0 40px}
.mh-note p{font-size:17px;line-height:1.75;color:var(--c-ink-2);margin:0 0 16px;break-inside:avoid}
@media (min-width:1000px){.mh-month-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}.mh-month-head .eyebrow{grid-column:1/-1}.mh-month-head h2{margin:12px 0 0}.mh-note{columns:2;column-gap:56px}}
.mh-sold .ltag{background:var(--c-deep);color:#fff}
.mh-how{margin:2px 0 0;font-size:13px;color:var(--c-ink-2)}
.mh-more{margin:40px 0 0;text-align:center;font-weight:600}

.mh-market{padding-bottom:0 !important}
.mh-areas{padding-top:40px !important}
.mh-table th[scope="row"]{background:var(--c-surface)}
.mh-table tr.me > *{background:var(--c-tint)}

.mh-refi h2{font-size:21px}
.mh-refi .statement b{color:var(--c-ink)}
@media (min-width:1000px){.mh-refi{position:sticky;top:104px;padding:28px}}
/* The lender under the rates chart (D231): the same tinted strip as the exact value ask, who and how to reach them beside the question. */
.mh-lender{display:grid;gap:22px;margin-top:40px;padding:28px;border-radius:var(--r-panel);background:var(--c-tint)}
.mh-lender h3{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.mh-lender-say p{margin:0;color:var(--c-ink-2);line-height:1.65;max-width:62ch}
.mh-lender-who{display:grid;gap:12px;align-content:start}
.mh-lender-who .avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff}
.mh-lender-who .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mh-lender-who .avatar.mono{display:grid;place-items:center;background:var(--c-surface);color:var(--c-ink);font:800 14px var(--font-display)}
.mh-reach{margin:0;font-size:14px;color:var(--c-ink-2)}
.mh-reach a{font-weight:600}
.mh-quiet-link{font-weight:600;white-space:nowrap}
@media (min-width:900px){.mh-lender{grid-template-columns:minmax(0,1fr) minmax(260px,320px);align-items:center;gap:40px;padding:36px 40px}}
.mh-table thead th:first-child{text-align:left}
.mh-none{margin:10px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.9);max-width:46ch}
.lc-apply{display:block;text-align:center;font-size:14px;font-weight:600}
/* The lender under a payment calculator (D182): one quiet row, never a second form. */
/* The lender under a payment calculator: a compact card on a phone (who on one row, a sentence, a full-width button and
   the Apply link under it), one row of three on a wide screen. */
.lender-line{display:grid;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--c-line)}
.lender-line .lnd-who{display:flex;align-items:center;gap:12px;min-width:0}
.lender-line .lnd-name{min-width:0}
.lender-line .lnd-name b{display:block;font:700 16px/1.25 var(--font-display);color:var(--c-ink)}
.lender-line .lnd-name span{display:block;font-size:13px;color:var(--c-ink-2)}
.lender-line .avatar{flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff}
.lender-line .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lender-line p{margin:0;font-size:15px;line-height:1.55;color:var(--c-ink-2)}
.lender-line p b{color:var(--c-ink)}
.lender-line .lnd-go{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.lender-line .lnd-apply{font-weight:600;font-size:14px;text-align:center}
/* The lender's company mark (D182): one color, ink on light grounds and white on dark, from its own alpha. */
.lender-mark{display:block;width:170px;height:52px;margin:0 0 12px;background:var(--c-ink-2);-webkit-mask:var(--mark) left center/contain no-repeat;mask:var(--mark) left center/contain no-repeat;opacity:.85}
.lender-line .lender-mark{flex:none;width:92px;height:30px;margin:0 0 0 auto}
.photo-band .lender-mark,.hero .lender-mark{background:#fff}
.lender-line .lnd-go .btn{white-space:nowrap;justify-content:center}
@media (min-width:768px){.lender-line{grid-template-columns:minmax(220px,auto) 1fr auto;align-items:center;gap:16px 28px}.lender-line .lender-mark{margin-left:12px}.lender-line .lnd-go{flex-direction:row;align-items:center;gap:18px}}
/* Every lender photo (D182) frames the same way: from the top of the photo with a little headroom, so a headshot or
   cutout with the head near the top edge never loses it to the circle. */
.lc-who .avatar,.lender-line .avatar{background:#fff}
.lc-who .avatar img,.lender-line .avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* A cut-out headshot (transparent PNG) sits a little lower and smaller so the head clears the circle; a full photo fills it. */
.lc-who .avatar img[src*=".png"],.lender-line .avatar img[src*=".png"]{transform:translateY(8%) scale(.94);transform-origin:50% 100%}
/* Community pages (D186): one quiet byline under the facts, how competitive the market is inside the market section,
   and homes for sale by price range as one bar per band. */
.byline{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:14px;color:var(--c-ink-2)}
.byline a{color:var(--c-ink);font-weight:600;text-decoration:none}
.byline a:hover{text-decoration:underline}
.by-photo{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--c-muted)}
.by-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.compete{margin:0 0 40px}
.compete h3{margin:0 0 8px}
.compete p.answer{margin:0 0 20px}
.compete .tiles{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.compete .fine{margin-top:10px}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pr-list a{display:grid;grid-template-columns:minmax(120px,180px) 1fr 3.5em;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);color:var(--c-ink);text-decoration:none}
.pr-list a:hover .pr-label{color:var(--c-link);text-decoration:underline}
.pr-label{font-size:15px}
.pr-bar{height:10px;border-radius:5px;background:var(--c-muted);overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:5px;background:var(--c-accent)}
.pr-n{text-align:right;font-variant-numeric:tabular-nums}
.pr-list li.here .pr-label{font-weight:700}
.pr-list li.here .pr-label em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-link)}
.pr-list li.here .pr-bar i{background:var(--c-brand)}

/* Compare one on one links (2026-10-04): a grid of plain rows that grows with the screen, under the compare table or alone. */
.vs-links{margin-top:28px}
.vs-links h3{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);font-family:var(--font-display);font-weight:700}
.vs-links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:32px}
.vs-links li{border-bottom:1px solid var(--c-line)}
.vs-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;color:var(--c-ink);text-decoration:none;font-weight:600}
.vs-links a span{color:var(--c-ink-2);transition:transform .15s}
.vs-links a:hover span{transform:translateX(3px);color:var(--c-accent)}
/* The even-spread price slider (D194) has no histogram: every bar would be the same height. */
.pb-hist[hidden]{display:none}
/* Know this home (D195): how it compares (the price bands' rows, no links) and the price history. */
.lx-sec .answer{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--c-ink-2)}
.lx-sec .answer b{color:var(--c-ink)}
.lx-cmp li{display:grid;grid-template-columns:minmax(120px,170px) 1fr 3.5em;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.lx-hist{list-style:none;margin:0;padding:0}
.lx-hist li{display:grid;grid-template-columns:5.5em 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.lx-hist time{color:var(--c-ink-2);font-size:14px}
.lx-hist .cut{color:var(--c-ink);font-weight:600}
.lx-hist b{font-variant-numeric:tabular-nums}
/* Share this home: the home on top, then the ways to send it as round tiles. */
.share-sheet{max-width:440px}
.share-sheet h2{margin:0 0 14px}
.share-home{display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:18px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface)}
.share-home img{width:72px;height:54px;object-fit:cover;border-radius:6px;flex:none}
.share-home div{display:flex;flex-direction:column;gap:2px;min-width:0}
.share-home b{font:600 15px/1.3 var(--font-body);color:var(--c-ink)}
.share-home span{font-size:14px;color:var(--c-ink-2)}
.share-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.share-way{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;border:0;background:none;color:var(--c-ink);font:600 12px/1.25 var(--font-body);text-align:center;text-decoration:none;cursor:pointer}
.share-way svg{box-sizing:content-box;padding:13px;border-radius:50%;background:var(--c-chip);transition:background 140ms var(--ease),color 140ms var(--ease)}
.share-way:hover svg,.share-way:focus-visible svg{background:var(--c-brand);color:var(--c-brand-ink)}
.share-way[hidden]{display:none}
@media (max-width:420px){.share-ways{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The card on a map pin (pages/pin-card.ts): fixed to the screen above the pin, never clipped by the map. */
.pin-card{position:fixed;z-index:60;width:240px;overflow:hidden;border-radius:14px;background:var(--c-surface);color:var(--c-ink);border:1px solid var(--c-line);box-shadow:0 14px 40px rgba(0,0,0,.35);pointer-events:none}
.pin-card[hidden]{display:none}
.pin-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--c-muted)}
.pin-card div{display:grid;gap:3px;padding:10px 12px 12px}
.pin-card b{font:700 17px/1.2 var(--font-display)}
.pin-card span{font-size:13px;color:var(--c-ink-2)}
.pin-card .pin-card__addr{color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Getting around as a map band (2026-10-08): the listing page's band, with a wider card for the question and drive times. */
section.around-band{margin-top:0;padding-block:0}
.around-card .answer{font-size:15px;line-height:1.6;margin:0}
.around-card h2{font-size:24px}
.around-card .drives li{padding:10px 0}
.around-card .drives b{font-size:16px}
.around-card .fine,.around-card .schools{margin:0;font-size:13px}
@media (min-width:900px){.around-band .lx-mapcard{width:440px}}