/* Phones held upright: the modern language (see phone-modern.js). Loaded last. */
html.pm{--pm-paper:#f3eee6;--pm-ink:#1f1d1a;--pm-muted:rgba(31,29,26,.62);--pm-rule:rgba(31,29,26,.18)}

/* Labels: 01 —— THE HOME */
.pm-kicker,.pm-navnum{display:none}
html.pm .pm-kicker{display:flex;align-items:center;gap:12px;margin:0 0 12px!important;font:700 10px/1 CompassSans,Arial,sans-serif!important;letter-spacing:.3em!important;text-transform:uppercase;color:rgba(255,255,255,.85)!important}
html.pm .pm-kicker *{color:inherit!important}
html.pm .pm-kicker .pm-num{font:400 12px/1 CompassSans,Arial,sans-serif;letter-spacing:.12em}
html.pm .pm-kicker .pm-line{display:block;width:28px;height:1px;background:currentColor;opacity:.8}
html.pm .media-card .pm-kicker{text-shadow:0 1px 2px rgba(0,0,0,.5)!important}

/* One type family: the Compass sans everywhere (the narrow display face goes). */
html.pm body>section h2,html.pm .description-lead,html.pm .loc-title,html.pm .intro-copy,html.pm .loc-copy{font-family:CompassSans,Arial,sans-serif!important;letter-spacing:-.02em!important}
html.pm .intro-copy,html.pm .loc-copy{letter-spacing:0!important}

/* ---- Off-white cards: The Home, Presented By, Request Info ---- */
html.pm body>section#description,html.pm body>section#presented,html.pm body>section#request-info{background:var(--pm-paper)!important}
html.pm #description .card-bg,html.pm #presented .card-bg,html.pm #request-info .card-bg{display:none!important}
html.pm body>section#description.content,html.pm body>section#description.content *,
html.pm body>section#presented.content,html.pm body>section#presented.content *,
html.pm body>section#request-info.content,html.pm body>section#request-info.content *{color:var(--pm-ink)!important;text-shadow:none!important}
html.pm body>section#description.content .pm-kicker,html.pm body>section#description.content .pm-kicker *,
html.pm body>section#presented.content .pm-kicker,html.pm body>section#presented.content .pm-kicker *,
html.pm body>section#request-info.content .pm-kicker,html.pm body>section#request-info.content .pm-kicker *{color:var(--pm-muted)!important}
html.pm body>section.content .pm-kicker .pm-num{color:var(--pm-ink)!important}

/* The Home: photo grid, then the words. */
html.pm #description .pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 calc(-1 * var(--pad)) 24px;background:var(--pm-paper)}
html.pm #description .pm-grid figure{margin:0;overflow:hidden}
html.pm #description .pm-grid .pm-g1{grid-column:1/-1;aspect-ratio:3/2}
html.pm #description .pm-grid .pm-g2,html.pm #description .pm-grid .pm-g3{aspect-ratio:1/1}
html.pm #description .pm-grid img{width:100%;height:100%;object-fit:cover;display:block}
html.pm #description .pm-grid .pm-g3 img{object-position:68% 50%}
html.pm body>section#description.content .description-copy,html.pm body>section#description.content .description-copy p{color:rgba(31,29,26,.84)!important}
html.pm #description .description-copy{border-top:1px solid var(--pm-rule);padding-top:18px!important;margin-top:16px!important}

/* Presented By: square headshots, medium-weight details, links underlined. */
html.pm #presented .agent img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover;object-position:50% 30%;border:0!important;box-shadow:none!important}
html.pm body>section#presented.content .agent p,html.pm body>section#presented.content .agent p *{font-family:CompassSansMedium,CompassSans,Arial,sans-serif!important;font-weight:500!important}
html.pm body>section#presented.content .agent p a{text-decoration:underline;text-decoration-color:rgba(31,29,26,.35);text-underline-offset:3px}
html.pm body>section#presented.content .intro-copy{color:var(--pm-muted)!important}

/* Request Info: outlined fields, black button, dark logos. */
html.pm #request-info .form input,html.pm #request-info .form textarea{background:transparent!important;border:1px solid var(--pm-ink)!important;color:var(--pm-ink)!important;-webkit-text-fill-color:var(--pm-ink)}
html.pm #request-info .form input::placeholder,html.pm #request-info .form textarea::placeholder{color:rgba(31,29,26,.55)!important;-webkit-text-fill-color:rgba(31,29,26,.55)}
html.pm body>section#request-info.content .form button{background:var(--pm-ink)!important;border-color:var(--pm-ink)!important;color:var(--pm-paper)!important}
html.pm body>section#request-info.content .intro-copy,html.pm body>section#request-info.content .legal,html.pm body>section#request-info.content .legal *{color:var(--pm-muted)!important}
html.pm body>section#request-info.content .legal{border-top-color:var(--pm-rule)!important}
html.pm #request-info .compliance-logo img,html.pm #request-info .compass-signoff img,html.pm #presented .compass-signoff img{filter:invert(1) brightness(.15)!important}

/* Header over the off-white cards. */
html.pm.pm-on-light .head .burger,html.pm.pm-on-light .head .cta{color:var(--pm-ink)!important;border-color:var(--pm-ink)!important;filter:none!important}
html.pm.pm-on-light .head .burger i{background:var(--pm-ink)!important}

/* Map: the same calm, warm, muted tones as the desktop. */
html.pm #location iframe{filter:grayscale(.6) sepia(.22) saturate(.9) contrast(.96) brightness(1.03)}

/* Menu numbers. */
html.pm .nav a{position:relative}
html.pm .nav a .pm-navnum{display:inline-block;width:2.2em;font:700 11px/1 CompassSans,Arial,sans-serif!important;letter-spacing:.12em;opacity:.7;vertical-align:.6em;text-shadow:none!important}
html.pm .nav a[href="#film"]{padding-left:24px}
html.pm body>section#presented.content .intro-copy .plain-d{color:inherit!important}
/* The story card: off-white, the full story from the top, comfortably sized. */
html.pm body>section#story{background:var(--pm-paper)!important}
html.pm body>section#story.content,html.pm body>section#story.content *{color:rgba(31,29,26,.86)!important;text-shadow:none!important}
html.pm #story .card-inner{padding:calc(max(20px,env(safe-area-inset-top)) + 96px) var(--pad) 40px!important;justify-content:flex-start!important}
html.pm #story .description-copy{border-top:1px solid var(--pm-rule);padding-top:22px!important;margin:0!important}
html.pm #story .description-copy,html.pm #story .description-copy p{font-size:clamp(16px,4.3vw,18px)!important;line-height:1.6!important}
html.pm #story .description-copy p{margin:0 0 1em!important}
html.pm #description .card-inner{justify-content:flex-start!important}
/* Header stays clear (no white bar) over the off-white cards. */
html.pm.pm-on-light .head,html.pm.pm-on-light .head.white{background:transparent!important;border-bottom:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Story card: starts just under the header and fits on one screen. */
html.pm #story .card-inner{padding:96px var(--pad) 28px!important;min-height:0!important}
html.pm #story .description-copy{padding-top:18px!important}
html.pm #story .description-copy,html.pm #story .description-copy p{font-size:15.5px!important;line-height:1.55!important}
html.pm #story .description-copy p{margin:0 0 .9em!important}
html.pm #story .card-inner{justify-content:center!important;min-height:var(--card-h,100svh)!important;padding-top:84px!important}
/* Labels over photographs and film keep a white number. */
html.pm body>section.media-card .pm-kicker .pm-num{color:#fff!important}
/* The Home on one screen: photo strip (large photo left, two stacked right), headline, story. */
html.pm #description .pm-grid{grid-template-columns:2fr 1fr!important;grid-template-rows:1fr 1fr!important;height:var(--pm-grid-h,27vh);margin:0 calc(-1 * var(--pad)) 16px!important}
html.pm #description .pm-grid .pm-g1{grid-column:1!important;grid-row:1/3!important;aspect-ratio:auto!important}
html.pm #description .pm-grid .pm-g2{grid-column:2;grid-row:1;aspect-ratio:auto!important}
html.pm #description .pm-grid .pm-g3{grid-column:2;grid-row:2;aspect-ratio:auto!important}
html.pm #description .card-inner{padding-top:76px!important;padding-bottom:12px!important;justify-content:flex-start!important}
html.pm #description .pm-kicker{margin-bottom:8px!important}
html.pm #description .description-lead{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.02!important;margin:0!important}
html.pm #description .description-copy{margin-top:12px!important;padding-top:12px!important}
html.pm #description .description-copy,html.pm #description .description-copy p{font-size:var(--pm-story,16px)!important;line-height:1.5!important}
html.pm #description .description-copy p{margin:0 0 .7em!important}
html.pm #description .description-copy p:last-child{margin-bottom:0!important}
html.pm body>section#description{padding:0!important}
html.pm #description .card-inner{margin:0!important;min-height:0!important}
html.pm #description .card-inner{padding-left:var(--pad)!important;padding-right:var(--pad)!important}
html.pm #description .soft-lock-zone{margin:0!important;padding:0!important}
html.pm #description .description-grid{gap:0!important;row-gap:0!important}
/* Map: a lighter blur behind the words. */
html.pm #location::before{background:rgba(10,10,10,.22)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}
/* The Home arrives steadily: the photographs come in with the crossfade itself (no delayed pop or rise),
   and only the words fade in after. */
html.pm.phone-fade #description.fade-card.is-current .card-inner{animation:none!important;translate:none!important}
html.pm.phone-fade #description.fade-card.is-current .soft-lock-zone,
html.pm.phone-fade #description.fade-card.is-current .description-copy{animation:pmWordsIn 1.2s cubic-bezier(.33,0,.2,1) .3s backwards}
@keyframes pmWordsIn{from{opacity:0}to{opacity:1}}
/* The Home's photographs fade in softly (from the off-white), the words just after. */
html.pm.phone-fade #description.fade-card.is-current .pm-grid{animation:pmWordsIn 1.3s cubic-bezier(.33,0,.2,1) .05s backwards}
html.pm.phone-fade #description.fade-card.is-current .soft-lock-zone,
html.pm.phone-fade #description.fade-card.is-current .description-copy{animation-delay:.45s!important}
/* Film, gallery and 3D tour cards fade in over the off-white (never black) while their media loads. */
html.pm body>section#tour,html.pm body>section#gallery,html.pm body>section#tour-3d{background:var(--pm-paper)!important}
html.pm #tour .video-frame,html.pm #tour .tour-phone,html.pm #gallery .reel,html.pm #gallery .reel-stage,html.pm #tour-3d .video-frame{background:transparent!important}
/* Steady cards: every card keeps the full-screen height (toolbar hidden) instead of growing as Safari's
   toolbar slides away mid-swipe; anything pinned near the bottom is lifted by the toolbar's height so it is
   never covered. Nothing moves when the toolbar hides. */
html.pm.phone-fade{--tb:calc(100lvh - 100svh)}
html.pm.phone-fade body>section.fade-card{bottom:auto!important;height:100lvh!important}
/* The vertical COMPASS logo is placed against the fixed screen size, so it no longer slides down as the
   toolbar hides. */
html.pm.phone-fade .v-logo{top:50svh!important}
/* 3D tour: the whole tour is the button (Matterport's own play button shows); no separate label. */
html.pm #tour-3d .card-explore::after{display:none!important}
/* The film card keeps its original sizing (the visible screen), so the vertical video is cropped no more
   than before; the toolbar is already tucked away by the time this card is reached. */
html.pm.phone-fade body>section#tour.fade-card{bottom:0!important;height:auto!important}
/* Menu: more breathing room between the items. */
html.pm .nav a{line-height:1.7!important}
/* Hero entrance in sequence: the COMPASS logo first, the welcome half a second later, then the facts. */
html.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroTogether 1.4s ease-in-out .8s both!important}
html.phone-stack .hero-welcome-title .w>span,html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.4s ease-in-out 1.3s both!important}
html.phone-stack .hero-facts,html.phone-stack.hero-intro .explore-cue{animation:heroTogether 1.4s ease-in-out 1.8s both!important}
/* Hero entrance, slower: the logo fades on gently, the welcome a full second later, then the facts. */
html.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroTogether 2.2s ease-in-out .8s both!important}
html.phone-stack .hero-welcome-title .w>span,html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.6s ease-in-out 1.8s both!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue{animation:heroTogether 1.6s ease-in-out 2.8s both!important}
/* Hero entrance, slow: each layer fades on over 3 seconds, a second and a half apart.
   (The logo's fade no longer depends on the short intro flag, so it is never cut off part way.) */
html.phone-stack .v-logo img.v-logo-white,html.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroTogether 3s ease-in-out .8s both!important}
html.phone-stack .hero-welcome-title .w>span,html.phone-stack .hero-welcome-kicker span{animation:heroTogether 3s ease-in-out 2.3s both!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue{animation:heroTogether 3s ease-in-out 3.8s both!important}
/* The welcome waits until the logo is fully on, plus a pause; the facts follow 1.5 seconds later. */
html.phone-stack .hero-welcome-title .w>span,html.phone-stack .hero-welcome-kicker span{animation:heroTogether 3s ease-in-out 4.8s both!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue{animation:heroTogether 3s ease-in-out 6.3s both!important}
/* Hero entrance: each layer fades on over 1.5s, with a 1.5s pause before the next begins. */
html.phone-stack .v-logo img.v-logo-white,html.phone-stack.hero-intro .v-logo img.v-logo-white{animation:heroTogether 1.5s ease-in-out .8s both!important}
html.phone-stack .hero-welcome-title .w>span,html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.5s ease-in-out 3.8s both!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue{animation:heroTogether 1.5s ease-in-out 6.8s both!important}
/* (Older per-word delays were still bringing the headline in early: every word now waits for 3.8s.) */
html.phone-stack .hero-welcome-title .w:nth-of-type(n)>span{animation:heroTogether 1.5s ease-in-out 3.8s both!important}
html.phone-stack .hero-welcome-kicker span{animation-delay:3.8s!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue,html.phone-stack.hero-intro .explore-cue{animation:heroTogether 1.5s ease-in-out 6.8s both!important}
/* Gaps between the hero fades: 1.25s. */
html.phone-stack .hero-welcome-title .w:nth-of-type(n)>span{animation:heroTogether 1.5s ease-in-out 3.55s both!important}
html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.5s ease-in-out 3.55s both!important}
html.phone-stack .hero-facts,html.phone-stack .explore-cue,html.phone-stack.hero-intro .explore-cue{animation:heroTogether 1.5s ease-in-out 6.3s both!important}
/* Hero: no rule above the facts. */
html.phone-stack .hero-facts{border-top:0!important;padding-top:0!important}
/* "Scroll" cue: top centre (level with the menu button and Request Info), larger. */
html.phone-stack .explore-cue{position:fixed!important;left:50%!important;right:auto!important;top:calc(max(20px,env(safe-area-inset-top)) + 0px)!important;transform:translateX(-50%)!important;gap:9px!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
html.phone-stack .explore-cue span{font-size:11px!important;letter-spacing:.22em!important}
html.phone-stack .explore-cue i{width:18px!important;height:18px!important;border-right-width:2px!important;border-bottom-width:2px!important}
/* The Scroll cue fades on together with the COMPASS logo. */
html.phone-stack .explore-cue,html.phone-stack.hero-intro .explore-cue{animation:heroTogether 1.5s ease-in-out .8s both!important}
/* The vertical logo's top (the S) is set level with the top of the W in "Welcome" (see phone-modern.js). */
html.phone-stack.pm-logo-aligned .v-logo{top:var(--pm-logo-top)!important;transform:none!important}
/* Scroll cue: a slow, gentle fade on (it no longer pops in when the page decides scrolling is ready). */
html.phone-stack.on-hero body:not(.menu-open) .explore-cue{visibility:visible!important;transition:none!important}
html.phone-stack .explore-cue,html.phone-stack.hero-intro .explore-cue{animation:heroTogether 3s ease-in-out .8s both!important}
/* The logo stays out of sight until it has been placed level with "Welcome" (no visible jump). */
html.phone-stack:not(.pm-logo-aligned) .v-logo{visibility:hidden!important}
html.pm #description .pm-grid{height:var(--pm-grid-h,27svh)!important;will-change:opacity;transform:translateZ(0)}
/* The Home: the three photographs fade on one after another (large, kitchen, bath), then the words. */
html.pm.phone-fade #description.fade-card.is-current .pm-grid{animation:none!important}
html.pm.phone-fade #description.fade-card.is-current .pm-grid figure{animation:pmWordsIn 1.2s cubic-bezier(.33,0,.2,1) backwards;will-change:opacity}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g1{animation-delay:.05s}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g2{animation-delay:.45s}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g3{animation-delay:.85s}
html.pm.phone-fade #description.fade-card.is-current .soft-lock-zone,
html.pm.phone-fade #description.fade-card.is-current .description-copy{animation-delay:1.25s!important}
/* The Home photos: a soft, overlapping feather (0.12s apart, long gentle easing). */
html.pm.phone-fade #description.fade-card.is-current .pm-grid figure{animation:pmWordsIn 1.6s cubic-bezier(.25,.1,.25,1) backwards}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g1{animation-delay:.05s}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g2{animation-delay:.17s}
html.pm.phone-fade #description.fade-card.is-current .pm-grid .pm-g3{animation-delay:.29s}
html.pm.phone-fade #description.fade-card.is-current .soft-lock-zone,
html.pm.phone-fade #description.fade-card.is-current .description-copy{animation-delay:.7s!important}
/* Contact intro lines as sub-headlines: title case, a little larger, regular weight, charcoal. */
html.pm body>section#presented.content .intro-copy,html.pm body>section#request-info.content .intro-copy{font-size:clamp(20px,5.6vw,24px)!important;line-height:1.25!important;letter-spacing:-.01em!important;color:#1f1d1a!important;font-weight:400!important}
/* The Home: the photographs run right up to the top edge, behind the menu button and Request Info. */
html.pm #description .card-inner{padding-top:0!important}
html.pm #description .pm-grid{height:calc(var(--pm-grid-h,27svh) + max(76px,calc(env(safe-area-inset-top) + 56px)))!important}
/* (The fade-under-the-header mask is not wanted here: the photos should show right to the top.) */
html.pm #description .card-inner{-webkit-mask-image:none!important;mask-image:none!important}
/* A soft shade across the top of the photos so the white menu button and Request Info read clearly. */
html.pm #description .pm-grid{position:relative}
html.pm #description .pm-grid::after{content:'';position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.16) 55%,rgba(0,0,0,0))}
/* The Home: no rule between the headline and the story. */
html.pm #description .description-copy{border-top:0!important;padding-top:0!important;margin-top:14px!important}
/* Gaps between the hero fades 25% shorter (about 0.94s). */
html.phone-stack .hero-welcome-title .w:nth-of-type(n)>span{animation:heroTogether 1.5s ease-in-out 3.24s both!important}
html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.5s ease-in-out 3.24s both!important}
html.phone-stack .hero-facts{animation:heroTogether 1.5s ease-in-out 5.68s both!important}
/* Small phones (iPhone SE size): Request Info tightened so COMPASS stays on screen. */
@media(max-height:700px){
  html.pm #request-info .card-inner{padding-top:72px!important}
  html.pm #request-info .pm-kicker{margin-bottom:6px!important}
  html.pm #request-info .section-head h2{font-size:38px!important}
  html.pm body>section#request-info.content .intro-copy{font-size:17px!important;margin-top:4px!important}
  html.pm #request-info .soft-lock-zone{margin-bottom:10px!important}
  html.pm #request-info .form{gap:6px!important}
  html.pm #request-info .form input,html.pm #request-info .form textarea{padding:8px 10px!important}
  html.pm #request-info .legal{margin-top:10px!important;padding-top:8px!important}
  html.pm #request-info .legal-disclaimer{font-size:8.5px!important;line-height:1.35!important}
}
@media(max-height:700px){
  html.pm body>section#request-info{padding-top:0!important}
  html.pm #request-info .card-inner{padding-top:70px!important}
}

/* Hero: each of the three starts fading on one second after the one before (logo .8s, Welcome 1.8s, facts 2.8s). */
html.phone-stack .hero-welcome-title .w:nth-of-type(n)>span{animation:heroTogether 1.5s ease-in-out 1.8s both!important}
html.phone-stack .hero-welcome-kicker span{animation:heroTogether 1.5s ease-in-out 1.8s both!important}
html.phone-stack .hero-facts{animation:heroTogether 1.5s ease-in-out 2.8s both!important}

/* Overview photos on phones: one full-width frame that crossfades (see phone-modern.js). */
html.pm #description .xfade{position:relative}
html.pm #description .xfade img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
html.pm #description .xfade img.on{opacity:1}
html.pm #description .pm-grid.pm-one{grid-template-columns:1fr!important;grid-template-rows:1fr!important}
html.pm #description .pm-grid.pm-one .pm-g1{grid-column:1!important;grid-row:1!important}

/* Kiahuna: the kitchen photo is framed from its centre. */
html.pm #description .pm-grid .pm-g3 img{object-position:50% 50%}
/* Kiahuna: two stacked photos (ocean view above, rooms crossfading below), as on the desktop. */
html.pm #description .pm-grid.pm-two{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important}
html.pm #description .pm-grid.pm-two .pm-g1{grid-column:1!important;grid-row:1!important;aspect-ratio:auto!important}
html.pm #description .pm-grid.pm-two .pm-g2{grid-column:1!important;grid-row:2!important;aspect-ratio:auto!important}

/* Kiahuna: the map reads clearly; only a light veil behind the words. */
html.pm #location::before{-webkit-backdrop-filter:blur(1.5px)!important;backdrop-filter:blur(1.5px)!important}
html.pm.phone-stack #location::before{height:44%!important}
/* Overview: the full-colour palms photo fills the screen, white words sit high over it. */
html.pm body>section#description{background:linear-gradient(180deg,rgba(8,12,16,.62) 0%,rgba(8,12,16,.46) 50%,rgba(8,12,16,.40) 100%),url(assets/overview/resort-oceanfront.jpg) 58% 50%/cover no-repeat!important}
html.pm #description .pm-grid{display:none!important}
html.pm #description .card-inner{padding-top:64px!important}
html.pm body>section#description.content,html.pm body>section#description.content *,
html.pm body>section#description.content .description-copy,html.pm body>section#description.content .description-copy p,
html.pm body>section#description.content .pm-kicker,html.pm body>section#description.content .pm-kicker *{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.45)!important}
html.pm #description .description-copy{border-top-color:rgba(255,255,255,.4)!important}
html.pm #description .description-lead{font-size:clamp(20px,6.5vw,32px)!important;white-space:nowrap}

/* Kiahuna: on phones too, the Overview fades up from the off-white page like the other pages: the page is
   off-white and the palms photo (with its shade) fades in on a layer above it each time the Overview arrives. */
@keyframes pmPhotoIn{from{opacity:0}to{opacity:1}}
html.pm body>section#description{background:var(--pm-paper,#f3eee6)!important}
html.pm body>section#description::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,16,.62) 0%,rgba(8,12,16,.46) 50%,rgba(8,12,16,.40) 100%),url(assets/overview/resort-oceanfront.jpg) 58% 50%/cover no-repeat}
html.pm.phone-fade body>section#description.is-current::before{animation:pmPhotoIn 1.5s cubic-bezier(.33,0,.2,1) .35s backwards}
@media(prefers-reduced-motion:reduce){html.pm.phone-fade body>section#description.is-current::before{animation:none}}

/* Kiahuna: the Location card on upright phones. The veil behind the words is a soft tint that fades out over
   200px below the text (no blur, so there is no hard edge on iPhone), and the map is drawn taller than the
   card, so its centre (the resort) sits halfway between the end of the words and the Explore button, in the
   clear part of the visible screen.
   While the map is being explored it returns to its normal size. */
html.pm.phone-stack #location::before{height:calc(var(--loc-solid,62%) + 200px)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0,rgba(10,10,10,.32) calc(100% - 200px),rgba(10,10,10,.12) calc(100% - 100px),rgba(10,10,10,0) 100%)!important}
html.pm.phone-stack:not(.is-exploring-map) #location iframe{height:calc(var(--loc-solid,50%) + 100svh + 96px)!important}
/* Welcome screen: the SCROLL word sits level with the Request Info button text and the menu button
   (the arrow keeps its gap below it). */
html.phone-stack .explore-cue{top:calc(max(20px,env(safe-area-inset-top)) + 12px)!important}

/* The interactive Google map (gmap.js) gets the same muted colours as the old embedded map on phones. */
html.pm #location .map .gmap{filter:grayscale(.6) sepia(.22) saturate(.9) contrast(.96) brightness(1.03)}

/* Upright phones only (Michael, 2026-10-24, as on the 4154-D Pai site): a lighter hero. The vertical COMPASS logo
   is about 25% smaller and the "Welcome to" headline about 12% smaller. The logo and the welcome words move
   together (phone-modern.js measures the lift, --pm-lift); the town line stays level with the bottom of the C. */
html.phone-fade:not(.wide-fade) .v-logo{height:25.5svh!important}
html.phone-fade:not(.wide-fade) .hero-welcome-title{font-size:clamp(19.5px,7.5vw,35px)!important}
html.phone-fade:not(.wide-fade) .v-logo,html.phone-fade:not(.wide-fade) .hero-welcome-head>*{translate:0 var(--pm-lift,-15px)}