/* ============================================
   MAVEN TRAVEL — Design System
   Aman-inspired editorial luxury
   ============================================ */

/* ----- Custom Properties ----- */

:root {
    --white:       #FFFFFF;
    --cream:       #F6F4F0;
    --beige:       #EDE8E1;
    --beige-dark:  #DDD5C8;
    --brown:       #5C4A3A;
    --dark-brown:  #3E2723;
    --deep-navy:   #1B2433;
    --black:       #3A3A3A;
    --gold:        #B8975A;
    --gold-light:  #D4B978;

    --font-display: 'Antic Didone', 'Didot', 'Georgia', serif;
    --font-heading: 'Cormorant Garamond', 'Georgia', serif;
    --font-body:    'Montserrat', 'Helvetica Neue', sans-serif;

    --container:        1200px;
    --container-narrow: 780px;
    --section-pad:      130px;

    --ease:      0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ----- Reset ----- */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(15px, 0.4vw + 10px, 17px);
    line-height: 1.85;
    color: var(--brown);
    background: var(--cream);
    overflow-x: hidden;
}

img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ----- Typography ----- */

/* Headings are styled to match the MAVEN TRAVEL logo exactly: the display
   face (Antic Didone), weight 400, uppercase, and the logo's 0.22em tracking.
   This is the one shared stylesheet, so it applies on every page. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 2.35vw, 2.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

/* Page-topic headings promoted to h1 for document structure; renders at h2 scale */
.h-sub { font-size: clamp(1.6rem, 2.35vw, 2.1rem); }

/* Visually hidden, read by assistive tech and crawlers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

h4 {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
}

p { max-width: 620px; }

/* ----- Links & Buttons ----- */

/* Aman-style text link with underline */
.link {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--brown);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color var(--ease);
}

.link:hover { color: var(--black); }

/* Filled button (Reserve / Contact style) */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 40px;
    background: var(--black);
    color: var(--white);
    transition: background var(--ease);
}

.btn:hover { background: var(--dark-brown); }

/* Outlined variant */
.btn--outline {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--black);
}

.btn--outline:hover {
    background: var(--black);
    color: var(--white);
}

/* ----- Layout ----- */

.container {
    width: 88%;
    max-width: var(--container);
    margin: 0 auto;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--section-pad) 0;
}

/* Tighten the gap when two sections should read as one grouped block */
.section--pb-tight { padding-bottom: 64px; }
.section--pt-tight { padding-top: 64px; }
.section--pb-0 { padding-bottom: 0; }

/* Beige-backed section for layering depth */
.section--beige {
    background: var(--beige);
}

/* White-backed section for contrast against cream */
.section--white {
    background: var(--white);
}

.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }

/* ----- Section Dividers (Aman-style thin line + label) ----- */

.divider-label {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 50px 0;
}

.divider-label::before,
.divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--beige-dark);
}

.divider-label span {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    white-space: nowrap;
}

/* Simple thin line */
.divider-line {
    border: none;
    height: 1px;
    background: var(--beige-dark);
    margin: 0;
}

/* Small gold accent bar */
.gold-bar {
    width: 40px;
    height: 1px;
    background: var(--gold);
    margin: 28px 0;
}

.gold-bar--center {
    margin-left: auto;
    margin-right: auto;
}

/* ----- Header (Aman-style: centered logo, hamburger left, CTA right) ----- */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    border-bottom: 1px solid var(--beige);
    padding: 0;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
}

.header__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.header__menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 0;
}

.header__hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
}

.header__hamburger span {
    height: 1.5px;
    width: 100%;
    background: var(--black);
    transition: var(--ease);
}


.header__logo {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2.4vw, 1.8rem);
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--black);
    text-align: center;
    white-space: nowrap;
    flex: 1;
}

.header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex: 1;
}

.header__cta {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 10px 28px;
    background: var(--black);
    color: var(--white);
    transition: background var(--ease);
}

.header__cta:hover { background: var(--dark-brown); }

/* Side-panel navigation (Aman-style) */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
}

/* Dimmed backdrop */
.nav-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.nav-overlay--open::before {
    opacity: 1;
}

.nav-overlay--open {
    visibility: visible;
}

/* The panel itself */
.nav-overlay__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    max-width: 85vw;
    height: 100%;
    background: var(--white);
    padding: 80px 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow-y: auto;
}

.nav-overlay--open .nav-overlay__panel {
    transform: translateX(0);
}

.nav-overlay__close {
    position: absolute;
    top: 28px;
    right: 32px;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.nav-overlay__close-x {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
}

.nav-overlay__list {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-overlay__link {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--black);
    transition: color var(--ease);
    display: block;
    padding: 8px 0;
}

.nav-overlay__link:hover { color: var(--gold); }

/* ----- Hero (Aman-style: contained image, text below) ----- */

.hero {
    padding: 0;
}

/* Full-bleed: the hero image spans the whole viewport width and butts up
   against the sticky header, no side margins or top gap. The quote overlay
   below keeps its own inset, so the bottom is unchanged. */
.hero__media {
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 8;
    background: var(--beige);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__text {
    text-align: right;
    padding: 50px 5% 30px;
    max-width: 1400px;
    width: 94%;
    margin: 0 auto;
}

.hero__subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--brown);
    max-width: 600px;
    margin-left: auto;
}

/* Inner page hero — smaller */
.hero--inner .hero__media {
    aspect-ratio: 16 / 6;
}

/* Cover hero — full image with the quote overlaid lower-left.
   Shared format so every page's front image matches the home wave shot. */
.hero--cover {
    position: relative;
}

.hero--cover .hero__media {
    position: relative;
    aspect-ratio: 10 / 3;
}

/* Home wave shot is framed up to crop the lone surfer out of the bottom */
.hero--home .hero__media img {
    object-position: center 15%;
}

/* Home hero background video — fills the frame like the cover image.
   Pulled up slightly so the bottom edge (and any source watermark) crops away. */
.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/* "MAVEN" wordmark centered over the video, fading in → holding → fading out
   to reveal the typed quote underneath */
.hero__intro {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.hero__intro span {
    font-family: var(--font-display);
    color: var(--white);
    font-size: clamp(2.4rem, 9vw, 8rem);
    letter-spacing: 0.34em;
    padding-left: 0.34em;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
    animation: hero-intro 2.9s ease forwards;
}

@keyframes hero-intro {
    0%   { opacity: 0; letter-spacing: 0.6em; }
    20%  { opacity: 1; letter-spacing: 0.34em; }
    62%  { opacity: 1; letter-spacing: 0.34em; }
    100% { opacity: 0; letter-spacing: 0.30em; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__intro { display: none; }
}

/* Warm golden grade — harmonizes a cool hero image with the sunset tones below it */
.hero--warm .hero__media img {
    filter: sepia(0.34) saturate(1.22) brightness(1.05) contrast(1.02) hue-rotate(-8deg);
}

.hero--warm .hero__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(150, 92, 40, 0.30), rgba(214, 158, 96, 0.18));
}

/* Gradient that deepens toward the bottom so the quote rests in a calm,
   darker band instead of competing with a busy image */
.hero--cover .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0) 62%);
    pointer-events: none;
}

/* Quote overlaid lower-left — italic, no quote marks, like Maven speaking to you.
   Anchored to the hero's left edge (not a centered container) so it stays in the
   corner on wide screens; the 5% side padding keeps it off the edge. */
.hero--cover .hero__text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 88%;
    max-width: var(--container);
    padding: 0 5% 34px;
    text-align: left;
    z-index: 2;
}

.hero--cover .hero__subtitle {
    color: var(--white);
    margin-left: 0;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* Longer quotes that stay on a single line, scaling with the viewport so they
   never wrap (no clamp floor) — wins over the mobile subtitle rule via specificity */
.hero--cover.hero--oneline .hero__subtitle {
    max-width: none;
    white-space: nowrap;
    font-size: min(1.85vw, 1.85rem);
}

/* Hero quote reveal — a wide feathered gradient sweeps across the line once,
   left to right, and the words emerge out of it. No glyphs, no words, no steps:
   the only thing animating is a single mask position, so the motion is calm and
   continuous rather than mechanical.

   The mask image is 3x the element's width. Its left third is opaque, then it
   feathers to transparent over the next 20%. Sliding it from 100% to 0% carries
   that soft edge across the text exactly once — starting fully hidden, ending
   fully opaque.

   width: fit-content is load-bearing. The paragraph is a block, so without it the
   mask would span the full column while the text occupies only part of it, and
   the sweep would finish before it reached the last word.

   The hidden start state is gated on .has-js, set by an inline <head> script
   before first paint — NOT applied by the deferred main.js. If it were added
   later, the browser would paint the full quote and then hide it: the "flash,
   disappear, reappear" seen on every page load. With JS off entirely, .has-js is
   never set, the mask never applies, and the quote simply shows — the right
   fallback. main.js only sets the per-line duration (--reveal-dur) and adds
   .is-revealed to start the sweep. */
.has-js .hero__subtitle[data-reveal] {
    width: fit-content;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    transition: -webkit-mask-position var(--reveal-dur, 3500ms) linear,
                        mask-position var(--reveal-dur, 3500ms) linear;
}

.has-js .hero__subtitle[data-reveal].is-revealed {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
}

/* Reduced motion: no sweep — the quote is simply present. */
@media (prefers-reduced-motion: reduce) {
    .has-js .hero__subtitle[data-reveal] {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* ----- Content Block (text + image, Aman asymmetric layout) ----- */

.content-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.content-block--reverse {
    direction: rtl;
}

.content-block--reverse > * {
    direction: ltr;
}

/* Text column within content block */
.content-block__text h2 { margin-bottom: 16px; }
.content-block__text p  { margin-bottom: 20px; }

.content-block__links {
    display: flex;
    gap: 40px;
    margin-top: 32px;
}

/* ----- Unified Image Frames ----- */

.img-frame {
    overflow: hidden;
    background: var(--beige);
}

.img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ease-slow);
}

.img-frame:hover img { transform: scale(1.03); }

.img-frame--portrait  { aspect-ratio: 3 / 4; }
.img-frame--landscape { aspect-ratio: 4 / 3; }
.img-frame--wide      { aspect-ratio: 16 / 9; }
.img-frame--square    { aspect-ratio: 1 / 1; }

/* ----- Image Row (Aman-style: 2 or 3 equal images in a row) ----- */

.image-row {
    display: grid;
    gap: 20px;
}

.image-row--2 { grid-template-columns: 1fr 1fr; }
.image-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.image-row .img-frame { aspect-ratio: 4 / 5; }

/* ----- Experience Cards (Aman-style: white card on beige) ----- */

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.6vw, 28px);
}
/* Always 3 across on desktop; step down so phones/tablets aren't cramped. */
@media (max-width: 760px) {
    .experience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .experience-grid { grid-template-columns: 1fr; }
}

.experience-card {
    display: flex;
    flex-direction: column;
}

.experience-card__image {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--beige);
}

.experience-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ease-slow);
}

.experience-card:hover .experience-card__image img {
    transform: scale(1.03);
}

.experience-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.6vw, 20px) 0 0;
}

/* Gold kicker — same treatment as the services "Custom Itinerary Planning" title */
/* Descriptive line — same italic serif as the services "Custom Itinerary Planning" */
.experience-card__subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    letter-spacing: normal;
    text-transform: none;
    color: var(--brown);
    line-height: 1.45;
    order: 2;
    margin-top: 6px;
}

/* Title — bold serif, tucked just under the descriptive line */
.experience-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--black);
    line-height: 1.25;
    order: 1;
}

/* ----- Destination Grid (Aman-style: image tiles with name) ----- */

.dest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.dest-tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--beige);
}

.dest-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ease-slow);
}

.dest-tile:hover img { transform: scale(1.03); }

.dest-tile__name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--white);
}

/* ----- Destinations Marquee (horizontal "moving road") ----- */

.dest-marquee {
    overflow: hidden;
    width: 100%;
    padding: 30px 0;
}

.dest-marquee__track {
    display: flex;
    width: max-content;
    animation: dest-scroll 60s linear infinite;
}

.dest-marquee:hover .dest-marquee__track {
    animation-play-state: paused;
}

/* Per-tile margin (not flex gap) keeps the -50% loop perfectly seamless */
.dest-marquee .dest-tile {
    flex: 0 0 auto;
    width: clamp(220px, 24vw, 340px);
    margin-right: 20px;
    aspect-ratio: 4 / 3;
    transition: transform var(--ease), box-shadow var(--ease);
}

.dest-marquee .dest-tile:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 24px 46px -24px rgba(62, 39, 35, 0.40);
    z-index: 2;
}

@keyframes dest-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dest-marquee__track { animation: none; }
}

/* ----- Service Tiers (white cards on beige) ----- */

.service-tier {
    padding: 40px 44px;
    background: var(--white);
    margin-bottom: 20px;
}

.service-tier:last-child { margin-bottom: 0; }

.service-tier__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.service-tier__name {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    color: var(--black);
}

.service-tier__price {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.service-tier__desc {
    margin-bottom: 24px;
}

.service-tier__list li {
    padding: 5px 0;
    padding-left: 16px;
    position: relative;
    font-size: 0.9rem;
}

.service-tier__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--gold);
}

/* ----- What to Expect (feature list) ----- */

.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 60px;
}

.feature-list__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--beige-dark);
    font-size: 0.9rem;
}

/* ----- Profile / About ----- */

.profile {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    text-align: center;
}

.profile--reverse { direction: rtl; }
.profile--reverse > * { direction: ltr; }

.profile__media {
    position: relative;
    overflow: hidden;
    background: var(--beige);
    aspect-ratio: 4 / 5;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.profile__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.profile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--ease-slow);
}

.profile__image:hover img { transform: scale(1.03); }

.profile__name {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    color: var(--black);
    margin-bottom: 4px;
}

.profile__role {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brown);
    margin-bottom: 28px;
}

/* Name + role sit under the photo as a caption; body copy aligns to the photo top */
.profile__col .profile__name {
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    margin-top: clamp(18px, 2vw, 26px);
    margin-bottom: 2px;
}

.profile__col .profile__role { margin-bottom: 0; }

.profile__col .gold-bar { margin: 16px 0 0; }

/* Bio copy: slightly smaller and tighter than site body text, but never below
   15px so it stays comfortable on phones and for weaker eyesight. Left-aligned
   because centered multi-paragraph text is hard to scan. */
.profile__bio {
    max-width: 620px;
    margin: 0 auto 14px;
    font-size: clamp(15px, 0.3vw + 12px, 15.5px);
    line-height: 1.7;
    text-align: left;
}

.profile__quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--black);
    padding-left: 20px;
    border-left: 1px solid var(--gold);
    margin: 28px 0;
}

.profile__quote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--gold);
}

.profile__bucket-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brown);
    margin-top: 26px;
    margin-bottom: 8px;
}

/* My Short List — clean hairline-divided items, no bullets */
.profile__bucket {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    list-style: none;
}
.profile__bucket li {
    font-size: 0.9rem;
}
.profile__bucket li:not(:first-child)::before {
    content: '•';
    margin: 0 0.55em;
    color: var(--gold);
    font-size: 2em;
    line-height: 1;
    vertical-align: middle;
}

.profile__bucket li:last-child {
    border-bottom: none;
}

/* Megan's short list is the longest — keep it on one line on desktop by easing
   the type down and tightening the bullet spacing; it still wraps on mobile. */
@media (min-width: 769px) {
    .profile--reverse .profile__bucket {
        flex-wrap: nowrap;
    }
    .profile--reverse .profile__bucket li {
        white-space: nowrap;
        font-size: clamp(0.55rem, 0.9vw, 0.8rem);
    }
    .profile--reverse .profile__bucket li:not(:first-child)::before {
        margin: 0 0.35em;
    }
}

/* ----- Contact ----- */

/* Land the contact section below the sticky header when jumped/scrolled to */
#contact { scroll-margin-top: 90px; }

.contact-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 100px;
    align-items: start;
}

.form { display: grid; gap: 24px; }

.form__group { display: flex; flex-direction: column; gap: 6px; }

.form__label {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
}
/* Every field is required — mark each label so it doesn't read as optional. */
.form__label::after {
    content: '*';
    margin-left: 0.3em;
    color: var(--gold);
}

.form__input,
.form__textarea {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--beige-dark);
    background: transparent;
    color: var(--black);
    outline: none;
    transition: border-color var(--ease);
}

.form__input:focus,
.form__textarea:focus { border-bottom-color: var(--gold); }

.form__textarea { resize: vertical; min-height: 120px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.contact-person { margin-bottom: 36px; }

.contact-person__name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.4rem);
    color: var(--black);
    margin-bottom: 8px;
}

.contact-person__detail {
    font-size: 0.82rem;
    margin-bottom: 3px;
}

.contact-person__detail a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--ease);
}

.contact-person__detail a:hover { color: var(--gold); }

/* ----- Partner Marquee ----- */

.marquee-wrap {
    padding: 60px 0;
    background: var(--cream);
    overflow: hidden;
}

.marquee-wrap__title {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
    opacity: 0.7;
    margin-bottom: 36px;
}

.marquee {
    display: flex;
    align-items: center;
    animation: marquee 50s linear infinite;
    width: max-content;
}

.marquee:hover { animation-play-state: paused; }

.marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.55;
    transition: opacity var(--ease);
    position: relative;
}

.marquee__item::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.6;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
}

.marquee__item:hover { opacity: 1; }

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ----- Footer (Aman-style: cream bg, multi-column) ----- */

.footer {
    background: var(--beige);
    padding: 70px 0 40px;
}

/* Get Inspired bar */
.footer__inspire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--beige-dark);
}

.footer__inspire-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--black);
    white-space: nowrap;
}

.footer__inspire-text {
    font-size: 0.82rem;
    max-width: 500px;
    flex: 1;
}

/* Footer preferred-partners carousel (replaces the Get Inspired bar) */
.footer__partners {
    padding-bottom: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--beige-dark);
    overflow: hidden;
}

.footer__partners-title {
    text-align: left;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
    opacity: 0.85;
    margin-bottom: 28px;
}

/* Footer columns */
.footer__columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer__brand {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 16px;
}

.footer__tagline {
    font-size: 0.82rem;
    max-width: 280px;
    line-height: 1.7;
}

.footer__badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 52px;
    margin: 64px 0 56px;
}

.footer__badges img {
    height: 64px;
    width: auto;
    /* multiply melts the logos' white boxes into the beige footer */
    mix-blend-mode: multiply;
}

.footer__badges .footer__badge--round {
    height: 116px;
}

@media (max-width: 640px) {
    .footer__badges {
        grid-template-columns: 1fr;
        gap: 34px;
        margin: 44px 0 40px;
    }

    .footer__badges img {
        height: 48px;
    }

    .footer__badges .footer__badge--round {
        height: 88px;
    }
}

.footer__col-title {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 18px;
}

.footer__link {
    display: block;
    font-size: 0.82rem;
    padding: 4px 0;
    transition: color var(--ease);
}

.footer__link:hover { color: var(--gold); }

.footer__socials {
    display: flex;
    gap: 16px;
    margin-top: 2px;
}

.footer__social {
    display: inline-flex;
    color: var(--brown);
    transition: color var(--ease);
}

.footer__social:hover { color: var(--gold); }

.footer__social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.footer__bottom {
    border-top: 1px solid var(--beige-dark);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: var(--brown);
    opacity: 0.7;
}

/* ----- Full-bleed Banner (edge-to-edge image with centered overlaid text) ----- */

.banner {
    position: relative;
    width: 88%;
    max-width: var(--container);
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--beige);
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Same deepening gradient as the hero so the lower-left quote stays legible */
.banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0) 62%);
    pointer-events: none;
}

/* Quote overlaid lower-left, matching the hero quote style exactly */
.banner__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 5% 34px;
    text-align: left;
}

.banner__quote,
.banner__signoff {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    color: var(--white);
    max-width: 600px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

.banner__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 12px;
}

/* Supporting line given presence as a centered serif statement (not an orphan) */
.statement {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 300;
    line-height: 1.45;
    color: var(--black);
    max-width: 680px;
    margin: 0 auto;
}

/* ----- Welcome Split (text column + tall dusk image) ----- */

.welcome-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.welcome-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.welcome-split__text > * { margin: 0; }
.welcome-split__text h1,
.welcome-split__text h2 { margin-bottom: 4px; }
.welcome-split__text > * + * { margin-top: 46px; }
.welcome-split__text .gold-bar { margin-top: 16px; }
/* Tighter gap between consecutive paragraphs (the 46px above is kept for the
   heading/gold-bar-to-body separation). */
.welcome-split__text p + p { margin-top: 28px; }

/* Soft maven definition under the Welcome heading — a light italic gloss,
   smaller and airier than the body copy so it reads as a delicate aside
   rather than a statement. Muted so it sits quietly beneath the heading. */
.welcome-split__definition {
    font-family: var(--font-heading);
    font-size: clamp(0.98rem, 1.35vw, 1.15rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.85;
    color: var(--brown);
    max-width: 32em;
}

.welcome-split__text .welcome-split__definition { margin-top: 20px; }

/* Longer gold accent — used under the intro headings on Home and Why Maven */
.gold-bar--long { width: 72px; }

/* Keep "Welcome to Maven Travel" on one line inside the left column: scale the
   heading to the column width and trim its tracking so it never wraps. Two-column
   layout only — on mobile it's full width and keeps the normal heading size. */
@media (min-width: 769px) {
    .welcome-heading {
        white-space: nowrap;
        letter-spacing: 0.08em;
        font-size: min(2.1rem, 2.35vw);
    }
    /* A longer intro heading keeps the same size and tracking but may wrap to
       two lines rather than clip. */
    .welcome-heading--wrap {
        white-space: normal;
    }
    /* Slightly larger intro heading — services "How We Make Magic". Still one
       line; scoped so the longer home-page heading isn't pushed to overflow. */
    .welcome-heading--lg {
        font-size: min(2.45rem, 2.75vw);
    }
}

/* Destinations heading: force a single line inside the narrow scroller column
   by scaling it down to the column width (the other intro headings wrap). */
.welcome-heading--oneline {
    white-space: nowrap;
    font-size: clamp(0.95rem, 1.8vw, 1.4rem);
    letter-spacing: 0.03em;
}

/* The defined word as a small, tracked kicker — the site's own refined label
   treatment (body face, uppercase, letter-spaced) rather than a heavy upright
   headword, so "Maven" whispers the term instead of announcing it. */
.welcome-split__term {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brown);
}

/* Welcome intro — heading + definition, left-aligned full-width above the content */
.welcome-intro {
    text-align: left;
    margin-bottom: clamp(50px, 6vw, 82px);
}

.welcome-intro h2 {
    margin-bottom: 22px;
}

.welcome-intro .welcome-split__definition {
    max-width: 42em;
}

.welcome-intro .gold-bar {
    margin: 34px 0 0;
}

/* Outro — a calm cream→beige band that dissolves the body/footer edge into one
   soft gradient, with the sign-off quote resting in the blend so the boundary
   reads as a seamless transition rather than a hard color change. The gradient
   starts at the body's cream and ends at the footer's beige, so both edges of
   the band are invisible. */
.outro {
    background: linear-gradient(to bottom, var(--cream), var(--beige));
    padding: clamp(8px, 1.2vw, 16px) 0 clamp(16px, 2vw, 26px);
    text-align: center;
}

/* Text-less "next page" indicator — a slim line + chevron (no circle) that
   carries the visitor onward to the next page in the site's flow. */
.page-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 4vw, 48px);
    margin-top: clamp(14px, 2vw, 22px);
}
.prev-page, .next-page {
    display: inline-block;
    color: var(--brown);
    opacity: 0.55;
    transition: opacity var(--ease), transform var(--ease);
}
.prev-page svg, .next-page svg { display: block; width: 34px; height: 18px; }
.prev-page:hover { opacity: 1; transform: translateX(-5px); }
.next-page:hover { opacity: 1; transform: translateX(5px); }

/* Elegant sign-off quote — italic serif centered under a faded gold hairline.
   Shared by the home outro and the why-maven section close so they match. */
.elevated-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.12rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    color: var(--brown);
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* One-line variant for a long sign-off: no max-width, no wrap, font scales
   with the viewport so it always fits. Falls back to wrapping on phones,
   where one line would be unreadably small. */
.elevated-quote--oneline {
    max-width: none;
    white-space: nowrap;
    font-size: min(1.35rem, 1.7vw);
}

@media (max-width: 768px) {
    .elevated-quote--oneline {
        white-space: normal;
        max-width: 24em;
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
}

/* Inline emphasis — same font, size and color as the surrounding copy, just italic */
.text-accent {
    font-style: italic;
}

/* Quotes as elegant italic pull-lines between the paragraphs */
.welcome-split__quote {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.35;
    color: var(--black);
}

/* Image is absolutely filled so it crops to exactly the text column's height */
.welcome-split__img {
    position: relative;
    overflow: hidden;
    background: var(--beige);
    /* Fixed portrait crop (site's 4/5 image language) so the framing stays put
       at any window width instead of shifting with the text column's height. */
    aspect-ratio: 4 / 5;
}

.welcome-split__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reversed split — image on the left (used to alternate sides down a page) */
.welcome-split--reverse .welcome-split__img { order: -1; }

/* Services split titles — the small gold kicker style, like the MAVEN term on home */
.split-title {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
    color: var(--brown);
}

/* Tighten the kicker to the heading above and the copy below */
.welcome-split__text h2 + .split-title { margin-top: 16px; }
.welcome-split__text .split-title + p { margin-top: 14px; }

/* Services blocks: larger body copy + kicker so the text fills the tall image
   height and leaves less empty space beside it. */
.welcome-split--lg .welcome-split__text p {
    font-size: clamp(1.1rem, 0.5vw + 0.9rem, 1.25rem);
    line-height: 1.9;
}
.welcome-split--lg .split-title {
    font-size: clamp(1.4rem, 1.9vw, 1.75rem);
}

/* ----- Service Tiers (side-by-side) ----- */

.tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.tier {
    background: var(--white);
    box-shadow: 0 28px 55px -30px rgba(62, 39, 35, 0.30), 0 8px 18px -12px rgba(62, 39, 35, 0.10);
    padding: 50px 46px;
    display: flex;
    flex-direction: column;
    transition: transform var(--ease), box-shadow var(--ease);
}

/* Hover lift — tile rises and grows slightly as the shadow deepens */
.tier:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 46px 84px -28px rgba(62, 39, 35, 0.46), 0 18px 36px -14px rgba(62, 39, 35, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .tier { transition: none; }
    .tier:hover { transform: none; }
}

.tier__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.tier__name {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    color: var(--black);
}

.tier__price {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.tier .gold-bar { margin: 22px 0 26px; }

/* Gold-dash list — shared by the tiers and What to Expect */
.dash-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dash-list li {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--black);
}

/* ----- Services — white placeholder box for a split image until a photo is added.
   Drop the photo in as <img> inside the .welcome-split__img and remove the
   --placeholder modifier. ----- */
.welcome-split__img--placeholder {
    background: var(--white);
    border: 1px solid var(--beige-dark);
}

/* ----- What to Expect — intro on the left, horizontal card scroller on the right ----- */

.expect-showcase {
    display: block;
}
/* Heading sits top-left above a full-width scroller + scrollbar. */
.expect-showcase .welcome-heading {
    margin-bottom: clamp(20px, 2.5vw, 34px);
}

/* min-width: 0 lets the scroller stay within its grid column and scroll
   internally instead of stretching the page. */
.expect-showcase__right {
    min-width: 0;
}

/* "Been there / done that" & "What to expect" — one word per line, right-
   aligned, a tight vertical stack that the grid centers vertically beside the
   scroller (vertically centered, horizontally right). */
.dest-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.2;
    gap: 0.55em;
    letter-spacing: 0.12em;
}

.expect-showcase__scroller {
    display: flex;
    gap: clamp(20px, 2vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Native scrollbar hidden — replaced by the custom clickable line below. */
    scrollbar-width: none;
}

.expect-showcase__scroller::-webkit-scrollbar { display: none; }

/* Custom scrollbar — a thin light track with a darker segment you click or drag.
   Width/position of the thumb are driven by JS from the scroll state. */
.expect-scrollbar {
    position: relative;
    height: 1px;
    margin-top: clamp(20px, 2vw, 30px);
    background: var(--beige-dark);
    cursor: pointer;
    touch-action: none;
}

.expect-scrollbar__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 25%;
    height: 3px;
    transform: translateY(-50%);
    background: var(--brown);
}

.expect-card {
    flex: 0 0 clamp(228px, 26vw, 290px);
    scroll-snap-align: start;
}

/* Destination tiles reused inside the same scroller (gallery page) */
.expect-showcase__scroller .dest-tile {
    flex: 0 0 clamp(240px, 26vw, 300px);
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
}

/* Temporary placeholder tiles (photo pending) — plain white box, name centered */
.dest-tile--placeholder {
    background: var(--white);
    border: 1px solid var(--beige-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dest-tile--placeholder .dest-tile__name {
    position: static;
    background: none;
    color: var(--brown);
    text-align: center;
    padding: 0 16px;
}

/* White placeholder box until a photo is dropped in as an <img> inside it */
.expect-card__img {
    aspect-ratio: 4 / 5;
    background: var(--beige);
    overflow: hidden;
    margin-bottom: clamp(18px, 1.6vw, 26px);
}

.expect-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.expect-card__title {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}

.expect-card__text {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--brown);
}

@media (max-width: 768px) {
    .expect-showcase { grid-template-columns: 1fr; gap: 30px; }
}

/* What to Expect — a serif lead with a witty supporting line per promise */
.expect {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.expect__lead {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.3;
    color: var(--black);
    margin-bottom: 5px;
}

.expect__text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--brown);
}

/* ----- Reveal Animations ----- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--ease-slow), transform var(--ease-slow);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ----- Beige Inset Panel (layered depth) ----- */

.beige-panel {
    background: var(--beige);
    padding: 60px 50px;
}

.beige-panel--lg {
    padding: 80px 60px;
}

/* ----- Full-width Image Break ----- */

.image-break {
    width: 88%;
    max-width: var(--container);
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--beige);
}

.image-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----- Spacing Utilities ----- */

.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 40px; }
.mb-xl { margin-bottom: 80px; }
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 80px; }

/* ----- Responsive ----- */

@media (max-width: 1024px) {
    :root { --section-pad: 90px; }
    .dest-grid { grid-template-columns: repeat(3, 1fr); }
    .footer__columns { grid-template-columns: 1fr 1fr; }
    .content-block { gap: 50px; }
    .profile { gap: 50px; }
}

@media (max-width: 768px) {
    :root { --section-pad: 60px; }

    .beige-panel { padding: 40px 28px; }
    .beige-panel--lg { padding: 50px 32px; }
    .service-tier { padding: 30px 24px; }

    .content-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .content-block--reverse { direction: ltr; }

    .dest-grid { grid-template-columns: 1fr 1fr; }
    .image-row--2, .image-row--3 { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }

    .profile {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .profile--reverse { direction: ltr; }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .footer__inspire {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .footer__columns { grid-template-columns: 1fr; gap: 30px; }

    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }


    .nav-overlay__panel {
        width: 50%;
        min-width: 250px;
        max-width: 100vw;
        padding: 70px 32px 40px;
    }

    .hero__media { aspect-ratio: 16 / 10; }
    .hero--inner .hero__media { aspect-ratio: 16 / 8; }
    .hero--cover .hero__media { aspect-ratio: 4 / 3; }
    .hero--cover .hero__subtitle { font-size: 1.2rem; max-width: 15em; }
    /* One-line hero quotes: the desktop rule pins them to a single viewport-scaled
       line, which is unreadably small on phones — wrap and size up instead. */
    .hero--cover.hero--oneline .hero__subtitle {
        white-space: normal;
        font-size: 1.2rem;
        max-width: 15em;
    }
    .hero--cover .hero__text { padding: 0 6% 22px; }
    .banner { aspect-ratio: 4 / 3; }
    .banner__text { padding: 0 6% 22px; }
    .banner__quote, .banner__signoff { font-size: 1.2rem; max-width: 15em; }
    .welcome-split { grid-template-columns: 1fr; gap: 36px; }
    .welcome-split__img { min-height: 0; aspect-ratio: 3 / 4; }
    .welcome-split--reverse .welcome-split__img { order: 0; }
    .tiers { grid-template-columns: 1fr; gap: 24px; }
    .tier { padding: 36px 28px; }
}

@media (max-width: 480px) {
    .dest-grid { grid-template-columns: 1fr; }
    .dest-tile { aspect-ratio: 16 / 10; }
    .header__cta { padding: 9px 16px; font-size: 0.55rem; letter-spacing: 0.1em; }
    .header__logo { letter-spacing: 0.16em; }
}