/* ==========================================================================
   HOMEPAGE, myhangoutbuddy.com

   Every selector here belongs to templates/welcome.html. The file is linked
   from that template's `extra_head` block only, so it cannot reach another
   page. Class names the page's JavaScript builds or drives are kept exactly
   as they were (.featured-card*, .fc-*, .stat-*, .hero-phone*, .pdp-*,
   .hero-video-*), so the video controller, the phone demo, the stats loader
   and the Buddy loader all keep working untouched.

   Composition, top to bottom:

     hero (dark, strongest)
       -> mood + Plan my Vietnam, still inside the dark hero
     marketplace: phone demo + Available Right Now (strong)
     stats ribbon (compact)
     why choose us (medium)
     how it works (compact)
     how we keep you safe (medium)
     popular experiences (medium)
     comfort + guide promo pair (compact)
     final CTA (short, strong)

   Sections deliberately do NOT carry equal weight; the vertical rhythm below
   is what encodes that.

   Lives in static/ rather than inline in the template because static/ is
   volume-mounted in docker-compose, a styling change here reaches production
   without rebuilding the image, while a change to a .py module does not.
   ========================================================================== */

.home-page {
    /* --- palette ------------------------------------------------------- */
    --h-navy:        #0a0a0b;
    --h-navy-2:      #161617;
    --h-navy-3:      #161617;
    --h-cream:       #fdfbf6;
    --h-cream-2:     #fbf3d6;
    --h-paper:       #fdfbf6;
    --h-orange:      #c9a227;
    --h-orange-2:    #e3c05a;
    --h-pink:        #7ec5e0;
    --h-purple:      #7ec5e0;
    /* The brand pink and purple above are used as surfaces and accents. White
       button text on them measures ~3.5:1, so anything that carries white
       LABELS uses these one-step-deeper members of the same ramp instead,
       visually the same brand at button scale, and past 4.5:1. */
    --h-pink-ink:    #1f5a70;   /* 4.60:1 with white */
    --h-purple-ink:  #1f5a70;   /* 5.38:1 with white */
    --h-flame-ink:   #8a6b12;   /* 4.58:1 with white */
    --h-ember-ink:   #8a6b12;   /* 5.70:1 with white */
    --h-blue:        #8a6b12;
    --h-sky:         #f5f5f7;
    --h-lavender:    #f5f5f7;
    --h-ink:         #1d1d1f;
    --h-body:        #6e6e73;
    --h-hairline:    rgba(10, 10, 11, .08);

    /* --- rhythm -------------------------------------------------------- */
    --h-wrap:        1180px;
    --h-gutter:      clamp(16px, 3.4vw, 40px);
    --h-section:     clamp(46px, 5vw, 72px);   /* medium / strong sections */
    --h-section-sm:  clamp(26px, 3vw, 44px);   /* compact sections         */
    --h-card-pad:    clamp(16px, 1.5vw, 24px);

    /* --- radii --------------------------------------------------------- */
    --h-r-sm:  10px;
    --h-r-md:  14px;
    --h-r-lg:  18px;
    --h-r-xl:  26px;
    --h-r-2xl: 32px;

    /* --- shadows ------------------------------------------------------- */
    --h-shadow-card:  0 6px 20px rgba(10, 10, 11, .07);
    --h-shadow-lift:  0 14px 34px rgba(10, 10, 11, .13);
    --h-shadow-phone: 0 28px 66px rgba(10, 10, 11, .30);

    /* The page ground is the phone's cream, not white. White cards need a
       ground to sit on, or they have no edge and the segments run together. */
    background: var(--h-cream);
}

/* One helper the whole page shares: the centred content column. */
.home-page .h-wrap {
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
}

/* Section headings. Sizes follow the reference's hierarchy: the hero is the
   only thing on the page allowed to shout. */
.home-page .section-title {
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--h-ink);
    text-align: center;
}

.home-page .section-subtitle {
    max-width: 58ch;
    margin: 8px auto 0;
    color: var(--h-body);
    font-size: clamp(.94rem, 1vw, 1.05rem);
    line-height: 1.55;
    text-align: center;
}

/* ==========================================================================
   LAUNCH VIEW
   A brand moment, never a gate: it takes no pointer events, so the page is
   usable underneath it from the first frame, and the script removes it
   within 350 ms whether or not the load event has arrived.
   ========================================================================== */
.home-launch {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
}
.home-launch.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.home-launch-inner { width: min(280px, calc(100vw - 48px)); text-align: center; }
.home-launch-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    margin-bottom: 28px;
}
.home-launch-mark img { width: 92px; height: auto; display: block; }
.home-launch-title {
    margin-bottom: 18px;
    color: #1d1d1f;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .18em;
}
.home-launch-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.home-launch-fill {
    width: 8%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d1d1f, #8a6b12);
    transition: width 120ms cubic-bezier(.22, .8, .3, 1);
}
.home-launch-percent { margin-top: 10px; color: #365d91; font-size: .9rem; font-weight: 600; }

/* ==========================================================================
   1: HERO
   Dark cinematic opening. Copy left, video right, and the two chooser cards
   sit inside the same dark ground so they read as part of the first view
   rather than as a separate section.
   ========================================================================== */
.home-page .hero {
    position: relative;
    overflow: hidden;
    padding: clamp(104px, 11vw, 132px) var(--h-gutter) clamp(52px, 5vw, 74px);
    background: var(--h-navy);
}

.home-page .hero-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/static/images/background/hero-1600.jpg');
    background-image: -webkit-image-set(
        url('/static/images/background/hero-1600.jpg') 1x,
        url('/static/images/background/hero-3840.jpg') 2x);
    background-image: image-set(
        url('/static/images/background/hero-1600.jpg') 1x,
        url('/static/images/background/hero-3840.jpg') 2x);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    /* The photo is atmosphere, not subject. Brightness and saturation come
       down so the blue wash below owns the colour, while CONTRAST goes up so
       the skyline's edges survive the fade, look closely and it is still
       clearly a city, glance at it and it is just deep blue behind the words. */
    filter: brightness(.34) saturate(.45) contrast(1.14);
}

/* Phones never need the desktop file. */
@media (max-width: 780px) {
    .home-page .hero-bg-img {
        background-image: url('/static/images/background/hero-800.jpg');
        background-image: -webkit-image-set(
            url('/static/images/background/hero-800.jpg') 1x,
            url('/static/images/background/hero-1600.jpg') 2x);
        background-image: image-set(
            url('/static/images/background/hero-800.jpg') 1x,
            url('/static/images/background/hero-1600.jpg') 2x);
    }
}
@media (min-width: 1900px) {
    .home-page .hero-bg-img {
        background-image: url('/static/images/background/hero-2560.jpg');
        background-image: -webkit-image-set(
            url('/static/images/background/hero-2560.jpg') 1x,
            url('/static/images/background/hero-3840.jpg') 2x);
        background-image: image-set(
            url('/static/images/background/hero-2560.jpg') 1x,
            url('/static/images/background/hero-3840.jpg') 2x);
    }
}
@media (min-width: 2561px) {
    .home-page .hero-bg-img { background-image: url('/static/images/background/hero-3840.jpg'); }
}

/* Readability scrim. Heavier top-left, where the headline sits.

   Deliberately BLUE (#0a0a0b family) rather than the near-neutral black it
   used to be: a single colour across the whole photo unifies a busy street
   scene into one calm ground, which is what lets white text sit on it at any
   scroll position without a per-element shadow. */
.home-page .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 11, .88) 0%,
            rgba(10, 10, 11, .76) 34%,
            rgba(10, 10, 11, .78) 72%,
            rgba(10, 10, 11, .92) 100%),
        radial-gradient(90% 70% at 6% 22%,
            rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, 0) 68%);
}

/* The dark hero does not stop with a rectangular cut, it settles into the
   warm marketplace ground below it. */
.home-page .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(253, 251, 246, 0) 0%,
        rgba(253, 251, 246, .06) 48%,
        rgba(253, 251, 246, .30) 80%,
        var(--h-paper) 100%);
}

.home-page .hero-shell {
    position: relative;
    z-index: 2;
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
}

.home-page .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(28px, 3.6vw, 52px);
    align-items: center;
}

.home-page .hero-copy { min-width: 0; }

.home-page .hero h1 {
    margin-bottom: 16px;
    /* Sized in em, so the four short lines of the reference hold at every
       step of the clamp: wide enough for "in a new city", too narrow for
       "You'll never feel". */
    max-width: 6.7em;
    color: #fff;
    font-size: clamp(2.35rem, 4.5vw, 3.95rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.035em;
}

/* "new city" carries the brand gradient. */
.home-page .hero h1 span {
    background: linear-gradient(100deg, #f3dc8a 0%, #e3c05a 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e3c05a;
}

/* The supporting line is a paragraph (the page's outline runs h1, then the
   mood chooser's h2). It keeps the display face, the h2 tracking and the
   balanced wrap it wore as a heading, so nothing moved. */
.home-page .hero .hero-subtitle {
    max-width: 42ch;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .80);
    font-family: var(--font-display);
    font-size: clamp(.95rem, 1.05vw, 1.05rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* --- hero actions ------------------------------------------------------ */
.home-page .hero-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.home-page .btn-primary,
.home-page .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: clamp(.9rem, .95vw, 1rem);
    letter-spacing: -.01em;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 160ms cubic-bezier(.22, .8, .3, 1),
                box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}

.home-page .btn-primary {
    color: #1d1d1f;
    background: linear-gradient(180deg, #e9cb62 0%, #c9a227 100%);
    border: 0;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, .4) inset,
        0 -1px 0 0 rgba(0, 0, 0, .08) inset,
        0 1px 2px rgba(0, 0, 0, .15),
        0 4px 12px -4px rgba(201, 162, 39, .5);
}
.home-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 0 rgba(255, 255, 255, .45) inset, 0 2px 4px rgba(0, 0, 0, .12), 0 14px 28px -10px rgba(201, 162, 39, .65); }
.home-page .btn-primary:active { transform: scale(.98); }

.home-page .btn-outline {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1.5px solid rgba(255, 255, 255, .28);
}
.home-page .btn-outline i { opacity: .9; }
.home-page .btn-outline:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.home-page .btn-outline:active { transform: scale(.98); }

@supports (backdrop-filter: blur(10px)) {
    .home-page .btn-outline { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* --- social proof ------------------------------------------------------ */
.home-page .hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
}
.home-page .hero-proof-avatars { display: flex; }
.home-page .hero-proof-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    object-fit: cover;
    transition: transform 200ms cubic-bezier(.22, .8, .3, 1);
}
.home-page .hero-proof-avatars img + img { margin-left: -11px; }
.home-page .hero-proof:hover .hero-proof-avatars img { transform: translateX(-2px); }
.home-page .hero-proof:hover .hero-proof-avatars img:first-child { transform: none; }
.home-page .hero-proof-text {
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
    line-height: 1.4;
}
.home-page .hero-proof-text strong { color: #fff; font-weight: 600; }

/* --- hero media: the video window -------------------------------------- */
.home-page .hero-media { min-width: 0; }

.home-page .hero-video-block {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--h-r-xl);
    overflow: hidden;
    background: #0b1020;
    outline: 1px solid rgba(255, 255, 255, .14);
    outline-offset: -1px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .48);
}
.home-page .hero-video-block video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The travelling light. .hero-video-frame wraps the window with a 2px ring
   cut out of a rotating conic gradient (the brand's orange > pink > purple
   run on a quiet hairline), plus a blurred copy behind it so the light spills
   onto the ground as it passes. Pure paint: no layout, no JS, and it drops to
   a still ring under prefers-reduced-motion or in a browser without
   @property. The ring is gated on mask support so an old engine can never
   paint the gradient over the footage. */
@property --hv-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.home-page .hero-video-frame {
    --hv-ring: 2px;
    --hv-radius: var(--h-r-xl);
    --hv-track: rgba(255, 255, 255, .16);
    --hv-light: conic-gradient(from var(--hv-angle),
        transparent 0deg,
        rgba(255, 255, 255, .6) 26deg,
        var(--h-orange) 56deg,
        var(--h-pink) 84deg,
        var(--h-purple) 110deg,
        transparent 142deg);
    position: relative;
    padding: var(--hv-ring);
    border-radius: calc(var(--hv-radius) + var(--hv-ring));
    isolation: isolate;
    /* The angle animates HERE, on the element that declares --hv-light:
       var() substitutes where the property is declared, so an angle animated
       on the pseudo-elements would never reach the gradient they inherit. */
    animation: heroFrameSweep 7s linear infinite;
}
.home-page .hero-video-frame::before,
.home-page .hero-video-frame::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .home-page .hero-video-frame::before {
        inset: 0;
        z-index: 1;
        padding: var(--hv-ring);
        background: var(--hv-light), linear-gradient(var(--hv-track), var(--hv-track));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
    }
}
.home-page .hero-video-frame::after {
    inset: -1px;
    z-index: -1;
    background: var(--hv-light);
    filter: blur(16px);
    opacity: .55;
    transition: opacity 600ms ease;
}
/* Once the footage is running the spill steps back so it never competes. */
.home-page .hero-video-frame.is-playing::after { opacity: .3; }
@keyframes heroFrameSweep { to { --hv-angle: 360deg; } }

/* Gentle grade so the footage sits in the palette without a heavy overlay. */
.home-page .hero-video-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 10, 11, .10) 0%, rgba(10, 10, 11, .34) 100%);
}

.home-page .hero-sound,
.home-page .hero-playback {
    position: absolute;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(10, 10, 11, .58);
    color: #fff;
    font-size: .82rem;
    cursor: pointer;
    transition: background 180ms ease, transform 140ms ease;
}
.home-page .hero-playback { left: 12px; }
.home-page .hero-sound { right: 12px; }
.home-page .hero-sound:hover,
.home-page .hero-playback:hover { background: rgba(10, 10, 11, .78); }
.home-page .hero-sound:active,
.home-page .hero-playback:active { transform: scale(.92); }
.home-page .hero-sound:focus-visible,
.home-page .hero-playback:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-page .hero-sound[aria-pressed="true"] { background: rgba(126, 197, 224, .78); border-color: transparent; }
.home-page .hero-sound[hidden],
.home-page .hero-playback[hidden],
.home-page .hero-video-start[hidden] { display: none !important; }

/* The deliberate tap that starts playback. Centred, as in the reference. */
.home-page .hero-video-start {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(10, 10, 11, .62);
    color: #fff;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease;
}
.home-page .hero-video-start:hover { background: rgba(10, 10, 11, .84); }
.home-page .hero-video-start:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@supports (backdrop-filter: blur(8px)) {
    .home-page .hero-video-start,
    .home-page .hero-sound,
    .home-page .hero-playback { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

.home-page .hero-video-block.is-buffering::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: heroVideoSpin .8s linear infinite;
}
@keyframes heroVideoSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   2: OUR SERVICES (carousel) + PLAN MY VIETNAM

   The services box replaced the four-mood chooser that used to stand here.
   It is still navigation rather than a section, so it keeps the same compact
   weight on the hero's dark ground: one glass panel, one service showing at a
   time, arrows, dots and a counter.

   The track is a scroll-snap row, NOT a transform carousel. That single
   decision is what makes the thing work with JavaScript off (a plain
   swipeable row of links), work with a screen reader (the slides are ordinary
   anchors in the document), and work on a phone with native momentum, rather
   than needing a script to reimplement all three.
   ========================================================================== */
.home-page .hero-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: clamp(26px, 3vw, 40px);
    align-items: start;
}

.home-page .svc,
.home-page .hb-plan {
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--h-r-lg);
    background: rgba(10, 10, 11, .58);
}
@supports (backdrop-filter: blur(14px)) {
    .home-page .svc,
    .home-page .hb-plan { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

.home-page .svc {
    position: relative;
    padding: 10px 12px 11px;
    overflow: hidden;   /* the slide tint below must not paint past the radius */
}

/* The accent of the service currently showing, set on the panel by the
   controller as --svc-tone, bleeds in from the left as a whisper. It is the
   only thing on the panel that changes colour, which is what keeps nine
   different accents from turning the hero into a paint chart. */
.home-page .svc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
                var(--svc-tone, var(--h-orange-2)) 0%,
                transparent 58%);
    opacity: .12;
    transition: background 520ms ease;
    pointer-events: none;
}

/* ---- head: title, counter, arrows ------------------------------------- */
.home-page .svc-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.home-page .svc-head h2 {
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-wrap: wrap;
}

.home-page .svc-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-page .svc-count {
    color: rgba(255, 255, 255, .55);
    font-size: .68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* 1/9 -> 9/9 must not shuffle the arrows */
    letter-spacing: .02em;
}

.home-page .svc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: .62rem;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.home-page .svc-arrow:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.home-page .svc-arrow:active { transform: scale(.92); }
.home-page .svc-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the track -------------------------------------------------------- */
.home-page .svc-viewport {
    position: relative;
    z-index: 1;
}

.home-page .svc-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Room for the slide's own lift and shadow, cancelled by the negative
       margin so the panel padding still reads as 12px. */
    padding: 3px;
    margin: -3px;
    overscroll-behavior-x: contain;   /* a swipe past the last slide must not nudge the page */
}
.home-page .svc-track::-webkit-scrollbar { display: none; }

.home-page .svc-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;   /* one flick moves exactly one service, never three */
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px 11px 9px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--h-r-md);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    text-decoration: none;
    transition: background 200ms ease,
                border-color 200ms ease,
                transform 240ms cubic-bezier(.22, .8, .3, 1),
                box-shadow 260ms ease;
}
.home-page .svc-slide:hover {
    background: rgba(255, 255, 255, .1);
    border-color: color-mix(in srgb, var(--tone) 42%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.home-page .svc-slide:active { transform: scale(.985); }
.home-page .svc-slide:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The photograph. Fixed square slot, object-fit: cover, which is the one
   place in this design a photo is allowed to fill a frame: these are
   thumbnails standing in for a service, not a photograph being presented.
   Anywhere the picture IS the subject (Signature, Premier, the experience
   cards) it stays uncropped. */
.home-page .svc-shot {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: calc(var(--h-r-md) - 4px);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}
.home-page .svc-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-page .svc-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.home-page .svc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tone, var(--h-orange-2));
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.home-page .svc-kicker i { font-size: .72rem; }

.home-page .svc-name {
    color: #fff;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.2;
}

.home-page .svc-desc {
    color: rgba(255, 255, 255, .62);
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.35;
    /* Two lines at most, so a long description can never make one slide
       taller than the rest and jog the panel as it cycles. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-page .svc-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: .68rem;
    transition: background 200ms ease, color 200ms ease,
                transform 240ms cubic-bezier(.22, .8, .3, 1);
}
.home-page .svc-slide:hover .svc-go {
    background: var(--tone, var(--h-orange-2));
    color: #10100f;
    transform: translateX(2px);
}

/* Per-service accent. One custom property per tone, read by the kicker, the
   hover border and the arrow chip; the panel wash reads the same value from
   --svc-tone, which the controller copies off the active slide. */
.home-page .svc-t-blue   { --tone: #7dd3fc; }
.home-page .svc-t-gold   { --tone: var(--gold-2, #e3c05a); }
.home-page .svc-t-jade   { --tone: #86efac; }
.home-page .svc-t-orange { --tone: var(--h-orange-2, #ffb567); }
.home-page .svc-t-violet { --tone: #f0a6ff; }
.home-page .svc-t-sky    { --tone: var(--sky, #7ec5e0); }
.home-page .svc-t-rose   { --tone: #ffa8b4; }

/* ---- dots ------------------------------------------------------------- */
.home-page .svc-dots {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* 14px of gap, not 6. The dots are the only touch target on the panel
       small enough to miss, and the gap is what their hit areas are allowed
       to claim; a tight row here would mean a tap landing on the wrong
       service. Nine dots at 6+14 still measure well under the panel. */
    gap: 14px;
    margin-top: 9px;
}

.home-page .svc-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    cursor: pointer;
    transition: width 260ms cubic-bezier(.22, .8, .3, 1),
                background 220ms ease;
}
.home-page .svc-dot[aria-selected="true"] {
    width: 18px;
    background: var(--svc-tone, var(--h-orange-2));
}
.home-page .svc-dot:hover { background: rgba(255, 255, 255, .5); }
.home-page .svc-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A 6px dot is far under the target a finger needs, so each one carries an
   invisible hit area. Grown with a pseudo-element rather than with padding,
   so the dot keeps its size and the row keeps its rhythm.

   The box is TALL AND NARROW on purpose. An earlier version used a 30px
   square, and because the dots sit 6px apart, every box overlapped both of
   its neighbours: the last dot in the row won the stack and swallowed the
   taps meant for the others (a real browser caught this, clicking dot 4 when
   dot 3 was asked for). Height is free to grow, since nothing sits above or
   below the row; width may not exceed the dot plus its gap. */
.home-page .svc-dot { position: relative; }
.home-page .svc-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    /* The dot plus its gap, less 2px, so two neighbouring boxes never touch
       even after sub-pixel rounding. Still a 18x34 target on the small dots
       and 30x34 on the selected one. */
    width: calc(100% + 12px);
    height: 34px;
    transform: translate(-50%, -50%);
}

/* Text for assistive technology and crawlers on a control that shows only an
   icon. Off-canvas, one pixel, clipped: painted nowhere. */
.home-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Plan my Vietnam ---------------------------------------------------- */
/* Visually secondary to Find a Buddy: warmer, quieter, no gradient button. */
.home-page .hb-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px 15px;
    overflow: hidden;
    /* A sharp rectangle - the one angular object in the strip, which is
       exactly what makes it read as a cinema ticket rather than another
       rounded card. The tags and the CTA inside go angular with it. */
    border-radius: 0;
    border-color: rgba(241, 222, 156, .28);
    box-shadow: inset 0 0 0 1px rgba(241, 222, 156, .08);
    color: #fff;
    text-decoration: none;
    transition: transform 180ms cubic-bezier(.22, .8, .3, 1), border-color 200ms ease;
}

/* The vignette: paints over the scene (a pseudo draws after child elements)
   and under the words (which are lifted to z-index 1 below). It is what
   gives the photograph its depth back after JPEG compression flattened it. */
.home-page .hb-plan::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 150% at 50% 42%, transparent 55%, rgba(10, 10, 11, .4) 100%),
        linear-gradient(0deg, rgba(10, 10, 11, .28), transparent 32%);
}
.home-page .hb-plan:hover { transform: translateY(-2px); border-color: rgba(241, 222, 156, .42); }
.home-page .hb-plan:focus-visible { outline: 2px solid #f9a847; outline-offset: 3px; }

/* City imagery, integrated rather than decorative: it holds the right edge
   of the card and fades out before it reaches the words. */
.home-page .hb-plan-scene {
    position: absolute;
    inset: 0 0 0 26%;
    z-index: 0;
    pointer-events: none;
    /* The full resolution ladder. The old single 800px source is what made
       this card look soft: it was stretched across 1000+ device pixels on
       any retina screen. 1x deliberately gets the 1600 file - downscaling
       an oversampled source is free supersampling, and the crop this card
       shows is a thin band of a tall photo, so the band itself needs the
       pixels. */
    background-image: url('/static/images/background/hero-2560.jpg');
    background-image: -webkit-image-set(
        url('/static/images/background/hero-2560.jpg') 1x,
        url('/static/images/background/hero-3840.jpg') 2x);
    background-image: image-set(
        url('/static/images/background/hero-2560.jpg') 1x,
        url('/static/images/background/hero-3840.jpg') 2x);
    background-size: cover;
    background-position: center 34%;
    opacity: .94;
    /* The full cinematic grade: dusk colours back, blacks back, the JPEG
       haze gone. */
    filter: saturate(1.2) contrast(1.1) brightness(1.03);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
    /* The drift is anchored at the right edge, so the masked fade on the
       left is where the extra pixels go and the visible edge never crawls. */
    transform-origin: right center;
    will-change: transform;
    animation: hbPlanDrift 26s ease-in-out infinite alternate;
}

@keyframes hbPlanDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

/* :not() matters, a bare `> *` here has the same specificity as the rule
   above and, coming later, would turn the absolutely positioned scene back
   into a zero-height flow item. */
.home-page .hb-plan > *:not(.hb-plan-scene) { position: relative; z-index: 1; }

.home-page .hb-plan-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 0;
    border: 1px solid rgba(241, 222, 156, .28);
    background: rgba(10, 10, 11, .5);
    color: #f1de9c;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.home-page .hb-plan-title {
    max-width: 20ch;
    color: #fff;
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.28;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(10, 10, 11, .65), 0 4px 16px rgba(10, 10, 11, .4);
}

.home-page .hb-plan-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.home-page .hb-plan-from {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 10, 11, .45);
    color: rgba(255, 255, 255, .82);
    font-size: .72rem;
}
.home-page .hb-plan-from b { color: #f1de9c; font-size: .8rem; font-weight: 600; }

.home-page .hb-plan-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 0;
    background: linear-gradient(160deg, #fbf3d6 0%, #f1de9c 55%, #f1de9c 100%);
    color: #161617;
    font-size: .76rem;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 6px 16px -6px rgba(227, 192, 90, .55);
    transition: gap 180ms ease, background 180ms ease, box-shadow 200ms ease;
}
.home-page .hb-plan:hover .hb-plan-go {
    gap: 11px;
    background: linear-gradient(160deg, #fbf3d6 0%, #fbf3d6 55%, #f9c684 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 8px 20px -6px rgba(227, 192, 90, .7);
}

/* ==========================================================================
   3: MARKETPLACE: BOOK THIS VIBE + AVAILABLE RIGHT NOW
   The second-strongest block. Phone demo left, real Buddies right.
   ========================================================================== */
/* ==========================================================================
   WHAT DO YOU NEED RIGHT NOW?  -  the four doors

   The first thing a visitor meets after the dark hero, so this section
   carries the handover: a faint ambient field of the four accent colours
   behind four raised cards, each with a gradient hairline border, its own
   colour story and exactly one micro-interaction per surface - the card
   lifts, the icon tilts, the arrow chip turns north-east, a soft shine
   crosses. It is still navigation: readable in two seconds, clickable with
   a thumb.

   The colour assignments key off nth-child on purpose. The four doors are a
   fixed, ordered set (see welcome.html), and keying off position keeps the
   markup free of presentational classes. --da/--db paint the icon gradient
   and the card's warm edge; --dt is the matching TEXT colour, chosen
   separately because every action line has to clear AA on white, which the
   gradient members do not.

   Every transition stays inside the cheap-properties whitelist
   test_homepage_and_taxonomy enforces, and every animation dies in the one
   reduced-motion block at the end of this file. The entrance animation is
   scroll-driven and guarded by @supports: a browser without
   animation-timeline simply shows the finished cards, which is the correct
   fallback for content this close to the fold.
   ========================================================================== */
.home-page .doors {
    position: relative;
    padding: clamp(22px, 2.6vw, 38px) var(--h-gutter) var(--h-section-sm);
    background: linear-gradient(180deg, #ffffff 0%, var(--h-paper) 100%);
}

/* The ambient field: one soft radial per door colour. Atmosphere, not
   decoration - it is what makes the four accents below read as a set. */
.home-page .doors::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(42% 70% at 8% 14%, rgba(201, 162, 39, .06), transparent 70%),
        radial-gradient(38% 62% at 36% 0%, rgba(126, 197, 224, .05), transparent 70%),
        radial-gradient(40% 66% at 64% 8%, rgba(201, 162, 39, .06), transparent 70%),
        radial-gradient(42% 70% at 92% 16%, rgba(31, 138, 91, .06), transparent 70%);
    pointer-events: none;
}

.home-page .doors-shell {
    position: relative;
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
}

.home-page .doors-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--h-flame-ink);
}

.home-page .doors-kicker::before,
.home-page .doors-kicker::after {
    content: '';
    height: 1px;
    width: clamp(24px, 4vw, 44px);
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .45));
}

.home-page .doors-kicker::after {
    background: linear-gradient(90deg, rgba(201, 162, 39, .45), transparent);
}

.home-page .doors .section-title {
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    margin-bottom: clamp(14px, 1.8vw, 22px);
}

.home-page .doors-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
}

/* --- the colour stories, by position ------------------------------------ */
.home-page .door:nth-child(1) { --da: #3a3a3c; --db: #1d1d1f; --dt: #1d1d1f; }
.home-page .door:nth-child(2) { --da: #7ec5e0; --db: #1f5a70; --dt: #1f5a70; }
.home-page .door:nth-child(3) { --da: #c9a227; --db: #8a6b12; --dt: #8a6b12; }
.home-page .door:nth-child(4) { --da: #1f8a5b; --db: #14663f; --dt: #14663f; }

/* --- one card ----------------------------------------------------------- */
.home-page .door {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 104px;
    padding: 13px 13px 12px;
    border: 1px solid transparent;
    border-radius: var(--h-r-xl);
    /* Gradient hairline: neutral at the top, warming to the card's own
       colour at the bottom edge. The plain declaration above each pair is
       the fallback for a browser without color-mix. */
    background: #fff;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(165deg,
            rgba(10, 10, 11, .12),
            rgba(10, 10, 11, .05) 42%,
            color-mix(in srgb, var(--da) 55%, #fff)) border-box;
    box-shadow:
        0 1px 2px rgba(10, 10, 11, .04),
        0 12px 32px -14px rgba(10, 10, 11, .14);
    text-decoration: none;
    color: var(--h-ink);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .3s ease;
}

/* Hover wash: the card's own colour breathes in from the top corner. */
.home-page .door::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 88% -12%,
        rgba(10, 10, 11, .06), transparent 58%);
    background: radial-gradient(120% 100% at 88% -12%,
        color-mix(in srgb, var(--da) 13%, transparent), transparent 58%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

/* Shine: one soft streak that crosses on hover and parks off-card. At rest
   it sits beyond the left edge, clipped by overflow, costing nothing. */
.home-page .door::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -45%;
    width: 38%;
    background: linear-gradient(100deg,
        transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-16deg) translateX(0);
    transition: transform .6s ease;
    pointer-events: none;
}

.home-page .door:hover,
.home-page .door:focus-visible {
    transform: translateY(-5px);
    box-shadow:
        0 2px 4px rgba(10, 10, 11, .05),
        0 24px 48px -16px rgba(10, 10, 11, .24);
    box-shadow:
        0 2px 4px rgba(10, 10, 11, .05),
        0 24px 48px -16px rgba(10, 10, 11, .18),
        0 18px 40px -20px color-mix(in srgb, var(--da) 50%, transparent);
}

.home-page .door:hover::before,
.home-page .door:focus-visible::before { opacity: 1; }

.home-page .door:hover::after { transform: skewX(-16deg) translateX(400%); }

.home-page .door:focus-visible {
    outline: 3px solid var(--h-orange);
    outline-offset: 3px;
}

.home-page .door-ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 12px;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(140deg, var(--da), var(--db));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 10px 22px -10px rgba(10, 10, 11, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 12px 24px -10px color-mix(in srgb, var(--da) 65%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}

.home-page .door:hover .door-ico { transform: scale(1.08) rotate(-5deg); }

.home-page .door-copy {
    position: relative;   /* rides above the wash */
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin-top: auto;
}

.home-page .door-copy strong {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.22;
}

/* The action line doubles as the card's call to action, in the card's own
   AA-clear colour (--dt, not the gradient members). */
.home-page .door-copy small {
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dt);
}

/* The arrow chip. On hover it fills with the card's deep colour and turns
   north-east - the universal "this opens somewhere" gesture. */
.home-page .door-go {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .68rem;
    color: var(--dt);
    background: #fff;
    background: color-mix(in srgb, var(--da) 8%, #fff);
    border: 1px solid rgba(10, 10, 11, .1);
    border: 1px solid color-mix(in srgb, var(--da) 24%, #fff);
    transition: transform .3s ease, background .3s ease,
                color .3s ease, border-color .3s ease;
}

.home-page .door:hover .door-go {
    transform: rotate(-45deg);
    color: #fff;
    background: var(--db);
    border-color: var(--db);
}

/* Entrance: the cards rise as they scroll into view, staggered left to
   right. Scroll-driven, so a card already on screen at load is simply
   finished - no replayed animation, no flash. */
@supports (animation-timeline: view()) {
    .home-page .door {
        animation: hbDoorIn .7s cubic-bezier(.22, 1, .36, 1) both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
    }
    .home-page .door:nth-child(2) { animation-range: entry 6% entry 52%; }
    .home-page .door:nth-child(3) { animation-range: entry 12% entry 62%; }
    .home-page .door:nth-child(4) { animation-range: entry 18% entry 72%; }
}

@keyframes hbDoorIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.97);
    }
}

/* The phone tiles' living edge and breathing icon (see the 640px block). */
@keyframes hbDoorSpin {
    to { transform: rotate(1turn); }
}

@keyframes hbDoorFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* --- arrangement --------------------------------------------------------- */
@media (max-width: 900px) {
    .home-page .doors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .door { min-height: 96px; }
}

@media (max-width: 640px) {
    /* Phones: two columns of jewel squares. Each tile draws its own
       slow-spinning two-tone ring, a conic gradient rotating behind an
       inset surface, transform-only so it stays on the compositor, the
       icon breathes, the tile glows in its own colour and answers a tap
       with a press. Every animation dies in the reduced-motion block,
       which leaves a clean, complete static ring. */
    /* Capped, centred columns rather than full halves: the jewels stay
       true squares at about half their first size, and the pair sits
       centred under the title like a small instrument panel. */
    .home-page .doors-grid {
        grid-template-columns: repeat(2, minmax(0, 128px));
        justify-content: center;
        gap: 10px;
    }
    .home-page .door {
        aspect-ratio: 1 / 1;
        min-height: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px 6px;
        background: #fff;
        box-shadow: 0 10px 22px -10px rgba(10, 10, 11, .25);
        box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--da) 38%, transparent);
    }
    .home-page .door:active { transform: scale(.965); }

    /* The ring: an oversized conic square spinning behind everything.
       Negative z-index paints it above the tile's background but below
       all content; overflow clips it to the rounded corners. */
    .home-page .door::before {
        inset: -35%;
        z-index: -2;
        opacity: 1;
        background: conic-gradient(from 180deg,
            var(--da), rgba(10, 10, 11, .07) 28%,
            var(--db) 52%, rgba(10, 10, 11, .07) 76%, var(--da));
        animation: hbDoorSpin 7s linear infinite;
    }

    /* The surface the ring frames: inset by the rim width, tinted with
       the tile's own colour at the top. Replaces the desktop shine, so
       every travelling transform is switched off. */
    .home-page .door::after {
        inset: 1.5px;
        width: auto;
        z-index: -1;
        border-radius: calc(var(--h-r-xl) - 2px);
        background: #fff;
        background: radial-gradient(120% 90% at 50% 0%,
            color-mix(in srgb, var(--da) 10%, #fff), #fff 62%);
        transform: none;
        transition: none;
    }
    .home-page .door:hover::after { transform: none; }

    .home-page .door-ico {
        width: 32px;
        height: 32px;
        margin: 0 0 6px;
        border-radius: 10px;
        font-size: .8rem;
        animation: hbDoorFloat 3.8s ease-in-out infinite;
    }
    .home-page .door:nth-child(2) .door-ico { animation-delay: .5s; }
    .home-page .door:nth-child(3) .door-ico { animation-delay: 1s; }
    .home-page .door:nth-child(4) .door-ico { animation-delay: 1.5s; }

    .home-page .door-copy { margin-top: 0; align-items: center; gap: 2px; }
    .home-page .door-copy strong { font-size: .76rem; }
    .home-page .door-copy small { font-size: .65rem; }
    .home-page .door-go {
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }
}

.home-page .market {
    position: relative;
    padding: clamp(30px, 3.4vw, 46px) var(--h-gutter) var(--h-section-sm);
    background: linear-gradient(180deg, var(--h-paper) 0%, #ffffff 46%, #fdfbf6 100%);
}

.home-page .market-shell {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 48px);
    align-items: center;
}

/* --- phone mockup ------------------------------------------------------- */
.home-page .market-phone { display: flex; justify-content: center; }

.home-page .hero-phone {
    position: relative;
    width: min(258px, 100%);
    padding: 10px;
    border-radius: 38px;
    background: linear-gradient(160deg, #2b2560 0%, #161617 62%, #0a0a0b 100%);
    box-shadow: var(--h-shadow-phone);
}

.home-page .hero-phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
}

.home-page .hero-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 16px;
    border-radius: 999px;
    background: #0a0a0b;
    z-index: 4;
}

.home-page .hero-phone-header { padding: 32px 14px 8px; text-align: center; }
.home-page .hero-phone-header .hero-phone-title {
    color: var(--h-ink);
    font-family: var(--font-display);
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.home-page .hero-phone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 14px 10px;
}

.home-page .hero-phone-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--h-r-md);
    overflow: hidden;
    background: #f5f5f7;
    transition: box-shadow 320ms ease, transform 320ms cubic-bezier(.22, .8, .3, 1), opacity 320ms ease;
}
.home-page .hero-phone-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-page .hero-phone-card-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 7px 5px;
    color: #fff;
    line-height: 1.15;
    background: linear-gradient(180deg,
        rgba(10, 10, 11, 0) 0%,
        rgba(10, 10, 11, .62) 30%,
        rgba(10, 10, 11, .93) 66%,
        rgba(10, 10, 11, .95) 100%);
}
.home-page .hero-phone-card-info span,
.home-page .hero-phone-card-info small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-page .hero-phone-card-info span { font-size: .64rem; font-weight: 600; }
.home-page .hero-phone-card-info small { font-size: .54rem; opacity: .85; }

.home-page .hpc-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1f8a5b;
    color: #fff;
    font-size: .52rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity 260ms ease, transform 260ms cubic-bezier(.22, .8, .3, 1);
}

.home-page .hero-phone-btn-secondary {
    margin: 4px 14px 8px;
    padding: 8px;
    border-radius: 11px;
    background: var(--h-sky);
    color: #6e6e73;
    font-size: .68rem;
    font-weight: 600;
    text-align: center;
}

.home-page .hero-phone-btn {
    display: block;
    margin: 0 14px 14px;
    padding: 11px;
    border-radius: 13px;
    text-decoration: none;
    background: linear-gradient(100deg, var(--h-pink-ink), var(--h-purple-ink));
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 8px 18px rgba(126, 197, 224, .26);
}

/* Decorative booking demo, aria-hidden, no pointer events. Driven by the
   data-demo attribute the page script sets. */
.home-page .phone-demo-panel {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 92px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 26px rgba(10, 10, 11, .18);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(.22, .8, .3, 1);
}
.home-page .hero-phone-screen[data-demo="2"] .phone-demo-panel,
.home-page .hero-phone-screen[data-demo="3"] .phone-demo-panel,
.home-page .hero-phone-screen[data-demo="4"] .phone-demo-panel,
.home-page .hero-phone-screen[data-demo="5"] .phone-demo-panel { opacity: 1; transform: none; }

.home-page .pdp-msg {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--h-ink);
    font-size: .72rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 240ms ease, transform 240ms ease;
}
.home-page .hero-phone-screen[data-demo="2"] .pdp-1,
.home-page .hero-phone-screen[data-demo="3"] .pdp-2,
.home-page .hero-phone-screen[data-demo="4"] .pdp-3,
.home-page .hero-phone-screen[data-demo="5"] .pdp-4 { opacity: 1; transform: none; }

.home-page .pdp-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f8a5b; flex: none; }
.home-page .pdp-cta {
    padding: 6px 18px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--h-pink-ink), var(--h-purple-ink));
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
}

.home-page .hero-phone-screen[data-demo="1"] .hero-phone-card:first-child,
.home-page .hero-phone-screen[data-demo="2"] .hero-phone-card:first-child,
.home-page .hero-phone-screen[data-demo="3"] .hero-phone-card:first-child,
.home-page .hero-phone-screen[data-demo="4"] .hero-phone-card:first-child,
.home-page .hero-phone-screen[data-demo="5"] .hero-phone-card:first-child {
    box-shadow: 0 0 0 2.5px var(--h-pink-ink);
    transform: translateY(-2px);
}
.home-page .hero-phone-screen[data-demo="1"] .hero-phone-card:first-child .hpc-badge,
.home-page .hero-phone-screen[data-demo="2"] .hero-phone-card:first-child .hpc-badge,
.home-page .hero-phone-screen[data-demo="3"] .hero-phone-card:first-child .hpc-badge,
.home-page .hero-phone-screen[data-demo="4"] .hero-phone-card:first-child .hpc-badge,
.home-page .hero-phone-screen[data-demo="5"] .hero-phone-card:first-child .hpc-badge {
    opacity: 1;
    transform: none;
}
.home-page .hero-phone-screen[data-demo="2"] .hero-phone-card:not(:first-child),
.home-page .hero-phone-screen[data-demo="3"] .hero-phone-card:not(:first-child),
.home-page .hero-phone-screen[data-demo="4"] .hero-phone-card:not(:first-child),
.home-page .hero-phone-screen[data-demo="5"] .hero-phone-card:not(:first-child) { opacity: .55; }

/* --- Available Right Now ------------------------------------------------ */
.home-page .market-main { min-width: 0; }

.home-page .featured-buddies-header { margin-bottom: 16px; }

.home-page .featured-buddies-header .kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #8a6b12;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.home-page .featured-buddies-header .kicker::after {
    content: '';
    width: clamp(18px, 3vw, 34px);
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 162, 39, .34), rgba(201, 162, 39, 0));
}

.home-page .featured-buddies-header h2 {
    color: var(--h-ink);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.028em;
}

.home-page .featured-buddies-header p {
    max-width: 52ch;
    margin-top: 6px;
    color: var(--h-body);
    font-size: .92rem;
    line-height: 1.55;
}

/* A rail rather than a grid: four fit on desktop, the rest stay reachable by
   scroll or by the arrow, so no Buddy the API returned is thrown away. */
.home-page .featured-rail { position: relative; padding-right: 42px; }

.home-page .featured-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 14px) / 4);
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.home-page .featured-grid::-webkit-scrollbar { display: none; }
.home-page .featured-grid > * { scroll-snap-align: start; }

.home-page .featured-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--h-hairline);
    border-radius: var(--h-r-lg);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--h-shadow-card);
    transition: transform 200ms cubic-bezier(.22, .8, .3, 1), box-shadow 200ms ease;
}
.home-page .featured-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-lift); }

/* The photograph is most of the card, the reference is deliberately visual
   rather than text-heavy. */
.home-page .featured-card-photo {
    position: relative;
    aspect-ratio: 3 / 3.4;
    overflow: hidden;
    background: #f5f5f7;
}
.home-page .featured-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(.22, .8, .3, 1);
}
.home-page .featured-card:hover .featured-card-photo img { transform: scale(1.05); }

.home-page .featured-card-photo .fc-status {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: #1f8a5b;
    font-size: .68rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(10, 10, 11, .14);
}
.home-page .featured-card-photo .fc-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1f8a5b;
}

/* skeleton */
.home-page .featured-card-photo.skel { background: #f5f5f7; }
.home-page .featured-card-photo.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: fcShimmer 1.4s infinite;
}
@keyframes fcShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.home-page .fc-skel-line {
    height: 9px;
    margin-bottom: 7px;
    border-radius: 5px;
    background: #f5f5f7;
}

.home-page .featured-card-body { padding: 11px 12px 13px; }

.home-page .featured-card-body h3 {
    color: var(--h-ink);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-page .featured-card-body .fc-bio {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    color: var(--h-body);
    font-size: .72rem;
    line-height: 1.4;
}

.home-page .featured-card-body .fc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 7px 0 9px;
}
.home-page .featured-card-body .fc-tag {
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--h-sky);
    color: #6e6e73;
    font-size: .68rem;
    font-weight: 600;
}
.home-page .featured-card-body .fc-tag.service { background: #fff1e2; color: #a8500b; }

.home-page .featured-card-btns { display: grid; grid-template-columns: auto 1fr; gap: 6px; }

.home-page .fc-btn-view,
.home-page .fc-btn-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 150ms ease, filter 180ms ease;
}
.home-page .fc-btn-view {
    border: 1px solid var(--h-hairline);
    background: #fff;
    color: var(--h-body);
}
.home-page .fc-btn-view:hover { background: var(--h-sky); color: var(--h-ink); }
.home-page .fc-btn-book {
    border: 0;
    background: linear-gradient(180deg, #e9cb62 0%, #c9a227 100%);
    color: #1d1d1f;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .4) inset, 0 -1px 0 0 rgba(0, 0, 0, .08) inset,
                0 1px 2px rgba(0, 0, 0, .12), 0 4px 12px -4px rgba(201, 162, 39, .5);
}
.home-page .fc-btn-book:hover { filter: saturate(1.1); transform: translateY(-1px); }

/* Rail arrow, as in the reference. Hidden when there is nothing to scroll. */
.home-page .featured-next {
    position: absolute;
    top: 38%;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--h-hairline);
    border-radius: 50%;
    background: #fff;
    color: var(--h-orange);
    font-size: .82rem;
    cursor: pointer;
    box-shadow: var(--h-shadow-card);
    transition: transform 160ms ease, background 180ms ease, opacity 180ms ease;
}
.home-page .featured-next:hover { transform: scale(1.08); background: #fff7ef; }
.home-page .featured-next:focus-visible { outline: 2px solid var(--h-orange); outline-offset: 2px; }
.home-page .featured-next[hidden] { display: none !important; }

.home-page .featured-empty {
    grid-column: 1 / -1;
    padding: 26px 12px;
    color: var(--h-body);
    text-align: center;
}

.home-page .featured-cta { margin-top: 18px; text-align: center; }
.home-page .featured-cta a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 26px;
    border-radius: 999px;
    background: #1d1d1f;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 24px -10px rgba(0, 0, 0, .5);
    transition: transform 160ms cubic-bezier(.22, .8, .3, 1), box-shadow 200ms ease;
}
.home-page .featured-cta a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 32px -12px rgba(0, 0, 0, .6); }

/* ==========================================================================
   4: STATS RIBBON
   A proof ribbon, not a section. Real numbers only; the block stays hidden
   until /api/public/stats returns something.
   ========================================================================== */
.home-page .stats-bar {
    padding: 0 var(--h-gutter) var(--h-section-sm);
    background: #fdfbf6;
}

.home-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(940px, 100%);
    margin-inline: auto;
    padding: 16px clamp(12px, 2vw, 28px);
    border-radius: var(--h-r-xl);
    background: linear-gradient(120deg, var(--h-navy) 0%, var(--h-navy-3) 100%);
    box-shadow: 0 16px 38px rgba(10, 10, 11, .22);
}

.home-page .stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 8px;
    text-align: left;
}
.home-page .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .12); }

.home-page .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: rgba(201, 162, 39, .16);
    color: #e3c05a;
    font-size: .84rem;
}

.home-page .stat-number {
    color: #fff;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.1;
}
.home-page .stat-label {
    color: rgba(255, 255, 255, .66);
    font-size: .7rem;
    line-height: 1.3;
}

.home-page .stats-note {
    width: min(940px, 100%);
    margin: 10px auto 0;
    color: var(--h-body);
    font-size: .78rem;
    text-align: center;
}

/* ==========================================================================
   5: WHY CHOOSE US
   Warm cream container. Four benefits on top, two beneath, the reference's
   arrangement, with cards compressed so the section reads at medium weight.
   ========================================================================== */
.home-page .why-section {
    padding: 0 var(--h-gutter) var(--h-section-sm);
    background: #fff;
}

.home-page .why-shell {
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    padding: clamp(28px, 3.4vw, 44px) clamp(18px, 2.6vw, 38px);
    border: 1px solid rgba(201, 162, 39, .13);
    border-radius: var(--h-r-2xl);
    background: linear-gradient(170deg, var(--h-cream-2) 0%, var(--h-cream) 58%, #fdfbf6 100%);
}

/* The heading carries the brand gradient, as in the reference. */
.home-page .why-section .section-title {
    background: linear-gradient(100deg, #1d1d1f 0%, #8a6b12 52%, var(--h-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8a6b12;
}

.home-page .why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
    margin-top: clamp(18px, 2.2vw, 28px);
}

/* The last two sit centred beneath the first four. */
.home-page .why-card:nth-child(5) { grid-column: 2 / 3; }
.home-page .why-card:nth-child(6) { grid-column: 3 / 4; }

.home-page .why-card {
    padding: 14px 15px 15px;
    border: 1px solid rgba(10, 10, 11, .06);
    border-radius: var(--h-r-md);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 3px 12px rgba(10, 10, 11, .05);
    transition: transform 180ms cubic-bezier(.22, .8, .3, 1), box-shadow 200ms ease;
}
.home-page .why-card:hover { transform: translateY(-3px); box-shadow: var(--h-shadow-card); }

.home-page .why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, .34);
    background: linear-gradient(158deg, #fdf7e4 0%, #f7ecc6 52%, #f2e2ae 100%);
    color: #8a6b12;
    font-size: .82rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .95) inset,
        0 -1px 0 rgba(140, 110, 20, .09) inset,
        0 0 0 4px rgba(201, 162, 39, .16),
        0 4px 10px -4px rgba(120, 95, 20, .28);
}

.home-page .why-card h3 {
    margin-bottom: 5px;
    color: #1d1d1f;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.home-page .why-card p {
    color: var(--h-body);
    font-size: .74rem;
    line-height: 1.5;
}

/* ==========================================================================
   6: HOW IT WORKS
   The shortest section on the page: three rings on ONE line, each ring
   carrying a whole step (number badge, icon, title), joined by a dashed
   path with a small direction marker on each column boundary. The section
   is hidden on phones (see the phone block), so the row only ever has
   720px or more to share and never has to wrap.
   ========================================================================== */
.home-page .how-section {
    padding: 0 var(--h-gutter) var(--h-section-sm);
    background: #fff;
}

.home-page .how-shell {
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    padding: clamp(24px, 2.8vw, 40px) clamp(18px, 2.6vw, 38px) clamp(26px, 3vw, 40px);
    border: 1px solid rgba(201, 162, 39, .08);
    border-radius: var(--h-r-2xl);
    background: linear-gradient(150deg, var(--h-sky) 0%, var(--h-lavender) 100%);
}

.home-page .how-lede {
    max-width: 44ch;
    margin: 8px auto 0;
    color: var(--h-body);
    font-size: clamp(.94rem, 1.1vw, 1.02rem);
    line-height: 1.5;
    text-align: center;
}

.home-page .how-rings {
    --ring: clamp(150px, 15vw, 188px);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(24px, 2.8vw, 36px) 0 0;
    padding: 0;
    list-style: none;
}

/* The path runs through the centre of all three rings and stops at the
   outer rings' centres, so nothing trails off the edge. */
.home-page .how-rings::before {
    content: "";
    position: absolute;
    top: calc(var(--ring) / 2);
    left: calc(100% / 6);
    right: calc(100% / 6);
    z-index: 0;
    border-top: 2px dashed rgba(201, 162, 39, .28);
}

.home-page .how-ring {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.home-page .how-ring-1 { --ring-c: var(--h-blue);       --ring-halo: rgba(201, 162, 39, .12); }
.home-page .how-ring-2 { --ring-c: var(--h-orange);     --ring-halo: rgba(201, 162, 39, .15); }
.home-page .how-ring-3 { --ring-c: var(--h-purple-ink); --ring-halo: rgba(126, 197, 224, .12); }

/* Direction markers: a white dot on the path at each column boundary with
   an orange chevron inside, so the order reads left to right at a glance. */
.home-page .how-ring:not(:last-child)::before,
.home-page .how-ring:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--ring) / 2);
    right: 0;
}
.home-page .how-ring:not(:last-child)::before {
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(201, 162, 39, .16);
    box-shadow: 0 4px 10px rgba(10, 10, 11, .06);
    transform: translate(50%, -50%);
}
.home-page .how-ring:not(:last-child)::after {
    z-index: 2;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--h-orange);
    border-right: 2px solid var(--h-orange);
    transform: translate(calc(50% - 2px), -50%) rotate(45deg);
}

.home-page .how-disc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: var(--ring);
    height: var(--ring);
    padding: 22px 18px 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ring-c);
    box-shadow: 0 0 0 7px var(--ring-halo), 0 16px 34px rgba(10, 10, 11, .10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.home-page .how-ring:hover .how-disc {
    transform: translateY(-4px);
    box-shadow: 0 0 0 10px var(--ring-halo), 0 22px 40px rgba(10, 10, 11, .14);
}

/* The number badge straddles the top of the ring. */
.home-page .how-n {
    position: absolute;
    top: -15px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--ring-c);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 14px var(--ring-halo);
    transform: translateX(-50%);
}

.home-page .how-disc > i {
    color: var(--ring-c);
    font-size: clamp(1.5rem, 1.9vw, 1.85rem);
    line-height: 1;
}

.home-page .how-disc h3 {
    margin: 0;
    color: var(--h-ink);
    font-size: clamp(.88rem, 1vw, .98rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.home-page .how-hint {
    max-width: 34ch;
    margin: 18px 0 0;
    color: var(--h-body);
    font-size: .86rem;
    line-height: 1.45;
}

/* ==========================================================================
   7: HOW WE KEEP YOU SAFE
   One compact horizontal composition: the shield holds the left column and
   the content sits beside it. No large empty ground around the illustration.
   ========================================================================== */
.home-page .safety-section {
    padding: 0 var(--h-gutter) var(--h-section-sm);
    background: #fff;
}

.home-page .safety-shell {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 34px);
    align-items: center;
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    padding: clamp(22px, 2.8vw, 34px) clamp(18px, 2.6vw, 38px);
    border: 1px solid rgba(201, 162, 39, .13);
    border-radius: var(--h-r-2xl);
    background: linear-gradient(170deg, var(--h-cream-2) 0%, var(--h-cream) 60%, #fdfbf6 100%);
}

.home-page .safety-visual { display: flex; align-items: center; justify-content: center; }
/* The Lottie draws its shield inside a generous transparent margin, so the
   box has to be larger than the artwork should look. aspect-ratio reserves it
   before the animation loads, so a late Lottie cannot shift the page. */
.home-page .safety-lottie {
    width: min(210px, 100%);
    aspect-ratio: 1 / 1;
}
.home-page .safety-lottie svg {
    display: block;
    transform: scale(2.5);
    transform-origin: center;
}

.home-page .safety-content { min-width: 0; }

.home-page .safety-content h2 {
    color: var(--h-ink);
    font-size: clamp(1.5rem, 2.3vw, 2.05rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.028em;
}

.home-page .safety-content > p {
    max-width: 62ch;
    margin-top: 6px;
    color: var(--h-body);
    font-size: .9rem;
    line-height: 1.55;
}

.home-page .safety-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 14px;
}
.home-page .safety-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid rgba(10, 10, 11, .07);
    border-radius: 999px;
    background: #fff;
    color: var(--h-ink);
    font-size: .74rem;
    font-weight: 600;
}
.home-page .safety-trust-badge:nth-child(1) i { color: #1f8a5b; }
.home-page .safety-trust-badge:nth-child(2) i { color: #c9a227; }
.home-page .safety-trust-badge:nth-child(3) i { color: var(--h-orange); }

.home-page .safety-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-page .safety-feature {
    padding: 12px 13px 13px;
    border: 1px solid rgba(10, 10, 11, .06);
    border-radius: var(--h-r-md);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 3px 12px rgba(10, 10, 11, .05);
}

.home-page .safety-feature h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #10827a;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.home-page .safety-feature:nth-child(2) h3 { color: #8a6b12; }
.home-page .safety-feature:nth-child(3) h3 { color: #8a6b12; }
.home-page .safety-feature:nth-child(4) h3 { color: #1f5a70; }
.home-page .safety-feature:nth-child(5) h3 { color: #0f766e; }
.home-page .safety-feature:nth-child(6) h3 { color: #8a6b12; }

.home-page .safety-feature h3 i { font-size: .78rem; flex: none; }

.home-page .safety-feature p {
    color: var(--h-body);
    font-size: .72rem;
    line-height: 1.5;
}

/* ==========================================================================
   8: POPULAR EXPERIENCES
   Image-led cards. Heading left, "See all activities" right.
   ========================================================================== */
.home-page .experiences-section {
    padding: var(--h-section-sm) var(--h-gutter) var(--h-section-sm);
    background: #fff;
}

.home-page .experiences-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.home-page .experiences-head h2 {
    color: var(--h-ink);
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.028em;
}
.home-page .experiences-head p {
    margin-top: 4px;
    color: var(--h-body);
    font-size: .9rem;
}

.home-page .experiences-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8a6b12;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 180ms ease;
}
.home-page .experiences-all:hover { gap: 12px; }

.home-page .experiences-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
}

.home-page .experience-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    border-radius: var(--h-r-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--h-shadow-card);
    transition: transform 200ms cubic-bezier(.22, .8, .3, 1), box-shadow 200ms ease;
}
.home-page .experience-card:hover { transform: translateY(-4px); box-shadow: var(--h-shadow-lift); }
.home-page .experience-card:focus-visible { outline: 3px solid var(--h-orange); outline-offset: 2px; }

.home-page .experience-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(.22, .8, .3, 1);
}
.home-page .experience-card:hover img { transform: scale(1.05); }

.home-page .experience-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 13px 12px;
    color: #fff;
    background: linear-gradient(180deg,
        rgba(10, 10, 11, 0) 0%,
        rgba(10, 10, 11, .55) 30%,
        rgba(10, 10, 11, .90) 62%,
        rgba(10, 10, 11, .94) 100%);
}
.home-page .experience-overlay h3 {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.012em;
}
.home-page .experience-overlay small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .8);
    font-size: .7rem;
}

/* ==========================================================================
   9: COMFORT EXPERIENCE + VIETNAM GUIDE
   Two promotional cards, ~50/50. Both products keep their routes; only the
   presentation is compressed.
   ========================================================================== */
.home-page .promo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    padding: 0 0 var(--h-section-sm);
}
.home-page .promo-section { padding: 0 var(--h-gutter); background: var(--h-cream); }

.home-page .promo-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 168px);
    align-items: stretch;
    gap: 0;
    min-height: 132px;
    border: 1px solid rgba(10, 10, 11, .07);
    border-radius: var(--h-r-xl);
    overflow: hidden;
    background: linear-gradient(120deg, var(--h-cream-2) 0%, #fdfbf6 100%);
    transition: transform 180ms cubic-bezier(.22, .8, .3, 1), box-shadow 200ms ease;
}
.home-page .promo-card:hover { transform: translateY(-3px); box-shadow: var(--h-shadow-card); }
.home-page .promo-card.promo-guide { background: linear-gradient(120deg, var(--h-sky) 0%, #ffffff 100%); }

.home-page .promo-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 15px 8px 15px 16px;
}

.home-page .promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--h-pink-ink), #8a6b12);
    color: #fff;
    font-size: .78rem;
}
.home-page .promo-guide .promo-icon { background: linear-gradient(135deg, #1d1d1f, #8a6b12); }

.home-page .promo-body h2 {
    color: var(--h-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
    text-wrap: wrap;
}
.home-page .promo-body p {
    color: var(--h-body);
    font-size: .76rem;
    line-height: 1.5;
}

.home-page .promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 8px;
}

.home-page .promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(10, 10, 11, .1);
    color: var(--h-ink);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 150ms ease;
}
.home-page .promo-btn:hover { transform: translateY(-1px); border-color: var(--h-orange); color: #8a6b12; }
.home-page .promo-btn.is-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--h-body);
    padding-inline: 4px;
}
.home-page .promo-btn.is-ghost:hover { color: var(--h-ink); background: rgba(255, 255, 255, .7); }

.home-page .promo-media {
    position: relative;
    overflow: hidden;
    border-radius: 0 var(--h-r-xl) var(--h-r-xl) 0;
    background: #0f1730;
}
.home-page .promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Comfort has no photograph of its own, and inventing one would misrepresent
   a care product. The existing line-art scene from the Comfort story is used
   instead, brand artwork rather than stock. */
.home-page .promo-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 0 var(--h-r-xl) var(--h-r-xl) 0;
    background: linear-gradient(150deg, #ffe9d2 0%, #ffd7e6 100%);
}
.home-page .promo-art svg { width: 100%; height: auto; display: block; }
.home-page .promo-art svg [data-draw] {
    fill: none;
    stroke: #7a3b6a;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.home-page .promo-art svg .cx-accent { stroke: #d1477a; }
.home-page .promo-art svg .cx-accent-2 { stroke: #2f6fb8; }
.home-page .promo-art svg .cx-fine { stroke-width: 1.7; }
.home-page .promo-art svg .cx-soft { stroke: rgba(31, 90, 112, .42); }

/* ==========================================================================
   10: FINAL CTA
   Short but memorable: the city at night under a warm sunset wash.
   ========================================================================== */
.home-page .cta-section {
    position: relative;
    padding: 0 var(--h-gutter) var(--h-section);
    background: #fff;
}

.home-page .cta-banner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 46px);
    border-radius: var(--h-r-2xl);
    overflow: hidden;
    box-shadow: 0 20px 46px rgba(10, 10, 11, .22);
}

.home-page .cta-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/static/images/ending.jpg');
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
}

.home-page .cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(10, 10, 11, .86) 0%,
        rgba(10, 10, 11, .72) 46%,
        rgba(10, 10, 11, .5) 100%);
}

.home-page .cta-content { position: relative; z-index: 2; min-width: 0; }

.home-page .cta-content h2 {
    max-width: 19ch;
    color: #fff;
    font-size: clamp(1.4rem, 2.3vw, 2.05rem);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.028em;
}
.home-page .cta-content p {
    max-width: 38ch;
    margin-top: 6px;
    color: rgba(255, 255, 255, .94);
    font-size: .9rem;
    line-height: 1.5;
}

.home-page .cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.home-page .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: transform 160ms cubic-bezier(.22, .8, .3, 1), gap 180ms ease;
}
.home-page .cta-btn:hover { transform: translateY(-2px); gap: 14px; }

.home-page .cta-plan {
    display: inline-block;
    margin-top: 10px;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.home-page .cta-plan:hover { color: #fff; }

/* ==========================================================================
   ENTRANCE
   The hero arrives composed rather than popping in. Opacity and transform
   only, and the whole thing is disabled under prefers-reduced-motion.
   ========================================================================== */
.home-page .hero-copy > *,
.home-page .hero-media,
.home-page .hero-strip > * {
    animation: homeRise 620ms cubic-bezier(.22, .8, .3, 1) both;
}
.home-page .hero-copy > h1 { animation-delay: 60ms; }
.home-page .hero-copy > .hero-subtitle { animation-delay: 140ms; }
.home-page .hero-copy > .hero-btns { animation-delay: 220ms; }
.home-page .hero-copy > .hero-proof { animation-delay: 300ms; }
.home-page .hero-media { animation-delay: 200ms; }
.home-page .hero-strip > .svc { animation-delay: 360ms; }
.home-page .hero-strip > .hb-plan { animation-delay: 420ms; }

@keyframes homeRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   PHONE-ONLY ELEMENTS

   welcome.html carries a few elements that exist purely for the mobile
   composition. They are switched OFF here, outside the responsive layer, so
   that "hidden" is their default state and the desktop design never has to
   rely on a media query firing to stay correct.
   ========================================================================== */
.home-page .fb-phone,
.home-page .m-status,
.home-page .m-tabbar,
.home-page .hero-mobile-break { display: none; }

/* ==========================================================================
   RESPONSIVE

   Three regimes, and they do not overlap:

     >= 1081px   the approved desktop composition, defined above. Nothing in
                 this section touches it.
     768–1080px  tablet. The same rules as before, now explicitly fenced with
                 min-width so they cannot leak onto a phone.
     <= 767px    phone. NOT a stack. The phone keeps the desktop composition,
                 text beside video, phone beside Buddies, stats in one strip,
                 steps in one row, compressed to fit. Sizes are clamp()ed
                 against the viewport so the same arrangement holds from 320px
                 to 767px instead of collapsing at one magic width.
   ========================================================================== */

/* --- small desktop / large tablet -------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {
    .home-page .market-shell { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .home-page .featured-grid { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
    .home-page .safety-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .featured-rail { padding-right: 40px; }
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 768px) {
    .home-page .hero-content { grid-template-columns: minmax(0, 1fr); }
    .home-page .hero .hero-subtitle { max-width: 52ch; }
    .home-page .hero-strip { grid-template-columns: minmax(0, 1fr); }

    .home-page .market-shell { grid-template-columns: minmax(0, 1fr); }
    .home-page .market-phone { order: 2; }
    .home-page .market-main { order: 1; }
    .home-page .featured-grid { grid-auto-columns: calc((100% - 14px) / 2); }

    .home-page .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .why-card:nth-child(5),
    .home-page .why-card:nth-child(6) { grid-column: auto; }

    .home-page .safety-shell { grid-template-columns: minmax(0, 1fr); }
    .home-page .safety-visual { order: -1; }
    .home-page .safety-lottie { width: min(160px, 60%); }

    .home-page .experiences-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .promo-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   DESKTOP GROUND, matched to the phone
   ==========================================================================
   The phone's homepage reads well because it sits on warm cream with white
   cards on top: the card edge is what separates one segment from the next.
   The desktop composition was built the other way round, a dark cinematic
   hero over a white page, and on a laptop that produced the three problems
   reported: a white card on a white page has no edge at all (1.00:1), so
   sections ran together and panels looked washed out.

   This block puts the desktop on the phone's ground. It is scoped to
   `min-width: 768px` so it starts exactly where the phone layer stops:
   the two never overlap, and nothing below 768px is touched.

   Layout, spacing, order and behaviour are untouched. Colour only.
   ========================================================================== */
@media (min-width: 768px) {

    /* --- the hero ------------------------------------------------------
       Cream, like the phone. The photo stays, re-treated: it was darkened
       to brightness(.34) to hold white text, which on a light ground would
       read as a muddy grey rectangle. Now it is lifted and faded instead,
       so it keeps its role as atmosphere behind dark words.              */
    .home-page .hero { background: var(--h-cream); }

    .home-page .hero-bg-img {
        filter: brightness(1.06) saturate(.62) contrast(.98);
        opacity: .20;
    }

    /* The dark scrims inverted: a cream veil, strongest behind the copy on
       the left, so the headline keeps a clean ground to sit on. */
    .home-page .hero::before {
        background:
            linear-gradient(180deg,
                rgba(253, 251, 246, .90) 0%,
                rgba(253, 251, 246, .78) 34%,
                rgba(253, 251, 246, .80) 72%,
                rgba(253, 251, 246, .94) 100%),
            radial-gradient(90% 70% at 6% 22%,
                rgba(253, 251, 246, .62) 0%, rgba(253, 251, 246, 0) 68%);
    }

    /* The hero used to fade INTO the cream page below it. Both grounds are
       cream now, so the fade has nothing to do and is switched off. */
    .home-page .hero::after { content: none; }

    /* --- hero type: white becomes ink ---------------------------------- */
    .home-page .hero h1 { color: var(--h-ink); }               /* 16.3:1 */

    /* "new city" kept its gradient, but the light gold members of the ramp
       vanish on cream. Same gradient, the readable members of the ramp. */
    .home-page .hero h1 span {
        background: linear-gradient(100deg, #c9a227 0%, #8a6b12 70%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #8a6b12;
    }

    .home-page .hero .hero-subtitle { color: var(--h-body); }  /*  4.9:1 */
    .home-page .hero-proof-text     { color: var(--h-body); }
    .home-page .hero-proof-text strong { color: var(--h-ink); }

    /* --- the outline button -------------------------------------------
       It was a white glass pill made to sit on the dark hero; on cream it
       was invisible. It becomes a bordered ink pill, the same shape.     */
    .home-page .btn-outline {
        color: var(--h-ink);
        background: rgba(255, 255, 255, .82);
        border: 1.5px solid rgba(10, 10, 11, .18);
    }
    .home-page .btn-outline:hover {
        background: #fff;
        border-color: rgba(10, 10, 11, .34);
    }

    /* The avatar row was ringed in white to read on the dark hero. */
    .home-page .hero-proof-avatars img { border-color: #fff; }

    /* --- separation, the actual readability fix ------------------------
       White cards on the cream ground now carry a visible edge. This is
       what stops segments blending and panels looking washed out. It is
       the phone's own card treatment, applied at desktop widths.         */
    .home-page .svc,
    .home-page .hb-plan,
    .home-page .featured-card,
    .home-page .stat-card,
    .home-page .why-card,
    .home-page .exp-card {
        background: var(--h-card, #fff);
        border: 1px solid var(--h-hairline);
        box-shadow: var(--h-shadow-card);
    }
}

/* ==========================================================================
   PHONE, the approved mobile composition

   This is NOT the desktop composition rescaled. The phone has its own
   arrangement, its own ground (warm cream rather than the dark cinematic
   hero) and its own running order, matching the approved mobile design.

   The desktop composition above is untouched: everything here lives inside
   `max-width: 767px`, and the elements this layer introduces are hidden by
   default rather than switched off for desktop.

   Sections the phone does not show: How It Works, How We Keep You Safe, the
   Comfort promo, the phone mockup, the stats grid, are HIDDEN, never
   removed. They remain in the markup for desktop and on their own routes,
   reachable from the menu and the bottom navigation.

   Spacing follows the approved rhythm: major sections 30–42px apart, cards
   24–32px, card padding 18–22px. Nothing on this page is allowed to feel
   packed, and nothing is shrunk to make more fit on one screen, the phone
   scrolls.
   ========================================================================== */
@media (max-width: 767px) {
    .home-page {
        /* Mobile-only scale + palette. Desktop tokens are re-declared, not
           edited, so nothing here can reach a wider viewport. */
        --h-gutter:   clamp(16px, 4.6vw, 22px);
        --m-bg:       #fdfbf6;
        --m-ink:      #1d1d1f;
        /* Darker than the desktop's body tone on purpose, the user asked
           for the dark-ink words to read blacker on the phone. */
        --m-body:     #6e6e73;
        --m-orange:   #8a6b12;
        --m-purple:   #1f5a70;
        --m-card:     #fff;
        --m-line:     rgba(10, 10, 11, .10);
        --m-green:    #1f8a5b;

        --m-section:  34px;   /* major section separation */
        --m-pad:      18px;   /* card internal padding     */

        --h-r-sm:  10px;
        --h-r-md:  14px;
        --h-r-lg:  18px;
        --h-r-xl:  20px;
        --h-r-2xl: 22px;

        background: var(--m-bg);
        color: var(--m-body);
        font-family: var(--font-body);
        /* Nothing may push the composition past the viewport. */
        overflow-x: hidden;
    }

    .home-page h1,
    .home-page h2,
    .home-page h3,
    .home-page h4,
    .home-page h5 {
        font-family: var(--font-display);
    }

    /* The shared navbar is outside .home-page in base.html. :has() keeps these
       refinements exclusive to the phone homepage while leaving every other
       route, tablet width and desktop pixel on the shared rules. */
    body:has(.home-page) .navbar,
    body:has(.home-page) .navbar.scrolled {
        min-height: calc(66px + env(safe-area-inset-top));
        padding: calc(10px + env(safe-area-inset-top))
                 max(16px, env(safe-area-inset-right)) 10px
                 max(16px, env(safe-area-inset-left));
        border-bottom-color: rgba(10, 10, 11, .06);
        background: rgba(253, 251, 246, .95);
        box-shadow: 0 7px 24px rgba(29, 29, 31, .05);
    }
    body:has(.home-page) .nav-logo { height: 36px; }
    body:has(.home-page) .lang-btn {
        min-height: 42px;
        border-color: rgba(10, 10, 11, .08);
        border-radius: 13px;
        background: rgba(255, 255, 255, .76);
        color: #1d1d1f;
    }
    body:has(.home-page) .hamburger {
        min-width: 42px;
        min-height: 42px;
    }

    /* ---- what the phone does not show -------------------------------- */
    /* Hidden, not deleted. Each still has its own page and its desktop
       block; the mobile homepage simply does not carry all of it. */
    .home-page .market-phone,
    .home-page .stats-grid,
    .home-page .how-section,
    .home-page .safety-section,
    .home-page .promo-comfort,
    .home-page .featured-next,
    .home-page .featured-cta,
    .home-page .fb-wide { display: none !important; }

    /* The desktop's bottom fade belongs to its dark cinematic composition. */
    .home-page .hero::after { content: none; }

    /* The phone-only elements come back on.

       `:not([hidden])` is load-bearing, not decoration. `[hidden]` is a UA
       rule with the lowest precedence there is, so a bare `display: flex`
       here would silently beat it and the availability strip would paint
       before it has a Buddy to name, the same defect that once left an
       approval control clickable on the request screens. */
    .home-page .fb-phone { display: inline; }
    .home-page .m-status:not([hidden]) { display: flex; }
    .home-page .m-tabbar { display: grid; }

    /* ---- 1 · hero ----------------------------------------------------- */
    /* The fixed header gets a calm 28px gap before the first line. */
    .home-page .hero {
        padding: calc(94px + env(safe-area-inset-top)) var(--h-gutter) 30px;
        background: var(--m-bg);
    }
    /* Mobile-only Saigon/people plate. Its built-in cream negative space
       carries the copy on the left while the human story remains on the
       right, as in the approved reference. */
    .home-page .hero-bg-img {
        /* The version is intentional: production previously cached a 404 for
           the first upload, so every release of this binary gets a new URL. */
        background-image: url('/static/images/background/mobile-home-hero-v2.jpg?v=20260902-mobile-hero-3');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top;
        filter: none;
    }
    /* A soft cream veil protects the copy edge without hiding the people. */
    .home-page .hero::before {
        inset: 0 0 auto;
        height: min(515px, 132vw);
        background: linear-gradient(90deg,
            rgba(253, 251, 246, .98) 0%,
            rgba(253, 251, 246, .98) 50%,
            rgba(253, 251, 246, .94) 64%,
            rgba(253, 251, 246, .55) 76%,
            rgba(253, 251, 246, 0) 100%);
        opacity: 1;
    }
    .home-page .hero-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    /* .hero-media holds the video, which the approved order places under the
       trust line rather than beside the copy. `display: contents` promotes
       the copy's children into this grid so all five can be ordered against
       each other without duplicating any markup. */
    .home-page .hero-copy { display: contents; }
    .home-page .hero-copy > h1          { order: 1; }
    .home-page .hero-copy > .hero-subtitle { order: 2; }
    .home-page .hero-copy > .hero-btns  { order: 3; }
    .home-page .hero-copy > .hero-proof { order: 4; }
    .home-page .hero-media              { order: 5; }

    .home-page .hero h1 {
        max-width: 7.8em;
        margin-bottom: 13px;
        color: var(--m-ink);
        font-size: clamp(2.12rem, 9.25vw, 2.56rem);
        font-weight: 600;
        line-height: 1.02;
        letter-spacing: -.045em;
        text-shadow: none;
    }
    .home-page .hero h1 span {
        background: linear-gradient(100deg, #c9a227 0%, #8a6b12 70%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #8a6b12;
    }
    .home-page .hero h1 .hero-desktop-break { display: none; }
    .home-page .hero h1 .hero-mobile-break { display: initial; }
    .home-page .hero .hero-subtitle {
        /* Keep the subtitle inside the calm cream side of the photograph,
           matching the reference and preserving contrast on every phone. */
        max-width: 18.5em;
        margin-bottom: 16px;
        color: #303d52;
        font-size: .88rem;
        font-weight: 500;
        line-height: 1.48;
    }

    /* Two actions side by side, as approved. They split the row evenly, wrap
       rather than overflow if a translation runs long, and `stretch` keeps
       them the same height when one of them does. */
    .home-page .hero-btns {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 15px;
    }
    .home-page .btn-primary,
    .home-page .btn-outline {
        /* mobile-reference-cta-v2: compact, left-aligned actions */
        flex: 0 0 auto;
        min-width: 0;
        min-height: 44px;
        gap: 6px;
        padding: 10px 8px;
        border-radius: 12px;
        font-size: .8rem;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }
    .home-page .btn-primary {
        width: 128px;
        background: var(--m-orange);
        box-shadow: 0 7px 18px rgba(201, 162, 39, .24);
    }
    /* On cream the glass outline reads as nothing at all, so the secondary
       action becomes the planner purple the approved design gives it. */
    .home-page .btn-outline {
        width: 132px;
        border: 1px solid rgba(31, 90, 112, .20);
        background: rgba(245, 245, 247, .94);
        color: #22385a;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 5px 14px rgba(10, 10, 11, .08);
    }

    /* ---- 2 · trust line ----------------------------------------------- */
    .home-page .hero-proof {
        gap: 8px;
        align-items: center;
        margin-bottom: 22px;
    }
    .home-page .hero-proof-avatars img {
        width: 34px;
        height: 34px;
        border-color: var(--m-bg);
        box-shadow: 0 2px 7px rgba(10, 10, 11, .10);
    }
    .home-page .hero-proof-avatars img + img { margin-left: -9px; }
    .home-page .hero-proof-text { color: #526077; font-size: .75rem; }
    .home-page .hero-proof-text strong { color: var(--m-ink); }

    /* ---- 3 · video ---------------------------------------------------- */
    /* Its own segment, with real air on both sides. Same element, same
       controller, same file, only the frame changes.

       THE PLATE. On the phone the hero ground is cream, so the window used
       to float in a pale void. .hero-media now sets it on a slim white
       plate, tinted the way the page already is: a warm peach corner
       (the button orange) and a lavender corner (the headline purple),
       both at whisper strength, on a hairline. Beneath the plate a blurred
       bloom in the same two tints lifts it off the cream. The plate is only
       10px wider than the window on each side, so the video keeps the width
       it had. Paint only, nothing animates. */
    .home-page .hero-media {
        position: relative;
        isolation: isolate;
        margin: 0 -4px 26px;
        padding: 10px;
    }
    .home-page .hero-media::before,
    .home-page .hero-media::after {
        content: '';
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }
    .home-page .hero-media::before {
        inset: 0;
        border-radius: 22px;
        background:
            radial-gradient(70% 60% at 0% 0%, rgba(201, 162, 39, .13), transparent 70%),
            radial-gradient(70% 60% at 100% 100%, rgba(31, 90, 112, .16), transparent 70%),
            linear-gradient(180deg, #fff 0%, #fdfbf6 100%);
        border: 1px solid rgba(10, 10, 11, .10);
        box-shadow: inset 0 1px 0 #fff;
    }
    .home-page .hero-media::after {
        inset: 8px -2px -10px;
        border-radius: 26px;
        background: linear-gradient(120deg,
            rgba(201, 162, 39, .28) 0%,
            rgba(126, 197, 224, .20) 50%,
            rgba(31, 90, 112, .30) 100%);
        filter: blur(18px);
        opacity: .9;
    }
    .home-page .hero-video-block {
        aspect-ratio: 16 / 9;
        border-radius: 15px;
        outline: 0;
        box-shadow: 0 8px 22px rgba(10, 10, 11, .16);
    }
    .home-page .hero-video-frame {
        --hv-radius: 15px;
        --hv-track: rgba(10, 10, 11, .12);
    }
    .home-page .hero-video-frame::after { opacity: .45; }
    .home-page .hero-video-frame.is-playing::after { opacity: .25; }
    /* The approved design puts a white disc with an orange triangle at the
       centre of the frame, captioned rather than labelled. */
    .home-page .hero-video-start {
        gap: 10px;
        min-height: 46px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #fff;
        font-size: .95rem;
        font-weight: 600;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    }
    .home-page .hero-video-start i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #fff;
        color: var(--m-orange);
        font-size: .95rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    }
    .home-page .hero-sound,
    .home-page .hero-playback { width: 40px; height: 40px; bottom: 10px; }
    .home-page .hero-playback { left: 10px; }
    .home-page .hero-sound { right: 10px; }

    /* ---- 4 · services carousel ---------------------------------------- */
    .home-page .hero-strip {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--m-section);
        margin-top: 0;
    }
    /* On the phone the hero inverts to a light ground, so the panel stops
       being a dark glass card: the heading sits on the page itself and the
       slide becomes a white card, the same one the rest of the phone
       composition uses. Only the slide is a card, never both, or the box
       reads as a card inside a card. */
    .home-page .svc {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
    }
    .home-page .svc::before { display: none; }

    .home-page .svc-head { margin-bottom: 11px; }
    .home-page .svc-head h2 {
        color: var(--m-ink);
        text-shadow: none;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -.015em;
    }
    .home-page .svc-count { color: var(--m-body); }
    .home-page .svc-arrow {
        width: 30px;
        height: 30px;
        border: 1px solid var(--m-line);
        background: var(--m-card);
        color: var(--m-ink);
        box-shadow: 0 2px 8px rgba(10, 10, 11, .05);
    }
    .home-page .svc-arrow:hover { background: #fff; color: var(--m-ink); }

    .home-page .svc-slide {
        min-height: 92px;
        padding: 10px;
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-md);
        background: var(--m-card);
        color: var(--m-ink);
        box-shadow: 0 3px 10px rgba(10, 10, 11, .055);
    }
    .home-page .svc-slide:hover {
        background: #fff;
        box-shadow: 0 6px 18px rgba(10, 10, 11, .08);
    }
    .home-page .svc-name { color: var(--m-ink); font-size: 1rem; }
    .home-page .svc-desc { color: var(--m-body); font-size: .78rem; }
    /* On the dark hero the kicker colour carried itself; on white the pale
       accents (jade, sky, gold) would sit under 4.5:1, so the label goes to
       the body ink and the accent stays on the icon and the arrow chip,
       where it is decoration rather than the only carrier of meaning. */
    .home-page .svc-kicker { color: var(--m-body); }
    .home-page .svc-kicker i { color: var(--m-orange); }
    .home-page .svc-go {
        background: rgba(10, 10, 11, .05);
        color: var(--m-ink);
    }
    .home-page .svc-slide:hover .svc-go {
        background: var(--m-orange);
        color: #fff;
    }
    .home-page .svc-dot { background: rgba(10, 10, 11, .18); }
    .home-page .svc-dot[aria-selected="true"] { background: var(--m-orange); }
    .home-page .svc-dot:hover { background: rgba(10, 10, 11, .34); }

    /* ---- 5 · Plan my Vietnam ------------------------------------------ */
    /* The desktop card's design, carried over as approved: dusk photograph
       across the whole card, gold kicker, white promise, cream pill. */
    .home-page .hb-plan {
        gap: 9px;
        min-height: 168px;
        padding: 20px;
        border: 1px solid rgba(241, 222, 156, .28);
        border-radius: 0;
        background: #14172e;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .1),
            0 4px 10px rgba(10, 10, 11, .28),
            0 16px 36px rgba(10, 10, 11, .38);
    }
    /* Full-bleed rather than right-anchored: the darkening gradient lives in
       the same background stack, heaviest at the left where the words sit. */
    .home-page .hb-plan-scene {
        inset: 0;
        opacity: 1;
        /* The scrim is shaped like light, not like a grey wash: deep navy
           where the words sit, nearly clear over the towers, a faint warm
           lift low on the right where the photograph's own dusk glow is. */
        background-image:
            radial-gradient(135% 150% at 50% 42%,
                transparent 52%, rgba(10, 10, 11, .42) 100%),
            linear-gradient(90deg,
                rgba(10, 10, 11, .82) 0%,
                rgba(10, 10, 11, .28) 55%,
                rgba(10, 10, 11, .4) 100%),
            radial-gradient(70% 90% at 88% 100%,
                rgba(201, 162, 39, .2), transparent 65%),
            url('/static/images/background/hero-2560.jpg');
        background-image:
            radial-gradient(135% 150% at 50% 42%,
                transparent 52%, rgba(10, 10, 11, .42) 100%),
            linear-gradient(90deg,
                rgba(10, 10, 11, .82) 0%,
                rgba(10, 10, 11, .28) 55%,
                rgba(10, 10, 11, .4) 100%),
            radial-gradient(70% 90% at 88% 100%,
                rgba(201, 162, 39, .2), transparent 65%),
            image-set(url('/static/images/background/hero-2560.jpg') 1x,
                      url('/static/images/background/hero-3840.jpg') 2x);
        background-size: cover;
        background-position: center 34%;
        filter: saturate(1.2) contrast(1.1) brightness(1.04);
        -webkit-mask-image: none;
        mask-image: none;
        transform-origin: center;
        will-change: transform;
        animation: hbPlanDrift 26s ease-in-out infinite alternate;
    }
    .home-page .hb-plan-kicker {
        gap: 7px;
        align-self: flex-start;
        padding: 5px 11px;
        border: 1px solid rgba(241, 222, 156, .3);
        background: rgba(10, 10, 11, .5);
        color: #f1de9c;
        font-size: .72rem;
        letter-spacing: .09em;
    }
    .home-page .hb-plan-title {
        max-width: 22ch;
        color: #fff;
        font-size: 1.16rem;
        font-weight: 600;
        letter-spacing: -.012em;
        line-height: 1.26;
        text-wrap: balance;
        text-shadow: 0 1px 2px rgba(10, 10, 11, .7), 0 5px 18px rgba(10, 10, 11, .45);
    }
    .home-page .hb-plan-foot {
        gap: 12px;
        margin-top: 6px;
    }
    .home-page .hb-plan-from {
        gap: 5px;
        padding: 6px 12px;
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(10, 10, 11, .48);
        color: rgba(255, 255, 255, .88);
        font-size: .78rem;
    }
    .home-page .hb-plan-from b { color: #f1de9c; font-size: .9rem; }
    .home-page .hb-plan-go {
        min-height: 44px;
        padding: 10px 19px;
        background: linear-gradient(160deg, #fbf3d6 0%, #ffe0b4 55%, #f1de9c 100%);
        color: #161617;
        font-size: .84rem;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .7),
            0 8px 20px -6px rgba(10, 10, 11, .5);
    }

    /* ---- 6 · Book this vibe ------------------------------------------- */
    .home-page .market {
        padding: var(--m-section) var(--h-gutter) 0;
        background: none;
    }
    .home-page .market-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .home-page .featured-buddies-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 10px;
        margin-bottom: 14px;
    }
    .home-page .featured-buddies-header .kicker { display: none; }
    .home-page .featured-buddies-header h2 {
        grid-column: 1;
        color: var(--m-ink);
        font-size: 1.05rem;
        letter-spacing: -.015em;
    }
    .home-page .featured-buddies-header p {
        grid-column: 1;
        margin-top: 3px;
        color: var(--m-body);
        font-size: .78rem;
    }
    .home-page .featured-buddies-header p .fa-star { color: #c9a227; }
    .home-page .featured-all {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        align-self: center;
        min-height: 40px;
        color: var(--m-orange);
        font-size: .78rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Four across, as approved. Still the same rail element, so nothing is
       dropped, anything beyond the fourth is a swipe away. */
    .home-page .featured-rail { padding-right: 0; }
    .home-page .featured-grid {
        grid-auto-columns: calc((100% - 3 * 8px) / 4);
        gap: 8px;
        padding-bottom: 0;
    }
    .home-page .featured-card {
        border: 0;
        border-radius: var(--h-r-md);
        background: none;
        box-shadow: none;
    }
    /* The approved card is one photograph with the name over it, not a photo
       with a body beneath. The body's fields move on top of the image. */
    .home-page .featured-card-photo {
        aspect-ratio: 3 / 3.9;
        border-radius: var(--h-r-md);
    }
    .home-page .featured-card-photo .fc-status { display: none; }
    .home-page .featured-card-photo::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 62%;
        background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, .82) 78%);
    }
    .home-page .featured-card-body {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 6px 7px 8px;
    }
    .home-page .featured-card-body h3 { color: #fff; font-size: .72rem; }
    .home-page .featured-card-body .fc-bio,
    .home-page .featured-card-body .fc-tag:not(.service),
    .home-page .fc-btn-view,
    .home-page .fc-btn-book { display: none; }
    .home-page .featured-card-body .fc-tags { gap: 0; margin: 1px 0 0; }
    .home-page .featured-card-body .fc-tag.service {
        padding: 0;
        background: none;
        color: rgba(255, 255, 255, .82);
        font-size: .64rem;
        font-weight: 600;
    }
    /* The photo is the card, so the card has to be the positioning context
       for the body that now sits on top of it. */
    .home-page .featured-card { position: relative; }

    /* ---- 7 · availability strip --------------------------------------- */
    .home-page .m-status {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
        padding: 13px 14px;
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-lg);
        background: #fbf3d6;
    }
    /* The name and its pill need the width more than the button does, so the
       text column takes the slack and the button stays its content size. */
    .home-page .m-status-main { flex: 1 1 auto; min-width: 0; }
    .home-page .m-status-top {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        color: var(--m-ink);
        font-size: .82rem;
        font-weight: 600;
    }
    .home-page .m-status-dot {
        width: 8px;
        height: 8px;
        flex: none;
        border-radius: 50%;
        background: #1f8a5b;
    }
    .home-page .m-status-pill {
        padding: 3px 9px;
        border-radius: 999px;
        background: #e6f4ed;
        color: var(--m-green);
        font-size: .68rem;
        font-weight: 600;
    }
    .home-page .m-status-sub {
        margin-top: 4px;
        color: var(--m-body);
        font-size: .76rem;
    }
    .home-page .m-status-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: none;
        min-height: 44px;
        padding: 10px 11px;
        border-radius: var(--h-r-md);
        background: var(--m-orange);
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 5px 14px rgba(201, 162, 39, .24);
    }

    .home-page .stats-bar { padding: 12px var(--h-gutter) 0; background: none; }
    .home-page .stats-note {
        margin: 0;
        color: var(--m-body);
        font-size: .72rem;
        text-align: center;
    }

    /* ---- 8 · why choose us -------------------------------------------- */
    /* The phone carries the first three benefits as compact tiles. The other
       three stay in the markup for desktop. */
    .home-page .why-section { padding: var(--m-section) var(--h-gutter) 0; background: none; }
    .home-page .why-shell {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .home-page .why-section .section-title {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--m-ink);
        font-size: 1.05rem;
        text-align: left;
    }
    /* The heading is left-aligned on a phone, so its supporting line has to
       be too, centred under a left-set title reads as a mistake. */
    .home-page .section-subtitle {
        max-width: none;
        margin: 5px 0 0;
        color: var(--m-body);
        font-size: .82rem;
        line-height: 1.45;
        text-align: left;
    }
    .home-page .why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }
    .home-page .why-card:nth-child(n + 4) { display: none; }
    .home-page .why-card:nth-child(5),
    .home-page .why-card:nth-child(6) { grid-column: auto; }
    .home-page .why-card {
        padding: 12px 9px 13px;
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-md);
        background: var(--m-card);
        box-shadow: 0 2px 8px rgba(10, 10, 11, .05);
    }
    .home-page .why-icon {
        width: 26px;
        height: 26px;
        margin-bottom: 8px;
        border-radius: 8px;
        font-size: .64rem;
    }
    .home-page .why-card h3 {
        margin-bottom: 0;
        color: var(--m-ink);
        font-size: .74rem;
        line-height: 1.25;
    }
    /* The tile is the benefit's name, not its explanation. */
    .home-page .why-card p { display: none; }

    /* ---- 9 · popular experiences -------------------------------------- */
    .home-page .experiences-section { padding: var(--m-section) var(--h-gutter) 0; background: none; }
    .home-page .experiences-head {
        display: block;
        margin-bottom: 14px;
    }
    .home-page .experiences-head h2 { color: var(--m-ink); font-size: 1.05rem; }
    .home-page .experiences-head p { margin-top: 3px; color: var(--m-body); font-size: .78rem; }
    .home-page .experiences-all { min-height: 40px; font-size: .78rem; }
    .home-page .experiences-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    /* The approved card is a tile with the title and its line beneath, not a
       photograph with an overlay. */
    .home-page .experience-card {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        /* Four tiles in a row read as a set only if they share a baseline;
           the longest label would otherwise make one card taller. */
        height: 100%;
        padding: 10px 8px 11px;
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-md);
        background: var(--m-card);
        box-shadow: 0 2px 8px rgba(10, 10, 11, .05);
    }
    .home-page .experience-card img {
        width: 34px;
        height: 34px;
        flex: none;
        border-radius: 9px;
        object-fit: cover;
    }
    .home-page .experience-overlay {
        position: static;
        padding: 0;
        background: none;
        color: inherit;
    }
    .home-page .experience-overlay h3 { color: var(--m-ink); font-size: .72rem; line-height: 1.25; }
    .home-page .experience-overlay small {
        margin-top: 3px;
        color: var(--m-body);
        font-size: .64rem;
        line-height: 1.3;
    }

    /* ---- 10 · Vietnam Guide ------------------------------------------- */
    .home-page .promo-section { padding: var(--m-section) var(--h-gutter) 0; background: none; }
    .home-page .promo-pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }
    .home-page .promo-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 116px);
        min-height: 0;
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-lg);
        background: #fbf3d6;
    }
    .home-page .promo-guide { background: #fbf3d6; }
    .home-page .promo-icon { display: none; }
    .home-page .promo-body { gap: 6px; padding: var(--m-pad) 10px var(--m-pad) var(--m-pad); }
    .home-page .promo-body h2 { color: var(--m-ink); font-size: 1rem; }
    .home-page .promo-body p { color: var(--m-body); font-size: .76rem; line-height: 1.45; }
    .home-page .promo-actions { gap: 8px; padding-top: 10px; }
    .home-page .promo-btn {
        min-height: 38px;
        padding: 8px 12px;
        border-radius: var(--h-r-sm);
        border-color: var(--m-line);
        color: var(--m-orange);
        font-size: .72rem;
    }
    .home-page .promo-btn.is-ghost {
        border-color: var(--m-line);
        background: #fff;
        color: var(--m-orange);
        padding-inline: 12px;
    }
    .home-page .promo-media { border-radius: 0 var(--h-r-lg) var(--h-r-lg) 0; }

    /* ---- 11 · final CTA ----------------------------------------------- */
    /* The bar is fixed, and the footer, not this section, is the last thing
       on the page, so the clearance for it belongs to the footer. It is set
       in responsive.css, keyed to the presence of the bar. */
    .home-page .cta-section {
        padding: var(--m-section) var(--h-gutter) var(--m-section);
        background: none;
    }
    .home-page .cta-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: var(--m-pad);
        border: 1px solid var(--m-line);
        border-radius: var(--h-r-lg);
        background: #fbf3d6;
        box-shadow: none;
    }
    /* The night photograph and its warm wash belong to the desktop banner;
       the phone card sits on cream. */
    .home-page .cta-bg-img { display: none; }
    .home-page .cta-banner::before { content: none; }
    .home-page .cta-content h2 {
        max-width: none;
        color: var(--m-ink);
        font-size: 1rem;
        line-height: 1.35;
    }
    .home-page .cta-content p {
        max-width: none;
        margin-top: 6px;
        color: var(--m-body);
        font-size: .8rem;
    }
    .home-page .cta-plan { margin-top: 10px; color: var(--m-orange); font-size: .78rem; }
    .home-page .cta-actions { width: 100%; }
    .home-page .cta-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        background: var(--m-orange);
        color: #fff;
        font-size: .88rem;
        box-shadow: 0 6px 16px rgba(201, 162, 39, .24);
    }

    /* ---- 12 · bottom navigation --------------------------------------- */
    .home-page .m-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        grid-template-columns: repeat(4, 1fr);
        padding: 8px max(6px, env(safe-area-inset-right))
                 calc(6px + env(safe-area-inset-bottom))
                 max(6px, env(safe-area-inset-left));
        border-top: 1px solid var(--m-line);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -6px 20px rgba(10, 10, 11, .06);
    }
    @supports (backdrop-filter: blur(12px)) {
        .home-page .m-tabbar {
            background: rgba(255, 255, 255, .88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
    }
    .home-page .m-tab {
        display: grid;
        gap: 4px;
        justify-items: center;
        min-height: 52px;
        align-content: center;
        color: #86868b;
        font-size: .64rem;
        font-weight: 600;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .home-page .m-tab i { font-size: 1.05rem; }
    .home-page .m-tab.is-active { color: var(--m-orange); }
    .home-page .m-tab:focus-visible { outline: 2px solid var(--m-orange); outline-offset: -2px; }
}

/* --- narrow phones ------------------------------------------------------ */
/* The composition holds to 320px. The services carousel is a snapping row at
   every width already, so it needs no fallback here, only a smaller
   thumbnail so the name and the description keep a readable measure. */
@media (max-width: 360px) {
    .home-page .svc-slide { grid-template-columns: 64px minmax(0, 1fr) 28px; gap: 10px; }
    .home-page .svc-shot { width: 64px; height: 64px; }
    .home-page .svc-name { font-size: .92rem; }
    .home-page .svc-desc { font-size: .74rem; }

    .home-page .experiences-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 40%;
        grid-template-columns: none;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .home-page .experiences-grid::-webkit-scrollbar { display: none; }
    .home-page .experience-card { scroll-snap-align: start; }

    .home-page .featured-grid { grid-auto-columns: calc((100% - 2 * 8px) / 3); }
    .home-page .m-status { flex-direction: column; align-items: stretch; }
    .home-page .m-status-cta { justify-content: center; }
    .home-page .m-tab { font-size: .64rem; }
}

/* ==========================================================================
   REDUCED MOTION
   Everything arrives finished. Nothing here is load-bearing for meaning.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .home-page .how-disc { transition: none; }
    .home-page .how-ring:hover .how-disc { transform: none; }
    .home-page .door,
    .home-page .door::before,
    .home-page .door::after,
    .home-page .door-ico,
    .home-page .door-go { transition: none; animation: none; }
    .home-page .door:hover,
    .home-page .door:active,
    .home-page .door:hover .door-ico,
    .home-page .door:hover .door-go,
    .home-page .door:hover::after { transform: none; }

    .home-page .hero-copy > *,
    .home-page .hero-media,
    .home-page .hero-strip > * { animation: none; }
    .home-page .hero-video-frame { animation: none; }
    /* The carousel sits two levels inside .hero-strip, so the rule above does
       not reach its parts. Smooth scrolling is the carousel's real motion:
       killed here, a slide change becomes an instant jump. The controller
       reads the same preference and stops auto-advancing altogether, so under
       this setting nothing on the panel moves unless the visitor moves it. */
    .home-page .svc-track { scroll-behavior: auto; }
    .home-page .svc-slide,
    .home-page .svc-dot { animation: none; }
    .home-page .featured-card,
    .home-page .experience-card,
    .home-page .promo-card,
    .home-page .why-card,
    .home-page .svc,
    .home-page .svc::before,
    .home-page .svc-slide,
    .home-page .svc-arrow,
    .home-page .svc-go,
    .home-page .svc-dot,
    .home-page .hb-plan,
    .home-page .cta-btn,
    .home-page .featured-cta a,
    .home-page .btn-primary,
    .home-page .btn-outline { transition: none; }
    .home-page .featured-card:hover,
    .home-page .experience-card:hover,
    .home-page .promo-card:hover,
    .home-page .why-card:hover,
    .home-page .svc-slide:hover,
    .home-page .svc-slide:active,
    .home-page .svc-arrow:active,
    .home-page .svc-slide:hover .svc-go,
    .home-page .hb-plan:hover,
    .home-page .cta-btn:hover,
    .home-page .featured-cta a:hover,
    .home-page .btn-primary:hover { transform: none; }
    .home-page .featured-card:hover .featured-card-photo img,
    .home-page .experience-card:hover img { transform: none; }
    .home-page .featured-grid { scroll-behavior: auto; }
    .home-page .featured-card-photo.skel::after { animation: none; }
    .home-page .hb-plan-scene { animation: none; }
    .home-page .home-launch-fill { transition: none; }
}

/* ===========================================================================
   LIQUID GLASS, the two hero actions.

   The same material as the Ask a Local button in base.html (after
   dashersw/liquid-glass-js): blur and saturation from the live backdrop,
   a tint on the ::before layer, the edge refraction from #glassRefract in
   Chromium, a light rim. Last in the file on purpose, so it wins the
   cascade against the phone rules above at equal specificity.

   The tints are the buttons' own colours, kept high enough for the label:
     Find a Buddy   desktop, the flame gradient at .86 over the navy hero;
                    phone, the orange deepened into the flame ink family
                    the desktop button already wears, so white text sits
                    above 4.5:1 on cream instead of 3.5:1 on the flat
                    orange it replaces;
     How it works   desktop, the library's own clear .2 white, which is
                    honest here because the hero is dark; phone, the
                    lavender at .66 with the navy label, at 11:1 on cream
                    and above 5:1 on the darkest part of the photo.
   Engines without backdrop-filter keep the solid buttons above.
   =========================================================================== */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-page .btn-primary,
    .home-page .btn-outline {
        position: relative;
        isolation: isolate;
        overflow: visible;
    }

    /* Icon and label above the glass, so the rim bends the hero behind
       the button and never the words. */
    .home-page .btn-primary > i,
    .home-page .btn-primary > span,
    .home-page .btn-outline > i,
    .home-page .btn-outline > span { position: relative; z-index: 1; }

    .home-page .btn-primary::before,
    .home-page .btn-outline::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        -webkit-backdrop-filter: url(#glassRefract);
        backdrop-filter: url(#glassRefract);
    }

    .home-page .btn-primary {
        background: transparent;
        -webkit-backdrop-filter: blur(8px) saturate(1.4);
        backdrop-filter: blur(8px) saturate(1.4);
        text-shadow: 0 1px 2px rgba(90, 70, 10, .35);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .38),
            inset 0 0 0 1px rgba(255, 255, 255, .2),
            inset 0 -1px 0 rgba(90, 70, 10, .25),
            0 10px 26px rgba(201, 162, 39, .34);
    }
    .home-page .btn-primary::before {
        background: linear-gradient(100deg,
            rgba(201, 162, 39, .86) 0%,
            rgba(201, 162, 39, .86) 52%,
            rgba(201, 162, 39, .86) 100%);
    }
    .home-page .btn-primary:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .5),
            inset 0 0 0 1px rgba(255, 255, 255, .28),
            inset 0 -1px 0 rgba(90, 70, 10, .25),
            0 14px 32px rgba(201, 162, 39, .42);
    }

    .home-page .btn-outline {
        background: transparent;
        border-color: rgba(255, 255, 255, .4);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
        text-shadow: 0 1px 2px rgba(10, 10, 11, .35);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .45),
            inset 0 -1px 0 rgba(10, 10, 11, .18),
            0 8px 24px rgba(10, 10, 11, .18);
    }
    .home-page .btn-outline::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .24) 0%,
            rgba(255, 255, 255, .16) 100%);
    }
    .home-page .btn-outline:hover {
        background: transparent;
        border-color: rgba(255, 255, 255, .6);
    }
    .home-page .btn-outline:hover::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .3) 0%,
            rgba(255, 255, 255, .22) 100%);
    }

    @media (max-width: 767px) {
        .home-page .btn-primary {
            background: transparent;
            text-shadow: 0 1px 2px rgba(90, 70, 10, .3);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .42),
                inset 0 0 0 1px rgba(255, 255, 255, .22),
                inset 0 -1px 0 rgba(90, 70, 10, .22),
                0 7px 18px rgba(201, 162, 39, .24);
        }
        .home-page .btn-primary::before {
            background: linear-gradient(180deg,
                rgba(138, 107, 18, .95) 0%,
                rgba(138, 107, 18, .95) 50%,
                rgba(138, 107, 18, .96) 100%);
        }

        .home-page .btn-outline {
            background: transparent;
            border-color: rgba(31, 90, 112, .28);
            -webkit-backdrop-filter: blur(10px) saturate(1.4);
            backdrop-filter: blur(10px) saturate(1.4);
            text-shadow: none;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .85),
                inset 0 -1px 0 rgba(31, 90, 112, .12),
                0 5px 14px rgba(10, 10, 11, .1);
        }
        .home-page .btn-outline::before,
        .home-page .btn-outline:hover::before {
            background: linear-gradient(180deg,
                rgba(245, 245, 247, .72) 0%,
                rgba(245, 245, 247, .62) 100%);
        }
    }
}

/* The gold hero action inside the liquid glass: a gold tint rather than
   flame, and the label stays dark so it clears 4.5:1 on the gold. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-page .btn-primary {
        color: #1d1d1f;
        text-shadow: none;
    }
    .home-page .btn-primary::before {
        background: linear-gradient(180deg,
            rgba(233, 203, 98, .94) 0%,
            rgba(201, 162, 39, .94) 100%);
    }
    @media (max-width: 767px) {
        .home-page .btn-primary {
            color: #1d1d1f;
            text-shadow: none;
        }
        .home-page .btn-primary::before {
            background: linear-gradient(180deg,
                rgba(233, 203, 98, .96) 0%,
                rgba(201, 162, 39, .96) 100%);
        }
    }
}