/* Unit marketing website -- editorial listing layout.
   Ported from the transaction listing page (articake4 webroot/css/listing-page.css)
   and re-pointed at the data a unit and its property actually carry: rent instead
   of sale price, beds/baths/sqft instead of suites, sibling units instead of
   listing suites, and property managers instead of listing agents.

   Everything is scoped under .listing so the legacy marketing-websites.css rules
   used by the overlays and the rest of the app are left alone. */

.listing{
    --text:#17191d;
    --muted:#68717b;
    --line:#e1e4e7;
    --soft:#f6f6f5;
    --paper:#fff;
    --accent:#c21a32;
    --ink:#0c3279;
}

.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}

/* The marketing layout wraps the view in `.container#mainContainer`, which is a
   centering flex column -- it sizes .listing to its content instead of the full
   width. Only this page loads this stylesheet, so neutralizing it here is safe.

   top:0 removes the 56px offset the legacy mobile rule applies (marketing-websites
   scss, the <=768px block). That offset existed to clear the old fixed .title-bar
   mobile header; this design replaced it with a sticky .site-header in the normal
   flow, so the offset was left over as a blank band above the logo. */
#mainContainer{display:block;align-items:stretch;top:0}

/* Neutralize unscoped globals from marketing-websites.css that leak in:
   `img{padding-right:15px}` and `.button{width:350px;margin:5px 0;border-radius:5px}`. */
.listing img{padding:0}
.listing .button{width:auto;margin:0;border-radius:0}

/* ---------- header ---------- */
.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}

/* ---------- hero ---------- */
.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 unit regardless of how long
   the headline is. The title reserves exactly four lines and ellipsizes beyond
   that, and the actions row is pinned to the card bottom so a unit with four facts
   and one with five still line 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}
.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,minmax(0,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}

/* ---------- sections ---------- */
.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 .apply-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}

/* ---------- gallery ---------- */
/* Two things keep this grid inside its section, and it needs both:

   1. minmax(0,Nfr) rather than plain Nfr, so an fr track is never floored at the
      min-content size of the photo it holds.
   2. width/height:100% on the tiles. They are <button> elements, and a button
      shrink-to-fits rather than stretching to its grid area the way a div does --
      so the tiles kept the width they had at the widest breakpoint and hung off
      the right edge of the section at every size below it. Every other grid on
      the page holds divs and stretches correctly, which is why only the gallery
      showed this. */
.listing .gallery-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:250px 250px;gap:7px}
.listing .gallery-grid button{position:relative;width:100%;height:100%;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}

/* ---------- availability (other units in the property) ---------- */
.listing .inventory{background:#fff}
.listing .space-table{border-top:2px solid var(--ink);background:#fff}
.listing .space-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.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 em.occupied{background:#f3f4f6;color:#5b636b}
.listing .space-row a{color:var(--accent);font-weight:800}
.listing .space-row.is-current{background:var(--soft)}

/* ---------- amenities ---------- */
.listing .features{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px;background:#fff}
.listing .feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,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:14px;width:20px;text-align:center}
.listing .feature-grid span{font-size:13px}
.listing .feature-grid span b{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:3px}
.listing .muted{color:var(--muted);line-height:1.7}

/* ---------- tour banner ---------- */
.listing .tour-banner{position:relative;min-height:430px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.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}

/* ---------- request a tour ---------- */
.listing .schedule{background:var(--soft)}
.listing .schedule-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:85px;align-items:start}
.listing .schedule-picker{padding:30px;border:1px solid var(--line);background:#fff}
.listing .schedule-dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.listing .schedule-dates .scheduled-radio{position:absolute;opacity:0;pointer-events:none}
.listing .date-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.listing .date-box .date-day{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.listing .date-box .date-date{font:20px Georgia,serif}
.listing .date-box.selected{border-color:var(--accent);background:var(--accent);color:#fff}
.listing .date-box.selected .date-day{color:#fff}
.listing .schedule-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.listing .schedule-time{flex:1 1 220px;min-width:200px}
/* vue-multiselect ships rounded 40px controls; square them to match the form fields. */
.listing .schedule-time .multiselect__tags{min-height:46px;padding:12px 40px 0 13px;border:1px solid #cfd4d9;border-radius:0}
.listing .schedule-time .multiselect__single{font-size:14px;margin-bottom:6px;padding-left:0}
.listing .schedule-time .multiselect__content-wrapper{border-radius:0;border-color:#cfd4d9}
.listing .schedule-time .multiselect__option--highlight{background:var(--accent)}
.listing .schedule-time .multiselect__option--highlight:after{background:var(--accent)}
.listing .schedule-controls .button{flex:0 0 auto}

/* ---------- location ---------- */
.listing .location{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.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}

/* ---------- property managers ---------- */
.listing .agent-section{background:#fff}
.listing .agent-profile{display:grid;grid-template-columns:360px minmax(0,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,minmax(0,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}

/* ---------- apply CTA ---------- */
.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 .apply-cta{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:65px 9.2%;background:var(--ink);color:#fff}
.listing .apply-cta>div{max-width:850px}
.listing .apply-cta p:not(.eyebrow){color:#dbe2e8}

/* ---------- contact ---------- */
.listing .contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,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:minmax(0,1fr) minmax(0,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}

/* ---------- footer strips ---------- */
.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 .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 .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:minmax(0,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}

/* ---------- overlay forms ---------- */
/* The tour-request and application panels are position:fixed with no height cap,
   so any form taller than the window ran off the bottom with no way to reach the
   rest of it -- on a 1440x900 desktop the tour form was 947px tall and its Send
   Request button sat 142px below the fold, unreachable. Center each panel, cap it
   to the viewport, and scroll its body while the header and close stay pinned. */
#marketingWebsite #schedule-showing-overlay,
#marketingWebsite #application_for_unit{
    position:fixed;
    top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    box-sizing:border-box;
    width:min(400px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    /* dvh keeps the panel clear of mobile browser chrome; the vh line above it is
       the fallback for browsers without dynamic viewport units. */
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
/* The panel's own padding has to count inside that capped width. */
#marketingWebsite #schedule-showing-overlay *,
#marketingWebsite #application_for_unit *{box-sizing:border-box}
#marketingWebsite #schedule-showing-overlay>.topForm,
#marketingWebsite #application_for_unit>.topForm{flex:0 0 auto}
/* min-height:0 is required: a flex child defaults to min-height:auto, refuses to
   shrink below its content, and so never produces a scrollbar. overscroll-behavior
   stops the page behind from taking over once the body hits its end. */
#marketingWebsite #schedule-showing-overlay>.schedule-form,
#marketingWebsite #application_for_unit>.schedule-form{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
/* At 40px the panel title wrapped to five lines on a phone and swallowed half the
   panel before the first field appeared. */
@media(max-width:600px){
    #marketingWebsite #schedule-showing-overlay .topForm .intro,
    #marketingWebsite #application_for_unit .topForm .intro{padding:22px 46px 6px;font-size:26px}
    #marketingWebsite #schedule-showing-overlay .topForm .intro::after,
    #marketingWebsite #application_for_unit .topForm .intro::after{width:90px;height:3px;margin-top:12px}
    #marketingWebsite #schedule-showing-overlay>.schedule-form,
    #marketingWebsite #application_for_unit>.schedule-form{padding:16px 28px 26px}
}
/* A landscape phone leaves ~375px of height, and the 40px title was eating most
   of it before the first field appeared. */
@media(max-height:560px){
    #marketingWebsite #schedule-showing-overlay .topForm .intro,
    #marketingWebsite #application_for_unit .topForm .intro{padding:18px 44px 4px;font-size:22px}
    #marketingWebsite #schedule-showing-overlay .topForm .intro::after,
    #marketingWebsite #application_for_unit .topForm .intro::after{width:80px;height:3px;margin-top:10px}
    #marketingWebsite #schedule-showing-overlay>.schedule-form,
    #marketingWebsite #application_for_unit>.schedule-form{padding:14px 30px 20px}
}
/* The shared Marketing/forms element's panels are not reachable from the unit
   page today, but they carry the same unbounded height if they ever are wired up. */
#marketingWebsite .wizard-box{
    box-sizing:border-box;
    max-width:calc(100vw - 32px);
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
}

/* ---------- lightbox ---------- */
.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}

/* ---------- interaction ---------- */
.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 .date-box:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .listing .share-strip a:hover,.listing .share-strip button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
}

/* ---------- responsive ---------- */
@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 .credentials{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .listing .apply-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;gap:12px;justify-content:space-between}
  .listing .brand{width:170px}
  .listing .brand img{max-width:160px;max-height:46px}
  .listing .site-header nav,.listing .site-header>.button{display:none}
  .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 .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). Unlike the desktop
     hero -- where the card is meant to float over the photo -- the stacked card
     sits clear of it: tucking it up over the image cropped the bottom of every
     photo and collided with the photo-count badge. */
  .listing .hero-card{position:relative;left:auto;top:auto;width:auto;height:auto;transform:none;margin:16px 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,minmax(0,1fr));row-gap:13px}
  /* Sits on the photo, clear of its bottom edge, so it never lands on the card. */
  .listing .photo-badge{top:calc(68vw - 58px);right:20px;bottom:auto}
  .listing .section{padding:50px 20px}
  .listing .overview{grid-template-columns:minmax(0,1fr);gap:32px}
  .listing .overview h2,.listing .section h2,.listing .tour-banner h2,.listing .apply-cta h2{font-size:31px}
  .listing .resource-links{flex-direction:column;gap:14px}
  .listing .gallery-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:220px 150px 150px}
  .listing .gallery-grid button.gallery-main{grid-column:1/3;grid-row:auto}
  /* The heading's trailing button has no room beside the title at phone width. */
  .listing .section-heading{flex-direction:column;align-items:flex-start;gap:18px}
  .listing .table-head{display:none}
  .listing .space-row{grid-template-columns:minmax(0,1fr) minmax(0,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:minmax(0,1fr);gap:30px}
  .listing .feature-grid{grid-template-columns:minmax(0,1fr)}
  .listing .schedule-panel{grid-template-columns:minmax(0,1fr);gap:30px}
  .listing .schedule-picker{padding:20px}
  .listing .schedule-dates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listing .tour-banner{grid-template-columns:minmax(0,1fr);min-height:0}
  .listing .tour-banner>img{height:260px}
  .listing .tour-banner>div{padding:40px 22px}
  .listing .location{grid-template-columns:minmax(0,1fr);gap:30px}
  .listing .map{height:240px}
  .listing .agent-profile{grid-template-columns:minmax(0,1fr);gap:30px}
  .listing .agent-profile__photo{height:420px}
  .listing .credentials{grid-template-columns:minmax(0,1fr)}
  .listing .apply-cta{align-items:flex-start;flex-direction:column;padding:50px 22px}
  .listing .contact{grid-template-columns:minmax(0,1fr);gap:30px}
  .listing .contact form{padding:20px}
  .listing .form-grid{grid-template-columns:minmax(0,1fr)}
  .listing .share-strip{padding:25px 20px}
  .listing .ad-panel{padding:24px 20px}
  .listing footer{grid-template-columns:minmax(0,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:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);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}
}