/* Listing page and neighborhood guide components: gallery, walkthrough, compare, floor plan, map, lead bar. */
.listing .gal-wrap{background:var(--block)}
.gal{position:relative;aspect-ratio:16/9;max-height:72vh;overflow:hidden;background:#0B2545;touch-action:pan-y}
.gal .slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.gal .slide.active{opacity:1;z-index:1}
.gal .slide picture{position:absolute;inset:0;display:block}
.gal .slide img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;will-change:transform}
.gal .slide.active img{animation:kenburns 7s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1.5%)}}
.gal .slide figcaption{position:absolute;left:0;bottom:0;padding:.5rem .9rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(11,37,69,.6)}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(11,37,69,.45);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.gal-btn.prev{left:14px}.gal-btn.next{right:14px}
.gal-btn:hover{background:rgba(11,37,69,.75)}
.gal-dots{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:4px}
.gal-dots button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.gal-dots button::before{content:"";width:9px;height:9px;border-radius:50%;border:1px solid #fff}
.gal-dots button[aria-selected=true]::before{background:#fff}
.gal-open{position:absolute;right:14px;bottom:12px;z-index:3;border:1px solid rgba(255,255,255,.75);background:rgba(11,37,69,.55);color:#fff;font:700 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:.55rem .8rem;cursor:pointer}
.gal-head{padding-block:1.3rem 1.6rem;color:var(--block-ink);display:grid;gap:.35rem}
.gal-head h1{color:#fff;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.gal-head .sub{opacity:.85;font-size:.95rem}
.ribbon-inline{display:flex;align-items:baseline;gap:.8rem}
.ribbon-inline .script{font-family:var(--script);font-size:2rem;line-height:1;color:#fff}
.ribbon-inline .script em{font-family:var(--display);font-style:normal;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;margin-right:.3rem;vertical-align:.3rem}
.ribbon-inline .in{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#D8BE8E}
.price-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.3rem}
.price-row .price{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);color:#D8BE8E}
.price-row .price small{font-family:var(--body);font-size:.9rem;color:rgba(255,255,255,.8)}
.pill{border:1px solid #D8BE8E;color:#D8BE8E;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.35rem .7rem}
.facts-row{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1.4rem}
.facts-row li{display:grid;gap:0}
.facts-row b{font-family:var(--display);font-weight:400;font-size:1.3rem;color:#fff}
.facts-row span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

.overview .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start}
.overview .prose{display:grid;gap:1rem;max-width:66ch}
.overview .prose h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.3}
.hl{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;font-size:.95rem}
.hl li{padding-left:1.1rem;position:relative}
.hl li::before{content:"";position:absolute;left:0;top:.62rem;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}
.sheet{border:1px solid var(--rule);background:var(--paper);display:grid;gap:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}
.sheet .fact{display:grid;grid-template-columns:110px 1fr;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid var(--rule);font-size:.9rem}
.sheet .fact .k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:.15rem}
.sheet .btn{margin:1rem}
@media (max-width:900px){.overview .grid{grid-template-columns:1fr}.sheet{position:static}.hl{grid-template-columns:1fr}}

/* walkthrough: each room is a tall section; the figure pins while the caption settles in */
.walk-wrap{background:var(--bg);padding-top:clamp(52px,7vw,96px);padding-bottom:0}
.walk{display:grid}
.room{min-height:135vh;position:relative}
.room-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);height:calc(100vh - 70px - env(safe-area-inset-top,0px));max-height:820px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:clamp(18px,3vw,48px);padding:1rem var(--gutter);max-width:var(--max);margin:0 auto;box-sizing:border-box}
.room-pin picture,.room-pin img{display:block;width:100%;height:min(66vh,560px);object-fit:cover;border:1px solid var(--rule)}
.room-cap{display:grid;gap:.5rem;align-content:center}
.room-cap .n{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text);font-weight:700}
.room-cap h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.room-cap .sf{font-family:var(--display);color:var(--navy);font-size:1.05rem}
.room-cap p{color:var(--muted);max-width:34ch}
@supports (animation-timeline: view()){
  .room-pin img{animation:roomin linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .room-cap{animation:capin linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
  @keyframes roomin{from{clip-path:inset(10% 6% 10% 6%);filter:saturate(.7)}to{clip-path:inset(0);filter:saturate(1)}}
  @keyframes capin{from{transform:translateY(24px)}to{transform:none}}
}
@supports not (animation-timeline: view()){
  .room-cap{transform:translateY(24px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .room.in .room-cap{transform:none}
}
@media (max-width:900px){
  .room{min-height:120vh}
  .room-pin{grid-template-columns:1fr;align-content:start;gap:.9rem;padding-top:1rem}
  .room-pin picture,.room-pin img{height:min(46vh,380px)}
}

/* before / after */
.compare-wrap{background:var(--paper)}
.compare{position:relative;overflow:hidden;border:1px solid var(--rule);background:#000;max-width:1000px;--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:2}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.compare .handle::after{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:1.3rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.compare .lbl{position:absolute;bottom:12px;padding:.35rem .7rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(11,37,69,.7);pointer-events:none}
.compare .lbl.l{left:12px}.compare .lbl.r{right:12px}

/* floor plan hotspots */
.plan{position:relative;max-width:900px;border:1px solid var(--rule);background:#fff}
.plan img{display:block;width:100%}
.plan .hot{position:absolute;transform:translate(-50%,-50%);background:var(--navy);color:#fff;border:2px solid #fff;font:700 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .6rem;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3)}

/* map */
.map-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:1.4rem;align-items:start}
.map{position:relative;aspect-ratio:4/3;max-height:520px;border:1px solid var(--rule);background:var(--paper);z-index:0}
.map .map-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;gap:.6rem;padding:1rem;z-index:1}
.map.ready .map-fallback{display:none}
.map-link{font-size:.82rem;margin-top:.5rem}
.map-link a{color:var(--navy);font-weight:700;text-decoration:underline}
.nearby{display:grid;gap:.6rem}
.nearby h3{font-size:1rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--body);font-weight:700;color:var(--brass-text);margin-top:.4rem}
.nearby-list{list-style:none;margin:0;padding:0;display:grid}
.nearby-list li{display:grid;gap:.05rem;padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.nearby-list li b{font-weight:700}
.nearby-list li span{color:var(--muted);font-size:.84rem}
@media (max-width:900px){.map-grid{grid-template-columns:1fr}}
.leaflet-container{font-family:var(--body)}

/* ask section */
.ask{background:var(--paper)}
.ask .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.ask .side{display:grid;gap:1.1rem}
.agent-card{display:flex;align-items:center;gap:.9rem;padding:1rem;background:var(--bg);border:1px solid var(--rule)}
.agent-card img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1.5px solid var(--brass)}
.agent-card div{display:grid;gap:.1rem;font-size:.9rem}
.agent-card b{font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--navy)}
.agent-card span{color:var(--muted)}
.agent-card a{color:var(--navy);font-weight:700;text-decoration:underline}
@media (max-width:900px){.ask .grid{grid-template-columns:1fr}}

/* sticky lead bar */
.lead-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--rule);transform:translateY(110%);transition:transform .35s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
.lead-bar.show{transform:none}
.lead-bar .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.lb-price{font-family:var(--display);font-size:1.2rem;color:var(--navy)}
.lb-addr{color:var(--muted);font-size:.9rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-actions{display:flex;gap:.6rem}
.lb-actions .btn{padding:.6rem 1rem;font-size:.78rem}
.listing .sticky-call{display:none!important}
.listing{padding-bottom:84px}
@media (max-width:700px){.lb-price,.lb-addr{display:none}.lb-actions{flex:1}.lb-actions .btn{flex:1;justify-content:center}}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lightbox::backdrop{background:rgba(5,15,28,.94)}
.lightbox figure{margin:0;position:absolute;inset:0;display:grid;place-items:center;padding:3.5rem 4rem}
.lightbox img{max-width:100%;max-height:calc(100vh - 7rem);object-fit:contain}
.lightbox figcaption{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#fff;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.lb-close{position:absolute;top:1rem;right:1rem;z-index:4;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(11,37,69,.45);color:#fff;font-size:1.6rem;cursor:pointer}
@media (max-width:700px){.lightbox figure{padding:3rem .5rem}}

/* neighborhood guide */
.guide-hero{padding-block:clamp(48px,7vw,96px)}
.guide-hero h1{color:#fff;max-width:20ch}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.4rem}
.subn{border:1px solid var(--rule);padding:.9rem 1rem;display:grid;gap:.15rem;background:var(--bg)}
.subn b{font-family:var(--display);font-weight:400;color:var(--navy);font-size:1.05rem}
.subn span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text);font-weight:700}
.subn p{font-size:.88rem;color:var(--muted)}
@media (max-width:560px){.sub-grid{grid-template-columns:1fr}}
.faq{display:grid;gap:.6rem;max-width:72ch}
.faq details{border:1px solid var(--rule);background:var(--bg)}
.faq summary{cursor:pointer;padding:1rem 1.1rem;font-family:var(--display);font-size:1.05rem;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--brass);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 1.1rem 1.1rem;color:var(--muted);font-size:.95rem}
.comm{text-decoration:none;color:inherit}
a.comm:hover h3{color:var(--brass)}
.comm .arrow{color:var(--brass);font-size:1rem}
@media (prefers-reduced-motion:reduce){.gal .slide.active img{animation:none}.room-pin img,.room-cap{animation:none!important;transform:none!important;clip-path:none!important}.lead-bar{transition:none}}

.ai-label{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.92);color:#12213A;font:700 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:.4rem .6rem;border:1px solid #12213A}
.room-pin{position:sticky}
.room-pin .ai-label{top:1.6rem;left:calc(var(--gutter) + 10px)}

/* ===== Design review layer (apple-design-review, 5 Oct 2026). Visual only. ===== */
.gal-btn:active,.gal-open:active,.lb-close:active,.gal-dots button:active::before,.plan .hot:active{transform:translateY(-50%) scale(.94);transition:transform .1s ease-out}
.gal-open:active,.lb-close:active,.plan .hot:active{transform:scale(.96)}
.gal-dots button:active::before{transform:scale(.8)}
.gal-btn,.gal-open,.lb-close{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .15s;backdrop-filter:blur(6px) saturate(1.4);-webkit-backdrop-filter:blur(6px) saturate(1.4)}
.gal .slide figcaption,.gal-open,.compare .lbl{letter-spacing:.14em}
.lead-bar{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:0 -10px 30px -24px rgba(11,37,69,.5)}
.gal-head h1{letter-spacing:-.02em}
.room-cap h3{letter-spacing:-.015em;line-height:1.1}
.compare .handle::after{transition:transform .15s cubic-bezier(.2,.7,.2,1)}
.compare:active .handle::after{transform:translate(-50%,-50%) scale(.92)}
.lightbox[open]{animation:lbin .22s ease-out both}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-transparency:reduce){.lead-bar,.gal-btn,.gal-open,.lb-close{backdrop-filter:none;-webkit-backdrop-filter:none}.lead-bar{background:var(--bg)}}
@media (prefers-contrast:more){.gal-btn,.gal-open,.lb-close{background:rgba(11,37,69,.9)}}
@media (prefers-reduced-motion:reduce){.lightbox[open]{animation:none}.gal-btn:active,.gal-open:active{transform:translateY(-50%)}.gal-open:active{transform:none}}