/* Willow — Single property page. Token block mirrors the other page
   stylesheets so its variables resolve; the base reset comes from shell.css.
   Layout follows the Willow Listing Page spec: hairlines never shadows,
   2px near-square radius, palette white / cream / #282018 / #161616. */
:root{
  --color-white:#FFFFFF; --color-cream:#F2EEEB; --color-charcoal:#282018; --color-woodsmoke:#161616;
  --color-bg:var(--color-cream); --color-ink:var(--color-charcoal); --color-ink-inverse:var(--color-cream);
  --color-line:rgba(40,32,24,0.14); --color-line-inverse:rgba(242,238,235,0.2);
  --color-ember:var(--color-charcoal);
  --font-banner:"Forma DJR Banner","Times New Roman",serif; --font-text:"Forma DJR Text","Helvetica Neue",Arial,sans-serif;
  --tracking-brand:0.065em; --tracking-body:0.106em; --tracking-tight:-0.025em; --tracking-wide:0.14em;
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,4.5rem); --fs-h2:clamp(1.75rem,1.3rem + 2vw,3.25rem); --fs-h3:clamp(1.125rem,1rem + 0.5vw,1.375rem);
  --fs-lead:clamp(1.0625rem,1rem + 0.3vw,1.25rem); --fs-body:clamp(0.9375rem,0.9rem + 0.15vw,1rem);
  --fs-small:clamp(0.75rem,0.73rem + 0.1vw,0.8125rem); --fs-micro:0.6875rem;
  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-sm:1.25rem; --space-md:2.25rem;
  --space-lg:4.5rem; --space-xl:7.5rem; --space-2xl:10.5rem; --space-3xl:15rem;
  --container-max:min(2240px, 92vw); --gutter:clamp(1.25rem,4vw,4rem);
  --ease-editorial:cubic-bezier(0.16,1,0.3,1); --ease-out-soft:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:0.4s; --dur-mid:0.8s; --dur-slow:1.4s; --header-h:120px; --header-h-shrunk:66px;
}

.wv-listing{ background:#fff; color:#161616; font-family:var(--font-banner); }
/* One gutter for the whole page — every section lines up on the same vertical
   edge. No max-width cap; the gutter alone defines the content edge. */
.lst-wrap{ width:100%; padding-left:6.5vw; padding-right:6.5vw; box-sizing:border-box; }
.wv-listing :where(a){ -webkit-tap-highlight-color:transparent; }

/* ---------- 3. Back to listings ---------- */
.lst-back-bar{ padding-top:40px; }
.lst-back{ display:inline-flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(22,22,22,.2); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#161616; }
.lst-back span{ font-size:1.25em; line-height:1; }
.lst-back:hover{ opacity:.6; }

/* ---------- 4. Gallery carousel + thumbnail strip ---------- */
.lst-media{ margin-top:16px; }
.lst-carousel{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#e7e1db; }
.lst-slide{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .5s var(--ease-editorial,ease); }
img.lst-slide{ object-fit:cover; object-position:center; }
.lst-slide.is-active{ opacity:1; }
/* Video / virtual-tour tiles inside the carousel — dimmed poster + label. */
.lst-slide-media{ display:flex; align-items:center; justify-content:center; background:#161616; }
.lst-slide-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.lst-slide-cta{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; color:#FFFFFF; font-family:var(--font-banner); font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.lst-slide-ico{ display:inline-flex; }
.lst-slide-ico svg{ display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
.lst-expand{ position:absolute; inset:0; z-index:2; background:transparent; border:none; cursor:zoom-in; }
.lst-expand,.lst-expand:hover,.lst-expand:focus,.lst-expand:active,.lst-expand:focus-visible{ background:transparent !important; outline:none !important; }
/* Prev / next — no circle, no fill; a drop-shadow keeps the chevrons legible
   over light photography. */
/* Dark chevrons so they read on light photography, with a soft light halo so
   they stay visible on darker photos too. Bolder ~4px stroke. */
.lst-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:48px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:#161616; cursor:pointer; opacity:1; transition:opacity .18s ease; filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.8)); -webkit-tap-highlight-color:transparent; }
.lst-arrow:hover{ opacity:.6; }
.lst-arrow.prev{ left:26px; }
.lst-arrow.next{ right:26px; }
.lst-arrow svg{ display:block; stroke-width:3px; }
/* No coloured tap-flash on any gallery control (Safari paints a pink/blue
   highlight over the photo/overlay otherwise). */
.wv-listing button, .lst-arrow, .lst-gbtn, .lst-expand{ -webkit-tap-highlight-color:transparent; }
/* Overlay buttons — bottom-left, translucent slab, no counter. */
.lst-gtools{ position:absolute; left:22px; bottom:22px; z-index:4; display:flex; gap:10px; }
.lst-gbtn{ background:rgba(22,22,22,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); color:#FFFFFF; font-family:var(--font-banner); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:12px 20px; border:none; cursor:pointer; transition:background .18s ease; }
.lst-gbtn:hover{ background:rgba(22,22,22,.62); }
/* The below-gallery copy is desktop/iPad-hidden; shown only on mobile. */
.lst-gtools-below{ display:none; }
/* Thumbnail strip — same width + ratio as the hero. Six thumbs fill the row;
   any beyond that slide in a horizontal scroller (arrows on hover + swipe). */
.lst-thumbs-wrap{ position:relative; margin-top:10px; }
.lst-thumbs{ display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.lst-thumbs::-webkit-scrollbar{ display:none; }
/* grow to fill when ≤6 (free space), hold a 1/6 basis and overflow when >6
   (shrink:0 stops them squeezing). */
.lst-thumb{ position:relative; flex:1 0 calc((100% - 50px)/6); min-width:0; aspect-ratio:3/2; border:none; padding:0; background:#e7e1db center/cover no-repeat; cursor:pointer; opacity:.45; transition:opacity .18s ease; }
.lst-thumb.is-active{ opacity:1; }
.lst-thumb:hover{ opacity:.8; }
/* Scroll arrows — only present when >6 thumbs; fade in on hover of the strip. */
.lst-thumbs-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:36px; height:36px; border:none; border-radius:50%; background:rgba(22,22,22,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); color:#FFFFFF; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease, background .18s ease; }
.lst-thumbs-wrap[data-scroll]:hover .lst-thumbs-arrow{ opacity:1; }
.lst-thumbs-arrow:hover{ background:rgba(22,22,22,.82); }
.lst-thumbs-arrow:focus-visible{ opacity:1; outline:2px solid #161616; outline-offset:2px; }
.lst-thumbs-arrow[hidden]{ display:none; }
.lst-thumbs-arrow.prev{ left:8px; }
.lst-thumbs-arrow.next{ right:8px; }
.lst-thumb-video, .lst-thumb-tour{ background-color:#161616; }
.lst-thumb-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-size:11px; font-weight:600; letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.75); }

/* ---------- 5. Address bar (cream band) ---------- */
.lst-titlebar{ margin-top:16px; background:#F2EEEB; padding:30px 32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 48px; align-items:start; }
.lst-addr{ margin:0; min-width:0; text-wrap:balance; font-family:var(--font-banner); font-weight:300; font-size:28px; line-height:1.25; letter-spacing:1.1px; color:#161616; }
/* Light (300) address with 1.1px tracking (also matches shell's h1 weight). */
.wv-listing .lst-addr{ font-weight:300 !important; letter-spacing:1.1px !important; }
.lst-addr2{ text-transform:uppercase; }
.lst-titleright{ display:flex; flex-direction:column; align-items:flex-start; }
/* Status = uppercase label with a short thin rule beneath (no black box).
   Label-to-rule 5px, rule-to-price 8px. */
.lst-status{ display:block; }
.lst-status-lbl{ display:block; font-family:var(--font-banner); font-weight:500; font-size:16px; letter-spacing:.2em; text-transform:uppercase; color:#161616; }
.lst-status-rule{ display:block; width:40px; height:1px; margin-top:5px; background:#161616; }
.lst-price{ margin-top:8px; font-family:var(--font-banner); font-weight:300; font-size:22px; line-height:1.3; letter-spacing:1.1px; white-space:nowrap; color:#161616; }

/* ---------- 6. Specs row ---------- */
.lst-specwrap{ padding-top:56px; }
.lst-specgrid{ display:inline-flex; flex-wrap:wrap; gap:14px 44px; }
.lst-spec{ display:flex; align-items:baseline; gap:10px; }
.lst-spec b{ font-family:var(--font-banner); font-weight:400; font-size:20px; line-height:1; }
.lst-spec span{ font-family:var(--font-banner); font-weight:400; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#161616; }
.lst-specrule{ height:1px; background:rgba(22,22,22,.16); margin-top:56px; }

/* ---------- 7. Body — description + sticky rail ---------- */
.lst-body{ padding-top:56px; display:grid; grid-template-columns:minmax(0,720px) 400px; justify-content:space-between; gap:76px; align-items:start; }
.lst-desc{ min-width:0; }
/* CRM headline shown above the description (like the design's pull-quote). */
.lst-desc-heading{ margin:0 0 34px; max-width:720px; font-family:var(--font-banner); font-weight:300; font-size:clamp(21px,18px + .9vw,27px); line-height:1.34; letter-spacing:1.1px; color:#161616; text-wrap:pretty; }
.lst-desc-copy{ display:flex; flex-direction:column; gap:26px; max-width:720px; font-size:17px; font-weight:300; line-height:1.85; letter-spacing:1.1px; color:#161616; }
.lst-desc-copy p{ margin:0; }
.lst-desc-copy h2,.lst-desc-copy h3{ font-weight:400; letter-spacing:.02em; margin:0; }

.lst-rail{ position:sticky; top:110px; align-self:start; background:#FFFFFF; border-left:1px solid rgba(22,22,22,.16); padding:6px 0 42px 40px; }
.lst-rail-div{ height:1px; background:rgba(22,22,22,.14); margin:30px 0; }
.lst-rail-div.div2{ margin:38px 0 30px; }
/* Auction block (shown only when the CRM authority is Auction) */
.lst-auction-h{ font-family:var(--font-banner); font-weight:500; font-size:20px; letter-spacing:.18em; text-transform:uppercase; color:#000; }
.lst-auction-when-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.lst-auction-when{ font-size:17px; font-weight:300; letter-spacing:1.1px; }
.lst-auction-where{ font-size:15px; font-weight:300; letter-spacing:1.1px; margin-top:4px; color:rgba(22,22,22,.7); }
/* auction / inspections */
.lst-inspect-h{ font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#161616; }
.lst-inspect-list{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.lst-slot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lst-slot .t{ font-size:17px; font-weight:300; letter-spacing:1.1px; }
.lst-cal{ border:1px solid rgba(22,22,22,.2); background:transparent; color:#161616; padding:9px 14px; font-family:var(--font-banner); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.lst-cal:hover{ border-color:#161616; }
/* CTA */
.lst-cta{ display:flex; flex-direction:column; gap:14px; margin-top:34px; }
.lst-btn{ display:block; width:100%; text-align:center; font-family:var(--font-banner); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:18px 20px; cursor:pointer; text-decoration:none; border:none; transition:opacity .18s ease; }
.lst-btn.primary{ background:#282018; color:#F2EEEB; }
.lst-btn.ghost{ background:transparent; color:#161616; border:1px solid #161616; }
.lst-btn:hover{ opacity:.88; }
/* Share row */
.lst-share{ display:flex; align-items:center; gap:20px; }
.lst-share-lbl{ font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#161616; }
.lst-share-icons{ display:flex; align-items:center; gap:16px; }
.lst-share-icons a{ position:relative; display:inline-flex; color:#161616; }
.lst-share-icons a:hover{ opacity:.55; }
.lst-share-icons svg{ display:block; }
/* "Copied" confirmation on the copy-link icon */
.lst-copied{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#161616; color:#F2EEEB; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.lst-copied.show{ opacity:1; }

/* ---------- 8. Map ---------- */
.lst-mapsec{ padding-top:56px; }

/* ============================================================
   Sold / leased Campaign section + Appraisal CTA (full-bleed dark bands).
   Full-bleed via negative inline margin that cancels .lst-wrap's 6.5vw
   gutter (not 100vw, so the sticky rail is unaffected and no h-scroll).
   The content column matches the .lst-desc copy width (720px), left-aligned.
   ============================================================ */
.lst-campaign{ margin-top:64px; margin-inline:-6.5vw; padding:clamp(64px,8vw,120px) 6.5vw; background:#282018; color:#F2EEEB; }
.lst-campaign-in{ max-width:1180px; display:grid; grid-template-columns:0.9fr 1fr; gap:clamp(44px,6vw,96px); align-items:start; }
.lst-campaign-copy{ padding-top:38px; }
.lst-campaign-eyebrow{ display:block; font-family:var(--font-text); font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:rgba(242,238,235,.45); }
.lst-campaign-h{ margin:22px 0 0; font-family:var(--font-banner); font-weight:300; font-size:clamp(28px,22px + 1.8vw,46px); line-height:1.1; letter-spacing:1.1px; color:#F2EEEB; max-width:16ch; text-wrap:pretty; }
.lst-campaign-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px; padding:26px 0; border-top:1px solid rgba(242,238,235,.14); border-bottom:1px solid rgba(242,238,235,.14); }
.lst-campaign-stats[data-count="1"]{ grid-template-columns:1fr; }
.lst-campaign-stats[data-count="2"]{ grid-template-columns:repeat(2,1fr); }
.lst-campaign-stat{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.lst-campaign-stat-l{ font-family:var(--font-text); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,238,235,.45); }
.lst-campaign-stat-v{ font-family:var(--font-banner); font-weight:300; font-size:clamp(26px,20px + 1.8vw,42px); line-height:1; letter-spacing:.5px; color:#F2EEEB; }
.lst-campaign-body{ display:flex; flex-direction:column; gap:22px; margin-top:0; max-width:none; }
.lst-campaign-body p{ margin:0; font-family:var(--font-text); font-size:17px; font-weight:300; line-height:1.85; letter-spacing:.4px; color:rgba(242,238,235,.78); }
.lst-campaign-fine{ margin:36px 0 0; font-family:var(--font-text); font-size:13px; font-weight:300; letter-spacing:.4px; color:rgba(242,238,235,.45); }

/* Appraisal CTA — black box in the sticky rail (sold/leased), sits after the
   Share row and scrolls with the description. */
.lst-rail-appraisal{ margin-top:38px; background:#161616; color:#F2EEEB; padding:28px 26px 30px; }
.lst-rail-appraisal-h{ margin:0; font-family:var(--font-banner); font-weight:300; font-size:20px; line-height:1.2; letter-spacing:.6px; color:#F2EEEB; }
.lst-rail-appraisal-sub{ margin:12px 0 0; font-family:var(--font-text); font-size:14px; font-weight:300; line-height:1.6; letter-spacing:.3px; color:rgba(242,238,235,.72); }
.lst-rail-appraisal-btn{ display:block; width:100%; text-align:center; margin-top:22px; background:#F2EEEB; color:#161616 !important; font-family:var(--font-banner); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:16px 18px; text-decoration:none; transition:opacity .18s ease; }
.lst-rail-appraisal-btn:hover{ opacity:.88; }

@media (max-width:900px){
  .lst-campaign-in{ grid-template-columns:1fr; gap:36px; }
  .lst-campaign-copy{ padding-top:0; }
}
@media (max-width:620px){
  .lst-campaign{ margin-inline:-24px; padding-left:24px; padding-right:24px; }
  .lst-campaign-stats,
  .lst-campaign-stats[data-count="3"]{ grid-template-columns:repeat(2,1fr); gap:22px 20px; }
  .lst-campaign-stats[data-count="1"]{ grid-template-columns:1fr; }
}
@media (max-width:430px){
  .lst-campaign-stats,
  .lst-campaign-stats[data-count="2"],
  .lst-campaign-stats[data-count="3"]{ grid-template-columns:1fr; }
}
.lst-map{ position:relative; width:100%; aspect-ratio:21/9; background:#eeeae6; border:1px solid rgba(22,22,22,.12); overflow:hidden; }
.lst-map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(0); }
.lst-map-open{ position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:9px; background:#FFFFFF; border:1px solid rgba(22,22,22,.14); padding:10px 16px; font-size:14px; font-weight:300; color:#161616; }
.lst-map-open:hover{ opacity:.75; }
.lst-map-open svg{ display:block; }

/* ---------- 9. Agents ---------- */
.lst-agents{ margin-top:56px; padding-top:48px; border-top:1px solid rgba(22,22,22,.16); display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.lst-agent{ display:flex; align-items:center; gap:32px; }
.lst-agent-photo{ display:block; width:190px; height:230px; flex:none; overflow:hidden; background:#e7e1db center/cover no-repeat; }
a.lst-agent-photo{ cursor:pointer; transition:opacity .25s ease; }
a.lst-agent-photo:hover, a.lst-agent-photo:focus-visible{ opacity:.9; }
.lst-agent-info{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.lst-agent-info .nm{ font-family:var(--font-banner); font-weight:400; font-size:30px; line-height:1.15; letter-spacing:.005em; }
.lst-agent-info .nm a{ color:inherit; text-decoration:none; }
.lst-agent-info .nm a:hover, .lst-agent-info .nm a:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.lst-agent-info .ti{ font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#161616; }
.lst-agent-info .ph{ font-size:19px; font-weight:300; letter-spacing:1.1px; margin-top:8px; color:#161616; }
.lst-agent-info .em{ font-size:16px; font-weight:300; letter-spacing:1.1px; word-break:break-word; color:#161616; }

/* ---------- page close ---------- */
.lst-close{ margin-top:100px; border-top:1px solid rgba(22,22,22,.16); }

/* ---------- modals (enquiry / all-photos / floorplan) ---------- */
.lst-modal{ position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:24px; }
.lst-modal.open{ display:flex; }
.lst-scrim{ position:absolute; inset:0; background:rgba(22,18,14,.55); backdrop-filter:blur(3px); }
.lst-card{ position:relative; z-index:2; background:#fff; width:min(480px,100%); max-height:90vh; overflow:auto; padding:38px; border:1px solid var(--color-line); box-shadow:0 40px 90px -40px rgba(0,0,0,.5); letter-spacing:1.5px; }
.lst-card h3,.lst-card .sub,.lst-card label,.lst-card input,.lst-card textarea,.lst-card select,.lst-card button{ letter-spacing:1.5px; }
.lst-x{ position:absolute; top:14px; right:14px; z-index:5; background:transparent; border:none; font-size:24px; line-height:1; color:var(--color-ink); opacity:.6; cursor:pointer; }
.lst-x:hover{ opacity:1; }
.lst-card h3{ font-family:var(--font-banner); font-weight:300; font-size:1.4rem; letter-spacing:.4px; }
.lst-card .sub{ font-size:14px; color:var(--color-charcoal); opacity:.75; margin-top:8px; letter-spacing:.02em; }
.lst-form{ margin-top:22px; display:flex; flex-direction:column; gap:18px; }
/* Floating-label fields — match the appraisal / alerts forms. The label
   rests over the control as a placeholder and lifts clear once the field
   is focused or holds a value (.has-value is toggled in shell.js). */
.lst-form .field{ position:relative; border-bottom:1px solid var(--color-line); padding:14px 0 8px; }
.lst-form .field input,
.lst-form .field textarea{ width:100%; font-family:var(--font-banner); font-size:15px; background:transparent; border:none; padding:0; padding-top:1.05em; color:var(--color-ink); letter-spacing:.02em; }
.lst-form .field textarea{ resize:none; line-height:1.5; }
.lst-form .field input:focus,.lst-form .field textarea:focus{ outline:none; }
.lst-form .field:focus-within{ border-color:#282018; }
.lst-form .field label{ position:absolute; top:calc(14px + 1.05em); left:0; font-family:var(--font-banner); font-size:15px; color:var(--color-ink); opacity:.55; letter-spacing:.02em; pointer-events:none; transform-origin:left top; transition:transform .4s var(--ease-editorial), opacity .4s var(--ease-editorial); }
.lst-form .field.has-value label,
.lst-form .field:focus-within label{ transform:translateY(-1.5em) scale(.8); opacity:.55; }
.lst-form .send{ background:#282018; color:#F2EEEB; border:none; padding:15px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-top:6px; cursor:pointer; font-family:var(--font-banner); }
.willow-form-status{ font-size:13px; opacity:.8; min-height:1.2em; margin:8px 0 0; }
.lst-modal-grid{ align-items:flex-start; justify-content:center; padding:0; }
.lst-gridpanel{ position:relative; z-index:2; width:min(1180px,100%); max-height:100vh; display:flex; flex-direction:column; background:#fff; }
.lst-gridbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 26px; border-bottom:1px solid var(--color-line); position:sticky; top:0; background:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-charcoal); }
.lst-photogrid{ overflow:auto; padding:16px 26px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lst-photogrid .tile{ position:relative; aspect-ratio:4/3; border:none; background:#e7e0d8 center/cover no-repeat; cursor:pointer; padding:0; }
.lst-photogrid .tile:first-child{ grid-column:1 / -1; aspect-ratio:16/9; }
.lst-photogrid .tile:hover{ opacity:.92; }
.lst-photogrid .tile-video, .lst-photogrid .tile-tour{ background-color:#161616; }
.lst-photogrid .tile-badge{ position:absolute; left:10px; bottom:10px; background:rgba(22,22,22,.62); color:#FFFFFF; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; }

/* video modal — embedded player */
.lst-modal-media{ padding:24px; }
.lst-mediapanel{ position:relative; z-index:2; width:min(960px,100%); }
.lst-mediabody{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.lst-mediabody iframe, .lst-mediabody video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.lst-modal-media .lst-x{ top:-2px; right:0; color:#F2EEEB; opacity:.85; }
.lst-modal-media .lst-x:hover{ opacity:1; }
.lst-mediaopen{ display:inline-block; margin-top:12px; color:#F2EEEB; font-size:13px; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px; }

/* fullscreen image lightbox */
.lst-lightbox{ padding:0; }
.lst-lightbox .lst-scrim{ background:rgba(16,13,10,.94); backdrop-filter:none; }
.lst-lb-img{ position:relative; z-index:2; max-width:86vw; max-height:82vh; object-fit:contain; }
.lst-lb-x{ position:absolute; top:22px; right:26px; z-index:3; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:#F2EEEB; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lst-lb-x:hover{ opacity:.7; }
.lst-lb-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(242,238,235,.5); border-radius:50%; background:transparent; color:#F2EEEB; cursor:pointer; transition:background .18s ease; -webkit-tap-highlight-color:transparent; }
.lst-lb-arrow:hover{ background:rgba(242,238,235,.12); }
.lst-lb-arrow.prev{ left:26px; }
.lst-lb-arrow.next{ right:26px; }
.lst-lb-count{ position:absolute; bottom:26px; left:0; right:0; z-index:3; text-align:center; color:rgba(242,238,235,.7); font-size:12px; letter-spacing:.16em; }
@media (max-width:620px){
  .lst-lb-arrow{ width:44px; height:44px; }
  .lst-lb-arrow.prev{ left:12px; } .lst-lb-arrow.next{ right:12px; }
  .lst-lb-img{ max-width:94vw; }
}
.lst-modal-fp{ padding:24px; }
.lst-fppanel{ position:relative; z-index:2; background:#fff; width:min(880px,100%); max-height:92vh; overflow:auto; padding:20px; }
.lst-fppanel img{ width:100%; height:auto; display:block; }

/* ---------- 12. Responsive ---------- */
/* layout collapses to one column */
@media (max-width:1000px){
  .lst-titlebar{ grid-template-columns:1fr; gap:14px; }
  .lst-price{ white-space:normal; }
  .lst-body{ grid-template-columns:1fr; gap:48px; }
  .lst-rail{ position:static; max-height:none; overflow:visible; border-left:none; padding-left:0; padding-top:0; }
  .lst-agents{ grid-template-columns:1fr; gap:44px; }
}
/* phone */
@media (max-width:620px){
  .lst-wrap{ padding-left:24px; padding-right:24px; }
  .lst-back-bar{ padding-top:28px; }
  .lst-titlebar{ padding:24px; }
  .lst-addr{ font-size:24px; }
  .lst-specgrid{ gap:14px 30px; }
  .lst-spec b{ font-size:19px; }
  /* Move the gallery buttons OUT from over the photo and place them below it. */
  .lst-carousel .lst-gtools{ display:none; }
  .lst-gtools-below{ display:flex; position:static; flex-direction:row; flex-wrap:wrap; align-items:stretch; gap:8px; left:auto; bottom:auto; margin-top:12px; }
  .lst-gtools-below .lst-gbtn{ background:#282018; color:#F2EEEB; backdrop-filter:none; -webkit-backdrop-filter:none; flex:1 1 auto; text-align:center; }
  .lst-gtools-below .lst-gbtn:hover{ background:#161616; }
  .lst-thumbs-wrap{ display:none; }
  .lst-map{ aspect-ratio:3/2; }
  .lst-agent-photo{ width:140px; height:170px; }
  .lst-agent-info .nm{ font-size:24px; }
}