.morpho-consent { position: fixed; z-index: 2000; left: 24px; bottom: 95px; width: min(480px, -48px + 100vw); padding: 22px 24px; background: rgba(16, 24, 32, 0.96); border: 1px solid rgba(208, 237, 255, 0.333); box-shadow: rgba(0, 0, 0, 0.333) 0px 12px 48px; border-radius: 8px; color: rgb(246, 251, 255); font: 13px / 1.6 Gotham, Arial, sans-serif; }
.morpho-consent p { margin: 0px; color: rgb(199, 216, 226); }
.morpho-consent .consent-title { font-size: 17px; color: rgb(255, 255, 255); margin-bottom: 7px; }
.consent-actions { display: flex; gap: 12px; margin-top: 16px; }
.consent-actions button { border: 1px solid rgba(208, 237, 255, 0.4); background: transparent; color: rgb(255, 255, 255); padding: 9px 14px; min-height: 42px; font: inherit; cursor: pointer; }
@media (max-width: 600px) {
.consent-actions button { flex: 1 1 0%; }
}
.consent-actions button:last-child { background: rgb(208, 237, 255); color: rgb(16, 24, 32); }
.consent-actions button:focus-visible { outline: white solid 2px; outline-offset: 3px; }
@media (max-width: 600px) {
.morpho-consent { left: 14px; bottom: 88px; width: calc(-28px + 100vw); padding: 18px; }
}
:root { --navy: #0a127b; --ink: #20274a; --paper: #faf9f6; --muted: #6b7080; --line: #dbdddF; --serif: Georgia,"Times New Roman",serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: Gotham, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a, button { color: inherit; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: rgb(50, 120, 250) solid 2px; outline-offset: 6px; }
::selection { color: white; background: var(--navy); }
h2 { font-family: var(--serif); font-size: clamp(43px, 4.45vw, 70px); letter-spacing: -2.5px; line-height: 1.1; margin: 0px; color: var(--navy); }
h2, h2 em { font-weight: 400; }
p { line-height: 1.8; }
@media (max-width: 760px) {
html { scroll-padding-top: 85px; }
h2 { font-size: 40px; letter-spacing: -1.6px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, ::after, ::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.flow-page .flow-bottom > a { display: none; }
.flow-page .flow-progress { margin-left: 295px; }
.flow-page .flow-progress { margin-left: 0px; }
@media (max-width: 700px) {
.flow-page .flow-progress { display: none; }
.flow-page .flow-bottom { justify-content: flex-end; }
}
.flow-page #flow-h2o { scroll-margin-top: 0px; }
.flow-distant-birds { position: absolute; inset: 0px; z-index: 1; pointer-events: none; overflow: hidden; opacity: var(--nature-copy,0); }
.distant-bird { position: absolute; width: 13px; height: 6px; opacity: 0; animation: 35s linear 0s infinite normal none running bird-crossing; }
@media (prefers-reduced-motion: reduce) {
.distant-bird { opacity: 0.45; }
}
.distant-bird > span { display: block; position: relative; width: 100%; height: 100%; transform: rotate(-10deg); }
.distant-bird i { position: absolute; left: 0px; top: 2px; width: 50%; height: 2px; background: rgba(16, 24, 32, 0.667); border-radius: 100% 20% 30%; transform-origin: right center; animation: 1.2s ease-in-out 0s infinite alternate none running bird-wing-left; }
.distant-bird i + i { left: 50%; transform-origin: left center; animation-name: bird-wing-right; border-radius: 20% 100% 20% 30%; }
.bird-0 { left: 36%; top: 18%; animation-delay: -4s; }
.bird-1 { left: 42%; top: 22%; width: 9px; animation-delay: -5.5s; animation-duration: 38s; }
.bird-2 { left: 58%; top: 32%; width: 8px; animation-delay: -18s; animation-duration: 41s; }
.bird-3 { left: 63%; top: 15%; width: 10px; animation-delay: -27s; animation-duration: 46s; }
.flow-source-reveal[aria-hidden="true"] .distant-bird, .flow-source-reveal[aria-hidden="true"] .distant-bird i, .motion-paused .distant-bird, .motion-paused .distant-bird i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.distant-bird, .distant-bird i { animation: auto ease 0s 1 normal none running none; }
}
.flow-page .flow-source-reveal .flow-landscape { object-position: 50% 50%; }
.flow-page { --ink: #152d33; --paper: #eeeee7; --flow-serif: Georgia,"Times New Roman",serif; background: var(--paper); color: white; }
.flow-page * { box-sizing: border-box; }
.flow-page a, .flow-page button { -webkit-tap-highlight-color: transparent; }
.flow-page a:focus-visible, .flow-page button:focus-visible { outline: rgb(101, 200, 223) solid 2px; outline-offset: 7px; }
.flow-page button { cursor: pointer; font: inherit; }
.flow-page button:disabled { cursor: wait; }
.flow-skip { position: fixed; left: 20px; top: -80px; z-index: 100; padding: 14px; background: rgb(255, 255, 255); color: rgb(21, 45, 51); }
.flow-skip:focus { top: 20px; }
.flow-journey { height: 440vh; position: relative; }
.flow-stage { height: 100svh; min-height: 580px; position: sticky; top: 0px; overflow: hidden; isolation: isolate; --intro: 1; --open: 0; --pour: 0; --source: 0; --object: 1; --line: 0%; }
.flow-studio { position: absolute; inset: 0px; z-index: -5; background: radial-gradient(at 52% 44%, rgb(59, 65, 68), rgb(16, 21, 27) 80%); }
.flow-model { opacity: var(--object); z-index: 1; pointer-events: none; }
.flow-model, .flow-webgl { position: absolute; inset: 0px; }
.flow-webgl { opacity: 0; transition: opacity 0.7s; }
.flow-webgl canvas { display: block; width: 100%; height: 100%; }
.flow-model.is-ready .flow-webgl { opacity: 1; }
.flow-fallback { position: absolute; height: 65vh; width: auto; top: 18vh; left: 50%; transform: translateX(-50%); object-fit: contain; transition: opacity 0.7s; }
.flow-model.is-ready .flow-fallback { opacity: 0; }
.flow-opening { opacity: var(--intro); pointer-events: none; }
.flow-copy { position: absolute; left: 5%; top: 27%; z-index: 2; width: 35%; }
.flow-copy > p, .flow-open-copy > p, .flow-pour-copy > p, .flow-source-reveal p { font-size: 9px; letter-spacing: 1.8px; margin: 0px 0px 30px; }
.flow-copy h1 { font-family: Gotham, Arial, sans-serif; font-weight: 300; letter-spacing: -5px; font-size: clamp(52px, 6.2vw, 96px); line-height: 1.03; margin: 0px; }
.flow-description { font-size: 12px; line-height: 1.9; margin-top: 35px; color: rgba(255, 255, 255, 0.66); }
.flow-intro-right { position: absolute; right: 5%; top: 54%; text-align: right; z-index: 2; max-width: 33%; }
.flow-intro-right > span { font-family: var(--flow-serif); font-size: clamp(28px, 3.6vw, 57px); font-style: italic; letter-spacing: -2px; }
.flow-intro-right p { font-size: 8px; letter-spacing: 1.5px; line-height: 1.9; margin-top: 16px; }
.flow-open-copy, .flow-pour-copy { position: absolute; z-index: 2; left: 6%; top: 22%; pointer-events: none; opacity: var(--open); max-width: 30%; }
.flow-open-copy h2, .flow-pour-copy h2 { font-family: Gotham, Arial, sans-serif; font-weight: 300; font-size: clamp(28px, 3.6vw, 55px); letter-spacing: -2px; line-height: 1.12; color: rgb(255, 255, 255); margin: 0px; }
.flow-open-copy em, .flow-pour-copy em { font-family: var(--flow-serif); font-weight: 400; }
.flow-pour-copy { opacity: var(--pour); left: auto; right: 6%; top: 26%; text-align: right; }
.flow-source-reveal { position: absolute; inset: 0px; opacity: var(--source); z-index: 3; pointer-events: none; }
.flow-source-reveal .flow-landscape { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0px; }
.flow-video-shade { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(7, 26, 24, 0.25), transparent 68%), linear-gradient(0deg, rgba(7, 26, 24, 0.627), transparent 60%, rgba(7, 26, 24, 0.25)); }
.flow-nature-title { position: absolute; left: 6%; bottom: 17%; max-width: 680px; z-index: 3; }
.flow-nature-title h2 { font-family: Gotham, sans-serif; font-size: clamp(52px, 7vw, 110px); font-weight: 300; line-height: 1.03; letter-spacing: -4px; color: white; margin: 0px; }
.flow-nature-title em { font-family: var(--flow-serif); }
.flow-nature-title > a { display: flex; align-items: center; gap: 26px; font-size: 9px; letter-spacing: 1.8px; margin-top: 35px; pointer-events: auto; width: fit-content; border-bottom: 1px solid rgba(255, 255, 255, 0.376); padding-bottom: 10px; }
.flow-bottom { position: absolute; z-index: 10; left: 5%; right: 5%; bottom: 30px; justify-content: space-between; font-size: 8px; letter-spacing: 1.2px; }
.flow-bottom, .flow-bottom > a { display: flex; align-items: center; }
.flow-bottom > a { gap: 12px; }
.flow-progress { display: flex; align-items: center; gap: 15px; }
.flow-progress > div { width: 90px; height: 1px; background: rgba(255, 255, 255, 0.227); }
.flow-progress i { height: 1px; background: rgb(255, 255, 255); width: var(--line); display: block; }
.flow-begin { position: absolute; top: 100vh; height: 1px; }
@media (max-width: 1000px) {
.flow-copy h1 { font-size: 65px; }
.flow-intro-right > span { font-size: 35px; }
}
@media (max-width: 700px) {
.flow-journey { height: 400vh; }
.flow-stage { min-height: 560px; }
.flow-copy { top: 15%; left: 6%; width: 85%; }
.flow-copy > p { font-size: 7px; letter-spacing: 1.2px; margin-bottom: 20px; }
.flow-copy h1 { font-size: 49px; letter-spacing: -3px; line-height: 1.03; }
.flow-description { display: none; }
.flow-intro-right { right: 6%; top: auto; bottom: 22%; max-width: none; }
.flow-intro-right > span { font-size: 34px; letter-spacing: -1.5px; }
.flow-intro-right p { display: none; }
.flow-open-copy { top: 17%; left: 6%; max-width: 85%; }
.flow-open-copy h2, .flow-pour-copy h2 { font-size: 34px; letter-spacing: -1.5px; }
.flow-open-copy > p, .flow-pour-copy > p { font-size: 7px; margin-bottom: 17px; }
.flow-pour-copy { top: 17%; max-width: 80%; }
.flow-nature-title { bottom: 19%; left: 6%; right: 5%; }
.flow-nature-title h2 { font-size: 55px; letter-spacing: -2.5px; }
.flow-nature-title p { font-size: 7px; margin-bottom: 20px; }
.flow-nature-title > a { font-size: 7px; margin-top: 27px; }
.flow-bottom { left: 6%; right: 6%; bottom: 24px; gap: 12px; }
.flow-bottom > a { font-size: 6px; line-height: 1.7; letter-spacing: 0.7px; max-width: 75px; gap: 5px; }
.flow-bottom > a svg { width: 10px; flex-shrink: 0; }
.flow-progress { gap: 7px; font-size: 6px; letter-spacing: 0.5px; }
.flow-progress > div { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page * { scroll-behavior: auto !important; }
.flow-fallback, .flow-webgl { transition: none; }
}
@media (max-width: 700px) {
.flow-fallback { height: 42vh; top: 31vh; }
.flow-copy h1 { font-size: 47px; }
}
html:has(.flow-page) { scroll-padding-top: 0px; }
.flow-page { --brand-flight: #d0edff; --brand-reserve: #0a127b; --brand-blue: #0056d4; --brand-purity: #ffffff; --brand-premium: #101820; --ink: var(--brand-premium); --paper: var(--brand-purity); --flow-serif: "Publico Headline",Georgia,serif; --brand-secondary: color-mix(in srgb,var(--brand-premium) 68%,white); --brand-rule: color-mix(in srgb,var(--brand-premium) 20%,transparent); font-family: Gotham, Arial, sans-serif; color: var(--brand-purity); }
.flow-page .flow-intro-right > span, .flow-page em { font-family: var(--flow-serif); font-style: italic; font-weight: 300; font-synthesis: none; }
.flow-page .flow-skip { color: var(--brand-premium); }
.flow-page .flow-nature-title > a { border-bottom-color: rgba(255, 255, 255, 0.376); }
.flow-page a:focus-visible, .flow-page button:focus-visible { outline-color: var(--brand-blue); }
.flow-page .flow-stage a:focus-visible, .flow-page .flow-stage button:focus-visible { outline-color: var(--brand-flight); }
.flow-page ::selection { background: var(--brand-reserve); color: white; }
[data-scroll-reading="true"] { --read-progress: 0; --read-rest-opacity: .34; }
.scroll-reading-line { display: inline; }
.scroll-reading-word { --word-on: clamp(0,calc((var(--read-progress) - var(--word-start))*40),1); transition: color 0.1s linear; color: rgb(255 255 255/calc(var(--read-rest-opacity) + var(--word-on)*(1 - var(--read-rest-opacity)))) !important; }
[data-shot="wellbeing"] [data-scroll-reading="true"] { --read-rest-opacity: .3; }
@media (prefers-reduced-motion: reduce) {
[data-scroll-reading="true"] { --read-progress: 1 !important; }
}
body:has(.flow-page), html:has(.flow-page) { background: rgb(16, 24, 32); }
.flow-page { --flow-surface: #101820; background: var(--flow-surface); }
.flow-page .flow-stage::after { content: ""; position: absolute; z-index: 5; inset: auto 0px 0px; height: 42vh; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); opacity: var(--scene-exit,0); }
.flow-page .flow-bottom { opacity: calc(1 - var(--scene-exit, 0)); }
.flow-page #flow-life, .flow-page #flow-origin, .flow-page #flow-water { scroll-margin-top: 0px; }
@media (prefers-reduced-motion: no-preference) {
.flow-page [data-flow-reveal] { opacity: 0; translate: 0px 22px; transition: opacity 1.4s, translate 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flow-page [data-flow-reveal][data-arrived="true"] { opacity: 1; translate: 0px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-stage::after { display: none; }
}
.flow-page .flow-stage::after { display: none; }
.flow-language { display: flex; align-items: center; gap: 7px; font-family: Gotham, sans-serif; font-size: 10px; letter-spacing: 0.07em; flex-shrink: 0; }
.flow-language button { appearance: none; background: none; border: 0px; color: inherit; font: inherit; cursor: pointer; padding: 8px 2px; opacity: 0.5; transition: opacity 0.3s; }
.flow-language button[aria-pressed="true"] { opacity: 1; text-decoration: underline 1px; text-underline-offset: 5px; }
.flow-language button:hover { opacity: 1; }
.flow-language button:focus-visible { outline: currentcolor solid 1px; outline-offset: 3px; }
.flow-language > span { opacity: 0.3; }
.flow-locale[lang="es"] .flow-copy h1 { font-size: clamp(46px, 6.1vw, 94px); }
@media (max-width: 700px) {
.flow-language { font-size: 9px; gap: 4px; }
.flow-locale[lang="es"] .flow-copy h1 { font-size: 47px; }
}
.flow-page .flow-copy h1 { line-height: 0.9; letter-spacing: -0.065em; }
@media (max-width: 700px) {
.flow-page .flow-copy h1 { line-height: 0.88; }
}
.flow-page .flow-copy h1 > span { display: block; }
.flow-page .flow-copy h1 > span + span { margin-top: 0.015em; }
.flow-page .flow-description { max-width: 285px; line-height: 1.8; color: rgba(255, 255, 255, 0.75); }
.flow-page .flow-video-shade { background: linear-gradient(90deg, rgba(16, 24, 32, 0.18), transparent 65%), linear-gradient(0deg, rgba(16, 24, 32, 0.196), transparent 47%, rgba(16, 24, 32, 0.094)); }
.flow-page .flow-video-shade { background: linear-gradient(90deg, rgba(16, 24, 32, 0.11), transparent 58%), linear-gradient(0deg, rgba(16, 24, 32, 0.125), transparent 44%, rgba(16, 24, 32, 0.05)); }
.flow-page .flow-nature-title { bottom: 20%; text-shadow: rgba(16, 24, 32, 0.333) 0px 2px 18px; }
.flow-page .flow-nature-title > a { background: var(--brand-purity); color: var(--brand-reserve); border: 0px; padding: 17px 22px; text-shadow: none; letter-spacing: 1.1px; font-size: 9px; gap: 30px; transition: background 0.3s, transform 0.3s; }
.flow-page .flow-nature-title > a:hover { background: var(--brand-flight); transform: translateY(-2px); }
.flow-page .flow-stage { mask-image: none; }
.flow-page .flow-source-reveal::after { content: ""; display: block; position: absolute; inset: auto 0px 0px; height: 24svh; z-index: 2; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); opacity: var(--nature-exit,0); transition: opacity 1.8s; }
.flow-page .flow-source-reveal .flow-landscape { transform: scale(calc(1 + var(--nature-exit,0)*.065)) translateY(calc(var(--nature-exit,0)*-1.3%)); transform-origin: 55% 42%; transition: transform 1.8s cubic-bezier(0.18, 0.55, 0.3, 1); }
.flow-page .flow-nature-title { translate: 0 calc(var(--nature-exit,0)*-24px); transition: translate 1.8s cubic-bezier(0.18, 0.55, 0.3, 1); }
.flow-page .flow-nature-title { z-index: 4; }
@media (max-width: 700px) {
.flow-page .flow-copy { top: 14%; }
.flow-page .flow-intro-right { bottom: 23%; }
.flow-page .flow-nature-title { bottom: 22%; }
.flow-page .flow-nature-title > a { font-size: 8px; padding: 15px 18px; gap: 22px; margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-nature-title > a { transition: none; }
.flow-page .flow-source-reveal .flow-landscape { transform: none; transition: none; }
.flow-page .flow-nature-title { translate: none; transition: none; }
.flow-page .flow-source-reveal::after { transition: none; }
}
.flow-page .flow-studio { background: radial-gradient(ellipse at 52% 44%,color-mix(in srgb,var(--brand-premium) 75%,var(--brand-flight)) 0,var(--brand-premium) 80%); }
.flow-page .flow-studio { background: radial-gradient(at 52% 44%, rgb(48, 62, 71) 0px, rgb(20, 32, 41) 46%, rgb(6, 11, 16) 100%); }
.flow-page .flow-nature-title, .flow-page .flow-video-shade { opacity: var(--nature-copy,0); }
.flow-page .flow-source-reveal { background: rgb(16, 24, 32); }
.flow-page { background: var(--brand-premium); }
.flow-page > .flow-journey { z-index: 1; }
.flow-page [data-handoff="true"] { transform: none; opacity: var(--handoff-opacity,1); will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
.flow-page [data-handoff="true"] { transform: none; opacity: 1; will-change: auto; }
}
.flow-page .flow-stage[data-handoff] .flow-nature-title { opacity: calc(var(--nature-copy,0)*var(--handoff-exit-copy,1)); }
@media (prefers-reduced-motion: no-preference) {
.flow-page [data-handoff="true"][data-pinned="true"] { position: fixed; top: 0px; left: 0px; width: 100%; margin: 0px; transform: translateZ(0px); backface-visibility: hidden; will-change: transform, opacity; }
.flow-page [data-handoff="true"][data-offscreen="true"] { visibility: hidden; pointer-events: none; }
}
.journey-rail { position: fixed; z-index: 50; left: 1.4vw; top: 50%; transform: translateY(-50%); width: 34px; color: rgb(208, 237, 255); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity 0.4s; }
@media (max-width: 700px) {
.journey-rail { left: 0px; width: 24px; gap: 2px; }
}
.journey-rail[data-footer="true"] { opacity: 0; pointer-events: none; }
.journey-rail-count { font-size: 9px; letter-spacing: 0.1em; margin-bottom: 15px; }
.journey-rail-count i { display: block; font-style: normal; font-size: 7px; color: rgba(208, 237, 255, 0.376); margin-top: 6px; }
.journey-rail a { position: relative; display: flex; width: 34px; height: 24px; align-items: center; justify-content: center; }
.journey-rail a > i { display: block; width: 1px; height: 14px; background: rgba(208, 237, 255, 0.21); transition: height 0.4s, background 0.4s, box-shadow 0.4s; }
.journey-rail a[aria-current] > i { height: 24px; background: rgb(208, 237, 255); box-shadow: rgba(208, 237, 255, 0.333) 0px 0px 9px; }
.journey-rail a > span { position: absolute; left: 31px; white-space: nowrap; font-size: 10px; background: rgba(16, 24, 32, 0.93); padding: 9px 12px; opacity: 0; pointer-events: none; transform: translateX(-5px); transition: opacity 0.2s, transform 0.2s; }
.journey-rail a:focus-visible > span, .journey-rail a:hover > span { opacity: 1; transform: none; }
.journey-rail-name { writing-mode: vertical-rl; font-size: 8px; letter-spacing: 0.13em; margin-top: 17px; max-height: 150px; text-transform: uppercase; color: rgba(208, 237, 255, 0.54); }
@media (max-width: 700px) {
.journey-rail { left: 3px; width: 13px; gap: 1px; }
.journey-rail a { width: 18px; height: 21px; }
.journey-rail-count { font-size: 7px; }
.journey-rail-count i, .journey-rail-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.journey-rail * { transition: none; }
}
@media (max-width: 700px) {
.journey-rail a { width: 24px; height: 26px; }
}
.morpho-header { --menu-ink: #101820; --menu-flight: #d0edff; --menu-rule: #d0edff24; position: fixed; inset: 0px 0px auto; z-index: 150; height: 94px; padding: 0px 4.8%; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgb(255, 255, 255); font-family: Gotham, Arial, sans-serif; pointer-events: none; isolation: isolate; }
.morpho-header * { box-sizing: border-box; }
.morpho-header a { color: inherit; text-decoration: none; }
.morpho-header button { font: inherit; color: inherit; cursor: pointer; border: 0px; background: none; }
.morpho-header :is(a, button):focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 4px; }
.morpho-header :is(a, button):focus:not(:focus-visible) { outline: none; }
.morpho-header .morpho-notch :is(a, button):focus { outline: none; }
.morpho-header .morpho-notch :is(a, button):focus-visible { outline: none; text-decoration: underline 1px rgba(255, 255, 255, 0.7); text-underline-offset: 5px; }
.morpho-header::before { content: ""; position: absolute; inset: 0px 0px -18px; z-index: -2; background: linear-gradient(rgba(16, 24, 32, 0.66), transparent); pointer-events: none; }
.morpho-header-logo { display: block; width: 152px; flex-shrink: 0; }
.morpho-header-logo img { display: block; width: 100%; height: auto; filter: none; }
.morpho-notch { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); max-width: calc(-44px + 100vw); }
.morpho-notch-glass { z-index: -2; background: linear-gradient(135deg, rgba(208, 237, 255, 0.125), rgba(16, 24, 32, 0.14) 55%, rgba(208, 237, 255, 0.07)); backdrop-filter: blur(20px) saturate(1.35); }
@media not (((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) or (-webkit-backdrop-filter:blur(1px))) {
.morpho-notch-glass { background: rgba(16, 24, 32, 0.6); }
}
.morpho-notch-glass, .morpho-notch-shape { position: absolute; top: 0px; left: -22px; pointer-events: none !important; }
.morpho-notch-shape { overflow: visible; z-index: -1; filter: drop-shadow(rgba(0, 0, 0, 0.14) 0px 7px 18px); }
.morpho-notch-shape path { fill: none; }
.morpho-notch-shape .morpho-notch-edge { fill: none; stroke: rgba(208, 237, 255, 0.314); stroke-width: 1; }
.morpho-notch-bar { height: 62px; padding: 6px 12px 8px; display: flex; align-items: center; justify-content: center; }
.morpho-header .morpho-main-nav { display: flex; gap: 2px; align-items: center; font-size: 13px; }
.morpho-main-nav :is(a, button) { min-height: 44px; padding: 0px 17px; display: flex; align-items: center; gap: 9px; border-radius: 999px; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 8px; transition: background 0.18s, color 0.18s, box-shadow 0.18s; }
.morpho-main-nav :is(a, button) > svg:first-child { color: rgba(208, 237, 255, 0.72); }
.morpho-main-nav .morpho-menu-chevron { opacity: 0.55; transition: transform 0.18s; }
.morpho-main-nav :is(a, button):hover, .morpho-main-nav button[aria-expanded="true"] { background: rgba(208, 237, 255, 0.14); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset; }
.morpho-main-nav button[aria-expanded="true"] > svg { color: inherit; }
.morpho-main-nav button[aria-expanded="true"] > .morpho-menu-chevron { transform: rotate(180deg); }
.morpho-main-nav :is(a, button)[data-current="true"]:not([aria-expanded="true"]) { background: rgba(208, 237, 255, 0.07); box-shadow: rgba(255, 255, 255, 0.086) 0px 1px 0px inset; }
.morpho-header .morpho-mobile-trigger { display: none; }
.morpho-mobile-trigger { text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 8px; }
.morpho-header-actions { display: flex; gap: 20px; align-items: center; margin-left: auto; }
@media (max-width: 600px) {
.morpho-header-actions { margin: 0px 0px 0px auto; gap: 7px; }
}
.morpho-header .flow-language { display: flex; gap: 5px; align-items: center; font-size: 10px; }
.morpho-header .flow-language button { padding: 10px 4px; opacity: 0.55; font-size: 10px; min-height: 40px; }
.morpho-header .flow-language button[aria-pressed="true"] { opacity: 1; }
.morpho-header .flow-language > span { opacity: 0.35; }
.morpho-header .morpho-header-shop { display: flex; align-items: center; gap: 9px; padding: 12px 16px; min-height: 44px; border: 1px solid rgba(208, 237, 255, 0.333); border-radius: 999px; background: rgb(208, 237, 255); color: rgb(16, 24, 32); font-size: 11px; white-space: nowrap; transition: background 0.18s, transform 0.18s; }
.morpho-header-shop:hover { transform: translateY(-1px); background: white !important; }
@media (max-width: 1150px) {
.morpho-header { padding-inline: 4%; gap: 12px; }
.morpho-header-logo { width: 130px; }
.morpho-header-actions { gap: 12px; }
.morpho-header .morpho-shop-word { display: none; }
.morpho-main-nav :is(a, button) { padding-inline: 13px; font-size: 12px; }
}
@media (max-width: 1100px) {
.morpho-header .morpho-main-nav { display: none; }
.morpho-header .morpho-mobile-trigger { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 142px; height: 44px; border-radius: 999px; font-size: 12px; }
.morpho-notch-bar { height: 58px; padding-inline: 12px; }
}
@media (max-width: 600px) {
.morpho-header { height: 74px; padding: 0px 20px; gap: 8px; }
.morpho-header-logo { width: 100px; }
.morpho-notch-bar { height: 54px; padding: 4px 9px 6px; }
.morpho-header .morpho-mobile-trigger { min-width: 82px; gap: 8px; font-size: 11px; }
.morpho-header .morpho-header-shop { min-height: 36px; font-size: 10px; padding: 8px 11px; gap: 6px; }
.morpho-header-shop > svg:first-child { display: none; }
.morpho-header .flow-language { position: absolute; right: 28px; top: 55px; gap: 0px; font-size: 8px; }
.morpho-header .flow-language button { font-size: 8px; padding: 6px; min-height: 25px; }
.morpho-header .flow-language > span { font-size: 8px; }
}
@media (max-width: 360px) {
.morpho-header { padding-inline: 14px; }
.morpho-header-logo { width: 88px; }
.morpho-header .morpho-mobile-trigger { min-width: 74px; font-size: 10px; }
.morpho-header .morpho-header-shop { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
.morpho-header * { transition: none !important; }
}
@media (max-width: 1100px) {
body:has(.morpho-header[data-open="true"]), html:has(.morpho-header[data-open="true"]) { overflow: hidden; overscroll-behavior: none; }
}
.flow-entry-anchor { position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; pointer-events: none; }
.flow-loader { position: fixed; left: 24px; bottom: 20px; z-index: 250; color: rgb(255, 255, 255); opacity: 1; transition: opacity 0.3s; animation: 0.3s ease 4s 1 normal forwards running flow-loader-release; }
.flow-loader.is-leaving { opacity: 0; pointer-events: none; }
.flow-page:has(> #enter-morpho:target) > .flow-loader { display: none; }
.flow-loader-brand { width: 100px; display: flex; flex-direction: column; align-items: center; }
.flow-loader-progress { position: relative; width: 100%; padding-bottom: 8px; border-bottom: 1px solid rgba(208, 237, 255, 0.14); text-align: right; }
.flow-loader-progress > span { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-variation-settings: normal; font-weight: 300; font-stretch: normal; font-size: 12px; line-height: 1; font-family: Gotham, sans-serif; font-feature-settings: "tnum"; letter-spacing: 0.1em; color: rgba(208, 237, 255, 0.7); }
.flow-loader-progress small { font-size: 8px; margin-left: 3px; }
.flow-loader-progress i { position: absolute; left: 0px; bottom: -1px; width: 100%; height: 1px; background: rgba(208, 237, 255, 0.7); transform-origin: left center; transition: transform 0.25s; }
.flow-loader-enter { color: rgba(208, 237, 255, 0.61); font-size: 10px; letter-spacing: 0.08em; text-decoration: none; padding: 8px; min-height: 32px; }
.flow-loader-enter:focus-visible, .flow-loader-enter:hover { color: rgb(255, 255, 255); }
.flow-loader-enter span { margin-left: 8px; }
@media (max-width: 700px) {
.flow-loader { left: 18px; }
.flow-loader-brand { width: 86px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-loader, .flow-loader-progress i { transition: none; }
}
.flow-page .flow-studio::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 49% 36%, transparent 15%, rgba(2, 6, 11, 0.72) 100%); opacity: calc(1 - var(--hero-light,0)*.78); pointer-events: none; }
.flow-page .flow-copy h1 { font-size: clamp(56px, 6.8vw, 106px); letter-spacing: -0.065em; }
.flow-page .flow-description { font-size: 14px; line-height: 1.85; max-width: 330px; }
.flow-page .flow-copy > p, .flow-page .flow-open-copy > p, .flow-page .flow-pour-copy > p { font-size: 10px; letter-spacing: 0.18em; }
.flow-page .flow-nature-title h2 { font-size: clamp(60px, 7.2vw, 112px); }
.flow-page .flow-nature-title { bottom: 21%; }
@media (max-width: 700px) {
.flow-page .flow-copy h1 { font-size: 49px; }
.flow-page .flow-copy > p { font-size: 8px; }
.flow-page .flow-nature-title h2 { font-size: 55px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-studio::after { display: none; }
}
.flow-page .flow-fallback { filter: brightness(calc(.55 + var(--hero-light,0)*.45)); }
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-fallback { filter: none; }
}
.flow-page { --story-text: clamp(14px,1.12vw,17px); --dock-height: 84px; --scene-height: calc(100svh - var(--dock-height)); }
@media (max-width: 700px) {
.flow-page { --story-text: clamp(16px,4.4vw,18px); }
}
.flow-page .flow-description { font-size: var(--story-text); line-height: 1.8; }
.flow-page .flow-stage { height: var(--scene-height); min-height: 0px; }
@media (max-width: 700px) {
.flow-page { --story-text: 13px; --dock-height: 88px; }
}
@media (min-width: 701px) and (max-height: 650px) {
.flow-page { --story-text: 13px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.flow-page { --story-text: 12px; }
}
.flow-opening-content { position: absolute; left: 5%; top: 27%; width: 35%; z-index: 4; pointer-events: none; }
.flow-page .flow-opening-content .flow-copy { position: static; width: 100%; }
@media (min-width: 701px) and (max-height: 700px) {
.flow-opening-content { top: 23%; }
.flow-page .flow-opening-content h1 { font-size: clamp(56px, min(6.8vw, 14svh), 106px); }
.flow-page .flow-opening-content .flow-description { margin-top: 24px; }
}
@media (max-width: 700px) {
.flow-opening-content { display: contents; }
.flow-page .flow-opening-content .flow-copy { position: absolute; left: 6%; top: 14%; width: 85%; }
}
.flow-page .flow-stage { height: 100svh; }
.flow-opening-content { top: calc(var(--scene-height)*.27); }
@media (min-width: 701px) and (max-height: 700px) {
.flow-opening-content { top: calc(var(--scene-height)*.23); }
}
.flow-page .flow-bottom { bottom: calc(var(--dock-height) + 30px); }
@media (max-width: 700px) {
.flow-page .flow-bottom { bottom: calc(var(--dock-height) + 24px); }
}
.flow-opening-layout, .flow-opening-picture { display: contents; }
.flow-opening-product-frame { position: absolute; inset: 0px; z-index: 1; pointer-events: none; opacity: var(--object); }
.flow-page .flow-opening-product-frame .flow-fallback { height: 65.3595%; top: 17.5163%; transform: translateX(-49.2021%); filter: none; transition: opacity 0.18s; }
@media (min-width: 701px) and (max-aspect-ratio: 4/5) {
.flow-page .flow-opening-product-frame .flow-fallback { height: 40.6281%; top: 31.007%; transform: translateX(-49.6795%); }
}
.flow-page .flow-model .flow-webgl { transition: opacity 0.18s; }
.flow-opening-product-frame.is-ready .flow-fallback { opacity: 0; }
@media (max-width: 700px) {
.flow-page .flow-opening-layout { position: absolute; inset: 128px 6% calc(var(--dock-height) + 60px); z-index: 4; display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; gap: 12px; pointer-events: none; }
.flow-page .flow-opening-layout .flow-opening-content { display: contents; }
.flow-page .flow-opening-layout .flow-opening-content .flow-copy { position: static; inset: auto; width: auto; grid-row: 1; }
.flow-page .flow-opening-layout .flow-copy > p { font-size: 8px; line-height: 1.5; margin-bottom: 16px; }
.flow-page .flow-opening-layout .flow-copy h1 { font-size: clamp(42px, 12.5vw, 52px); line-height: 0.96; }
.flow-page .flow-opening-product-frame { position: relative; inset: auto; grid-row: 2; min-height: 0px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 700px) and (max-height: 480px) {
.flow-page .flow-opening-product-frame { grid-area: 1 / 2 / span 2; height: 100%; }
}
@media (max-width: 700px) {
.flow-page .flow-opening-product-frame .flow-fallback { position: static; inset: auto; transform: translate(0.44%, 0.5%); width: auto; height: 92%; max-height: 380px; max-width: 88%; object-fit: contain; }
.flow-page .flow-opening-layout .flow-intro-right { position: static; inset: auto; grid-row: 3; max-width: 100%; text-align: right; }
}
@media (max-width: 700px) and (max-height: 480px) {
.flow-page .flow-opening-layout .flow-intro-right { grid-area: 2 / 1; text-align: left; }
}
@media (max-width: 700px) {
.flow-page .flow-opening-layout .flow-intro-right > span { display: block; font-size: clamp(30px, 8.7vw, 36px); line-height: 1.12; letter-spacing: -0.04em; }
}
@media (max-width: 700px) and (max-height: 660px) {
.flow-page .flow-opening-layout { gap: 10px; }
.flow-page .flow-opening-layout .flow-copy > p { margin-bottom: 12px; }
.flow-page .flow-opening-layout .flow-copy h1 { font-size: 42px; }
.flow-page .flow-opening-layout .flow-intro-right > span { font-size: 30px; }
}
@media (max-width: 700px) and (max-height: 480px) {
.flow-page .flow-opening-layout { bottom: 90px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 18px; align-content: center; }
.flow-page .flow-opening-layout .flow-copy { grid-column: 1; }
.flow-page .flow-bottom { bottom: 78px; }
}
@media (max-width: 700px) {
.flow-page [data-scroll-reading="true"] { font-size: var(--story-text); line-height: 1.6; }
.flow-page .flow-nature-title > a { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 700px) and (max-height: 740px) {
.flow-page { --story-text: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-model .flow-webgl, .flow-page .flow-opening-product-frame .flow-fallback { transition: none; }
}
.sparkling-product { background: rgb(23, 43, 49); color: rgb(255, 255, 255); }
.sparkling-product .product-visual img { transform: rotate(9deg); }
.sparkling-product .product-word { font-size: clamp(60px, 7vw, 120px); color: rgb(68, 96, 100); letter-spacing: -4px; }
.sparkling-product .circle-link:hover { background: white; color: var(--navy); }
.footer-up { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.36); border-radius: 50%; display: grid; place-items: center; font-size: 19px; }
@media (max-width: 760px) {
.footer-up { grid-area: 1 / 2; }
}
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: 1.1px; color: rgba(255, 255, 255, 0.72); }
.footer-bottom a { display: flex; align-items: center; gap: 9px; }
.footer-bottom svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
.sparkling-product .product-word { font-size: 78px; }
.footer-bottom { font-size: 7px; gap: 12px; letter-spacing: 0.5px; }
.footer-bottom > span:nth-child(2) { display: none; }
}
.awwwards-ribbon { position: fixed; z-index: 40; top: 50%; right: 0px; width: 44px; transform: translateY(-50%); color: rgb(243, 245, 246); }
.awwwards-trigger { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 56px; padding: 5px 5px 12px; border-width: 1px 0px 1px 1px; border-style: solid none solid solid; border-color: rgba(208, 237, 255, 0.22) currentcolor rgba(208, 237, 255, 0.22) rgba(208, 237, 255, 0.22); border-image: none; border-radius: 13px 0px 0px 13px; background: rgba(16, 24, 32, 0.72); backdrop-filter: blur(14px); color: inherit; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.125) 0px 4px 18px; }
.awwwards-chevron { position: absolute; bottom: 4px; font: 13px / 1 Arial, sans-serif; color: rgba(208, 237, 255, 0.7); }
.awwwards-card { position: absolute; top: 50%; right: 44px; display: flex; flex-direction: column; gap: 8px; width: 158px; box-sizing: border-box; padding: 16px 19px; border-width: 1px 0px 1px 1px; border-style: solid none solid solid; border-color: rgba(208, 237, 255, 0.22) currentcolor rgba(208, 237, 255, 0.22) rgba(208, 237, 255, 0.22); border-image: none; border-radius: 13px 0px 0px 13px; background: rgba(16, 24, 32, 0.92); backdrop-filter: blur(14px); color: inherit; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(10px, -50%); transition: opacity 0.2s, transform 0.25s, visibility 0.25s; }
.awwwards-name { font: 400 14px / 1.2 Gotham, Arial, sans-serif; }
.awwwards-status { display: flex; justify-content: space-between; font: 400 10px / 1.2 Gotham, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(208, 237, 255); }
.awwwards-ribbon.is-expanded .awwwards-card { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%); }
.awwwards-ribbon.is-expanded .awwwards-trigger { border-radius: 0px; }
.awwwards-card:focus-visible, .awwwards-trigger:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
.awwwards-card { transition: none; }
}
.morpho-radio { position: fixed; left: 5%; bottom: 18px; z-index: 45; width: 266px; min-height: 62px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 13px; color: rgb(237, 245, 241); background: rgba(19, 37, 43, 0.91); backdrop-filter: blur(18px); border: 1px solid rgba(173, 201, 197, 0.14); border-radius: 7px; box-shadow: rgba(0, 19, 24, 0.07) 0px 5px 25px; }
.radio-info { min-width: 0px; flex: 1 1 0%; }
.radio-brand { display: flex; gap: 2px; align-items: center; font-size: 6px; letter-spacing: 1.35px; color: rgb(170, 193, 191); white-space: nowrap; margin-bottom: 7px; }
.radio-brand i { display: inline-block; width: 1px; height: 6px; background: rgb(168, 198, 191); transform-origin: center center; }
.radio-brand i:nth-child(2) { height: 9px; }
.radio-brand i:nth-child(3) { height: 4px; margin-right: 5px; }
.radio-artist, .radio-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-title { font-size: 10px; line-height: 1.5; }
.radio-artist { font-size: 8px; color: rgb(163, 184, 183); margin-top: 2px; line-height: 1.4; }
.radio-buttons { display: flex; align-items: center; gap: 5px; }
.radio-buttons button { display: grid; place-items: center; padding: 0px; width: 22px; height: 30px; border: 0px; background: none; color: rgb(220, 233, 230); flex-shrink: 0; }
.radio-buttons button.radio-play { width: 30px; height: 30px; border: 1px solid rgba(160, 188, 183, 0.29); border-radius: 50%; margin-inline: 2px; }
.radio-buttons button:hover:not(:disabled) { color: white; background: rgba(255, 255, 255, 0.055); }
.radio-buttons button:disabled { opacity: 0.26; cursor: default; }
.radio-buttons button:focus-visible { outline: rgb(166, 217, 223) solid 2px; outline-offset: 3px; }
.morpho-radio.is-playing .radio-brand i { animation: 1s ease-in-out 0s infinite alternate none running radio-level; }
@media (prefers-reduced-motion: reduce) {
.morpho-radio.is-playing .radio-brand i { animation: auto ease 0s 1 normal none running none; }
}
.morpho-radio.is-playing .radio-brand i:nth-child(2) { animation-delay: -0.6s; }
.morpho-radio.is-playing .radio-brand i:nth-child(3) { animation-delay: -0.3s; }
@media (max-width: 700px) {
.morpho-radio { left: 6%; bottom: 18px; width: 211px; min-height: 57px; padding: 10px 11px; gap: 6px; }
.radio-brand { font-size: 5px; letter-spacing: 1px; margin-bottom: 5px; }
.radio-title { font-size: 9px; }
.radio-artist { font-size: 7px; }
.radio-buttons { gap: 1px; }
.radio-buttons button { width: 20px; }
.radio-buttons button.radio-play { width: 27px; height: 27px; margin-inline: 1px; }
}
.radio-count { margin-left: auto; font-size: 7px; letter-spacing: 0.08em; opacity: 0.65; }
.site-player { margin: 0px; min-width: 0px; position: fixed; right: calc(var(--morpho-control-edge,24px) + var(--morpho-chat-width,176px) + var(--morpho-control-gap,10px)); bottom: var(--morpho-control-bottom,18px); z-index: 144; display: flex; align-items: center; height: 48px; padding: 2px; border: 1px solid rgba(208, 237, 255, 0.21); border-radius: 999px; background: rgba(16, 24, 32, 0.78); backdrop-filter: blur(18px); box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset; color: rgb(208, 237, 255); }
.site-player > button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border: 0px; background: transparent; color: inherit; padding: 0px 14px; font: 300 11px / 1 Gotham, Arial, sans-serif; white-space: nowrap; border-radius: 999px; cursor: pointer; }
@media (max-width: 380px) {
.site-player > button { padding: 0px 5px; gap: 4px; }
}
.site-player > button:hover { background: rgba(208, 237, 255, 0.05); }
.site-player > button:disabled { opacity: 0.4; cursor: default; }
.site-player > button.site-sound-toggle { border-left: 1px solid rgba(208, 237, 255, 0.16); border-radius: 0px 999px 999px 0px; padding-left: 13px; }
@media (max-width: 700px) {
.site-player { height: 46px; padding: 0px; }
.site-player > button { min-height: 44px; font-size: 9px; gap: 5px; padding: 0px 9px; }
.site-player > button.site-sound-toggle { padding-left: 9px; }
.site-player > button > svg { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
.site-player > button.site-sound-toggle { padding-left: 5px; }
}
.site-player:focus-within { border-color: rgba(208, 237, 255, 0.44); }
.site-player button:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 3px; }
.site-player .site-sound-toggle:first-child { border-left: 0px; border-radius: 999px; }
.site-player .site-film-retry { border-left: 1px solid rgba(208, 237, 255, 0.16); border-radius: 0px; }
@media (max-width: 700px) {
.site-player[data-film-blocked="true"] > button { padding-inline: 8px; min-width: 44px; }
.site-player[data-film-blocked="true"] > button > span { display: none; }
}
.mineral-film-poster { position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% center; }
.mineral-pour-film video { position: relative; }
@media (max-width: 700px) {
.mineral-film-poster { object-position: 50% 45%; }
}
.flow-page .mineral-service { position: relative; height: 340svh; background: rgb(16, 24, 32); color: rgb(244, 247, 248); }
.mineral-service .mineral-service-stage { position: sticky; top: 0px; height: 100svh; overflow: hidden; isolation: isolate; --pour-progress: 0; --pour-finish: 0; }
.mineral-studio-light { position: absolute; inset: 0px; background: radial-gradient(at 55% 48%, rgba(50, 85, 102, 0.333), transparent 47%), radial-gradient(at 55% 100%, rgba(34, 60, 69, 0.333), transparent 55%); pointer-events: none; }
.mineral-service-top { position: absolute; top: 18%; left: 7%; right: 7%; display: flex; justify-content: space-between; gap: 20px; color: rgba(178, 203, 214, 0.65); font-size: 9px; letter-spacing: 0.17em; z-index: 3; }
.flow-page .mineral-service .mineral-eyebrow { font-size: 8px; letter-spacing: 0.16em; color: rgb(180, 205, 218); margin: 0px 0px 24px; line-height: 1.5; }
.flow-page .mineral-service h2 em { display: block; font-family: var(--flow-serif); font-weight: 300; font-style: italic; letter-spacing: -0.055em; }
.flow-page .mineral-service .mineral-introduction { font-size: 13px; line-height: 1.85; max-width: 320px; margin: 26px 0px 0px; color: rgb(212, 227, 236); --read-dim: .4; }
.flow-page .mineral-service .mineral-promise { font-size: 13px; line-height: 1.65; margin: 25px 0px 0px; color: rgb(208, 237, 255); opacity: var(--pour-finish); transform: translateY(calc((1 - var(--pour-finish))*8px)); }
.mineral-promise em { font-family: var(--flow-serif); font-size: 21px; font-weight: 300; }
.mineral-pour-composition { position: absolute; inset: 0px; pointer-events: none; z-index: 0; }
@media (min-width: 701px) and (max-width: 1150px) {
.mineral-pour-composition { inset: 0px; width: auto; height: auto; }
}
@media (max-width: 700px) {
.mineral-pour-composition { inset: 0px; width: auto; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.mineral-pour-composition { position: absolute; inset: 0px; width: auto; height: auto; margin: 0px; }
}
.mineral-pour-film { position: absolute; inset: 0px; }
.mineral-pour-film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.mineral-pour-film-vignette { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(16, 24, 32, 0.96), rgba(16, 24, 32, 0.87) 26%, rgba(16, 24, 32, 0.25) 52%, transparent 76%), linear-gradient(0deg, rgb(16, 24, 32), rgba(16, 24, 32, 0.933) 14%, rgba(16, 24, 32, 0.65) 31%, transparent 61%, rgba(16, 24, 32, 0.4)); }
.mineral-symbol { font: 300 25px/1 var(--flow-serif); color: rgb(208, 237, 255); min-width: 35px; letter-spacing: -0.05em; }
.mineral-symbol { min-width: 0px; font-size: 26px; }
.flow-page .mineral-service .mineral-source-note { font-size: 10px; line-height: 1.8; color: rgb(152, 174, 185); margin: 20px 0px 0px; opacity: calc(.5 + var(--pour-finish)*.5); }
.mineral-service-bottom { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; align-items: center; justify-content: flex-end; gap: 30px; z-index: 4; font-size: 10px; color: rgb(160, 186, 201); }
.mineral-service-bottom a { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(187, 219, 237, 0.26); padding: 0px 0px 9px; }
.mineral-scroll-hint { position: absolute; left: 45%; transform: translateX(-50%); font-size: 8px; letter-spacing: 0.15em; display: flex; align-items: center; gap: 15px; white-space: nowrap; }
.mineral-scroll-hint i { width: 70px; height: 1px; background: rgba(189, 216, 230, 0.15); }
.mineral-scroll-hint b { display: block; height: 1px; width: calc(var(--pour-progress)*100%); background: rgb(208, 237, 255); }
@media (min-width: 701px) and (max-width: 1150px) {
.mineral-symbol { min-width: 24px; font-size: 21px; }
.mineral-pour-composition { left: 31%; width: 44%; }
}
@media (max-width: 700px) {
.flow-page .mineral-service { height: 320svh; }
.mineral-service-top { top: 14%; left: 8%; right: 8%; font-size: 7px; letter-spacing: 0.12em; }
.mineral-service-top > span:last-child { max-width: 125px; text-align: right; line-height: 1.7; }
.flow-page .mineral-service .mineral-eyebrow { font-size: 7px; margin-bottom: 12px; }
.flow-page .mineral-service .mineral-introduction { font-size: 11px; line-height: 1.65; max-width: 330px; margin-top: 15px; }
.flow-page .mineral-service .mineral-promise { display: none; }
}
.flow-page .mineral-service .mineral-promise { display: none; }
@media (max-width: 700px) {
.mineral-pour-composition { left: -3%; width: 67%; top: 43%; height: 47%; }
.mineral-symbol { display: none; }
}
@media (min-width: 701px) and (max-width: 1150px) {
.mineral-symbol { display: none; }
}
@media (max-width: 700px) {
.flow-page .mineral-service .mineral-source-note { font-size: 8px; margin-top: 12px; line-height: 1.6; }
.flow-page .mineral-service .mineral-source-note { font-size: 8px; margin-top: 10px; line-height: 1.5; }
.mineral-service-bottom { bottom: 4.5%; left: 8%; right: 8%; font-size: 8px; }
.mineral-service-bottom a { gap: 7px; }
.mineral-scroll-hint { left: 25%; bottom: 42px; font-size: 6px; gap: 8px; }
.mineral-scroll-hint i { width: 40px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.mineral-service-top { top: 15%; }
.flow-page .mineral-service .mineral-eyebrow { margin-bottom: 9px; }
.flow-page .mineral-service .mineral-introduction { font-size: 10px; margin-top: 12px; line-height: 1.65; }
.mineral-pour-composition { top: 43%; height: 47%; }
.mineral-service-bottom { bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .mineral-service { height: auto; }
.mineral-service .mineral-service-stage { position: relative; padding: 170px 7% 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; height: auto !important; min-height: 850px !important; }
.mineral-service-top { top: 110px; }
.flow-page .mineral-service .mineral-promise { opacity: 1; transform: none; }
.mineral-pour-composition { position: relative; left: auto; top: auto; width: 100%; height: 430px; grid-area: 1 / 2 / span 2; }
.mineral-scroll-hint { display: none; }
}
@media (max-width: 700px) {
.mineral-scroll-hint { display: none; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
.mineral-service .mineral-service-stage { display: block; padding: 155px 8% 120px; }
}
@media (prefers-reduced-motion: reduce) {
.mineral-service .mineral-service-stage { display: block; min-height: 900px !important; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
.mineral-service-top { top: 98px; }
.mineral-pour-composition { height: 360px; margin: 20px 0px; }
}
.mineral-studio-light { display: none; }
.flow-page .mineral-service .mineral-source-note { font-size: 9px; margin: 10px 0px 0px; line-height: 1.5; }
.mineral-service-bottom { bottom: 6%; }
.mineral-scroll-hint { left: 50%; }
@media (max-width: 700px) {
.mineral-pour-film video { object-position: 58% center; }
.mineral-pour-film-vignette { background: linear-gradient(rgba(16, 24, 32, 0.7), rgba(16, 24, 32, 0.73) 36%, rgba(16, 24, 32, 0.22) 50%, rgba(16, 24, 32, 0.91) 66%, rgb(16, 24, 32)), linear-gradient(90deg, rgba(16, 24, 32, 0.533), transparent 80%); }
.mineral-service-bottom { bottom: 5%; }
}
.flow-page .mineral-chapter { height: 250svh; }
.flow-page .mineral-chapter .mineral-story-stage { display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-rows: minmax(0px, 1fr) auto; gap: 25px 12%; padding: 145px 7% calc(var(--dock-height) + 24px); height: 100svh; min-height: 0px; color: rgb(255, 255, 255); }
.mineral-story-heading { position: relative; z-index: 2; align-self: center; max-width: 460px; }
.flow-page .mineral-chapter .mineral-story-heading h2 { font: 300 clamp(36px, 4.2vw, 65px) / 1.08 Gotham, sans-serif; letter-spacing: -0.055em; margin: 0px; }
.mineral-story-heading h2 em { display: block; font-family: var(--flow-serif); font-weight: 300; line-height: 1.2; }
.flow-page .mineral-story-kicker { font-size: 10px; letter-spacing: 0.16em; margin: 0px 0px 22px; color: rgb(208, 237, 255); }
@media (max-width: 700px) {
.flow-page .mineral-story-kicker { font-size: 10px; line-height: 1.5; }
}
.flow-page .mineral-story-intro { font-size: var(--story-text); line-height: 1.8; max-width: 400px; margin-top: 24px; color: rgb(208, 237, 255); --read-rest-opacity: .65; }
.mineral-properties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 30px; position: relative; z-index: 2; align-self: center; }
.mineral-property { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-content: start; transform: translateY(calc((1 - var(--mineral-reveal,0))*10px)); }
.mineral-property-symbol { display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border: 1px solid rgba(208, 237, 255, 0.333); border-radius: 50%; font: italic 300 21px/1 var(--flow-serif); color: rgb(208, 237, 255); background: radial-gradient(circle, rgba(208, 237, 255, 0.09), transparent); box-shadow: 0 0 calc(var(--mineral-reveal,0)*22px) #d0edff14; }
.flow-page .mineral-property h3 { font: 400 16px / 1.4 Gotham, sans-serif; margin: 0px 0px 6px; color: rgb(215, 232, 241); }
.flow-page .mineral-property-dose { margin: 0px; font-size: 12px; line-height: 1.2; color: rgb(208, 237, 255); }
.mineral-property-dose strong { font-size: 34px; font-weight: 300; letter-spacing: -0.045em; color: white; }
.flow-page .mineral-property-role { grid-column: 1 / -1; font: italic 300 22px/1.25 var(--flow-serif); margin: 13px 0px 8px; color: white; }
.flow-page .mineral-property-copy { grid-column: 1 / -1; font-size: 12px; line-height: 1.65; color: rgb(211, 225, 233); margin: 0px; max-width: 245px; }
.flow-page .mineral-story-note { grid-column: 1 / -1; position: relative; z-index: 2; font-size: 10px; line-height: 1.6; margin: 0px; color: rgb(173, 191, 202); max-width: 650px; }
.flow-page .mineral-chapter .mineral-pour-film-vignette { background: linear-gradient(90deg, rgba(16, 24, 32, 0.855), rgba(16, 24, 32, 0.25) 43%, rgba(16, 24, 32, 0.68) 72%, rgba(16, 24, 32, 0.875)), linear-gradient(0deg, rgba(16, 24, 32, 0.875), transparent 65%); }
@media (max-width: 700px) {
.flow-page .mineral-chapter .mineral-pour-film-vignette { background: linear-gradient(rgba(16, 24, 32, 0.71), rgba(16, 24, 32, 0.627) 38%, rgba(16, 24, 32, 0.81) 80%, rgba(16, 24, 32, 0.925)); }
.flow-page .mineral-chapter .mineral-pour-film-vignette { background: linear-gradient(rgb(16, 24, 32), transparent 18%, transparent 82%, rgb(16, 24, 32)); }
}
@media (min-width: 701px) and (max-height: 740px) {
.flow-page .mineral-chapter .mineral-story-stage { padding-top: 120px; gap: 20px 10%; }
.flow-page .mineral-chapter .mineral-story-heading h2 { font-size: clamp(34px, 4vw, 55px); }
.mineral-properties { gap: 25px; }
.flow-page .mineral-property-copy { font-size: 11px; }
.flow-page .mineral-property-role { font-size: 21px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
.flow-page .mineral-chapter .mineral-story-stage { gap: 24px 6%; grid-template-columns: 0.8fr 1.2fr; }
.flow-page .mineral-chapter .mineral-story-heading h2 { font-size: 38px; }
.mineral-property { grid-template-columns: 35px 1fr; column-gap: 9px; }
}
@media (max-width: 700px) {
.mineral-property { grid-template-columns: 30px 1fr; column-gap: 8px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
.mineral-property-symbol { width: 35px; height: 35px; font-size: 18px; }
.flow-page .mineral-property h3 { font-size: 13px; }
.mineral-property-dose strong { font-size: 29px; }
.flow-page .mineral-property-role { font-size: 19px; }
}
@media (max-width: 700px) {
.flow-page .mineral-chapter .mineral-story-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0px, 1fr) auto; gap: 17px; padding: 110px 8% calc(var(--dock-height) + 18px); }
.flow-page .mineral-chapter .mineral-service-top { top: 80px; font-size: 6px; gap: 18px; }
.flow-page .mineral-chapter .mineral-service-top span:last-child { white-space: nowrap; }
.flow-page .mineral-chapter .mineral-story-heading h2 { font-size: 30px; line-height: 1.06; }
.mineral-story-heading h2 em { display: inline; margin-left: 0.15em; }
.flow-page .mineral-story-kicker { font-size: 7px; letter-spacing: 0.1em; margin-bottom: 9px; }
.flow-page .mineral-story-intro { font-size: 12px; line-height: 1.55; margin-top: 10px; }
.mineral-properties { gap: 22px 18px; }
.mineral-property-symbol { width: 30px; height: 30px; font-size: 16px; }
.flow-page .mineral-property h3 { font-size: 12px; margin-bottom: 4px; }
.mineral-property-dose strong { font-size: 27px; }
.flow-page .mineral-property-dose { font-size: 10px; }
.flow-page .mineral-property-role { font-size: 18px; margin: 9px 0px 0px; }
.mineral-property-copy { display: none; }
.flow-page .mineral-story-note { font-size: 9px; line-height: 1.5; }
}
@media (max-width: 700px) and (max-height: 700px) {
.flow-page .mineral-chapter .mineral-story-stage { padding-top: 105px; gap: 12px; }
.flow-page .mineral-chapter .mineral-story-heading h2 { font-size: 26px; }
.mineral-properties { gap: 18px; }
.flow-page .mineral-property-role { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .mineral-chapter { height: auto; }
}
@media (max-width: 700px) {
.flow-page .mineral-chapter { height: auto; }
}
@media (max-width: 700px) and (max-height: 660px) {
.flow-page .mineral-chapter { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .mineral-chapter .mineral-story-stage { height: auto; min-height: 100svh; }
.mineral-property { transform: none; }
.flow-page .mineral-story-intro { --read-progress: 1 !important; }
}
.flow-page .mineral-chapter [data-scroll-reading] { --read-rest-opacity: .65; }
@media (min-width: 701px) {
.flow-page .mineral-property-copy { font-size: 13px; }
.flow-page .mineral-story-note { font-size: 11px; }
}
.flow-page .product-finale { color: rgb(255, 255, 255); background: rgb(16, 24, 32); height: 360svh; padding: 0px; position: relative; overflow: clip; }
.finale-products-anchor { position: absolute; top: calc(96% - 96svh); left: 0px; width: 1px; height: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.finale-products-anchor { top: 0px; }
}
.product-reveal { isolation: isolate; --return-world: 1; --return-studio: 0; --return-model: 0; --product-rise: 0; --pair-progress: 0; --final-copy: 0; background: rgb(16, 24, 32); height: 100svh; min-height: 0px; position: sticky; top: 0px; overflow: hidden; }
.finale-return-world { z-index: 1; opacity: var(--return-world); will-change: opacity; position: absolute; inset: 0px; overflow: hidden; }
.finale-return-world > img { object-fit: cover; object-position: center center; width: 100%; max-width: none; height: 100%; position: absolute; inset: 0px; }
.finale-memory-shade { display: none; }
.finale-return-studio { z-index: 2; opacity: var(--return-studio); background: radial-gradient(at 50% 46%, rgb(59, 65, 68) 0px, rgb(16, 24, 32) 76%, rgb(8, 14, 19) 100%); }
.finale-return-model, .finale-return-studio { will-change: opacity; position: absolute; inset: 0px; }
.finale-return-model { z-index: 3; opacity: var(--return-model); pointer-events: none; }
.finale-return-model .flow-webgl { opacity: 0; transition: opacity 0.35s; }
.finale-return-model.is-ready .flow-webgl { opacity: 1; }
.finale-return-fallback { object-fit: contain; width: auto; height: min(68vh, 720px); opacity: var(--return-studio); filter: drop-shadow(rgba(0, 0, 0, 0.667) 18px 35px 28px); position: absolute; bottom: 6vh; left: 50%; transform: translate(-50%); }
.finale-return-model.is-ready .finale-return-fallback { opacity: 0; }
.finale-product-scene { z-index: 5; pointer-events: none; position: absolute; inset: 0px; }
.sparkling-effervescence { z-index: 4; pointer-events: none; position: absolute; bottom: 99%; left: 50%; width: 0px; height: 0px; opacity: 0; }
.sparkling-effervescence[data-burst="true"] { opacity: 1; }
.sparkling-effervescence i { position: absolute; bottom: 0px; left: 0px; width: var(--bubble-size); aspect-ratio: 1 / 1; border: 0.6px solid rgba(233, 248, 255, 0.85); border-radius: 50%; background: radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.6), transparent 55%); box-shadow: rgba(208, 237, 255, 0.27) 0px 0px 2px; opacity: 0; transform: translateX(var(--bubble-start)); will-change: transform, opacity; }
.sparkling-effervescence[data-burst="true"] i { animation: fresh-bubble var(--bubble-duration) cubic-bezier(.12,.55,.25,1) var(--bubble-delay) both; }
@media (prefers-reduced-motion: reduce) {
.sparkling-effervescence[data-burst="true"] i { opacity: 0.38; animation: auto ease 0s 1 normal none running none; transform: translate(-50%, -6vh); }
.sparkling-effervescence[data-burst="true"] i { animation: auto ease 0s 1 normal none running none; opacity: 0.4; transform: translate(var(--bubble-start),-12px); }
}
.sparkling-effervescence[data-burst="true"] i[data-droplet="true"] { background: rgba(223, 245, 255, 0.7); animation-name: fresh-droplet; }
.finale-end-copy { z-index: 6; text-align: center; width: min(760px, 82vw); opacity: var(--final-copy); transform: translate(-50%,calc((1 - var(--final-copy))*24px)); pointer-events: none; position: absolute; top: 9%; left: 50%; }
.finale-end-copy > p { letter-spacing: 0.2em; margin: 0px 0px 22px; font-size: 11px; }
.flow-page .finale-end-copy h2 { color: rgb(255, 255, 255); letter-spacing: -0.065em; margin: 0px; font: 300 clamp(48px, 5.7vw, 88px) / 0.96 Gotham, sans-serif; }
.finale-end-copy h2 em { font-family: var(--flow-serif); font-weight: 300; }
.finale-end-copy > span { color: rgba(255, 255, 255, 0.66); letter-spacing: 0.17em; margin-top: 20px; font-size: 10px; display: block; }
@media (max-width: 700px) {
.finale-end-copy > span { letter-spacing: 0.1em; margin-top: 16px; font-size: 8px; }
}
.finale-end-copy > span i { color: rgb(255, 255, 255); padding: 0px 14px; font-style: normal; }
.finale-product-label { z-index: 7; width: min(18vw, 250px); opacity: var(--final-copy); color: rgb(255, 255, 255); position: absolute; top: 62%; }
.finale-still-label { left: 5%; }
.finale-sparkling-label { right: 5%; }
.finale-product-label p { justify-content: space-between; align-items: baseline; gap: 15px; margin: 0px 0px 18px; display: flex; }
.finale-product-label strong { font: italic 300 clamp(36px,3.4vw,56px)/1 var(--flow-serif); }
.finale-product-label span { color: rgba(255, 255, 255, 0.64); letter-spacing: 0.15em; white-space: nowrap; font-size: 10px; }
@media (max-width: 700px) {
.finale-product-label span { letter-spacing: 0.08em; font-size: 7px; }
}
.finale-product-label a { color: rgb(255, 255, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.44); justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0px; font-size: 14px; display: flex; }
@media (max-width: 700px) {
.finale-product-label a { padding: 10px 0px; font-size: 11px; }
}
.finale-product-label a svg { flex-shrink: 0; transition: transform 0.3s; }
.finale-product-label a:hover svg { transform: translate(3px, -3px); }
.finale-product-label a:focus-visible { outline-offset: 6px; outline: rgb(255, 255, 255) solid 2px; }
@media (max-width: 900px) {
.finale-product-label { width: 20vw; top: 66%; }
.finale-still-label { left: 3%; }
.finale-sparkling-label { right: 3%; }
.finale-product-label strong { font-size: 32px; }
.finale-product-label a { font-size: 12px; }
}
@media (max-width: 700px) {
.flow-page .product-finale { height: 330svh; }
.finale-return-world > img { object-position: center center; }
.finale-return-fallback { height: 52vh; bottom: 16vh; }
.sparkling-effervescence { bottom: 99%; }
.finale-end-copy { width: 90vw; top: 10%; }
.finale-end-copy > p { margin-bottom: 18px; font-size: 9px; line-height: 1.5; }
.flow-page .finale-end-copy h2 { font-size: clamp(42px, 12vw, 58px); }
.finale-product-label { width: 44%; top: auto; bottom: 3%; }
.finale-still-label { left: 4%; }
.finale-sparkling-label { right: 4%; }
.finale-product-label p { margin-bottom: 8px; }
.finale-product-label strong { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .product-finale { height: auto; }
.product-reveal { --product-rise: 1; --pair-progress: 1; --final-copy: 1; min-height: 100svh; position: relative; }
.finale-return-studio, .finale-return-world { display: none; }
.finale-product-label a svg { transition: none; }
}
.product-reveal { --can-height: min(51svh,620px); --can-gap: min(12vw,220px); --can-bottom: 8svh; }
.finale-sparkling-wrap { position: absolute; bottom: var(--can-bottom); height: var(--can-height); width: calc(var(--can-height)*.38); padding: 0px; border: 0px; background: none; overflow: visible; transform-origin: 50% 100%; left: calc(50% + var(--can-gap)); opacity: var(--pair-progress); transform: translateX(calc(-50% + (1 - var(--pair-progress))*40vw)); pointer-events: auto; cursor: pointer; }
.finale-sparkling-wrap:focus-visible { outline: rgb(208, 237, 255) solid 1px; outline-offset: 12px; border-radius: 16px; }
.finale-can { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(rgba(0, 0, 0, 0.533) 18px 25px 24px); }
.finale-end-copy { top: 13%; }
@media (max-width: 700px) and (max-height: 720px) {
.finale-end-copy { top: 13%; }
}
.finale-end-copy > p.finale-tagline { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 18px; }
.finale-tagline em { font-family: var(--flow-serif); font-weight: 300; }
@media (max-width: 700px) {
.product-reveal { --can-height: 38svh; --can-gap: 20vw; --can-bottom: 23svh; }
.finale-end-copy { top: 14%; }
.finale-end-copy > p.finale-tagline { font-size: 17px; margin-bottom: 13px; }
.flow-page .finale-end-copy h2 { font-size: clamp(36px, 10.5vw, 54px); }
.finale-product-label { bottom: 11%; width: 40%; }
.finale-still-label { left: 8%; }
.finale-sparkling-label { right: 8%; }
}
@media (max-width: 700px) and (max-height: 720px) {
.product-reveal { --can-height: 34svh; --can-bottom: 27svh; }
.finale-end-copy > p.finale-tagline { margin-bottom: 10px; }
.flow-page .finale-end-copy h2 { font-size: 36px; }
}
.finale-return-fallback { height: var(--can-height); bottom: var(--can-bottom); transform: translateX(calc(-50% - var(--pair-progress)*var(--can-gap))); }
@media (prefers-reduced-motion: reduce) {
.sparkling-effervescence i:nth-child(n+9) { display: none; }
}
.finale-recap { position: absolute; z-index: 8; top: 32%; left: 7%; width: 31%; max-width: 490px; margin: 0px; padding: 0px; background: none; color: rgb(255, 255, 255); font: 300 clamp(28px, 3.5vw, 58px) / 1.08 Gotham, sans-serif; letter-spacing: -0.055em; opacity: var(--recap-copy,0); transform: translateY(calc((1 - var(--recap-copy,0))*16px)); pointer-events: none; text-shadow: rgba(16, 24, 32, 0.2) 0px 2px 18px; }
.finale-recap > em, .finale-recap > span { display: block; }
.finale-recap > em { font: italic 300 1.06em/1.2 var(--flow-serif); letter-spacing: -0.045em; margin-top: 0.1em; }
@media (max-width: 700px) {
.finale-recap { top: 16%; left: 8%; width: 84%; max-width: none; text-align: center; font-size: clamp(28px, 8vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
.finale-recap { display: none; }
}
.finale-reduced-recap { display: none; }
@media (prefers-reduced-motion: reduce) {
.finale-motion-tagline { display: none; }
.finale-reduced-recap { display: inline; }
}
.flow-source-reveal[aria-hidden="true"] .butterfly-wings i, .flow-source-reveal[aria-hidden="true"] .distant-bird, .flow-source-reveal[aria-hidden="true"] .distant-bird i, .flow-source-reveal[aria-hidden="true"] .flow-butterfly, .motion-paused .distant-bird, .motion-paused .distant-bird i { animation-play-state: paused; }
.natural-morphos { position: absolute; inset: 0px; z-index: 1; pointer-events: none; overflow: hidden; perspective: 900px; }
.natural-morpho { position: absolute; left: 0px; top: 0px; width: 17px; height: 16px; opacity: 0; will-change: transform; filter: blur(0.23px); }
.natural-morpho:nth-child(2) { width: 13px; height: 12px; }
.natural-morpho:nth-child(3) { width: 11px; height: 10px; }
.natural-wings { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(38deg); }
.natural-wings i { position: absolute; inset: 0px auto 0px 0px; width: 50%; height: 100%; transform-origin: right center; transform-style: preserve-3d; }
.natural-wings i + i { left: 50%; transform-origin: left center; }
.natural-wings i::after, .natural-wings i::before { content: ""; position: absolute; inset: 0px; background: url("../assets/brand/butterfly.png") 0px center / 200% 100% no-repeat; backface-visibility: hidden; filter: saturate(0.72) brightness(0.72); }
.natural-wings i + i::after, .natural-wings i + i::before { background-position: 100% center; }
.natural-wings i::after { transform: rotateY(180deg); filter: sepia(1) saturate(0.45) brightness(0.42); }
.natural-wings b { position: absolute; left: 48%; top: 29%; width: 5%; height: 48%; background: rgb(41, 37, 31); border-radius: 50%; transform: translateZ(0.2px); }
@media (prefers-reduced-motion: reduce) {
.natural-morpho { display: none; }
}
.flow-open-button { position: absolute; z-index: 4; left: 50%; bottom: 12%; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; padding: 0px; color: white; border: 0px; background: none; text-align: left; font-size: 13px; white-space: nowrap; }
.flow-open-button small { display: block; font-size: 7px; letter-spacing: 1.6px; margin-top: 6px; color: rgba(255, 255, 255, 0.596); }
.flow-open-button:hover .open-button-ring { background: rgba(255, 255, 255, 0.125); transform: rotate(45deg); }
.flow-controls { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
.flow-controls { display: flex; }
}
.flow-controls button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.376); border-radius: 50%; background: rgba(255, 255, 255, 0.03); color: white; }
.flow-controls button:hover { background: rgba(255, 255, 255, 0.145); }
.flow-butterflies { position: absolute; inset: 0px; perspective: 1000px; z-index: 1; overflow: hidden; }
.flow-butterfly { position: absolute; animation: 24s linear 0s infinite normal none running distant-flight; will-change: transform; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.flow-butterfly { opacity: 0.55; }
}
.flow-eyebrow { font-size: 10px; letter-spacing: 1.8px; margin: 0px 0px 28px; }
.flow-lifestyle { background: var(--paper); color: var(--ink); padding: 120px 6% 90px; }
.water-heading > .flow-eyebrow { grid-column: 1 / -1; }
.flow-water { padding: 40px 8% 100px; background: var(--paper); color: var(--ink); }
.flow-footer { background: rgb(17, 27, 35); padding: 45px 6%; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.flow-footer img { width: 145px; height: auto; filter: brightness(0) invert(1); }
.flow-footer > span { font-size: 8px; letter-spacing: 1.4px; }
.flow-footer > a { display: flex; gap: 15px; align-items: center; font-size: 11px; }
.motion-paused .butterfly-wings i, .motion-paused .flow-butterfly { animation-play-state: paused; }
@media (max-width: 700px) {
.flow-open-button { bottom: 12%; font-size: 11px; }
.flow-open-button small { font-size: 6px; }
.flow-controls { gap: 6px; }
.flow-controls button { width: 30px; height: 30px; }
.flow-controls svg { width: 13px; }
.flow-lifestyle, .water-story { padding: 75px 6% 65px; }
.flow-eyebrow { font-size: 8px; margin-bottom: 23px; letter-spacing: 1.4px; }
.flow-water { padding: 20px 6% 60px; }
.flow-water h2 { font-size: 47px; letter-spacing: -2px; }
.flow-footer { padding: 35px 6%; flex-wrap: wrap; gap: 25px; }
.flow-footer img { width: 130px; }
.flow-footer > a { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.butterfly-wings i, .flow-butterfly, .molecule-float, .water-temperature i, .water-transport i { animation: auto ease 0s 1 normal none running none; }
}
.flow-page .flow-eyebrow { color: var(--brand-reserve); font-weight: 500; }
.flow-page .flow-stage a:focus-visible, .flow-page .flow-stage button:focus-visible, .flow-page .morpho-radio button:focus-visible, .flow-page .water-cinema a:focus-visible, .flow-page .water-cinema button:focus-visible { outline-color: var(--brand-flight); }
.flow-page .flow-footer { background-size: 250% 250%; animation: 32s ease-in-out 0s infinite alternate none running morpho-deep-tide; }
.flow-page .water-cinema { background: var(--brand-premium); }
.flow-page .water-cinema, .flow-page .water-cinema h2 { color: var(--brand-purity); }
.flow-page .water-cinema h2 em { font-family: var(--flow-serif); font-weight: 300; }
.flow-page .water-cinema-formula { color: rgba(208, 237, 255, 0.024); -webkit-text-stroke-color: rgba(208, 237, 255, 0.463); }
.flow-page .water-cinema-formula { opacity: 0.36; font-size: clamp(160px, 25vw, 380px); top: 18%; }
.flow-page .water-cinema-number { color: rgba(255, 255, 255, 0.85); }
.flow-page .water-cinema-description { color: rgba(255, 255, 255, 0.71); }
.flow-page .water-motion-control { border-color: rgba(208, 237, 255, 0.4); }
.flow-page .morpho-radio { color: white; background: rgba(16, 24, 32, 0.91); border-color: rgba(208, 237, 255, 0.14); }
.flow-page .morpho-radio { transition: opacity 0.45s, visibility 0.45s; }
.flow-page .radio-brand { color: rgba(208, 237, 255, 0.72); }
.flow-page .radio-brand i { background: var(--brand-flight); }
.flow-page .radio-artist { color: rgba(255, 255, 255, 0.6); }
.flow-page .radio-buttons button { color: white; }
.flow-page .radio-buttons button.radio-play { border-color: rgba(208, 237, 255, 0.29); }
.water-cinema [data-scroll-reading="true"], [data-shot="wellbeing"] [data-scroll-reading="true"] { --read-rest-opacity: .3; }
.bluezone-journey [data-scroll-reading="true"] { --read-rest-opacity: .32; }
.flow-page .morpho-radio { background: none; border: 0px; box-shadow: none; backdrop-filter: none; border-radius: 0px; padding-left: 0px; padding-right: 0px; transition: color 0.8s; mix-blend-mode: difference; }
.flow-page .morpho-radio, .flow-page .morpho-radio[data-tone="light"] { color: var(--brand-purity); }
.flow-page .morpho-radio .radio-buttons button:disabled { opacity: 0.42; }
.flow-page .morpho-radio .radio-artist, .flow-page .morpho-radio .radio-brand, .flow-page .morpho-radio .radio-buttons button { color: inherit; }
.flow-page .morpho-radio .radio-brand { opacity: 0.7; }
.flow-page .morpho-radio .radio-artist { opacity: 0.65; }
.flow-page .morpho-radio .radio-brand i { background: currentcolor; }
.flow-page .morpho-radio .radio-buttons button.radio-play { border-color: currentcolor; }
.flow-page .morpho-radio button:focus-visible { outline-color: currentcolor; }
.flow-page .flow-stage::after, .flow-page .water-cinema-stage::after { content: ""; position: absolute; z-index: 5; inset: auto 0px 0px; height: 42vh; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); opacity: var(--scene-exit,0); }
.flow-page .water-cinema { background: var(--flow-surface); }
.flow-page .water-cinema-stage::before { content: ""; position: absolute; z-index: 3; inset: 0px 0px auto; height: 15vh; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.4), transparent); opacity: var(--scene-entry,0); }
.flow-page .water-cinema-formula { top: 19%; }
.flow-page .water-cinema-number { top: 20%; }
@media (max-width: 700px) {
.flow-page .water-cinema-formula { top: 23%; }
.flow-page .water-cinema-number { top: 24%; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .flow-stage::after, .flow-page .water-cinema-stage::after, .flow-page .water-cinema-stage::before { display: none; }
}
@media (max-width: 700px) {
.flow-locale[lang="es"] .water-cinema:not(.mineral-chapter) h2 { font-size: 44px; }
}
.flow-page .flow-open-button { left: 6%; bottom: 20%; transform: none; font-size: 12px; gap: 17px; }
@media (max-width: 700px) {
.flow-page .flow-open-button { left: 6%; bottom: 13%; font-size: 11px; gap: 12px; }
}
.flow-page .open-button-ring { width: 48px; height: 48px; }
.flow-page .flow-open-button small { margin-top: 8px; }
@media (max-width: 700px) {
.flow-page .open-button-ring { width: 39px; height: 39px; }
}
.flow-page .morpho-radio.radio-is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.flow-page .territory-journey { height: 350svh; position: relative; background: var(--brand-premium); color: white; padding: 0px; }
.flow-page .territory-everyday { height: 250svh; }
.territory-anchor { position: absolute; top: 0px; }
.territory-stage { position: sticky; top: 0px; height: 100svh; min-height: 650px; overflow: hidden; isolation: isolate; }
.territory-panel { position: absolute; inset: 0px; opacity: var(--panel-opacity,0); overflow: hidden; }
.territory-panel:first-child { --panel-opacity: 1; --copy-opacity: 1; }
.territory-image { position: absolute; inset: -7%; width: 114%; height: 114%; max-width: none; object-fit: cover; transform: scale(calc(1.06 - var(--panel-drift,0)*.06)) translate3d(calc(var(--panel-drift,0)*-2%),calc(var(--panel-drift,0)*-2%),0); will-change: transform; }
.territory-shade { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(16, 24, 32, 0.72), transparent 85%), linear-gradient(0deg, rgb(16, 24, 32), rgba(16, 24, 32, 0.094) 45%, rgba(16, 24, 32, 0.396)); }
.territory-copy { position: absolute; left: 7%; bottom: 21%; max-width: 850px; right: 7%; opacity: var(--copy-opacity); transform: translateY(var(--copy-rise,0)); }
.territory-kicker { font-size: 12px; letter-spacing: 0.18em; margin: 0px 0px 26px; }
.flow-page .territory-copy h2 { font: 300 clamp(48px, 6.5vw, 112px) / 1.04 Gotham, sans-serif; letter-spacing: -0.06em; margin: 0px; color: white; }
.territory-copy h2 em { font-family: var(--flow-serif); font-weight: 300; }
.territory-description { font-size: 17px; line-height: 1.8; max-width: 490px; margin: 28px 0px 0px; color: rgba(255, 255, 255, 0.81); }
.territory-copy a { display: inline-flex; align-items: center; gap: 32px; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.533); padding: 14px 0px; margin-top: 16px; }
.territory-caption { position: absolute; right: 7%; bottom: 24%; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.6); }
.territory-navigation { position: absolute; left: 7%; bottom: 10%; right: 7%; display: flex; gap: 28px; align-items: center; font-size: 10px; letter-spacing: 0.14em; }
.territory-navigation > div:first-child { display: flex; gap: 18px; }
.territory-navigation button { background: none; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; color: rgba(255, 255, 255, 0.4); padding: 12px 0px; font-size: 12px; }
.territory-navigation button[aria-current] { color: white; border-color: white; }
.territory-track { height: 1px; background: rgba(255, 255, 255, 0.2); flex: 1 1 0%; }
.territory-track i { display: block; width: var(--territory-progress,0); height: 1px; background: white; }
.territory-journey a:focus-visible, .territory-journey button:focus-visible { outline: white solid 2px; outline-offset: 5px; }
.flow-page .water-cinema-stage::after { background: linear-gradient(transparent,var(--brand-premium)); height: 22vh; }
.flow-page .water-cinema-stage::before { background: linear-gradient(var(--brand-premium),transparent); opacity: 1; height: 18vh; }
@media (max-width: 700px) {
.flow-page .territory-journey { height: 330svh; }
.flow-page .territory-everyday { height: 230svh; }
.territory-stage { min-height: 660px; }
.territory-copy { left: 6%; right: 6%; bottom: 22%; }
.flow-page .territory-copy h2 { font-size: clamp(40px, 10vw, 58px); }
.flow-page .territory-copy h2 { font-size: clamp(40px, 11vw, 58px); }
.territory-kicker { font-size: 10px; line-height: 1.7; margin-bottom: 20px; letter-spacing: 0.1em; }
.territory-description { font-size: 15px; line-height: 1.75; max-width: 330px; margin-top: 22px; }
.territory-caption { display: none; }
.territory-navigation { left: 6%; right: 6%; bottom: 12%; gap: 15px; font-size: 8px; }
.territory-navigation > div:first-child { gap: 12px; }
.territory-copy a { font-size: 13px; }
.territory-everyday .territory-panel:first-child .territory-image { object-position: 65% center; }
}
.territory-everyday .territory-panel:first-child .territory-image { inset: 50% 8% auto auto; width: min(38vw, 500px); height: auto; max-height: 74svh; object-fit: contain; object-position: center center; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
.territory-panel { transition: none; }
}
.flow-page > .bluezone-journey { position: relative; height: 300svh; z-index: 2; background: transparent; color: rgb(255, 255, 255); }
.bluezone-stage { position: sticky; top: 0px; height: 100svh; overflow: hidden; background: radial-gradient(at 76% 42%, rgb(35, 71, 97) 0px, rgb(20, 43, 62) 39%, rgb(16, 24, 32) 76%); }
.bz-globe { position: absolute; width: 70%; height: 108%; left: 35%; top: -4%; transition: opacity 0.5s; }
.bz-globe canvas { width: 100%; height: 100%; display: block; }
.bz-orbit { display: none; }
@media (max-width: 700px) {
.bz-orbit { display: none; }
}
.bluezone-stage::after { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(16, 24, 32), rgba(16, 24, 32, 0.91) 25%, rgba(16, 24, 32, 0.44) 42%, transparent 62%); }
.bz-bottom, .bz-top { position: absolute; left: 7%; right: 7%; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: 0.2em; color: rgba(208, 237, 255, 0.71); z-index: 3; }
.bz-top { top: 19%; }
.bz-bottom { bottom: 6%; }
.bz-bottom a { letter-spacing: 0.04em; }
.bz-copy { position: absolute; left: 7%; top: 31%; width: 43%; max-width: 670px; z-index: 2; transition: opacity 0.5s, transform 0.7s; opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); }
.bz-copy .bz-eyebrow { font-size: 9px; letter-spacing: 0.2em; color: rgba(208, 237, 255, 0.72); margin: 0px 0px 28px; line-height: 1.8; }
.flow-page .bz-copy h2 { font-family: Gotham, Arial, sans-serif; font-weight: 300; font-size: clamp(40px, 5.2vw, 88px); line-height: 1.04; letter-spacing: -0.055em; margin: 0px 0px 27px; }
.flow-page .bz-copy h2 em { display: block; font-family: var(--flow-serif); font-weight: 300; line-height: 1.2; letter-spacing: -0.055em; }
.bz-copy > p:not(.bz-eyebrow) { font-size: clamp(13px, 1.1vw, 17px); line-height: 1.8; max-width: 410px; color: rgba(208, 237, 255, 0.71); margin: 0px; }
.bz-scroll { display: block; margin-top: 32px; font-size: 9px; letter-spacing: 0.18em; color: rgba(208, 237, 255, 0.61); }
.bz-pin { position: absolute; color: rgb(255, 255, 255); white-space: nowrap; font-size: 11px; letter-spacing: 0.02em; padding: 0px 0px 0px 18px; text-shadow: rgb(0, 0, 0) 0px 2px 8px; pointer-events: none; opacity: 0; transform: translateY(-50%); }
.bz-pin small { display: block; color: rgba(208, 237, 255, 0.61); font-size: 8px; margin-top: 4px; }
.bz-pin[data-active="true"] { color: rgb(255, 255, 255); }
@media (max-width: 700px) {
.bz-pin[data-active="true"] { color: rgb(255, 255, 255); text-shadow: rgb(16, 24, 32) 0px 1px 5px; }
}
.bz-index { position: absolute; left: 7%; right: 7%; bottom: 13%; z-index: 2; transition: opacity 0.4s; }
.bz-index > p { font-size: 8px; letter-spacing: 0.2em; color: rgba(208, 237, 255, 0.44); margin: 0px 0px 18px; }
.bz-index ol { list-style: none; margin: 0px; padding: 0px; display: flex; gap: 3vw; max-width: 820px; }
.bz-index li { flex: 1 1 0%; border-top: 1px solid rgba(208, 237, 255, 0.17); padding-top: 12px; display: grid; grid-template-columns: 20px 1fr; gap: 6px; color: rgba(208, 237, 255, 0.4); transition: color 0.4s, border-color 0.4s; }
.bz-index li[data-active="true"] { color: rgb(255, 255, 255); border-color: rgb(114, 199, 255); }
.bz-index li span { font-size: 8px; padding-top: 2px; }
.bz-index b { font-size: 11px; font-weight: 400; }
.bz-index small { font-size: 8px; grid-column: 2; }
.bz-nicoya { opacity: 0; pointer-events: none; transform: translateY(20px); top: 29%; width: 44%; }
[data-chapter="2"] .bz-world { opacity: 0; pointer-events: none; transform: translateY(-20px); }
[data-chapter="2"] .bz-nicoya { opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); pointer-events: auto; transform: none; }
.bz-nicoya { opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); pointer-events: auto; transform: none; }
[data-chapter="2"] .bz-index { opacity: 0; pointer-events: none; }
.bz-habits { margin-top: 28px; display: grid; gap: 12px; font-size: 9px; color: rgba(208, 237, 255, 0.46); }
.bz-habits b { font-size: 12px; font-weight: 400; margin-left: 18px; }
.bz-habits b, .bz-nicoya > a { color: rgb(255, 255, 255); display: inline-block; }
.bz-nicoya > a { margin-top: 25px; font-size: 10px; border-bottom: 1px solid rgba(114, 199, 255, 0.36); padding-bottom: 8px; }
.bz-progress { position: absolute; bottom: 0px; left: 0px; width: var(--bz-progress,0); height: 1px; background: rgba(114, 199, 255, 0.44); }
.flow-page > .territory-journey.territory-film { height: 365svh; }
.flow-page .territory-closing { height: 145svh; }
[data-fallback="true"] .bz-globe { display: none; }
[data-fallback="true"] .bz-index { opacity: 1; }
@media (max-width: 700px) {
.flow-page > .bluezone-journey { height: 300svh; }
.bz-top { top: 14%; font-size: 8px; left: 6%; right: 6%; }
.bz-top > span:last-child { display: none; }
.bz-globe { width: 112%; height: 62%; left: -6%; top: 6%; opacity: 0.9; }
.bz-copy { left: 7%; top: 56%; width: 86%; max-width: none; }
.bz-copy .bz-eyebrow { font-size: 7px; margin-bottom: 10px; }
.flow-page .bz-copy h2 { font-size: clamp(32px, 9vw, 46px); margin-bottom: 13px; line-height: 1.02; }
.bz-copy > p:not(.bz-eyebrow) { font-size: 11px; line-height: 1.65; max-width: 330px; }
.bz-scroll { display: none; }
}
@media (max-height: 650px) and (min-width: 701px) {
.bz-scroll { display: none; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
.bz-scroll { display: none; }
}
@media (max-width: 700px) {
.bz-index { left: 7%; right: 7%; bottom: 9%; }
.bz-index > p { display: none; }
.bz-index ol { gap: 10px; }
.bz-index li { display: block; padding-top: 7px; }
}
@media (min-width: 701px) {
.bz-index li { display: block; }
}
@media (max-width: 700px) {
.bz-index li > span, .bz-index small { display: none; }
.bz-index b { font-size: 7px; line-height: 1.3; }
.bz-bottom { bottom: 4%; font-size: 7px; left: 7%; right: 7%; }
.bz-pin { font-size: 9px; padding-left: 10px; }
.bz-pin small { font-size: 7px; }
.bz-nicoya { top: 49%; }
.bz-habits { margin-top: 15px; gap: 8px; font-size: 8px; }
.bz-habits b { font-size: 10px; }
.bz-nicoya > a { margin-top: 16px; font-size: 9px; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
.bz-nicoya > a { margin-top: 16px; }
}
@media (max-width: 700px) {
[data-chapter="2"] .bz-globe { opacity: 0.65; top: -5%; }
}
@media (max-height: 650px) and (min-width: 701px) {
.bz-copy { top: 28%; }
.flow-page .bz-copy h2 { font-size: 42px; }
.bz-copy .bz-eyebrow { margin-bottom: 12px; }
.bz-copy > p:not(.bz-eyebrow) { font-size: 12px; }
.bz-habits { gap: 7px; }
.bz-habits, .bz-nicoya > a { margin-top: 12px; }
}
@media (max-width: 700px) {
.bz-habits, .bz-nicoya > a { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page > .bluezone-journey { height: auto; }
.bluezone-stage { position: relative; height: auto; min-height: 100svh; padding: 150px 7% 100px; overflow: hidden; }
.bz-globe { width: 60%; height: 600px; left: 40%; top: 50px; opacity: 0.4; }
.bz-copy, .bz-nicoya { top: auto; width: 100%; max-width: 650px; pointer-events: auto; margin-bottom: 50px; transition: none; transform: none !important; }
.bz-copy, .bz-index, .bz-nicoya { position: relative; left: auto; opacity: 1 !important; }
.bz-index { right: auto; bottom: auto; margin: 30px 0px; }
.bz-top { top: 100px; }
.bz-bottom { bottom: 35px; }
.bz-progress, .bz-scroll { display: none; }
.bz-copy[aria-hidden="true"] { visibility: visible; }
}
.flow-page .bluezone-journey h2, .flow-page .bluezone-journey h2 em { color: rgb(255, 255, 255); }
.bz-bottom { left: 42%; }
@media (max-width: 700px) {
.bz-bottom { left: auto; right: 7%; }
.bz-bottom > span { display: none; }
}
.bz-globe { mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 28%); }
@media (max-width: 700px) {
.bz-globe { mask-image: linear-gradient(0deg, transparent, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 85%, transparent); }
}
.flow-page > .bluezone-journey[data-fallback="true"] { height: auto; }
[data-fallback="true"] .bz-copy { position: relative; left: auto; top: auto; width: 100%; opacity: 1; transform: none; margin-bottom: 45px; pointer-events: auto; }
[data-fallback="true"] .bz-index { position: relative; left: auto; right: auto; bottom: auto; }
[data-fallback="true"] .bz-progress { display: none; }
.bluezone-journey[data-fallback="true"] [data-scroll-reading="true"] { --read-progress: 1 !important; }
@media (max-width: 700px) {
.bz-index b { font-size: 9px; }
.bz-pin:not([data-active="true"]) { visibility: hidden; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
.bz-copy { top: 25%; width: 41%; max-width: 650px; }
.bz-copy .bz-eyebrow { margin-bottom: 18px; }
.flow-page .bz-copy h2 { font-size: clamp(34px, min(5.2vw, 8svh), 84px); margin-bottom: 20px; }
.bz-copy > p:not(.bz-eyebrow) { font-size: clamp(12px, min(1.1vw, 1.8svh), 17px); line-height: 1.65; max-width: 440px; }
.bz-index { bottom: 17%; left: 7%; right: 7%; }
.bz-index > p { margin-bottom: 14px; }
.bz-nicoya { top: 24%; }
.flow-page .bz-copy h2.bz-destination-title { font-size: clamp(44px, min(7vw, 11svh), 115px); line-height: 0.9; letter-spacing: -0.06em; margin-bottom: 18px; }
.flow-page .bz-copy h2.bz-destination-title em { line-height: 0.98; }
.bz-habits { display: flex; gap: 20px; margin-top: 20px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
.bz-habits { display: flex; gap: 13px; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
.bz-habits span { flex: 1 1 0%; max-width: 145px; line-height: 1.4; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
.bz-habits span { flex: 1 1 0%; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
.bz-habits b { display: block; margin: 7px 0px 0px; font-size: 10px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
.bz-habits b { display: block; margin: 5px 0px 0px; font-size: 9px; }
.bz-copy { top: 54%; left: 8%; width: 84%; }
.bz-nicoya { top: 47%; }
.flow-page .bz-copy h2.bz-destination-title { font-size: clamp(40px, 7svh, 68px); line-height: 0.85; margin-bottom: 14px; }
.flow-page .bz-copy h2.bz-destination-title em { display: inline; margin-left: 0.15em; line-height: 1; }
.bz-nicoya .bz-eyebrow { margin-bottom: 14px; }
.bz-index { bottom: 13%; }
.bz-copy > p:not(.bz-eyebrow) { font-size: clamp(10px, 1.4svh, 12px); }
}
.bz-morpho-mark { display: block; width: 115px; height: auto; margin-bottom: 12px; opacity: clamp(0,calc((var(--bz-zoom,0) - .6)*3),1); filter: drop-shadow(rgba(16, 24, 32, 0.5) 0px 2px 8px); }
.bz-pin:has(.bz-morpho-mark) { padding-left: 20px; }
.bz-pin:has(.bz-morpho-mark) { padding-left: 0px; text-align: center; transform: translate(-50%, -50%); }
@media (max-width: 700px) {
.bz-morpho-mark { width: 92px; margin-bottom: 8px; }
}
.bz-morpho-mark { width: 108px; }
@media (max-width: 700px) {
.bz-morpho-mark { width: 88px; }
}
.bz-index { max-width: 680px; }
@media (min-width: 701px) {
.bz-index { left: 52%; right: 5%; bottom: 15%; }
.bz-index ol { gap: 16px; }
.bz-index li > span { display: none; }
.bz-index small { display: block; margin-top: 5px; }
.bz-index b { font-size: 10px; }
}
@media (max-width: 700px) {
.bz-index { bottom: 15%; }
.bz-nicoya { top: 48%; }
}
.bz-pin[data-pin="1"] { padding-left: 0px; transform: translate(-105%, -110%); }
.bz-pin[data-pin="2"] { transform: translate(5px, 8px); }
.bz-nicoya-target { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 2; }
.bz-nicoya-target b { display: block; width: 100%; height: 100%; border-radius: 50%; background: rgb(233, 247, 255); box-shadow: rgba(179, 227, 255, 0.79) 0px 0px 9px 3px, rgba(147, 213, 255, 0.44) 0px 0px 28px 12px; animation: 2.4s ease-in-out 0s infinite normal none paused nicoya-light; }
@media (prefers-reduced-motion: reduce) {
.bz-nicoya-target b { animation: auto ease 0s 1 normal none running none; }
}
.bluezone-stage[data-offscreen="false"] .bz-nicoya-target b { animation-play-state: running; }
.bz-pin:has(.bz-morpho-mark) { transform: translate(-50%,calc(-50% - var(--bz-zoom,0)*70px)); }
@media (max-width: 700px) {
.bz-pin:has(.bz-morpho-mark) { transform: translate(-50%,calc(-50% - var(--bz-zoom,0)*55px)); }
.bz-nicoya-target { width: 12px; height: 12px; }
}
.flow-page > .bluezone-life { position: relative; height: 410svh; z-index: 2; background: transparent; color: rgb(255, 255, 255); }
.bluezone-life-stage { position: sticky; top: 0px; height: 100svh; overflow: hidden; isolation: isolate; background: rgb(16, 24, 32); }
.blue-life-films, .blue-life-shade, .blue-life-shot { position: absolute; inset: 0px; pointer-events: none; }
.blue-life-shot { opacity: var(--film-opacity,0); will-change: opacity; }
.blue-life-shot > img, .blue-life-shot > video { position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.blue-life-shade { background: linear-gradient(90deg, rgba(11, 22, 33, 0.79), rgba(11, 22, 33, 0.57) 32%, rgba(16, 24, 32, 0.15) 73%, rgba(16, 24, 32, 0.07)), linear-gradient(rgba(16, 24, 32, 0.48), transparent 28%, transparent 65%, rgba(16, 24, 32, 0.77)); }
@media (max-width: 700px) {
.blue-life-shade { background: linear-gradient(rgba(16, 24, 32, 0.5), rgba(16, 24, 32, 0.15) 24%, rgba(16, 24, 32, 0.53) 44%, rgba(16, 24, 32, 0.77) 75%, rgba(16, 24, 32, 0.93)), linear-gradient(90deg, rgba(16, 24, 32, 0.2), transparent); }
}
@media (prefers-reduced-motion: reduce) {
.blue-life-shade { background: rgba(16, 24, 32, 0.46); }
}
.blue-life-top { position: absolute; z-index: 3; left: 7%; right: 7%; top: 19%; display: flex; justify-content: space-between; gap: 24px; font-size: 10px; letter-spacing: 0.17em; color: rgba(208, 237, 255, 0.7); opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); }
.blue-life-stories { position: absolute; z-index: 2; left: 7%; top: 32%; width: 52%; height: 52%; max-width: 780px; }
.blue-life-copy { position: absolute; inset: 0px; opacity: calc(var(--life-copy,0)*var(--handoff-copy,1)*var(--handoff-exit-copy,1)); transform: translateY(var(--life-rise,0)); will-change: opacity, transform; }
.blue-life-kicker { margin: 0px 0px 22px; font-size: 10px; letter-spacing: 0.17em; color: rgba(208, 237, 255, 0.75); }
.flow-page .blue-life-copy h2 { margin: 0px 0px 28px; font: 300 clamp(45px, min(6.4vw, 10svh), 104px) / 1.02 Gotham, sans-serif; letter-spacing: -0.055em; color: rgb(255, 255, 255); }
.flow-page .blue-life-copy h2 em { display: block; font: italic 300 1.08em/1.12 var(--flow-serif); letter-spacing: -0.045em; }
.blue-life-description { max-width: 495px; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.8; color: rgb(255, 255, 255); margin: 0px; text-shadow: rgba(16, 24, 32, 0.3) 0px 1px 18px; }
.blue-life-description[data-scroll-reading] { --read-rest-opacity: .43; }
.blue-life-bottom { position: absolute; z-index: 3; bottom: 7%; left: 42%; right: 7%; display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); }
.blue-life-bottom a { display: flex; align-items: center; gap: 16px; font-size: 11px; color: rgba(208, 237, 255, 0.804); padding: 8px 0px; border-bottom: 1px solid rgba(208, 237, 255, 0.32); }
.blue-life-beats { display: flex; gap: 8px; }
.blue-life-beats i { width: 22px; height: 1px; background: rgba(208, 237, 255, 0.333); transition: background 0.5s, width 0.5s; }
.blue-life-beats i[data-active="true"] { width: 44px; background: rgb(255, 255, 255); }
@media (max-width: 700px) {
.blue-life-top { top: 15%; left: 8%; right: 8%; font-size: 8px; }
.blue-life-top > span:last-child { display: none; }
.blue-life-stories { left: 8%; top: 40%; width: 84%; height: 44%; }
.blue-life-kicker { font-size: 9px; margin-bottom: 18px; }
.flow-page .blue-life-copy h2 { font-size: clamp(38px, min(11vw, 6.1svh), 58px); margin-bottom: 22px; line-height: 1.02; }
.blue-life-description { font-size: 13px; line-height: 1.75; max-width: 360px; }
}
@media (min-width: 701px) and (max-height: 650px) {
.blue-life-description { font-size: 13px; line-height: 1.6; max-width: 470px; }
}
@media (max-width: 700px) {
.blue-life-bottom { bottom: 5%; left: auto; right: 8%; }
.blue-life-bottom a { font-size: 10px; }
.blue-life-beats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.blue-life-beats { display: none; }
}
@media (max-width: 700px) and (max-height: 740px) {
.blue-life-stories { top: 33%; }
.blue-life-description { font-size: 12px; line-height: 1.65; }
.flow-page .blue-life-copy h2 { margin-bottom: 18px; }
}
@media (min-width: 701px) and (max-height: 650px) {
.flow-page .blue-life-copy h2 { margin-bottom: 18px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.blue-life-kicker { margin-bottom: 14px; }
}
@media (min-width: 701px) and (max-height: 650px) {
.blue-life-kicker { margin-bottom: 14px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.blue-life-bottom { bottom: 4%; }
}
@media (min-width: 701px) and (max-height: 650px) {
.blue-life-stories { top: 28%; width: 53%; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page > .bluezone-life { height: auto; }
.bluezone-life-stage { position: relative; height: auto; min-height: 100svh; padding: 150px 8% 110px; }
.blue-life-top { position: relative; inset: auto; margin-bottom: 55px; }
.blue-life-shot > video { display: none; }
.blue-life-films { opacity: 0.32; }
.blue-life-stories { position: relative; inset: auto; width: 100%; height: auto; max-width: 650px; }
.blue-life-copy { position: relative; inset: auto; margin-bottom: 70px; opacity: 1 !important; transform: none !important; }
.blue-life-description { max-width: 500px; }
.blue-life-bottom { left: auto; right: 8%; bottom: 40px; }
}
.flow-page > .territory-journey { z-index: 2; background: transparent; }
.flow-page > .water-cinema { z-index: 3; background: transparent; }
.flow-page > .territory-everyday { z-index: 4; }
.flow-page > .product-finale { z-index: 5; position: relative; }
.flow-page .territory-stage, .flow-page .water-cinema-stage { background: var(--brand-premium); }
.flow-page .territory-copy { filter: none; }
.flow-page .territory-copy { opacity: calc(var(--copy-opacity,1)*var(--handoff-copy,1)*var(--handoff-exit-copy,1)); }
.flow-page .water-cinema-body { opacity: calc(var(--water-body)*var(--handoff-copy,1)*var(--handoff-exit-copy,1)); }
.flow-page > .product-finale { background: transparent; }
.flow-page .territory-stage, .flow-page .water-cinema-stage { height: 100svh; min-height: 0px; }
.flow-page .product-reveal > .water-choice-heading, .flow-page .product-reveal > .water-editions { opacity: var(--handoff-copy,1); }
@media (max-height: 650px) {
.flow-page .territory-copy { bottom: 16%; }
.flow-page .territory-copy h2 { font-size: clamp(32px, 7vh, 58px); }
.territory-description { font-size: 13px; line-height: 1.6; margin-top: 16px; max-width: 520px; }
.territory-kicker { margin-bottom: 14px; }
.flow-page .water-cinema h2 { font-size: clamp(34px, 8vh, 60px); }
}
.territory-everyday .territory-panel:first-child { background: rgb(16, 24, 32); }
.territory-everyday .territory-panel:first-child .territory-shade { display: none; }
.territory-everyday .territory-panel:first-child .territory-copy { right: 51%; bottom: 26%; }
@media (max-width: 700px) {
.territory-everyday .territory-panel:first-child .territory-copy { inset: 56% 6% auto; }
}
.flow-page .territory-everyday .territory-panel:first-child h2 { font-size: clamp(44px, 5.4vw, 86px); }
.territory-everyday .territory-panel:first-child .territory-caption { display: none; }
@media (max-width: 700px) {
.territory-everyday .territory-panel:first-child .territory-image { top: 90px; right: 6%; width: 74%; max-height: 38svh; transform: none; }
.flow-page .territory-everyday .territory-panel:first-child h2 { font-size: clamp(36px, 10vw, 48px); }
.territory-everyday .territory-panel:first-child .territory-description { font-size: 13px; line-height: 1.6; margin-top: 16px; max-width: 340px; }
.territory-everyday .territory-panel:first-child .territory-kicker { font-size: 9px; margin-bottom: 14px; }
}
.flow-footer > .flow-brand-signature { font-size: 20px; letter-spacing: -0.02em; }
.flow-brand-signature em { font-family: var(--flow-serif); font-weight: 300; }
.flow-page .home-offer { position: absolute; top: 85px; right: 5%; max-width: 90%; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; }
.flow-page .home-offer[data-visible="true"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.flow-page .home-offer a { display: flex; align-items: center; gap: 13px; min-height: 36px; color: rgb(208, 237, 255); font-size: 14px; line-height: 1.4; text-decoration: none; }
.home-offer-saving { white-space: nowrap; }
.home-offer strong { font-size: 12px; font-weight: 400; letter-spacing: 0.09em; border: 1px solid rgba(208, 237, 255, 0.314); padding: 5px 9px; white-space: nowrap; }
.home-offer-date { font-size: 12px; color: rgb(186, 203, 213); white-space: nowrap; }
@media (max-width: 360px) {
.home-offer-date { letter-spacing: -0.025em; }
}
.home-offer svg { flex-shrink: 0; transition: transform 0.2s; }
.home-offer a:hover strong { border-color: rgb(208, 237, 255); background: rgba(208, 237, 255, 0.043); }
.home-offer a:hover svg { transform: translate(2px, -2px); }
.flow-page .flow-mobile-menu nav { z-index: 2; }
@media (max-width: 700px) {
.flow-page .home-offer { top: 70px; left: 5%; right: 5%; max-width: none; }
.flow-page .home-offer a { justify-content: center; gap: 10px; min-height: 38px; }
.flow-page:has(.home-offer) .flow-opening-content .flow-copy { top: max(14%, 128px); }
}
@media (max-width: 360px) {
.flow-page .home-offer a { gap: 8px; }
.home-offer strong { padding: 5px 6px; letter-spacing: 0.045em; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .home-offer, .home-offer svg { transition: none; }
}
.morpho-header :is(a, button, .morpho-notch, .morpho-mega) { pointer-events: auto; }
.morpho-header-space { height: 100px; }
.morpho-mega { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: min(1040px, -64px + 100vw); max-height: calc(100dvh - 174px); overflow: auto; overscroll-behavior: contain; background: rgba(16, 24, 32, 0.96); backdrop-filter: blur(26px); border: 1px solid rgba(208, 237, 255, 0.19); border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.333) 0px 22px 70px; color: rgb(255, 255, 255); animation: 0.22s ease 0s 1 normal both running morpho-menu-in; }
@media (max-width: 1150px) {
.morpho-mega { width: calc(-48px + 100vw); }
}
@media (prefers-reduced-motion: reduce) {
.morpho-mega { animation: auto ease 0s 1 normal none running none; }
}
.morpho-mega-body { display: grid; grid-template-columns: 260px minmax(0px, 1fr) 244px; gap: 28px; padding: 28px; }
.morpho-mega-film { margin: 0px; position: relative; min-width: 0px; height: 252px; border-radius: 14px; background: rgb(30, 51, 60); overflow: hidden; }
.morpho-mega-film::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(transparent 35%, rgba(7, 20, 28, 0.667)); pointer-events: none; }
.morpho-mega-film video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.morpho-mega-film figcaption { position: absolute; bottom: 23px; left: 21px; right: 14px; z-index: 1; }
.morpho-mega-film figcaption > span { display: block; font-size: 8px; letter-spacing: 0.17em; margin-bottom: 10px; color: rgb(255, 255, 255); }
.morpho-mega-film figcaption em { font-family: "Publico Headline", Georgia, serif; font-size: 29px; font-weight: 300; letter-spacing: -0.8px; line-height: 1.12; display: block; }
.morpho-header .morpho-mega-film button { position: absolute; z-index: 2; right: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.376); border-radius: 50%; background: rgba(16, 24, 32, 0.44); color: white; }
.morpho-header .morpho-mega-eyebrow { font-size: 9px; letter-spacing: 0.14em; color: rgb(165, 190, 205); margin: 4px 0px 14px; line-height: 1.4; }
.morpho-header .morpho-mega-links nav { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.morpho-mega-links nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 9px 8px; border-radius: 8px; transition: background 0.18s, transform 0.18s; line-height: 1.4; }
.morpho-mega-links nav a:hover { background: rgba(208, 237, 255, 0.07); transform: translateX(2px); }
.morpho-mega-links nav a[aria-current="page"] { color: rgb(208, 237, 255); background: rgba(208, 237, 255, 0.035); }
.morpho-mega-number { font-size: 8px; color: rgb(143, 170, 189); flex-shrink: 0; }
.morpho-mega-links nav a > svg { margin-left: auto; flex-shrink: 0; color: rgba(208, 237, 255, 0.55); }
.morpho-header .morpho-mega-description { margin: 17px 0px 0px; padding-top: 17px; border-top: 1px solid var(--menu-rule); font-size: 11px; line-height: 1.8; color: rgb(169, 189, 202); max-width: 380px; }
.morpho-mega-shop { position: relative; background: linear-gradient(145deg, rgb(222, 243, 255), rgb(208, 237, 255) 65%); color: rgb(16, 24, 32); border: 1px solid rgba(255, 255, 255, 0.44); border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; min-width: 0px; overflow: hidden; }
.morpho-mega-shop-label { display: block; font-size: 8px; letter-spacing: 0.16em; color: rgb(10, 18, 123); }
.morpho-mega-shop-feature { display: grid; grid-template-columns: minmax(0px, 1fr) 66px; align-items: center; gap: 14px; min-height: 140px; margin-top: 12px; }
.morpho-header .morpho-mega-shop h2 { font-family: Gotham, Arial, sans-serif; font-size: 22px; color: rgb(16, 24, 32); font-weight: 300; line-height: 1.18; letter-spacing: -0.7px; margin: 0px; }
.morpho-header .morpho-mega-shop h2 em { display: block; font-family: "Publico Headline", Georgia, serif; font-size: 24px; font-weight: 300; line-height: 1.13; margin-top: 3px; }
.morpho-mega-shop-product { display: grid; place-items: center; min-width: 0px; }
.morpho-mega-shop-product img { display: block; width: 52px; height: 136px; object-fit: contain; transform: rotate(5deg); filter: drop-shadow(rgba(16, 24, 32, 0.145) 0px 10px 10px); pointer-events: none; }
.morpho-header .morpho-mega-shop p { font-size: 10px; line-height: 1.7; margin: 12px 0px 18px; color: rgb(49, 71, 84); }
@media (max-width: 600px) {
.morpho-header .morpho-mega-shop p { font-size: 10px; margin: 8px 0px 16px; }
}
.morpho-header .morpho-mega-shop-cta { position: relative; margin-top: auto; padding: 9px 10px 9px 16px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgb(10, 18, 123); border: 1px solid rgba(255, 255, 255, 0.094); border-radius: 999px; box-shadow: rgba(10, 18, 123, 0.07) 0px 3px 8px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 500; line-height: 1.3; transition: background 0.2s, box-shadow 0.2s; }
.morpho-mega-shop-arrow { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.082); transition: background 0.2s; }
.morpho-mega-shop-arrow svg { transition: transform 0.2s; }
.morpho-header .morpho-mega-shop-cta:hover { background: rgb(17, 29, 146); box-shadow: rgba(10, 18, 123, 0.125) 0px 5px 12px; }
.morpho-mega-shop-cta:hover .morpho-mega-shop-arrow { background: rgba(255, 255, 255, 0.14); }
.morpho-mega-shop-cta:hover svg { transform: translateX(2px); }
.morpho-header .morpho-mega-shop-cta:focus-visible { outline-color: rgb(10, 18, 123); }
.morpho-mega-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 28px; border-top: 1px solid var(--menu-rule); font-size: 10px; }
.morpho-mega-bottom > a { display: flex; align-items: center; gap: 12px; }
.morpho-mega-bottom > a > svg { color: rgb(208, 237, 255); }
.morpho-mega-bottom strong { font-weight: 400; color: rgb(208, 237, 255); margin-left: 5px; }
.morpho-mega-bottom > div { display: flex; align-items: center; gap: 9px; color: rgb(145, 174, 191); font-size: 9px; }
.morpho-mega-bottom > div > a { display: flex; align-items: center; gap: 5px; color: rgb(208, 237, 255); margin-left: 12px; }
@media (max-width: 600px) {
.morpho-mega-bottom > div > a { margin: 0px; font-size: 8px; }
}
.morpho-mega-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.morpho-mega-mobile-tabs { display: none; }
@media (max-width: 600px) {
.morpho-mega-mobile-tabs { padding: 12px 12px 0px; gap: 0px; }
}
.morpho-header[data-open="true"] .home-offer { opacity: 0; visibility: hidden; }
.morpho-header .shop-bag { color: rgb(255, 255, 255); font-size: 11px; min-height: 44px; }
@media (max-width: 1150px) {
.morpho-mega-body { grid-template-columns: 220px minmax(0px, 1fr) 244px; gap: 22px; padding: 24px; }
}
@media (max-width: 1100px) {
.morpho-mega-body { grid-template-columns: minmax(0px, 1fr) 244px; gap: 22px; }
}
@media (max-width: 600px) {
.morpho-mega-body { grid-template-columns: minmax(0px, 1fr); gap: 20px; padding: 16px; }
}
@media (max-width: 1100px) {
.morpho-mega { top: 72px; width: min(720px, -40px + 100vw); }
.morpho-mega-film { grid-column: 1 / -1; height: 168px; }
.morpho-mega-film video { object-position: center 48%; }
.morpho-mega-film figcaption em { font-size: 29px; }
.morpho-mega-mobile-tabs { display: flex; padding: 16px 20px 0px; gap: 6px; }
.morpho-header .morpho-mega-mobile-tabs :is(a, button) { flex: 1 1 0%; min-width: 0px; display: flex; align-items: center; justify-content: center; gap: 3px; line-height: 1.35; min-height: 40px; padding: 8px 10px; font-size: 11px; border-radius: 999px; color: rgb(181, 202, 213); }
.morpho-header .morpho-mega-mobile-tabs button[aria-pressed="true"] { background: rgb(208, 237, 255); color: rgb(16, 24, 32); }
.morpho-mega-bottom > div > span, .morpho-mega-bottom > div > svg { display: none; }
}
@media (max-width: 600px) {
.morpho-header-space { height: 88px; }
.morpho-mega { top: 89px; width: calc(-28px + 100vw); border-radius: 20px; max-height: calc(100dvh - 175px); box-shadow: rgba(0, 0, 0, 0.533) 0px 20px 50px; }
.morpho-header .morpho-mega-mobile-tabs :is(a, button) { font-size: 10px; padding: 8px 7px; min-height: 36px; }
.morpho-mega-film { height: 145px; }
.morpho-mega-film figcaption { left: 17px; bottom: 16px; }
.morpho-mega-film figcaption > span { font-size: 7px; margin-bottom: 6px; }
.morpho-mega-film figcaption em { font-size: 27px; }
.morpho-header .morpho-mega-eyebrow { font-size: 8px; margin: 0px 0px 8px; }
.morpho-header .morpho-mega-links nav { font-size: 12px; }
.morpho-mega-links nav a { min-height: 42px; padding: 9px 4px; }
.morpho-header .morpho-mega-description { font-size: 10px; line-height: 1.65; margin-top: 12px; padding-top: 12px; }
.morpho-mega-shop { padding: 20px; }
.morpho-mega-shop-feature { grid-template-columns: minmax(0px, 1fr) 64px; min-height: 124px; margin-top: 10px; }
.morpho-header .morpho-mega-shop h2 { font-size: 22px; }
.morpho-header .morpho-mega-shop h2 em { font-size: 25px; }
.morpho-mega-shop-product img { width: 46px; height: 120px; }
.morpho-mega-bottom { padding: 16px; gap: 12px; font-size: 9px; }
.morpho-mega-bottom > a { gap: 8px; }
.morpho-mega-bottom > a > span { font-size: 0px; }
.morpho-mega-bottom strong { font-size: 9px; margin: 0px; }
.morpho-header .shop-bag { font-size: 10px; gap: 5px; padding: 9px 0px; }
.morpho-header .shop-bag svg { width: 15px; }
.morpho-header .shop-bag span { font-size: 10px; }
}
@media (max-width: 360px) {
.morpho-mega-bottom { gap: 8px; }
.morpho-mega-bottom svg { width: 13px; }
}
.morpho-header .morpho-mega-mobile-tabs a { color: rgb(208, 237, 255); box-shadow: rgba(208, 237, 255, 0.25) 0px 0px 0px 1px inset; }
.morpho-mega-mobile-tabs a svg { flex-shrink: 0; }
.morpho-mega-mobile-tabs a[aria-current="page"] { background: rgba(208, 237, 255, 0.08); }
@media (max-width: 1100px) {
.morpho-mega { touch-action: pan-y pinch-zoom; }
}
.morpho-outro { --flow-serif: "Publico Headline",Georgia,serif; --footer-copy-size: clamp(14px,1.12vw,17px); position: relative; z-index: 10; background: rgb(16, 24, 32); color: rgb(248, 251, 255); font: 400 16px Gotham, Arial, sans-serif; letter-spacing: normal; }
.morpho-outro * { box-sizing: border-box; }
.morpho-outro a { color: inherit; text-decoration: none; }
.morpho-outro button { cursor: pointer; font: inherit; }
.morpho-outro a, .morpho-outro button { -webkit-tap-highlight-color: transparent; }
.morpho-outro :focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 6px; }
.morpho-outro .flow-footer.morpho-footer { display: block; position: relative; isolation: isolate; overflow: hidden; padding: 72px 6% 120px; background: rgb(16, 24, 32); color: rgb(248, 251, 255); animation: auto ease 0s 1 normal none running none; border-top: 1px solid rgba(208, 237, 255, 0.133); }
.morpho-footer::before { content: ""; position: absolute; z-index: -1; right: -6%; top: 6%; width: min(47vw, 700px); height: 80%; background: rgb(208, 237, 255); opacity: 0.025; mask: url("../assets/brand/emblem.svg") center center / contain no-repeat; pointer-events: none; }
.footer-origin { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: rgb(195, 210, 220); }
.footer-origin > span { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 0.14em; }
.footer-origin i { height: 1px; width: 32px; background: rgba(208, 237, 255, 0.4); }
.footer-origin a { display: flex; align-items: center; gap: 16px; font-size: 12px; }
@media (max-width: 700px) {
.footer-origin a { font-size: 0px; gap: 0px; padding: 8px; }
}
.footer-story { display: grid; grid-template-columns: minmax(0px, 1.5fr) minmax(260px, 0.75fr); gap: 8%; align-items: end; padding: 72px 0px 88px; }
.morpho-outro .footer-signature { margin: 0px; color: rgb(248, 251, 255); font: 400 clamp(76px, 9.3vw, 150px) / 0.93 Gotham, sans-serif; letter-spacing: -0.055em; }
.footer-signature em, .footer-signature span { display: block; }
.morpho-outro .footer-signature em { margin-top: 0.06em; font: italic 300 1.05em/.98 var(--flow-serif); letter-spacing: -0.045em; white-space: nowrap; }
.footer-invitation { max-width: 350px; padding-bottom: 4px; }
.morpho-outro .footer-invitation p { font-size: var(--footer-copy-size); line-height: 1.8; color: rgb(199, 212, 221); margin: 0px 0px 34px; max-width: 320px; }
.footer-invitation a { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-shop { padding: 18px 0px; border-bottom: 1px solid rgba(208, 237, 255, 0.4); font-size: 21px; }
.footer-news { padding-top: 22px; font-size: 14px; color: rgb(199, 212, 221); }
.morpho-footer a { transition: color 0.2s; }
.morpho-footer a:hover { color: rgb(208, 237, 255); }
.morpho-footer a svg { flex-shrink: 0; transition: transform 0.25s; }
.morpho-footer a:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
.footer-story { gap: 6%; grid-template-columns: minmax(0px, 1.3fr) minmax(240px, 1fr); }
.morpho-outro .footer-signature { font-size: clamp(70px, 9vw, 90px); }
}
@media (max-width: 700px) {
.morpho-outro .flow-footer.morpho-footer { padding: 48px 7% 120px; }
.footer-origin > span { font-size: 10px; letter-spacing: 0.08em; gap: 10px; }
.footer-origin i { width: 18px; }
.footer-origin a svg { width: 20px; height: 20px; }
.footer-story { display: block; padding: 56px 0px 48px; }
.morpho-outro .footer-signature { font-size: clamp(65px, 18vw, 108px); }
.footer-invitation { max-width: none; margin-top: 42px; }
.morpho-outro .footer-invitation p { font-size: 15px; line-height: 1.7; max-width: 290px; margin-bottom: 18px; }
.footer-shop { font-size: 19px; }
.footer-news { font-size: 14px; padding-top: 20px; }
.morpho-footer::before { top: 26%; right: -35%; width: 90vw; height: 50%; }
}
@media (prefers-reduced-motion: reduce) {
.morpho-footer a, .morpho-footer a svg { transition: none; }
}
.footer-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding: 55px 0px 45px; border-top: 1px solid rgba(208, 237, 255, 0.133); scroll-margin-top: 110px; }
.footer-eyebrow { font-size: 11px; letter-spacing: 0.2em; color: rgb(169, 197, 214); }
.morpho-outro .footer-connect h3 { font: 300 clamp(36px, 4vw, 64px) / 1.1 Gotham, sans-serif; letter-spacing: -0.04em; margin: 20px 0px; }
.footer-connect h3 em { font-family: var(--flow-serif); font-weight: 300; }
.morpho-outro .footer-connect-copy > p { font-size: var(--footer-copy-size); line-height: 1.8; color: rgb(199, 212, 221); margin: 1em 0px; }
.footer-socials { display: flex; gap: 14px; margin-top: 30px; }
.footer-socials a { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(208, 237, 255, 0.27); border-radius: 50%; background: linear-gradient(145deg, rgba(208, 237, 255, 0.047), transparent); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.footer-socials svg { width: 22px; height: 22px; stroke-width: 1.5; }
.footer-socials a:hover { background: rgba(208, 237, 255, 0.094); border-color: rgb(208, 237, 255); transform: translateY(-3px); }
.footer-subscribe { align-self: center; min-width: 0px; }
.footer-subscribe > label { font-size: 14px; color: rgb(208, 237, 255); }
.footer-email-line { display: flex; border-bottom: 1px solid rgba(208, 237, 255, 0.467); margin-top: 12px; align-items: center; gap: 16px; padding-bottom: 16px; }
.footer-email-line input { width: 100%; min-width: 0px; background: none; border: 0px; padding: 8px 0px; color: white; font: 400 20px Gotham, sans-serif; outline-offset: 5px; }
.footer-email-line input::placeholder { color: rgb(150, 167, 180); }
.footer-email-line > button { display: flex; align-items: center; gap: 12px; white-space: nowrap; background: none; color: white; border: 0px; padding: 12px 0px; font: 400 14px Gotham, sans-serif; }
.footer-email-line button:disabled { opacity: 0.5; }
.footer-consent { font-size: 12px; line-height: 1.8; color: rgb(174, 191, 203); margin-top: 18px; }
.footer-consent button, .footer-legal button { background: none; border: 0px; padding: 0px; color: inherit; font: inherit; cursor: pointer; }
.footer-consent button { text-decoration: underline; text-underline-offset: 4px; }
.footer-form-status { font-size: 14px; line-height: 1.6; min-height: 24px; color: rgb(208, 237, 255); }
.footer-legal { display: flex; justify-content: space-between; gap: 24px; padding: 26px 0px; border-top: 1px solid rgba(208, 237, 255, 0.133); font-size: 12px; color: rgb(176, 194, 206); }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.footer-legal button:hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
.footer-legal-dialog { padding: 0px; border: 1px solid rgba(208, 237, 255, 0.25); width: min(820px, -32px + 100vw); max-height: 85svh; background: rgb(16, 24, 32); color: rgb(237, 245, 250); overscroll-behavior: contain; box-shadow: rgba(0, 0, 0, 0.533) 0px 30px 120px; }
.footer-legal-dialog::backdrop { background: rgba(5, 14, 22, 0.79); backdrop-filter: blur(10px); }
.legal-sheet { padding: 35px 48px 55px; }
.legal-sheet > header { display: flex; justify-content: space-between; align-items: center; color: rgb(208, 237, 255); letter-spacing: 0.16em; font-size: 14px; }
.legal-sheet > header button { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid rgba(208, 237, 255, 0.314); border-radius: 50%; color: white; }
.morpho-outro .legal-sheet > h2 { font: 300 clamp(30px, 4vw, 48px) / 1.15 Gotham, sans-serif; margin: 30px 0px; }
.morpho-outro .legal-sheet > h2 { color: rgb(255, 255, 255); }
.legal-document { font-size: 15px; line-height: 1.8; color: rgb(206, 219, 228); }
.legal-document h3 { font-size: 20px; line-height: 1.4; margin: 30px 0px 12px; color: white; }
.legal-document p { margin: 0px 0px 18px; white-space: pre-line; overflow-wrap: anywhere; }
.legal-document a { text-decoration: underline; }
.flow-page:has(.footer-legal-dialog[open]) { overflow: clip; }
body:has(.footer-legal-dialog[open]) { overflow: hidden; }
@media (max-width: 700px) {
.footer-connect { grid-template-columns: 1fr; gap: 38px; padding: 36px 0px 26px; }
.footer-socials a { width: 46px; height: 46px; }
.footer-email-line input { font-size: 17px; }
.footer-email-line > button { font-size: 12px; gap: 8px; }
.footer-legal { display: block; line-height: 1.7; }
.footer-legal nav { margin-top: 18px; gap: 12px 20px; }
.legal-sheet { padding: 22px 22px 35px; }
.legal-document { font-size: 14px; }
.legal-document h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.footer-socials a { transition: none; }
}
.footer-legal-dialog:focus-visible { outline: rgb(208, 237, 255) solid 1px; }
.morpho-outro .morpho-footer::before { right: 5%; top: 5%; width: min(34vw, 460px); height: 52%; mask: url("../assets/brand/emblem.svg") center center / contain no-repeat; }
@media (max-width: 700px) {
.morpho-outro .morpho-footer::before { right: 7%; top: 24%; width: 65%; height: 34%; }
}
.footer-service-links { display: flex; flex-wrap: wrap; gap: 18px 36px; padding: 0px 0px 35px; margin-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer-service-links a { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: inherit; text-decoration: none; }
.footer-service-links a:hover { color: rgb(208, 237, 255); }
.footer-service-links a:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 6px; }
@media (max-width: 600px) {
.footer-service-links { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.footer-service-links a { font-size: 14px; justify-content: space-between; }
.footer-service-links a:last-child { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
.footer-service-links a, .footer-subscribe > label, .legal-document { font-size: 16px; line-height: 1.65; }
.morpho-outro .footer-connect-copy > p, .morpho-outro .footer-invitation p { font-size: 17px; line-height: 1.65; }
}
.morpho-outro .footer-isak { display: flex; align-items: center; justify-content: flex-end; gap: 9px; font-size: 12px; line-height: 1.8; color: rgb(176, 193, 202); margin: 28px 0px 0px; }
.morpho-outro .footer-isak a { display: inline-flex; align-items: center; gap: 7px; color: white; letter-spacing: 0.12em; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 4px; }
.instagram-gallery_section__D16M7 { --post-height: clamp(300px,29vw,400px); position: relative; isolation: isolate; background: rgb(16, 24, 32); color: rgb(244, 248, 252); padding: 92px 6% 58px; border-top: 1px solid rgba(208, 237, 255, 0.11); scroll-margin-top: 100px; }
.instagram-gallery_header__81zsM { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 46px; }
.instagram-gallery_eyebrow__iKSgI { display: flex; align-items: center; gap: 10px; margin: 0px 0px 23px; color: rgb(175, 200, 215); font-size: 10px; line-height: 1.5; letter-spacing: 0.16em; }
.instagram-gallery_title__VO5tv { margin: 0px !important; font: 300 clamp(44px, 5.7vw, 86px) / 1.08 Gotham, sans-serif !important; letter-spacing: -0.05em !important; color: rgb(244, 248, 252) !important; }
.instagram-gallery_title__VO5tv em { font: italic 300 1.13em/1.08 var(--flow-serif); color: rgb(208, 237, 255); letter-spacing: -0.055em; }
.instagram-gallery_follow__GAKVH { display: flex; align-items: center; gap: 30px; border-bottom: 1px solid rgba(208, 237, 255, 0.42); padding: 0px 0px 15px; text-decoration: none; color: rgb(208, 237, 255); font-size: 16px; flex-shrink: 0; }
.instagram-gallery_follow__GAKVH small { display: block; margin-top: 9px; color: rgb(180, 197, 208); font-size: 11px; }
.instagram-gallery_follow__GAKVH > svg { transition: transform 0.25s; }
.instagram-gallery_follow__GAKVH:hover > svg { transform: translate(3px, -3px); }
.instagram-gallery_track__su5dE { display: flex; align-items: flex-start; gap: 22px; list-style: none; margin: 0px; padding: 2px 2px 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgb(107, 148, 172) rgba(208, 237, 255, 0.07); }
.instagram-gallery_track__su5dE::-webkit-scrollbar { height: 3px; }
.instagram-gallery_track__su5dE::-webkit-scrollbar-thumb { background: rgb(107, 148, 172); }
.instagram-gallery_track__su5dE::-webkit-scrollbar-track { background: rgba(208, 237, 255, 0.07); }
.instagram-gallery_card__GllSd { flex: 0 0 calc(var(--post-height)*var(--post-ratio)); width: calc(var(--post-height)*var(--post-ratio)); min-width: 0px; scroll-snap-align: start; }
.instagram-gallery_card__GllSd:nth-child(2n) { margin-top: 22px; }
.instagram-gallery_post__soTdh { display: block; text-decoration: none; color: inherit; }
.instagram-gallery_cover__hwdO6 { height: var(--post-height); position: relative; overflow: hidden; border-radius: 5px; background: rgb(16, 24, 32); box-shadow: rgba(0, 0, 0, 0.133) 0px 14px 34px; transition: box-shadow 0.3s, transform 0.3s; }
.instagram-gallery_cover__hwdO6 img { display: block; width: 100%; height: 100%; object-fit: contain; }
.instagram-gallery_type__bpe7O { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.133); border-radius: 20px; background: rgba(16, 24, 32, 0.75); color: rgb(255, 255, 255); font-size: 9px; line-height: 1; backdrop-filter: blur(8px); pointer-events: none; }
.instagram-gallery_open__GM5lO { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(208, 237, 255); color: rgb(16, 24, 32); transition: transform 0.25s; pointer-events: none; }
.instagram-gallery_post__soTdh:hover .instagram-gallery_cover__hwdO6 { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.333) 0px 18px 38px; }
.instagram-gallery_post__soTdh:hover .instagram-gallery_open__GM5lO { transform: rotate(45deg); }
.instagram-gallery_caption__B83v1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: 11px; line-height: 1.6; }
.instagram-gallery_caption__B83v1 > span { max-width: 70%; color: rgb(230, 239, 246); }
.instagram-gallery_caption__B83v1 time { color: rgb(163, 189, 206); font-size: 9px; white-space: nowrap; }
.instagram-gallery_bottom__s9VXA { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 23px; }
.instagram-gallery_bottom__s9VXA p { display: flex; align-items: center; gap: 26px; margin: 0px; color: rgb(180, 201, 214); font-size: 11px; line-height: 1.6; }
.instagram-gallery_count__iMvTS { font-size: 9px; letter-spacing: 0.16em; color: rgb(208, 237, 255); white-space: nowrap; }
.instagram-gallery_controls__5w4Xq { display: flex; gap: 10px; flex-shrink: 0; }
.instagram-gallery_controls__5w4Xq button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(208, 237, 255, 0.37); border-radius: 50%; background: transparent; color: rgb(208, 237, 255); cursor: pointer; transition: background 0.2s, color 0.2s; }
.instagram-gallery_controls__5w4Xq button:hover:not(:disabled) { background: rgb(208, 237, 255); color: rgb(16, 24, 32); }
.instagram-gallery_controls__5w4Xq button:disabled { opacity: 0.3; cursor: default; }
.instagram-gallery_controls__5w4Xq button:focus-visible, .instagram-gallery_follow__GAKVH:focus-visible, .instagram-gallery_post__soTdh:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 5px; }
.instagram-gallery_arrived__tIKdV .instagram-gallery_card__GllSd, .instagram-gallery_arrived__tIKdV .instagram-gallery_header__81zsM { animation: 0.65s ease 0s 1 normal both running instagram-gallery_arrive__eNCUC; }
@media (prefers-reduced-motion: reduce) {
.instagram-gallery_arrived__tIKdV .instagram-gallery_card__GllSd, .instagram-gallery_arrived__tIKdV .instagram-gallery_header__81zsM { animation: auto ease 0s 1 normal none running none; }
}
.instagram-gallery_arrived__tIKdV .instagram-gallery_card__GllSd { animation-delay: var(--post-delay); }
@media (max-width: 900px) {
.instagram-gallery_section__D16M7 { --post-height: 330px; padding-top: 72px; }
.instagram-gallery_header__81zsM { gap: 24px; }
.instagram-gallery_follow__GAKVH { gap: 20px; font-size: 14px; }
.instagram-gallery_follow__GAKVH small { font-size: 10px; }
.instagram-gallery_eyebrow__iKSgI { font-size: 9px; }
.instagram-gallery_track__su5dE { gap: 18px; }
}
@media (max-width: 700px) {
.instagram-gallery_section__D16M7 { --post-height: 340px; padding: 62px 7% 42px; scroll-margin-top: 80px; }
.instagram-gallery_header__81zsM { display: block; margin-bottom: 32px; }
.instagram-gallery_title__VO5tv { font-size: clamp(41px, 11.5vw, 64px) !important; }
.instagram-gallery_eyebrow__iKSgI { font-size: 8px; letter-spacing: 0.11em; margin-bottom: 17px; gap: 8px; }
.instagram-gallery_follow__GAKVH { width: fit-content; margin-top: 27px; gap: 32px; padding-bottom: 10px; font-size: 13px; }
.instagram-gallery_follow__GAKVH small { margin-top: 6px; }
.instagram-gallery_track__su5dE { margin-right: -8.15%; padding-right: 7%; gap: 14px; }
.instagram-gallery_card__GllSd:nth-child(2n) { margin-top: 16px; }
.instagram-gallery_caption__B83v1 { font-size: 10px; padding-top: 12px; gap: 8px; }
.instagram-gallery_caption__B83v1 time { font-size: 8px; }
.instagram-gallery_type__bpe7O { top: 10px; right: 10px; }
.instagram-gallery_bottom__s9VXA { margin-top: 20px; gap: 16px; }
.instagram-gallery_bottom__s9VXA p { display: block; max-width: 185px; font-size: 10px; }
.instagram-gallery_count__iMvTS { display: block; margin-bottom: 7px; }
.instagram-gallery_controls__5w4Xq { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.instagram-gallery_controls__5w4Xq button, .instagram-gallery_cover__hwdO6, .instagram-gallery_follow__GAKVH > svg, .instagram-gallery_open__GM5lO { transition: none; }
.instagram-gallery_follow__GAKVH:hover > svg, .instagram-gallery_post__soTdh:hover .instagram-gallery_cover__hwdO6, .instagram-gallery_post__soTdh:hover .instagram-gallery_open__GM5lO { transform: none; }
}
.flow-page .territory-image { inset: -2%; width: 104%; height: 104%; transform: scale(calc(1.055 - var(--panel-drift,0)*.055)); transform-origin: 60% 44%; }
.flow-page .territory-copy { transform: none; bottom: 22%; max-width: 920px; }
.flow-page .territory-copy h2 { font-size: clamp(54px, 7.3vw, 112px); line-height: 1.02; }
.territory-copy h2 > span { display: block; clip-path: inset(-.2em -.2em calc((1 - var(--title-reveal,1))*100% - var(--title-reveal,1)*.3em) -.2em); transform: translateY(calc((1 - var(--title-reveal,1))*24px)); }
.territory-copy h2 > span + span { transform: translateY(calc((1 - var(--title-reveal,1))*38px)); }
.flow-page .territory-description { opacity: var(--body-reveal,1); font-size: 16px; max-width: 470px; line-height: 1.85; }
.flow-page .territory-kicker { font-size: 11px; letter-spacing: 0.2em; color: rgba(228, 237, 240, 0.78); }
.flow-page .territory-shade { background: linear-gradient(90deg, rgba(6, 25, 35, 0.76), transparent 85%), linear-gradient(0deg, rgba(6, 19, 29, 0.72), transparent 70%); }
.flow-page .water-cinema h2 { line-height: 1.04; letter-spacing: -0.055em; }
.flow-page .mineral-profile path { stroke-dasharray: 1200; stroke-dashoffset: calc((1 - var(--water-body,0))*1200); stroke: rgba(220, 247, 246, 0.29); }
.flow-page .mineral-profile .mineral { opacity: clamp(0,calc(var(--water-body,0)*2 - var(--mineral-delay,0)),1); transform: translateY(calc((1 - var(--water-body,0))*18px)); }
.mineral-magnesium { --mineral-delay: .3; }
.mineral-silica { --mineral-delay: .6; }
.mineral-potassium { --mineral-delay: .9; }
.flow-page .mineral-profile .mineral::before { box-shadow: none; }
.flow-page .territory-everyday .territory-panel:first-child { background: linear-gradient(120deg, rgb(240, 245, 244), rgb(220, 233, 237)); color: rgb(23, 53, 62); }
.flow-page .territory-everyday .territory-panel:first-child .territory-copy h2 { color: rgb(23, 53, 62); }
.flow-page .territory-everyday .territory-panel:first-child .territory-kicker { color: rgb(75, 103, 111); }
.flow-page .territory-everyday .territory-panel:first-child .territory-description { color: rgb(58, 89, 99); }
.flow-page .territory-everyday .territory-panel:first-child .territory-image { inset: 50% 8% auto auto; width: min(38vw, 500px); height: auto; transform: translateY(-50%); box-shadow: rgba(24, 60, 69, 0.08) 0px 28px 65px; }
.flow-page .finale-end-copy h2 { clip-path: inset(-.15em -.2em calc((1 - var(--final-copy,0))*100% - var(--final-copy,0)*.25em) -.2em); }
.flow-page .finale-product-label p { flex-wrap: wrap; gap: 12px; }
.flow-page .finale-product-label strong { font-size: clamp(30px, 3vw, 46px); }
@media (max-width: 700px) {
.flow-page .territory-copy { bottom: 23%; left: 6%; right: 6%; }
.flow-page .territory-description { font-size: 15px; line-height: 1.75; }
.flow-page .territory-kicker { font-size: 10px; letter-spacing: 0.12em; }
.flow-page .territory-everyday .territory-panel:first-child .territory-image { top: 92px; right: 6%; width: 66%; max-height: 34svh; transform: none; }
.flow-page .territory-everyday .territory-panel:first-child .territory-copy { top: 54%; bottom: auto; }
.flow-page .territory-everyday .territory-panel:first-child .territory-copy h2 { font-size: clamp(32px, 9vw, 43px); }
.flow-page .territory-everyday .territory-panel:first-child .territory-description { font-size: 13px; margin-top: 16px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .territory-journey { height: auto; }
.flow-page .territory-stage { position: relative; height: auto; overflow: visible; }
.flow-page .territory-panel { position: relative; min-height: 100svh; opacity: 1 !important; }
.flow-page .territory-copy, .flow-page .territory-description { opacity: 1 !important; }
.flow-page .territory-image { transform: none; }
.flow-page .territory-copy h2 > span { clip-path: none; transform: none; }
}
@media (min-width: 701px) {
.flow-page .finale-end-copy h2 { font-size: clamp(44px, min(5vw, 8svh), 76px); }
}
@media (max-width: 700px) {
.flow-page .finale-product-label p { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.flow-page .finale-product-label p { flex-direction: column; align-items: flex-start; }
@media (max-width: 700px) {
.flow-page .finale-product-label strong { font-size: 27px; }
}
.flow-page .finale-memory { opacity: calc(1 - var(--pair-progress,0)); }
.flow-page .territory-film { height: 540svh; }
@media (max-width: 700px) {
.flow-page .territory-film { height: 540svh; }
}
.flow-page .coastal-story.territory-everyday { height: 165svh; }
.flow-page .coastal-story .territory-panel { background: rgb(10, 35, 43); }
.flow-page .coastal-story .territory-image, .flow-page .coastal-story .territory-panel:nth-child(2) .territory-image { inset: 0px; width: 100%; height: 100%; transform: scale(calc(1.055 - var(--panel-drift,0)*.055)); object-fit: cover; }
.territory-film-image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.flow-page .coastal-story .territory-copy { inset: auto 7% 22%; max-width: 1000px; }
.flow-page .coastal-story .territory-copy h2, .flow-page .coastal-story .territory-panel:nth-child(2) h2 { font-size: clamp(58px, 8.2vw, 126px); line-height: 1; letter-spacing: -0.055em; color: rgb(255, 255, 255); }
.flow-page .coastal-story .territory-description { font-size: 16px; max-width: 440px; line-height: 1.8; color: rgba(237, 246, 245, 0.85); }
.flow-page .coastal-story .territory-shade { display: block; background: linear-gradient(90deg, rgba(5, 37, 43, 0.46), transparent 85%), linear-gradient(0deg, rgba(3, 22, 29, 0.77), transparent 75%); }
.flow-page .coastal-story .territory-caption { writing-mode: horizontal-tb; bottom: 10%; right: 7%; font-size: 10px; letter-spacing: 0.16em; }
.flow-page .coastal-story .territory-kicker { font-size: 10px; letter-spacing: 0.2em; color: rgba(228, 237, 240, 0.78); }
.flow-page .coastal-story [data-shot="surf"] .territory-image { object-position: 50% 78%; transform: scale(calc(1.1 - var(--panel-drift,0)*.1)); }
.flow-page .coastal-story [data-shot="surf"] .territory-copy { bottom: 23%; left: 7%; }
.flow-page .coastal-story [data-shot="purity"] .territory-film-image { filter: brightness(0.72); }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child { background: rgb(10, 35, 43); color: white; }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-image { inset: 0px; max-height: none; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: none; box-shadow: none; }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-copy { inset: auto 7% 22%; }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child h2 { font-size: clamp(54px, 7.5vw, 108px); color: white; }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-description, .flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-kicker { color: rgba(238, 246, 244, 0.875); }
@media (max-width: 700px) {
.flow-page .coastal-story .territory-copy { left: 6%; right: 6%; bottom: 24%; }
.flow-page .coastal-story .territory-copy h2, .flow-page .coastal-story .territory-panel:nth-child(2) h2, .flow-page .coastal-story.territory-everyday .territory-panel:first-child h2 { font-size: clamp(44px, 13vw, 65px); }
.flow-page .coastal-story .territory-description { font-size: 14px; max-width: 290px; }
.flow-page .coastal-story [data-shot="surf"] .territory-image { object-position: 57% 80%; }
.flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-copy { left: 6%; right: 6%; bottom: 23%; }
.flow-page .coastal-story .territory-caption { display: block; font-size: 8px; bottom: 11%; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .coastal-story, .flow-page .coastal-story.territory-everyday { height: auto; }
.flow-page .coastal-story .territory-image { transform: none !important; }
}
.flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-shade { display: block; }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="surf"] .territory-copy { top: auto; bottom: 24%; left: 6%; }
.flow-page .coastal-story [data-shot="surf"] .territory-shade { background: linear-gradient(rgba(4, 34, 44, 0.52), transparent 75%), linear-gradient(0deg, rgba(3, 22, 29, 0.61), transparent 45%); }
.flow-page .coastal-story [data-shot="surf"] .territory-shade { background: linear-gradient(rgba(4, 34, 44, 0.333), transparent 45%), linear-gradient(0deg, rgba(3, 22, 29, 0.88), rgba(3, 22, 29, 0.46) 40%, transparent 72%); }
}
.flow-page .coastal-story [data-shot="surf"] .territory-film-image, .flow-page .coastal-story [data-shot="surf"] .territory-image { object-position: 66% 40%; transform: none; }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="surf"] .territory-film-image { object-position: var(--surf-focus,25%) 40%; transition: object-position 0.25s linear; }
.flow-page .coastal-story [data-shot="surf"] .territory-image { object-position: 25% 40%; }
}
.flow-page .coastal-story [data-shot="wellbeing"] { background: rgb(16, 24, 32); isolation: isolate; }
.flow-page .coastal-story [data-shot="wellbeing"] > picture { position: absolute; inset: 0px; display: block; width: 100%; height: 100%; z-index: 0; }
.flow-page .coastal-story [data-shot="wellbeing"] :is(.territory-image, .territory-film-image) { inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; mask-image: none; filter: none; clip-path: none; animation: auto ease 0s 1 normal none running none; transform-origin: 63% 58%; transform: none; }
.flow-page .coastal-story [data-shot="wellbeing"]::before { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: radial-gradient(at 57% 24%, rgba(234, 242, 247, 0.11) 0px, rgba(234, 242, 247, 0) 33%); mix-blend-mode: screen; opacity: 0.35; animation: 8s ease-in-out 0s infinite alternate none paused wellbeing-sun; }
.flow-page .coastal-story [data-shot="wellbeing"][data-running="true"]::before { animation-play-state: running; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-shade { display: block; z-index: 1; background: linear-gradient(90deg, rgba(16, 24, 32, 0.86), rgba(16, 24, 32, 0.67) 23%, rgba(16, 24, 32, 0.24) 46%, transparent 67%), linear-gradient(0deg, rgba(16, 24, 32, 0.65), transparent 38%, rgba(16, 24, 32, 0.15) 78%, rgba(16, 24, 32, 0.3)); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy { inset: 30% 60% auto 7%; transform: translateY(var(--copy-rise,0)); max-width: none; z-index: 3; }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy { inset: auto 6% 17%; }
}
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy h2 { font-size: clamp(60px, 7.5vw, 114px); color: var(--brand-purity); line-height: 1.06; letter-spacing: -0.06em; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy h2 em { color: var(--brand-purity); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-description { max-width: 310px; color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.8; margin-top: 32px; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-kicker { color: var(--brand-flight); margin-bottom: 28px; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-caption { color: var(--brand-purity); z-index: 3; }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="wellbeing"] :is(.territory-image, .territory-film-image) { object-position: 69% center; transform-origin: 74% 58%; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-shade { background: linear-gradient(rgba(16, 24, 32, 0.3), transparent 39%, rgba(16, 24, 32, 0.91) 78%), linear-gradient(90deg, rgba(16, 24, 32, 0.56), transparent 74%); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy h2 { font-size: clamp(44px, 12.8vw, 58px); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-kicker { font-size: 8px; letter-spacing: 0.12em; margin-bottom: 17px; }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-description { font-size: 12px; line-height: 1.6; margin-top: 18px; max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .coastal-story [data-shot="wellbeing"] :is(.territory-image, .territory-film-image) { transform: none !important; }
}
.flow-page .coastal-story [data-shot="wellbeing"] .territory-image { animation: 14s cubic-bezier(0.45, 0, 0.2, 1) 0s infinite alternate none paused yoga-camera; will-change: transform; }
.flow-page .coastal-story [data-shot="wellbeing"][data-running="true"] .territory-image { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
.flow-page .coastal-story [data-shot="wellbeing"] .territory-image, .flow-page .coastal-story [data-shot="wellbeing"]::before { animation: auto ease 0s 1 normal none running none; }
}
.flow-page .coastal-story [data-shot="santa-teresa"] { background: var(--brand-premium); }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-image { object-position: 70% center; transform-origin: 83% 58%; animation: 8s ease-in-out 0s infinite alternate none paused santa-camera; }
@media (prefers-reduced-motion: reduce) {
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-image { animation: auto ease 0s 1 normal none running none; transform: none; }
}
.flow-page .coastal-story [data-shot="santa-teresa"][data-running="true"] .territory-image { animation-play-state: running; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-shade { background: linear-gradient(90deg, rgba(16, 24, 32, 0.74), rgba(16, 24, 32, 0.27) 42%, transparent 76%), linear-gradient(0deg, rgba(16, 24, 32, 0.9), transparent 42%, rgba(16, 24, 32, 0.2) 72%, rgba(16, 24, 32, 0.5)); }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-shade { background: linear-gradient(rgba(16, 24, 32, 0.78), rgba(16, 24, 32, 0.55) 27%, transparent 49%, transparent 68%, rgba(16, 24, 32, 0.9)), linear-gradient(90deg, rgba(16, 24, 32, 0.25), transparent 70%); }
}
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-copy { left: 7%; right: 52%; bottom: 24%; z-index: 2; }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-copy { inset: 17% 6% auto; }
}
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-copy h2 { font-size: clamp(58px, 7.5vw, 114px); color: var(--brand-purity); line-height: 1.06; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-description { max-width: 330px; color: rgba(255, 255, 255, 0.85); font-size: 15px; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-kicker { color: var(--brand-flight); }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-caption { color: rgba(255, 255, 255, 0.74); }
@media (max-width: 700px) {
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-image { object-position: 100% center; transform-origin: 100% 58%; animation-name: santa-camera-mobile; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-copy h2 { font-size: clamp(43px, 12vw, 56px); }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-kicker { font-size: 8px; margin-bottom: 18px; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-description { font-size: 12px; line-height: 1.7; margin-top: 20px; max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .territory-film { height: auto; }
}
.flow-page .blue-life-description, .flow-page .bz-copy > p:not(.bz-eyebrow), .flow-page .finale-end-copy > p.finale-tagline, .flow-page .flow-description, .flow-page .mineral-service .mineral-introduction, .flow-page .territory-description { font-size: var(--story-text); line-height: 1.8; }
.flow-page .bluezone-life-stage, .flow-page .bluezone-stage, .flow-page .flow-stage, .flow-page .mineral-service-stage, .flow-page .product-reveal, .flow-page .territory-stage { height: var(--scene-height); min-height: 0px; }
.journey-sound { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(208, 237, 255, 0.333); background: none; color: white; border-radius: 50%; }
.flow-page .flow-mobile-menu summary { font-size: 14px; }
.flow-page .flow-mobile-menu nav { font-size: 17px; }
.flow-page .mineral-service-bottom { display: none; }
.flow-page .finale-end-copy { top: 15%; }
.flow-page .finale-end-copy > p.finale-tagline { letter-spacing: 0px; max-width: 600px; margin: 0px auto 14px; }
.flow-page .product-reveal { --can-height: min(45svh,570px); --can-bottom: 4svh; }
.flow-page .finale-product-label { top: 65%; }
@media (max-width: 1350px) {
.flow-page .flow-mobile-menu { display: block; margin-left: auto; }
}
@media (max-width: 700px) {
.flow-page .blue-life-stories { top: 31%; height: 62%; }
.flow-page .blue-life-bottom { bottom: 3%; }
.flow-page .bz-copy { top: 51%; }
.flow-page .bz-nicoya { top: 47%; }
.flow-page .product-reveal { --can-height: 33svh; --can-bottom: 14svh; }
.flow-page .finale-end-copy { top: 16%; }
.flow-page .finale-product-label { top: auto; bottom: 4%; }
.flow-page .finale-end-copy > p.finale-tagline { max-width: 280px; line-height: 1.5; margin-bottom: 10px; }
}
@media (max-width: 700px) and (max-height: 740px) {
.flow-page .mineral-service .mineral-introduction { margin-top: 10px; }
.flow-page .product-reveal { --can-height: 29svh; --can-bottom: 14svh; }
.flow-page .finale-end-copy { top: 14%; }
.flow-page .finale-end-copy h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .bluezone-life-stage, .flow-page .mineral-service-stage, .flow-page .territory-stage { height: auto; min-height: var(--scene-height); }
.flow-page .bluezone-life-stage, .flow-page .mineral-service-stage, .flow-page .territory-stage { height: auto; min-height: 100svh; }
}
@media (max-width: 700px) {
.flow-page .mineral-service .mineral-source-note { font-size: var(--story-text); }
}
.flow-page .mineral-service .mineral-source-note { margin-top: 14px; }
@media (max-width: 700px) {
.flow-page .mineral-service .mineral-source-note { font-size: 11px; line-height: 1.5; margin-top: 10px; }
}
.flow-page .territory-journey .territory-panel .territory-copy .territory-description { font-size: var(--story-text); line-height: 1.8; }
.flow-mobile-menu summary::marker { content: ""; }
.flow-page .flow-opening-content .flow-open-button { position: static; transform: none; margin-top: 28px; white-space: normal; }
.flow-opening-content .open-button-ring { flex-shrink: 0; }
@media (min-width: 701px) and (max-height: 700px) {
.flow-page .flow-opening-content .flow-open-button { margin-top: 22px; }
}
@media (max-width: 700px) {
.flow-page .flow-opening-content .flow-open-button { position: absolute; left: 6%; bottom: 13%; margin: 0px; }
}
@media (min-width: 701px) {
.flow-page .mineral-service-stage { display: grid; grid-template-rows: minmax(min-content, 1fr) auto; gap: 24px; padding: clamp(120px, 18svh, 155px) 7% 28px; }
.flow-page .mineral-service .mineral-introduction { max-width: 100%; margin-top: 18px; }
.flow-page .mineral-service .mineral-eyebrow { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .mineral-service-stage { height: auto; min-height: var(--scene-height); }
}
.flow-page .bluezone-life-stage, .flow-page .bluezone-stage, .flow-page .flow-stage, .flow-page .mineral-service-stage, .flow-page .product-reveal, .flow-page .territory-stage { height: 100svh; }
.flow-page .bz-bottom { bottom: calc(var(--dock-height) + 6%); }
.flow-page .blue-life-bottom { bottom: calc(var(--dock-height) + 5%); }
@media (min-width: 701px) {
.flow-page .mineral-service-stage { padding-bottom: calc(var(--dock-height) + 28px); }
}
@media (max-width: 700px) {
.flow-page .finale-product-label { bottom: calc(var(--dock-height) + 4%); }
.flow-page .flow-opening-content .flow-open-button { bottom: calc(var(--dock-height) + 13%); }
}
.flow-page .coastal-story .territory-caption { bottom: calc(var(--dock-height) + 24px); }
@media (max-width: 700px) {
.flow-page .coastal-story .territory-caption { bottom: calc(var(--dock-height) + 18px); }
}
.flow-page .coastal-story .territory-copy { bottom: max(22%,calc(var(--dock-height) + 75px)); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy { top: 25%; bottom: auto; }
.flow-page .coastal-story [data-shot="wellbeing"]::after { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 1; background: linear-gradient(113deg, transparent 36%, rgba(208, 237, 255, 0.043) 49%, transparent 61%); transform: translateX(-12%); animation: 12s ease-in-out 0s infinite alternate none paused yoga-air; }
@media (prefers-reduced-motion: reduce) {
.flow-page .coastal-story [data-shot="wellbeing"]::after { animation: auto ease 0s 1 normal none running none; display: none; }
}
.flow-page .coastal-story [data-shot="wellbeing"][data-running="true"]::after { animation-play-state: running; }
.flow-page .bz-pin:has(.bz-country-name) { z-index: 5; text-shadow: rgb(16, 24, 32) 0px 2px 12px, rgb(16, 24, 32) 0px 0px 28px; background: radial-gradient(rgba(16, 24, 32, 0.333), transparent 75%); padding: 14px 18px; }
.bz-country-name { display: block; font: 500 clamp(17px, 1.6vw, 26px) / 1.3 Gotham, sans-serif; letter-spacing: 0.08em; color: rgb(255, 255, 255); }
.flow-page .bz-pin .bz-peninsula-name { display: block; color: rgb(233, 247, 255); font: 400 13px / 1.5 Gotham, sans-serif; letter-spacing: 0.02em; margin-top: 6px; }
.flow-page .bz-pin:has(.bz-country-name) .bz-morpho-mark { width: 95px; margin: 0px auto 12px; }
@media (max-width: 700px) {
.flow-page .coastal-story .territory-copy, .flow-page .coastal-story [data-shot="surf"] .territory-copy, .flow-page .coastal-story.territory-everyday .territory-panel:first-child .territory-copy { bottom: calc(var(--dock-height) + 65px); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy { top: auto; bottom: calc(var(--dock-height) + 62px); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy h2 { font-size: clamp(38px, 11vw, 52px); }
.bz-country-name { font-size: 16px; }
.flow-page .bz-pin .bz-peninsula-name { font-size: 11px; }
.flow-page .bz-pin:has(.bz-country-name) .bz-morpho-mark { width: 72px; margin-bottom: 8px; }
.flow-page .bluezone-journey[data-chapter="2"] .bz-globe { opacity: 1; }
.flow-page .bluezone-journey .bz-top { top: 78px; font-size: 7px; }
}
.journey-sound-toggle { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; color: rgb(255, 255, 255); border: 0px; border-radius: 50%; background: transparent; cursor: pointer; }
.journey-sound-toggle:hover { background: rgba(255, 255, 255, 0.082); }
.journey-sound-toggle:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 3px; }
.flow-page .journey-simple[data-journey-visible="true"] .journey-sound-toggle { border-left: 1px solid rgba(255, 255, 255, 0.145); border-radius: 0px 24px 24px 0px; }
.flow-page > .bluezone-journey { height: 500svh; }
.flow-page .bluezone-journey .bz-nicoya { opacity: 0; pointer-events: none; }
.flow-page .bluezone-journey[data-chapter="2"] .bz-nicoya { opacity: calc(var(--handoff-copy,1)*var(--handoff-exit-copy,1)); pointer-events: auto; }
.flow-page .bz-world { top: 25%; width: 39%; }
.flow-page .bz-world h2 { font-size: clamp(38px, 4.4vw, 66px); margin-bottom: 22px; }
.flow-page .bz-current-place { display: grid; gap: 5px; margin: 0px 0px 22px !important; color: white !important; }
@media (max-width: 700px) {
.flow-page .bz-current-place { gap: 2px; margin-bottom: 12px !important; }
}
.bz-current-place > span { font-size: 10px; letter-spacing: 0.18em; color: rgb(179, 199, 213); }
.bz-current-place strong { font-size: 26px; font-weight: 400; line-height: 1.3; }
.bz-current-place small { font-size: 13px; color: rgb(203, 220, 231); }
@media (max-width: 700px) {
.flow-page .bz-world { top: 49%; width: 84%; }
.flow-page .bz-world h2 { font-size: 30px; margin-bottom: 14px; }
.flow-page .bz-world h2 em { display: inline; margin-left: 0.15em; }
}
@media (max-width: 700px) and (max-height: 740px) {
.flow-page .bz-current-place { margin-bottom: 12px !important; }
}
@media (max-width: 700px) {
.bz-current-place strong { font-size: 21px; }
.bz-current-place small { font-size: 11px; }
.flow-page .bz-world > p:last-child { font-size: 11px; line-height: 1.6; max-width: 310px; }
.flow-page .bluezone-journey:not([data-chapter="2"]) .bz-index { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.flow-page .bluezone-journey .bz-nicoya, .flow-page .bluezone-journey .bz-world { position: relative; top: auto; width: 100%; pointer-events: auto; opacity: 1 !important; }
.flow-page .bz-current-place { display: none; }
.flow-page .bluezone-journey .bz-index { display: block; }
}
.flow-page .bluezone-journey:not([data-chapter="2"]) .bz-bottom { display: none; }
.flow-page .bz-pin:not(:has(.bz-country-name)) { font-size: 14px; }
.flow-page .bz-pin:not(:has(.bz-country-name)) small { font-size: 10px; color: rgb(215, 232, 241); }
@media (max-width: 700px) {
.flow-page .bz-pin:not(:has(.bz-country-name)) { font-size: 12px; }
.flow-page .bz-pin:not(:has(.bz-country-name)) small { font-size: 9px; }
}
.flow-page .bluezone-journey[data-fallback="true"] .bz-nicoya, .flow-page .bluezone-journey[data-fallback="true"] .bz-world { position: relative; top: auto; width: 100%; opacity: 1; pointer-events: auto; }
.flow-page .bluezone-journey[data-fallback="true"] .bz-index { display: block; opacity: 1; }
.journey-sound-toggle[data-sound-blocked="true"] .sound-activation-label { display: inline; }
@media (max-width: 700px) {
.flow-page .bz-world > p:last-child, .flow-page .territory-journey .territory-panel .territory-copy .territory-description, .flow-page [data-scroll-reading="true"] { font-size: var(--story-text); line-height: 1.6; }
.flow-page .territory-description { max-width: 340px; }
.flow-page .coastal-story [data-shot="santa-teresa"] .territory-description, .flow-page .coastal-story [data-shot="wellbeing"] .territory-description { max-width: 300px; }
.flow-page .blue-life-kicker, .flow-page .bz-copy .bz-eyebrow, .flow-page .coastal-story .territory-kicker, .flow-page .coastal-story [data-shot="wellbeing"] .territory-kicker { font-size: 11px; line-height: 1.5; letter-spacing: 0.1em; }
.flow-page .blue-life-stories { top: clamp(140px, 25svh, 210px); height: auto; bottom: calc(var(--dock-height) + 20px); }
.flow-page .blue-life-copy h2 { margin-bottom: 20px; }
.flow-page .blue-life-description { max-width: 100%; }
.flow-page .bluezone-journey .bz-globe { top: 94px; left: 0px; width: 100%; height: 32svh; opacity: 1; }
.flow-page .bluezone-journey .bz-pin:not(:has(.bz-country-name)) { display: none; }
.flow-page .bluezone-journey .bz-nicoya, .flow-page .bluezone-journey .bz-world { top: calc(94px + 32svh); left: 8%; width: 84%; }
.flow-page .bz-world h2 { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.08; margin-bottom: 16px; }
.flow-page .bz-world h2 em { display: block; margin-left: 0px; }
.flow-page .bz-current-place { grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.flow-page .bz-current-place > span { grid-row: 1 / span 2; align-self: center; }
.flow-page .bz-current-place strong { font-size: 20px; }
.flow-page .bz-current-place small { grid-column: 2; }
.flow-page .bz-habits { gap: 12px; margin-top: 16px; line-height: 1.5; }
.flow-page .bz-habits b { font-size: 12px; line-height: 1.45; }
.flow-page .bz-current-place small { font-size: 14px; }
.flow-page .bz-current-place > span { font-size: 11px; }
.flow-page .mineral-chapter .mineral-story-stage { position: relative; height: auto; min-height: 100svh; grid-template-rows: auto auto auto auto; gap: 22px; padding: 112px 8% 100px; }
}
@media (max-width: 700px) and (max-height: 660px) {
.flow-page .mineral-chapter .mineral-story-stage { position: relative; height: auto; min-height: 100svh; }
}
@media (max-width: 700px) {
.flow-page .mineral-story-heading { grid-row: 1; }
.flow-page .mineral-chapter .mineral-pour-composition { position: relative; inset: auto; grid-row: 2; width: calc(100% + 16vw); height: clamp(200px, 32svh, 280px); margin: 0px -8vw; }
.flow-page .mineral-chapter .mineral-pour-film video { object-fit: cover; object-position: 50% 45%; }
.flow-page .mineral-properties { grid-row: 3; }
.flow-page .mineral-properties { gap: 24px 16px; }
.flow-page .mineral-story-note { grid-row: 4; }
.flow-page .mineral-property h3 { font-size: 16px; }
.flow-page .mineral-property-dose { font-size: 13px; }
.flow-page .mineral-property-role { font-size: 20px; line-height: 1.3; }
.flow-page .mineral-story-note { font-size: 12px; line-height: 1.55; }
.flow-page .mineral-property { min-width: 0px; grid-template-columns: 26px minmax(0px, 1fr); column-gap: 8px; }
.flow-page .mineral-property-symbol { width: 26px; height: 26px; }
.flow-page .flow-open-button { font-size: 16px; }
.flow-page .flow-open-button small { font-size: 10px; line-height: 1.6; }
.flow-page .sound-activation-label { font-size: 13px; }
.flow-page .finale-product-label a { font-size: 15px; gap: 10px; }
.flow-page .finale-product-label span { font-size: 11px; letter-spacing: 0.04em; }
.flow-page .finale-end-copy > span { font-size: 11px; line-height: 1.6; letter-spacing: 0.06em; }
}
@media (max-width: 700px) and (max-height: 740px) {
.flow-page .blue-life-stories { top: 120px; }
.flow-page .blue-life-copy h2 { font-size: 32px; margin-bottom: 14px; }
.flow-page .blue-life-kicker { margin-bottom: 12px; }
.flow-page .blue-life-description { line-height: 1.5; }
.flow-page .bluezone-journey .bz-globe { height: 25svh; }
.flow-page .bluezone-journey .bz-nicoya, .flow-page .bluezone-journey .bz-world { top: calc(94px + 25svh); }
.flow-page .bz-world h2 { font-size: 27px; margin-bottom: 12px; }
.flow-page .bz-habits { margin-top: 12px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
.flow-page .blue-life-stories { inset: auto; height: auto; }
.flow-page .bluezone-journey .bz-nicoya, .flow-page .bluezone-journey .bz-world { top: auto; }
}
.morpho-chat-ready { --morpho-chat-width: 176px; --morpho-control-edge: 24px; --morpho-control-gap: 10px; --morpho-control-bottom: max(18px,env(safe-area-inset-bottom)); }
#morpho-chat-link { box-sizing: border-box; position: fixed; z-index: 145; right: var(--morpho-control-edge); bottom: var(--morpho-control-bottom); width: var(--morpho-chat-width); height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0px 16px; border: 1px solid rgba(234, 247, 255, 0.7); border-radius: 999px; background: linear-gradient(120deg, rgb(228, 245, 255), rgb(200, 234, 255)); box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 6px 24px; color: rgb(16, 24, 32); cursor: pointer; isolation: isolate; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
#morpho-chat-link img { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; filter: brightness(0) saturate(100%); animation: 4.8s ease-in-out 0s infinite normal none running morpho-chat-logo-breathe; }
#morpho-chat-link:hover { background: rgb(234, 247, 255); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(0, 0, 0, 0.267) 0px 8px 28px; transform: translateY(-2px); }
#morpho-chat-link:focus-visible { outline: rgb(208, 237, 255) solid 2px; outline-offset: 4px; }
.morpho-chat-tooltip { white-space: nowrap; font: 500 12px / 1.2 Gotham, Arial, sans-serif; letter-spacing: -0.015em; pointer-events: none; }
.morpho-chat-badge { box-sizing: border-box; position: absolute; right: -2px; top: -5px; min-width: 21px; height: 21px; padding: 0px 4px; display: grid; place-items: center; background: rgb(16, 24, 32); color: rgb(208, 237, 255); border: 2px solid rgb(208, 237, 255); border-radius: 20px; font: 10px Arial, sans-serif; }
#morpho-chat-link [hidden], #morpho-chat-panel[hidden] { display: none !important; }
#morpho-chat-panel { position: fixed; z-index: 150; right: 24px; bottom: 82px; width: min(390px, -32px + 100vw); height: 600px; max-height: calc(var(--morpho-chat-height,100dvh) - 106px); border: 1px solid rgba(208, 237, 255, 0.25); border-radius: 20px; overflow: hidden; background: rgb(17, 29, 39); box-shadow: rgba(0, 0, 0, 0.467) 0px 18px 75px; }
@media (max-width: 700px) {
.morpho-chat-ready { --morpho-chat-width: 154px; --morpho-control-edge: 12px; --morpho-control-gap: 8px; --morpho-control-bottom: max(12px,env(safe-area-inset-bottom)); }
#morpho-chat-link { height: 46px; gap: 8px; padding: 0px 12px; }
#morpho-chat-link img { width: 24px; height: 24px; }
.morpho-chat-tooltip { font-size: 11px; }
#morpho-chat-panel { right: 12px; bottom: 74px; max-height: calc(var(--morpho-chat-height,100dvh) - 98px); }
}
@media (max-width: 600px) {
#morpho-chat-panel { inset: 0px; width: 100%; height: var(--morpho-chat-height,100dvh); max-height: 100dvh; border: 0px; border-radius: 0px; }
}
@media (prefers-reduced-motion: reduce) {
#morpho-chat-link, #morpho-chat-link img { transition: none; animation: auto ease 0s 1 normal none running none; }
}
#morpho-chat-panel iframe { display: block; width: 100%; height: 100%; border: 0px; background: rgb(17, 29, 39); }
@media (max-width: 600px) {
.morpho-chat-open { overflow: hidden; }
.morpho-chat-open body { overflow: hidden; }
.morpho-chat-open #morpho-chat-link { visibility: hidden; }
}
@keyframes reveal-entry { 
  0% { opacity: 0.6; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes hero-in { 
  0% { opacity: 0; translate: 0px 25px; }
  100% { opacity: 1; translate: 0px; }
}
@keyframes products-in { 
  0% { opacity: 0; translate: 0px 45px; }
  100% { opacity: 1; translate: 0px; }
}
@keyframes radio-level { 
  100% { transform: scaleY(0.3); }
}
@keyframes fresh-bubble { 
  0% { opacity: 0; transform: translate(var(--bubble-start)) scale(.4); }
  8% { opacity: 0.9; }
  48% { opacity: 0.72; transform: translate(calc(var(--bubble-x)*.72),calc(var(--bubble-y)*.72)) scale(1); }
  100% { opacity: 0; transform: translate(var(--bubble-x),var(--bubble-y)) scale(.7); }
}
@keyframes fresh-droplet { 
  0% { opacity: 0; transform: translate(var(--bubble-start)) scale(.35); }
  7% { opacity: 0.95; }
  58% { opacity: 0.65; transform: translate(calc(var(--bubble-x)*.8),var(--bubble-y)) scale(1); }
  100% { opacity: 0; transform: translate(var(--bubble-x),calc(var(--bubble-y)*.55)) scale(.5); }
}
@keyframes bird-crossing { 
  0% { transform: translate(-100px, 30px) scale(0.7); opacity: 0; }
  15% { opacity: 0.65; }
  55% { transform: translate(40px, -4px) scale(0.85); opacity: 0.6; }
  85% { opacity: 0.5; }
  100% { transform: translate(190px, -45px) scale(0.55); opacity: 0; }
}
@keyframes bird-wing-left { 
  0%, 60% { transform: rotate(10deg); }
  100% { transform: rotate(38deg); }
}
@keyframes bird-wing-right { 
  0%, 60% { transform: rotate(-10deg); }
  100% { transform: rotate(-38deg); }
}
@keyframes morpho-left { 
  100% { transform: rotateY(80deg); }
}
@keyframes morpho-right { 
  100% { transform: rotateY(-80deg); }
}
@keyframes distant-flight { 
  0% { transform: translate3d(-70px, 35px, -20px) scale(0.55); opacity: 0; }
  10% { opacity: 0.65; }
  35% { transform: translate3d(10px, -12px, -40px) rotate(20deg) scale(0.85); }
  60% { transform: translate3d(55px, 10px, -65px) rotate(-15deg) scale(0.65); opacity: 0.6; }
  90% { opacity: 0; }
  100% { transform: translate3d(120px, -50px, -90px) scale(0.4); opacity: 0; }
}
@keyframes molecule-breathe { 
  100% { transform: translateY(-9px) rotate(3deg); }
}
@keyframes heat-rise { 
  0% { transform: translateY(12px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-15px); opacity: 0; }
}
@keyframes water-carry { 
  100% { transform: translateX(115px); }
}
@keyframes morpho-deep-tide { 
  0% { background-position: 0px 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes morpho-water-light { 
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}
@keyframes nicoya-light { 
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes morpho-menu-in { 
  0% { opacity: 0; translate: 0px -7px; }
  100% { opacity: 1; translate: 0px; }
}
@keyframes instagram-gallery_arrive__eNCUC { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes flow-loader-release { 
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes yoga-camera { 
  0% { transform: scale(1.025) translate3d(0.4%, 0.3%, 0px); }
  50% { transform: scale(1.075) translate3d(-0.6%, -0.5%, 0px); }
  100% { transform: scale(1.12) translate3d(-1.2%, -0.9%, 0px); }
}
@keyframes wellbeing-sun { 
  0% { opacity: 0.24; transform: translate3d(-1%, 0px, 0px); }
  100% { opacity: 0.52; transform: translate3d(1%, 0.4%, 0px); }
}
@keyframes santa-camera { 
  0% { transform: scale(1); }
  100% { transform: scale(1.055); }
}
@keyframes santa-camera-mobile { 
  0% { transform: scale(1); }
  100% { transform: scale(1.035); }
}
@keyframes yoga-air { 
  100% { transform: translateX(12%); opacity: 0.55; }
}
@keyframes morpho-chat-logo-breathe { 
  0%, 100% { transform: translateY(0px) rotate(-3deg) scale(0.98); opacity: 0.88; }
  50% { transform: translateY(-2px) rotate(3deg) scale(1.04); opacity: 1; }
}
/* ===== cascade fixes: these rules lost their source order in the CSSOM dump; values are the live page's computed results ===== */
@media (min-width: 1101px) { .morpho-header .morpho-main-nav { min-width: 548.5px; justify-content: space-between; } }
@media (max-width: 700px) {
.journey-rail { left: 0px; width: 24px; gap: 2px; }
.journey-rail a { width: 24px; height: 26px; }
.flow-page .mineral-story-kicker { font-size: 10px; line-height: 1.5; }
.footer-consent, .footer-details, .footer-email-line > button, .footer-legal { font-size: 14px; line-height: 1.65; }
.footer-service-links a, .footer-subscribe > label, .legal-document { font-size: 16px; line-height: 1.65; }
.morpho-outro .footer-connect-copy > p, .morpho-outro .footer-invitation p { font-size: 17px; line-height: 1.65; }
.flow-page .mineral-chapter .mineral-story-stage { min-height: max(100svh, 977.7px); }
.flow-page .coastal-story [data-shot="wellbeing"] .territory-copy { bottom: calc(var(--dock-height) + 57px); }
}
@media (max-width: 600px) { .morpho-mega-mobile-tabs { padding: 12px 12px 0px; gap: 0px; } }
@media (max-width: 380px) { .site-player > button { padding: 0px 5px; gap: 4px; } .site-player > button.site-sound-toggle { padding-left: 5px; } }