:root{--text:#17191d;--muted:#68717b;--line:#e1e4e7;--soft:#f6f6f5;--paper:#fff}
.listing *{box-sizing:border-box}
html{scroll-behavior:smooth}
.listing{background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif;width:100%;max-width:1600px;margin:auto;box-shadow:0 0 50px #14202d18}
.listing a{color:inherit;text-decoration:none}
.listing button,.listing input,.listing select,.listing textarea{font:inherit}
/* Neutralize unscoped globals from new-marketing.css that leak in:
   `img{padding-right:15px}` and `.button{width:350px;margin:5px 0;border-radius:5px}`.
   The button width in particular forced .listing wider than the viewport, since
   #vue is a centering flex container and sizes children to content. */
.listing img{padding:0}
.listing .button{width:auto;margin:0;border-radius:0}
.listing .site-header{height:80px;display:flex;align-items:center;gap:34px;padding:0 7.5%;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.listing .brand{display:flex;align-items:center;width:230px;height:58px}
.listing .brand img{display:block;max-width:210px;max-height:56px;object-fit:contain}
.listing .site-header nav{display:flex;gap:30px;margin-left:auto;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.listing .site-header nav a:hover{color:var(--accent)}
.listing .button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.025em;cursor:pointer}
.listing .button.primary{background:var(--ink);color:#fff}
.listing .button.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.listing .editorial-hero{position:relative;height:570px;overflow:hidden}
.listing .editorial-hero>img{width:100%;height:100%;object-fit:cover}
.listing .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 50%)}
/* Fixed height so the hero reads identically on every listing regardless of how
   long the marketing headline is. The title reserves exactly two lines and
   ellipsizes beyond that, and the actions row is pinned to the card bottom so a
   4- vs 5-fact listing still lines up. */
.listing .hero-card{position:absolute;left:9.2%;top:50%;width:500px;height:515px;transform:translateY(-50%);padding:38px 34px 30px;background:#fffffff2;box-shadow:0 18px 50px #0002;display:flex;flex-direction:column;overflow:hidden}
/* Children must not flex-shrink, or the fixed height squashes and clips the
   single-line rows (eyebrow, address, price) instead of ellipsizing them. */
.listing .hero-card>*{flex-shrink:0}
.listing .eyebrow{margin:0 0 12px;color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.11em}
.listing .hero-card .eyebrow,.listing .hero-card .hero-address,.listing .hero-card .hero-price{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
/* 38px + a tighter 1.08 line-height and a 4-line clamp (up from 43px/3 lines) fits
   roughly 60% more headline -- most real titles now fit in full instead of
   ellipsizing. The reserved min-height keeps every hero identically laid out
   whether the title runs one line or fills all four. */
.listing .hero-card h1{margin:0 0 14px;font:500 38px/1.08 Georgia,serif;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:4.32em}
.listing .hero-address{color:#4e555c;font-size:14px;margin:0}
.listing .red-rule{display:block;width:54px;height:2px;margin:14px 0;background:var(--accent)}
.listing .hero-price{margin:0 0 14px;color:var(--accent);font:31px Georgia,serif}
.listing .hero-price small{font:14px Arial;color:#565d65}
.listing .hero-facts{display:grid;grid-template-columns:repeat(5,1fr);padding:4px 0 16px}
.listing .hero-facts div{display:flex;flex-direction:column;align-items:center;padding:2px 8px;border-right:1px solid var(--line);text-align:center}
.listing .hero-facts div:last-child{border:0}
.listing .hero-facts strong{font-size:15px}
.listing .hero-facts span{margin-top:4px;color:#555e67;font-size:10px}
.listing .hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.listing .hero-actions .button{flex:1 1 calc(50% - 8px);padding:0 13px;white-space:nowrap}
.listing .photo-badge{position:absolute;right:25px;bottom:22px;border:0;background:#fff;padding:12px 15px;box-shadow:0 8px 24px #0003;font-weight:700;cursor:pointer}
.listing .section{padding:72px 9.2%}
.listing .section--soft{background:var(--soft)}
.listing .overview{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:90px;align-items:start}
.listing .overview h2,.listing .section h2,.listing .tour-banner h2,.listing .seller-cta h2{margin:0 0 17px;font:500 37px/1.15 Georgia,serif;letter-spacing:-.018em}
.listing .lede{max-width:850px;color:#434b53;font-size:15px;line-height:1.75}
.listing .resource-links{display:flex;gap:30px;margin-top:27px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase}
.listing .agent-action-card{padding:24px;border:1px solid var(--line);background:#fff;box-shadow:0 16px 45px #1a24300f}
.listing .agent-action-card>.button{display:flex;width:100%;margin-top:9px}
.listing .text-link,.listing .text-button{display:inline-block;margin-top:16px;border:0;background:none;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;cursor:pointer}
.listing .agent-mini{display:flex;align-items:center;gap:14px;padding:10px 0 17px;border-bottom:1px solid var(--line)}
.listing .agent-mini img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.listing .agent-mini>div{display:flex;flex-direction:column;gap:3px;font-size:12px}
.listing .agent-mini strong{font:19px Georgia,serif}
.listing .agent-mini span,.listing .agent-mini small{color:var(--muted)}
.listing .section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
.listing .section-heading h2{margin-bottom:0}
.listing .gallery-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:250px 250px;gap:7px}
.listing .gallery-grid button{position:relative;padding:0;border:0;overflow:hidden;background:#ddd;cursor:pointer}
.listing .gallery-grid button.gallery-main{grid-row:1/3}
.listing .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.listing .gallery-grid button:hover img{transform:scale(1.025)}
.listing .gallery-grid button>span{position:absolute;inset:0;display:grid;place-items:center;background:#07192cb8;color:#fff;font:28px Georgia,serif}
.listing .inventory{background:#fff}
.listing .space-table{border-top:2px solid var(--ink);background:#fff}
.listing .space-row{display:grid;grid-template-columns:1.35fr 1fr .8fr 1fr .8fr .5fr;align-items:center;min-height:80px;border-bottom:1px solid var(--line);padding:0 20px;gap:20px;font-size:13px}
.listing .table-head{min-height:44px;background:var(--ink);color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.listing .space-row span:first-child{display:flex;flex-direction:column;gap:5px}
.listing .space-row small{color:var(--muted)}
.listing .space-row em{display:inline-block;font-style:normal;background:#e8f4ed;color:#217344;border-radius:99px;padding:6px 9px}
.listing .space-row a{color:var(--accent);font-weight:800}
.listing .features{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;background:#fff}
.listing .feature-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.listing .feature-grid div{display:flex;gap:14px;align-items:center;min-height:66px;border-bottom:1px solid var(--line);padding:12px 10px}
.listing .feature-grid i{color:var(--accent);font-style:normal;font-size:10px}
.listing .feature-grid span{font-size:13px}
.listing .muted{color:var(--muted);line-height:1.7}
.listing .tour-banner{position:relative;min-height:430px;display:grid;grid-template-columns:1.35fr .65fr;background:var(--ink);color:#fff;overflow:hidden}
.listing .tour-banner>img{width:100%;height:100%;object-fit:cover}
.listing .tour-banner>div{display:flex;flex-direction:column;justify-content:center;padding:55px}
.listing .tour-banner p:not(.eyebrow){color:#d8e0e8;line-height:1.6}
.listing .tour-banner .button{align-self:flex-start;margin-top:15px}
.listing .tour-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
.listing .tour-actions .button{align-self:auto;margin-top:0}
.listing .location{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.listing .map{height:340px;position:relative;display:grid;place-items:center;background:repeating-linear-gradient(27deg,#e7ece9 0 33px,#fff 34px 38px);background-size:cover;background-position:center}
.listing .map span{display:grid;place-items:center;width:48px;height:48px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ink);color:#fff}
.listing .agent-section{background:#fff}
.listing .agent-profile{display:grid;grid-template-columns:360px 1fr;gap:58px;padding:45px 0;border-top:1px solid var(--line)}
.listing .agent-profile:first-of-type{border-top:0}
.listing .agent-profile__photo{position:relative;height:460px;background:#e7e9eb}
.listing .agent-profile__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.listing .agent-profile__photo span{position:absolute;left:0;bottom:0;padding:12px 18px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.listing .agent-profile__content h3{margin:0 0 10px;font:500 38px Georgia,serif}
.listing .agent-profile__content>p:not(.eyebrow){color:#434b53;line-height:1.72}
.listing .agent-links{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 25px;color:var(--accent);font-size:12px;font-weight:700}
.listing .credentials{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:28px}
.listing .credentials h4{margin:0 0 10px;color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.listing .credentials ul{margin:0;padding:0;list-style:none}
.listing .credentials li{padding:7px 0;border-bottom:1px solid var(--line);color:#4a535c;font-size:12px;line-height:1.35}
.listing .property-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.listing .property-card{background:#fff;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.listing .property-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #19232f12}
.listing .property-card img{width:100%;height:180px;object-fit:cover}
.listing .property-card div{padding:18px}
.listing .property-card h3{min-height:46px;margin:0 0 8px;font:19px/1.2 Georgia,serif}
.listing .property-card div>p:not(.eyebrow){min-height:32px;margin:0 0 13px;color:var(--muted);font-size:12px}
.listing .property-card strong{display:block;color:var(--accent);font-size:15px}
.listing .property-card span{display:block;margin-top:12px;color:var(--muted);font-size:10px}
.listing .related-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.listing .related-pager .button[disabled]{opacity:.4;cursor:default;pointer-events:none}
.listing .nav-toggle{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line);background:#fff;color:var(--text);font-size:18px;cursor:pointer}
.listing .mobile-nav{display:none}
.listing .seller-cta{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:65px 9.2%;background:var(--ink);color:#fff}
.listing .seller-cta>div{max-width:850px}
.listing .seller-cta p:not(.eyebrow){color:#dbe2e8}
.listing .contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;background:#fff}
.listing .contact form{padding:30px;border:1px solid var(--line);background:var(--soft)}
.listing .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.listing .contact label{display:flex;flex-direction:column;gap:7px;margin-bottom:17px;font-size:11px;font-weight:800;text-transform:uppercase}
.listing .contact input,.listing .contact select,.listing .contact textarea{width:100%;padding:13px;border:1px solid #cfd4d9;background:#fff}
.listing .contact form>small{display:block;margin-top:12px;color:var(--muted);font-size:10px;line-height:1.5}
.listing .share-strip{display:flex;justify-content:space-between;align-items:center;padding:25px 9.2%;border-top:1px solid var(--line);font-size:12px;text-transform:uppercase;font-weight:800}
.listing .share-strip div{display:flex;gap:10px}
.listing .share-strip a,.listing .share-strip button{min-width:38px;height:38px;display:grid;place-items:center;padding:0 11px;border:1px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
.listing .legal{padding:30px 9.2%;background:#f6f6f6;color:#7b8289;font-size:9px;line-height:1.6;text-transform:uppercase}
.listing footer{min-height:120px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:50px;padding:25px 9.2%;background:#111820;color:#dce1e6;font-size:11px}
.listing footer>div:first-child{display:flex;flex-direction:column;gap:5px}
.listing footer>div:first-child strong{font:22px Georgia,serif;color:#fff}
.listing footer>div:nth-child(2){display:flex;gap:25px}
.listing .mobile-actions{display:none}
.listing .gallery-modal{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:#06101beF;color:#fff}
.listing .gallery-modal>img{max-width:86vw;max-height:82vh;object-fit:contain}
.listing .gallery-modal button{position:absolute;border:0;background:#ffffff1f;color:#fff;cursor:pointer}
.listing .gallery-close{right:25px;top:20px;width:48px;height:48px;font-size:32px}
.listing .gallery-prev,.listing .gallery-next{top:50%;width:55px;height:70px;font-size:42px}
.listing .gallery-prev{left:25px}
.listing .gallery-next{right:25px}
.listing .gallery-modal>span{position:absolute;bottom:24px;font-size:12px}

.listing .document-count{padding:8px 12px;border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.listing .document-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.listing .document-card{min-height:116px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;padding:20px;border:1px solid var(--line);background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.listing .document-card>i{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--accent);font-size:20px;font-style:normal}
.listing .document-card>div>span{color:var(--accent);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.listing .document-card h3{margin:5px 0;font:19px Georgia,serif}
.listing .document-card>strong{color:var(--ink);font-size:10px;text-transform:uppercase;white-space:nowrap}
/* Ad creatives are supplied banners of varying aspect ratio. The design's
   cover-cropped hero-style panel cuts their copy off, so show the whole
   creative centered instead of cropping it to a fixed height. */
.listing .ad-panel{display:block;width:100%;padding:34px 9.2%;background:var(--soft);text-align:center;line-height:0}
.listing .ad-panel>img{display:inline-block;max-width:100%;height:auto}

.listing .button:active,.listing .photo-badge:active{transform:translateY(1px) scale(.985)}
.listing .button:focus-visible,.listing .photo-badge:focus-visible,.listing .text-button:focus-visible,.listing .gallery-grid button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 42%,transparent);outline-offset:3px}
@media(hover:hover){
  .listing .button:hover{transform:translateY(-2px);box-shadow:0 9px 22px #14202d1d}
  /* Outline buttons invert to the brand ink; filled variants shift tone instead. */
  .listing .button:not(.primary):not(.accent):hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .listing .button.primary:hover{background:color-mix(in srgb,var(--ink) 84%,white);border-color:color-mix(in srgb,var(--ink) 84%,white)}
  .listing .button.accent:hover{background:color-mix(in srgb,var(--accent) 84%,black);border-color:color-mix(in srgb,var(--accent) 84%,black)}
  .listing .photo-badge:hover{background:var(--ink);color:#fff}
  .listing .site-header nav a:hover,.listing .resource-links a:hover,.listing .agent-links a:hover,.listing footer a:hover{color:var(--accent)}
  .listing .property-card:hover{border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
  .listing .document-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 15px 34px #17202d14}
  .listing .document-card:hover>i{background:var(--accent);color:#fff}
  .listing .document-card:hover>strong{color:var(--accent)}
  .listing .share-strip a:hover,.listing .share-strip button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}

/* ---- Modal overlays: offer wizard, confidentiality agreement, seller consultation ----
   These reuse legacy markup (.wizard-box, #schedule-showing-overlay) that was styled
   rounded/grey for the old page. Restyled here to the new system: square white panel,
   Georgia headings, square bordered inputs, brand buttons. Positioning is deliberately
   left to the legacy rules and the inline form_style top offset. */
.listing .wizard-box,
.listing #schedule-showing-overlay{background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 30px 80px #06111d40;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:var(--text)}
/* True viewport-centered modal, independent of scroll position. This overrides the
   legacy .wizard-box's absolute+top-only positioning (which only ever set a `top`
   via form_style, with no horizontal centering, so it drifted off-center) and the
   #schedule-showing-overlay's fixed-but-not-vertically-centered legacy rule. */
.listing .wizard-box,
.listing #schedule-showing-overlay{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%);max-height:88vh;overflow:auto}
/* The legacy .wizard-box sets `justify-content:center` on this same flex column.
   Centering a flex container that then also scrolls is a known browser bug: content
   taller than the box gets clipped at the start and only the tail end is reachable
   by scrolling, which read as "the top is cut off, scroll feels broken". Overriding
   to flex-start makes the content start at the top and scroll normally to the end. */
.listing .wizard-box{justify-content:flex-start!important}
.listing .wizard-box{padding:40px 52px;max-width:560px;width:calc(100vw - 32px)}
.listing #schedule-showing-overlay{padding:40px 44px 32px;width:400px;max-width:calc(100vw - 32px)}

/* Step icons (MY INFO / SIGN / FINISH): the legacy default and "outlined" states
   used a flat mid-grey (#f7f7f7) circle that reads as broken against the new white
   panel. Swap to the same soft/line/accent tokens as everything else on the page. */
.listing .wizard-box .icon{background:var(--soft);border-color:var(--line);color:var(--muted)}
.listing .wizard-box .icon.outlined{background:#fff;border-color:var(--accent);color:var(--accent)}
.listing .wizard-box .icon.filled{background:var(--accent);border-color:var(--accent);color:#fff}

.listing .wizard-box .title,
.listing #schedule-showing-overlay .intro{font:500 29px/1.15 Georgia,serif;letter-spacing:-.015em;margin-bottom:10px;color:var(--text)}
.listing .wizard-box .congrats{font:500 32px Georgia,serif;color:var(--accent);letter-spacing:-.015em;margin-bottom:6px}
.listing .wizard-box .info,
.listing #schedule-showing-overlay .need-info{color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:18px}
.listing #schedule-showing-overlay .big-red{color:var(--accent);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.listing .wizard-box .red-text,
.listing .wizard-box .errors,
.listing #schedule-showing-overlay .errors{color:var(--accent);font-size:12px;font-weight:700}
.listing .wizard-box .gray-text{color:var(--muted)}
.listing #schedule-showing-overlay p{color:var(--muted);font-size:11px;line-height:1.5;margin:14px 0 0}

.listing .wizard-box input[type=text],
.listing .wizard-box input[type=email],
.listing .wizard-box input[type=tel],
.listing .wizard-box textarea,
.listing #schedule-showing-overlay input[type=text],
.listing #schedule-showing-overlay textarea{width:100%;padding:13px;border:1px solid #cfd4d9;border-radius:0;background:#fff;font:inherit;font-size:14px;margin:0 0 14px}
.listing .wizard-box textarea,
.listing #schedule-showing-overlay textarea{min-height:104px;margin-top:0;height:auto;resize:vertical}
.listing .wizard-box input:focus,
.listing .wizard-box textarea:focus,
.listing #schedule-showing-overlay input:focus,
.listing #schedule-showing-overlay textarea:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 38%,transparent);outline-offset:1px}
.listing .wizard-box .flex-c{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%}
.listing .wizard-box .flex-c label,
.listing #schedule-showing-overlay .input label{display:block;margin-bottom:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text);text-align:left}
.listing #schedule-showing-overlay .input{margin-bottom:2px}

/* Confidentiality agreement (#confidential): labels wrap their input directly
   rather than using .flex-c, so style that shape to match the rest of the page's
   label-above-input pattern (see .contact label). */
.listing .confidential-box .main{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.listing .confidential-box .title{margin:2px 0 14px}
.listing .confidential-box .muted{margin:0 0 22px}
.listing .confidential-box label{display:block;width:100%;max-width:320px;margin-bottom:16px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text);text-align:left}
.listing .confidential-box label input{margin-top:7px;margin-bottom:0}
.listing .confidential-box .errors{width:100%;max-width:320px;text-align:left;margin:-8px 0 10px}
.listing .confidential-box #confidentialRecaptcha{margin:4px auto 6px}

.listing .wizard-box .button,
.listing #schedule-showing-overlay .rw-button{min-height:44px;width:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 26px;margin:8px 0 0;border:1px solid var(--accent);border-radius:0;background:var(--accent);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.025em;cursor:pointer}
.listing #schedule-showing-overlay .rw-button{border-radius:0;margin-top:16px}
.listing #schedule-showing-overlay .rw-button span{display:inline;padding:0}
.listing .wizard-box .button:hover,
.listing #schedule-showing-overlay .rw-button:hover{background:color-mix(in srgb,var(--accent) 84%,black);border-color:color-mix(in srgb,var(--accent) 84%,black);color:#fff}

.listing .wizard-box .steps{display:flex;gap:40px;justify-content:center;margin:4px 0 22px}
.listing .wizard-box .steps .label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.listing .wizard-box .steps .icon.filled,
.listing .wizard-box .steps .icon.outlined{color:var(--accent)}

.listing .wizard-box .close,
.listing #schedule-showing-overlay .close{position:absolute;top:14px;right:16px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--text);cursor:pointer}
.listing .wizard-box .close:hover,
.listing #schedule-showing-overlay .close:hover{background:var(--ink);border-color:var(--ink);color:#fff}

@media(max-width:1050px){
  .listing .site-header nav{gap:17px}
  .listing .editorial-hero{height:520px}
  .listing .hero-card{left:5%;width:460px;height:515px}
  .listing .section{padding-inline:6%}
  .listing .property-grid{grid-template-columns:repeat(2,1fr)}
  .listing .credentials{grid-template-columns:1fr 1fr}
  .listing .seller-cta,.listing .legal,.listing .share-strip,.listing footer{padding-inline:6%}
}

@media(max-width:760px){
  .listing{background:#fff}
  .listing .site-header{height:62px;padding:0 18px}
  .listing .brand{width:170px}
  .listing .brand img{max-width:160px;max-height:46px}
  .listing .site-header nav,.listing .site-header>.button{display:none}
  .listing .site-header{gap:12px;justify-content:space-between}
  .listing .nav-toggle{display:grid;margin-left:auto;flex:0 0 auto}
  .listing .mobile-nav{display:flex;flex-direction:column;position:fixed;z-index:120;top:62px;left:0;right:0;bottom:0;background:#fff;padding:8px 20px 90px;overflow:auto;border-top:1px solid var(--line)}
  .listing .mobile-nav a{padding:19px 2px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  .listing .related-pager{gap:12px;font-size:11px}
  .listing .editorial-hero{height:auto;padding-top:68vw;background:#eee;overflow:visible}
  .listing .editorial-hero>img{position:absolute;inset:0 0 auto;height:68vw}
  .listing .hero-shade{display:none}
  /* Mobile stacks the card below the image, so let it size to content rather
     than holding the desktop fixed height (which would clip). */
  .listing .hero-card{position:relative;left:auto;top:auto;width:auto;height:auto;transform:none;margin:-30px 16px 0;padding:25px 21px;box-shadow:0 12px 35px #0002}
  .listing .hero-card h1{font-size:32px;-webkit-line-clamp:3;min-height:0}
  .listing .hero-facts{grid-template-columns:repeat(3,1fr);row-gap:13px}
  .listing .photo-badge{top:calc(68vw - 50px);right:23px;bottom:auto}
  .listing .section{padding:50px 20px}
  .listing .overview{grid-template-columns:1fr;gap:32px}
  .listing .overview h2,.listing .section h2,.listing .tour-banner h2,.listing .seller-cta h2{font-size:31px}
  .listing .resource-links{flex-direction:column;gap:14px}
  .listing .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 150px 150px}
  .listing .gallery-grid button.gallery-main{grid-column:1/3;grid-row:auto}
  .listing .section-heading{align-items:flex-start}
  .listing .table-head{display:none}
  .listing .space-row{grid-template-columns:1fr 1fr;padding:20px;gap:15px}
  .listing .space-row>span:first-child{grid-column:1/3}
  .listing .space-row span[data-label]:before{content:attr(data-label);display:block;color:var(--muted);font-size:9px;text-transform:uppercase;margin-bottom:4px}
  .listing .features{grid-template-columns:1fr;gap:30px}
  .listing .feature-grid{grid-template-columns:1fr}
  .listing .tour-banner{grid-template-columns:1fr;min-height:0}
  .listing .tour-banner>img{height:260px}
  .listing .tour-banner>div{padding:40px 22px}
  .listing .location{grid-template-columns:1fr;gap:30px}
  .listing .map{height:240px}
  .listing .agent-profile{grid-template-columns:1fr;gap:30px}
  .listing .agent-profile__photo{height:420px}
  .listing .credentials{grid-template-columns:1fr}
  .listing .property-grid{grid-template-columns:1fr}
  .listing .seller-cta{align-items:flex-start;flex-direction:column;padding:50px 22px}
  .listing .contact{grid-template-columns:1fr;gap:30px}
  .listing .contact form{padding:20px}
  .listing .form-grid{grid-template-columns:1fr}
  .listing .share-strip{padding:25px 20px}
  .listing footer{grid-template-columns:1fr;padding:35px 20px 90px;gap:22px}
  .listing footer>div:nth-child(2){flex-wrap:wrap}
  .listing .mobile-actions{position:fixed;z-index:90;bottom:0;left:0;right:0;height:62px;display:grid;grid-template-columns:.7fr .8fr 1.3fr;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 25px #0002}
  .listing .mobile-actions a{display:grid;place-items:center;border-right:1px solid var(--line);font-size:11px;font-weight:800;text-transform:uppercase}
  .listing .mobile-actions a:last-child{background:var(--accent);color:#fff}
  .listing .gallery-modal>img{max-width:100vw;max-height:78vh}
  .listing .gallery-prev{left:5px}
  .listing .gallery-next{right:5px}
  .listing .document-grid{grid-template-columns:1fr}
  .listing .document-card{grid-template-columns:45px 1fr;padding:17px}
  .listing .document-card>strong{grid-column:2}
  .listing .document-count{display:none}
  .listing .ad-panel{padding:24px 20px}
  /* Base rule already centers + caps width as calc(100vw - 32px) at any size, so
     mobile only needs tighter padding, not separate positioning. */
  .listing #schedule-showing-overlay{width:calc(100vw - 32px);padding:28px 20px 24px}
  .listing .wizard-box{padding:28px 20px}
}