/* ==========================================================================
   SHAPED JT — "Horizon": a day by the sea.
   Loads after style.css (the component skeleton) and re-decides the look:
   live sky-and-sea scenes (sea.js), sunlit paper between them, glass, arches and one italic word per headline.
   Sections: 1 tokens + base · 2 scenes · 3 heroes · 4 portals · 5 journey · 6 paper · 7 header/footer · 8 utilities
   ========================================================================== */

/* ---------- 1. tokens + base ---------- */
:root {
  --paper: #FBF7F1; --cream: #FFF8EE; --shell: #F8F1E7; --linen: #F3EADC; --porcelain: #FFFCF8; --sand: #E8D9C3;
  --coral: #A36538; --night: #241710; --dusk: #3A2A20; --ink: #2B1C13;
  --glass: rgba(255, 248, 238, .12); --glass-line: rgba(255, 248, 238, .34); --glass-dark: rgba(30, 20, 14, .46);
  --rise: clamp(34px, 6.5vw, 104px);
  --hero-shadow: 0 2px 34px rgba(30, 20, 14, .4);
}
html { scrollbar-color: #C9B79F transparent; }
body { background: var(--paper); }
body::after { display: none; }
::selection { background: var(--coral); color: #fff; }

/* ---------- 2. scenes: a live sky and sea behind the words ---------- */
.scene {
  --h: 56%;
  --g0: #7a5e4f; --g1: #a98570; --g2: #cfae98; --g3: #dcc0ac; --g4: #9a7a66; --g5: #5a4132;
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream);
  background: linear-gradient(180deg, var(--g0) 0%, var(--g1) calc(var(--h) * .5), var(--g2) calc(var(--h) - 3%), var(--g3) var(--h), var(--g4) calc(var(--h) + 9%), var(--g5) 100%);
}
.scene:has([data-mood="dawn"])     { --g0: #a08c7c; --g1: #c4b19f; --g2: #e6d8c8; --g3: #f1e8dc; --g4: #b5a38f; --g5: #8a7765; }
.scene:has([data-mood="tropical"]) { --g0: #a49380; --g1: #c9baa6; --g2: #e7ddcd; --g3: #f3ede2; --g4: #b9a894; --g5: #8f7c69; }
.scene:has([data-mood="noon"])     { --g0: #b3a390; --g1: #d0c3b1; --g2: #eae2d5; --g3: #f5f0e7; --g4: #c9bdac; --g5: #a8998a; }
.scene:has([data-mood="sunset"])   { --g0: #8a6f5f; --g1: #b58f7a; --g2: #d7b7a1; --g3: #e6cdb9; --g4: #a68470; --g5: #5f4535; }
.scene:has([data-mood="blue"])     { --g0: #2a1e18; --g1: #4b3a2f; --g2: #7d6555; --g3: #a68e7b; --g4: #5a4738; --g5: #2c211b; }
.scene:has([data-mood="night"])    { --g0: #120c09; --g1: #241812; --g2: #46362b; --g3: #5a483c; --g4: #2d2119; --g5: #150e0b; }
.scene canvas[data-sea] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: 0; transition: opacity 1.4s var(--ease); }
.scene canvas[data-sea].is-live { opacity: 1; }
.scene .motes { z-index: -2; }
.scene__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 24, 17, .36) 0%, rgba(36, 24, 17, 0) 30%, rgba(36, 24, 17, 0) 50%, rgba(30, 20, 14, .58) 100%); }
.scene__veil--soft { background: linear-gradient(180deg, rgba(36, 24, 17, .18), rgba(36, 24, 17, 0) 40%, rgba(30, 20, 14, .3)); }
.scene :focus-visible { outline-color: var(--sun); }
.scene .eyebrow { color: rgba(255, 248, 238, .94); text-shadow: 0 1px 14px rgba(30, 20, 14, .55); }
.scene .display, .scene .h2 { color: var(--cream); text-shadow: var(--hero-shadow); }
.scene .display em, .scene .h2 em, .scene h3 em { color: #EADCC8; }
.scene .lede, .scene p { color: rgba(255, 248, 238, .9); }
.scene .lede { text-shadow: 0 1px 22px rgba(30, 20, 14, .45); }

/* paper rises over a scene like an arch: a wide soft shoulder */
.rise { position: relative; z-index: 3; margin-top: calc(var(--rise) * -1); background: var(--paper);
  border-radius: 50% 50% 0 0 / var(--rise) var(--rise) 0 0; box-shadow: 0 -34px 60px -44px rgba(30, 20, 14, .55); }
.rise--linen { background: var(--linen); }

/* frosted glass over a scene */
.glass { background: var(--glass-dark); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); color: var(--cream);
  box-shadow: 0 30px 70px -40px rgba(30, 20, 14, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }

/* buttons on scenes */
.btn--glass { --bg: rgba(255, 248, 238, .14); --fg: var(--cream); --glow: #DCCBB4;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .5), 0 18px 40px -24px rgba(30, 20, 14, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass .btn__icon { background: rgba(255, 248, 238, .18); }

/* ---------- 3. heroes ---------- */
.scene-hero { min-height: calc(max(100svh, 720px) + var(--hero-extra, 0px)); display: grid; align-items: end; padding: 150px 0 clamp(64px, 11svh, 128px); text-align: center; }
.scene-hero__copy { max-width: 940px; }
.scene-hero__copy > * + * { margin-top: 24px; }
.scene-hero .lede { margin-inline: auto; max-width: 36em; }
.scene-hero .btn-row { justify-content: center; }
.scene-hero .display { font-size: clamp(2.9rem, 6.1vw, 6.3rem); line-height: .96; }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 38px; padding-top: 26px; margin-top: 34px; border-top: 1px solid rgba(248, 240, 226, .28); }
.hero__proof li { display: flex; align-items: baseline; gap: 10px; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 248, 238, .86); }
.hero__proof strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; letter-spacing: 0; color: var(--cream); }
.scene-hero__cue { position: absolute; z-index: 3; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 248, 238, .78); }
.scene-hero__cue span { width: 1px; height: 40px; background: linear-gradient(rgba(255, 248, 238, .9), transparent); transform-origin: top; animation: cue 2.6s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 899px) {
  .scene-hero { padding-top: 120px; }
  .scene-hero .lede { font-size: 1rem; }
  .scene-hero .hero__proof { display: none; }
  .scene-hero { padding-bottom: 46px; }
  .scene-hero__cue { display: none; }
}

/* inner pages: the page hero becomes a scene, with the real photograph standing in an arch at the shore */
.page-hero.scene { min-height: min(88svh, 900px); display: grid; align-items: end; padding: 170px 0 clamp(60px, 9vw, 110px); }
.page-hero.scene .page-hero__grid { align-items: end; }
.page-hero.scene .breadcrumbs, .page-hero.scene .breadcrumbs a { color: rgba(255, 248, 238, .78); }
.page-hero.scene .breadcrumbs li + li::before { color: rgba(255, 248, 238, .5); }
.page-hero.scene .display { color: var(--cream); }
.page-hero.scene .lede { color: rgba(255, 248, 238, .92); }
.page-hero.scene .hero__proof { justify-content: flex-start; }
.page-hero.scene .btn-row { justify-content: flex-start; }
.page-hero.scene .page-hero__media { box-shadow: 0 50px 90px -46px rgba(30, 20, 14, .8), 0 0 0 1px rgba(255, 248, 238, .5), 0 0 0 10px rgba(255, 248, 238, .12); }
.page-hero.scene .page-hero__copy .btn--ghost { --fg: var(--cream); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .55); }
.page-hero.scene .page-hero__copy .btn--ghost::before { background: radial-gradient(closest-side, rgba(250, 244, 234, .5), rgba(250, 244, 234, .16) 60%, transparent); }
.page-hero.scene .page-hero__copy .btn--ghost .btn__icon { background: rgba(255, 248, 238, .16); }
.page-hero.scene .glow-orb, .page-hero.scene .dapple, .page-hero.scene .motes--off { display: none; }
.page-hero.scene.sunlit::before { display: none; }
.page-hero--center.scene { text-align: center; }

/* ---------- 4. portals: three arched windows onto three seas ---------- */
.portals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 54px); align-items: end; }
.portal { position: relative; display: block; isolation: isolate; overflow: hidden; color: var(--cream); aspect-ratio: 3 / 4.5;
  border-radius: 999px 999px clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px);
  box-shadow: 0 50px 80px -46px rgba(30, 20, 14, .8); transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out); }
.portal:nth-child(2) { aspect-ratio: 3 / 5; }
.portal canvas[data-sea] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.portal { --h: 58%; background: linear-gradient(180deg, var(--g0) 0%, var(--g1) 30%, var(--g2) 52%, var(--g3) var(--h), var(--g4) 70%, var(--g5) 100%); }
.portal:has([data-mood="tropical"]) { --g0: #a49380; --g1: #c9baa6; --g2: #e7ddcd; --g3: #f3ede2; --g4: #b9a894; --g5: #8f7c69; }
.portal:has([data-mood="blue"])     { --g0: #2a1e18; --g1: #4b3a2f; --g2: #7d6555; --g3: #a68e7b; --g4: #5a4738; --g5: #2c211b; }
.portal:has([data-mood="dusk"])     { --g0: #7a5e4f; --g1: #a98570; --g2: #cfae98; --g3: #dcc0ac; --g4: #9a7a66; --g5: #5a4132; }
.portal:has([data-mood="night"])    { --g0: #120c09; --g1: #241812; --g2: #46362b; --g3: #5a483c; --g4: #2d2119; --g5: #150e0b; }
.portal:has([data-mood="sunset"])   { --g0: #8a6f5f; --g1: #b58f7a; --g2: #d7b7a1; --g3: #e6cdb9; --g4: #a68470; --g5: #5f4535; }
.portal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 20, 14, .12) 0%, rgba(30, 20, 14, 0) 28%, rgba(30, 20, 14, .5) 62%, rgba(30, 20, 14, .84) 100%); }
.portal__no { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: #EFE3D0; text-shadow: 0 1px 16px rgba(30, 20, 14, .6); }
.portal__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px, 2.6vw, 38px) clamp(26px, 3vw, 42px); text-align: center; }
.portal__title { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.02; }
.portal__text { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.6; color: rgba(255, 248, 238, .86); }
.portal__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px; border-radius: 999px; font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  background: rgba(255, 248, 238, .14); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .5s, gap .5s var(--ease-out); }
.portal__go .i { width: 15px; height: 15px; }
@media (hover: hover) {
  .portal:hover { transform: translateY(-10px); box-shadow: 0 70px 90px -46px rgba(30, 20, 14, .85); }
  .portal:hover .portal__go { background: rgba(255, 248, 238, .28); gap: 16px; }
}
.portal:focus-visible { outline-offset: 5px; }
@media (max-width: 899px) {
  .portals { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 26px; }
  .portal, .portal:nth-child(2) { aspect-ratio: 4 / 5; }
}

/* ---------- 5. journey: seven phases, one day ---------- */
.journey { position: relative; height: calc(var(--steps, 7) * 64svh + 100svh); background: #3a2b22; }
.journey__pin { --h: 56%; --g0: #a08c7c; --g1: #c4b19f; --g2: #e6d8c8; --g3: #f1e8dc; --g4: #b5a38f; --g5: #8a7765;
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; color: var(--cream);
  display: grid; grid-template-rows: auto 1fr auto; padding: clamp(96px, 14svh, 132px) 0 clamp(22px, 4svh, 40px);
  background: linear-gradient(180deg, var(--g0) 0%, var(--g1) calc(var(--h) * .5), var(--g2) calc(var(--h) - 3%), var(--g3) var(--h), var(--g4) calc(var(--h) + 9%), var(--g5) 100%); }
.journey__pin canvas[data-sea] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: 0; transition: opacity 1.4s var(--ease); }
.journey__pin canvas[data-sea].is-live { opacity: 1; }
.journey__head .eyebrow { color: rgba(255, 248, 238, .94); text-shadow: 0 1px 14px rgba(30, 20, 14, .5); }
.journey__head .h2 { color: var(--cream); text-shadow: 0 2px 30px rgba(30, 20, 14, .6), 0 0 2px rgba(30, 20, 14, .35); font-size: clamp(2.2rem, 4.6vw, 4.4rem); margin-top: 14px; }
.journey__head .h2 em { color: #EADCC8; }
.journey__stage { position: relative; display: grid; align-items: end; }
.journey__panel { display: grid; width: min(100%, 560px); padding: clamp(28px, 3vw, 42px) clamp(26px, 3.2vw, 46px) clamp(26px, 2.8vw, 38px);
  background: linear-gradient(180deg, rgba(43, 28, 19, .64), rgba(43, 28, 19, .52)); border-color: rgba(255, 248, 238, .3);
  -webkit-backdrop-filter: blur(26px) saturate(1.05); backdrop-filter: blur(26px) saturate(1.05); box-shadow: 0 40px 80px -44px rgba(20, 12, 8, .8), inset 0 1px 0 rgba(255, 255, 255, .14); }
.journey__panel { transition: height .7s var(--ease-out); }
.journey__phase { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .7s var(--ease), transform .9s var(--ease-out), visibility 0s .7s; }
.journey__phase.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .8s var(--ease) .1s, transform 1s var(--ease-out) .1s, visibility 0s; }
.journey__when { display: flex; align-items: center; gap: 14px; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #E9DCCB; }
.journey__when span:first-child { color: #FFF8EE; }
.journey__when span + span::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 14px; vertical-align: .3em; background: rgba(255, 248, 238, .5); }
.journey__phase h3 { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 3.7vw, 3.5rem); line-height: 1; letter-spacing: -.012em; color: #FFF8EE; text-wrap: balance; }
.journey__phase .journey__lede { margin-top: 16px; max-width: 32em; font-size: clamp(1rem, .35vw + .94rem, 1.1rem); line-height: 1.65; color: rgba(255, 250, 244, .96); }
.journey__gets { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.journey__gets li { padding: 8px 15px; border-radius: 999px; font-size: .74rem; font-weight: 500; letter-spacing: .04em; line-height: 1.3; color: rgba(255, 250, 244, .96); background: rgba(255, 248, 238, .12); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .32); }
.journey__phase .link-arrow { margin-top: 20px; color: #EFE3D3; }
.journey__no { position: absolute; right: clamp(4px, 2vw, 30px); bottom: -.18em; font-family: var(--serif); font-weight: 300; font-size: clamp(9rem, 26vw, 24rem); line-height: 1; color: rgba(255, 248, 238, .12); pointer-events: none; -webkit-user-select: none; user-select: none; font-variant-numeric: lining-nums; }
.journey__dots { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 7), 1fr); gap: 4px; padding-top: 26px; margin: 0; list-style: none; }
.journey__dots::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: rgba(255, 248, 238, .42); }
.journey__dots::after { content: ""; position: absolute; left: 0; top: 8px; height: 1px; width: 100%; background: #EADCC8; transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(234, 220, 200, .8); }
.journey__dot { position: relative; text-align: left; padding-top: 16px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 250, 244, .8); text-shadow: 0 1px 12px rgba(30, 20, 14, .6); transition: color .5s; cursor: pointer; }
.journey__dot::before { content: ""; position: absolute; left: 0; top: -20px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 248, 238, .45); box-shadow: 0 0 0 4px rgba(255, 248, 238, .1); transition: transform .5s var(--ease-spring), background .5s, box-shadow .5s; }
.journey__dot.is-on { color: #FFF8EE; }
.journey__dot.is-on::before { background: #EADCC8; transform: scale(1.55); box-shadow: 0 0 0 5px rgba(234, 220, 200, .22), 0 0 18px rgba(234, 220, 200, .9); }
.journey__dot.is-past::before { background: #EADCC8; }
@media (max-width: 899px) {
  .journey { height: calc(var(--steps, 7) * 58svh + 100svh); }
  .journey__dot span { display: none; }
  .journey__dot.is-on span { display: inline; position: absolute; left: 0; top: 10px; white-space: nowrap; }
  .journey__panel { width: 100%; padding: 24px 22px 24px; }
  .journey__phase h3 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin-top: 12px; }
  .journey__phase .journey__lede { margin-top: 12px; font-size: 1rem; line-height: 1.6; }
  .journey__gets { gap: 6px; margin-top: 16px; } .journey__gets li { padding: 6px 11px; font-size: .68rem; }
  .journey__gets li:nth-child(n+3) { display: none; }
  .journey__when { font-size: .66rem; gap: 10px; } .journey__when span + span::before { width: 18px; margin-right: 10px; }
  .journey__no { font-size: clamp(7rem, 34vw, 12rem); top: 4%; bottom: auto; }
}
.no-js .journey, .no-motion .journey { height: auto; }
.no-js .journey__pin, .no-motion .journey__pin { position: relative; height: auto; }
.no-js .journey__phase, .no-motion .journey__phase { position: relative; opacity: 1; visibility: visible; transform: none; grid-area: auto; margin-bottom: 26px; }
.no-js .journey__panel, .no-motion .journey__panel { display: block; }

/* ---------- 6. paper: sunlit sections between the scenes ---------- */
.section { padding-block: clamp(92px, 11.5vw, 184px); }
.section--tight { padding-block: clamp(64px, 7.5vw, 116px); }
.section--linen { background: var(--linen); }
.section--porcelain { background: var(--porcelain); }
.section--blush { background: linear-gradient(180deg, var(--paper), #EFE6DA 46%, var(--paper)); }
.section--dark { background: radial-gradient(120% 80% at 50% -10%, #5e4331 0%, #3b2719 46%, var(--night) 100%); color: #EADFD0; }
.section--dark .h2, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark em { color: #EADCC8; }
.section--dark .lede, .section--dark p { color: rgba(255, 248, 238, .8); }
.section--dark .eyebrow { color: #DCCBB4; }
.section-head .lede { margin-inline: auto; }
.section-head:not(.center) .lede { margin-inline: 0; }
.eyebrow { letter-spacing: .34em; }

/* soft cards */
.audience__card, .card, .form-card, .contact-card { border-radius: var(--radius-lg); }
.audience__card { background: linear-gradient(180deg, #FFFFFF, #FFF8F0); box-shadow: 0 40px 70px -46px rgba(120, 70, 40, .5), 0 0 0 1px rgba(81, 51, 29, .07); }
.pillar { background: linear-gradient(180deg, rgba(255, 248, 238, .1), rgba(255, 248, 238, .04)); border: 1px solid rgba(255, 248, 238, .2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
.pillar__num { color: #DCCBB4; }

/* ---------- 7. header, menu, quote bands and footer ---------- */
.announce { background: linear-gradient(90deg, #2f1f15, #4a3222 50%, #2f1f15); color: #EFE4D6; }
.announce a { color: #DCCBB4; }
.over-scene .site-header { color: var(--cream) !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.over-scene .site-header::after { opacity: 0 !important; }
.over-scene .site-header .brand__word, .over-scene .site-header .nav__link { text-shadow: 0 1px 18px rgba(30, 20, 14, .42); }
.over-scene .site-header .brand__mark { --lotus: #E9DCCB; }
.over-scene .site-header .btn--primary { --bg: rgba(255, 248, 238, .14); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.is-scrolled:not(.over-scene) .site-header { background: rgba(251, 247, 241, .8); }
.menu { background: rgba(251, 247, 241, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mobile-menu { background: radial-gradient(120% 70% at 50% 0%, #5e4331 0%, #3b2719 46%, #1d130d 100%); }
.mobile-menu__sky { height: 90px; margin: 0 calc(var(--gutter) * -1) -40px; background: linear-gradient(180deg, transparent, rgba(226, 212, 192, .22)); border-radius: 50% 50% 0 0 / 60px 60px 0 0; }

.sea-band { min-height: clamp(400px, 66svh, 680px); display: grid; align-items: center; text-align: center; padding: clamp(84px, 12vw, 160px) 0; }
.sea-band__quote { margin-inline: auto; }
.sea-band__quote p { max-width: 17em; margin-inline: auto; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.8vw, 4.6rem); line-height: 1.08; color: var(--cream); text-shadow: 0 2px 40px rgba(30, 20, 14, .5); text-wrap: balance; }
.sea-band__quote em { font-style: normal; color: #EADCC8; }
.sea-band__quote cite { display: block; margin-top: 26px; font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 248, 238, .85); }

.site-footer { position: relative; --h: 66%; padding: clamp(150px, 17vw, 290px) 0 34px; background: #150e0b; color: rgba(236, 226, 212, .8); margin-top: 0; }
.site-footer.scene { --g0: #120c09; --g1: #241812; --g2: #46362b; --g3: #5a483c; --g4: #2d2119; --g5: #150e0b; }
.scene__veil--foot { background: linear-gradient(180deg, rgba(30, 20, 14, .18) 0%, rgba(30, 20, 14, 0) 28%, rgba(30, 20, 14, .48) 60%, rgba(30, 20, 14, .86) 100%); }
.footer__lead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 30px 48px; padding-bottom: clamp(80px, 11vw, 170px); }
.footer__tag { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.2vw, 6.2rem); line-height: .98; color: var(--cream); text-shadow: 0 2px 44px rgba(30, 20, 14, .6); }
.footer__tag em { color: #EADCC8; }
.footer__body { position: relative; }
.footer__top { border-bottom-color: rgba(236, 232, 250, .16); }
.footer__title { color: #DCCBB4; }
.footer__cols a:hover { color: var(--cream); }
.footer__mid, .footer__contact { border-color: rgba(236, 232, 250, .16); }
.footer__contact .i { color: #DCCBB4; }
@media (max-width: 899px) { .footer__brand { display: none; } .footer__lead { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   SAND — write your dream
   ========================================================================== */
.sandbox { position: relative; min-height: min(100svh, 880px); display: grid; align-items: center; overflow: hidden; color: var(--cream); background: #c9a985; }
.sandbox .sand { position: absolute; inset: 0; margin: 0; }
.sand > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.sand__gl { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.sand.is-drawing .sand__gl { touch-action: none; }
.sandbox__inner { position: relative; z-index: 2; padding-block: clamp(70px, 9vw, 130px); pointer-events: none; }
.sandbox__panel { pointer-events: auto; max-width: 500px; padding: clamp(26px, 3vw, 44px); border-radius: 30px 30px 30px 6px; background: rgba(43, 28, 19, .46); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); box-shadow: inset 0 0 0 1px rgba(248, 240, 226, .22), 0 40px 90px -40px rgba(0, 0, 0, .6); }
.sandbox__panel > * + * { margin-top: 18px; }
.sandbox .eyebrow { color: #E8DAC6; }
.sandbox .h2 { color: #FFF8EE; font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.sandbox .h2 em { color: #E8DAC6; }
.sandbox .lede { color: rgba(255, 248, 238, .9); font-size: 1rem; }
.sandbox__write { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sandbox__write input { flex: 1 1 220px; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(248, 240, 226, .42); background: rgba(255, 248, 238, .12); color: #FFF8EE; font-size: .95rem; outline: none; transition: border-color .3s, background .3s; }
.sandbox__write input::placeholder { color: rgba(255, 248, 238, .62); }
.sandbox__write input:focus { border-color: #EFE3D0; background: rgba(255, 248, 238, .2); }
.sandbox__draw, .sandbox__again { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #E8DAC6; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(248, 221, 187, .4); padding: 10px 2px; min-height: 44px; }
.sandbox__draw[aria-pressed="true"] { color: #fff; text-decoration-color: #fff; }
.sandbox__dream { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: #EFE3D0; }
.sandbox .form .field input, .sandbox .form .field select { color: #FFF8EE; background: rgba(255, 248, 238, .1); box-shadow: inset 0 0 0 1px rgba(248, 240, 226, .3); }
.sandbox .form .field label { color: rgba(255, 248, 238, .72); }
.sandbox .form .check { color: rgba(255, 248, 238, .82); }
.sandbox .form .check a { color: #E8DAC6; }
.sandbox .form-success h3 { color: #FFF8EE; }
.sandbox .form-success p { color: rgba(255, 248, 238, .86); }
@media (max-width: 899px) {
  .sandbox { display: flex; flex-direction: column-reverse; min-height: 0; background: var(--night); }
  .sandbox .sand { position: relative; height: 92vw; min-height: 380px; max-height: 620px; }
  .sandbox__inner { padding-block: 44px 8px; }
  .sandbox__panel { max-width: none; background: transparent; backdrop-filter: none; box-shadow: none; padding: 0; }
}

.journey__dot { position: relative; }
.journey__dot button { display: block; width: 100%; text-align: left; padding: 16px 0 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.journey__dot button:focus-visible { outline: 2px solid var(--sun); outline-offset: 8px; }

/* the pointer flare */
.flare { position: fixed; left: 0; top: 0; z-index: 190; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(248, 238, 222, .34), rgba(240, 228, 210, .12) 46%, rgba(240, 228, 210, 0)); opacity: 0;
  transition: opacity .6s, width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out); will-change: transform; }
.flare.is-on { opacity: 1; }
.flare.is-big { width: 520px; height: 520px; margin: -260px 0 0 -260px; }

/* ---------- the lounge, at night ---------- */
.lounge-window { min-height: min(100svh, 900px); display: grid; align-items: center; text-align: center; padding: clamp(110px, 14vw, 190px) 0 clamp(90px, 11vw, 150px); }
.lounge-window__copy { max-width: 800px; }
.lounge-window__copy > * + * { margin-top: 22px; }
.lounge-window .lede { margin-inline: auto; max-width: 34em; }
.lounge-window .btn-row { justify-content: center; }
.lounge-window .countdown { justify-content: center; }
.lounge-window .countdown__unit { background: rgba(255, 248, 238, .08); border: 1px solid rgba(255, 248, 238, .26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lounge-window .countdown__num, .lounge-window .countdown__label { color: var(--cream); }

/* the journey needs a firmer top veil: noon skies are bright */
.journey__pin .scene__veil { background: linear-gradient(180deg, rgba(30, 20, 14, .5) 0%, rgba(30, 20, 14, .18) 26%, rgba(30, 20, 14, 0) 48%, rgba(30, 20, 14, .26) 100%); }

/* provinces on paper */
.provinces li { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(163, 101, 56, .28); color: var(--espresso); }
.provinces li:hover { background: var(--clay); color: #fff; }
.section--dark .provinces li { background: rgba(255, 255, 255, .06); color: var(--linen); box-shadow: inset 0 0 0 1px rgba(226, 212, 192, .25); }

/* footer: the moon sits alone at the upper right */
.footer__lead { flex-direction: column; align-items: flex-start; }

/* split-word headlines clip their own text-shadow into boxes: put the glow on the whole heading instead */
.scene .display, .scene .h2, .scene h1, .retreat-hero .display { text-shadow: none !important; filter: drop-shadow(0 2px 20px rgba(30, 20, 14, .45)); }

/* text-heavy heroes: a soft shade behind the copy so cream type always reads, whatever the light */
.page-hero.scene .scene__veil { background: linear-gradient(0deg, rgba(30, 20, 14, .62) 0%, rgba(30, 20, 14, .32) 34%, rgba(30, 20, 14, 0) 62%), linear-gradient(90deg, rgba(30, 20, 14, .5) 0%, rgba(30, 20, 14, .22) 42%, rgba(30, 20, 14, 0) 68%), linear-gradient(180deg, rgba(30, 20, 14, .3), rgba(30, 20, 14, 0) 26%); }
.page-hero--center.scene .scene__veil { background: radial-gradient(70% 60% at 50% 60%, rgba(30, 20, 14, .5), rgba(30, 20, 14, 0) 75%), linear-gradient(180deg, rgba(30, 20, 14, .3), rgba(30, 20, 14, 0) 30%); }
.page-hero.scene .eyebrow, .page-hero.scene .lede { text-shadow: 0 1px 18px rgba(30, 20, 14, .6); }
.page-hero.scene .display em, .page-hero.scene .h1 em { color: #EFE3D0; }

/* ---------- call-to-action band: a sunset behind the four paths ---------- */
.cta-band.scene { --h: 70%; --g0: #8a6f5f; --g1: #b58f7a; --g2: #d7b7a1; --g3: #e6cdb9; --g4: #a68470; --g5: #5f4535; color: var(--cream); }
.cta-band.scene .scene__veil { background: linear-gradient(90deg, rgba(30, 20, 14, .58) 0%, rgba(30, 20, 14, .3) 45%, rgba(30, 20, 14, .05) 75%), linear-gradient(0deg, rgba(30, 20, 14, .4), rgba(30, 20, 14, 0) 50%); }
.cta-band.scene .h2, .cta-band.scene p { color: var(--cream); }
.cta-band.scene .eyebrow { color: #DCCBB4; }
.cta-band.scene .path { background: rgba(255, 248, 238, .12); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cta-band.scene .path strong { color: var(--cream); } .cta-band.scene .path span { color: rgba(255, 248, 238, .78); }
.cta-band.scene .path .btn__icon { background: rgba(255, 248, 238, .18); color: var(--cream); }
.cta-band.scene .path:hover { background: rgba(255, 248, 238, .24); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .7); }

/* ---------- forms on a night scene (Lounge and Retreats waitlists) ---------- */
.scene .form-card { position: relative; background: rgba(30, 20, 14, .5); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .22), 0 50px 90px -50px rgba(30, 20, 14, .8); }
.scene .field input, .scene .field select, .scene .field textarea { background: rgba(255, 248, 238, .09); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .26); color: var(--cream); }
.scene .field label { color: rgba(255, 248, 238, .72); }
.scene .field input:focus, .scene .field select:focus, .scene .field textarea:focus { box-shadow: inset 0 0 0 1.5px #EADCC8; background: rgba(255, 248, 238, .14); }
.scene .field select option { color: var(--ink); }
.scene .fieldset legend { color: #DCCBB4; }
.scene .chip span { background: rgba(255, 248, 238, .09); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .28); }
.scene .chip input:checked + span { background: var(--cream); color: var(--espresso); }
.scene .check, .scene .check span { color: rgba(255, 248, 238, .82); }
.scene .check a { color: #EADCC8; }
.scene .form-success h3 { color: var(--cream); } .scene .form-success p { color: rgba(255, 248, 238, .86); }

/* bright skies (tropical, noon) need a firmer shade under the copy */
.page-hero.scene--bright .scene__veil { background: linear-gradient(0deg, rgba(30, 20, 14, .7) 0%, rgba(30, 20, 14, .44) 36%, rgba(30, 20, 14, .08) 66%), linear-gradient(90deg, rgba(30, 20, 14, .58) 0%, rgba(30, 20, 14, .3) 44%, rgba(30, 20, 14, 0) 70%), linear-gradient(180deg, rgba(30, 20, 14, .34), rgba(30, 20, 14, 0) 26%); }
@media (max-width: 899px) {
  .page-hero.scene .scene__veil { background: linear-gradient(0deg, rgba(30, 20, 14, .78) 0%, rgba(30, 20, 14, .5) 44%, rgba(30, 20, 14, .16) 76%, rgba(30, 20, 14, 0) 100%), linear-gradient(180deg, rgba(30, 20, 14, .32), rgba(30, 20, 14, 0) 24%); }
}
.sea-band__quote p { text-shadow: none; filter: drop-shadow(0 2px 22px rgba(30, 20, 14, .55)); }

/* ---------- first visit: the sky opens ---------- */
.intro { background: transparent; }
.intro__arch { background: linear-gradient(180deg, #2a1c14 0%, #5b4231 44%, #a68f7a 78%, #e2d5c1 100%); }
.intro__word { color: var(--cream); }
.intro__word p { color: #EADCC8; }
.intro__line { background: #DCCBB4; }

/* ==========================================================================
   LEGIBILITY on light skies (the beige palette): a soft espresso shade always sits behind the words
   ========================================================================== */
.scene-hero .scene__veil { background: radial-gradient(64% 48% at 50% 55%, rgba(43, 28, 19, .5), rgba(43, 28, 19, 0) 74%), linear-gradient(180deg, rgba(43, 28, 19, .4) 0%, rgba(43, 28, 19, 0) 30%, rgba(43, 28, 19, 0) 56%, rgba(37, 24, 16, .66) 100%); }
.journey__pin .scene__veil { background: radial-gradient(50% 30% at 20% 9%, rgba(43, 28, 19, .66), rgba(43, 28, 19, 0) 100%), linear-gradient(180deg, rgba(43, 28, 19, .22) 0%, rgba(43, 28, 19, 0) 30%, rgba(37, 24, 16, .3) 100%); }
.sea-band .scene__veil { background: radial-gradient(58% 56% at 50% 50%, rgba(43, 28, 19, .52), rgba(43, 28, 19, 0) 76%), linear-gradient(180deg, rgba(36, 24, 17, .2), rgba(36, 24, 17, 0) 40%, rgba(30, 20, 14, .32)); }
.lounge-window .scene__veil, .scene.lounge-dusk .scene__veil { background: radial-gradient(60% 55% at 50% 50%, rgba(20, 12, 8, .4), rgba(20, 12, 8, 0) 76%), linear-gradient(180deg, rgba(20, 12, 8, .3) 0%, rgba(20, 12, 8, 0) 34%, rgba(20, 12, 8, .38) 100%); }
.portal::after { background: linear-gradient(180deg, rgba(43, 28, 19, .16) 0%, rgba(43, 28, 19, 0) 24%, rgba(43, 28, 19, .46) 50%, rgba(33, 21, 14, .88) 100%); }
.portal__no { color: #F4EADB; text-shadow: 0 1px 14px rgba(30, 18, 10, .7); }
.scene .display em, .scene .h2 em, .scene h3 em, .scene-hero .display em { color: #FBF1E3; font-weight: 400; }
.scene .eyebrow, .scene-hero .eyebrow { color: #FFF8EE; text-shadow: 0 1px 16px rgba(30, 18, 10, .7); }
.hero__proof li { color: rgba(255, 250, 244, .94); }

/* photographs that were shot in strong orange light are settled into the beige palette */
.tone-beige img { filter: sepia(.3) saturate(.5) hue-rotate(-8deg) contrast(1.03) brightness(1.03) !important; }
/* centred heroes (contact) and the retreats hero: a firmer shade behind the paragraph */
.page-hero--center.scene .scene__veil { background: radial-gradient(64% 58% at 50% 62%, rgba(43, 28, 19, .66), rgba(43, 28, 19, 0) 78%), linear-gradient(180deg, rgba(43, 28, 19, .32), rgba(43, 28, 19, 0) 30%); }
.retreat-hero__veil { background: radial-gradient(60% 42% at 50% 70%, rgba(43, 28, 19, .5), rgba(43, 28, 19, 0) 74%), linear-gradient(180deg, rgba(43, 28, 19, .42) 0%, rgba(43, 28, 19, 0) 32%, rgba(43, 28, 19, 0) 50%, rgba(33, 21, 14, .62) 100%); }


.in-journey .to-top { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 899px) {
  .journey__pin .scene__veil { background: radial-gradient(110% 28% at 30% 17%, rgba(43, 28, 19, .66), rgba(43, 28, 19, 0) 100%), linear-gradient(180deg, rgba(43, 28, 19, .2) 0%, rgba(43, 28, 19, 0) 30%, rgba(37, 24, 16, .3) 100%); }
}

/* one frosted layer at a time: nested backdrop filters glitch in Chrome, so controls inside a frosted card stay flat */
.entrance__title .sound-toggle, .entrance__title .btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.journey__panel .journey__gets li, .glass .btn, .form-card .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==========================================================================
   THE LOGO, DRAWN IN BROWN: the line-art woman in the wide hat draws herself over the sun (main.js drawIn),
   sized by world.js to the free room above the headline
   ========================================================================== */
.scene-hero__copy { position: relative; }
.hero-logo { position: absolute; left: 50%; bottom: calc(100% + 16px); height: var(--logo-h, 0px); aspect-ratio: 462 / 669; transform: translateX(-50%); pointer-events: none; z-index: 1; display: none; color: #51331D; }
.hero-logo.is-fit { display: block; }
.hero-logo svg { display: block; width: 100%; height: 100%; overflow: visible; animation: logo-float 9s ease-in-out infinite;
  filter: drop-shadow(0 0 1px rgba(255, 250, 244, .55)) drop-shadow(0 0 18px rgba(255, 248, 238, .4)); }
.hero-logo .figure-draw .emblem-line { fill: currentColor; stroke: currentColor; stroke-width: 1.1px; stroke-linejoin: round; }
.hero-logo .figure-draw .emblem-lotus { fill: #A36538; stroke: #A36538; stroke-width: 1.1px; stroke-linejoin: round; }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.no-js .hero-logo { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-logo svg { animation: none; } }

/* header menu: never wrap a label onto two lines; tighten gently between the burger breakpoint and wide desktops */
.nav__link { white-space: nowrap; }
@media (min-width: 1181px) and (max-width: 1420px) {
  .site-header__inner { gap: 18px; }
  .brand__word { letter-spacing: .26em; }
  .nav__list { gap: 2px; }
  .nav__link { padding-inline: 6px; letter-spacing: .13em; }
  .site-header__cta .btn--sm { padding-left: 16px; letter-spacing: .14em; }
}