/**
 * Ombak Pantai Holiday editorial coastal design system.
 * Taste dials: variance 7, motion 5, density 3.
 * Author: Yul
 */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-variable.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-variable.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 200 800;
}

@font-face {
    font-family: "Outfit";
    src: url("../fonts/outfit-variable.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

:root {
    color-scheme: light;
    --color-canvas: #f5f1e8;
    --color-surface: #fbf9f3;
    --color-ink: #172625;
    --color-muted: #5f6c68;
    --color-lagoon: #174b4d;
    --color-lagoon-deep: #082f33;
    --color-seaglass: #9fc7be;
    --color-accent: #c6a467;
    --color-shell: #f8f5ed;
    --color-foam: #edf4f0;
    --color-mist: #e3eeea;
    --color-seaglass-wash: #dbe9e3;
    --color-seaglass-wash-soft: #e8f1ed;
    --color-sand-wash: #eee5d5;
    --color-sand-wash-soft: #f5eee2;
    --color-muted-on-tint: #4f5d59;
    --color-line: rgb(23 38 37 / 14%);
    --color-shell-line: rgb(251 249 243 / 22%);
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Manrope", "Avenir Next", Avenir, "Segoe UI", sans-serif;
    --font-description: "Outfit", "Century Gothic", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
    --container: 1320px;
    --gutter: clamp(1.15rem, 4vw, 3.75rem);
    --hero-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
    --radius-small: 6px;
    --radius-medium: 14px;
    --radius-large: 28px;
    --ease-premium: cubic-bezier(.16, 1, .3, 1);
    --shadow-float: 0 28px 80px rgb(8 47 51 / 17%);
    --hero-duration: 7200ms;
    --z-header: 40;
    --z-mobile-nav: 35;
    --z-transition: 90;
    --z-preloader: 100;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--color-canvas);
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.is-scroll-locked {
    position: fixed;
    top: var(--scroll-lock-offset, 0);
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

body.is-content-protected,
body.is-content-protected :where(*:not(input, textarea, select, [contenteditable="true"])) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

body.is-content-protected :where(input, textarea, select, [contenteditable="true"]) {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

body.is-content-protected :where(img, picture, svg, video, canvas) {
    -webkit-user-drag: none;
    user-drag: none;
}

:where(
    p:not(.eyebrow),
    figcaption,
    .experience-tile__copy > span:last-child,
    .inclusion-list li,
    .checkpoint-list strong
) {
    font-family: var(--font-description);
    letter-spacing: -.012em;
}

:where(
    p:not(.eyebrow),
    figcaption,
    .experience-tile__copy > span:last-child,
    .inclusion-list li
) {
    font-weight: 420;
}

body[data-language="zh"] :where(
    p:not(.eyebrow),
    figcaption,
    .experience-tile__copy > span:last-child,
    .inclusion-list li,
    .checkpoint-list strong
) {
    letter-spacing: 0;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: 80;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    content: "";
    opacity: .022;
    pointer-events: none;
}

/* Signature wave identity: reference-led curling flourishes on selected sections and cards. */
.wave-section-host,
.wave-card-surface {
    position: relative;
    isolation: isolate;
}

.wave-section-host {
    overflow: clip;
}

.wave-section-host > :not(.section-wave-flourish),
.wave-card-surface > :not(.card-wave-mark) {
    position: relative;
    z-index: 1;
}

.wave-flourish {
    --wave-primary: var(--color-lagoon-deep);
    --wave-secondary: #4ca6cf;
    --wave-foam: #9ed8ee;
    --flourish-opacity: .25;
    position: absolute;
    z-index: 0;
    display: block;
    color: var(--wave-primary);
    opacity: 0;
    pointer-events: none;
    transform: scale(.48) rotate(var(--flourish-start, -18deg));
    transform-origin: 31% 51%;
}

.wave-flourish svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wave-flourish__line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
}

.wave-flourish__line--primary {
    stroke: var(--wave-primary);
    stroke-width: 5.1;
}

.wave-flourish__line--secondary {
    stroke: var(--wave-secondary);
}

.wave-flourish__line--foam {
    stroke: var(--wave-foam);
    stroke-width: 3.7;
}

.section-wave-flourish {
    top: clamp(1.25rem, 4vw, 4.25rem);
    width: clamp(10rem, 15vw, 14.5rem);
}

.section-wave-flourish--left {
    left: clamp(-5.5rem, -4vw, -2.75rem);
}

.section-wave-flourish--right {
    --flourish-start: 18deg;
    right: clamp(-5.5rem, -4vw, -2.75rem);
    transform-origin: 69% 51%;
}

.section-wave-flourish--right svg {
    transform: scaleX(-1);
}

.section-wave-flourish--low {
    top: auto;
    bottom: clamp(1rem, 4vw, 4rem);
}

:where(.section--lagoon, .trip-overview-section).wave-section-host > .section-wave-flourish {
    --wave-primary: #e1f3eb;
    --wave-secondary: var(--color-seaglass);
    --wave-foam: #d8bc84;
    --flourish-opacity: .28;
}

.wave-card-surface {
    overflow: hidden;
}

.card-wave-mark {
    --flourish-opacity: .085;
    right: clamp(-2.7rem, -2vw, -1.25rem);
    bottom: clamp(-1.75rem, -1vw, -.75rem);
    width: clamp(7.25rem, 34%, 11rem);
}

:where(.booking-review) > .card-wave-mark {
    --wave-primary: #dff1ea;
    --wave-secondary: var(--color-seaglass);
    --wave-foam: #d8bc84;
    --flourish-opacity: .1;
}

:where(.trip-compact-cta, .contact-channel) > .card-wave-mark {
    display: none;
}

.tour-card__body > .card-wave-mark {
    right: auto;
    bottom: -1.65rem;
    left: 50%;
    width: 7.5rem;
    margin-left: -3.75rem;
}

.wave-flourish.is-wave-visible {
    animation: wave-flourish-swirl-in 1.12s var(--ease-premium) calc(var(--flourish-index, 0) * .045s) both;
}

.section-wave-flourish.is-wave-visible {
    animation-duration: 1.42s;
}

.wave-flourish.is-wave-visible .wave-flourish__line {
    animation: wave-flourish-draw 1.28s var(--ease-premium) calc((var(--flourish-index, 0) * .045s) + var(--flourish-delay, 0s)) both;
}

.section-wave-flourish.is-wave-visible .wave-flourish__line {
    animation-duration: 1.62s;
}

@keyframes wave-flourish-swirl-in {
    0% {
        opacity: 0;
        transform: scale(.48) rotate(var(--flourish-start, -18deg));
    }
    66% {
        opacity: var(--flourish-opacity, .38);
        transform: scale(1.035) rotate(1.5deg);
    }
    100% {
        opacity: var(--flourish-opacity, .38);
        transform: scale(1) rotate(0deg);
    }
}

@keyframes wave-flourish-draw {
    0% { opacity: 0; stroke-dashoffset: 1; }
    14% { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

img {
    display: block;
    max-width: 100%;
}

.responsive-picture,
.hero-media-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-media-picture {
    position: absolute;
    inset: 0;
}

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
    margin-top: 0;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

h1,
h2 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96, "SOFT" 42, "WONK" 1, "wght" 470;
    font-weight: 500;
    letter-spacing: -.045em;
}

h1 {
    font-size: clamp(3.25rem, 7vw, 6.8rem);
    line-height: .96;
}

h2 {
    font-size: clamp(2.35rem, 5vw, 5rem);
    line-height: 1.02;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.2;
}

body[data-language="zh"] {
    line-height: 1.8;
}

body[data-language="zh"] h1,
body[data-language="zh"] h2,
body[data-language="zh"] h3 {
    font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.container {
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    margin-inline: auto;
}

.section {
    --section-start: var(--color-canvas);
    --section-end: #f3f5ef;
    --section-glow: rgb(159 199 190 / 12%);
    position: relative;
    isolation: isolate;
    padding-block: clamp(5rem, 10vw, 10.5rem);
    background:
        radial-gradient(circle at 86% 12%, var(--section-glow), transparent 38rem),
        linear-gradient(180deg, var(--section-start), var(--section-end));
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 55%);
}

main > .section:nth-of-type(2n):not(.section--surface, .section--lagoon) {
    --color-muted: var(--color-muted-on-tint);
    --section-start: var(--color-sand-wash);
    --section-end: var(--color-sand-wash-soft);
    --section-glow: rgb(198 164 103 / 13%);
}

.section--compact {
    padding-block: clamp(4.5rem, 7vw, 7.5rem);
}

.section--surface {
    --color-muted: var(--color-muted-on-tint);
    --section-start: var(--color-seaglass-wash);
    --section-end: var(--color-seaglass-wash-soft);
    --section-glow: rgb(251 249 243 / 54%);
    box-shadow:
        inset 0 1px 0 rgb(251 249 243 / 72%),
        inset 0 -1px 0 rgb(23 75 77 / 8%);
}

.section--lagoon {
    --section-start: #0c3d40;
    --section-end: var(--color-lagoon-deep);
    --section-glow: rgb(159 199 190 / 16%);
    color: var(--color-surface);
    box-shadow:
        inset 0 1px 0 rgb(159 199 190 / 15%),
        inset 0 -1px 0 rgb(4 32 36 / 35%);
}

main > .section.section--lagoon {
    --section-start: #0c3d40;
    --section-end: var(--color-lagoon-deep);
    --section-glow: rgb(159 199 190 / 16%);
}

.lead {
    max-width: 64ch;
    color: var(--color-muted);
    font-size: clamp(1.08rem, 1.7vw, 1.35rem);
    line-height: 1.6;
}

.section--lagoon .lead {
    color: rgb(251 249 243 / 72%);
}

.eyebrow {
    margin-bottom: 1.2rem;
    color: var(--color-lagoon);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.section-heading {
    max-width: 840px;
    margin-bottom: clamp(2.75rem, 6vw, 5.5rem);
}

.section-heading h2 {
    max-width: 15ch;
    margin-bottom: 1.5rem;
}

.section-heading p:last-child {
    max-width: 62ch;
    color: var(--color-muted);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: calc(var(--z-preloader) + 1);
    padding: .7rem 1rem;
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-ink);
    transform: translateY(-150%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

/* Signature preloader */
.preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--color-canvas);
    color: var(--color-lagoon-deep);
    opacity: 1;
    pointer-events: none;
    transform: translate3d(0, 102%, 0);
    visibility: hidden;
    isolation: isolate;
    will-change: transform;
}

.is-preloading .preloader {
    pointer-events: auto;
    visibility: visible;
}

.is-preloading:not(.is-preloader-exiting) .preloader {
    animation: preloader-curtain-enter .76s var(--ease-premium) both;
}

.preloader::before {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='.55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.18'/%3E%3C/svg%3E");
    content: "";
    opacity: .08;
    pointer-events: none;
    will-change: transform;
}

.preloader::after {
    position: absolute;
    inset: 18% 8%;
    background: radial-gradient(circle at 50% 58%, rgb(159 199 190 / 15%), transparent 56%);
    content: "";
    opacity: .72;
    pointer-events: none;
    will-change: transform, opacity;
}

.preloader__inner {
    position: relative;
    z-index: 1;
    width: min(88vw, 760px);
    padding: 2.5rem 0 5.4rem;
    contain: layout paint style;
    text-align: center;
    will-change: transform, opacity;
}

.is-preloading:not(.is-preloader-exiting) .preloader::before {
    animation: preloader-grain-enter .98s var(--ease-premium) both;
}

.is-preloading:not(.is-preloader-exiting) .preloader::after {
    animation: preloader-light-enter .92s var(--ease-premium) both;
}

.is-preloading:not(.is-preloader-exiting) .preloader__inner {
    animation: preloader-content-enter .94s var(--ease-premium) both;
}

.preloader__wordmark {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6.8vw, 4.6rem);
    font-variation-settings: "opsz" 96, "SOFT" 18, "WONK" 1, "wght" 720;
    font-weight: 720;
    font-synthesis: none;
    font-variant-ligatures: none;
    letter-spacing: -.045em;
    line-height: 1;
    text-rendering: geometricPrecision;
    white-space: pre;
}

.preloader__wordmark span {
    display: inline-block;
    color: var(--color-lagoon-deep);
    opacity: 0;
    will-change: opacity;
}

.is-preloading .preloader__wordmark span {
    animation: wordmark-ink-in .42s cubic-bezier(.22, .82, .24, 1) forwards;
    animation-delay: calc(.08s + (var(--i) * 24ms));
}

.preloader__wave {
    position: absolute;
    right: 3%;
    bottom: .55rem;
    left: 3%;
    z-index: 1;
    width: 94%;
    height: auto;
    overflow: visible;
    opacity: 0;
    filter: drop-shadow(0 .55rem .8rem rgb(23 75 77 / 16%));
    will-change: opacity;
}

.is-preloading .preloader__wave {
    animation: wave-field-appear .72s .04s ease-out forwards;
}

.preloader__wave-line {
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    will-change: stroke-dashoffset;
}

.preloader__wave-line--front {
    stroke: var(--color-lagoon-deep);
    stroke-width: 3.2;
}

.preloader__wave-line--echo {
    stroke: var(--color-seaglass);
    stroke-width: 1.9;
}

.is-preloading .preloader__wave-line--front {
    animation: wave-current-draw 1.12s .06s cubic-bezier(.22, .82, .24, 1) forwards;
}

.is-preloading .preloader__wave-line--echo {
    animation: wave-echo-draw 1.08s .18s cubic-bezier(.22, .82, .24, 1) forwards;
}

.preloader__tide {
    position: absolute;
    right: 5%;
    bottom: .4rem;
    left: 5%;
    z-index: 0;
    height: 4.9rem;
    overflow: hidden;
    border-radius: 52% 48% 12% 12% / 64% 58% 18% 18%;
    background: linear-gradient(180deg, rgb(159 199 190 / 4%), rgb(159 199 190 / 34%) 52%, rgb(159 199 190 / 8%));
    opacity: 0;
    transform: translate3d(-42%, 1.2rem, 0) scaleX(.64);
}

.preloader__tide::before,
.preloader__tide::after {
    position: absolute;
    right: -12%;
    left: -12%;
    height: 3.2rem;
    border-top: 1px solid rgb(23 75 77 / 34%);
    border-radius: 50%;
    content: "";
}

.preloader__tide::before {
    top: .2rem;
}

.preloader__tide::after {
    top: 1.15rem;
    border-color: rgb(159 199 190 / 66%);
    transform: translateX(8%);
}

.is-preloading .preloader__tide {
    animation: tide-sweep .94s .34s cubic-bezier(.22, .82, .24, 1) forwards;
}

.is-preloader-exiting .preloader {
    animation: preloader-curtain-exit .72s cubic-bezier(.7, 0, .3, 1) both;
}

.is-preloader-exiting .preloader::before {
    animation: preloader-grain-exit .72s cubic-bezier(.7, 0, .3, 1) both;
}

.is-preloader-exiting .preloader::after {
    animation: preloader-light-exit .72s cubic-bezier(.7, 0, .3, 1) both;
}

.is-preloader-exiting .preloader__inner {
    animation: preloader-content-exit .72s cubic-bezier(.7, 0, .3, 1) both;
}

@keyframes preloader-curtain-enter {
    0% { transform: translate3d(0, 102%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes preloader-curtain-exit {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 102%, 0); }
}

@keyframes preloader-content-enter {
    0% { opacity: .18; transform: translate3d(0, 14vh, 0) scale(.975); }
    58% { opacity: .86; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes preloader-content-exit {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(0, -11vh, 0) scale(.985); }
}

@keyframes preloader-grain-enter {
    0% { transform: translate3d(0, 8%, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes preloader-grain-exit {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -5%, 0) scale(1.04); }
}

@keyframes preloader-light-enter {
    0% { opacity: 0; transform: translate3d(0, 18%, 0) scale(.86); }
    100% { opacity: .72; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes preloader-light-exit {
    0% { opacity: .72; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(0, -12%, 0) scale(1.08); }
}

@keyframes wordmark-ink-in {
    0%, 18% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes wave-field-appear {
    0% { opacity: 0; }
    42%, 100% { opacity: 1; }
}

@keyframes wave-current-draw {
    0% { opacity: 0; stroke-dashoffset: 1; }
    16% { opacity: 1; }
    66%, 84% { opacity: 1; stroke-dashoffset: 0; }
    100% { opacity: .96; stroke-dashoffset: 0; }
}

@keyframes wave-echo-draw {
    0% { opacity: 0; stroke-dashoffset: 1; }
    20% { opacity: .62; }
    70% { opacity: .82; stroke-dashoffset: 0; }
    100% { opacity: .64; stroke-dashoffset: 0; }
}

@keyframes tide-sweep {
    0% { opacity: 0; transform: translate3d(-42%, 1.2rem, 0) scaleX(.64); }
    50% { opacity: .54; transform: translate3d(-2%, .05rem, 0) scaleX(1.02); }
    100% { opacity: .14; transform: translate3d(28%, .62rem, 0) scaleX(.84); }
}

.page-transition {
    position: fixed;
    inset: 0;
    z-index: var(--z-transition);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgb(8 47 51 / 11%) 0 31%, transparent 31% 34%, rgb(8 47 51 / 8%) 34% 61%, transparent 61% 64%, rgb(8 47 51 / 11%) 64%) center calc(100% - clamp(4rem, 8vw, 7rem)) / min(88vw, 1180px) clamp(5.5rem, 10vw, 8rem) no-repeat,
        linear-gradient(90deg, rgb(255 255 255 / 74%), rgb(237 244 240 / 90%)) center clamp(5rem, 8vw, 6.6rem) / min(88vw, 1180px) clamp(19rem, 54vh, 36rem) no-repeat,
        linear-gradient(90deg, rgb(8 47 51 / 9%), rgb(23 75 77 / 14%)) 0 0 / 100% clamp(4.5rem, 7vw, 5.75rem) no-repeat,
        var(--color-canvas);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0);
    visibility: hidden;
}

.page-transition::before {
    position: absolute;
    top: clamp(8.4rem, 14vw, 12.5rem);
    left: max(6vw, calc((100vw - 1080px) / 2));
    width: min(42rem, 54vw);
    height: min(19rem, 36vh);
    border-radius: .6rem;
    background:
        linear-gradient(rgb(23 75 77 / 22%) 0 0) 0 0 / 20% .62rem no-repeat,
        linear-gradient(rgb(8 47 51 / 19%) 0 0) 0 2.2rem / 82% clamp(2rem, 5vw, 4rem) no-repeat,
        linear-gradient(rgb(8 47 51 / 15%) 0 0) 0 clamp(5.2rem, 9vw, 7rem) / 66% .92rem no-repeat,
        linear-gradient(rgb(8 47 51 / 11%) 0 0) 0 clamp(7.2rem, 12vw, 9rem) / 54% .92rem no-repeat,
        linear-gradient(rgb(198 164 103 / 34%) 0 0) 0 clamp(10.5rem, 17vw, 13rem) / 9.5rem 3rem no-repeat;
    content: "";
}

.page-transition::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 36%, rgb(255 255 255 / 55%) 48%, transparent 60%);
    content: "";
    opacity: .7;
    transform: translate3d(-115%, 0, 0);
    will-change: transform;
}

.is-preloading:not(.is-content-ready) .page-transition,
.is-route-loading:not(.is-content-ready) .page-transition {
    opacity: 1;
    visibility: visible;
}

.is-preloading:not(.is-content-ready) .page-transition::after,
.is-route-loading:not(.is-content-ready) .page-transition::after {
    animation: skeleton-current 1.7s ease-in-out infinite;
}

@keyframes skeleton-current {
    0% { transform: translate3d(-115%, 0, 0); }
    62%, 100% { transform: translate3d(115%, 0, 0); }
}

/* Shared controls */
.button {
    --magnetic-x: 0px;
    --magnetic-y: 0px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-width: 10.5rem;
    padding: .82rem 1.25rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
    transition: color .35s ease, border-color .35s ease, background-color .35s ease, transform .4s var(--ease-premium);
}

.button::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-seaglass);
    content: "";
    transform: translateY(102%);
    transition: transform .45s var(--ease-premium);
}

.button > * {
    position: relative;
}

.button:hover::before {
    transform: translateY(0);
}

.button:active {
    transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) + 1px), 0) scale(.985);
}

.button--ink {
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.button--ink:hover {
    color: var(--color-lagoon-deep);
}

.button--sand {
    background: var(--color-accent);
    color: #142827;
}

.button--sand::before {
    background: var(--color-surface);
}

.button--ghost {
    border-color: var(--color-line);
    background: transparent;
    color: var(--color-ink);
}

.button-arrow {
    display: inline-block;
    transition: transform .4s var(--ease-premium);
}

.button:hover .button-arrow,
.text-link:hover .button-arrow,
.matching-row:hover .button-arrow {
    transform: translateX(4px);
}

.text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .65rem;
    border-bottom: 1px solid currentColor;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .32s ease, color .32s ease, transform .4s var(--ease-premium);
}

.text-link--light {
    color: var(--color-surface);
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-header);
    height: 74px;
    border-bottom: 1px solid transparent;
    background: rgb(245 241 232 / 92%);
    color: var(--color-ink);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.has-dark-hero .site-header:not(.is-scrolled) {
    background: transparent;
    color: var(--color-surface);
}

.site-header.is-scrolled {
    border-color: rgb(255 255 255 / 48%);
    background: rgb(245 241 232 / 76%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 62%),
        inset 0 -1px 0 rgb(23 75 77 / 8%),
        0 14px 42px rgb(8 47 51 / 10%);
    color: var(--color-ink);
    -webkit-backdrop-filter: blur(22px) saturate(145%) contrast(1.02);
    backdrop-filter: blur(22px) saturate(145%) contrast(1.02);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header.is-scrolled {
        background: rgb(245 241 232 / 96%);
    }

    .hero-slider__actions {
        background: rgb(8 47 51 / 88%);
    }

}

.header-inner {
    display: grid;
    height: 100%;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-display);
    font-size: clamp(1.04rem, 1.5vw, 1.3rem);
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.brand-wave {
    position: relative;
    width: 30px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-radius: 50%;
}

.brand-wave::after {
    position: absolute;
    top: 4px;
    left: 7px;
    width: 21px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-radius: 50%;
    content: "";
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.9rem, 1.7vw, 1.7rem);
}

.primary-nav > a {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav > a::after {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: scaleX(0) rotate(-1deg);
    transform-origin: right;
    transition: transform .35s var(--ease-premium);
}

.primary-nav > a:hover::after,
.primary-nav > a[aria-current="page"]::after {
    transform: scaleX(1) rotate(-1deg);
    transform-origin: left;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: .2rem;
    padding-left: .6rem;
    border-left: 1px solid currentColor;
}

.language-switcher button {
    min-width: 36px;
    min-height: 44px;
    padding: .25rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .72rem;
    opacity: .62;
}

.language-switcher button[aria-pressed="true"] {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: .3em;
}

.header-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: .65rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-small);
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.site-header.is-scrolled .header-cta,
body:not(.has-dark-hero) .site-header .header-cta {
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.mobile-header-actions {
    display: none;
}

.mobile-language-trigger {
    display: inline-flex;
    min-width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: 0 .35rem;
    border: 0;
    background: transparent;
    color: inherit;
}

.mobile-language-trigger svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
}

.mobile-language-trigger [data-current-language-code] {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.nav-toggle span {
    display: block;
    width: 23px;
    height: 1px;
    margin: 6px auto;
    background: currentColor;
    transition: transform .35s var(--ease-premium);
}

.nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* Language selector */
.language-dialog {
    width: min(calc(100% - 2rem), 660px);
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-surface);
    opacity: 0;
    overflow: visible;
    transform: translateY(1rem) scale(.985);
    transition: opacity .28s ease, transform .42s var(--ease-premium), display .28s allow-discrete, overlay .28s allow-discrete;
}

.language-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    .language-dialog[open] {
        opacity: 0;
        transform: translateY(1rem) scale(.985);
    }
}

.language-dialog::backdrop {
    background: rgb(3 24 27 / 72%);
    -webkit-backdrop-filter: blur(12px) saturate(80%);
    backdrop-filter: blur(12px) saturate(80%);
}

.language-dialog__surface {
    position: relative;
    max-height: calc(100dvh - 2rem);
    padding: clamp(2rem, 5vw, 3.75rem);
    overflow: auto;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-large);
    background:
        radial-gradient(circle at 86% 8%, rgb(159 199 190 / 17%), transparent 34%),
        var(--color-lagoon-deep);
    box-shadow: 0 40px 100px rgb(2 20 23 / 38%), inset 0 1px 0 rgb(255 255 255 / 10%);
    overscroll-behavior: contain;
}

.language-dialog__surface::after {
    position: absolute;
    right: 2rem;
    bottom: 1.25rem;
    width: 7rem;
    height: 3rem;
    border-top: 1px solid rgb(198 164 103 / 52%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    transform: rotate(-5deg);
}

.language-dialog__current {
    position: absolute;
    top: 1.15rem;
    left: clamp(2rem, 5vw, 3.75rem);
    color: rgb(251 249 243 / 72%);
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .04em;
    -webkit-text-stroke: .45px rgb(251 249 243 / 82%);
    paint-order: stroke fill;
    text-shadow: 0 1px 14px rgb(251 249 243 / 16%);
}

.language-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 50%;
    background: rgb(255 255 255 / 5%);
    color: inherit;
    transition: background-color .25s ease, transform .25s ease;
}

.language-dialog__close:hover {
    background: rgb(255 255 255 / 12%);
}

.language-dialog__close:active {
    transform: scale(.96);
}

.language-dialog__close span {
    position: absolute;
    top: 21px;
    left: 12px;
    width: 19px;
    height: 1px;
    background: currentColor;
    transform: rotate(45deg);
}

.language-dialog__close span:last-child {
    transform: rotate(-45deg);
}

.language-dialog__crest {
    width: 7.8rem;
    margin: 1rem 0 1.4rem;
    color: var(--color-seaglass);
}

.language-dialog__crest svg {
    display: block;
    width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.3;
}

.language-dialog .eyebrow {
    margin-bottom: .75rem;
    color: var(--color-accent);
}

.language-dialog h2 {
    max-width: 12ch;
    margin: 0;
    color: var(--color-surface);
    font-size: clamp(2rem, 5vw, 3.35rem);
    line-height: .98;
    text-wrap: balance;
}

.language-dialog h2 .heading-waveword {
    -webkit-text-stroke: .65px rgb(251 249 243 / 88%);
    paint-order: stroke fill;
    text-shadow: 0 1px 18px rgb(251 249 243 / 14%);
}

.language-dialog h2 + p {
    max-width: 48ch;
    margin: 1.15rem 0 0;
    color: rgb(251 249 243 / 72%);
    font-size: .95rem;
}

.language-dialog__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-top: 2rem;
}

.language-choice {
    position: relative;
    display: grid;
    min-height: 108px;
    align-content: space-between;
    justify-items: start;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: var(--radius-medium);
    background: rgb(255 255 255 / 5%);
    color: inherit;
    text-align: left;
    transition: border-color .25s ease, background-color .25s ease, transform .25s var(--ease-premium);
}

.language-choice:hover {
    border-color: rgb(159 199 190 / 54%);
    background: rgb(159 199 190 / 10%);
    transform: translateY(-2px);
}

.language-choice:active {
    transform: translateY(0) scale(.985);
}

.language-choice[aria-pressed="true"] {
    border-color: rgb(198 164 103 / 82%);
    background: rgb(198 164 103 / 12%);
}

.language-choice__code {
    color: var(--color-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.language-choice__name {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 560;
    line-height: 1.15;
}

.language-choice__mark {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: transparent;
    font-size: .7rem;
}

.language-choice[aria-pressed="true"] .language-choice__mark {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-lagoon-deep);
}

.language-dialog__note {
    max-width: 44ch;
    margin: 1.35rem 0 0;
    color: rgb(251 249 243 / 52%);
    font-size: .72rem;
}

/* Media */
.media-clip {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background: var(--color-lagoon);
}

.media-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform .65s var(--ease-premium), filter .65s ease;
}

@media (hover: hover) and (pointer: fine) {
    .media-clip:hover img,
    a:hover .tour-card__image {
        transform: scale(1.04) translateY(-.4%);
        filter: saturate(1.04) contrast(1.02);
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
        [data-parallax-media] {
            animation: media-parallax linear both;
            animation-range: cover -12% cover 112%;
            animation-timeline: view();
        }

        .home-hero__slide.is-active .hero-media-image,
        .page-hero > .hero-media-image,
        .contact-hero > .hero-media-image,
        .trip-hero__media > .hero-media-image {
            animation: hero-media-depth linear both;
            animation-range: exit 0% exit 100%;
            animation-timeline: view();
        }

        .home-hero__slide.is-active .home-hero__content,
        .page-hero__content,
        .contact-hero__content,
        .trip-hero__copy {
            animation: hero-copy-depth linear both;
            animation-range: exit 0% exit 78%;
            animation-timeline: view();
        }

        .home-hero__slide.is-active .home-hero__light {
            animation: hero-light-depth linear both;
            animation-range: exit 0% exit 100%;
            animation-timeline: view();
        }
    }
}

@keyframes media-parallax {
    from { transform: scale(1.075) translate3d(0, -16px, 0); }
    to { transform: scale(1.075) translate3d(0, 20px, 0); }
}

@keyframes hero-media-depth {
    from { transform: scale(1.01) translate3d(0, 0, 0); }
    to { transform: scale(1.075) translate3d(0, 32px, 0); }
}

@keyframes hero-copy-depth {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: .68; transform: translate3d(0, -26px, 0); }
}

@keyframes hero-light-depth {
    from { opacity: .76; transform: translate3d(0, 0, 0); }
    to { opacity: .34; transform: translate3d(-3%, 2%, 0); }
}

/* Home hero */
.hero-sentinel {
    position: absolute;
    top: 0;
    width: 1px;
    height: 80px;
    pointer-events: none;
}

.home-hero {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
    isolation: isolate;
}

.home-hero__slides,
.home-hero__slide,
.home-hero__media,
.home-hero__veil,
.home-hero__light {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-hero__slide {
    display: grid;
    min-height: 100dvh;
    align-items: end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s var(--ease-premium), visibility 1s;
    visibility: hidden;
}

.home-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.home-hero__media {
    overflow: hidden;
    transform-origin: center;
}

.hero-media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-image-position, center);
    transform: scale(1.01);
    transform-origin: center;
}

[data-hero-id="terengganu-coast"] .hero-media-image {
    --hero-image-position: 65% center;
}

[data-hero-id="setiu-wetland"] .hero-media-image,
[data-hero-id="setiu-wetlands"] .hero-media-image,
body[data-page="tours"] .page-hero > .hero-media-image,
[data-hero-id="redang"] .hero-media-image {
    --hero-image-position: 40% center;
}

[data-hero-id="island-hopping"] .hero-media-image {
    --hero-image-position: center 60%;
}

body[data-page="about"] .page-hero > .hero-media-image,
body[data-page="contact"] .contact-hero > .hero-media-image {
    --hero-image-position: 56% center;
}

.home-hero__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgb(5 35 39 / 88%) 0%, rgb(8 47 51 / 57%) 42%, rgb(8 47 51 / 13%) 76%, rgb(8 47 51 / 8%) 100%),
        linear-gradient(0deg, rgb(4 32 36 / 72%) 0%, rgb(4 32 36 / 12%) 58%, rgb(4 32 36 / 32%) 100%);
}

.home-hero__light {
    z-index: 1;
    background: radial-gradient(circle at 72% 34%, rgb(218 238 229 / 17%), transparent 29%);
    mix-blend-mode: screen;
    opacity: .75;
    transform: translate3d(0, 0, 0);
}

.home-hero__content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    max-width: none;
    padding-top: calc(74px + 1.25rem);
    padding-bottom: clamp(7.25rem, 13vh, 9rem);
    text-align: left;
}

.home-hero .eyebrow,
.trip-hero .eyebrow {
    color: var(--color-seaglass);
}

.home-hero__title {
    max-width: 20ch;
    margin-bottom: 1.05rem;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 4.8vw, 5.15rem);
    font-variation-settings: "opsz" 132, "SOFT" var(--hero-soft, 42), "WONK" var(--hero-wonk, 1), "wght" 430;
    font-weight: 430;
    letter-spacing: -.058em;
    line-height: .98;
    text-align: left;
    text-wrap: balance;
}

.hero-lead {
    max-width: 48ch;
    margin-bottom: 1.55rem;
    color: rgb(251 249 243 / 82%);
    font-size: clamp(.96rem, 1.15vw, 1.12rem);
    line-height: 1.58;
    text-wrap: pretty;
}

.heading-waveword {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    padding-right: .07em;
    padding-bottom: .06em;
    color: var(--color-lagoon);
    font-family: inherit;
    font-style: italic;
    font-variation-settings: "opsz" 118, "SOFT" 92, "WONK" 1, "wght" 620;
    font-weight: 620;
    letter-spacing: -.025em;
    line-height: 1.12;
    vertical-align: baseline;
}

body[data-language="zh"] .heading-waveword {
    padding-right: .03em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

.home-hero .heading-waveword,
.page-hero--media .heading-waveword,
.contact-hero .heading-waveword,
.trip-hero .heading-waveword,
.trip-overview-section .heading-waveword,
.section--lagoon .heading-waveword,
.image-cta .heading-waveword,
.contact-channel .heading-waveword,
.trip-compact-cta .heading-waveword,
.site-footer .heading-waveword {
    color: #cfe7de;
}

.home-hero__content :is(.eyebrow, h1, .hero-lead, .hero-highlight, .heading-waveword, .text-link--light),
.page-hero--media .page-hero__content :is(.eyebrow, h1, .hero-lead, .hero-highlight, .heading-waveword, .text-link--light),
.contact-hero__content :is(.eyebrow, h1, .hero-lead, .hero-highlight, .heading-waveword, .text-link--light),
.trip-hero__copy :is(.eyebrow, h1, .hero-lead, .hero-highlight, .heading-waveword, .text-link--light) {
    color: #fff;
}

.heading-waveword__char {
    display: inline-block;
    color: inherit;
    transform-origin: center 78%;
}

.js .heading-waveword__char {
    opacity: 0;
    transform: translate3d(0, .58em, 0) rotate(-2deg) scale(.97);
}

.js .heading-waveword::after {
    position: absolute;
    right: .02em;
    bottom: .03em;
    left: -.04em;
    height: .12em;
    border-top: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0;
    transform: scaleX(0) translate3d(0, .06em, 0) rotate(-1deg);
    transform-origin: left;
}

.js .heading-wave.is-heading-visible .heading-waveword__char,
.js .home-hero__slide.is-active .heading-waveword__char {
    animation: heading-wave-letter .58s var(--ease-premium) both;
    animation-delay: calc(.1s + (var(--char-index) * 42ms));
}

.js .heading-wave.is-heading-visible .heading-waveword::after,
.js .home-hero__slide.is-active .heading-waveword::after {
    animation: heading-wave-current var(--wave-current-duration, .72s) .08s var(--ease-premium) both;
}

.is-preloading .heading-waveword__char,
.is-preloading .heading-waveword::after {
    animation-play-state: paused !important;
}

@keyframes heading-wave-letter {
    0% {
        opacity: 0;
        transform: translate3d(0, .58em, 0) rotate(-2deg) scale(.97);
    }

    58% {
        opacity: 1;
        transform: translate3d(0, -.08em, 0) rotate(.4deg) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@keyframes heading-wave-current {
    0% {
        opacity: 0;
        transform: scaleX(0) translate3d(0, .06em, 0) rotate(-1deg);
    }

    24% {
        opacity: .82;
    }

    100% {
        opacity: .34;
        transform: scaleX(1) translate3d(0, 0, 0) rotate(-1deg);
    }
}

.home-hero__content > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
}

.home-hero__slide.is-active .home-hero__content > * {
    animation: hero-copy-in .9s var(--ease-premium) both;
}

.is-preloading .home-hero__slide.is-active .home-hero__content > * {
    animation-play-state: paused;
}

.home-hero__slide.is-active .home-hero__content > :nth-child(1) { animation-delay: .08s; }
.home-hero__slide.is-active .home-hero__content > :nth-child(2) { animation-delay: .14s; }
.home-hero__slide.is-active .home-hero__content > :nth-child(3) { animation-delay: .22s; }
.home-hero__slide.is-active .home-hero__content > :nth-child(4) { animation-delay: .3s; }

@keyframes hero-copy-in {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.hero-slider__controls {
    position: absolute;
    right: 0;
    bottom: clamp(1.15rem, 3vw, 2.25rem);
    left: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    pointer-events: none;
}

.js .hero-slider__controls {
    display: flex;
}

.hero-slider__progress,
.hero-slider__actions {
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.hero-slider__progress {
    gap: .55rem;
}

.hero-slider__progress-button {
    position: relative;
    width: clamp(42px, 5.5vw, 72px);
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
}

.hero-slider__progress-button span,
.hero-slider__progress-button::after {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    transform-origin: left;
}

.hero-slider__progress-button span {
    background: rgb(251 249 243 / 34%);
}

.hero-slider__progress-button::after {
    background: var(--color-surface);
    transform: scaleX(0);
}

.hero-slider__progress-button.is-active::after {
    transform: scaleX(1);
}

.home-hero.is-autoplaying .hero-slider__progress-button.is-active::after {
    animation: hero-progress var(--hero-duration) linear both;
}

@keyframes hero-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.hero-slider__actions {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: var(--radius-small);
    background: rgb(8 47 51 / 28%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 14px 34px rgb(2 25 28 / 16%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
}

.hero-slider__actions button {
    display: grid;
    width: 46px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-right: 1px solid rgb(255 255 255 / 18%);
    background: transparent;
    color: var(--color-surface);
    font-size: 1rem;
    transition: background-color .3s ease, transform .3s var(--ease-premium);
}

.hero-slider__actions button:last-child {
    border-right: 0;
}

.hero-slider__actions button:hover,
.hero-slider__actions button:focus-visible {
    background: rgb(255 255 255 / 12%);
}

.hero-slider__actions button:active {
    transform: scale(.96);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
}

/* Home sections */
.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(240px, 4fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.intro-grid h2 {
    max-width: 13ch;
    margin-bottom: 1.7rem;
}

.intro-note {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: .9rem;
}

.journey-grid,
.tour-preview-grid,
.tour-collection-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 2rem);
}

.journey-grid .tour-card:first-child {
    grid-column: span 7;
    grid-row: span 2;
}

.journey-grid .tour-card:not(:first-child) {
    grid-column: span 5;
}

.journey-grid .tour-card:first-child .tour-card__media {
    aspect-ratio: 4 / 5;
}

.journey-grid .tour-card:not(:first-child) .tour-card__media {
    aspect-ratio: 16 / 9;
}

.tour-preview-grid .tour-card:nth-child(1) {
    grid-column: 1 / span 5;
}

.tour-preview-grid .tour-card:nth-child(2) {
    grid-column: 6 / span 7;
    margin-top: clamp(3rem, 8vw, 7rem);
}

.tour-preview-grid .tour-card:nth-child(3) {
    grid-column: 3 / span 6;
    margin-top: clamp(1rem, 3vw, 2.5rem);
}

.tour-card {
    min-width: 0;
    padding: clamp(.72rem, 1.25vw, 1.1rem);
    border: 1px solid rgb(23 75 77 / 13%);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgb(251 249 243 / 64%), rgb(237 244 240 / 50%)),
        rgb(251 249 243 / 52%);
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 82%);
}

.tour-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: 1.4rem;
}

.tour-card__topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
    color: var(--color-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tour-card h3 {
    margin-bottom: .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -.04em;
}

.tour-card h3 a {
    text-decoration: none;
}

.tour-card__body > p {
    max-width: 60ch;
    color: var(--color-muted);
}

.tour-card__bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-line);
}

.tour-card__price {
    display: grid;
    gap: .2rem;
}

.tour-card__status {
    color: var(--color-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tour-card__price strong {
    font-size: .92rem;
}

.home-photo-story__layout {
    display: grid;
    grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
}

.home-photo-story__copy {
    padding-bottom: clamp(1rem, 4vw, 3rem);
}

.home-photo-story__copy h2 {
    max-width: 10ch;
}

.home-photo-story__copy .lead {
    max-width: 42ch;
    color: var(--color-muted);
}

.home-photo-story__visuals {
    display: grid;
    min-height: clamp(680px, 68vw, 880px);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.home-photo-story__frame--aerial {
    grid-row: 1 / 3;
}

.home-photo-story__frame--aerial .home-photo-story__image {
    object-position: center 54%;
}

.home-photo-story__frame--kayak .home-photo-story__image {
    object-position: center 68%;
}

.home-photo-story__frame--brand .home-photo-story__image {
    object-position: center 70%;
}

.reef-river-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.reef-river-media {
    aspect-ratio: 4 / 5;
}

.reef-river-copy h2 {
    max-width: 10ch;
    margin-bottom: 1.5rem;
}

.reef-river-links {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.proof-layout {
    display: grid;
    grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 10vw, 10rem);
}

.proof-layout h2 {
    position: sticky;
    top: 120px;
    max-width: 10ch;
}

.proof-list {
    display: grid;
    gap: 0;
}

.proof-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    padding-block: 2.2rem;
    border-bottom: 1px solid var(--color-line);
}

.proof-item:first-child {
    border-top: 1px solid var(--color-line);
}

.proof-item h3,
.proof-item p {
    margin: 0;
}

.proof-item p {
    color: var(--color-muted);
}

.planning-steps {
    display: grid;
    grid-template-columns: 1.15fr .9fr 1.15fr;
    gap: 0;
    margin-top: 4rem;
    border-top: 1px solid var(--color-line);
}

.planning-step {
    min-height: 280px;
    padding: 2.25rem clamp(1rem, 3vw, 2.5rem);
    border-right: 1px solid var(--color-line);
}

.planning-step:last-child {
    border-right: 0;
}

.planning-step > span {
    display: block;
    margin-bottom: clamp(3rem, 7vw, 6rem);
    color: var(--color-lagoon);
    font-family: var(--font-display);
    font-size: 2.4rem;
}

.planning-step p {
    color: var(--color-muted);
}

.image-cta {
    position: relative;
    min-height: min(72dvh, 760px);
    display: grid;
    align-items: end;
    overflow: hidden;
    color: var(--color-surface);
}

.image-cta img,
.image-cta__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-cta__veil {
    background: linear-gradient(0deg, rgb(8 47 51 / 88%) 0%, rgb(8 47 51 / 15%) 75%);
}

.image-cta__content {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding-block: clamp(3rem, 7vw, 6rem);
}

.image-cta h2 {
    max-width: 12ch;
    margin-bottom: .8rem;
}

.image-cta p {
    max-width: 55ch;
    color: rgb(251 249 243 / 75%);
}

/* Interior heroes */
.page-hero {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
}

.page-hero--media {
    display: grid;
    align-items: end;
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.page-hero__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.page-hero__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgb(5 35 39 / 88%) 0%, rgb(8 47 51 / 52%) 46%, rgb(8 47 51 / 10%) 82%),
        linear-gradient(0deg, rgb(4 32 36 / 72%), transparent 62%, rgb(4 32 36 / 24%));
}

.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin-right: auto;
    margin-left: var(--hero-inline);
    padding-top: calc(74px + 1.25rem);
    padding-bottom: clamp(3.75rem, 8vh, 6rem);
    text-align: left;
}

.page-hero__content h1 {
    max-width: 20ch;
    margin-bottom: 1.1rem;
    font-size: clamp(2.75rem, 4.6vw, 4.95rem);
    font-variation-settings: "opsz" 126, "SOFT" 46, "WONK" 1, "wght" 440;
    font-weight: 440;
    letter-spacing: -.055em;
    line-height: .99;
    text-align: left;
}

.page-hero--light {
    min-height: min(72dvh, 760px);
    display: grid;
    align-items: end;
    border-bottom: 1px solid var(--color-line);
}

.page-hero--light .page-hero__content {
    max-width: 950px;
}

.page-hero--light .hero-lead {
    color: var(--color-muted);
}

/* Tours */
.tour-collection-section .section-heading {
    max-width: 900px;
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.tour-collection-grid {
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
}

.tour-collection-grid .tour-card {
    margin: 0;
}

.tour-collection-grid .tour-card:nth-child(1) {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
}

.tour-collection-grid .tour-card:nth-child(1) .tour-card__media {
    aspect-ratio: 4 / 5;
}

.tour-collection-grid .tour-card:nth-child(1) h3 {
    font-size: clamp(2.1rem, 3.5vw, 3.4rem);
}

.tour-collection-grid .tour-card:nth-child(2) {
    grid-column: 8 / span 5;
    grid-row: 1;
}

.tour-collection-grid .tour-card:nth-child(3) {
    grid-column: 8 / span 5;
    grid-row: 2;
}

.tour-collection-grid .tour-card:nth-child(4) {
    grid-column: 1 / span 6;
    grid-row: 3;
}

.tour-collection-grid .tour-card:nth-child(5) {
    grid-column: 7 / span 6;
    grid-row: 3;
}

.tour-collection-grid .tour-card:nth-child(2) .tour-card__media,
.tour-collection-grid .tour-card:nth-child(3) .tour-card__media {
    aspect-ratio: 16 / 9;
}

.tour-collection-grid .tour-card:nth-child(4) .tour-card__media,
.tour-collection-grid .tour-card:nth-child(5) .tour-card__media {
    aspect-ratio: 4 / 3;
}

.comparison-list {
    border-top: 1px solid var(--color-line);
}

.comparison-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(0, 4fr) auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding-block: 2rem;
    border-bottom: 1px solid var(--color-line);
}

.comparison-row h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
}

.comparison-row h3 a {
    text-decoration: none;
}

.comparison-row dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.comparison-row dt {
    margin-bottom: .25rem;
    color: var(--color-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.comparison-row dd {
    font-size: .82rem;
    line-height: 1.4;
}

/* Shared editorial feature rail */
.feature-rail {
    --feature-columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--feature-columns), minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(2.75rem, 5vw, 4rem);
    border-block: 1px solid var(--color-line);
    background: var(--color-line);
}

.feature-rail--2 {
    --feature-columns: 2;
}

.feature-rail--4 {
    --feature-columns: 4;
}

.feature-rail__item,
.js .feature-rail__item.reveal {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 3.25rem minmax(3.5rem, auto) 1fr;
    gap: 1.15rem;
    min-width: 0;
    min-height: 300px;
    overflow: hidden;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    background: var(--color-surface);
    transition:
        opacity .8s ease,
        color .32s var(--ease-premium),
        background-color .32s var(--ease-premium),
        box-shadow .42s var(--ease-premium),
        transform .42s var(--ease-premium);
}

.feature-rail__item::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 6%, rgb(159 199 190 / 32%), transparent 36%),
        linear-gradient(145deg, rgb(251 249 243 / 98%), rgb(245 241 232 / 74%));
    content: "";
    opacity: 0;
    transition: opacity .42s var(--ease-premium);
}

.feature-rail__item::after {
    position: absolute;
    right: clamp(1.75rem, 3vw, 2.75rem);
    bottom: 0;
    left: clamp(1.75rem, 3vw, 2.75rem);
    height: 2px;
    background: var(--color-lagoon);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s var(--ease-premium);
}

.feature-rail__icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid rgb(23 75 77 / 24%);
    border-radius: 50%;
    background: rgb(159 199 190 / 14%);
    color: var(--color-lagoon);
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 82%);
    transition:
        background-color .32s var(--ease-premium),
        color .32s var(--ease-premium),
        transform .42s var(--ease-premium);
}

.feature-rail__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.feature-rail__item h3 {
    align-self: end;
    max-width: 14ch;
    margin: 0;
}

.feature-rail__item p {
    max-width: 39ch;
    margin: 0;
    color: var(--color-muted);
}

.feature-rail__item--compact {
    grid-template-rows: 3.25rem 1fr;
    min-height: 220px;
}

.feature-rail__item--compact p {
    align-self: end;
    color: var(--color-ink);
    line-height: 1.65;
}

.feature-rail--safety {
    margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
    .feature-rail__item:hover,
    .js .feature-rail__item.reveal.is-visible:hover {
        z-index: 1;
        box-shadow:
            inset 0 1px 0 rgb(251 249 243 / 86%),
            0 30px 72px -54px rgb(8 47 51 / 92%);
        transform: translateY(-6px);
    }

    .feature-rail__item:hover::before {
        opacity: 1;
    }

    .feature-rail__item:hover::after {
        transform: scaleX(1);
    }

    .feature-rail__item:hover .feature-rail__icon {
        background: var(--color-lagoon-deep);
        color: var(--color-surface);
        transform: translateY(-3px);
    }
}

.feature-rail__item:active,
.js .feature-rail__item.reveal.is-visible:active {
    transform: translateY(-2px);
}

/* Experiences */
.experience-atlas {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(220px, 27vw);
    gap: 1rem;
}

.experience-tile {
    position: relative;
    color: var(--color-surface);
    text-decoration: none;
}

.experience-tile--1 { grid-column: span 7; grid-row: span 2; }
.experience-tile--2 { grid-column: span 5; }
.experience-tile--3 { grid-column: span 5; }
.experience-tile--4 { grid-column: span 4; }
.experience-tile--5 { grid-column: span 5; }
.experience-tile--6 { grid-column: span 3; }

.experience-tile--1 .experience-tile__image { object-position: center 68%; }
.experience-tile--2 .experience-tile__image { object-position: center 57%; }
.experience-tile--5 .experience-tile__image { object-position: center 66%; }

.experience-tile__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(8 47 51 / 82%), transparent 65%);
}

.experience-tile__copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: .45rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.experience-tile__copy strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 500;
}

.experience-tile__copy span {
    max-width: 44ch;
    color: rgb(251 249 243 / 76%);
    font-size: .9rem;
}

.responsibility-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.responsibility-media {
    aspect-ratio: 3 / 4;
    box-shadow: 0 32px 72px -52px rgb(2 20 23 / 92%);
}

.responsibility-media__image {
    object-position: center;
}

.responsibility-layout h2 {
    max-width: 10ch;
    color: var(--color-surface);
    text-shadow: 0 2px 24px rgb(2 20 23 / 34%);
}

.responsibility-layout > div:last-child {
    padding: clamp(1.75rem, 4vw, 3.5rem);
    border: 1px solid rgb(251 249 243 / 15%);
    border-radius: var(--radius-large);
    background:
        linear-gradient(145deg, rgb(159 199 190 / 11%), transparent 62%),
        rgb(4 32 36 / 42%);
    box-shadow:
        inset 0 1px 0 rgb(251 249 243 / 10%),
        0 30px 72px -54px rgb(2 20 23 / 92%);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
    backdrop-filter: blur(14px) saturate(108%);
}

.responsibility-layout .lead {
    color: rgb(251 249 243 / 84%);
}

.matching-list {
    border-top: 1px solid var(--color-line);
}

.matching-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr) auto;
    gap: 2rem;
    align-items: center;
    min-height: 84px;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
}

.matching-row > span:first-child {
    color: var(--color-muted);
}

.matching-row strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
}

/* About */

.manifesto {
    max-width: 1080px;
}

.manifesto h2 {
    max-width: 16ch;
}

.manifesto p {
    max-width: 65ch;
}

.place-story {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
}

.place-story__media {
    aspect-ratio: 16 / 10;
}

.safety-layout {
    display: grid;
    grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.safety-layout__intro p {
    max-width: 38ch;
    color: var(--color-muted);
    line-height: 1.7;
}

.reserved-proof {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.reserved-proof h2 {
    max-width: 15ch;
}

/* Contact and booking */
.contact-hero {
    position: relative;
    display: grid;
    min-height: 100dvh;
    align-items: end;
    overflow: hidden;
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.contact-hero__veil {
    z-index: 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.contact-hero__veil {
    background:
        linear-gradient(90deg, rgb(5 35 39 / 90%) 0%, rgb(8 47 51 / 55%) 46%, rgb(8 47 51 / 11%) 82%),
        linear-gradient(0deg, rgb(4 32 36 / 73%), transparent 62%, rgb(4 32 36 / 24%));
}

.contact-hero__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin-right: auto;
    margin-left: var(--hero-inline);
    padding-top: calc(74px + 1.25rem);
    padding-bottom: clamp(3.75rem, 8vh, 6rem);
    text-align: left;
}

.contact-hero h1 {
    max-width: 20ch;
    font-size: clamp(2.75rem, 4.55vw, 4.9rem);
    font-variation-settings: "opsz" 126, "SOFT" 52, "WONK" 1, "wght" 440;
    font-weight: 440;
    letter-spacing: -.055em;
    line-height: .99;
    text-align: left;
}

.planner-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 2.5rem;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}

.planner-steps span {
    padding: 1rem;
    border-right: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: .75rem;
    font-weight: 700;
}

.planner-steps span:last-child {
    border-right: 0;
}

.planner-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
}

.form-field {
    display: grid;
    align-content: start;
    gap: .5rem;
}

.form-field--wide,
.guest-fields {
    grid-column: 1 / -1;
}

.form-field.is-hidden {
    display: none;
}

.form-field label,
.guest-fields legend {
    font-size: .78rem;
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea,
.guest-fields input {
    width: 100%;
    min-height: 52px;
    padding: .8rem .9rem;
    border: 1px solid rgb(23 38 37 / 28%);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-ink);
}

.form-field textarea {
    min-height: 130px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #65716e;
    opacity: 1;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.guest-fields input:focus {
    border-color: var(--color-lagoon);
    outline: 3px solid rgb(23 75 77 / 18%);
    outline-offset: 0;
}

.form-field [aria-invalid="true"],
.guest-fields [aria-invalid="true"] {
    border-color: #9b3832;
}

.guest-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0;
    border: 0;
}

.guest-fields legend {
    margin-bottom: .55rem;
}

.guest-fields label {
    display: grid;
    gap: .5rem;
    color: var(--color-muted);
    font-size: .74rem;
}

.field-error {
    min-height: 1.25rem;
    color: #8f2f2a;
    font-size: .76rem;
}

.form-errors {
    color: #8f2f2a;
    font-size: .82rem;
    font-weight: 700;
}

.form-errors:empty {
    display: none;
}

.booking-review {
    position: sticky;
    top: 110px;
    padding: clamp(1.6rem, 4vw, 3rem);
    border-radius: var(--radius-medium);
    background: var(--color-lagoon-deep);
    box-shadow: var(--shadow-float);
    color: var(--color-surface);
}

.booking-review__label {
    display: block;
    margin-bottom: 2rem;
    color: var(--color-seaglass);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.booking-review__empty,
.booking-review__note {
    color: rgb(251 249 243 / 70%);
}

.review-list {
    margin: 0;
}

.review-list > div {
    display: grid;
    grid-template-columns: minmax(90px, .7fr) 1.3fr;
    gap: 1rem;
    padding-block: .85rem;
    border-bottom: 1px solid var(--color-shell-line);
}

.review-list dt {
    color: rgb(251 249 243 / 64%);
    font-size: .75rem;
}

.review-list dd {
    text-align: right;
}

.review-total {
    display: grid;
    gap: .3rem;
    padding-block: 1.5rem;
}

.review-total span {
    color: rgb(251 249 243 / 64%);
    font-size: .75rem;
}

.review-total strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
}

.booking-review__advisory {
    padding: 1rem;
    border: 1px solid rgb(198 164 103 / 45%);
    border-radius: var(--radius-small);
    color: #ead5aa;
    font-size: .82rem;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr .9fr;
    border-top: 1px solid var(--color-line);
}

.process-item {
    min-height: 280px;
    padding: 2rem;
    border-right: 1px solid var(--color-line);
}

.process-item:last-child {
    border-right: 0;
}

.process-item p {
    color: var(--color-muted);
}

.contact-channel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    border-radius: var(--radius-medium);
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.contact-channel h2 {
    max-width: 12ch;
}

.contact-channel p {
    max-width: 60ch;
    color: rgb(251 249 243 / 72%);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.faq-list {
    border-top: 1px solid var(--color-line);
}

.faq-item {
    border-bottom: 1px solid var(--color-line);
}

.faq-item summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    min-height: 76px;
    list-style: none;
    font-weight: 700;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary > span:last-child {
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform .3s var(--ease-premium);
}

.faq-item[open] summary > span:last-child {
    transform: rotate(45deg);
}

.faq-item > div {
    padding: 0 3rem 1.6rem 0;
}

.faq-item p {
    max-width: 65ch;
    color: var(--color-muted);
}

/* Tour detail */
.trip-hero {
    position: relative;
    display: grid;
    min-height: 100dvh;
    align-items: end;
    overflow: hidden;
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.trip-hero__media,
.trip-hero__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.trip-hero__media {
    overflow: hidden;
}

.trip-hero__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgb(5 35 39 / 91%) 0%, rgb(8 47 51 / 54%) 47%, rgb(8 47 51 / 10%) 82%),
        linear-gradient(0deg, rgb(4 32 36 / 74%), transparent 64%, rgb(4 32 36 / 24%));
}

.trip-hero__copy {
    position: relative;
    z-index: 2;
    max-width: 790px;
    margin-right: auto;
    margin-left: var(--hero-inline);
    padding-top: calc(74px + 1.25rem);
    padding-bottom: clamp(3.75rem, 8vh, 6rem);
    text-align: left;
}

.trip-hero h1 {
    max-width: 20ch;
    margin-bottom: 1.05rem;
    font-size: clamp(2.7rem, 4.5vw, 4.85rem);
    font-variation-settings: "opsz" 126, "SOFT" 52, "WONK" 1, "wght" 440;
    font-weight: 440;
    letter-spacing: -.055em;
    line-height: .99;
    text-align: left;
}

.fact-strip {
    background: var(--color-surface);
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.fact-item {
    min-width: 0;
    padding: 1.6rem 1rem;
    border-right: 1px solid var(--color-line);
}

.fact-item:last-child {
    border-right: 0;
}

.fact-item span,
.fact-item strong {
    display: block;
}

.fact-item span {
    margin-bottom: .4rem;
    color: var(--color-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fact-item strong {
    font-size: .8rem;
    line-height: 1.4;
}

.trip-overview-section {
    position: relative;
    display: grid;
    min-height: 100dvh;
    align-items: center;
    overflow: hidden;
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
    isolation: isolate;
}

.trip-overview__media,
.trip-overview__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.trip-overview__media {
    z-index: 0;
    overflow: hidden;
}

.trip-overview__image {
    --hero-image-position: center;
}

body[data-tour-id="redang"] .trip-overview__image {
    --hero-image-position: center 58%;
}

body[data-tour-id="perhentian"] .trip-overview__image {
    --hero-image-position: 58% center;
}

.trip-overview__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgb(4 32 36 / 92%) 0%, rgb(8 47 51 / 69%) 48%, rgb(8 47 51 / 42%) 100%),
        linear-gradient(0deg, rgb(4 32 36 / 72%), transparent 58%, rgb(4 32 36 / 38%));
}

.trip-overview {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
    gap: clamp(3rem, 9vw, 10rem);
    align-items: center;
    padding-block: clamp(7rem, 15vh, 10rem);
    padding-inline: clamp(1.25rem, 3.2vw, 3.5rem);
}

.trip-overview__copy {
    max-width: 760px;
}

.trip-overview__copy h2 {
    max-width: 13ch;
    color: var(--color-surface);
}

.trip-overview__copy .heading-waveword {
    color: #e1f3eb;
    -webkit-text-stroke: .45px rgb(3 26 29 / 68%);
    paint-order: stroke fill;
    text-shadow: 0 2px 16px rgb(3 26 29 / 58%);
}

.trip-overview__copy .eyebrow {
    color: var(--color-seaglass);
}

.trip-overview__copy .lead {
    color: rgb(251 249 243 / 86%);
}

.trip-overview__copy > p:last-child {
    max-width: 65ch;
    color: rgb(251 249 243 / 70%);
}

.trip-enquiry-card {
    position: sticky;
    top: 110px;
    padding: 2.2rem;
    border-radius: var(--radius-medium);
    border: 1px solid rgb(251 249 243 / 54%);
    background: rgb(251 249 243 / 93%);
    box-shadow: 0 28px 80px rgb(3 26 29 / 28%);
    color: var(--color-ink);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    backdrop-filter: blur(18px) saturate(112%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .trip-enquiry-card {
        background: var(--color-surface);
    }
}

.trip-enquiry-card > span {
    color: var(--color-muted);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.trip-enquiry-card h2 {
    margin: .7rem 0 1rem;
    font-family: var(--font-display);
    font-size: 2rem;
}

.trip-enquiry-card .heading-waveword {
    color: var(--color-lagoon-deep);
    -webkit-text-stroke: .3px rgb(8 47 51 / 28%);
    paint-order: stroke fill;
    text-shadow: 0 1px 0 rgb(251 249 243 / 72%);
}

.trip-enquiry-card > strong {
    display: block;
    margin-bottom: 1rem;
    color: var(--color-lagoon);
}

.trip-enquiry-card p {
    color: var(--color-muted);
}

.highlight-list {
    display: grid;
    gap: clamp(4rem, 9vw, 9rem);
}

.highlight-story {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.highlight-story:nth-child(even) {
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
}

.highlight-story:nth-child(even) .highlight-story__media {
    grid-column: 2;
}

.highlight-story:nth-child(even) .highlight-story__copy {
    grid-column: 1;
    grid-row: 1;
}

.highlight-story__media {
    aspect-ratio: 16 / 10;
}

body[data-tour-id="island-hopping"] .highlight-story__media {
    width: min(100%, 620px);
    aspect-ratio: 3 / 4;
}

body[data-tour-id="island-hopping"] .highlight-story:nth-child(even) .highlight-story__media {
    justify-self: end;
}

body[data-tour-id="island-hopping"] .highlight-story--1 .highlight-story__image { object-position: center 58%; }
body[data-tour-id="island-hopping"] .highlight-story--2 .highlight-story__image { object-position: center 70%; }
body[data-tour-id="island-hopping"] .highlight-story--3 .highlight-story__image { object-position: center 62%; }

.highlight-story--2 .highlight-story__image { object-position: 70% center; }
.highlight-story--3 .highlight-story__image { object-position: center 70%; }

.highlight-story__copy > span {
    display: block;
    margin-bottom: 2rem;
    color: var(--color-lagoon);
    font-family: var(--font-display);
    font-size: 2.2rem;
}

.highlight-story__copy h3 {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-weight: 500;
    letter-spacing: -.04em;
}

.highlight-story__copy p {
    max-width: 55ch;
    color: var(--color-muted);
}

.itinerary-layout {
    display: grid;
    grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.itinerary-heading {
    position: sticky;
    top: 120px;
    align-self: start;
}

.itinerary-heading h2 {
    max-width: 9ch;
}

.itinerary-heading p {
    color: rgb(251 249 243 / 68%);
}

.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 2rem;
    padding-block: 1.8rem;
    border-bottom: 1px solid var(--color-shell-line);
}

.timeline-item time {
    color: var(--color-seaglass);
    font-size: .78rem;
    font-weight: 700;
}

.timeline-item h3 {
    margin-bottom: .45rem;
    font-family: var(--font-display);
    font-weight: 500;
}

.timeline-item p {
    margin: 0;
    color: rgb(251 249 243 / 68%);
}

.essentials-layout {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.inclusion-list,
.checkpoint-list {
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.inclusion-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.inclusion-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    padding: 1.2rem;
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.inclusion-list li > span:first-child {
    color: var(--color-lagoon);
    font-weight: 700;
}

.route-panel {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-medium);
}

.route-panel h2 {
    font-family: var(--font-display);
    font-size: 2rem;
}

.checkpoint-list li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 1rem;
    padding-block: .8rem;
    border-bottom: 1px solid var(--color-line);
}

.checkpoint-list span {
    color: var(--color-muted);
    font-size: .72rem;
}

.route-note {
    margin-top: 2rem;
    color: var(--color-muted);
}

.route-source {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    color: var(--color-lagoon-deep);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.route-source:hover,
.route-source:focus-visible {
    color: var(--color-ink);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(210px, 26vw);
    gap: 1rem;
}

.gallery-frame {
    position: relative;
    margin: 0;
}

.gallery-frame--1 { grid-column: span 7; grid-row: span 2; }
.gallery-frame--2 { grid-column: span 5; }
.gallery-frame--3 { grid-column: span 5; }
.gallery-frame__image { object-position: center; }

.section-heading #trip-gallery-note {
    max-width: 58ch;
    color: var(--color-muted);
}

.gallery-grid--moments {
    grid-auto-rows: auto;
    grid-auto-flow: row;
    align-items: stretch;
}

.gallery-grid--moments .gallery-frame {
    grid-row: auto;
}

.gallery-grid--moments .gallery-frame--1,
.gallery-grid--moments .gallery-frame--2,
.gallery-grid--moments .gallery-frame--3 {
    grid-column: span 4;
    aspect-ratio: 4 / 5;
}

.gallery-grid--moments .gallery-frame--4 {
    grid-column: span 4;
    aspect-ratio: 4 / 5;
}

.gallery-grid--moments .gallery-frame--5 {
    grid-column: span 8;
    aspect-ratio: 8 / 5;
}

.gallery-grid--moments .gallery-frame--6,
.gallery-grid--moments .gallery-frame--7 {
    grid-column: span 6;
    aspect-ratio: 4 / 5;
}

.gallery-grid--moments .gallery-frame--1 .gallery-frame__image { object-position: center 59%; }
.gallery-grid--moments .gallery-frame--2 .gallery-frame__image { object-position: center 69%; }
.gallery-grid--moments .gallery-frame--3 .gallery-frame__image { object-position: center 69%; }
.gallery-grid--moments .gallery-frame--4 .gallery-frame__image { object-position: center 66%; }
.gallery-grid--moments .gallery-frame--5 .gallery-frame__image { object-position: center 62%; }
.gallery-grid--moments .gallery-frame--6 .gallery-frame__image { object-position: center 70%; }
.gallery-grid--moments .gallery-frame--7 .gallery-frame__image { object-position: center 48%; }

.gallery-frame figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-small);
    background: rgb(8 47 51 / 82%);
    color: var(--color-surface);
    font-size: .78rem;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.media-credit {
    position: absolute;
    z-index: 4;
    right: .75rem;
    bottom: .75rem;
    max-width: min(calc(100% - 1.5rem), 34rem);
    padding: .42rem .58rem;
    border: 1px solid rgb(251 249 243 / 24%);
    border-radius: .4rem;
    background: rgb(3 26 29 / 72%);
    color: rgb(251 249 243 / 84%);
    font-size: clamp(.54rem, .7vw, .64rem);
    font-weight: 600;
    line-height: 1.35;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.media-credit a {
    color: inherit;
    text-decoration-color: rgb(251 249 243 / 42%);
    text-underline-offset: .14em;
}

.media-credit a:hover,
.media-credit a:focus-visible {
    color: var(--color-surface);
    text-decoration-color: currentColor;
}

.media-credit--overview {
    right: clamp(.75rem, 2vw, 1.5rem);
    bottom: clamp(.75rem, 2vw, 1.5rem);
}

.gallery-frame:has(figcaption) .media-credit--gallery {
    bottom: 5.1rem;
}

.wildlife-context {
    background: var(--color-foam);
}

.wildlife-context__inner {
    display: grid;
    grid-template-columns: minmax(180px, 3fr) minmax(260px, 4fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.wildlife-context__inner .eyebrow {
    color: var(--color-lagoon);
}

.wildlife-context__inner h2,
.wildlife-context__inner .lead {
    margin-bottom: 0;
}

.wildlife-context__inner .lead {
    max-width: 52ch;
    color: var(--color-muted);
}

.info-layout {
    display: grid;
    grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.info-list {
    border-top: 1px solid var(--color-line);
}

.info-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
    padding-block: 1.8rem;
    border-bottom: 1px solid var(--color-line);
}

.info-row h3,
.info-row p {
    margin: 0;
}

.info-row p {
    color: var(--color-muted);
}

.trip-compact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--radius-medium);
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
}

.trip-compact-cta h2 {
    max-width: 12ch;
    margin-bottom: .6rem;
}

.trip-compact-cta p {
    max-width: 58ch;
    color: rgb(251 249 243 / 70%);
}

.related-grid .tour-card {
    grid-column: span 4;
}

main > .section[aria-labelledby="related-title"] > .container {
    padding: clamp(1rem, 2.2vw, 2rem);
}

/* Shared premium hover and mobile scroll-focus language */
:where(
    .tour-card,
    .experience-tile,
    .gallery-frame,
    .route-panel,
    .inclusion-list li,
    .contact-channel,
    .trip-compact-cta
) {
    transition:
        border-color .42s ease,
        box-shadow .5s var(--ease-premium),
        filter .5s ease,
        transform .5s var(--ease-premium);
}

:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
) {
    position: relative;
    isolation: isolate;
    transition: color .35s ease, transform .48s var(--ease-premium);
}

:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
)::before {
    position: absolute;
    inset: .2rem 0;
    z-index: -1;
    border: 1px solid rgb(159 199 190 / 20%);
    border-radius: var(--radius-small);
    background:
        linear-gradient(105deg, rgb(159 199 190 / 18%), rgb(251 249 243 / 44%) 58%, transparent),
        rgb(251 249 243 / 18%);
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 66%);
    content: "";
    opacity: 0;
    transform: scaleX(.985);
    transition: opacity .4s ease, transform .5s var(--ease-premium);
}

.section--lagoon :where(.timeline-item, .fact-item)::before {
    border-color: rgb(159 199 190 / 17%);
    background: linear-gradient(105deg, rgb(159 199 190 / 12%), rgb(251 249 243 / 5%), transparent);
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 9%);
}

:where(
    .tour-card,
    .experience-tile,
    .gallery-frame,
    .route-panel,
    .inclusion-list li,
    .contact-channel,
    .trip-compact-cta
):focus-within,
:where(
    .tour-card,
    .experience-tile,
    .gallery-frame,
    .route-panel,
    .inclusion-list li,
    .contact-channel,
    .trip-compact-cta
).is-scroll-focused {
    border-color: rgb(23 75 77 / 25%);
    box-shadow:
        inset 0 1px 0 rgb(251 249 243 / 76%),
        0 30px 64px -48px rgb(8 47 51 / 72%);
    transform: translate3d(0, -5px, 0);
}

:where(.contact-channel, .trip-compact-cta):focus-within,
:where(.contact-channel, .trip-compact-cta).is-scroll-focused {
    box-shadow:
        inset 0 1px 0 rgb(159 199 190 / 20%),
        0 34px 72px -48px rgb(8 47 51 / 94%);
}

:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
):focus-within,
:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
).is-scroll-focused {
    transform: translate3d(4px, 0, 0);
}

:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
):focus-within::before,
:where(
    .matching-row,
    .comparison-row,
    .proof-item,
    .planning-step,
    .process-item,
    .timeline-item,
    .info-row,
    .faq-item,
    .fact-item,
    .checkpoint-list li
).is-scroll-focused::before {
    opacity: 1;
    transform: scaleX(1);
}

.tour-card:focus-within .tour-card__media,
.tour-card.is-scroll-focused .tour-card__media,
.highlight-story.is-scroll-focused .highlight-story__media,
.gallery-frame.is-scroll-focused {
    box-shadow: 0 34px 70px -48px rgb(8 47 51 / 82%);
}

.tour-card:focus-within .tour-card__image,
.tour-card.is-scroll-focused .tour-card__image,
.experience-tile:focus-visible img,
.experience-tile.is-scroll-focused img,
.highlight-story.is-scroll-focused img,
.gallery-frame.is-scroll-focused img {
    filter: saturate(1.06) contrast(1.025);
    transform: scale(1.045) translateY(-.4%);
}

.tour-card:focus-within h3 a,
.tour-card.is-scroll-focused h3 a,
.faq-item:focus-within summary,
.faq-item.is-scroll-focused summary {
    color: var(--color-lagoon);
}

.experience-tile__shade,
.experience-tile__copy {
    transition: opacity .42s ease, transform .5s var(--ease-premium);
}

.experience-tile:focus-visible .experience-tile__shade,
.experience-tile.is-scroll-focused .experience-tile__shade {
    opacity: .88;
}

.experience-tile:focus-visible .experience-tile__copy,
.experience-tile.is-scroll-focused .experience-tile__copy {
    transform: translate3d(0, -5px, 0);
}

.feature-rail__item:focus-within,
.feature-rail__item.is-scroll-focused {
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgb(251 249 243 / 86%),
        0 30px 72px -54px rgb(8 47 51 / 92%);
    transform: translateY(-6px);
}

.feature-rail__item:focus-within::before,
.feature-rail__item.is-scroll-focused::before {
    opacity: 1;
}

.feature-rail__item:focus-within::after,
.feature-rail__item.is-scroll-focused::after {
    transform: scaleX(1);
}

.feature-rail__item:focus-within .feature-rail__icon,
.feature-rail__item.is-scroll-focused .feature-rail__icon {
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
    transform: translateY(-3px);
}

.highlight-story.is-scroll-focused .highlight-story__copy > span,
.highlight-story.is-scroll-focused .highlight-story__copy h3 {
    color: var(--color-lagoon);
}

.form-field :is(input, select, textarea),
.guest-fields input {
    transition: border-color .32s ease, box-shadow .38s ease, background-color .32s ease;
}

.form-field.is-scroll-focused :is(input, select, textarea),
.guest-fields.is-scroll-focused input {
    border-color: rgb(23 75 77 / 48%);
    background: rgb(251 249 243 / 94%);
    box-shadow: inset 0 1px 0 rgb(251 249 243 / 88%), 0 14px 30px -28px rgb(8 47 51 / 65%);
}

.button:focus-visible,
.button.is-scroll-focused,
:where(.contact-channel, .trip-compact-cta).is-scroll-focused .button {
    box-shadow:
        inset 0 1px 0 rgb(251 249 243 / 44%),
        0 18px 36px -25px rgb(8 47 51 / 88%);
}

.button.is-scroll-focused::before,
:where(.contact-channel, .trip-compact-cta).is-scroll-focused .button::before {
    transform: translateY(0);
}

.button--ink.is-scroll-focused {
    color: var(--color-lagoon-deep);
}

.text-link:focus-visible,
.text-link.is-scroll-focused {
    border-color: var(--color-accent);
    color: var(--color-lagoon);
    transform: translateX(3px);
}

.text-link--light:focus-visible,
.text-link--light.is-scroll-focused {
    color: var(--color-seaglass);
}

.footer-links a,
.footer-whatsapp {
    transition: color .32s ease, transform .42s var(--ease-premium);
}

.footer-links a:focus-visible,
.footer-links a.is-scroll-focused,
.footer-whatsapp:focus-visible,
.footer-whatsapp.is-scroll-focused {
    color: var(--color-seaglass);
    transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .tour-card,
        .experience-tile,
        .gallery-frame,
        .route-panel,
        .inclusion-list li,
        .contact-channel,
        .trip-compact-cta
    ):hover {
        border-color: rgb(23 75 77 / 25%);
        box-shadow:
            inset 0 1px 0 rgb(251 249 243 / 76%),
            0 30px 64px -48px rgb(8 47 51 / 72%);
        transform: translate3d(0, -5px, 0);
    }

    :where(.contact-channel, .trip-compact-cta):hover {
        box-shadow:
            inset 0 1px 0 rgb(159 199 190 / 20%),
            0 34px 72px -48px rgb(8 47 51 / 94%);
    }

    :where(
        .matching-row,
        .comparison-row,
        .proof-item,
        .planning-step,
        .process-item,
        .timeline-item,
        .info-row,
        .faq-item,
        .fact-item,
        .checkpoint-list li
    ):hover {
        transform: translate3d(4px, 0, 0);
    }

    :where(
        .matching-row,
        .comparison-row,
        .proof-item,
        .planning-step,
        .process-item,
        .timeline-item,
        .info-row,
        .faq-item,
        .fact-item,
        .checkpoint-list li
    ):hover::before {
        opacity: 1;
        transform: scaleX(1);
    }

    .tour-card:hover .tour-card__media,
    .highlight-story:hover .highlight-story__media,
    .gallery-frame:hover {
        box-shadow: 0 34px 70px -48px rgb(8 47 51 / 82%);
    }

    .tour-card:hover .tour-card__image,
    .experience-tile:hover img,
    .highlight-story:hover img,
    .gallery-frame:hover img {
        filter: saturate(1.06) contrast(1.025);
        transform: scale(1.045) translateY(-.4%);
    }

    .tour-card:hover h3 a,
    .faq-item:hover summary,
    .highlight-story:hover .highlight-story__copy > span,
    .highlight-story:hover .highlight-story__copy h3 {
        color: var(--color-lagoon);
    }

    .experience-tile:hover .experience-tile__shade {
        opacity: .88;
    }

    .experience-tile:hover .experience-tile__copy {
        transform: translate3d(0, -5px, 0);
    }

    .form-field:hover :is(input, select, textarea),
    .guest-fields:hover input {
        border-color: rgb(23 75 77 / 48%);
        box-shadow: inset 0 1px 0 rgb(251 249 243 / 88%), 0 14px 30px -28px rgb(8 47 51 / 65%);
    }

    .button:hover,
    .text-link:hover {
        box-shadow: 0 18px 36px -25px rgb(8 47 51 / 88%);
    }

    .text-link:hover {
        border-color: var(--color-accent);
        color: var(--color-lagoon);
        transform: translateX(3px);
    }

    .text-link--light:hover,
    .footer-links a:hover,
    .footer-whatsapp:hover {
        color: var(--color-seaglass);
    }

    .footer-links a:hover,
    .footer-whatsapp:hover {
        transform: translateX(3px);
    }
}

/* Footer */
.site-footer {
    padding-block: clamp(4rem, 8vw, 7rem) 2rem;
    background: #112e30;
    color: var(--color-surface);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr 1.1fr;
    gap: clamp(2.5rem, 7vw, 7rem);
    padding-bottom: 4rem;
}

.footer-brand p {
    max-width: 40ch;
    margin-top: 1.4rem;
    color: rgb(251 249 243 / 65%);
}

.footer-column h2 {
    margin-bottom: 1rem;
    color: var(--color-seaglass);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: .65rem;
}

.footer-links a {
    width: fit-content;
    color: rgb(251 249 243 / 78%);
    text-decoration: none;
}

.footer-whatsapp {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-surface);
    font-weight: 700;
}

.footer-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--color-shell-line);
    color: rgb(251 249 243 / 54%);
    font-size: .74rem;
}

.mobile-plan-bar {
    display: none;
}

.noscript-message {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 60;
    margin: 0;
    padding: 1rem;
    border-radius: var(--radius-small);
    background: var(--color-lagoon-deep);
    color: var(--color-surface);
    text-align: center;
}

/* Reveal */
.js .reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .8s ease, transform .8s var(--ease-premium);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Error page */
.error-page {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 7rem var(--gutter) 3rem;
}

.error-page__inner {
    max-width: 760px;
}

.error-page__label {
    color: var(--color-lagoon);
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.error-page h1 {
    max-width: 12ch;
}

.offline-page {
    background:
        radial-gradient(circle at 76% 18%, rgb(159 199 190 / 22%), transparent 28rem),
        var(--color-canvas);
}

.offline-page__status {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.offline-page__status::before {
    width: .6rem;
    height: .6rem;
    border: 2px solid var(--color-lagoon);
    border-radius: 50%;
    content: "";
}

.offline-page__note {
    max-width: 54ch;
    margin-top: 2rem;
    color: var(--color-muted);
    font-size: .88rem;
}

/* Tablet */
@media (max-width: 1100px) {
    .header-cta {
        display: none;
    }

    .header-inner {
        grid-template-columns: auto 1fr;
    }

    .primary-nav {
        justify-content: end;
    }

    .comparison-row {
        grid-template-columns: 1fr;
    }

    .comparison-row dl {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-rail--4 {
        --feature-columns: 2;
    }

    .fact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fact-item:nth-child(3) {
        border-right: 0;
    }

    .fact-item:nth-child(-n + 3) {
        border-bottom: 1px solid var(--color-line);
    }
}

@media (max-width: 900px) {
    :root {
        --gutter: clamp(1.1rem, 5vw, 2.5rem);
    }

    .site-header {
        height: 70px;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
    }

    .mobile-header-actions {
        position: relative;
        z-index: calc(var(--z-mobile-nav) + 1);
        display: flex;
        align-items: center;
        gap: .1rem;
    }

    .nav-toggle {
        display: block;
    }

    .site-header.is-navigation-open {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--color-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .primary-nav {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: var(--z-mobile-nav);
        display: grid;
        width: 100%;
        min-height: 100vh;
        height: 100dvh;
        grid-auto-rows: min-content;
        align-content: center;
        justify-content: stretch;
        gap: .35rem;
        padding: 6rem var(--gutter) 3rem;
        background: var(--color-lagoon-deep);
        color: var(--color-surface);
        opacity: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: none;
        transform: translateY(-1.5rem);
        visibility: hidden;
        transition: opacity .35s ease, transform .45s var(--ease-premium), visibility .35s;
    }

    .primary-nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
    }

    .primary-nav > a {
        min-height: 58px;
        border-bottom: 1px solid var(--color-shell-line);
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 6vw, 2.8rem);
        font-weight: 500;
    }

    .primary-nav > a::after {
        display: none;
    }

    .language-switcher {
        margin-top: 1.25rem;
        padding-left: 0;
        border-left: 0;
    }

    .language-switcher button {
        min-width: 54px;
        border: 1px solid var(--color-shell-line);
        border-radius: var(--radius-small);
    }

    .intro-grid,
    .home-photo-story__layout,
    .reef-river-grid,
    .proof-layout,
    .responsibility-layout,
    .about-portrait-layout,
    .place-story,
    .safety-layout,
    .planner-layout,
    .faq-layout,
    .trip-overview,
    .highlight-story,
    .highlight-story:nth-child(even),
    .itinerary-layout,
    .essentials-layout,
    .info-layout {
        grid-template-columns: 1fr;
    }

    .home-photo-story__copy {
        max-width: 680px;
        padding-bottom: 0;
    }

    .home-photo-story__visuals {
        min-height: clamp(620px, 96vw, 820px);
    }

    .wildlife-context__inner {
        grid-template-columns: 1fr 1fr;
    }

    .wildlife-context__inner .eyebrow {
        grid-column: 1 / -1;
    }

    .proof-layout h2,
    .itinerary-heading,
    .trip-enquiry-card,
    .booking-review {
        position: static;
    }

    .highlight-story:nth-child(even) .highlight-story__media,
    .highlight-story:nth-child(even) .highlight-story__copy {
        grid-column: auto;
        grid-row: auto;
    }

    .journey-grid .tour-card:first-child,
    .journey-grid .tour-card:not(:first-child),
    .tour-preview-grid .tour-card:nth-child(n),
    .tour-collection-grid .tour-card:nth-child(n),
    .related-grid .tour-card {
        grid-column: span 6;
        grid-row: auto;
        margin-top: 0;
    }

    .tour-collection-grid .tour-card:nth-child(n) .tour-card__media {
        aspect-ratio: 4 / 3;
    }

    .planning-steps,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .planning-step,
    .process-item {
        min-height: 0;
        padding: 2rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .planning-step > span {
        margin-bottom: 1rem;
    }

    .feature-rail--3 {
        --feature-columns: 1;
    }

    .experience-atlas {
        grid-auto-rows: minmax(260px, 48vw);
    }

    .experience-tile--1,
    .experience-tile--2,
    .experience-tile--3,
    .experience-tile--4,
    .experience-tile--5,
    .experience-tile--6 {
        grid-column: span 6;
        grid-row: span 1;
    }

    .contact-channel,
    .trip-compact-cta,
    .image-cta__content {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .gallery-grid {
        grid-auto-rows: minmax(250px, 50vw);
    }

    .gallery-frame--1,
    .gallery-frame--2,
    .gallery-frame--3 {
        grid-column: span 6;
        grid-row: span 1;
    }

    .gallery-frame--1 {
        grid-column: span 12;
    }

    .gallery-grid--moments {
        grid-auto-rows: auto;
    }

    .gallery-grid--moments .gallery-frame--1,
    .gallery-grid--moments .gallery-frame--2,
    .gallery-grid--moments .gallery-frame--3,
    .gallery-grid--moments .gallery-frame--4,
    .gallery-grid--moments .gallery-frame--6,
    .gallery-grid--moments .gallery-frame--7 {
        grid-column: span 6;
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }

    .gallery-grid--moments .gallery-frame--5 {
        grid-column: span 12;
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .footer-grid {
        grid-template-columns: 1.4fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .section-wave-flourish {
        width: clamp(8rem, 36vw, 10.5rem);
    }

    .section-wave-flourish--left {
        left: -2.5rem;
    }

    .section-wave-flourish--right {
        right: -2.5rem;
    }

    .card-wave-mark {
        width: clamp(6.5rem, 39%, 8.5rem);
    }

    .page-transition {
        background:
            linear-gradient(180deg, rgb(255 255 255 / 76%), rgb(227 238 234 / 88%)) center 4.5rem / calc(100% - (var(--gutter) * 2)) min(58vh, 31rem) no-repeat,
            linear-gradient(90deg, rgb(8 47 51 / 9%), rgb(23 75 77 / 14%)) 0 0 / 100% 4.5rem no-repeat,
            linear-gradient(rgb(8 47 51 / 9%) 0 0) var(--gutter) calc(100% - 5.25rem) / calc(100% - (var(--gutter) * 2)) 4rem no-repeat,
            var(--color-canvas);
    }

    .page-transition::before {
        top: 7.2rem;
        left: var(--gutter);
        width: calc(100% - (var(--gutter) * 2));
        height: min(21rem, 42vh);
        background:
            linear-gradient(rgb(23 75 77 / 22%) 0 0) 0 0 / 29% .55rem no-repeat,
            linear-gradient(rgb(8 47 51 / 19%) 0 0) 0 2rem / 92% 4.75rem no-repeat,
            linear-gradient(rgb(8 47 51 / 15%) 0 0) 0 8.4rem / 84% .82rem no-repeat,
            linear-gradient(rgb(8 47 51 / 11%) 0 0) 0 10.25rem / 68% .82rem no-repeat,
            linear-gradient(rgb(198 164 103 / 34%) 0 0) 0 13.4rem / 100% 3.15rem no-repeat;
    }

    h1 {
        font-size: clamp(2.9rem, 14vw, 4.7rem);
        line-height: 1;
    }

    h2 {
        font-size: clamp(2.25rem, 11vw, 3.8rem);
    }

    .language-dialog {
        width: 100%;
        max-height: 100dvh;
        margin: auto 0 0;
        transform: translateY(1.5rem);
    }

    .language-dialog[open] {
        transform: translateY(0);
    }

    .language-dialog__surface {
        max-height: calc(100dvh - .75rem);
        padding: 2.65rem var(--gutter) calc(1.35rem + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 26px 26px 0 0;
    }

    .language-dialog__current {
        top: 1rem;
        left: var(--gutter);
    }

    .language-dialog__close {
        top: .65rem;
        right: .75rem;
    }

    .language-dialog__crest {
        width: 5.7rem;
        margin: .75rem 0 1rem;
    }

    .language-dialog h2 {
        max-width: 13ch;
        font-size: clamp(1.95rem, 9vw, 2.7rem);
    }

    .language-dialog h2 + p {
        margin-top: .85rem;
        font-size: .86rem;
    }

    .language-dialog__options {
        grid-template-columns: 1fr;
        gap: .45rem;
        margin-top: 1.35rem;
    }

    .language-choice {
        min-height: 62px;
        grid-template-columns: 2.5rem 1fr auto;
        align-items: center;
        align-content: center;
        gap: .65rem;
        padding: .7rem .85rem;
    }

    .language-choice__mark {
        position: static;
    }

    .language-dialog__note {
        margin-top: 1rem;
        padding-right: 4rem;
    }

    .section {
        padding-block: clamp(4.5rem, 20vw, 6.5rem);
    }

    .home-hero,
    .home-hero__slide,
    .page-hero,
    .contact-hero,
    .trip-hero,
    .trip-overview-section {
        min-height: 100svh;
    }

    .trip-overview {
        gap: 2.25rem;
        padding-top: 9rem;
        padding-right: 1rem;
        padding-bottom: 4.5rem;
        padding-left: 1rem;
    }

    [data-hero-id="island-hopping"] .hero-media-image {
        --hero-image-position: center 54%;
    }

    .responsibility-layout > div:last-child {
        padding: 1.35rem;
    }

    main > .section[aria-labelledby="related-title"] > .container {
        padding: .75rem;
    }

    .home-hero__veil,
    .trip-hero__veil,
    .page-hero__veil,
    .contact-hero__veil {
        background: linear-gradient(0deg, rgb(8 47 51 / 92%) 0%, rgb(8 47 51 / 45%) 68%, rgb(8 47 51 / 22%) 100%);
    }

    .home-hero__content {
        padding-top: 5.65rem;
        padding-bottom: 6.9rem;
    }

    .page-hero__content,
    .contact-hero__content,
    .trip-hero__copy {
        padding-top: 5.65rem;
        padding-bottom: 2.8rem;
    }

    .home-hero__title,
    .page-hero__content h1,
    .contact-hero h1,
    .trip-hero h1 {
        max-width: 16ch;
        font-size: clamp(2.35rem, 10.5vw, 3.45rem);
        line-height: 1;
    }

    body[data-language="ms"] .home-hero__title,
    body[data-language="ms"] .page-hero__content h1,
    body[data-language="ms"] .contact-hero h1,
    body[data-language="ms"] .trip-hero h1 {
        max-width: 17ch;
        font-size: clamp(2.25rem, 9.8vw, 3.25rem);
    }

    body[data-language="zh"] .home-hero__title,
    body[data-language="zh"] .page-hero__content h1,
    body[data-language="zh"] .contact-hero h1,
    body[data-language="zh"] .trip-hero h1 {
        max-width: 14ch;
        letter-spacing: -.045em;
        line-height: 1.08;
    }

    .home-hero .hero-lead,
    .page-hero .hero-lead,
    .contact-hero .hero-lead,
    .trip-hero .hero-lead {
        max-width: 34ch;
        margin-bottom: 1.45rem;
        font-size: .94rem;
        line-height: 1.52;
    }

    .home-hero .eyebrow,
    .page-hero .eyebrow,
    .contact-hero .eyebrow,
    .trip-hero .eyebrow {
        margin-bottom: .8rem;
        font-size: .65rem;
    }

    .hero-slider__controls {
        bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .hero-slider__progress {
        gap: .35rem;
    }

    .hero-slider__progress-button {
        width: clamp(34px, 10vw, 48px);
    }

    .hero-slider__actions button {
        width: 42px;
    }

    .hero-actions {
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
    }

    .journey-grid,
    .tour-preview-grid,
    .tour-collection-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .journey-grid .tour-card:first-child,
    .journey-grid .tour-card:not(:first-child),
    .tour-preview-grid .tour-card:nth-child(n),
    .tour-collection-grid .tour-card:nth-child(n),
    .related-grid .tour-card {
        grid-column: 1;
        grid-row: auto;
    }

    .journey-grid .tour-card:first-child .tour-card__media,
    .journey-grid .tour-card:not(:first-child) .tour-card__media {
        aspect-ratio: 4 / 3;
    }

    .tour-collection-grid .tour-card:nth-child(n) .tour-card__media {
        aspect-ratio: 4 / 3;
    }

    .tour-card__bottom,
    .tour-card__topline {
        align-items: start;
    }

    .tour-card__bottom {
        display: grid;
    }

    .home-photo-story__visuals {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .home-photo-story__frame--aerial,
    .home-photo-story__frame--kayak,
    .home-photo-story__frame--brand {
        grid-column: 1;
        grid-row: auto;
    }

    .home-photo-story__frame--aerial {
        aspect-ratio: 3 / 4;
    }

    .home-photo-story__frame--kayak,
    .home-photo-story__frame--brand {
        aspect-ratio: 4 / 5;
    }

    .wildlife-context__inner {
        grid-template-columns: 1fr;
    }

    .wildlife-context__inner .eyebrow {
        grid-column: auto;
    }

    .proof-item,
    .info-row {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .feature-rail--2,
    .feature-rail--3,
    .feature-rail--4 {
        --feature-columns: 1;
    }

    .feature-rail__item,
    .feature-rail__item--compact {
        grid-template-rows: 3.25rem auto auto;
        min-height: 0;
        padding-block: 2rem;
    }

    .feature-rail__item--compact {
        grid-template-rows: 3.25rem auto;
    }

    .feature-rail__item h3 {
        align-self: start;
    }

    .feature-rail__item--compact p {
        align-self: start;
    }

    .experience-atlas {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .experience-tile--1,
    .experience-tile--2,
    .experience-tile--3,
    .experience-tile--4,
    .experience-tile--5,
    .experience-tile--6 {
        grid-column: 1;
        aspect-ratio: 4 / 5;
    }

    .matching-row {
        grid-template-columns: 1fr auto;
        gap: .5rem 1rem;
        padding-block: 1rem;
    }

    .matching-row strong {
        grid-column: 1;
    }

    .matching-row .button-arrow {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .comparison-row dl {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-row dl > div:last-child {
        grid-column: 1 / -1;
    }

    .fact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fact-item:nth-child(n) {
        border-right: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .fact-item:nth-child(2n) {
        border-right: 0;
    }

    .fact-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .booking-form,
    .guest-fields,
    .planner-steps {
        grid-template-columns: 1fr;
    }

    .planner-steps span {
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .planner-steps span:last-child {
        border-bottom: 0;
    }

    .guest-fields label {
        grid-template-columns: 1fr 88px;
        align-items: center;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: .6rem;
    }

    .inclusion-list {
        grid-template-columns: 1fr;
    }

    .highlight-story__media {
        aspect-ratio: 4 / 3;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .gallery-frame--1,
    .gallery-frame--2,
    .gallery-frame--3 {
        grid-column: 1;
        aspect-ratio: 4 / 5;
    }

    .gallery-grid--moments .gallery-frame--1,
    .gallery-grid--moments .gallery-frame--2,
    .gallery-grid--moments .gallery-frame--3,
    .gallery-grid--moments .gallery-frame--4,
    .gallery-grid--moments .gallery-frame--5,
    .gallery-grid--moments .gallery-frame--6,
    .gallery-grid--moments .gallery-frame--7 {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 4 / 5;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-meta {
        display: grid;
    }

    .mobile-plan-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 30;
        display: block;
        padding: .75rem max(var(--gutter), env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
        background: rgb(245 241 232 / 95%);
        border-top: 1px solid var(--color-line);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
    }

    .mobile-plan-bar .button {
        width: 100%;
    }

    .site-footer {
        padding-bottom: 7.5rem;
    }
}

@media (max-width: 390px) {
    .brand {
        font-size: .95rem;
    }

    .brand-wave {
        width: 24px;
    }

    .preloader__inner {
        width: 90vw;
    }

    .preloader__wordmark {
        font-size: clamp(1.72rem, 8.25vw, 1.95rem);
        letter-spacing: -.052em;
    }

    .tour-card__topline {
        display: grid;
    }

    .comparison-row dl {
        grid-template-columns: 1fr;
    }

    .comparison-row dl > div:last-child {
        grid-column: auto;
    }
}

@media (max-width: 380px) {
    .site-header .brand > span:last-child {
        display: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header.is-scrolled,
    .hero-slider__actions,
    .gallery-frame figcaption,
    .mobile-plan-bar,
    .trip-enquiry-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .trip-enquiry-card {
        background: var(--color-surface);
    }

    .site-header.is-scrolled {
        border-color: var(--color-line);
        background: var(--color-canvas);
        box-shadow: 0 10px 28px rgb(8 47 51 / 9%);
    }

    .hero-slider__actions {
        background: rgb(8 47 51 / 90%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .is-preloading .preloader__wordmark span {
        animation: none;
        color: var(--color-lagoon-deep);
        opacity: 1;
        transform: none;
    }

    .is-preloading .preloader__wave-line {
        animation: none;
        stroke-dashoffset: 0;
        opacity: .72;
        transform: none;
    }

    .preloader__tide {
        display: none;
    }

    .wave-flourish,
    .wave-flourish.is-wave-visible {
        animation: none !important;
        opacity: var(--flourish-opacity, .38);
        transform: none;
    }

    .wave-flourish .wave-flourish__line,
    .wave-flourish.is-wave-visible .wave-flourish__line {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    .heading-waveword__char {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .heading-waveword::after {
        display: none;
    }

    [data-parallax-media] {
        animation: none !important;
        transform: none !important;
    }

    .home-hero__content > * {
        opacity: 1;
        transform: none;
    }

    .hero-slider__progress-button::after {
        animation: none !important;
    }

    .feature-rail__item:hover,
    .feature-rail__item:active,
    .js .feature-rail__item.reveal.is-visible:hover,
    .js .feature-rail__item.reveal.is-visible:active,
    .feature-rail__item:hover .feature-rail__icon {
        transform: none;
    }

    .is-scroll-focused,
    .is-scroll-focused img,
    .is-scroll-focused .button-arrow,
    .is-scroll-focused .experience-tile__copy,
    .is-scroll-focused .feature-rail__icon,
    :where(
        .tour-card,
        .experience-tile,
        .gallery-frame,
        .route-panel,
        .inclusion-list li,
        .contact-channel,
        .trip-compact-cta,
        .matching-row,
        .comparison-row,
        .proof-item,
        .planning-step,
        .process-item,
        .timeline-item,
        .info-row,
        .faq-item,
        .fact-item,
        .checkpoint-list li,
        .text-link,
        .footer-links a,
        .footer-whatsapp
    ):hover,
    .button:active {
        transform: none !important;
    }
}

@media print {
    body.is-content-protected,
    body.is-content-protected * {
        visibility: hidden !important;
    }

    .preloader,
    .page-transition,
    .section-wave-flourish,
    .card-wave-mark,
    .site-header,
    .mobile-plan-bar,
    .button,
    .site-footer {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .heading-waveword__char {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .heading-waveword::after {
        display: none;
    }
}