/* Modern contemporary look for wide screens (see modern.js). Loaded last; phones held upright are untouched. */
html.modern{--m-black:#0b0b0b;--m-char:#141414;--m-white:#f4f2ee;--m-muted:rgba(244,242,238,.62);--m-rule:rgba(244,242,238,.22)}
html.modern body{background:var(--m-black)}

/* ---- Labels: 01 —— THE HOME ---- */
.m-kicker{display:none}
html.modern .m-kicker{display:flex;align-items:center;gap:14px;margin:0 0 clamp(14px,2vh,22px)!important;color:var(--m-muted)!important;
  font:700 clamp(10px,.74vw,12px)/1 CompassSans,Arial,sans-serif!important;letter-spacing:.32em!important;text-transform:uppercase;text-shadow:none!important}
html.modern .m-kicker *{color:inherit!important;text-shadow:none!important}
html.modern .m-kicker .m-num{font:400 clamp(12px,.9vw,14px)/1 CompassSans,Arial,sans-serif;letter-spacing:.12em;color:var(--m-white)!important}
html.modern .m-kicker .m-line{display:block;width:clamp(30px,3vw,52px);height:1px;background:currentColor;opacity:.8}
html.modern .media-card .m-kicker{color:rgba(255,255,255,.85)!important;text-shadow:0 1px 2px rgba(0,0,0,.5)!important}

/* ---- Titles: clean, confident sans ---- */
html.modern body>section h2,html.modern #description .description-lead,html.modern #location .loc-title{
  font-family:CompassSans,Arial,sans-serif!important;font-weight:400!important;letter-spacing:-.035em!important;line-height:.98!important}

/* ---- 01 The Home: black, three-photo grid left, story right ---- */
html.modern #description{background:var(--m-black)!important}
html.modern #description .card-bg{display:none!important}
html.modern #description .m-grid{position:absolute;z-index:1;left:0;top:0;bottom:0;width:36%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:60% 1fr;gap:4px;background:var(--m-black)}
html.modern #description .m-grid figure{margin:0;overflow:hidden;min-height:0}
html.modern #description .m-grid .m-g1{grid-column:1/-1}
html.modern #description .m-grid img{width:100%;height:100%;object-fit:cover;display:block}
html.modern #description.is-current .m-grid img{animation:fadeSettle 1.8s cubic-bezier(.22,.61,.36,1) both}
html.modern #description.is-current .m-grid .m-g2 img{animation-delay:.1s}
html.modern #description.is-current .m-grid .m-g3 img{animation-delay:.2s}
html.modern #description .card-inner{position:relative;z-index:2;margin-left:36%!important;width:64%!important;min-height:var(--card-h,100vh)!important;height:auto!important;
  padding:calc(max(20px,env(safe-area-inset-top)) + 92px) calc(var(--pad) + var(--sbw,0px)) 40px clamp(48px,5vw,100px)!important;justify-content:flex-start!important;
  -webkit-mask-image:none!important;mask-image:none!important}
html.modern #description .description-grid{display:block!important}
html.modern #description .soft-lock-zone{position:static!important;transform:none!important;padding:0!important;margin:0 0 clamp(18px,2.8vh,30px)!important;width:auto!important}
html.modern #description .description-lead{font-size:clamp(38px,min(3.6vw,6.2vh),68px)!important;margin:0!important;max-width:18ch;color:var(--m-white)!important}
html.modern #description .description-copy{padding-top:clamp(18px,2.8vh,30px)!important;border-top:1px solid var(--m-rule);columns:auto!important}
html.modern #description .desc-full{display:grid!important;grid-template-columns:1fr 1fr;column-gap:clamp(32px,3vw,56px);align-items:start}
html.modern #description .description-copy,html.modern #description .description-copy p{font-size:var(--m-copy,16px)!important;line-height:1.66!important;color:rgba(244,242,238,.86)!important;text-shadow:none!important}
html.modern #description .description-copy p{margin:0 0 .85em!important}
html.modern #description .m-col>p:last-child{margin-bottom:0!important}
/* A narrow window: the words take the full width. */
html.modern #description.m-narrow .m-grid{display:none}
html.modern #description.m-narrow .card-inner{margin-left:0!important;width:100%!important;padding-left:var(--pad)!important}
@media(max-height:560px){
  html.modern #description .m-grid{width:30%}
  html.modern #description .card-inner{margin-left:30%!important;width:70%!important;padding:76px var(--pad) 24px 32px!important}
  html.modern #description .desc-full{display:block!important}
  html.modern #description .description-lead{font-size:26px!important}
}

/* ---- 02 The Film: black, words left, the film large on the right ---- */
html.modern #tour{background:var(--m-black)!important}
html.modern #tour::before{display:none!important}
html.modern #tour{--m-text:30%;--vid-w:min(calc(100vw - var(--m-text) - var(--pad) - var(--sbw,0px) - 24px),calc((var(--card-h,100vh) - 170px) * 16 / 9))}
html.modern #tour .soft-lock-zone{position:absolute!important;left:var(--pad)!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;width:calc(var(--m-text) - var(--pad) - 24px)!important;padding:0!important;margin:0!important}
html.modern #tour .soft-lock-intro{position:static!important;transform:none!important}
html.modern #tour h2{font-size:clamp(44px,min(4vw,7vh),76px)!important}
html.modern #tour .video-frame{position:absolute!important;left:auto!important;right:calc(var(--pad) + var(--sbw,0px))!important;top:calc(50% + 20px)!important;transform:translateY(-50%)!important;
  width:var(--vid-w)!important;height:auto!important;aspect-ratio:16/9!important;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.55)!important}
html.modern .m-copy{margin:clamp(18px,3vh,28px) 0 0!important;padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--m-rule);max-width:32ch;
  font:400 clamp(15px,min(1.1vw,1.9vh),18px)/1.65 CompassSans,Arial,sans-serif!important;color:var(--m-muted)!important;text-shadow:none!important}

/* ---- 03 Gallery: full screen, sharp, with a slim caption bar along the bottom ---- */
html.modern #gallery .reel-caption{left:0!important;right:0!important;bottom:0!important;top:auto!important;padding:clamp(18px,2.6vh,28px) calc(var(--pad) + 220px + var(--sbw,0px)) clamp(18px,2.6vh,28px) var(--pad)!important;
  background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.78) 38%)!important}
html.modern #gallery .reel-caption-inner{width:auto!important;max-width:min(980px,62vw)!important}
html.modern #gallery .reel-caption strong{font-family:CompassSans,Arial,sans-serif!important;font-size:clamp(26px,2.2vw,40px)!important;letter-spacing:-.02em!important;margin-bottom:8px!important;min-height:0!important}
html.modern #gallery .reel-caption span:not(.unit-d):not(.unit-mark){font-size:clamp(14px,1.1vw,17px)!important;min-height:0!important;color:rgba(244,242,238,.82)!important}
html.modern #gallery .reel-arrow,html.modern #gallery .reel-play{border-color:rgba(255,255,255,.7)!important;background:rgba(11,11,11,.35)!important}

/* ---- 05 The Neighborhood: a calm grey map, words on a solid charcoal panel ---- */
html.modern #location{background:var(--m-black)!important}
html.modern #location .map iframe{filter:grayscale(1) invert(.9) contrast(.88) brightness(.95)}
html.modern #location .soft-lock-zone{position:absolute!important;left:0!important;top:0!important;bottom:0!important;transform:none!important;width:34%!important;max-width:none!important;margin:0!important;border-radius:0!important;
  background:var(--m-char)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
  display:flex!important;flex-direction:column;justify-content:center;padding:0 clamp(36px,4vw,72px) 0 var(--pad)!important}
html.modern #location .soft-lock-intro{position:static!important;transform:none!important}
html.modern #location .loc-title,html.modern #location .loc-copy{color:var(--m-white)!important;text-shadow:none!important}
html.modern #location .loc-title{font-size:clamp(40px,min(3.6vw,6.4vh),68px)!important}
html.modern #location .loc-copy{margin-top:clamp(18px,3vh,28px)!important;padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--m-rule);font:400 clamp(15px,min(1.1vw,1.9vh),18px)/1.65 CompassSans,Arial,sans-serif!important;color:var(--m-muted)!important}
html.modern #location .m-pin{position:absolute;z-index:3;left:67%;top:calc(50% - 45px);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 0 14px rgba(255,255,255,.08);pointer-events:none}
html.modern #location.is-exploring .m-pin{display:none}
@media(max-height:560px){html.modern #location .m-pin{top:calc(50% - 65px)}}

/* ---- 06 / 07 Contact: charcoal; square portraits; a clean dark form ---- */
html.modern #request-info{background:var(--m-char)!important}
html.modern #request-info .card-bg{display:none!important}
html.modern #request-info .card-inner{-webkit-mask-image:none!important;mask-image:none!important}
html.wide-combo.modern #request-info .combo-left .agents{display:grid!important;grid-template-columns:1fr 1fr!important;gap:clamp(20px,2.4vw,40px)!important;align-items:start}
html.wide-combo.modern #request-info .combo-left .agent{display:block!important}
html.wide-combo.modern #request-info .combo-left .agent img{aspect-ratio:1/1!important;width:min(100%,27vh,300px)!important;height:auto!important;object-fit:cover!important;object-position:50% 30%!important;display:block;filter:grayscale(.15)}
html.wide-combo.modern #request-info .combo-left .agent h3{font-family:CompassSans,Arial,sans-serif!important;font-weight:400!important;font-size:clamp(20px,min(1.7vw,3vh),28px)!important;letter-spacing:-.01em;margin:clamp(12px,1.8vh,18px) 0 6px!important;color:var(--m-white)!important}
html.wide-combo.modern #request-info .combo-left .agent p{font-size:clamp(12px,min(.95vw,1.6vh),14.5px)!important;line-height:1.6!important;color:var(--m-muted)!important}
html.wide-combo.modern #request-info .combo-left .agent p a{color:var(--m-white)!important}
html.wide-combo.modern #request-info .combo-left .intro-copy,html.wide-combo.modern #request-info .combo-right .intro-copy{color:var(--m-muted)!important}
html.wide-combo.modern #request-info .form{background:transparent!important;padding:0!important;box-shadow:none!important;gap:clamp(14px,2.2vh,24px) 18px!important}
html.wide-combo.modern #request-info .form input,html.wide-combo.modern #request-info .form textarea{background:transparent!important;border:0!important;border-bottom:1px solid rgba(244,242,238,.4)!important;padding:10px 2px!important;color:var(--m-white)!important}
html.wide-combo.modern #request-info .form textarea{border:1px solid rgba(244,242,238,.3)!important;padding:12px!important}
html.wide-combo.modern #request-info .form input::placeholder,html.wide-combo.modern #request-info .form textarea::placeholder{color:rgba(244,242,238,.55)!important}
html.wide-combo.modern #request-info .form button{background:var(--m-white)!important;border-color:var(--m-white)!important;color:var(--m-black)!important}
html.wide-combo.modern #request-info .legal{border-top-color:var(--m-rule)!important}
html.wide-combo.modern #request-info .legal,html.wide-combo.modern #request-info .legal *{color:rgba(244,242,238,.5)!important}
html.wide-combo.modern #request-info .combo-left .agent img{width:min(100%,25vh,280px)!important}
@media(min-height:561px) and (max-height:760px){
  html.wide-combo.modern #request-info .combo-left .agent img{width:min(100%,20vh)!important}
  html.wide-combo.modern #request-info .form{gap:8px 14px!important;grid-template-rows:auto minmax(50px,1fr) auto!important}
  html.wide-combo.modern #request-info .form input{padding:6px 2px!important}
  html.wide-combo.modern #request-info .form textarea{min-height:50px!important;padding:8px!important}
}
/* (Google's own pin shows clearly on the grey map, so the extra marker is not needed.) */
html.modern #location .m-pin{display:none!important}

/* ---- Tones ---- */
/* Stone: a softer charcoal. */
html.modern.m-stone{--m-black:#2a2a28;--m-char:#323230}
/* Light: crisp architectural white-grey with charcoal type (modern gallery, not warm paper). */
html.modern.m-light{--m-black:#f1f1ef;--m-char:#e7e7e4;--m-white:#1c1c1b;--m-muted:rgba(28,28,27,.62);--m-rule:rgba(28,28,27,.18)}
html.modern.m-light #description .description-copy,html.modern.m-light #description .description-copy p{color:rgba(28,28,27,.84)!important}
html.modern.m-light #description .m-grid{background:var(--m-black)}
html.modern.m-light #tour .video-frame{box-shadow:0 30px 70px rgba(28,28,27,.22)!important}
html.modern.m-light #location .map iframe{filter:grayscale(1) contrast(.92) brightness(1.04)}
html.wide-combo.modern.m-light #request-info .form input,html.wide-combo.modern.m-light #request-info .form textarea{border-color:rgba(28,28,27,.35)!important;color:var(--m-white)!important}
html.wide-combo.modern.m-light #request-info .form input::placeholder,html.wide-combo.modern.m-light #request-info .form textarea::placeholder{color:rgba(28,28,27,.5)!important}
html.wide-combo.modern.m-light #request-info .legal,html.wide-combo.modern.m-light #request-info .legal *{color:rgba(28,28,27,.55)!important}
html.wide-combo.modern.m-light #request-info .compliance-logo img,html.wide-combo.modern.m-light #request-info .compass-signoff img{filter:invert(1) brightness(.15)!important}
html.modern.m-light #request-info .card-inner,html.modern.m-light #request-info .card-inner *{text-shadow:none!important}
html.modern.m-light body>section#request-info.content,html.modern.m-light body>section#request-info.content *,
html.modern.m-light body>section#description.content,html.modern.m-light body>section#description.content *{text-shadow:none!important}
html.modern.m-light body>section#request-info.content h2,html.modern.m-light body>section#request-info.content h3,html.modern.m-light body>section#description.content .description-lead{color:var(--m-white)!important}
html.modern.m-light body>section#request-info.content .intro-copy,html.modern.m-light body>section#request-info.content .agent p{color:var(--m-muted)!important}
html.modern.m-light body>section#request-info.content .agent p a,html.modern.m-light body>section#request-info.content .legal-address{color:var(--m-white)!important}
html.modern.m-light #tour h2,html.modern.m-light #tour .soft-lock-zone *{color:var(--m-white)!important;text-shadow:none!important}
html.modern.m-light #tour .m-kicker,html.modern.m-light #tour .m-kicker *,html.modern.m-light #tour .m-copy{color:var(--m-muted)!important}
html.modern.m-light #tour .m-kicker .m-num{color:var(--m-white)!important}
/* Header over light pages. */
html.modern.m-on-light .head{color:#1c1c1b!important}
html.modern.m-on-light .head .burger,html.modern.m-on-light .head .cta{color:#1c1c1b!important;border-color:#1c1c1b!important;filter:none!important}
html.modern.m-on-light .head .burger i{background:#1c1c1b!important}
/* The Home's photographs sit on the left, so its menu button stays white over them. */
html.modern.m-on-light.m-home .head .burger{color:#fff!important;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))!important}
html.modern.m-on-light.m-home .head .burger i{background:#fff!important}
/* Light tone: labels and small lines on the light pages in charcoal grey. */
html.modern.m-light #description .m-kicker,html.modern.m-light #description .m-kicker *,
html.modern.m-light #location .m-kicker,html.modern.m-light #location .m-kicker *,
html.modern.m-light #request-info .m-kicker,html.modern.m-light #request-info .m-kicker *{color:rgba(28,28,27,.58)!important;text-shadow:none!important}
html.modern.m-light #description .m-kicker .m-num,html.modern.m-light #location .m-kicker .m-num,html.modern.m-light #request-info .m-kicker .m-num{color:#1c1c1b!important}
html.modern.m-light body>section#request-info.content .agent .affiliation,html.modern.m-light body>section#request-info.content .plain-d,
html.modern.m-light body>section#request-info.content .intro-copy *{color:inherit!important}
html.modern.m-light #location .loc-title{color:#1c1c1b!important}
html.modern.m-light #location .loc-copy{color:rgba(28,28,27,.66)!important}
/* The Home photographs: the top image at its full 3:2; the two below share the remaining height. */
html.modern #description .m-grid{grid-template-rows:auto minmax(0,1fr)!important}
html.modern #description .m-grid .m-g1{aspect-ratio:3/2}
/* Primary bath: framed on the shower (rain head, controls and the tub's edge) rather than the centre. */
html.modern #description .m-grid .m-g3 img{object-position:68% 50%!important}
/* Light tone, revised: the warm off-white paper throughout (no grey panels), and the warm, muted map. */
html.modern.m-light{--m-black:#f3eee6;--m-char:#f3eee6;--m-white:#1f1d1a;--m-muted:rgba(31,29,26,.62);--m-rule:rgba(31,29,26,.18)}
html.modern.m-light #location .soft-lock-zone{background:#f3eee6!important}
html.modern.m-light #location .map iframe{filter:grayscale(.6) sepia(.22) saturate(.9) contrast(.96) brightness(1.03)!important}
/* Narrow windows: the photographs stay, a little narrower (replaces the earlier "hide" rule). */
html.modern #description.m-narrow .m-grid{display:grid!important;width:28%!important}
html.modern #description.m-narrow .card-inner{margin-left:28%!important;width:72%!important;padding-left:clamp(32px,4vw,64px)!important}
/* Very narrow: the story scrolls within the page; the photographs stay fixed on the left. */
html.modern #description.m-scroll{overflow-y:auto!important}
html.modern #description.m-scroll .m-grid{position:fixed!important;height:100vh}
/* The photo grid keeps the same layout at every window size (no narrowing). */
html.modern #description .m-grid{width:36%!important}
html.modern #description .card-inner{margin-left:36%!important;width:64%!important}
/* The Home photographs, as originally laid out: the large photo across the top (60% of the height),
   the two smaller ones side by side beneath, all filling the column. */
html.modern #description .m-grid{grid-template-rows:60% minmax(0,1fr)!important}
html.modern #description .m-grid .m-g1{aspect-ratio:auto!important}
/* Restored: the top photograph at its full 3:2; the two below share the remaining height. */
html.modern #description .m-grid{grid-template-rows:auto minmax(0,1fr)!important}
html.modern #description .m-grid .m-g1{aspect-ratio:3/2!important}
/* The Home: a larger photo column, so the 3:2 photo is bigger and the two below are wider. */
html.modern #description .m-grid{width:46%!important}
html.modern #description .card-inner{margin-left:46%!important;width:54%!important;padding-left:clamp(40px,4vw,80px)!important}
/* With the wider photo column, the story column is a little tighter so the full text still fits. */
html.modern #description .card-inner{padding-left:clamp(36px,3.2vw,60px)!important;padding-right:calc(clamp(40px,4vw,72px) + var(--sbw,0px))!important;padding-top:calc(max(20px,env(safe-area-inset-top)) + 84px)!important}
html.modern #description .description-lead{font-size:clamp(32px,min(2.9vw,5.2vh),56px)!important}
html.modern #description .soft-lock-zone{margin-bottom:clamp(14px,2.2vh,24px)!important}
html.modern #description .description-copy{padding-top:clamp(14px,2.2vh,24px)!important}
html.modern #description .desc-full{column-gap:clamp(24px,2.4vw,44px)!important}
/* Gallery: the frame itself does not zoom on arrival (the photographs already move), so the caption and
   controls sit perfectly still. */
html.modern #gallery.is-current .reel-stage{animation:none!important;scale:1!important}
/* Gallery bottom row, aligned: the caption on the left margin, the counter / pause / arrows on the right
   (ending under Request Info), all sitting on the same bottom line. */
html.modern #gallery{--m-row-bottom:clamp(32px,5vh,52px);--m-btn:48px}
html.modern #gallery .reel-caption{padding-bottom:var(--m-row-bottom)!important;padding-top:clamp(40px,7vh,72px)!important;transform:none!important}
html.modern #gallery .reel-caption-inner{display:block}
html.modern #gallery .reel-nav,html.modern #gallery .reel-play,html.modern #gallery .reel-hud{top:auto!important;bottom:var(--m-row-bottom)!important;transform:none!important;translate:none!important;margin:0!important}
html.modern #gallery .reel-nav{right:var(--ctl-right)!important;display:flex!important;gap:8px!important;height:var(--m-btn)!important}
html.modern #gallery .reel-arrow,html.modern #gallery .reel-play{width:var(--m-btn)!important;height:var(--m-btn)!important}
html.modern #gallery .reel-play{right:calc(var(--ctl-right) + 2 * var(--m-btn) + 8px + 12px)!important}
html.modern #gallery .reel-hud{right:calc(var(--ctl-right) + 3 * var(--m-btn) + 8px + 12px + 20px)!important;height:var(--m-btn)!important;display:flex!important;align-items:center!important}
/* Gallery bottom row raised; the progress line sits just beneath it, aligned to the same margins; and the
   shade behind the caption begins higher and fades in more gradually. */
html.modern #gallery{--m-row-bottom:clamp(64px,10vh,104px)}
html.modern #gallery .reel-progress{left:var(--pad)!important;right:var(--ctl-right)!important;bottom:calc(var(--m-row-bottom) - clamp(22px,3vh,30px))!important;top:auto!important}
html.modern #gallery .reel-caption{padding-top:clamp(140px,26vh,260px)!important;
  background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.08) 22%,rgba(11,11,11,.24) 45%,rgba(11,11,11,.46) 70%,rgba(11,11,11,.62) 100%)!important}
html.modern #gallery .reel-caption,html.modern #gallery .reel-progress{translate:none!important}
html.modern #gallery .reel-caption{bottom:0!important}
/* Gallery shade: as deep as before at the bottom, starting higher and easing in gradually. */
html.modern #gallery .reel-caption{background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.1) 18%,rgba(11,11,11,.3) 38%,rgba(11,11,11,.55) 60%,rgba(11,11,11,.74) 80%,rgba(11,11,11,.82) 100%)!important}
/* Gallery shade at half the original strength, still starting high and easing in. */
html.modern #gallery .reel-caption{background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.05) 18%,rgba(11,11,11,.15) 38%,rgba(11,11,11,.27) 60%,rgba(11,11,11,.36) 80%,rgba(11,11,11,.39) 100%)!important}
/* Gallery captions about 20% larger, running a little wider (up to just short of the counter). */
html.modern #gallery .reel-caption-inner{max-width:calc(100vw - var(--pad) - var(--ctl-right) - 300px)!important;width:calc(100vw - var(--pad) - var(--ctl-right) - 300px)!important}
html.modern #gallery .reel-caption strong{font-size:clamp(30px,2.65vw,48px)!important;margin-bottom:10px!important}
html.modern #gallery .reel-caption span:not(.unit-d):not(.unit-mark){font-size:clamp(16px,1.32vw,21px)!important;line-height:1.5!important}
/* Gallery shade behind the caption, stronger (still easing in from high up). */
html.modern #gallery .reel-caption{background:linear-gradient(180deg,rgba(11,11,11,0) 0%,rgba(11,11,11,.08) 18%,rgba(11,11,11,.24) 38%,rgba(11,11,11,.44) 58%,rgba(11,11,11,.6) 78%,rgba(11,11,11,.68) 100%)!important}
/* Enquiry fields filled solid, matching the Send Inquiry button, with light type. */
html.wide-combo.modern #request-info .form input,html.wide-combo.modern #request-info .form textarea{
  background:#1f1d1a!important;border:1px solid #1f1d1a!important;color:#f3eee6!important;padding:14px 16px!important;border-radius:0!important}
html.wide-combo.modern #request-info .form input::placeholder,html.wide-combo.modern #request-info .form textarea::placeholder{color:rgba(243,238,230,.6)!important}
html.wide-combo.modern #request-info .form input:focus,html.wide-combo.modern #request-info .form textarea:focus{outline:1px solid rgba(31,29,26,.5);outline-offset:2px}
@media(min-height:561px) and (max-height:760px){html.wide-combo.modern #request-info .form input{padding:9px 12px!important}html.wide-combo.modern #request-info .form textarea{padding:9px 12px!important}}
/* (Light-tone rules were turning the field text dark on the new black fill.) */
html.wide-combo.modern.m-light #request-info .form input,html.wide-combo.modern.m-light #request-info .form textarea{color:#f3eee6!important;border-color:#1f1d1a!important;-webkit-text-fill-color:#f3eee6}
html.wide-combo.modern.m-light #request-info .form input::placeholder,html.wide-combo.modern.m-light #request-info .form textarea::placeholder{color:rgba(243,238,230,.62)!important;-webkit-text-fill-color:rgba(243,238,230,.62)}
/* Enquiry fields, revised: off-white with a fine black outline and black type (no heavy fill). */
html.wide-combo.modern #request-info .form input,html.wide-combo.modern #request-info .form textarea,
html.wide-combo.modern.m-light #request-info .form input,html.wide-combo.modern.m-light #request-info .form textarea{
  background:transparent!important;border:1px solid #1f1d1a!important;color:#1f1d1a!important;-webkit-text-fill-color:#1f1d1a}
html.wide-combo.modern #request-info .form input::placeholder,html.wide-combo.modern #request-info .form textarea::placeholder,
html.wide-combo.modern.m-light #request-info .form input::placeholder,html.wide-combo.modern.m-light #request-info .form textarea::placeholder{color:rgba(31,29,26,.55)!important;-webkit-text-fill-color:rgba(31,29,26,.55)}
html.wide-combo.modern #request-info .form{margin-top:var(--m-form-shift,0px)!important}
/* The two contact intro lines in the site's sans (the display face appears nowhere else here). */
html.modern #request-info .intro-copy,html.modern #request-info .intro-copy *{font-family:CompassSans,Arial,sans-serif!important;letter-spacing:0!important;font-weight:400!important}
html.modern #request-info .intro-copy{font-size:clamp(16px,min(1.2vw,2vh),20px)!important;line-height:1.5!important}
/* Agent details: bold and in full charcoal so they read clearly; phone numbers and emails are links. */
html.wide-combo.modern #request-info .combo-left .agent p,html.wide-combo.modern #request-info .combo-left .agent p *,
html.modern.m-light body>section#request-info.content .agent p,html.modern.m-light body>section#request-info.content .agent p *{font-weight:700!important;color:#1f1d1a!important}
html.wide-combo.modern #request-info .combo-left .agent p a{text-decoration:underline!important;text-decoration-color:rgba(31,29,26,.35)!important;text-underline-offset:3px}
html.wide-combo.modern #request-info .combo-left .agent p a:hover{text-decoration-color:#1f1d1a!important}
/* Agent details in Compass Sans Medium (between regular and bold). */
html.wide-combo.modern #request-info .combo-left .agent p,html.wide-combo.modern #request-info .combo-left .agent p *,
html.modern.m-light body>section#request-info.content .agent p,html.modern.m-light body>section#request-info.content .agent p *{font-family:CompassSansMedium,CompassSans,Arial,sans-serif!important;font-weight:500!important}
/* Menu numbers: small and light, in the label style, just before each menu name. */
.m-navnum{display:none}
html.modern .nav a .m-navnum{display:inline-block;width:2.6em;margin-right:.2em;vertical-align:.95em;font:700 clamp(10px,.8vw,13px)/1 CompassSans,Arial,sans-serif!important;letter-spacing:.18em!important;opacity:.6;text-shadow:none!important}
/* Menu numbers hang in the margin, so every menu name (including the cover line) starts on one line. */
html.modern .nav a{position:relative}
html.modern .nav a .m-navnum{position:absolute;right:100%;top:.55em;width:auto;margin:0 16px 0 0;vertical-align:baseline;font-size:clamp(11px,.9vw,14px)!important;letter-spacing:.14em!important;opacity:.7}
/* Menu numbers a size up. */
html.modern .nav a .m-navnum{font-size:clamp(14px,1.25vw,19px)!important;top:.5em;margin-right:20px;opacity:.75}
/* Every page's main picture arrives like the film: a slow fade with a gentle rise, together with its words. */
@keyframes mArrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
html.modern.phone-fade #description.is-current .m-grid,
html.modern.phone-fade #gallery.is-current .reel-stage,
html.modern.phone-fade #tour-3d.is-current .matterport-frame,
html.modern.phone-fade #location.is-current .map{animation:mArrive 1.5s cubic-bezier(.33,0,.2,1) .35s backwards!important;scale:1!important}
html.modern.phone-fade #description.is-current .m-grid img{animation:none!important}
@media(prefers-reduced-motion:reduce){html.modern.phone-fade .is-current :is(.m-grid,.reel-stage,.matterport-frame,.map){animation:none!important}}
/* Full-screen pictures (gallery, 3D tour) must never fade through black: they arrive with the page's
   crossfade itself, and only their words and controls fade in slowly. */
html.modern.phone-fade #gallery.is-current .reel-stage{animation:none!important}
html.modern.phone-fade #tour-3d.is-current .matterport-frame{animation:mSettle 1.8s cubic-bezier(.22,.61,.36,1) both!important}
@keyframes mSettle{from{scale:1.035}to{scale:1}}
html.modern.phone-fade #gallery.is-current :is(.reel-caption,.reel-hud,.reel-play,.reel-nav,.reel-progress){animation:mArrive 1.5s cubic-bezier(.33,0,.2,1) .35s backwards!important}
html.modern #gallery,html.modern #tour-3d{background:#1f1d1a!important}
/* Gallery and 3D tour fade up from the off-white page (never through black), like the film. */
html.modern #gallery,html.modern #tour-3d,html.modern.m-light #gallery,html.modern.m-light #tour-3d{background:#f3eee6!important}
html.modern.phone-fade #gallery.is-current .reel-stage,
html.modern.phone-fade #tour-3d.is-current .matterport-frame{animation:mArrive 1.5s cubic-bezier(.33,0,.2,1) .35s backwards!important;scale:1!important}
html.modern #tour-3d .matterport-frame,html.modern #tour-3d iframe{background:#f3eee6!important}
/* Labels over photographs and film keep a white number. */
html.modern .media-card .m-kicker .m-num{color:#fff!important}
/* Menu: more breathing room between the items. */
html.modern .nav a{line-height:1.5!important}
/* Contact intro lines as sub-headlines: title case, larger, regular weight, charcoal. */
html.modern #request-info .intro-copy{font-size:clamp(20px,min(1.6vw,2.6vh),28px)!important;line-height:1.25!important;letter-spacing:-.01em!important;color:#1f1d1a!important;font-weight:400!important}
/* The Home: no rule between the headline and the story. */
html.modern #description .description-copy{border-top:0!important;padding-top:0!important}
/* No rules between titles and their text (film, location), matching The Home. The legal divider on the
   contact page stays. */
html.modern .m-copy,html.modern #location .loc-copy{border-top:0!important;padding-top:0!important}
/* Phones on their side, crossfade version: text cards stay full-screen layers (an older rule for the
   sliding version let them grow and scroll with the page); a long card scrolls within itself. */
@media(max-height:560px){
  html.modern.phone-fade body>section.fade-card.photo-card{position:fixed!important;inset:0!important;top:0!important;height:auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:auto}
  html.modern.phone-fade body>section.fade-card.photo-card .card-inner{min-height:100%!important}
  html.modern.phone-fade #description .m-grid{position:fixed!important;top:0!important;bottom:0!important;height:auto!important}
}
@media(max-height:560px){
  html.modern #description .desc-full{display:none!important}
  html.modern #description .desc-short{display:block!important}
  html.modern #description .description-copy,html.modern #description .description-copy p{font-size:14px!important;line-height:1.5!important}
}
/* Phones on their side: Presented By and Request Info on the off-white too, with charcoal type (as the
   combined desktop page and the upright phone). */
@media(max-height:560px){
  html.modern body>section#presented,html.modern body>section#request-info{background:#f3eee6!important}
  html.modern #presented .card-bg,html.modern #request-info .card-bg{display:none!important}
  html.modern body>section#presented.content,html.modern body>section#presented.content *,
  html.modern body>section#request-info.content,html.modern body>section#request-info.content *{color:#1f1d1a!important;text-shadow:none!important}
  html.modern body>section#presented.content .m-kicker,html.modern body>section#presented.content .m-kicker *,
  html.modern body>section#request-info.content .m-kicker,html.modern body>section#request-info.content .m-kicker *,
  html.modern body>section#request-info.content .legal,html.modern body>section#request-info.content .legal *{color:rgba(31,29,26,.6)!important}
  html.modern #presented .agent p,html.modern #presented .agent p *{font-family:CompassSansMedium,CompassSans,Arial,sans-serif!important;font-weight:500!important}
  html.modern #presented .agent img{aspect-ratio:1/1!important;height:auto!important;object-fit:cover;border:0!important}
  html.modern #request-info .form input,html.modern #request-info .form textarea{background:transparent!important;border:1px solid #1f1d1a!important;color:#1f1d1a!important;-webkit-text-fill-color:#1f1d1a}
  html.modern #request-info .form input::placeholder,html.modern #request-info .form textarea::placeholder{color:rgba(31,29,26,.55)!important;-webkit-text-fill-color:rgba(31,29,26,.55)}
  html.modern body>section#request-info.content .form button{background:#1f1d1a!important;border-color:#1f1d1a!important;color:#f3eee6!important}
  html.modern #presented .compass-signoff img,html.modern #request-info .compass-signoff img,html.modern #request-info .compliance-logo img{filter:invert(1) brightness(.15)!important}
  html.modern.m-on-light .head .burger,html.modern .head .cta{filter:none}
}
@media(max-height:560px){html.modern #presented .compass-signoff{display:none!important}}

/* Property film: our own player (the Vimeo frame is set aside). */
html.modern #tour .video-frame.m-film-on>iframe,html.modern #tour .video-frame.m-film-on>.video-resume{display:none!important}
html.modern #tour .m-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
html.modern #tour .m-film-surface{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;background:transparent;cursor:pointer;display:none}
html.modern #tour .m-film-started .m-film-surface{display:block}
html.modern #tour .m-film-started:not(.m-film-awake) .m-film-surface{cursor:none}
html.modern #tour .m-film-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.95);background:rgba(0,0,0,.18);cursor:pointer;padding:0;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .45s ease,transform .45s ease,background .3s ease}
html.modern #tour .m-film-play:hover{background:rgba(0,0,0,.32);transform:translate(-50%,-50%) scale(1.05)}
html.modern #tour .m-film-play span{width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
html.modern #tour .m-film-started.m-film-playing .m-film-play{opacity:0;pointer-events:none}
html.modern #tour .m-film-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0));opacity:0;pointer-events:none;transition:opacity .6s ease}
html.modern #tour .m-film-started.m-film-awake .m-film-bar{opacity:1;pointer-events:auto}
html.modern #tour .m-film-btn{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:pointer;opacity:.92}
html.modern #tour .m-film-btn:hover{opacity:1}
html.modern #tour .m-film-pause span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
html.modern #tour .m-film-pause.is-paused span{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}
html.modern #tour .m-film-progress{position:relative;flex:1;height:14px;cursor:pointer}
html.modern #tour .m-film-progress::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.3)}
html.modern #tour .m-film-progress i{position:absolute;left:0;right:0;top:6px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left}
html.modern #tour .m-film-sound{position:relative}
html.modern #tour .m-film-sound span{width:17px;height:15px;background:#fff;
  clip-path:polygon(0 32%,30% 32%,62% 0,62% 100%,30% 68%,0 68%,0 32%,75% 30%,80% 26%,86% 50%,80% 74%,75% 70%,79% 50%)}
html.modern #tour .m-film-sound.is-muted::after{content:'';position:absolute;width:22px;height:1.5px;background:#fff;transform:rotate(-45deg)}
html.modern #tour .m-film-full span{width:15px;height:15px;
  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}
html.modern #tour .video-frame:fullscreen{width:100vw!important;height:100vh!important;transform:none!important;top:0!important;right:0!important;aspect-ratio:auto!important}
html.modern #tour .video-frame:fullscreen .m-film{object-fit:contain}

/* 3D tour: no "Click to explore" label; Matterport's own play arrow is the cue. */
html.modern #tour-3d .card-explore::after{display:none!important}

/* Desktop: sections listed across the top left in place of the menu button; Request Info stays on the right. */
.m-topnav{display:none}
@media (min-width:1100px) and (min-height:561px){
  html.modern .m-topnav{display:flex;position:absolute;left:max(var(--pad),env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));height:39px;
    align-items:center;gap:clamp(11px,1vw,19px);white-space:nowrap;transition:opacity .6s ease}
  html.modern:not(.m-topnav-on) .m-topnav{opacity:0;pointer-events:none}
  /* On the Welcome page it fades on together with the COMPASS logo, the first time in. */
  html.modern.hero-intro .m-topnav{animation:heroTogether 1.5s ease-in-out .8s both}
  html.modern .m-topnav a{position:relative;display:flex;align-items:baseline;gap:6px;color:#fff;text-decoration:none;
    font:700 clamp(9px,.66vw,10px)/1 CompassSans,Arial,sans-serif;letter-spacing:clamp(.9px,.085vw,1.6px);text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.45);opacity:.8;transition:opacity .3s ease}
  html.modern .m-topnav a:hover,html.modern .m-topnav a.is-current{opacity:1}
  html.modern .m-topnav .m-topnum{font-weight:400;letter-spacing:.1em;opacity:.7}
  html.modern .m-topnav a::after{content:'';position:absolute;left:0;right:.16em;bottom:-8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
  html.modern .m-topnav a.is-current::after{transform:scaleX(1)}
  html.modern.m-on-light:not(.m-home) .m-topnav a{color:#1c1c1b;text-shadow:none}
  /* Over the Home photographs: a soft shade at the top keeps the white row readable. */
  html.modern.m-topnav-on.m-home .head::before{content:'';position:absolute;left:0;top:0;width:var(--m-grid-r,45.5%);height:150px;pointer-events:none;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 50%,rgba(0,0,0,0))}
  /* The row replaces the menu button. */
  html.modern.m-topnav-on .head .burger{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}

/* Overview photos: two full 3:2 frames stacked (see modern.js); the lower one crossfades. */
html.modern #description .xfade{position:relative}
html.modern #description .xfade img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
html.modern #description .xfade img.on{opacity:1}
html.modern #description .m-grid.m-two{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important}
html.modern #description .m-grid.m-two .m-g1,html.modern #description .m-grid.m-two .m-g2{grid-column:1!important;aspect-ratio:auto!important}
/* Kiahuna Overview: the name on one line; the bold headline in the story's own colour (a photo-card rule
   was turning it white); the attractions as a clean list with hanging bullets. */
html.modern #description .description-lead{white-space:nowrap!important;max-width:none!important}
html.modern #description .description-copy :is(div,p,strong,ul,li){color:inherit!important}
/* Overview: the full-colour palms photo fills the screen, white words sit high over it. */
html.modern body>section#description,html.modern.m-light body>section#description{background:linear-gradient(180deg,rgba(8,12,16,.62) 0%,rgba(8,12,16,.42) 45%,rgba(8,12,16,.30) 75%,rgba(8,12,16,.48) 100%),url(assets/overview/resort-oceanfront.jpg) center 40%/cover no-repeat!important}
html.modern #description .m-grid{display:none!important}
html.modern #description .card-inner,html.modern #description.m-narrow .card-inner{margin-left:0!important;width:min(100%,1180px)!important;padding:calc(max(20px,env(safe-area-inset-top)) + 64px) calc(var(--pad) + var(--sbw,0px)) 32px clamp(32px,6vw,120px)!important}
html.modern #description .description-lead,html.modern.m-light body>section#description.content .description-lead{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.35)!important}
html.modern #description .description-copy,html.modern #description .description-copy p,html.modern #description .description-copy li,
html.modern.m-light #description .description-copy,html.modern.m-light #description .description-copy p,html.modern.m-light #description .description-copy li{color:rgba(255,255,255,.94)!important;text-shadow:0 1px 10px rgba(0,0,0,.45)!important}
html.modern #description .description-copy{border-top-color:rgba(255,255,255,.4)!important}
html.modern.m-light #description .m-kicker,html.modern.m-light #description .m-kicker *,html.modern.m-light #description .m-kicker .m-num{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.4)!important}
html.modern.m-topnav-on.m-home .head::before{display:none!important}

/* Kiahuna desktop: a larger, fully white top menu (with a slightly stronger soft shadow over the video), and
   Request Info scaled up by the same amount, its centre level with the menu row. */
@media (min-width:1100px) and (min-height:561px){
  html.modern .m-topnav{height:clamp(42px,3.2vw,48px)}
  html.modern .m-topnav a{font-size:clamp(9px,.8vw,13px);letter-spacing:clamp(1.1px,.1vw,1.9px);opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.5)}
  html.modern .m-topnav .m-topnum{font-size:max(10px,.92em);opacity:.75}
  html.modern .m-topnav a::after{bottom:-9px}
  html.modern.m-on-light:not(.m-home) .m-topnav a{text-shadow:none}
  html.modern .head .cta{height:clamp(42px,3.2vw,48px);padding:0 clamp(15px,1.15vw,19px);font-size:clamp(10.5px,.8vw,12.5px)}
}

/* Kiahuna desktop Welcome: the SCROLL word sits on the same row as the menu and Request Info (its centre level
   with theirs), set like the menu items, with the arrow following below it. */
@media (min-height:561px){
  html.wide-fade{--cue-row:39px;--cue-fs:11px;--cue-ls:.22em}
  html.wide-fade.phone-stack .head .explore-cue{top:calc(max(20px,env(safe-area-inset-top)) + var(--cue-row)/2 - var(--cue-fs)/2)!important}
  html.wide-fade.phone-stack .head .explore-cue span{font-size:var(--cue-fs)!important;line-height:1;font-weight:700;letter-spacing:var(--cue-ls)!important}
}
@media (min-width:1100px) and (min-height:561px){
  html.wide-fade.modern{--cue-row:clamp(42px,3.2vw,48px);--cue-fs:clamp(9px,.8vw,13px);--cue-ls:clamp(1.1px,.1vw,1.9px)}
}

/* Kiahuna: the Overview fades up from the off-white page like the Video, Gallery and Agent pages. The page
   itself is off-white; the palms photo (with its shade) sits on a layer above it and fades in each time the
   Overview arrives, with the same timing as the other pages' pictures and words. */
@keyframes mPhotoIn{from{opacity:0}to{opacity:1}}
html.modern body>section#description,html.modern.m-light body>section#description{background:#f3eee6!important}
html.modern body>section#description::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,16,.62) 0%,rgba(8,12,16,.42) 45%,rgba(8,12,16,.30) 75%,rgba(8,12,16,.48) 100%),url(assets/overview/resort-oceanfront.jpg) center 40%/cover no-repeat}
html.modern.phone-fade body>section#description.is-current::before{animation:mPhotoIn 1.5s cubic-bezier(.33,0,.2,1) .35s backwards}
@media(prefers-reduced-motion:reduce){html.modern.phone-fade body>section#description.is-current::before{animation:none}}

/* ==== Kiahuna desktop Overview layout: two side-by-side columns (2026-10-14) ====
   index.html now holds the story in its own two columns (.m-col-main and .m-col-side), so modern.js leaves it
   alone. Left: the bold line and the description as short paragraphs. Right: the ownership paragraph, the
   nearby-attractions list, and the MLS line pushed to the bottom so it ends level with the left column's last
   line. The type size is still set by the fitter in modern.js so the whole Overview fits on one screen. */
html.modern #description .description-copy{max-width:min(100%,1040px)!important}
html.modern #description .desc-full{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(36px,3.5vw,64px);align-items:stretch;max-width:none}
html.modern #description .desc-full .m-col-side{display:flex;flex-direction:column}
html.modern #description .desc-full .desc-list-intro{margin:0 0 .6em!important}
html.modern #description .desc-full .desc-list{margin:0 0 .85em!important}
html.modern #description .desc-full .desc-mls{margin:auto 0 0!important}
/* The Overview's words start on the same left edge as WELCOME in the menu (like every other section's
   heading) and sit centred in the space below the menu, so there is room above the kicker and below the
   columns. */
html.modern #description .card-inner,html.modern #description.m-narrow .card-inner{padding-left:max(var(--pad),env(safe-area-inset-left))!important;
  padding-top:calc(max(20px,env(safe-area-inset-top)) + 76px)!important;padding-bottom:32px!important;justify-content:center!important}
/* ==== end Overview two-column block ==== */
/* Gallery buttons (pause, previous, next) lighter: a see-through fill with the white outline, on desktop
   and phones; a little darker on hover. */
#gallery .reel-arrow,#gallery .reel-play,html.modern #gallery .reel-arrow,html.modern #gallery .reel-play{background:rgba(11,11,11,.18)!important}
#gallery .reel-arrow:hover,#gallery .reel-play:hover,html.modern #gallery .reel-arrow:hover,html.modern #gallery .reel-play:hover{background:rgba(11,11,11,.4)!important}
/* Interactive Google map (gmap.js): fills the map frame and takes the same muted colouring as the embed did. */
#location .map .gmap{position:absolute;inset:0}
html.modern #location .map .gmap{filter:grayscale(1) invert(.9) contrast(.88) brightness(.95)}
html.modern.m-light #location .map .gmap{filter:grayscale(.6) sepia(.22) saturate(.9) contrast(.96) brightness(1.03)!important}