/* Showcase, phones held upright only (html.phone-stack). See stack.js. */
.v-logo,.stack-mark{display:none}
.phone-stack .stack-mark{display:block;height:0}

/* Stacked cards. Each section is opaque so the one beneath disappears as the next slides over. */
.phone-stack body>section{position:sticky;background:#fff;box-shadow:0 -22px 44px -18px rgba(0,0,0,.4)}
.phone-stack body>section.hero{background:#000;box-shadow:none}
/* The stacking is now the motion, so the old scroll fades are switched off on phones. */
.phone-stack .content{opacity:1!important;color:#080808!important}

/* Vertical logo, fixed on the left edge and centred top to bottom. */
.phone-stack .v-logo{display:block;position:fixed;z-index:80;left:12px;top:50%;transform:translateY(-50%);
  height:34svh;aspect-ratio:67.59/504.02}
.phone-stack .v-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease}
.phone-stack .v-logo .v-logo-white{opacity:0}
.phone-stack .v-logo.on-dark .v-logo-white{opacity:1}
.phone-stack .v-logo.on-dark .v-logo-black{opacity:0}
body.menu-open .v-logo{opacity:0;pointer-events:none}

/* Vertical logo on the hero only; the header's horizontal logo everywhere else. */
.phone-stack .v-logo{transition:opacity .45s ease,visibility .45s ease}
.phone-stack:not(.on-hero) .v-logo{opacity:0;visibility:hidden}
.phone-stack.on-hero .head .logo{visibility:hidden}

/* Only the hero title moves over to make room for the vertical logo. */
.phone-stack{--stack-gutter:60px}
.phone-stack .hero-welcome{left:var(--stack-gutter)}
/* Every card is at least a full screen, so it completely covers the one beneath it. */
.phone-stack body>section{min-height:100vh;min-height:var(--card-h,100svh)}
.phone-stack .hero{height:var(--card-h,100svh)}
/* Same top spacing on every card: clear of the header, then the headline. */
.phone-stack .content{padding-top:calc(max(20px,env(safe-area-inset-top)) + 92px)!important;padding-bottom:48px!important}
.phone-stack .welcome-stage{padding-top:calc(max(20px,env(safe-area-inset-top)) + 92px)!important}
.phone-stack .section-head{margin-bottom:24px}
/* Fit the hero title in the column beside the logo. */
.phone-stack .hero-welcome-title{font-size:clamp(44px,12.6vw,58px)}

/* Each card locks into place, one card per swipe (see stack.js). */
html.phone-stack{scroll-snap-type:y mandatory!important}
.snap-rail{display:none}
.phone-stack .snap-rail{display:block;position:absolute;top:0;left:0;width:1px;height:0;pointer-events:none}
.phone-stack .snap-point{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
/* The floating ("soft-lock") headings fight the cards, so on phones they sit still with no extra gap. */
.phone-stack .soft-lock-intro{position:static!important;transform:none!important;top:auto!important}
.phone-stack .soft-lock-zone{padding-bottom:0!important}

/* ---- Full-screen media cards (see stack-media.js) ---- */
.card-play,.card-explore,.card-done{display:none}
.phone-stack .media-card{padding:0!important;height:var(--card-h,100svh);min-height:0;overflow:hidden;background:#080808}
/* Title (and any intro text) floats in white over the media. */
.phone-stack .media-card .soft-lock-zone{position:absolute;z-index:4;left:var(--pad);right:var(--pad);
  top:calc(max(20px,env(safe-area-inset-top)) + 92px);pointer-events:none;transition:opacity .4s ease}
.phone-stack .media-card .soft-lock-zone,.phone-stack .media-card .soft-lock-zone *{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.phone-stack .media-card .section-head{margin:0}
/* Soft shade at the top so the white title always reads. */
.phone-stack .media-card::before{content:'';position:absolute;z-index:3;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));transition:opacity .4s ease}

/* Media fills the card. */
.phone-stack #tour .video-frame,.phone-stack #tour-3d .video-frame,.phone-stack #location .map{
  position:absolute;inset:0;width:auto;height:auto;margin:0;aspect-ratio:auto;border:0}
.phone-stack #tour .tour-phone{object-fit:cover}

/* Property Video: play button; title and shade clear while it plays. */
.phone-stack .card-play{display:grid;place-items:center;position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(0,0,0,.35);cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .35s ease}
.phone-stack .card-play span{width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff;margin-left:6px}
.phone-stack #tour.is-playing .card-play,.phone-stack #tour.is-playing .soft-lock-zone,.phone-stack #tour.is-playing::before{opacity:0;pointer-events:none}

/* Gallery: the big title replaces the small "Gallery" label in the slideshow's corner. */
.phone-stack #gallery .reel-stage{height:var(--card-h,100svh);margin-left:0}
.phone-stack #gallery .reel{margin:0}
.phone-stack #gallery .reel-hud>span:first-child{visibility:hidden}
.phone-stack #gallery .reel-hud{top:calc(max(20px,env(safe-area-inset-top)) + 100px)}

/* 3D Tour and map: inert behind a cover until tapped; Done gives scrolling back. */
.phone-stack #tour-3d iframe,.phone-stack #location iframe{pointer-events:none;width:100%;height:100%;border:0}
.phone-stack #tour-3d.is-exploring iframe,.phone-stack #location.is-exploring iframe{pointer-events:auto}
.phone-stack .card-explore{display:block;position:absolute;z-index:5;left:50%;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 40px);
  transform:translateX(-50%);padding:15px 22px;border:1px solid rgba(255,255,255,.9);background:rgba(0,0,0,.45);color:#fff;white-space:nowrap;
  font:700 10px/1 CompassSans,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.phone-stack .card-done{position:absolute;z-index:6;right:var(--pad);top:calc(max(20px,env(safe-area-inset-top)) + 84px);
  padding:11px 16px;border:0;background:#fff;color:#080808;font:700 10px/1 CompassSans,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.phone-stack .is-exploring .card-explore,.phone-stack .is-exploring .soft-lock-zone,.phone-stack .is-exploring::before{opacity:0;pointer-events:none}
.phone-stack .is-exploring .card-done{display:block}
/* Location: darker shade so the white headline and text read over the (light) map. */
.phone-stack #location::before{height:62%;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0))}
.phone-stack #location .loc-copy{margin-top:14px}
/* Titles sit straight on the media (the site's floating-heading style gave them a white box). */
.phone-stack .media-card .soft-lock-intro,.phone-stack .media-card .soft-lock-zone{background:transparent!important;box-shadow:none!important}
/* The whole 3D Tour / map card is the "tap to explore" area; the label is just the visible cue. */
.phone-stack .card-explore{left:0;right:0;top:0;bottom:0;transform:none;padding:0;border:0;background:transparent;font-size:0}
.phone-stack .card-explore::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 40px);
  transform:translateX(-50%);padding:15px 22px;border:1px solid rgba(255,255,255,.9);background:rgba(0,0,0,.5);color:#fff;white-space:nowrap;
  font:700 10px/1 CompassSans,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
/* Sit the vertical logo a little higher so it clears the hero title and facts below it. */
.phone-stack .v-logo{top:40%}
/* Hero: logo higher; title aligned to the logo's bottom ("C"), above the house; facts low on the lawn. */
.phone-stack .v-logo{top:32%}
.phone-stack .hero-welcome{top:0;bottom:0;right:var(--pad)}
.phone-stack .hero-welcome-head{position:absolute;left:0;right:0;bottom:var(--hero-head-bottom,50%)}
.phone-stack .hero-welcome-title{padding-bottom:0}
.phone-stack .hero-welcome-title .w{margin-bottom:-.14em}
.phone-stack .hero-facts{position:absolute;left:0;right:0;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 3svh);margin-top:0}
/* Shade both the title area and the bottom so the white text reads, leaving the house clear. */
.phone-stack .hero-still::after{background:
  linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.12) 48%,rgba(0,0,0,0) 56%,rgba(0,0,0,0) 66%,rgba(0,0,0,.66) 100%)}
/* Logo back where it was; headline moves to the right side, right-aligned, still finishing level with the logo's "C". */
.phone-stack .v-logo{top:40%}
.phone-stack .hero-welcome-head{left:auto;right:0;text-align:right}
.phone-stack .hero-welcome-kicker{text-align:right}
/* Headline moves up so the top of "Welcome" is level with the top of the logo (its top "S"),
   clearing the front doors; "Kalaheo · Kauai" sits beneath it. */
.phone-stack .hero-welcome-head{bottom:auto;top:calc(var(--hero-head-top,30%) - var(--hero-cap-gap,7px))}
.phone-stack .hero-welcome-title{font-size:clamp(44px,12.6vw,58px)}
.phone-stack .hero-welcome-head .hero-welcome-kicker{margin:16px 0 0}
/* Facts run wider (menu bars to the edge of "Request Info") with slightly larger type, for easier reading. */
.phone-stack .hero-facts{left:var(--hero-facts-left,0);right:var(--hero-facts-right,0)}
.phone-stack .hero-facts-address{font-size:10px}
.phone-stack .hero-fact strong{font-size:23px}
.phone-stack .hero-fact span{font-size:9px}
.phone-stack .hero-facts-price{font-size:15px}

/* ---- Photo cards: description, Presented By, Request Info (see stack.js) ---- */
.card-bg{display:none}
.phone-stack .photo-card{background:#111!important;isolation:isolate}
.phone-stack .photo-card .card-bg{display:block;position:absolute;z-index:-1;inset:0;pointer-events:none}
/* The photo stays put on screen while a tall card's text scrolls over it. */
.phone-stack .photo-card .card-bg-pin{position:sticky;top:0;height:var(--card-h,100svh);overflow:hidden}
.phone-stack .photo-card .card-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.phone-stack .photo-card .card-bg-pin::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.5) 45%,rgba(0,0,0,.66))}
/* White type on the photo. */
.phone-stack .photo-card.content,.phone-stack .photo-card.content *{color:#fff!important}
.phone-stack .photo-card a{text-decoration-color:rgba(255,255,255,.6)}
.phone-stack .photo-card .legal,.phone-stack .photo-card .legal *{color:rgba(255,255,255,.78)!important}
.phone-stack .photo-card hr,.phone-stack .photo-card .legal{border-color:rgba(255,255,255,.35)!important}
/* Form on the photo: clear fields with white lines, a solid white button. */
.phone-stack .photo-card .form input,.phone-stack .photo-card .form textarea{background:rgba(0,0,0,.18)!important;border-color:rgba(255,255,255,.75)!important;color:#fff!important}
.phone-stack .photo-card .form input::placeholder,.phone-stack .photo-card .form textarea::placeholder{color:rgba(255,255,255,.72)!important}
.phone-stack .photo-card .form button{background:#fff!important;border-color:#fff!important}
.phone-stack .photo-card .form button,.phone-stack .photo-card .form button *{color:#080808!important}

/* Header over a photo card: see-through, white menu, logo and button. */
.phone-stack.over-photo .head.white{background:transparent!important;border-bottom-color:transparent!important;color:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.phone-stack.over-photo .head.white .logo{filter:none!important}
.phone-stack.over-photo .head .cta{color:#fff!important;border-color:#fff!important}
.phone-stack .photo-card .soft-lock-zone,.phone-stack .photo-card .soft-lock-intro,.phone-stack .photo-card .description-copy{background:transparent!important}
/* The see-through header also sits over the video, gallery, 3D tour and map cards (no shade behind it). */
.phone-stack.over-photo.head-frost .head.white{background:rgba(10,10,10,.5)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.1)!important;backdrop-filter:blur(16px) saturate(1.1)!important}
.phone-stack .head{transition:background .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
/* No shaded band at the top of the media cards either; the white type carries a soft shadow instead. */
.phone-stack .media-card::before{display:none}
/* While the property video plays, it steps in from the edges so its own controls (full screen, mute,
   the progress bar) sit clear of the header and the bottom of the screen. */
.phone-stack #tour .video-frame{background:#000}
.phone-stack #tour .tour-phone{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;
  transition:top .35s ease,bottom .35s ease}
.phone-stack #tour.is-playing .tour-phone{top:calc(max(20px,env(safe-area-inset-top)) + 72px);
  bottom:calc(max(16px,env(safe-area-inset-bottom)) + 14px);
  height:calc(100% - max(20px,env(safe-area-inset-top)) - 72px - max(16px,env(safe-area-inset-bottom)) - 14px)}

/* Property video plays full-bleed in its card (header stays), with our own minimal controls. */
.phone-stack #tour.is-playing .tour-phone{top:0;bottom:0;height:100%}
.film-surface,.film-controls,.film-progress{display:none}
.phone-stack #tour.is-playing .film-surface{display:block;position:absolute;z-index:4;inset:0;border:0;padding:0;background:transparent;cursor:pointer}
.phone-stack #tour.is-playing .film-controls{display:flex;gap:10px;position:absolute;z-index:6;right:var(--pad);
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + 18px)}
.phone-stack .film-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);cursor:pointer;padding:0}
.phone-stack #tour.is-playing .film-progress{display:block;position:absolute;z-index:6;left:var(--pad);right:var(--pad);
  bottom:max(18px,env(safe-area-inset-bottom));height:1px;background:rgba(255,255,255,.3)}
.phone-stack .film-progress i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
/* Sound icon: a speaker, crossed out when muted. */
.phone-stack .film-sound span{position:relative;width:18px;height:16px;
  background:linear-gradient(#fff,#fff) 0 50%/6px 7px no-repeat;
  clip-path:polygon(0 28%,33% 28%,72% 0,72% 100%,33% 72%,0 72%)}
.phone-stack .film-sound span{background:#fff}
.phone-stack .film-sound{position:relative}
.phone-stack .film-sound.is-muted::after{content:'';position:absolute;width:24px;height:1.5px;background:#fff;transform:rotate(-45deg)}
/* Full-screen icon: four corners. */
.phone-stack .film-full span{width:16px;height:16px;
  background:
    linear-gradient(#fff,#fff) 0 0/6px 1.5px,linear-gradient(#fff,#fff) 0 0/1.5px 6px,
    linear-gradient(#fff,#fff) 100% 0/6px 1.5px,linear-gradient(#fff,#fff) 100% 0/1.5px 6px,
    linear-gradient(#fff,#fff) 0 100%/6px 1.5px,linear-gradient(#fff,#fff) 0 100%/1.5px 6px,
    linear-gradient(#fff,#fff) 100% 100%/6px 1.5px,linear-gradient(#fff,#fff) 100% 100%/1.5px 6px;
  background-repeat:no-repeat}
/* Paused: the play button returns in the middle (the title stays away until the film ends). */
.phone-stack #tour.is-playing.is-paused .card-play{opacity:1;pointer-events:none}

/* Gallery photos fill the whole card height, so there is no black band under them. */
.phone-stack #gallery .reel-shot{width:max(100%,calc(var(--card-h,100svh) * 1.5))}

/* Request Info fits on one screen: tighter gaps, a shorter message box. */
.phone-stack #request-info{padding-top:calc(max(20px,env(safe-area-inset-top)) + 80px)!important;padding-bottom:22px!important}
.phone-stack #request-info .soft-lock-zone{margin-bottom:20px}
.phone-stack #request-info .form textarea{min-height:64px!important;height:64px}
.phone-stack #request-info .legal{margin-top:26px!important;padding-top:18px!important}
.phone-stack #request-info .compliance-logo{margin-top:14px!important}

/* 3D tour: "Tap to explore" sits higher, clear of the Matterport logo. */
.phone-stack #tour-3d .card-explore::after{bottom:calc(max(24px,env(safe-area-inset-bottom)) + 120px)}

/* Map: nudge the map up so Google's "Open in Maps" box sits off the top of the screen. */
.phone-stack #location iframe{position:absolute;left:0;top:-90px;height:calc(100% + 90px)}

/* Agent photos: a thin white border. */
.phone-stack #presented .agent img{border:2px solid #fff}

/* ---- No gradient bands anywhere on the phone showcase ---- */
.phone-stack .hero::after,.phone-stack .hero-still::after{background:none!important}
/* Hero type keeps a soft shadow so it reads on the bright photo. */
.phone-stack .hero-welcome,.phone-stack .hero-welcome *{text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 22px rgba(0,0,0,.45)}
/* Photo cards: an even darkening rather than a graded one. */
.phone-stack .photo-card .card-bg-pin::after{background:rgba(0,0,0,.56)!important}
/* Gallery caption: no shaded band, a soft shadow on the type instead. */
.phone-stack #gallery .reel-caption{background:none!important}
.phone-stack #gallery .reel-caption,.phone-stack #gallery .reel-caption *{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 20px rgba(0,0,0,.5)}

/* Map: the top of the map is softly blurred and dimmed behind the title, fading out lower down. */
.phone-stack #location::before{display:block!important;height:58%;z-index:3;
  background:rgba(10,10,10,.28)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.phone-stack.is-exploring-map #location::before{opacity:0}

/* Equal Housing and REALTOR logos in white on the photo. */
.phone-stack #request-info .compliance-logo img{content:url("assets/brand/realtor-eho-reverse.png")}

/* Gallery photo counter: larger, so it can be read. */
.phone-stack #gallery .reel-hud{font-size:15px;letter-spacing:.14em;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.5)}
.phone-stack #gallery .reel-of{opacity:.75}
/* No frosted band behind the header either. */
.phone-stack.over-photo.head-frost .head.white{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.phone-stack .photo-card .card-inner{position:relative}
/* Request Info: no rule above the legal block; room under the logos. */
.phone-stack #request-info .legal{border-top:0!important;padding-top:0!important;margin-top:22px!important}
.phone-stack #request-info{padding-bottom:calc(max(18px,env(safe-area-inset-bottom)) + 22px)!important}
.phone-stack #request-info .soft-lock-zone{margin-bottom:16px}

/* Hero facts: no address line (it now sits under the headline), larger type, and a little higher. */
.phone-stack .hero-facts-address{display:none}
.phone-stack .hero-facts{bottom:calc(max(22px,env(safe-area-inset-bottom)) + 6svh);padding-top:16px}
.phone-stack .hero-fact{gap:6px}
.phone-stack .hero-fact strong{font-size:clamp(26px,7.2vw,32px)}
.phone-stack .hero-fact span{font-size:11px;letter-spacing:.12em}
.phone-stack .hero-facts-price{margin-top:16px;font-size:18px}
.phone-stack .hero-welcome-kicker{font-size:11px}
/* Hero facts must read on the pale walkway: bolder, brighter, larger type with a firm shadow (no shading band). */
.phone-stack .hero-facts,.phone-stack .hero-facts *{color:#fff!important;
  text-shadow:0 0 2px rgba(0,0,0,.75),0 1px 5px rgba(0,0,0,.7),0 2px 20px rgba(0,0,0,.6)!important}
.phone-stack .hero-fact strong{font-size:clamp(26px,7.4vw,34px)}
.phone-stack .hero-fact span{font-size:clamp(10.5px,3vw,13.5px);font-weight:700;letter-spacing:.1em}
.phone-stack .hero-facts-price{font:500 clamp(17px,4.8vw,21px)/1.3 CompassSansMedium,CompassSans,Arial,sans-serif;letter-spacing:0}
.phone-stack .hero-facts{border-top-color:rgba(255,255,255,.75)!important}
/* Request Info: fit on one screen even with Safari's full toolbar showing. */
.phone-stack #request-info{padding-top:calc(max(20px,env(safe-area-inset-top)) + 70px)!important;padding-bottom:calc(max(12px,env(safe-area-inset-bottom)) + 12px)!important}
.phone-stack #request-info .intro-copy{font-size:24px;line-height:1.1}
.phone-stack #request-info .section-head{margin-bottom:14px}
.phone-stack #request-info .form{gap:9px}
.phone-stack #request-info .form input,.phone-stack #request-info .form textarea{padding:10px 12px!important}
.phone-stack #request-info .form textarea{min-height:54px!important;height:54px}
.phone-stack #request-info .form button{padding-top:13px!important;padding-bottom:13px!important}
.phone-stack #request-info .legal{margin-top:18px!important}
.phone-stack #request-info .legal-disclaimer{font-size:9.5px;line-height:1.45}
.phone-stack #request-info .compliance-logo{margin-top:10px!important}
.phone-stack #request-info .compliance-logo img{width:110px}
.phone-stack #request-info .intro-copy{text-wrap:balance}
/* Description fits on one screen (even with Safari's full toolbars), so the headline never slides under the header. */
.phone-stack #description{padding-top:calc(max(20px,env(safe-area-inset-top)) + 80px)!important;padding-bottom:24px!important}
.phone-stack #description .description-grid{gap:22px!important}
.phone-stack #description .description-copy{font-size:clamp(15.5px,3.9vw,17px);line-height:1.48}
.phone-stack #description .description-copy p{margin-bottom:.95em}
.phone-stack #description .description-copy p:last-child{margin-bottom:0}

/* Gallery cue under the title (see stack-media.js). */
.gallery-cue{display:none}
.phone-stack .gallery-cue{display:block;margin:10px 0 0;opacity:0;transform:translateY(6px);
  font:700 12px/1 CompassSans,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.5);transition:opacity .6s ease,transform .6s ease}
.phone-stack .gallery-cue span{font-size:16px;letter-spacing:0;position:relative;top:1px}
.phone-stack .gallery-cue.is-shown{opacity:1;transform:none}
.phone-stack .gallery-cue.is-gone{opacity:0;transform:none}

/* Photo viewer: the page never zooms here (the photo zooms instead, see stack-media.js). */
.phone-stack .lightbox{touch-action:pan-y;overscroll-behavior:contain}
.phone-stack .lightbox .lbimg{touch-action:none;transform-origin:center;transition:transform .12s ease-out;will-change:transform}

/* Hero title: the unit letter "-D" is smaller and sits centred on the height of the numerals. */
.hero-welcome-title .unit-d{display:inline-block;font-size:.5em;position:relative;top:0;vertical-align:baseline;line-height:1;margin-left:.05em;letter-spacing:0}

/* "-D" as a superscript wherever "4154-D" appears (see stack.js). */
.unit-d{display:inline-block;font-size:.62em;position:relative;top:0;vertical-align:baseline;line-height:1;margin-left:.04em;letter-spacing:0}
.unit-mark{display:inline-block;width:0;height:0;vertical-align:baseline}
.hero-welcome-title .unit-d{font-size:.5em}
/* Keep the "-D" pieces inline even where the surrounding text styles every span as a block (gallery captions). */
span.unit-d{display:inline-block!important;font-size:.62em!important;line-height:1!important;margin:0 0 0 .04em!important;color:inherit!important}
span.unit-mark{display:inline-block!important;width:0!important;height:0!important;margin:0!important}
.hero-welcome-title span.unit-d{font-size:.5em!important}

/* Gallery captions: larger, easier description text; the title rises to make room. */
.phone-stack #gallery .reel-caption span:not(.unit-d):not(.unit-mark){font-size:clamp(16px,4.3vw,18.5px);line-height:1.4;color:#fff}
.phone-stack #gallery .reel-caption strong{margin-bottom:10px}
.phone-stack #gallery .reel-caption-inner{max-width:none}

/* ---- Menu (phone): a softly blurred, darkened photo of the home behind white type ---- */
.phone-stack .nav{background:#111 url("assets/card-bg/menu.jpg?v=k1") center/cover no-repeat!important;isolation:isolate;color:#fff!important}
.phone-stack .nav::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.55);pointer-events:none}
.phone-stack .nav,.phone-stack .nav a,.phone-stack .nav a *,.phone-stack .nav small{color:#fff!important}
.phone-stack .nav a{font-size:clamp(25px,7.1vw,32px)!important;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.phone-stack .nav small{opacity:.9}
.phone-stack .nav-close{color:#fff!important;border-color:#fff!important;background:transparent!important}
.phone-stack .nav small{display:none!important}
/* The swipe / tap cue stays on permanently under the Gallery title. */
.phone-stack .gallery-cue,.phone-stack .gallery-cue.is-gone{opacity:.92!important;transform:none!important}
/* Gallery pause/play sits under the photo counter (top right), pairing the two playback items and
   giving the caption the full width at the bottom. */
.phone-stack #gallery .reel-play{top:calc(max(20px,env(safe-area-inset-top)) + 100px + 30px);bottom:auto;right:var(--pad);width:40px;height:40px}
.phone-stack #gallery .reel-caption{padding-right:var(--pad)!important}
.phone-stack .gallery-cue{font-size:clamp(10.5px,2.9vw,12px)!important;letter-spacing:.13em!important;white-space:nowrap}
.phone-stack .gallery-cue .gallery-cue-dot{font-size:inherit;top:0;margin:0 .35em}
/* Two separate instructions on two lines, so they cannot read as one gesture. */
.phone-stack .gallery-cue .gallery-cue-line{display:block;font-size:inherit;top:0;letter-spacing:inherit}
.phone-stack .gallery-cue .gallery-cue-line+.gallery-cue-line{margin-top:7px}

/* Compass logo: the vertical logo on the hero only; no logo in the header on the other cards. It returns
   as a sign-off under the Equal Housing / REALTOR logos, linked to compass.com. */
.phone-stack .head .logo{visibility:hidden!important}
.compass-signoff{display:none}
.phone-stack #request-info .compass-signoff{display:block;width:118px;margin:14px auto 0;line-height:0}
.phone-stack #request-info .compass-signoff img{width:100%;height:auto}
/* Equal Housing / REALTOR logos 30% smaller, with a little more air around them and the Compass logo. */
.phone-stack #request-info .compliance-logo img{width:77px!important}
.phone-stack #request-info .compliance-logo{margin-top:16px!important}
.phone-stack #request-info .compass-signoff{margin-top:18px}

/* Hero entrance: the photo shows on its own for a beat, then the vertical logo fades in, the headline
   rises word by word, then the location line, then the facts. (Reduce Motion shows everything at once.) */
@keyframes heroLogoIn{from{opacity:0}to{opacity:1}}
.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroLogoIn 1.2s ease .9s both}
.phone-stack .hero-welcome-title .w:nth-of-type(1)>span{animation-delay:1.3s!important}
.phone-stack .hero-welcome-title .w:nth-of-type(2)>span{animation-delay:1.42s!important}
.phone-stack .hero-welcome-title .w:nth-of-type(3)>span{animation-delay:1.65s!important}
.phone-stack .hero-welcome-title .w:nth-of-type(4)>span{animation-delay:1.77s!important}
.phone-stack .hero-welcome-title .w:nth-of-type(5)>span{animation-delay:1.89s!important}
.phone-stack .hero-welcome-kicker span{animation-delay:2.25s!important}
.phone-stack .hero-facts{animation-delay:2.6s!important}
@media(prefers-reduced-motion:reduce){.phone-stack.hero-intro .v-logo img.v-logo-white{animation:none}}

/* Hero entrance, revised: after a one-second beat on the photo, the logo, headline, location line and
   facts all fade in together, slowly and in sync (no rising words, no staggering). */
@keyframes heroTogether{from{opacity:0}to{opacity:1}}
.phone-stack .hero-welcome-title .w>span,
.phone-stack .hero-welcome-kicker span,
.phone-stack .hero-facts,
.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroTogether 2.2s ease-in-out 1s both!important}
@media(prefers-reduced-motion:reduce){
  .phone-stack .hero-welcome-title .w>span,.phone-stack .hero-welcome-kicker span,.phone-stack .hero-facts,
  .phone-stack.hero-intro .v-logo img.v-logo-white{animation:none!important}
}
/* The same Compass sign-off on the Presented By card, pinned where it sits on Request Info. */
.phone-stack #presented .compass-signoff{display:block;position:absolute;z-index:2;left:50%;transform:translateX(-50%);width:118px;
  bottom:calc(max(12px,env(safe-area-inset-bottom)) + 24px);line-height:0}
.phone-stack #presented .compass-signoff img{width:100%;height:auto}
.phone-stack #presented .card-inner{position:static}
/* Request Info keeps its Compass logo where it was, right under the Equal Housing / REALTOR logos. The
   Presented By logo is placed at exactly that same height on screen (measured in stack-media.js). */
.phone-stack #presented .compass-signoff{bottom:auto}
/* The words no longer rise in, so they need no clipping box (it was cutting the soft text shadow into visible rectangles). */
.phone-stack .hero-welcome-title .w{overflow:visible!important}
/* The "Scroll" cue fades in with the rest of the hero. */
.phone-stack.hero-intro .explore-cue{animation:heroTogether 2.2s ease-in-out 1s both!important}
/* Header over photos and video: a soft shadow on the white menu, logo and Request Info so they stay
   readable over bright scenes (no band behind them). */
.phone-stack.over-photo .head .burger,.phone-stack.over-photo .head .cta,.phone-stack.on-hero .head .burger,.phone-stack.on-hero .head .cta{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(0,0,0,.25))}
/* Photo viewer arrows: black, not the iPhone default blue. */
.lightbox .lbnav{color:#080808!important;-webkit-text-fill-color:#080808}
/* Zoomed photo stays beneath the viewer top bar, so the count and close button are always reachable. */
.phone-stack .lightbox .lbtop{position:sticky;z-index:10!important;background:#fff}
.phone-stack .lightbox .lbimg{position:relative;z-index:1}

/* ---- Cards keep one fixed height while Safari's toolbar slides in and out (see stack.js) ----
   --tb is the toolbar's height: the part of a full-screen card hidden behind it while it shows.
   Everything pinned near the bottom of a card is lifted by that much so it is always visible. */
html.phone-stack{--tb:calc(100lvh - 100svh)}
.phone-stack .hero-facts,
.phone-stack #gallery .reel-caption,
.phone-stack #gallery .reel-progress,
.phone-stack .film-controls,
.phone-stack .film-progress,
.phone-stack .card-explore::after{translate:0 calc(-1 * var(--tb))}
/* The site's smooth page scrolling fights the card snapping; the cards provide the motion on phones. */
html.phone-stack{scroll-behavior:auto!important}
/* The vertical logo leaves with the hero: it fades out as soon as the next card starts covering it,
   quickly, so it never ghosts over the description text on smaller phones. */
.phone-stack:not(.on-hero) .v-logo{transition:opacity .18s ease,visibility .18s ease}
.phone-stack #location::before{height:var(--loc-blur,58%)!important}
.phone-stack #location::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--loc-solid,62%),transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0,#000 var(--loc-solid,62%),transparent 100%)!important}

/* Smaller iPhones (narrower than a Pro Max): tighten the Request Info card a little so everything, down to
   the COMPASS logo, fits above Safari's bottom bar. The larger phones keep their current layout. */
@media (max-width:420px){
  .phone-stack #request-info .section-head h2{font-size:clamp(44px,12.4vw,52px)!important}
  .phone-stack #request-info .section-head{margin-bottom:10px}
  .phone-stack #request-info .intro-copy{font-size:21px}
  .phone-stack #request-info .soft-lock-zone{margin-bottom:14px}
  .phone-stack #request-info .form{gap:7px}
  .phone-stack #request-info .form input,.phone-stack #request-info .form textarea{padding:8px 12px!important}
  .phone-stack #request-info .form textarea{min-height:46px!important;height:46px}
  .phone-stack #request-info .form button{padding-top:11px!important;padding-bottom:11px!important}
  .phone-stack #request-info .legal{margin-top:12px!important}
  .phone-stack #request-info .legal-disclaimer{font-size:9px;line-height:1.4}
  .phone-stack #request-info .compliance-logo{margin-top:10px!important}
  .phone-stack #request-info .compass-signoff{margin-top:12px}
}

/* Kiahuna: the phone welcome headline is set well below the template size so "Kiahuna Plantation Unit 99" sits clear of the COMPASS logo. */
html.phone-stack .hero-welcome-title{font-size:clamp(20px,6.4vw,32px)}

/* Kiahuna: the phone Welcome facts and MLS line sit flush right, ending on the same edge as the headline. */
html.phone-hero.phone-stack .hero-facts{text-align:right}
html.phone-hero.phone-stack .hero-facts-row{display:flex;justify-content:flex-end;gap:clamp(26px,8vw,40px)}
html.phone-hero.phone-stack .hero-fact{justify-items:end}

/* Kiahuna: upright phones break the headline into three lines, with "Unit 99" under "Kiahuna Plantation". */
.hero-welcome-title .phone-br{display:none}
html.phone-hero.phone-stack .hero-welcome-title .phone-br{display:inline}
html.phone-hero.phone-stack .hero-welcome-title{font-size:clamp(22px,8.5vw,40px)}

/* Kiahuna: the phone Overview paragraphs spread with the screen height, so taller phones fill down toward the bottom. */
html.phone-hero.pm #description .desc-short p{margin-bottom:clamp(.7em,2.4svh,1.4em)!important}
html.phone-hero.pm #description .desc-short p:last-child{margin-bottom:0!important}

/* Kiahuna: on upright phones the Overview MLS line moves to the bottom, set apart from the story,
   and the headline sits further below the "01 Overview" line. */
html.phone-hero.pm #description .desc-short{display:flex!important;flex-direction:column}
html.phone-hero.pm #description .desc-short p:first-child{order:1;margin:clamp(1.4em,6svh,3.5em) 0 0!important}
html.phone-hero.pm #description .description-lead{margin-top:20px!important}

/* Kiahuna: the phone Overview starts well below the menu and Request Info buttons, scaled to the screen height. */
html.phone-hero.pm #description .card-inner{padding-top:calc(env(safe-area-inset-top) + clamp(84px,13svh,130px))!important}

/* Kiahuna desktop Welcome: "Unit 99" drops below "Kiahuna Plantation", and the facts and MLS line sit flush right
   under the headline, as on phones. */
html.wide-fade .hero-welcome-title .phone-br{display:inline}
html.wide-fade .hero .hero-facts{right:0!important;text-align:right}
html.wide-fade .hero .hero-facts-row{justify-content:flex-end}
html.wide-fade .hero .hero-fact{justify-items:end}
/* Wide screens taller than a sideways phone: the headline starts a fixed share of the way down and is sized
   from both the width and the height, so the three lines always clear the menu bar and the facts. A fixed
   top also stops the headline and the vertical logo chasing each other while the window is resized. */
@media (min-height:561px){
  html.wide-fade .hero-welcome-head{top:max(100px,21.5vh)!important;bottom:auto!important}
  html.wide-fade .hero-welcome-title{font-size:clamp(40px,min(6.4vw,10.5vh),112px)!important}
  /* The vertical logo's top stays level with the top of the W as the window changes size. */
  html.wide-fade.phone-stack.pm-logo-aligned .v-logo{top:calc(max(100px,21.5vh) + 1px)!important}
}

/* Kiahuna: on upright phones the film's sound and full-screen buttons sit low and mirrored, one at each side
   margin, with the progress line running between them at their mid-height. */
html.phone-hero.phone-stack #tour.is-playing .film-controls{left:var(--pad);right:var(--pad);justify-content:space-between;
  bottom:max(22px,env(safe-area-inset-bottom));pointer-events:none}
html.phone-hero.phone-stack #tour.is-playing .film-controls .film-btn{pointer-events:auto}
html.phone-hero.phone-stack #tour.is-playing .film-progress{left:calc(var(--pad) + 60px);right:calc(var(--pad) + 60px);
  bottom:calc(max(22px,env(safe-area-inset-bottom)) + 22px)}
/* The video card already ends at the bottom of the visible screen (it is pinned top and bottom), so the
   Safari-toolbar lift used on the full-height cards would push these up a second time. */
html.phone-hero.phone-stack #tour .film-controls,html.phone-hero.phone-stack #tour .film-progress{translate:none!important}
html.phone-hero.phone-stack #tour.is-playing .film-controls{bottom:max(22px,calc(env(safe-area-inset-bottom) + 8px))}
html.phone-hero.phone-stack #tour.is-playing .film-progress{bottom:calc(max(22px,calc(env(safe-area-inset-bottom) + 8px)) + 22px)}
/* The gallery card is sized to the visible screen (--card-h), like the video card, so the Safari-toolbar
   lift above would push its bottom items up a second time. The caption already lost the lift (its arrival
   fade holds translate), so the progress line drops it too and stays just beneath the caption on iPhones. */
html.phone-stack #gallery .reel-caption,html.phone-stack #gallery .reel-progress{translate:none!important}
/* Phone menu: the first link breaks after "Welcome to", so the property name always sits whole on the line
   below; the two lines sit close together and read as one item. Wider screens show it on one line. */
.nav .nav-break{display:none}
.phone-stack .nav .nav-break{display:inline}
.phone-stack .nav a[href="#film"]{line-height:1.15!important;padding-block:.275em!important}
/* Phone gallery: the desktop's ‹ › arrows join the pause button up under the counter, in one row
   (pause, previous, next) ending at the right margin. Swiping and tapping for the full photo still work. */
.phone-stack #gallery .reel-nav{display:flex!important;top:calc(max(20px,env(safe-area-inset-top)) + 100px + 30px);bottom:auto;right:var(--pad);gap:8px}
.phone-stack #gallery .reel-arrow{width:40px;height:40px;padding:0;font-size:26px;display:grid;place-items:center}
.phone-stack #gallery .reel-play{right:calc(var(--pad) + 2 * 40px + 8px + 8px)}
.phone-fade #gallery.is-current .reel-nav{animation:fadeTextIn 1.5s cubic-bezier(.33,.0,.2,1) .35s both}
/* Phone gallery: a very light, feathered shade behind the room title and caption, so the white text reads
   on bright photos. It eases in from well above the title to a little over 40% black at the bottom edge. */
html.phone-stack #gallery .reel-caption{background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.07) 25%,rgba(11,11,11,.17) 50%,rgba(11,11,11,.3) 75%,rgba(11,11,11,.42) 100%)!important}
/* The map and 3D tour cards are sized to the visible screen (--card-h), like the video and gallery, so the
   Safari-toolbar lift would push their "Tap to explore" label up a second time, onto the map pin. */
html.phone-stack .media-card .card-explore::after{translate:none!important}
/* Kiahuna: while the welcome film is loading, the welcome words, logo, menu and scroll cue wait on their
   first (hidden) frame, so they fade in over the moving film rather than over the still photo. (Repeated
   class names outrank the logo's own !important animation rules.) */
html.hero-hold.hero-hold.hero-hold :is(.hero,.head,.v-logo,.m-topnav) *,html.hero-hold.hero-hold.hero-hold :is(.hero-facts,.explore-cue,.m-topnav,.v-logo){animation-play-state:paused!important}
html.hero-hold.hero-hold.hero-hold.hero-hold .v-logo img.v-logo-white.v-logo-white{animation-play-state:paused!important}
html.hero-hold.hero-hold.hero-hold.hero-hold .hero-welcome-title .w.w:nth-of-type(n)>span,html.hero-hold.hero-hold.hero-hold.hero-hold .hero-welcome-kicker.hero-welcome-kicker span,html.hero-hold.hero-hold.hero-hold.hero-hold .hero-facts.hero-facts,html.hero-hold.hero-hold.hero-hold.hero-hold .explore-cue.explore-cue{animation-play-state:paused!important}

/* Desktop (Michael, 2026-10-24): the COMPASS logo and the Welcome words sit a little lower, a little closer to the
   middle of the screen: both move down 5vh, so the Koloa line stays level with the bottom of the C. (The words
   are re-placed against the logo from their own position, so 2.5vh on the words moves them 5vh.) */
html.wide-fade .v-logo{translate:0 5vh}
html.wide-fade .hero-welcome-head>*{translate:0 2.5vh}