/* 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}
/* 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)}

/* Map card on phones: the frosted band behind the words stays short (only 40px longer than before) but ends in
   a soft, eased feather instead of a straight fade with a hard-looking edge. */
.phone-stack #location::before{height:calc(var(--loc-blur,58%) + 40px)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--loc-solid,62%),rgba(0,0,0,.9) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .15),rgba(0,0,0,.68) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .35),rgba(0,0,0,.4) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .55),rgba(0,0,0,.16) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .75),rgba(0,0,0,.04) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .9),transparent 100%)!important;
  mask-image:linear-gradient(180deg,#000 0,#000 var(--loc-solid,62%),rgba(0,0,0,.9) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .15),rgba(0,0,0,.68) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .35),rgba(0,0,0,.4) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .55),rgba(0,0,0,.16) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .75),rgba(0,0,0,.04) calc(var(--loc-solid,62%) + (100% - var(--loc-solid,62%)) * .9),transparent 100%)!important}

/* Upright phones only: a lighter hero. The vertical COMPASS logo is about 25% smaller and the "Welcome to"
   headline about 12% smaller (still the largest type, still right-aligned); the logo stays level with the W. */
html.phone-fade:not(.wide-fade) .v-logo{height:25.5svh!important}
html.phone-fade:not(.wide-fade) .hero-welcome-title{font-size:clamp(39px,11.1vw,51px)!important}
/* Upright phones (Michael, 2026-10-24): the logo and the welcome words move together so the Kalaheo line sits
   just above the top of the front door frame; phone-modern.js measures the lift (--pm-lift). The 96741 line
   stays level with the bottom of the C. */
html.phone-fade:not(.wide-fade) .v-logo,html.phone-fade:not(.wide-fade) .hero-welcome-head>*{translate:0 var(--pm-lift,-15px)}