/* Desktop and landscape (html.wide-fade): the same full-screen, fade-in-place cards as the phone version,
   laid out for a wide screen. Loaded last, so it adjusts the phone rules where a wide screen needs it. */
.wide-fade .nav{background-image:url("assets/card-bg/menu-wide.jpg?v=k1")!important}

/* ---- Hero: the wide hero film behind the same headline, vertical logo and key facts ---- */
.wide-fade .hero-still{display:none}
.wide-fade .hero-welcome{display:block;position:absolute;z-index:2;left:var(--stack-gutter);right:var(--pad);top:0;bottom:0;
  color:#fff;pointer-events:none}
.wide-fade{--stack-gutter:120px}
.wide-fade .hero-welcome-title{font-size:clamp(64px,6.4vw,112px)!important;line-height:.9}
.wide-fade .hero-welcome-head .hero-welcome-kicker{font-size:13px!important;margin-top:22px!important}
.wide-fade .hero-facts{display:block;border-top:1px solid rgba(255,255,255,.75);padding-top:22px;
  bottom:calc(max(28px,env(safe-area-inset-bottom)) + 4vh)!important}
.wide-fade .hero-facts-row{display:flex;justify-content:flex-start;gap:clamp(40px,5vw,96px)}
.wide-fade .hero-fact strong{font-size:clamp(34px,3vw,48px)!important}
.wide-fade .hero-fact span{font-size:13px!important}
.wide-fade .hero-facts-price{font-size:clamp(18px,1.5vw,24px)!important;margin-top:18px!important}
/* A soft shade at the bottom of the film so the facts read. */
.wide-fade .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))!important}

/* ---- Text cards on a photo: content centred on the screen in a comfortable column ---- */
.wide-fade .photo-card{padding:0!important}
.wide-fade .photo-card .card-inner{box-sizing:border-box;min-height:var(--card-h,100vh);display:flex;flex-direction:column;justify-content:center;
  padding:112px max(var(--pad),calc((100vw - 1240px)/2)) 88px}

/* Description: headline left, story right. */
.wide-fade #description .description-grid{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center}
.wide-fade #description .description-lead{font-size:clamp(52px,5.2vw,88px)!important;line-height:.95}
.wide-fade #description .description-copy{font-size:clamp(17px,1.25vw,20px)!important;line-height:1.6}
.wide-fade #description .description-copy p{margin:0 0 1em}

/* Presented By: heading, then the two agents side by side, larger. */
.wide-fade #presented .agents{display:grid!important;grid-template-columns:repeat(2,minmax(0,460px));gap:clamp(32px,4vw,72px);justify-content:start;margin-top:12px}
.wide-fade #presented .agent{grid-template-columns:170px minmax(0,1fr)!important;gap:26px!important;align-items:center}
.wide-fade #presented .agent img{width:170px!important;height:170px!important}
.wide-fade #presented .agent h3{font-size:28px!important}
.wide-fade #presented .agent p{font-size:17px!important;line-height:1.5}
.wide-fade #presented .intro-copy{font-size:clamp(24px,2vw,32px)!important}
.wide-fade #presented .soft-lock-zone{margin-bottom:28px}

/* Request Info: heading and note on the left, the form on the right; legal and logos beneath. */
.wide-fade #request-info .card-inner{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,110px);
  align-content:center;align-items:center}
.wide-fade #request-info .soft-lock-zone{grid-column:1;margin:0!important}
.wide-fade #request-info .form{grid-column:2}
.wide-fade #request-info .legal{grid-column:1/-1;margin-top:40px!important}
.wide-fade #request-info .compliance-logo,.wide-fade #request-info .compass-signoff{grid-column:1/-1;justify-self:center}
.wide-fade #request-info .form textarea{min-height:110px!important;height:110px}
.wide-fade #request-info .form input,.wide-fade #request-info .form textarea{font-size:17px;padding:14px 16px!important}
.wide-fade #request-info .intro-copy{font-size:clamp(22px,1.8vw,28px)!important}
.wide-fade #request-info .legal-disclaimer{font-size:11px!important;max-width:1000px}
.wide-fade #request-info{padding-bottom:0!important}
.wide-fade #request-info .compass-signoff{position:static!important;transform:none!important;margin-top:14px!important}

/* Property Video: the 16:9 player, as large as fits beneath its title. */
.wide-fade #tour .video-frame{position:absolute!important;inset:auto!important;left:50%!important;top:calc(50% + 46px)!important;
  transform:translate(-50%,-50%);width:min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 250px) * 16 / 9))!important;
  height:auto!important;aspect-ratio:16/9!important;background:#000}
.wide-fade #tour .video-frame iframe{position:absolute;inset:0;width:100%;height:100%}
.wide-fade #tour{background:#080808!important}

/* Location: the map fills the screen; the words sit on a soft blurred panel on the left, the pin to the right. */
.wide-fade #location::before{display:block!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;width:44%!important;height:auto!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 72%,transparent 100%)!important;mask-image:linear-gradient(90deg,#000 0,#000 72%,transparent 100%)!important}
.wide-fade #location .soft-lock-zone{position:absolute!important;z-index:4!important;left:max(var(--pad),calc((100vw - 1240px)/2))!important;right:auto!important;
  top:50%!important;transform:translateY(-50%)!important;width:min(34vw,520px)!important;margin:0!important}
.wide-fade #location .loc-title{font-size:clamp(48px,4.4vw,76px)!important;line-height:.95}
.wide-fade #location .loc-copy{font-size:clamp(20px,1.6vw,26px)!important;line-height:1.35}

/* Gallery: caption kept clear of the arrows. */
.wide-fade #gallery .reel-caption-inner{max-width:min(760px,60vw)!important}
.wide-fade #presented .agents{max-width:none!important;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.wide-fade #request-info .legal-address{font-size:13px!important}
.wide-fade #description .description-copy,.wide-fade #description .description-copy p{font-size:clamp(17px,1.35vw,21px)!important}
.wide-fade #location .soft-lock-zone,.wide-fade #location .soft-lock-intro{display:block!important}
.wide-fade #location .soft-lock-intro{position:static!important;transform:none!important}
.wide-fade #location .loc-title{width:auto!important;margin:0 0 18px!important}
.wide-fade #presented .agents{margin:12px 0 0!important;width:100%!important;max-width:1100px!important}

/* Menu: larger type on a big screen. */
.wide-fade .nav a{font-size:clamp(34px,3.4vw,56px)!important;line-height:1.18}
.wide-fade .nav{padding-left:max(var(--pad),calc((100vw - 1240px)/2))!important}

/* The Welcome card only repeats the hero, so wide screens skip it too. */
.wide-fade #welcome{display:none!important}

/* ---- Short screens (phones turned sideways, small laptop windows): everything compacts to fit ---- */
@media (max-height:560px){
  .wide-fade{--stack-gutter:84px}
  .wide-fade .v-logo{height:52vh!important}
  .wide-fade .hero-welcome-title{font-size:clamp(34px,6.4vh + 2vw,56px)!important}
  .wide-fade .hero-welcome-head .hero-welcome-kicker{font-size:10px!important;margin-top:10px!important}
  .wide-fade .hero-facts{padding-top:10px!important;bottom:max(14px,env(safe-area-inset-bottom))!important}
  .wide-fade .hero-fact strong{font-size:22px!important}
  .wide-fade .hero-fact span{font-size:9px!important}
  .wide-fade .hero-facts-price{font-size:13px!important;margin-top:8px!important}
  .wide-fade .hero-facts-row{gap:32px}

  .wide-fade .photo-card .card-inner{padding:74px max(var(--pad),env(safe-area-inset-left)) 20px}
  .wide-fade #description .description-lead{font-size:clamp(28px,7vh,40px)!important}
  .wide-fade #description .description-copy,.wide-fade #description .description-copy p{font-size:12.5px!important;line-height:1.45}
  .wide-fade #description .description-copy p{margin-bottom:.7em}

  .wide-fade .section-head h2,.wide-fade #presented h2,.wide-fade #request-info h2{font-size:clamp(28px,7vh,40px)!important}
  .wide-fade #presented .intro-copy,.wide-fade #request-info .intro-copy{font-size:15px!important}
  .wide-fade #presented .soft-lock-zone{margin-bottom:10px}
  .wide-fade #presented .agent{grid-template-columns:96px minmax(0,1fr)!important;gap:16px!important}
  .wide-fade #presented .agent img{width:96px!important;height:96px!important}
  .wide-fade #presented .agent h3{font-size:18px!important;margin-bottom:4px!important}
  .wide-fade #presented .agent p{font-size:12.5px!important;line-height:1.4}
  .wide-fade #presented .compass-signoff{width:92px!important}

  .wide-fade #request-info .form{gap:6px!important}
  .wide-fade #request-info .form input,.wide-fade #request-info .form textarea{font-size:14px;padding:7px 10px!important}
  .wide-fade #request-info .form textarea{min-height:44px!important;height:44px}
  .wide-fade #request-info .form button{padding-top:9px!important;padding-bottom:9px!important}
  .wide-fade #request-info .legal{margin-top:12px!important}
  .wide-fade #request-info .legal-address{font-size:10px!important}
  .wide-fade #request-info .legal-disclaimer{font-size:8.5px!important;line-height:1.35}
  .wide-fade #request-info .compliance-logo{margin-top:6px!important}
  .wide-fade #request-info .compliance-logo img{width:64px!important}
  .wide-fade #request-info .compass-signoff{width:92px!important;margin-top:6px!important}

  .wide-fade #tour .video-frame{top:calc(50% + 30px)!important;width:min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 130px) * 16 / 9))!important}
  .wide-fade .media-card .soft-lock-zone{top:64px!important}
  .wide-fade .media-card .section-head h2{font-size:30px!important}
  .wide-fade #location .loc-title{font-size:30px!important}
  .wide-fade #location .loc-copy{font-size:14px!important}
  .wide-fade .nav a{font-size:clamp(20px,6vh,30px)!important}
}
/* The phone spacing rules on these cards use their ids; clear them so the centred column decides. */
html.wide-fade #description,html.wide-fade #presented,html.wide-fade #request-info{padding:0!important}
.wide-fade .photo-card .card-inner{height:var(--card-h,100vh);min-height:0!important}
@media (max-height:560px){
  .wide-fade #presented .card-inner{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:32px;align-content:center;align-items:center}
  .wide-fade #presented .soft-lock-zone{grid-column:1;margin:0!important}
  .wide-fade #presented .agents{grid-column:2;grid-template-columns:1fr!important;gap:14px!important;margin:0!important}
}
.wide-fade #presented .agent a{font-size:inherit!important}
@media (max-height:560px){
  .wide-fade #presented .agents{height:auto!important;min-height:0!important;align-content:start!important;row-gap:14px!important;grid-auto-rows:auto!important}
}
/* Form fields stay at 16px so iPhone Safari does not zoom in when a field is tapped. */
.wide-fade #request-info .form input,.wide-fade #request-info .form textarea{font-size:16px!important}
/* COMPASS sign-off: on both closing cards it sits at the same spot near the bottom of the screen. */
@media (min-height:561px){
  .wide-fade #presented .compass-signoff,.wide-fade #request-info .compass-signoff{position:absolute!important;top:auto!important;
    bottom:max(26px,3.6vh)!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;width:118px!important;z-index:2}
  .wide-fade #request-info .card-inner{padding-bottom:calc(max(26px,3.6vh) + 60px)!important}
  .wide-fade #presented .card-inner{padding-bottom:calc(max(26px,3.6vh) + 60px)!important}
}

/* ---- Wide screens: the sections stack, each sliding up over the last (as /show on phones) ---- */
html.wide-fade{scroll-behavior:auto!important}
.wide-fade body>section.media-card{height:var(--card-h,100vh)}

/* ---- Hero: the entry-walk photo with a slow push-in toward the front doors (no film) ---- */
.wide-fade .hero-media{display:none!important}
.wide-fade .hero-still{display:block!important;position:absolute;inset:0;overflow:hidden}
.wide-fade .hero-still img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform-origin:50% 34%;
  animation:heroPush 19s cubic-bezier(.25,.1,.25,1) both}
@media(prefers-reduced-motion:reduce){.wide-fade .hero-still img{animation:none}}

/* Every section is exactly one screen tall. */
.wide-fade body>section{height:var(--card-h,100vh)!important;min-height:0!important;overflow:hidden;position:sticky!important;top:0!important}
.wide-fade .photo-card .card-inner{height:var(--card-h,100vh)!important;min-height:0!important}



/* No black backdrops: the Property Video sits on a soft blurred photo (as the photo cards do), and the
   Location words sit on a small frosted card over the full-screen map instead of a dark panel. */
.wide-fade #tour{background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),url(assets/card-bg/lanai-wide.jpg?v=k1) center/cover no-repeat!important}
.wide-fade #tour .video-frame{box-shadow:0 18px 50px rgba(0,0,0,.35)}
.wide-fade #location::before{display:none!important}
.wide-fade #location .soft-lock-zone{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  padding:clamp(26px,2.6vw,44px) clamp(28px,2.8vw,48px)!important;border-radius:4px;box-shadow:0 14px 40px rgba(0,0,0,.18);width:min(32vw,500px)!important}
.wide-fade #location .loc-title,.wide-fade #location .loc-copy{color:#1c1c1c!important;text-shadow:none!important}
.wide-fade #location>.map{position:absolute!important;inset:0!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;transform:none!important;grid-column:auto!important}
.wide-fade #location{background:#e9e5dc!important}
.wide-fade #location .soft-lock-zone{background:rgba(255,255,255,.9)!important;width:min(30vw,460px)!important}

/* Words fade in as each section arrives, as on the phone (wide.js marks the arrived section .wide-in).
   Fill "backwards" only, so once it has played the usual rules (e.g. clearing the title while the map is
   explored) take over again. */
@keyframes wideTextIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.wide-fade body>section:not(.hero):not(.wide-in) :is(.card-inner,.soft-lock-zone,.reel-caption,.reel-hud,.reel-play,.card-play,.card-explore,.gallery-cue){opacity:0!important;transition:none!important}
.wide-fade body>section.wide-in:not(.hero) :is(.card-inner,.soft-lock-zone,.reel-caption,.reel-hud,.reel-play,.card-play,.card-explore,.gallery-cue){animation:wideTextIn 1.5s cubic-bezier(.33,0,.2,1) .35s backwards}
@media(prefers-reduced-motion:reduce){.wide-fade body>section.wide-in :is(.card-inner,.soft-lock-zone,.reel-caption,.reel-hud,.reel-play,.card-play,.card-explore,.gallery-cue){animation:none}}

/* Property Video: the player 20% smaller, so the title has room to breathe. */
.wide-fade #tour{--vid-w:calc(.8 * min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 250px) * 16 / 9)))}
@media(max-height:560px){.wide-fade #tour{--vid-w:calc(.8 * min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 130px) * 16 / 9)))}}
.wide-fade #tour .video-frame{width:var(--vid-w)!important}

/* Description: the full listing text on wide screens (the phone keeps the shorter version). */
.desc-full{display:none}
.wide-fade #description .desc-short{display:none}
.wide-fade #description .desc-full{display:block}
.wide-fade #description .description-copy p{margin:0 0 .85em!important}
.wide-fade #description .description-copy p:last-child{margin-bottom:0!important}
.wide-fade #description .description-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:clamp(36px,4.5vw,90px)!important}
.wide-fade #description .description-copy,.wide-fade #description .description-copy p{font-size:clamp(13.5px,min(1.12vw,1.9vh),19px)!important;line-height:1.55!important}
/* Too short a screen for the full text (a phone on its side): the shorter version, as on the phone. */
@media(max-height:560px){
  .wide-fade #description .desc-short{display:block}
  .wide-fade #description .desc-full{display:none}
  .wide-fade #description .description-copy,.wide-fade #description .description-copy p{font-size:12.5px!important;line-height:1.45!important}
}
/* Headline in the same place as the other section titles (left edge and top), the text beside it. */
@media(min-height:561px){
  html.wide-fade #description .card-inner{justify-content:flex-start!important;padding:calc(max(20px,env(safe-area-inset-top)) + 92px) var(--pad) 60px!important}
  .wide-fade #description .description-grid{align-items:start!important;max-width:none!important;margin:0!important;width:100%!important}
  .wide-fade #description .description-lead{margin:0!important}
  .wide-fade #description .description-copy{padding-top:.6em}
}

/* Gallery: no full-photo viewer on wide screens (the photos already fill the frame). */
.wide-fade #gallery .reel-stage,.wide-fade #gallery .reel-shot{cursor:default!important}
/* No gallery hint under the title on wide screens. */
.wide-fade #gallery .gallery-cue{display:none!important}
/* Gallery captions: larger and easier to read on a big screen. */
.wide-fade #gallery .reel-caption-inner{max-width:min(1000px,68vw)!important}
.wide-fade #gallery .reel-caption strong{font-size:clamp(44px,4.2vw,76px)!important;margin-bottom:14px!important}
.wide-fade #gallery .reel-caption span:not(.unit-d):not(.unit-mark){font-size:clamp(20px,1.75vw,30px)!important;line-height:1.4!important}
@media(max-height:560px){
  .wide-fade #gallery .reel-caption strong{font-size:32px!important;margin-bottom:8px!important}
  .wide-fade #gallery .reel-caption span:not(.unit-d):not(.unit-mark){font-size:16px!important}
}
/* Captions keep one height (set by wide.js from the longest), so the titles never jump between photos. */
.wide-fade #gallery .reel-caption-inner{width:min(1000px,68vw)}
.wide-fade #gallery .reel-caption strong{min-height:var(--cap-title-h,0px)}
.wide-fade #gallery .reel-caption span:not(.unit-d):not(.unit-mark){min-height:var(--cap-text-h,0px)}

/* Gallery controls in one row at the bottom right: counter, pause, previous, next. The row ends exactly
   under the right edge of the Request Info button. */
.wide-fade #gallery{--ctl-right:calc(var(--pad) + var(--sbw,0px));--ctl-bottom:44px}
.wide-fade #gallery .reel-nav{right:var(--ctl-right)!important;bottom:var(--ctl-bottom)!important}
.wide-fade #gallery .reel-play{top:auto!important;bottom:var(--ctl-bottom)!important;right:calc(var(--ctl-right) + 124px)!important;width:52px!important;height:52px!important}
.wide-fade #gallery .reel-hud{top:auto!important;left:auto!important;bottom:var(--ctl-bottom)!important;right:calc(var(--ctl-right) + 194px)!important;height:52px;align-items:center}
.wide-fade #gallery .reel-hud>span:not(.reel-count){display:none!important}
@media(max-height:560px){.wide-fade #gallery{--ctl-bottom:20px}}

/* Hero: a shade over the photo, deepening toward the bottom so the facts (beds, baths, price) read clearly. */
.wide-fade .hero-still::after{content:''!important;display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.78) 100%)!important}
/* Hero facts: a fine vertical rule between "SF" and "Living Area" / "Lot". */
.wide-fade .hero-fact .fact-rule{display:inline-block;width:1px;height:1.05em;margin:0 .7em;background:currentColor;opacity:.7;vertical-align:-.18em}

/* ---- Closing page (wide.js): Presented By and Request Info together on one page ---- */
.wide-combo #presented{display:none!important}
.wide-combo #request-info .card-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:clamp(48px,6vw,120px)!important;
  align-content:center!important;align-items:start!important;padding-left:var(--pad)!important;padding-right:calc(var(--pad) + var(--sbw,0px))!important}
.wide-combo #request-info .combo-left{grid-column:1;grid-row:1}
.wide-combo #request-info .combo-right{grid-column:2;grid-row:1}
.wide-combo #request-info .legal{grid-column:1/-1;grid-row:2;margin-top:clamp(20px,3.5vh,40px)!important}
.wide-combo #request-info .compliance-logo{grid-column:1/-1;grid-row:3;justify-self:center;margin-top:clamp(8px,1.4vh,16px)!important}
.wide-combo #request-info .soft-lock-zone{margin:0 0 clamp(14px,2.4vh,26px)!important}
.wide-combo #request-info h2{font-size:clamp(44px,min(4.6vw,7.4vh),82px)!important}
.wide-combo #request-info .intro-copy{font-size:clamp(17px,min(1.5vw,2.5vh),26px)!important;margin-top:8px!important}
.wide-combo #request-info .agents{display:grid!important;grid-template-columns:1fr!important;gap:clamp(14px,2.4vh,26px)!important;margin:0!important;max-width:none!important;width:100%!important}
.wide-combo #request-info .agent{display:grid!important;grid-template-columns:clamp(84px,min(8vw,13vh),130px) minmax(0,1fr)!important;gap:clamp(16px,1.6vw,26px)!important;align-items:center!important}
.wide-combo #request-info .agent img{width:clamp(84px,min(8vw,13vh),130px)!important;height:clamp(84px,min(8vw,13vh),130px)!important;object-fit:cover}
.wide-combo #request-info .agent h3{font-size:clamp(19px,min(1.7vw,2.8vh),28px)!important;margin:0 0 6px!important}
.wide-combo #request-info .agent p{font-size:clamp(13px,min(1.1vw,1.85vh),17px)!important;line-height:1.5!important;margin:0!important}
.wide-combo #request-info .form textarea{min-height:clamp(70px,11vh,120px)!important;height:clamp(70px,11vh,120px)!important}
.wide-combo #request-info .form input,.wide-combo #request-info .form textarea{padding:clamp(10px,1.5vh,14px) 16px!important}

/* Closing page, refined: both columns end on the same line (the message box takes up the difference),
   the intro reads on one line, and a centred footer (rule, address, disclaimer, logos) closes the page. */
.wide-combo #request-info .card-inner{align-items:stretch!important;align-content:center!important;
  padding-top:calc(max(20px,env(safe-area-inset-top)) + 92px)!important;padding-bottom:clamp(28px,4.5vh,52px)!important}
.wide-combo #request-info .combo-right{display:flex;flex-direction:column}
.wide-combo #request-info .form{flex:1;grid-template-rows:auto minmax(80px,1fr) auto!important;align-content:stretch}
.wide-combo #request-info .form textarea{height:auto!important;min-height:80px!important}
.wide-combo #request-info .form button{grid-column:1/-1!important;width:100%!important;padding-top:clamp(13px,1.9vh,17px)!important;padding-bottom:clamp(13px,1.9vh,17px)!important}
.wide-combo #request-info .combo-left .intro-copy span{display:inline!important}
.wide-combo #request-info .intro-copy{white-space:nowrap}
.wide-combo #request-info .legal{columns:auto!important;text-align:center;max-width:980px;justify-self:center;width:100%;
  margin-top:clamp(28px,5vh,56px)!important;padding-top:clamp(18px,3vh,28px)!important;border-top:1px solid rgba(255,255,255,.4)!important}
.wide-combo #request-info .legal-address{margin-bottom:8px}
.wide-combo #request-info .legal-disclaimer{margin:0 auto!important;max-width:none!important}
.wide-combo #request-info .combo-foot{grid-column:1/-1;grid-row:3;justify-self:center;display:flex;align-items:center;gap:clamp(28px,3vw,44px);margin-top:clamp(16px,2.8vh,30px)}
.wide-combo #request-info .combo-foot .compliance-logo{margin:0!important}
.wide-combo #request-info .combo-foot .compass-signoff{position:static!important;transform:none!important;margin:0!important;width:118px!important}
.wide-combo #request-info .legal{border-top-width:1px}
/* Shorter laptop screens: tighter spacing so the whole closing page fits. */
@media(min-height:561px) and (max-height:760px){
  .wide-combo #request-info .card-inner{padding-top:96px!important;padding-bottom:20px!important}
  .wide-combo #request-info h2{font-size:clamp(40px,6.6vh,60px)!important}
  .wide-combo #request-info .soft-lock-zone{margin-bottom:12px!important}
  .wide-combo #request-info .agents{gap:12px!important}
  .wide-combo #request-info .agent{grid-template-columns:76px minmax(0,1fr)!important}
  .wide-combo #request-info .agent img{width:76px!important;height:76px!important}
  .wide-combo #request-info .agent h3{font-size:18px!important;margin-bottom:3px!important}
  .wide-combo #request-info .agent p{font-size:12.5px!important;line-height:1.4!important}
  .wide-combo #request-info .legal{margin-top:18px!important;padding-top:12px!important}
  .wide-combo #request-info .legal-address{font-size:11px!important;margin-bottom:4px}
  .wide-combo #request-info .legal-disclaimer{font-size:9.5px!important;line-height:1.4!important}
  .wide-combo #request-info .combo-foot{margin-top:10px}
  .wide-combo #request-info .combo-foot .compliance-logo img{width:58px!important}
  .wide-combo #request-info .combo-foot .compass-signoff{width:100px!important}
}
/* Property Video: Vimeo's own controls are always shown on wide screens, so no separate Resume prompt. */
.wide-fade #tour .video-resume{display:none!important}
/* Phones on their side: the hero title starts below the menu bar and Request Info button, and is a
   little smaller, so the larger "Welcome To" line never runs into them. */
@media(max-height:560px){
  .wide-fade .hero-welcome-head{top:max(70px,calc(env(safe-area-inset-top) + 62px))!important;bottom:auto!important}
  .wide-fade .hero-welcome-title{font-size:clamp(28px,5.2vh + 1.5vw,46px)!important}
}
/* Gallery captions always stop short of the counter / pause / arrow row. */
.wide-fade #gallery .reel-caption-inner{max-width:min(1000px,68vw,calc(100vw - var(--pad) - var(--ctl-right,72px) - 300px))!important;width:min(1000px,68vw,calc(100vw - var(--pad) - var(--ctl-right,72px) - 300px))}

/* Phones on their side: with the browser bar showing there are only ~300px of height, too little for the
   text pages to fit in one screen. Those pages (description, Presented By, Request Info) grow to their
   content and scroll normally, with comfortable type; the photo/video/map pages still fill the screen. */
@media(max-height:560px){
  html.wide-fade body>section.photo-card{height:auto!important;min-height:var(--card-h,100vh)!important;overflow:visible!important;position:relative!important}
  html.wide-fade .photo-card .card-inner{height:auto!important;min-height:var(--card-h,100vh)!important;padding-top:84px!important;padding-bottom:40px!important;justify-content:center!important}
  html.wide-fade #description .description-copy,html.wide-fade #description .description-copy p{font-size:14px!important;line-height:1.5!important}
  html.wide-fade #presented .agent p{font-size:13px!important}
  html.wide-fade #request-info .legal-disclaimer{font-size:9.5px!important}
  html.wide-fade #presented .compass-signoff,html.wide-fade #request-info .compass-signoff{position:static!important;transform:none!important;margin:18px auto 0!important;display:block}
}
/* Phones on their side: the vertical COMPASS logo fits between the menu button and the facts line, and
   the "Scroll" cue (which would sit on the title) is left out. */
@media(max-height:560px){
  .wide-fade .v-logo{top:66px!important;transform:none!important;height:calc(100svh - 66px - 132px)!important}
  .wide-fade .explore-cue{display:none!important}
}
/* Phones on their side: the property video as large as fits under its title (not reduced). */
@media(max-height:560px){
  .wide-fade #tour{--vid-w:min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 110px) * 16 / 9))}
  .wide-fade #tour .video-frame{top:calc(50% + 34px)!important}
}
/* Phones on their side, finishing touches. */
@media(max-height:560px){
  /* Video sits a little lower and smaller, clear of its title. */
  .wide-fade #tour{--vid-w:min(calc(100vw - 2 * var(--pad)),calc((var(--card-h,100vh) - 140px) * 16 / 9))}
  .wide-fade #tour .video-frame{top:calc(50% + 46px)!important}
  /* Gallery controls scaled down to suit the smaller screen. */
  .wide-fade #gallery .reel-arrow,.wide-fade #gallery .reel-play{width:40px!important;height:40px!important;font-size:22px!important}
  .wide-fade #gallery .reel-nav{gap:8px!important}
  .wide-fade #gallery .reel-play{right:calc(var(--ctl-right) + 96px)!important}
  .wide-fade #gallery .reel-hud{right:calc(var(--ctl-right) + 150px)!important;height:40px}
  /* Map: Google's own "open in Maps" card stays hidden above the top edge. */
  .wide-fade #location iframe{top:-130px!important;height:calc(100% + 130px)!important}
  /* Presented By: the COMPASS sign-off centred under the agents. */
  .wide-fade #presented .compass-signoff{grid-column:1/-1!important;justify-self:center!important;margin:14px auto 0!important}
}
/* Closing page: the divider and the legal text run the full width of the page, left-aligned. */
.wide-combo #request-info .legal{max-width:none!important;width:100%!important;justify-self:stretch!important;text-align:left!important}
/* Closing page footer: the address centred; the Equal Housing / REALTOR logo, then COMPASS beneath it. */
.wide-combo #request-info .legal-address{text-align:center!important}
.wide-combo #request-info .combo-foot{flex-direction:column!important;gap:clamp(18px,3vh,32px)!important;margin-top:clamp(18px,3vh,32px)!important}
/* Closing page: Equal Housing and REALTOR marks side by side with room between them. */
.wide-combo #request-info .combo-foot .compliance-logo{display:flex!important;align-items:flex-end;gap:clamp(22px,2.4vw,36px)}
.wide-combo #request-info .combo-foot .compliance-logo img{width:auto!important;height:clamp(30px,4.4vh,42px)!important;max-width:none!important}
@media(min-height:561px) and (max-height:760px){.wide-combo #request-info .combo-foot .compliance-logo img{height:28px!important}}
/* Property Video: the player fades in together with its title. */
.wide-fade #tour:not(.wide-in) .video-frame{opacity:0!important;transition:none!important}
.wide-fade #tour.wide-in .video-frame{animation:wideTextIn 1.5s cubic-bezier(.33,0,.2,1) .35s backwards}
@media(prefers-reduced-motion:reduce){.wide-fade #tour.wide-in .video-frame{animation:none}}
.wide-combo #request-info .compliance-logo img.mark-eho{content:normal!important}
.wide-combo #request-info .compliance-logo img.mark-realtor{content:normal!important}
/* Equal Housing / REALTOR marks: gap reduced by 40%. */
.wide-combo #request-info .combo-foot .compliance-logo{gap:clamp(13px,1.44vw,22px)!important}
/* Equal Housing / REALTOR marks: gap reduced a further 20%. */
.wide-combo #request-info .combo-foot .compliance-logo{gap:clamp(10px,1.15vw,18px)!important}
/* Equal Housing / REALTOR marks: gap reduced a further 40%. */
.wide-combo #request-info .combo-foot .compliance-logo{gap:clamp(6px,.69vw,11px)!important}

/* Landscape background film over the hero photo (see wide.js). */
.wide-fade .hero-still .hero-clip{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}
.wide-fade .hero-still .hero-clip.is-off{opacity:0}

/* Kiahuna: the welcome still holds steady (no zoom), so the background film takes over without a jump. */
.wide-fade .hero-still img{animation:none!important;transform:none!important;object-position:50% 50%!important}
/* Kiahuna: the welcome film stays hidden over the still until its first real frame is painted, then fades in. */
.wide-fade .hero-still .hero-clip{opacity:0;transition:opacity .3s ease}
.wide-fade .hero-still .hero-clip.is-live{opacity:1}
.wide-fade .hero-still .hero-clip.is-off{opacity:0!important}

/* Kiahuna: lighter frosting on the Location card so the map shows through. */
.wide-fade #location .soft-lock-zone{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(4px) saturate(1.05)!important;backdrop-filter:blur(4px) saturate(1.05)!important}