/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-6hkh7rohwv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6hkh7rohwv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Which line shows in which state. Blazor puts the state class on the dialog. */
.components-reconnect-first-attempt-visible[b-03adcr2xd7],
.components-reconnect-repeated-attempt-visible[b-03adcr2xd7],
.components-reconnect-failed-visible[b-03adcr2xd7],
.components-pause-visible[b-03adcr2xd7],
.components-resume-failed-visible[b-03adcr2xd7],
.components-rejoining-animation[b-03adcr2xd7] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-paused .components-rejoining-animation[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-03adcr2xd7],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-03adcr2xd7] {
    display: block;
}

/* A pill in the bottom-left corner: no backdrop, nothing blocked, clear of the
   WhatsApp button on the right. Opened with show(), not showModal(). */
#components-reconnect-modal[b-03adcr2xd7] {
    position: fixed;
    inset: auto auto calc(16px + env(safe-area-inset-bottom)) 16px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #10383c;
    color: #F4F1EA;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    z-index: 1000;
    animation: reconnect-in-b-03adcr2xd7 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#components-reconnect-modal[b-03adcr2xd7]::backdrop {
    display: none;
}

@keyframes reconnect-in-b-03adcr2xd7 {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.components-reconnect-container[b-03adcr2xd7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

#components-reconnect-modal p[b-03adcr2xd7] {
    margin: 0;
}

#components-reconnect-modal button[b-03adcr2xd7] {
    border: 0;
    background: #C0633D;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
}

/* A small pulsing dot instead of the framework's large rings. */
.components-rejoining-animation[b-03adcr2xd7] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #BF9765;
    animation: reconnect-pulse-b-03adcr2xd7 1.2s ease-in-out infinite;
}

@keyframes reconnect-pulse-b-03adcr2xd7 {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-03adcr2xd7],
    .components-rejoining-animation[b-03adcr2xd7] {
        animation: none;
    }
}
/* /Components/Pages/Admin/GalleryAdmin.razor.rz.scp.css */
/* ---------- Drop zone ---------- */
.ga-drop[b-v39eydv3l6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    margin-bottom: 24px;
    border: 2px dashed rgba(21, 82, 89, 0.35);
    border-radius: 18px;
    background: rgba(21, 82, 89, 0.04);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .ga-drop:hover[b-v39eydv3l6],
    .ga-drop--over[b-v39eydv3l6] {
        border-color: var(--color-terracotta);
        background: rgba(191, 117, 90, 0.08);
    }

.ga-drop--busy[b-v39eydv3l6] {
    cursor: progress;
    border-style: solid;
}

/* The real file input covers the whole box, so dropping anywhere works. */
.ga-drop[b-v39eydv3l6]  .ga-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ga-drop__icon[b-v39eydv3l6] {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-terracotta);
    box-shadow: var(--shadow-card);
}

.ga-drop__title[b-v39eydv3l6] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-teal);
}

.ga-drop__hint[b-v39eydv3l6] {
    font-size: 0.92rem;
    color: rgba(23, 20, 18, 0.6);
}

.ga-message[b-v39eydv3l6] {
    margin: -8px 0 20px;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(21, 82, 89, 0.08);
    color: var(--color-teal);
    font-weight: 600;
}

/* ---------- Filters ---------- */
.ga-bar[b-v39eydv3l6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.ga-filters[b-v39eydv3l6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ga-filter[b-v39eydv3l6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(23, 20, 18, 0.15);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
}

    .ga-filter span[b-v39eydv3l6] {
        min-width: 22px;
        padding: 1px 7px;
        border-radius: 999px;
        background: rgba(23, 20, 18, 0.07);
        font-size: 0.8rem;
    }

.ga-filter--on[b-v39eydv3l6] {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
}

    .ga-filter--on span[b-v39eydv3l6] {
        background: rgba(255, 255, 255, 0.2);
    }

.ga-help[b-v39eydv3l6] {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(23, 20, 18, 0.6);
}

/* ---------- Photo grid ---------- */
.ga-grid[b-v39eydv3l6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.ga-card[b-v39eydv3l6] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    transition: opacity 0.2s ease;
}

.ga-card__photo[b-v39eydv3l6] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #EFEAE0;
}

    .ga-card__photo img[b-v39eydv3l6] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: filter 0.2s ease;
    }

/* A hidden photo is greyed out, so the grid reads at a glance. */
.ga-card--hidden .ga-card__photo img[b-v39eydv3l6] {
    filter: grayscale(1) opacity(0.45);
}

.ga-card__source[b-v39eydv3l6] {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(11, 50, 55, 0.78);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.ga-card__star[b-v39eydv3l6] {
    position: absolute;
    right: 8px;
    top: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    color: rgba(23, 20, 18, 0.3);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ga-card__star--on[b-v39eydv3l6] {
    background: #E9B86A;
    color: #fff;
}

.ga-card__body[b-v39eydv3l6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 12px 14px 14px;
}

.ga-card__title[b-v39eydv3l6] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--color-ink);
}

.ga-card__from[b-v39eydv3l6] {
    font-size: 0.8rem;
    color: rgba(23, 20, 18, 0.55);
}

/* The one big control: show or hide. */
.ga-toggle[b-v39eydv3l6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px solid rgba(23, 20, 18, 0.18);
    border-radius: 999px;
    background: #F4F1EA;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(23, 20, 18, 0.6);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ga-toggle__dot[b-v39eydv3l6] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(23, 20, 18, 0.3);
}

.ga-toggle--on[b-v39eydv3l6] {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
}

    .ga-toggle--on .ga-toggle__dot[b-v39eydv3l6] {
        background: #7FE0A8;
    }

.ga-card__links[b-v39eydv3l6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

    .ga-card__links a[b-v39eydv3l6] {
        color: var(--color-teal);
    }

.ga-card__delete[b-v39eydv3l6] {
    color: #b3412a !important;
}

@media (max-width: 560px) {
    .ga-grid[b-v39eydv3l6] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ga-drop[b-v39eydv3l6] {
        padding: 28px 16px;
    }
}
/* /Components/Pages/Availability.razor.rz.scp.css */
.plan-hero[b-mbwfoz9tpl] {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-terracotta) 100%);
    padding: var(--space-7) 0;
    color: var(--color-off-white);
}

.plan-hero__inner[b-mbwfoz9tpl] {
    max-width: 720px;
}

.plan-hero__heading h1[b-mbwfoz9tpl] {
    color: var(--color-off-white);
}

.plan-hero__heading p[b-mbwfoz9tpl] {
    color: rgba(244, 241, 234, 0.9);
    font-size: 1.1rem;
    max-width: 560px;
}

.plan-hero .label[b-mbwfoz9tpl] {
    color: var(--color-gold);
}

.availability-page__calendar[b-mbwfoz9tpl] {
    background: rgba(244, 241, 234, 0.08);
    border: 1px solid rgba(244, 241, 234, 0.25);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    max-width: 640px;
    margin: 0 auto;
}

.availability-page__hint[b-mbwfoz9tpl] {
    color: rgba(244, 241, 234, 0.7);
    font-size: 0.88rem;
    margin: var(--space-2) 0 0;
}

.availability-page__note[b-mbwfoz9tpl] {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

    .availability-page__note .waypoint[b-mbwfoz9tpl] {
        display: inline-block;
    }

    .availability-page__note p[b-mbwfoz9tpl] {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

.availability-page__actions[b-mbwfoz9tpl] {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

@media (max-width: 640px) {
    .plan-hero[b-mbwfoz9tpl] {
        padding: var(--space-6) 0;
    }
}

/* ---------- Site-wide redesign ---------- */
.plan-hero[b-mbwfoz9tpl] {
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 36%, #10454B 72%, #0B3237 100%);
    padding: clamp(56px, 7vw, 104px) 0;
}

    .plan-hero__heading h1[b-mbwfoz9tpl] {
        font-size: clamp(2.4rem, 3.4vw + 1rem, 4.4rem);
        line-height: 1.02;
        letter-spacing: -0.02em;
    }

    .plan-hero .label.waypoint[b-mbwfoz9tpl] {
        color: #E3B98A;
    }

    .plan-hero .waypoint[b-mbwfoz9tpl]::after {
        transform: scaleX(1);
    }

.availability-page__calendar[b-mbwfoz9tpl] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px;
}

/* "I can still help": a card with the gold edge used for honest notes. */
.availability-page__note[b-mbwfoz9tpl] {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-5);
    background: #fff;
    border-radius: 18px;
    border-left: 4px solid var(--color-gold);
    box-shadow: var(--shadow-card);
    text-align: left;
}

    .availability-page__note p[b-mbwfoz9tpl] {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .availability-page__note .availability-page__actions[b-mbwfoz9tpl] {
        justify-content: flex-start;
    }
/* /Components/Pages/DestinationDetail.razor.rz.scp.css */
/* ==========================================================================
   Destination page: the place's photograph (or the drawn map) with its name,
   the places inside it, what stands out, when to go, and the routes through.
   ========================================================================== */

/* ---------- Hero ---------- */
.dest-hero[b-9wp8ranooq] {
    min-height: clamp(380px, 48vw, 600px);
    display: flex;
    align-items: flex-end;
    padding: clamp(96px, 10vw, 150px) 0 clamp(56px, 6vw, 88px);
}

[b-9wp8ranooq] .dest-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.dest-hero__shade[b-9wp8ranooq] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(11, 50, 55, 0.2) 0%, rgba(11, 50, 55, 0.5) 45%, rgba(11, 50, 55, 0.9) 100%);
}

.dest-hero__content[b-9wp8ranooq] {
    position: relative;
    z-index: 1;
}

    .dest-hero__content h1[b-9wp8ranooq] {
        max-width: 16ch;
        margin: 0;
        font-size: clamp(2.4rem, 3.6vw + 1rem, 4.6rem);
        line-height: 1.02;
        letter-spacing: -0.02em;
        color: var(--color-off-white);
    }

.dest-hero__lede[b-9wp8ranooq] {
    max-width: 56ch;
    margin: 18px 0 0;
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
    line-height: 1.6;
    color: rgba(244, 241, 234, 0.86);
}

.dest-hero__actions[b-9wp8ranooq] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

    .dest-hero__actions[b-9wp8ranooq]  .btn--email {
        background: rgba(244, 241, 234, 0.12);
        border: 1px solid rgba(244, 241, 234, 0.35);
        color: var(--color-off-white);
    }

    .dest-hero__actions .btn--outline[b-9wp8ranooq] {
        border-color: rgba(244, 241, 234, 0.6);
        color: var(--color-off-white);
    }

        .dest-hero__actions .btn--outline:hover[b-9wp8ranooq] {
            background: var(--color-off-white);
            color: var(--color-teal);
        }

/* ---------- The places around it ---------- */
.dest-context[b-9wp8ranooq] {
    padding: var(--space-4) 0;
    background: #EFEAE0;
    border-bottom: 1px solid rgba(23, 20, 18, 0.06);
}

.dest-context__inner[b-9wp8ranooq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

.dest-context__label[b-9wp8ranooq] {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.dest-context__parent[b-9wp8ranooq] {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: center;
    color: var(--color-teal);
    text-decoration: none;
}

    .dest-context__parent .dest-context__label[b-9wp8ranooq] {
        grid-column: 1 / -1;
    }

.dest-context__name[b-9wp8ranooq] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
}

.dest-context__parent:hover .dest-context__name[b-9wp8ranooq] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dest-context__places[b-9wp8ranooq] {
    flex: 1;
    min-width: 0;
}

.dest-chip-row[b-9wp8ranooq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dest-chip[b-9wp8ranooq] {
    padding: 6px 14px;
    border: 1px solid rgba(21, 82, 89, 0.22);
    border-radius: 999px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .dest-chip:hover[b-9wp8ranooq] {
        background: var(--color-teal);
        border-color: var(--color-teal);
        color: var(--color-off-white);
        text-decoration: none;
    }

/* ---------- What stands out ---------- */
.highlight-list[b-9wp8ranooq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .highlight-list li[b-9wp8ranooq] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px;
        background: #fff;
        border-radius: 14px;
        box-shadow: var(--shadow-card);
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-ink);
    }

    .highlight-list svg[b-9wp8ranooq] {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--color-terracotta);
    }

/* ---------- When to go / from the driver's seat ---------- */
.dest-notes[b-9wp8ranooq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.dest-note[b-9wp8ranooq] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: var(--space-5);
    border-radius: 18px;
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 45%, #0B3237 100%);
    color: var(--color-off-white);
}

    .dest-note[b-9wp8ranooq]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, rgba(244, 241, 234, 0.06) 28px 29px);
    }

.dest-note__icon[b-9wp8ranooq] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    border: 1px solid rgba(244, 241, 234, 0.3);
    border-radius: 50%;
    color: #E3B98A;
}

.dest-note__label[b-9wp8ranooq] {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E3B98A;
}

.dest-note p[b-9wp8ranooq] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.6vw + 0.95rem, 1.3rem);
    line-height: 1.5;
    color: var(--color-off-white);
}

/* ---------- Not found ---------- */
.not-found[b-9wp8ranooq] {
    text-align: center;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.not-found__actions[b-9wp8ranooq] {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

@media (max-width: 720px) {
    .dest-context__inner[b-9wp8ranooq] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Visitor guide: two quick facts, then what's worth seeing beside what's
   good to know.
   ========================================================================== */
.vg[b-9wp8ranooq] {
    scroll-margin-top: 90px;
}

.vg-facts[b-9wp8ranooq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: clamp(28px, 3vw, 40px);
}

.vg-fact[b-9wp8ranooq] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.vg-fact__icon[b-9wp8ranooq] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(191, 117, 90, 0.12);
    color: var(--color-terracotta);
}

.vg-fact__text[b-9wp8ranooq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vg-fact__label[b-9wp8ranooq] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.vg-fact__value[b-9wp8ranooq] {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-ink);
}

.vg-cols[b-9wp8ranooq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.vg-col[b-9wp8ranooq] {
    padding: clamp(22px, 2.6vw, 34px);
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}

/* "Good to know" on teal, so the two read as different kinds of help. */
.vg-col--tips[b-9wp8ranooq] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 45%, #0B3237 100%);
    color: var(--color-off-white);
}

    .vg-col--tips[b-9wp8ranooq]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, rgba(244, 241, 234, 0.06) 28px 29px);
    }

.vg-col__title[b-9wp8ranooq] {
    margin: 0 0 18px;
    font-size: 1.45rem;
    color: var(--color-teal);
}

.vg-col--tips .vg-col__title[b-9wp8ranooq] {
    color: var(--color-off-white);
}

.vg-list[b-9wp8ranooq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .vg-list li[b-9wp8ranooq] {
        position: relative;
        padding-left: 44px;
        font-size: 1rem;
        line-height: 1.6;
    }

/* Numbered: a terracotta circle with the count. */
.vg-list--see[b-9wp8ranooq] {
    counter-reset: see;
}

    .vg-list--see li[b-9wp8ranooq] {
        counter-increment: see;
        color: var(--color-ink);
    }

        .vg-list--see li[b-9wp8ranooq]::before {
            content: counter(see);
            position: absolute;
            left: 0;
            top: -1px;
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--color-terracotta);
            font-family: var(--font-display);
            font-size: 0.95rem;
            font-weight: 600;
            color: #fff;
        }

/* Tips: a gold check. */
.vg-list--tips li[b-9wp8ranooq] {
    color: rgba(244, 241, 234, 0.9);
}

    .vg-list--tips li[b-9wp8ranooq]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(233, 184, 106, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9B86A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    }

@media (max-width: 800px) {
    .vg-cols[b-9wp8ranooq] {
        grid-template-columns: 1fr;
    }
}

/* Breadcrumb above the title: Destinations › Desert › Merzouga. */
.dest-crumbs[b-9wp8ranooq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 16px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.55);
}

    .dest-crumbs a[b-9wp8ranooq] {
        color: #E3B98A;
        text-decoration: none;
    }

        .dest-crumbs a:hover[b-9wp8ranooq] {
            color: #fff;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

    .dest-crumbs [aria-current="page"][b-9wp8ranooq] {
        color: rgba(244, 241, 234, 0.85);
    }
/* /Components/Pages/Destinations.razor.rz.scp.css */
/* ---------- Search and region chips: a white card over the hero's foot ---------- */
.dx-tools[b-hgz91w8viu] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: calc(-1 * var(--page-y) - 48px) 0 clamp(40px, 5vw, 72px);
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.dx-search[b-hgz91w8viu] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 480px;
}

    .dx-search svg[b-hgz91w8viu] {
        position: absolute;
        left: 16px;
        color: rgba(23, 20, 18, 0.45);
        pointer-events: none;
    }

    .dx-search input[b-hgz91w8viu] {
        width: 100%;
        height: 50px;
        padding: 0 16px 0 46px;
        border: 1px solid rgba(23, 20, 18, 0.15);
        border-radius: 999px;
        background: #F7F4EE;
        font: inherit;
        font-size: 1rem;
        color: var(--color-ink);
    }

        .dx-search input:focus[b-hgz91w8viu] {
            outline: none;
            border-color: var(--color-teal);
            box-shadow: 0 0 0 3px rgba(21, 82, 89, 0.15);
            background: #fff;
        }

.dx-jump[b-hgz91w8viu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dx-jump__chip[b-hgz91w8viu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(21, 82, 89, 0.22);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-teal);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .dx-jump__chip span[b-hgz91w8viu] {
        padding: 1px 8px;
        border-radius: 999px;
        background: rgba(21, 82, 89, 0.1);
        font-size: 0.78rem;
    }

    .dx-jump__chip:hover[b-hgz91w8viu] {
        background: var(--color-teal);
        color: #fff;
        text-decoration: none;
    }

        .dx-jump__chip:hover span[b-hgz91w8viu] {
            background: rgba(255, 255, 255, 0.2);
        }

/* ---------- One band per region ---------- */
.dx-region[b-hgz91w8viu] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: start;
    padding: clamp(32px, 4vw, 56px) 0;
    border-top: 1px solid rgba(23, 20, 18, 0.08);
    scroll-margin-top: 100px;
}

    .dx-region:first-of-type[b-hgz91w8viu] {
        border-top: 0;
        padding-top: 0;
    }

/* The region itself: a tall card, photograph or drawn rings on teal. */
.dx-feature[b-hgz91w8viu] {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 440px;
    padding: var(--space-5) var(--space-4);
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 30px 60px -36px rgba(11, 50, 55, 0.6);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .dx-feature:hover[b-hgz91w8viu] {
        transform: translateY(-4px);
        text-decoration: none;
        color: #fff;
    }

[b-hgz91w8viu] .dx-feature__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    z-index: 0;
}

.dx-feature__shade[b-hgz91w8viu] {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(11, 50, 55, 0.1) 0%, rgba(11, 50, 55, 0.55) 45%, rgba(6, 28, 31, 0.92) 100%);
}

.dx-feature__rings[b-hgz91w8viu] {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 85% 12%, rgba(209, 129, 96, 0.35), transparent 50%),
        repeating-radial-gradient(circle at 85% 12%, transparent 0 30px, rgba(244, 241, 234, 0.07) 30px 31px);
}

.dx-feature__num[b-hgz91w8viu] {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 184, 106, 0.8);
}

.dx-feature__body[b-hgz91w8viu] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dx-feature__name[b-hgz91w8viu] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6vw + 1.3rem, 2.8rem);
    font-weight: 600;
    line-height: 1.05;
}

.dx-feature__text[b-hgz91w8viu] {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.dx-feature__when[b-hgz91w8viu] {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

    .dx-feature__when svg[b-hgz91w8viu] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #E9B86A;
    }

.dx-feature__cta[b-hgz91w8viu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-weight: 700;
    color: #E9B86A;
}

/* ---------- The places in it ---------- */
.dx-places__head[b-hgz91w8viu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}

    .dx-places__head .label.waypoint[b-hgz91w8viu] {
        margin-bottom: 0;
    }

.dx-places__routes[b-hgz91w8viu] {
    font-weight: 600;
    color: var(--color-teal);
}

.dx-grid[b-hgz91w8viu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.dx-place[b-hgz91w8viu] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .dx-place:hover[b-hgz91w8viu] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
        text-decoration: none;
        color: var(--color-ink);
    }

[b-hgz91w8viu] .dx-place__photo,
.dx-place__photo[b-hgz91w8viu] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.dx-place__photo--none[b-hgz91w8viu] {
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #1B636A, #0B3237);
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: #E9B86A;
}

.dx-place__text[b-hgz91w8viu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dx-place__name[b-hgz91w8viu] {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--color-teal);
}

.dx-place__line[b-hgz91w8viu] {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(23, 20, 18, 0.65);
}

.dx-empty[b-hgz91w8viu] {
    padding: var(--space-6) 0;
    text-align: center;
    color: rgba(23, 20, 18, 0.7);
}

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
    .dx-region[b-hgz91w8viu] {
        grid-template-columns: 1fr;
    }

    .dx-feature[b-hgz91w8viu] {
        position: relative;
        top: auto;
        min-height: 300px;
    }
}

@media (max-width: 560px) {
    .dx-tools[b-hgz91w8viu] {
        padding: var(--space-4);
    }

    .dx-search[b-hgz91w8viu] {
        max-width: none;
    }

    .dx-grid[b-hgz91w8viu] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dx-place[b-hgz91w8viu] {
        padding: 12px;
    }
}

/* ---------- Collapsed lists ---------- */
.dx-grid:not(.dx-grid--open) .dx-place--more[b-hgz91w8viu] {
    display: none;
}

.dx-more[b-hgz91w8viu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 13px 16px;
    border: 1px dashed rgba(21, 82, 89, 0.35);
    border-radius: 14px;
    background: rgba(21, 82, 89, 0.04);
    font: inherit;
    font-weight: 700;
    color: var(--color-teal);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .dx-more:hover[b-hgz91w8viu] {
        background: rgba(21, 82, 89, 0.09);
        border-color: var(--color-teal);
    }

    .dx-more svg[b-hgz91w8viu] {
        transition: rotate 0.2s ease;
    }

    .dx-more[aria-expanded="true"] svg[b-hgz91w8viu] {
        rotate: 180deg;
    }

/* Regions with 5 or 6 places are already complete on a computer. */
@media (min-width: 701px) {
    .dx-more--phone[b-hgz91w8viu] {
        display: none;
    }
}

/* ---------- Phones: fewer places up front, a shorter region card ---------- */
@media (max-width: 700px) {
    .dx-grid:not(.dx-grid--open) .dx-place--more-phone[b-hgz91w8viu] {
        display: none;
    }

    .dx-region[b-hgz91w8viu] {
        gap: 16px;
        padding: 28px 0;
    }

    .dx-feature[b-hgz91w8viu] {
        min-height: 0;
        padding: 64px 20px 22px;
        border-radius: 18px;
    }

    .dx-feature__num[b-hgz91w8viu] {
        top: 16px;
        left: 20px;
        font-size: 2.2rem;
    }

    .dx-feature__name[b-hgz91w8viu] {
        font-size: 1.9rem;
    }

    .dx-feature__text[b-hgz91w8viu] {
        font-size: 0.95rem;
    }

    .dx-feature__when[b-hgz91w8viu] {
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    .dx-places__head[b-hgz91w8viu] {
        margin-bottom: 12px;
    }

    .dx-place__line[b-hgz91w8viu] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dx-tools[b-hgz91w8viu] {
        gap: 12px;
    }

    .dx-jump[b-hgz91w8viu] {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -4px;
        padding: 2px 4px;
        scrollbar-width: none;
    }

        .dx-jump[b-hgz91w8viu]::-webkit-scrollbar {
            display: none;
        }

    .dx-jump__chip[b-hgz91w8viu] {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Gallery.razor.rz.scp.css */
.gallery-header[b-c29g2czj75] {
    padding-bottom: 0;
}

.gallery-instagram-cta[b-c29g2czj75] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #8a4530 100%);
    color: var(--color-off-white);
    border-radius: var(--radius-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-instagram-cta:hover[b-c29g2czj75] {
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: var(--shadow-lift);
    }

    .gallery-instagram-cta .label[b-c29g2czj75] {
        color: var(--color-off-white);
        opacity: 0.85;
    }

.gallery-instagram-cta__line[b-c29g2czj75] {
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* Masonry via column layout — photos keep their natural aspect ratio instead
   of being cropped into a uniform grid, which matters for a photography page. */
.gallery-grid[b-c29g2czj75] {
    columns: 3;
    column-gap: var(--space-3);
}

@media (max-width: 960px) {
    .gallery-grid[b-c29g2czj75] {
        columns: 2;
    }
}

/* On a phone the masonry would drop to a single column, which turns the gallery
   into a very long scroll. Grid (two up) is the default; Large is the old
   one-column view for anyone who wants to actually look at a picture. */
@media (max-width: 560px) {
    .gallery-grid--grid[b-c29g2czj75] {
        columns: 2;
        column-gap: var(--space-2);
    }

    .gallery-grid--list[b-c29g2czj75] {
        columns: 1;
    }

    /* Keep the two-up tiles as close to pure photo as possible: no caption bar,
       and the credit shrunk to a mark rather than a label. */
    .gallery-grid--grid .gallery-tile__meta[b-c29g2czj75] {
        display: none;
    }

    .gallery-grid--grid .gallery-tile__credit[b-c29g2czj75] {
        top: 4px;
        right: 4px;
        padding: 2px 5px;
        font-size: 0.48rem;
        background: rgba(23, 20, 18, 0.34);
    }
}

.gallery-view-toggle[b-c29g2czj75] {
    display: none; /* pointless above the phone breakpoint — see below */
}

@media (max-width: 560px) {
    .gallery-view-toggle[b-c29g2czj75] {
        display: flex;
        gap: 6px;
        margin-bottom: var(--space-3);
    }

    .gallery-view-toggle__btn[b-c29g2czj75] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0.45rem 0.8rem;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--color-ink);
        background: #fff;
        border: 1px solid rgba(23, 20, 18, 0.15);
        border-radius: 999px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .gallery-view-toggle__btn--active[b-c29g2czj75] {
        background: var(--color-teal);
        border-color: var(--color-teal);
        color: var(--color-off-white);
    }
}

.gallery-tile[b-c29g2czj75] {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 0 var(--space-3);
    border: none;
    background: none;
    cursor: pointer;
    break-inside: avoid;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .gallery-tile:hover[b-c29g2czj75] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lift);
    }

    .gallery-tile[b-c29g2czj75]  img {
        display: block;
        width: 100%;
        height: auto;
        /* Speed bumps, not protection — see the note in site.js. Stops the
           iOS long-press "Save Image" sheet and desktop drag-to-desktop. */
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none; /* the button underneath still handles the click */
    }

/* Sits on every photo so it travels with a screenshot or a copied file — the
   only measure here that actually survives someone taking the image. */
.gallery-tile__credit[b-c29g2czj75] {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 7px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(23, 20, 18, 0.42);
    backdrop-filter: blur(3px);
    border-radius: 3px;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* Place and time sit on the photo, appearing on hover or keyboard focus so the
   grid stays a wall of pictures until you're actually looking at one. */
.gallery-tile__meta[b-c29g2czj75] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-4) var(--space-3) var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-off-white);
    background: linear-gradient(to top, rgba(23, 20, 18, 0.75), transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.gallery-tile:hover .gallery-tile__meta[b-c29g2czj75],
.gallery-tile:focus-visible .gallery-tile__meta[b-c29g2czj75] {
    opacity: 1;
    transform: translateY(0);
}

/* Touch has no hover, so the meta can't be revealed — but only show it in the
   large single-column view. On the two-up grid the tiles are small enough that
   a permanent caption bar covers most of the photo, and the same place and time
   are on the lightbox anyway. */
@media (hover: none) {
    .gallery-grid--list .gallery-tile__meta[b-c29g2czj75] {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-tile__meta[b-c29g2czj75] {
        transition: opacity 0.22s ease;
        transform: none;
    }
}

.gallery-empty[b-c29g2czj75] {
    text-align: center;
    color: rgba(23, 20, 18, 0.7);
    padding: var(--space-5) 0;
}

/* ---------- Lightbox ---------- */
.gallery-lightbox[b-c29g2czj75] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(23, 20, 18, 0.85);
    backdrop-filter: blur(4px);
    animation: galleryFade-b-c29g2czj75 0.22s ease both;
}

@keyframes galleryFade-b-c29g2czj75 {
    from {
        opacity: 0;
    }
}

.gallery-lightbox__panel[b-c29g2czj75] {
    position: relative;
    max-width: min(900px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: galleryRise-b-c29g2czj75 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes galleryRise-b-c29g2czj75 {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}

/* Wraps the image so the credit can sit on the photo itself rather than the
   panel, which is wider than a portrait shot. */
.gallery-lightbox__frame[b-c29g2czj75] {
    position: relative;
    z-index: 1;
    display: inline-block;
    line-height: 0;
}

[b-c29g2czj75] .gallery-lightbox__photo {
    max-width: 100%;
    max-height: 72vh;
    max-height: 72dvh;
    width: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 30px 70px rgba(23, 20, 18, 0.4);
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

.gallery-lightbox__credit[b-c29g2czj75] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(23, 20, 18, 0.45);
    backdrop-filter: blur(3px);
    border-radius: 3px;
    pointer-events: none;
    user-select: none;
}

.gallery-lightbox__close[b-c29g2czj75] {
    position: absolute;
    top: -14px;
    right: -14px;
    /* Above the photo frame, which is also positioned and comes later in the
       DOM — without this it paints over the button and swallows the click. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(244, 241, 234, 0.3);
    border-radius: 50%;
    background: var(--color-off-white);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .gallery-lightbox__close:hover[b-c29g2czj75] {
        background: var(--color-terracotta);
        color: var(--color-off-white);
        transform: scale(1.06);
    }

.gallery-lightbox__caption[b-c29g2czj75] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-3);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-align: center;
}

    .gallery-lightbox__caption .marker[b-c29g2czj75] {
        color: var(--color-gold);
    }

.gallery-lightbox__route[b-c29g2czj75] {
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-gold);
}

    .gallery-lightbox__route:hover[b-c29g2czj75] {
        color: var(--color-off-white);
    }

@media (prefers-reduced-motion: reduce) {
    .gallery-lightbox[b-c29g2czj75],
    .gallery-lightbox__panel[b-c29g2czj75] {
        animation: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home — cinematic editorial layout.
   Section grounds alternate (photo → ink → paper → dark → paper)
   so the page has rhythm instead of eleven identical card grids.
   ============================================================ */

/* ---------- Hero ----------
   One photograph across the whole band, with the brand teal washed over it from
   the left so the type sits on colour and the picture surfaces gradually. The
   version before this cut the two into hard columns, which read as a seam between
   a page and a photo rather than as a single image.

   The wash was cream until now. Teal makes this a dark band, so everything on it
   inverts: the type goes to off-white, and the primary button — teal by default —
   has to stop being teal or it dissolves into its own background. */
.hero[b-l8irjyist5] {
    position: relative;
    isolation: isolate;
    background: var(--color-teal);
    color: var(--color-off-white);
    padding-bottom: var(--space-5);
}

/* Generates no box here, so the layers inside it position against .hero exactly
   as they did before the wrapper existed. It only becomes a real element on small
   screens, where it is what gets pinned. */
.hero__stage[b-l8irjyist5] {
    display: contents;
}

/* Anchored to the right rather than spanning the band. The photograph is 3:2 in
   a box far wider than that, so covering the full width crops it vertically and
   leaves no horizontal slack at all — object-position does nothing, and the
   group ends up stranded mid-frame under the wash. Held to the right three
   quarters, the box is narrower than the picture and there is room to pan. Its
   left edge needs no mask: the wash is still solid cream where that edge falls. */
.hero__backdrop[b-l8irjyist5] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 24%;
    z-index: 0;
    overflow: hidden;
}

[b-l8irjyist5] .hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pans the picture right inside its box, carrying the group clear of both
       the wash and the column of type. */
    object-position: 0% center;
}

/* Two washes over the photograph: one from the left, carrying the paper across
   the type; one down the frame, so the header at the top and the promise bar at
   the foot both sit on quiet ground rather than on busy picture. */
.hero__wash[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(96deg,
            var(--color-teal) 0%,
            var(--color-teal) 40%,
            rgba(21, 82, 89, 0.82) 48%,
            rgba(21, 82, 89, 0.38) 55%,
            rgba(21, 82, 89, 0) 62%),
        linear-gradient(to bottom,
            rgba(21, 82, 89, 0.55) 0%,
            rgba(21, 82, 89, 0) 20%,
            rgba(21, 82, 89, 0) 58%,
            rgba(21, 82, 89, 0.5) 100%);
}

/* Above the wash, below the type. The people are on the right and the copy on
   the left, so they do not meet — but if a longer headline ever reached across,
   the words should win rather than disappear behind a shoulder. */
.hero__backdrop--cutout[b-l8irjyist5] {
    z-index: 1;
    pointer-events: none;
}

.hero__inner[b-l8irjyist5] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: min(72vh, 580px);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.hero__pane[b-l8irjyist5] {
    max-width: 36rem;
    min-width: 0;
}

/* ---------- Kicker ---------- */
.hero__kicker[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Tint of --color-gold. The brand value is 3.3:1 on teal, under the
       4.5:1 this size needs; lightening the same hue clears it. */
    color: #E6C79A;
    margin-bottom: var(--space-2);
}

.hero__kicker-rule[b-l8irjyist5] {
    display: block;
    width: 38px;
    height: 2px;
    background: #E6C79A;
    flex-shrink: 0;
}

/* ---------- Headline ---------- */
.hero__title[b-l8irjyist5] {
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 3.3vw + 0.7rem, 3.6rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.022em;
    margin: 0 0 var(--space-3);
    text-wrap: balance;
}

/* Each word rises out of its own clipped box, staggered. The padding and equal
   negative margin give descenders room — without them the mask crops the tails
   off g, y and p. */
.hero__title-mask[b-l8irjyist5] {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.hero__title-word[b-l8irjyist5] {
    display: inline-block;
    animation: heroWordRise-b-l8irjyist5 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Drawn stroke under the closing word — the one hand-made mark on the page. */
.hero__title-word--last[b-l8irjyist5] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 46 3, 104 2, 150 5 C 168 6, 184 8, 196 10' stroke='%23BF9765' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 100% 0.16em;
    padding-bottom: 0.1em;
}

/* His name in the headline, linking to his page. It keeps the headline's colour
   rather than taking link styling — a teal underlined word mid-sentence would
   read as a mistake at this size. The drawn swash already sets it apart; hover
   and keyboard focus are what confirm it is a link. */
.hero__title-word--name[b-l8irjyist5] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .hero__title-word--name:hover[b-l8irjyist5],
    .hero__title-word--name:focus-visible[b-l8irjyist5] {
        color: #E6C79A;
        text-decoration: none;
    }

    .hero__title-word--name:focus-visible[b-l8irjyist5] {
        outline: 2px solid #E6C79A;
        outline-offset: 4px;
        border-radius: 2px;
    }

@keyframes heroWordRise-b-l8irjyist5 {
    from {
        transform: translateY(108%);
    }
}

.hero__lede[b-l8irjyist5] {
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.1rem);
    line-height: 1.6;
    color: rgba(244, 241, 234, 0.82);
    max-width: 40ch;
    margin: 0 0 var(--space-4);
}

.hero__actions[b-l8irjyist5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

    .hero__actions .btn[b-l8irjyist5] {
        border-radius: 999px;
        padding-left: 1.7rem;
        padding-right: 1.7rem;
    }

    /* Brand gold against the teal ground. The default primary is teal on
       off-white, which on this band would be a teal button on a teal field: the
       shape would vanish and the strongest call to action with it.

       Dark ink on the gold rather than cream — cream on this fill measures about
       2.4:1, well under what a label needs, while ink clears 6.8:1. No edge ring
       here: gold is light enough to clear 3:1 against the teal on its own, which
       the deeper terracotta before it could not. */
    .hero__actions .btn--primary[b-l8irjyist5] {
        background: var(--color-gold);
        color: var(--color-ink);
    }

        .hero__actions .btn--primary:hover[b-l8irjyist5] {
            background: #CFAA7C;
            color: var(--color-ink);
        }

    .hero__actions .btn--outline[b-l8irjyist5] {
        background: rgba(244, 241, 234, 0.08);
        border-color: rgba(244, 241, 234, 0.55);
        color: var(--color-off-white);
        backdrop-filter: blur(4px);
    }

        .hero__actions .btn--outline:hover[b-l8irjyist5] {
            background: var(--color-off-white);
            border-color: var(--color-off-white);
            color: var(--color-teal);
        }

/* ---------- Proof ---------- */
.hero__proof[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero__proof-row[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Overlapping portraits — a cluster reads as people, a row reads as a table. */
.hero__faces[b-l8irjyist5] {
    display: flex;
    flex-shrink: 0;
}

[b-l8irjyist5] .hero__face {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--color-teal);
    margin-left: -10px;
}

    [b-l8irjyist5] .hero__face:first-child {
        margin-left: 0;
    }

.hero__proof-rating[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-off-white);
}

    .hero__proof-rating:hover[b-l8irjyist5] {
        text-decoration: none;
    }

.hero__proof-stars[b-l8irjyist5] {
    display: inline-flex;
    gap: 2px;
    color: var(--color-gold);
    flex-shrink: 0;
}

    .hero__proof-stars svg[b-l8irjyist5] {
        width: 15px;
        height: 15px;
    }

.hero__proof-count[b-l8irjyist5] {
    font-size: 0.94rem;
    font-weight: 600;
}

    .hero__proof-count span[b-l8irjyist5] {
        font-weight: 400;
        color: rgba(244, 241, 234, 0.75);
        text-decoration: underline;
    }

.hero__proof-facts[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero__meta-item[b-l8irjyist5] {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.82);
}

.hero__meta-item--credential[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #E6C79A;
}

.road-status[b-l8irjyist5] {
    --pulse-color: rgba(191, 151, 101, 0.5);
    /* flex, not inline-flex: the kicker below is inline-level too, and in a pane
       this wide the two sat side by side on one line. width:fit-content keeps the
       pill hugging its text rather than stretching across the column. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(23, 20, 18, 0.12);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: var(--space-3);
    backdrop-filter: blur(4px);
    font-size: 0.82rem;
}

.road-status__dot[b-l8irjyist5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    flex-shrink: 0;
}

    .road-status .marker[b-l8irjyist5] {
        color: var(--color-ink);
    }

    .road-status:hover[b-l8irjyist5] {
        text-decoration: none;
        border-color: var(--color-teal);
    }

/* ---------- Promise bar ----------
   Sits over the foot of the photograph rather than below it, so the picture
   carries on behind and underneath — the bar reads as laid on the hero, not as
   the next section starting. */
.hero__promises-wrap[b-l8irjyist5] {
    position: relative;
    z-index: 3;
}

.hero__promises[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-3) var(--space-2);
}

.hero__promise[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--space-2) var(--space-3);
    border-left: 1px solid rgba(23, 20, 18, 0.1);
    min-width: 0;
}

    .hero__promise:first-child[b-l8irjyist5] {
        border-left: none;
    }

.hero__promise-icon[b-l8irjyist5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(21, 82, 89, 0.28);
    color: var(--color-teal);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__promise:hover .hero__promise-icon[b-l8irjyist5] {
    background: var(--color-teal);
    color: var(--color-off-white);
    transform: translateY(-2px);
}

.hero__promise-text[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .hero__promise-text strong[b-l8irjyist5] {
        font-family: var(--font-display);
        font-size: 0.98rem;
        line-height: 1.2;
        color: var(--color-ink);
    }

    .hero__promise-text span[b-l8irjyist5] {
        font-size: 0.78rem;
        line-height: 1.35;
        color: rgba(23, 20, 18, 0.58);
    }

@media (max-width: 1100px) {
    .hero__promises[b-l8irjyist5] {
        grid-template-columns: 1fr 1fr;
    }

    .hero__promise:nth-child(3)[b-l8irjyist5] {
        border-left: none;
    }

    /* Below roughly this width the pane is too narrow to hold the rating caption
       on one line. Centred against a wrapped caption the stars read as a broken
       line, so stack them over it — the wrap is then deliberate. */
    .hero__proof-rating[b-l8irjyist5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

@media (max-width: 900px) {
    /* The picture holds still and the copy travels over it, until the section
       ends and the two move off together. position:sticky rather than
       background-attachment:fixed — mobile Safari has never honoured fixed
       attachment, and sticky also releases at the foot of the section on its own,
       which is the behaviour wanted here.

       The stage is a real box at this width and the three layers fill it. Its
       negative bottom margin cancels the height it would otherwise add to the
       flow, so the copy begins at the top of the section and rides over the
       picture instead of starting below it. */
    /* Kept even though nothing is pinned any more: the stage is a viewport tall
       and the section need not be, so on a short one its box would otherwise hang
       past the bottom edge and paint over the marquee below. */
    .hero[b-l8irjyist5] {
        overflow: clip;
    }

    /* Scrolls away with the section rather than holding still under it. Absolute
       rather than sticky, and out of flow, so the copy still begins at the top of
       the section with the picture behind it — the layout is unchanged, only the
       behaviour. Its foot is where the photograph's own fade has reached solid
       teal, so the join into the colour below it is invisible. */
    .hero__stage[b-l8irjyist5] {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        z-index: 0;
        overflow: hidden;
    }

    .hero__backdrop[b-l8irjyist5],
    .hero__wash[b-l8irjyist5] {
        position: absolute;
        inset: 0;
        left: 0;
        right: 0;
        height: 100%;
    }

    [b-l8irjyist5] .hero__photo {
        /* Box is narrower than the picture here, so the slack sits either side
           and the middle holds the group. */
        object-position: center center;
    }

    /* Off again here. Its whole purpose is keeping the people crisp above the
       wash — but with the copy now sitting over the picture, "crisp" means a
       white shirt directly behind the lede, which measured 1.3:1. The people are
       in the photograph underneath regardless, so nothing is lost by dropping it. */
    .hero__backdrop--cutout[b-l8irjyist5] {
        display: none;
    }

    /* No overlay at all here. The fade is painted into the mobile photograph
       itself, so anything drawn on top would double it. Everything the picture
       needs to do for the type it now does on its own. */
    .hero__wash[b-l8irjyist5] {
        display: none;
    }

    /* Copy from the very top, straight onto the photograph — no wash beneath it
       and no panel behind it. The picture carries the type on its own. */
    .hero__inner[b-l8irjyist5] {
        position: relative;
        z-index: 2;
        min-height: 0;
        align-items: flex-start;
        padding-top: var(--space-5);
        padding-bottom: var(--space-4);
        /* No panel either — the same reason. The picture is the ground now, top
           to bottom, and the copy sits directly on it. */
        background: none;
    }

    .hero__pane[b-l8irjyist5] {
        max-width: none;
    }

    .hero__promises-wrap[b-l8irjyist5] {
        margin-top: var(--space-4);
    }
}

@media (max-width: 560px) {
    .hero__promises[b-l8irjyist5] {
        grid-template-columns: 1fr;
    }

    .hero__promise[b-l8irjyist5] {
        border-left: none;
        border-top: 1px solid rgba(23, 20, 18, 0.1);
    }

        .hero__promise:first-child[b-l8irjyist5] {
            border-top: none;
        }

    .hero__actions[b-l8irjyist5] {
        gap: var(--space-2);
    }

        .hero__actions .btn[b-l8irjyist5] {
            width: 100%;
        }

    .road-status[b-l8irjyist5] {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title-word[b-l8irjyist5] {
        animation: none;
    }
}

/* ---------- Trust strip ----------
   The editable badge counts, back in a section of their own below the fold. The
   promise bar in the hero says what the trip is like; this says how much. */
.trust-strip[b-l8irjyist5] {
    background: var(--color-bg);
    padding: var(--space-5) 0;
    border-bottom: 1px solid rgba(23, 20, 18, 0.1);
}

.trust-strip__grid[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4) 0;
}

.trust-item[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 var(--space-3);
    border-left: 1px solid rgba(23, 20, 18, 0.12);
}

    .trust-item:first-child[b-l8irjyist5] {
        border-left: none;
    }

.trust-item__icon[b-l8irjyist5] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(21, 82, 89, 0.3);
    color: var(--color-teal);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}

    .trust-item:hover .trust-item__icon[b-l8irjyist5] {
        background: var(--color-teal);
        color: var(--color-off-white);
        transform: translateY(-3px);
    }

.trust-item__num[b-l8irjyist5] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--color-ink);
    text-wrap: balance;
}

.trust-strip .label[b-l8irjyist5] {
    color: rgba(23, 20, 18, 0.55);
}

@media (max-width: 640px) {
    .trust-strip__grid[b-l8irjyist5] {
        grid-template-columns: 1fr 1fr;
    }

    .trust-item[b-l8irjyist5] {
        border-left: none;
    }
}

/* ---------- Place-name marquee ---------- */
/* A step below the hero's teal rather than a different colour. Near-black was
   right when the hero was cream — it was the dark beat between two light bands —
   but against a dark hero it reads as an interruption, and the hero's own teal
   makes the two merge into one field with no seam. Going darker in the same
   family keeps them related and still draws the line. It also buys contrast:
   the place names and the gold diamonds both measure better here than on the
   hero teal. */
.marquee[b-l8irjyist5] {
    background: #0E3C41;
    overflow: hidden;
    padding: 0.85rem 0;
}

.marquee__track[b-l8irjyist5] {
    display: flex;
    align-items: center;
    width: max-content;
    /* The list is rendered twice, so -50% lands exactly on the seam. */
    animation: marqueeScroll-b-l8irjyist5 65s linear infinite;
}

.marquee:hover .marquee__track[b-l8irjyist5] {
    animation-play-state: paused;
}

@keyframes marqueeScroll-b-l8irjyist5 {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Margins (not gap) keep both halves exactly equal in width. */
.marquee__item[b-l8irjyist5],
.marquee__sep[b-l8irjyist5] {
    margin: 0 var(--space-3);
    white-space: nowrap;
    font-family: var(--font-mono);
}

.marquee__item[b-l8irjyist5] {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.9);
}

.marquee__sep[b-l8irjyist5] {
    font-size: 0.5rem;
    color: var(--color-gold);
}

/* ---------- Meet Syphax ---------- */
.meet-syphax__grid[b-l8irjyist5] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(var(--space-4), 5vw, var(--space-7));
    align-items: center;
}

.meet-syphax__figure[b-l8irjyist5] {
    position: relative;
}

    /* Offset gold frame — quiet editorial detail. */
    .meet-syphax__figure[b-l8irjyist5]::after {
        content: "";
        position: absolute;
        inset: 16px -16px -16px 16px;
        border: 1px solid var(--color-gold);
        border-radius: var(--radius-md);
        z-index: 0;
    }

[b-l8irjyist5] .meet-syphax__photo {
    position: relative;
    z-index: 1;
    aspect-ratio: 3 / 4;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.meet-syphax__content .label[b-l8irjyist5] {
    display: block;
    margin-bottom: var(--space-2);
}

.meet-syphax__content p[b-l8irjyist5] {
    color: rgba(23, 20, 18, 0.8);
    font-size: 1.05rem;
    margin-bottom: var(--space-4);
}

/* ---------- The difference — dark statement block ---------- */
.statement[b-l8irjyist5] {
    background: linear-gradient(155deg, #10464C 0%, var(--color-teal) 40%, #0C363B 100%);
    color: var(--color-off-white);
}

.statement__head[b-l8irjyist5] {
    max-width: 820px;
    margin-bottom: var(--space-6);
}

.statement .label[b-l8irjyist5] {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-gold);
}

.statement .waypoint[b-l8irjyist5]::after {
    background: var(--color-gold);
}

.statement__heading[b-l8irjyist5] {
    color: var(--color-off-white);
    font-size: clamp(1.9rem, 3.4vw + 0.6rem, 3.1rem);
    line-height: 1.08;
    max-width: 20ch;
    margin: 0;
}

/* auto-fit rather than a fixed count: the section carries three or four points
   depending on whether the fourth is filled in, and both should sit evenly. */
.statement__grid[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
}

.statement__item[b-l8irjyist5] {
    border-top: 1px solid rgba(244, 241, 234, 0.28);
    padding-top: var(--space-3);
}

.statement__num[b-l8irjyist5] {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.statement__item h3[b-l8irjyist5] {
    color: var(--color-off-white);
    font-size: 1.2rem;
    margin: 0 0 6px;
}

.statement__item p[b-l8irjyist5] {
    color: rgba(244, 241, 234, 0.8);
    font-size: 0.97rem;
    margin: 0;
}

/* ---------- Photo mosaic (full-bleed) ---------- */
.mosaic[b-l8irjyist5] {
    padding-top: var(--space-6);
}

.mosaic__head[b-l8irjyist5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.mosaic__title[b-l8irjyist5] {
    margin: var(--space-2) 0 0;
}

.mosaic__lede[b-l8irjyist5] {
    margin: var(--space-2) 0 0;
    max-width: 560px;
    color: rgba(23, 20, 18, 0.7);
}

.mosaic__link[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-teal);
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(21, 82, 89, 0.35);
    transition: gap 0.25s ease, border-color 0.25s ease;
}

    .mosaic__link:hover[b-l8irjyist5] {
        text-decoration: none;
        gap: 13px;
        border-color: var(--color-teal);
    }

/* ---------- Filmstrip ----------
   Fixed height, width left to the picture. That is the whole idea: object-fit is
   never asked to crop, so a portrait frame simply takes a narrower slot than a
   landscape one and both arrive intact.

   The trade is that widths are unknown until each file decodes, so the strip
   settles as it loads. min-width keeps that from being a lurch. */
.filmstrip[b-l8irjyist5] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
}

.filmstrip__track[b-l8irjyist5] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 0 var(--space-3);
    scrollbar-width: none;
}

    .filmstrip__track[b-l8irjyist5]::-webkit-scrollbar {
        display: none;
    }

.filmstrip__item[b-l8irjyist5] {
    position: relative;
    flex: 0 0 auto;
    height: clamp(240px, 32vw, 400px);
    min-width: 120px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    scroll-snap-align: center;
    background: rgba(23, 20, 18, 0.06);
}

[b-l8irjyist5] .filmstrip__photo {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.filmstrip__item:hover .filmstrip__photo[b-l8irjyist5] {
    transform: scale(1.04);
}

.filmstrip__caption[b-l8irjyist5] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-4) var(--space-3) var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-off-white);
    background: linear-gradient(180deg,
        rgba(23, 20, 18, 0) 0%,
        rgba(23, 20, 18, 0.5) 45%,
        rgba(23, 20, 18, 0.88) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.filmstrip__item:hover .filmstrip__caption[b-l8irjyist5] {
    opacity: 1;
    transform: translateY(0);
}

.filmstrip__nav[b-l8irjyist5] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(23, 20, 18, 0.15);
    background: #fff;
    color: var(--color-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-lift);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .filmstrip__nav:hover[b-l8irjyist5] {
        border-color: var(--color-teal);
        transform: scale(1.06);
    }

@media (prefers-reduced-motion: reduce) {
    .filmstrip__track[b-l8irjyist5] {
        scroll-behavior: auto;
    }

    .filmstrip__item:hover .filmstrip__photo[b-l8irjyist5] {
        transform: none;
    }
}

.featured-routes__pricing[b-l8irjyist5] {
    max-width: 62ch;
    margin-top: var(--space-3);
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(23, 20, 18, 0.62);
}

/* ---------- Mid-page CTA banner ---------- */
.route-cta-banner[b-l8irjyist5] {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-terracotta) 100%);
    color: var(--color-off-white);
    text-align: center;
}

.route-cta-banner__inner[b-l8irjyist5] {
    max-width: 620px;
    margin: 0 auto;
}

.route-cta-banner h2[b-l8irjyist5] {
    color: var(--color-off-white);
    margin: 0;
}

.route-cta-banner p[b-l8irjyist5] {
    color: rgba(244, 241, 234, 0.9);
    font-size: 1.05rem;
    margin: var(--space-2) 0 var(--space-4);
}

.route-cta-banner__alt[b-l8irjyist5] {
    margin: var(--space-3) 0 0;
    font-size: 0.92rem;
    color: rgba(244, 241, 234, 0.85);
}

    .route-cta-banner__alt a[b-l8irjyist5] {
        color: var(--color-off-white);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.route-cta-banner__actions[b-l8irjyist5] {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ---------- Featured routes ---------- */
.featured-routes__cta[b-l8irjyist5] {
    margin-top: var(--space-5);
    text-align: center;
}

/* ---------- Journal preview ---------- */
.journal-strip[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.journal-strip__item[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
}

    .journal-strip__item:hover[b-l8irjyist5] {
        transform: none;
        box-shadow: var(--shadow-card);
    }

[b-l8irjyist5] .journal-strip__photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.journal-strip__body[b-l8irjyist5] {
    padding: var(--space-4);
}

.journal-strip__item h3[b-l8irjyist5] {
    margin: 4px 0;
}

.journal-strip__item p[b-l8irjyist5] {
    color: rgba(23, 20, 18, 0.75);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Reviews carousel (on paper ground) ---------- */
.reviews-teaser[b-l8irjyist5] {
    --paper: #EFEAE0;
    background: var(--paper);
}

.review-card[b-l8irjyist5] {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - var(--space-4) * 2 / 3);
    min-width: 260px;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.review-card__head[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-l8irjyist5] .review-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-card__avatar--fallback[b-l8irjyist5] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.review-card__head-text[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.review-card__name[b-l8irjyist5] {
    font-weight: 600;
    color: var(--color-ink);
    font-size: 0.95rem;
}

.review-card__time[b-l8irjyist5] {
    font-size: 0.78rem;
    color: rgba(23, 20, 18, 0.5);
}

.review-card__stars[b-l8irjyist5] {
    display: flex;
    gap: 2px;
    color: var(--color-gold);
}

.review-card__quote[b-l8irjyist5] {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .review-card__quote--expanded[b-l8irjyist5] {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

.review-card__toggle[b-l8irjyist5] {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-teal);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    margin-top: -6px;
}

/* ---------- How it works (on paper ground) ---------- */
.how-it-works[b-l8irjyist5] {
    --paper: #EFEAE0;
    background: var(--paper);
}

.steps-grid[b-l8irjyist5] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    text-align: center;
}

    .steps-grid[b-l8irjyist5]::before {
        content: "";
        position: absolute;
        top: 27px;
        left: calc(12.5% + 8px);
        right: calc(12.5% + 8px);
        height: 2px;
        background: rgba(23, 20, 18, 0.12);
        z-index: 0;
    }

.step[b-l8irjyist5] {
    position: relative;
    z-index: 1;
}

.step__circle[b-l8irjyist5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    /* Masks the connecting line — must match whatever ground it sits on. */
    box-shadow: 0 0 0 6px var(--paper, var(--color-bg));
}

.step h3[b-l8irjyist5] {
    margin: 6px 0;
    font-size: 1.1rem;
}

.step p[b-l8irjyist5] {
    color: rgba(23, 20, 18, 0.75);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Regions ---------- */
.regions-grid[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.region-card[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
}

    .region-card:hover[b-l8irjyist5] {
        text-decoration: none;
        box-shadow: var(--shadow-lift);
    }

[b-l8irjyist5] .region-card__photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    display: block;
}

.region-card__body[b-l8irjyist5] {
    padding: var(--space-4);
}

    .region-card__body p[b-l8irjyist5] {
        margin: 6px 0 0;
        font-size: 0.9rem;
        color: rgba(23, 20, 18, 0.75);
    }

/* ---------- FAQ ---------- */
.faq-list[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 760px;
}

.faq-item[b-l8irjyist5] {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-card);
}

    .faq-item summary[b-l8irjyist5] {
        cursor: pointer;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--color-ink);
    }

    .faq-item p[b-l8irjyist5] {
        margin: var(--space-3) 0 0;
        color: rgba(23, 20, 18, 0.75);
    }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .statement__grid[b-l8irjyist5],
    .journal-strip[b-l8irjyist5],
    .steps-grid[b-l8irjyist5],
    .regions-grid[b-l8irjyist5] {
        grid-template-columns: 1fr 1fr;
    }

    .steps-grid[b-l8irjyist5]::before {
        display: none;
    }

    /* Circle beside a stacked title + body. Flex here would make the h3 and
       the p two separate side-by-side items, squeezing the title into a
       narrow column that wraps a word per line. */
    .step[b-l8irjyist5] {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-3);
        align-items: start;
        text-align: left;
    }

    .step__circle[b-l8irjyist5] {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
        box-shadow: none;
    }

    .step h3[b-l8irjyist5] {
        grid-column: 2;
        margin-top: 0;
    }

    .step p[b-l8irjyist5] {
        grid-column: 2;
    }

    .review-card[b-l8irjyist5] {
        flex-basis: calc(50% - var(--space-4) / 2);
    }
}

@media (max-width: 860px) {
    .meet-syphax__grid[b-l8irjyist5] {
        grid-template-columns: 1fr;
    }

    .meet-syphax__figure[b-l8irjyist5]::after {
        inset: 12px -12px -12px 12px;
    }
}

@media (max-width: 640px) {
    .road-status[b-l8irjyist5] {
        margin-bottom: var(--space-3);
    }

    .hero__meta-item[b-l8irjyist5] {
        font-size: 0.65rem;
    }

    .statement__grid[b-l8irjyist5],
    .journal-strip[b-l8irjyist5],
    .steps-grid[b-l8irjyist5],
    .regions-grid[b-l8irjyist5] {
        grid-template-columns: 1fr;
    }

    .mosaic[b-l8irjyist5] {
        padding-top: var(--space-5);
    }

    /* Stacked, and the link sits under the heading rather than beside it. */
    .mosaic__head[b-l8irjyist5] {
        display: block;
    }

    .mosaic__link[b-l8irjyist5] {
        margin-top: var(--space-3);
    }

    /* No hover to reveal them here, and the arrows have nothing to do that a
       thumb cannot — the strip is swiped instead. */
    .filmstrip__caption[b-l8irjyist5] {
        opacity: 1;
        transform: none;
        font-size: 0.6rem;
        padding: var(--space-3) var(--space-2) var(--space-2);
    }

    .filmstrip__nav[b-l8irjyist5] {
        display: none;
    }

    .filmstrip[b-l8irjyist5] {
        padding: 0 var(--space-4) 0 var(--space-4);
    }

    .filmstrip__item[b-l8irjyist5] {
        height: clamp(200px, 52vw, 280px);
    }

    .review-card[b-l8irjyist5] {
        flex-basis: 85%;
        min-width: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track[b-l8irjyist5] {
        animation: none;
    }

    [b-l8irjyist5] .hero__photo {
        animation: none;
    }
}

/* ---------- Guest quote pinned to the portrait ----------
   The claim and its evidence in one glance. Overlaps the photo's edge so it
   reads as attached to him rather than as another card in the column. */
.meet-syphax__quote[b-l8irjyist5] {
    position: absolute;
    /* The portrait sets z-index: 1, so without this the card paints underneath
       it and only the sliver hanging past the photo's edge is visible. */
    z-index: 2;
    /* Hangs off the bottom-right corner rather than sitting on the middle of the
       photo: anchored inside it, the card covered most of the portrait. Down
       here it only overlaps the ground at his feet. */
    right: calc(var(--space-5) * -1);
    bottom: calc(var(--space-4) * -1);
    width: min(280px, 74%);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-off-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.meet-syphax__quote-stars[b-l8irjyist5] {
    display: inline-flex;
    gap: 2px;
    color: var(--color-gold);
    margin-bottom: 6px;
}

    .meet-syphax__quote-stars svg[b-l8irjyist5] {
        width: 13px;
        height: 13px;
    }

.meet-syphax__quote blockquote[b-l8irjyist5] {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--color-ink);
}

.meet-syphax__quote figcaption[b-l8irjyist5] {
    color: rgba(23, 20, 18, 0.5);
    font-size: 0.62rem;
}

/* ---------- "Where do you want to go?" ----------
   The way in to the routes. Every chip is a real page. */
.where-band[b-l8irjyist5] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Stays behind the photo, so the band still reads as brand-coloured if the
       image is missing or slow. */
    background: linear-gradient(135deg, var(--color-teal) 0%, #0f3d43 100%);
    color: var(--color-off-white);
    padding: var(--space-6) 0;
}

.where-band__media[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

[b-l8irjyist5] .where-band__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Teal rather than black — the same colour as the Plan Your Trip button, so
   the band reads as part of the palette instead of a hole cut in the page.

   0.78 is measured, not guessed: teal is a lighter colour than near-black, so
   it needs a heavier wash to reach the same legibility. 0.75 is the floor for
   4.5:1 against white on this photo; this leaves a little headroom. */
.where-band[b-l8irjyist5]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(21, 82, 89, 0.78);
}

.where-band__inner[b-l8irjyist5] {
    position: relative;
    z-index: 2;
    text-align: center;
}

.where-band__heading[b-l8irjyist5] {
    color: var(--color-off-white);
    font-size: clamp(1.9rem, 3vw + 1rem, 2.7rem);
    margin: 0 0 var(--space-2);
}

.where-band__lede[b-l8irjyist5] {
    max-width: 52ch;
    margin: 0 auto var(--space-4);
    color: rgba(244, 241, 234, 0.82);
}

.where-band__chips[b-l8irjyist5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.where-band__chip[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    padding: 0.62rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    color: var(--color-off-white);
    background: rgba(244, 241, 234, 0.1);
    border: 1px solid rgba(244, 241, 234, 0.28);
    border-radius: 999px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.16s ease, color 0.16s ease;
}

    .where-band__chip:hover[b-l8irjyist5] {
        text-decoration: none;
        transform: translateY(-2px);
        background: var(--color-off-white);
        color: var(--color-ink);
    }

.where-band__chip--ask[b-l8irjyist5] {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-near-black);
}

@media (max-width: 860px) {
    /* Back into the flow — hanging off the corner needs room a phone hasn't got.
       Relative rather than static, because z-index only applies to positioned
       elements: static dropped this beneath the portrait (which carries
       z-index: 1) and the negative margin tucked its top edge out of sight.
       inset: auto clears the right/bottom offsets from the desktop rule, which
       would otherwise shift a relative box instead of anchoring an absolute one. */
    /* Lifted onto the portrait rather than hung below it, so a band of the
       photograph still shows under the card. Absolute rather than a negative
       margin: the card's height moves with the length of the quote, and a margin
       tuned to one quote would sit wrong the moment a different one is pinned.
       Anchored to the bottom, the strip underneath stays the same either way. */
    .meet-syphax__quote[b-l8irjyist5] {
        position: absolute;
        inset: auto var(--space-3) var(--space-3);
        width: auto;
        margin: 0;
    }
}

/* ==========================================================================
   Moroccan layer — zellige stars, horseshoe arches, a road through the steps
   and a desert evening to finish on. Decoration that says where the trips go,
   added on top of the existing layout without changing it.
   ========================================================================== */

/* ---------- Zellige: tiled stars behind the teal section ---------- */
.statement[b-l8irjyist5] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* ::after, not ::before — .grain already uses ::before for its noise. */
    .statement[b-l8irjyist5]::after {
        content: "";
        position: absolute;
        inset: -80px;
        z-index: -1;
        opacity: 0.07;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-width='1.1'%3E%3Crect x='22' y='22' width='44' height='44'/%3E%3Crect x='22' y='22' width='44' height='44' transform='rotate(45 44 44)'/%3E%3Cpath d='M44 32l12 12-12 12-12-12z'/%3E%3Cpath d='M0 7L7 0M81 0l7 7M0 81l7 7M88 81l-7 7'/%3E%3C/g%3E%3C/svg%3E")'/%3E%3Cpath d='M0 0l9 9M80 0l-9 9M0 80l9-9M80 80l-9-9'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 88px 88px;
        animation: zelligeDrift-b-l8irjyist5 90s linear infinite;
    }

@keyframes zelligeDrift-b-l8irjyist5 {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(88px, 88px, 0); }
}

@keyframes starTurn-b-l8irjyist5 {
    to { transform: rotate(360deg); }
}

/* ---------- Horseshoe arches: the portrait and the region photos ----------
   A very large top radius on a portrait-shaped box resolves to a full
   semicircle; the browser scales it to fit, so it holds at any width. */
[b-l8irjyist5] .meet-syphax__photo {
    border-radius: 999px 999px var(--radius-md) var(--radius-md);
}

.meet-syphax__figure[b-l8irjyist5]::after {
    border-radius: 999px 999px var(--radius-md) var(--radius-md);
    transition: inset 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.8s ease 0.25s;
}

/* The gold frame slides out from behind the portrait as it arrives. */
.meet-syphax__figure.reveal:not(.is-visible)[b-l8irjyist5]::after {
    inset: 0;
    opacity: 0;
}

[b-l8irjyist5] .region-card__photo {
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    aspect-ratio: 4 / 3.3;
    border-radius: 999px 999px 10px 10px;
    transition: filter 0.4s ease;
}

.region-card:hover[b-l8irjyist5]  .region-card__photo {
    filter: saturate(1.15) brightness(1.04);
}

/* ---------- A road through "How it works" ---------- */
.steps-grid[b-l8irjyist5]::after {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(12.5% + 8px);
    right: calc(12.5% + 8px);
    height: 2px;
    z-index: 0;
    background: repeating-linear-gradient(90deg, var(--color-terracotta) 0 12px, transparent 12px 20px);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.steps-grid:has(.step.is-visible)[b-l8irjyist5]::after {
    transform: scaleX(1);
}

.step__circle[b-l8irjyist5] {
    position: relative;
}

    .step__circle[b-l8irjyist5]::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid var(--color-terracotta);
        opacity: 0;
    }

.step.is-visible .step__circle[b-l8irjyist5]::after {
    animation: stepRing-b-l8irjyist5 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.step:nth-child(2).is-visible .step__circle[b-l8irjyist5]::after { animation-delay: 0.5s; }
.step:nth-child(3).is-visible .step__circle[b-l8irjyist5]::after { animation-delay: 1s; }
.step:nth-child(4).is-visible .step__circle[b-l8irjyist5]::after { animation-delay: 1.5s; }

@keyframes stepRing-b-l8irjyist5 {
    0% { opacity: 0.9; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 960px) {
    .steps-grid[b-l8irjyist5]::after {
        display: none;
    }
}

/* ---------- Trust strip: a slow dashed ring around each icon ---------- */
.trust-item__icon[b-l8irjyist5] {
    position: relative;
}

    .trust-item__icon[b-l8irjyist5]::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px dashed rgba(191, 151, 101, 0.7);
        animation: starTurn-b-l8irjyist5 30s linear infinite;
    }

/* ---------- Review cards: a gold quotation mark ---------- */
.review-card[b-l8irjyist5] {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

    .review-card[b-l8irjyist5]::before {
        content: "\201C";
        position: absolute;
        top: -6px;
        right: 18px;
        font-family: var(--font-display);
        font-size: 6rem;
        line-height: 1;
        color: var(--color-gold);
        opacity: 0.28;
        pointer-events: none;
    }

    .review-card:hover[b-l8irjyist5] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lift);
    }

/* ---------- FAQ: a plus that becomes a minus, a gold edge when open ---------- */
.faq-item[b-l8irjyist5] {
    border-left: 3px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .faq-item[open][b-l8irjyist5] {
        border-left-color: var(--color-gold);
        box-shadow: var(--shadow-lift);
    }

    .faq-item summary[b-l8irjyist5] {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

        .faq-item summary[b-l8irjyist5]::-webkit-details-marker {
            display: none;
        }

        .faq-item summary[b-l8irjyist5]::after {
            content: "";
            flex: 0 0 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid rgba(21, 82, 89, 0.35);
            background:
                linear-gradient(var(--color-teal), var(--color-teal)) center / 10px 2px no-repeat,
                linear-gradient(var(--color-teal), var(--color-teal)) center / 2px 10px no-repeat;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-size 0.35s ease, background-color 0.25s ease;
        }

    .faq-item[open] summary[b-l8irjyist5]::after {
        transform: rotate(180deg);
        background-size: 10px 2px, 2px 0;
        background-color: rgba(191, 151, 101, 0.15);
    }

/* ---------- The closing section as a desert evening ---------- */
.route-cta-banner[b-l8irjyist5] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #155259 0%, #2f625e 30%, #9a6a52 68%, #C98B5E 100%);
    padding-bottom: calc(var(--space-6) + 70px);
}

    .route-cta-banner[b-l8irjyist5]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.06;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-width='1.1'%3E%3Crect x='22' y='22' width='44' height='44'/%3E%3Crect x='22' y='22' width='44' height='44' transform='rotate(45 44 44)'/%3E%3Cpath d='M44 32l12 12-12 12-12-12z'/%3E%3Cpath d='M0 7L7 0M81 0l7 7M0 81l7 7M88 81l-7 7'/%3E%3C/g%3E%3C/svg%3E")'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 88px 88px;
    }

.route-cta-banner__inner[b-l8irjyist5] {
    position: relative;
    z-index: 2;
}

.cta-scene[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cta-scene__sun[b-l8irjyist5] {
    position: absolute;
    left: 76%;
    bottom: 34px;
    width: 170px;
    height: 170px;
    margin-left: -85px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #FFE8C2 0%, #F6C47E 45%, #E59A5B 100%);
    box-shadow: 0 0 60px 20px rgba(246, 196, 126, 0.35), 0 0 140px 60px rgba(229, 154, 91, 0.2);
    transform: translateY(120px);
    opacity: 0.6;
    transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 2s ease 0.2s;
}

.route-cta-banner:has(.route-cta-banner__inner.is-visible) .cta-scene__sun[b-l8irjyist5] {
    transform: translateY(0);
    opacity: 1;
}

.cta-scene__ridge[b-l8irjyist5] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
}

.cta-scene__ridge--far[b-l8irjyist5] {
    fill: #7a4f3f;
    opacity: 0.55;
}

.cta-scene__ridge--near[b-l8irjyist5] {
    /* The footer's own colour, so the ridge and the footer read as one ground. */
    fill: #1a2527;
    opacity: 1;
    height: 80px;
}

@media (max-width: 700px) {
    .cta-scene__sun[b-l8irjyist5] {
        left: 80%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
    }

}

/* ---------- Everything above holds still for reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .statement[b-l8irjyist5]::after,
    .trust-item__icon[b-l8irjyist5]::after,
    .step.is-visible .step__circle[b-l8irjyist5]::after {
        animation: none;
    }

    .steps-grid[b-l8irjyist5]::after {
        transform: scaleX(1);
        transition: none;
    }

    .cta-scene__sun[b-l8irjyist5] {
        transform: none;
        opacity: 1;
        transition: none;
    }

    .meet-syphax__figure[b-l8irjyist5]::after,
    .meet-syphax__figure.reveal:not(.is-visible)[b-l8irjyist5]::after {
        inset: 16px -16px -16px 16px;
        opacity: 1;
        transition: none;
    }
}

/* ---------- "Where would you like to go?" — one column per region ----------
   Laid out like an editorial spread over the photo band: a heading row, four
   tall photographs with a number, name, line and link under each, and a quiet
   row at the foot for anyone who hasn't decided. */
.where-band[b-l8irjyist5] {
    padding: var(--space-7) 0 var(--space-6);
}

.where-band__inner[b-l8irjyist5] {
    text-align: left;
}

.explore__head[b-l8irjyist5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.explore__title[b-l8irjyist5] {
    color: var(--color-off-white);
    font-size: clamp(2rem, 3.6vw + 0.6rem, 3.4rem);
    line-height: 1.05;
    margin: 0 0 var(--space-2);
}

.explore__lede[b-l8irjyist5] {
    margin: 0;
    font-size: 1.08rem;
    color: rgba(244, 241, 234, 0.82);
}

.explore__all[b-l8irjyist5],
.explore-card__routes[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-off-white);
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.55);
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

    .explore__all:hover[b-l8irjyist5],
    .explore-card__routes:hover[b-l8irjyist5] {
        text-decoration: none;
        color: var(--color-gold);
        border-color: var(--color-gold);
        gap: 12px;
    }

.explore__grid[b-l8irjyist5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.explore-card[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.explore-card__photo-link[b-l8irjyist5] {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

[b-l8irjyist5] .explore-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 10;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.explore-card:hover[b-l8irjyist5]  .explore-card__photo {
    transform: scale(1.05);
}

.explore-card__num[b-l8irjyist5] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--color-terracotta);
    filter: brightness(1.35);
}

.explore-card__title[b-l8irjyist5] {
    margin: 4px 0 var(--space-2);
    font-size: clamp(1.5rem, 1.4vw + 0.9rem, 2rem);
    line-height: 1.1;
}

    .explore-card__title a[b-l8irjyist5] {
        color: var(--color-off-white);
    }

        .explore-card__title a:hover[b-l8irjyist5] {
            text-decoration: none;
            color: var(--color-gold);
        }

.explore-card__text[b-l8irjyist5] {
    margin: 0 0 var(--space-3);
    color: rgba(244, 241, 234, 0.82);
    max-width: 26ch;
}

.explore-card__routes[b-l8irjyist5] {
    margin-top: auto;
}

.explore__ask[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(244, 241, 234, 0.25);
}

.explore__ask-title[b-l8irjyist5] {
    margin: 0;
    color: var(--color-off-white);
    font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem);
}

.explore__ask-text[b-l8irjyist5] {
    margin: 0;
    color: rgba(244, 241, 234, 0.82);
}

.explore__ask-btn[b-l8irjyist5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 1.6rem;
    border: 1.5px solid var(--color-off-white);
    border-radius: var(--radius-sm);
    color: var(--color-off-white);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .explore__ask-btn:hover[b-l8irjyist5] {
        text-decoration: none;
        background: var(--color-off-white);
        color: var(--color-teal);
    }

@media (max-width: 1100px) {
    .explore__grid[b-l8irjyist5] {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-5);
    }
}

@media (max-width: 700px) {
    .explore__head[b-l8irjyist5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .explore__grid[b-l8irjyist5] {
        grid-template-columns: 1fr;
    }

    .explore__ask[b-l8irjyist5] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .explore__ask-btn[b-l8irjyist5] {
        margin-left: 0;
        margin-top: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-l8irjyist5] .explore-card__photo {
        transition: none;
    }

    .explore-card:hover[b-l8irjyist5]  .explore-card__photo {
        transform: none;
    }
}
/* ---------- Region cards: a frosted panel over the photo band ----------
   A light, see-through tint with a blur of the band behind it, so each card
   reads as one object without covering the photograph. */
.explore-card[b-l8irjyist5] {
    padding: 10px 10px var(--space-3);
    background: rgba(244, 241, 234, 0.1);
    border: 1px solid rgba(244, 241, 234, 0.22);
    border-radius: var(--radius-md);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .explore-card:hover[b-l8irjyist5] {
        background: rgba(244, 241, 234, 0.16);
        border-color: rgba(227, 185, 138, 0.55);
        transform: translateY(-4px);
    }

    .explore-card > :not(.explore-card__photo-link)[b-l8irjyist5] {
        margin-left: 6px;
        margin-right: 6px;
    }

.explore-card__photo-link[b-l8irjyist5] {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Phones: two by two, everything scaled down to fit. */
@media (max-width: 700px) {
    .explore__grid[b-l8irjyist5] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        row-gap: 12px;
    }

    .explore-card[b-l8irjyist5] {
        padding: 6px 6px 12px;
        border-radius: var(--radius-sm);
    }

        .explore-card > :not(.explore-card__photo-link)[b-l8irjyist5] {
            margin-left: 4px;
            margin-right: 4px;
        }

    .explore-card__photo-link[b-l8irjyist5] {
        margin-bottom: 10px;
    }

    [b-l8irjyist5] .explore-card__photo {
        aspect-ratio: 1 / 1;
    }

    .explore-card__num[b-l8irjyist5] {
        font-size: 0.68rem;
    }

    .explore-card__title[b-l8irjyist5] {
        font-size: 1.1rem;
        margin: 2px 0 6px;
    }

    .explore-card__text[b-l8irjyist5] {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .explore-card__routes[b-l8irjyist5] {
        font-size: 0.8rem;
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .explore-card[b-l8irjyist5],
    .explore-card:hover[b-l8irjyist5] {
        transition: none;
        transform: none;
    }
}
/* ---------- Wider, and every card on the same lines ----------
   This band gets more room than the site's 1120px column so the photographs
   carry more weight and the names stop wrapping. */
.where-band__inner.container[b-l8irjyist5] {
    /* Same column as the rest of the page, so the cards line up with the
       sections above and below. */
    max-width: var(--content-max);
}

/* Subgrid: each card spans five shared rows (photo, number, name, line, link),
   so a name that wraps pushes that row down for all four cards and every
   description starts on the same line. */
.explore__grid[b-l8irjyist5] {
    grid-auto-rows: auto;
}

.explore-card[b-l8irjyist5] {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: start;
    align-items: start;
}

    .explore-card > .explore-card__photo-link[b-l8irjyist5] {
        justify-self: stretch;
    }

    .explore-card > .explore-card__routes[b-l8irjyist5] {
        align-self: end;
    }

/* Browsers without subgrid: give every name room for two lines instead. */
@supports not (grid-template-rows: subgrid) {
    .explore-card[b-l8irjyist5] {
        display: flex;
        flex-direction: column;
    }

    .explore-card__title[b-l8irjyist5] {
        min-height: 2.2em;
    }
}
/* ---------- Plain version: the hero's teal instead of the photograph ----------
   Chosen with ExploreUsesPhoto in Home.razor. Same colour as the hero, so the
   band reads as part of the same palette; the teal wash that kept text legible
   over the photo isn't needed. */
.where-band--plain[b-l8irjyist5] {
    background: var(--color-teal);
}

    .where-band--plain[b-l8irjyist5]::after {
        display: none;
    }
/* ---------- Region photos: 4:3 landscape ----------
   Wider than tall, so the photo frames the scene rather than filling the card.
   The crop sits a little above centre: most of these photographs have faces,
   camels or a skyline in the upper half, and a centred crop cut them off. */
[b-l8irjyist5] .explore-card__photo {
    aspect-ratio: 4 / 3;
    object-position: center 35%;
}

@media (max-width: 700px) {
    [b-l8irjyist5] .explore-card__photo {
        aspect-ratio: 4 / 3;
    }
}
/* Names sized for the page-width column: small enough that all four fit on
   one line at 1120px, large enough to still lead the card. */
@media (min-width: 1101px) {
    .explore-card__title[b-l8irjyist5] {
        font-size: clamp(1.35rem, 0.9vw + 0.9rem, 1.65rem);
    }
}
/* ==========================================================================
   Meet Syphax — editorial version. One headline, a short line, a portrait,
   a landscape and a guest's words; the full story is on /meet-syphax.
   ========================================================================== */
.meet-v2[b-l8irjyist5] {
    padding-top: var(--space-6);
}

.meet-v2__top[b-l8irjyist5] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.meet-v2__title[b-l8irjyist5] {
    margin: 0 0 var(--space-3);
    color: var(--color-teal);
    /* Sized so "This is my Morocco." holds one line in the text column. */
    font-size: clamp(2.4rem, 3.4vw + 0.6rem, 4.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

    .meet-v2__title .meet-v2__title-line[b-l8irjyist5] {
        display: block;
    }

.meet-v2__lede[b-l8irjyist5] {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.6vw + 0.95rem, 1.45rem);
    line-height: 1.45;
    color: rgba(23, 20, 18, 0.78);
    max-width: 36ch;
}

.meet-v2__actions[b-l8irjyist5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.meet-v2__cta[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-off-white);
}

.meet-v2__link[b-l8irjyist5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-teal);
    font-weight: 600;
    padding-bottom: 3px;
    border-bottom: 1.5px solid currentColor;
    transition: gap 0.2s ease, color 0.2s ease;
}

    .meet-v2__link:hover[b-l8irjyist5] {
        text-decoration: none;
        gap: 12px;
        color: var(--color-terracotta);
    }

.meet-v2__status[b-l8irjyist5] {
    margin-top: var(--space-4);
}

.meet-v2__caption[b-l8irjyist5] {
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: rgba(23, 20, 18, 0.6);
}

.meet-v2__portrait .meet-v2__caption[b-l8irjyist5] {
    text-align: right;
    margin-top: calc(var(--space-4) + 8px);
}

@media (max-width: 900px) {
    .meet-v2__top[b-l8irjyist5],
    .meet-v2__bottom[b-l8irjyist5] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .meet-v2__portrait[b-l8irjyist5] {
        justify-self: start;
        width: min(88%, 380px);
    }

    [b-l8irjyist5] .meet-v2__landscape-photo {
        aspect-ratio: 16 / 9;
    }

    .meet-v2__quote[b-l8irjyist5] {
        padding-left: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-l8irjyist5] .meet-v2__landscape-photo {
        transition: none;
    }
}
/* ---------- Meet Syphax: headline words rise in ---------- */
.meet-v2__title-line[b-l8irjyist5] {
    display: block;
}

.meet-v2__word-mask[b-l8irjyist5] {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.meet-v2__word[b-l8irjyist5] {
    display: inline-block;
    transform: translateY(108%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(0.15s + var(--d, 0ms));
}

.meet-v2__intro.is-visible .meet-v2__word[b-l8irjyist5] {
    transform: none;
}

/* The last word takes the terracotta, like the hero's accent. */
.meet-v2__title-line:last-child .meet-v2__word-mask:last-of-type .meet-v2__word[b-l8irjyist5] {
    color: var(--color-terracotta);
}

/* ---------- Liquid glass portrait ---------- */
.meet-v2__portrait[b-l8irjyist5] {
    position: relative;
    isolation: isolate;
    margin: 0;
    justify-self: end;
    width: min(100%, 390px);
    perspective: 1100px;
}

/* Colour behind the glass, drifting and changing shape slowly. */
.meet-v2__blobs[b-l8irjyist5] {
    position: absolute;
    inset: -40px -50px 10px -50px;
    z-index: -1;
    pointer-events: none;
    filter: blur(38px);
    opacity: 0.85;
}

.meet-v2__blob[b-l8irjyist5] {
    position: absolute;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
    animation: blobMorph-b-l8irjyist5 16s ease-in-out infinite alternate, blobDrift-b-l8irjyist5 22s ease-in-out infinite alternate;
}

.meet-v2__blob--teal[b-l8irjyist5] {
    top: 0;
    left: 0;
    background: rgba(21, 82, 89, 0.55);
}

.meet-v2__blob--terracotta[b-l8irjyist5] {
    bottom: 4%;
    right: 0;
    background: rgba(191, 117, 90, 0.6);
    animation-delay: -6s, -9s;
}

.meet-v2__blob--gold[b-l8irjyist5] {
    top: 34%;
    left: 30%;
    width: 44%;
    background: rgba(191, 151, 101, 0.55);
    animation-delay: -11s, -4s;
}

@keyframes blobMorph-b-l8irjyist5 {
    0% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; }
    50% { border-radius: 60% 40% 38% 62% / 55% 62% 38% 45%; }
    100% { border-radius: 48% 52% 65% 35% / 38% 55% 45% 62%; }
}

@keyframes blobDrift-b-l8irjyist5 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8%, 6%) scale(1.08); }
    100% { transform: translate(-6%, 4%) scale(0.95); }
}

/* The pane itself: frosted, bright-rimmed, rounded. */
.glass-portrait[b-l8irjyist5] {
    position: relative;
    padding: 12px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.34));
    border: 1px solid rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
    box-shadow:
        0 34px 70px -24px rgba(16, 56, 60, 0.45),
        0 10px 24px -12px rgba(23, 20, 18, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -14px 30px rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out;
}

    .glass-portrait__photo[b-l8irjyist5] {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 6px 18px rgba(23, 20, 18, 0.18);
    }

[b-l8irjyist5] .meet-v2__portrait-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.06);
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.meet-v2__portrait.is-visible[b-l8irjyist5]  .meet-v2__portrait-photo {
    transform: scale(1);
}

/* A slow band of light sweeping across the glass. */
.glass-portrait__sheen[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.1) 53%, transparent 62%);
    background-size: 280% 100%;
    background-position: 130% 0;
    mix-blend-mode: soft-light;
    animation: glassSheen-b-l8irjyist5 7.5s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}

@keyframes glassSheen-b-l8irjyist5 {
    0% { background-position: 130% 0; }
    45%, 100% { background-position: -40% 0; }
}

/* Highlight that follows the pointer across the pane. */
.glass-portrait__glare[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.38), transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0.8;
}

/* Floating glass badges over the photo. */
.glass-chip[b-l8irjyist5] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #10383c;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 12px 26px -10px rgba(16, 56, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    transform: translateZ(40px);
    opacity: 0;
    transition: opacity 0.8s ease;
}

    .glass-chip svg[b-l8irjyist5] {
        color: var(--color-terracotta);
        flex-shrink: 0;
    }

.glass-chip--top[b-l8irjyist5] {
    top: 11%;
    left: -34px;
    animation: chipFloat-b-l8irjyist5 6s ease-in-out infinite alternate;
    transition-delay: 0.9s;
}

.glass-chip--bottom[b-l8irjyist5] {
    bottom: 12%;
    right: -30px;
    animation: chipFloat-b-l8irjyist5 7s ease-in-out -3s infinite alternate;
    transition-delay: 1.2s;
}

.meet-v2__portrait.is-visible .glass-chip[b-l8irjyist5] {
    opacity: 1;
}

@keyframes chipFloat-b-l8irjyist5 {
    from { translate: 0 0; }
    to { translate: 0 -10px; }
}

.meet-v2__portrait .meet-v2__caption[b-l8irjyist5] {
    text-align: center;
    margin-top: var(--space-4);
}

@media (max-width: 900px) {
    .meet-v2__portrait[b-l8irjyist5] {
        justify-self: center;
        width: min(82%, 360px);
    }

    .glass-chip--top[b-l8irjyist5] {
        left: -18px;
    }

    .glass-chip--bottom[b-l8irjyist5] {
        right: -14px;
    }
}

@media (max-width: 420px) {
    .glass-chip[b-l8irjyist5] {
        font-size: 0.64rem;
        padding: 7px 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .meet-v2__word[b-l8irjyist5] {
        transform: none;
        transition: none;
    }

    .meet-v2__blob[b-l8irjyist5],
    .glass-portrait__sheen[b-l8irjyist5],
    .glass-chip[b-l8irjyist5] {
        animation: none;
    }

    .glass-chip[b-l8irjyist5] {
        opacity: 1;
        transition: none;
    }

    .glass-portrait[b-l8irjyist5] {
        transform: none;
        transition: none;
    }

    [b-l8irjyist5] .meet-v2__portrait-photo,
    .meet-v2__portrait.is-visible[b-l8irjyist5]  .meet-v2__portrait-photo {
        transform: none;
        transition: none;
    }
}
/* The colour behind the glass spreads past the portrait on purpose; clip it at
   the section so it can never widen the page on a phone. */
.meet-v2[b-l8irjyist5] {
    overflow-x: clip;
}

/* The rating badge is a link to Guest Reviews. */
a.glass-chip[b-l8irjyist5] {
    color: #10383c;
    transition: opacity 0.8s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

    a.glass-chip:hover[b-l8irjyist5] {
        text-decoration: none;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 16px 30px -10px rgba(16, 56, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 1);
    }

.glass-chip__star[b-l8irjyist5] {
    color: var(--color-gold);
    font-size: 0.95rem;
    line-height: 1;
}
/* ==========================================================================
   Phone carousels — the homepage routes and journal. Grids on wider screens;
   here, one card in focus with the next peeking in, snapping into place, and
   dots underneath that follow along (carousel.js).
   ========================================================================== */
.m-carousel__dots[b-l8irjyist5] {
    display: none;
}

@media (max-width: 700px) {
    .m-carousel[b-l8irjyist5] {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-4);
        /* Bleed to the screen edges while the first card still lines up with
           the text above it. */
        margin-inline: calc(-1 * var(--space-4));
        padding: 6px var(--space-4) 22px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .m-carousel[b-l8irjyist5]::-webkit-scrollbar {
            display: none;
        }

        .m-carousel[b-l8irjyist5]  > *,
        .m-carousel > *[b-l8irjyist5] {
            flex: 0 0 82%;
            max-width: 340px;
            scroll-snap-align: start;
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, box-shadow 0.3s ease;
        }

    /* Depth: the card in focus at full strength, its neighbours eased back. */
    .m-carousel.is-carousel[b-l8irjyist5]  > .card:not(.is-active),
    .m-carousel.is-carousel > .card:not(.is-active)[b-l8irjyist5] {
        transform: scale(0.94);
        opacity: 0.6;
    }

    .m-carousel.is-carousel[b-l8irjyist5]  > .card.is-active,
    .m-carousel.is-carousel > .card.is-active[b-l8irjyist5] {
        transform: none;
        opacity: 1;
        box-shadow: var(--shadow-lift);
    }

    .m-carousel__dots.is-on[b-l8irjyist5] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 2px 0 var(--space-4);
    }

    .m-carousel__dot[b-l8irjyist5] {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(21, 82, 89, 0.25);
        cursor: pointer;
        transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    }

        .m-carousel__dot.is-active[b-l8irjyist5] {
            width: 26px;
            background: var(--color-terracotta);
        }

        /* A bigger target than the dot itself, for thumbs. */
        .m-carousel__dot[b-l8irjyist5] {
            position: relative;
        }

            .m-carousel__dot[b-l8irjyist5]::after {
                content: "";
                position: absolute;
                inset: -10px -4px;
            }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .m-carousel[b-l8irjyist5]  > *,
    .m-carousel > *[b-l8irjyist5],
    .m-carousel__dot[b-l8irjyist5] {
        transition: none;
    }
}
/* ---------- Quick trip band (right after the hero) ---------- */
.quick-band[b-l8irjyist5] {
    padding: clamp(48px, 7vw, 110px) 0;
    background: #EFEAE0;
    border-bottom: 1px solid rgba(23, 20, 18, 0.06);
}

.quick-band__inner[b-l8irjyist5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
}

.quick-band__title[b-l8irjyist5] {
    margin: 0;
    font-size: clamp(2.1rem, 2.4vw + 1rem, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--color-teal);
}

@media (max-width: 1100px) {
    .quick-band__inner[b-l8irjyist5] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* The form sits where the two contact buttons used to be on the sunset. */
.route-cta-banner__inner[b-l8irjyist5] {
    max-width: 860px;
}

    .route-cta-banner__inner > p[b-l8irjyist5] {
        margin-bottom: var(--space-4);
    }
/* ---------- Meet Syphax: where the buttons sit ----------
   Desktop: text and buttons down the left, portrait spanning both on the right
   (as before). Phones: headline, then the portrait, then the buttons. */
.meet-v2__top[b-l8irjyist5] {
    grid-template-areas:
        "intro portrait"
        "cta portrait";
    grid-template-rows: auto auto;
    row-gap: 0;
}

.meet-v2__intro[b-l8irjyist5] {
    grid-area: intro;
    align-self: end;
}

    .meet-v2__intro .meet-v2__lede[b-l8irjyist5] {
        margin-bottom: var(--space-4);
    }

.meet-v2__portrait[b-l8irjyist5] {
    grid-area: portrait;
    align-self: center;
}

.meet-v2__cta-group[b-l8irjyist5] {
    grid-area: cta;
    align-self: start;
}

@media (max-width: 900px) {
    .meet-v2__top[b-l8irjyist5] {
        grid-template-areas:
            "intro"
            "portrait"
            "cta";
        grid-template-rows: none;
        row-gap: var(--space-5);
    }

    .meet-v2__intro .meet-v2__lede[b-l8irjyist5] {
        margin-bottom: 0;
    }

    .meet-v2__cta-group[b-l8irjyist5] {
        justify-self: center;
        text-align: center;
    }

        .meet-v2__cta-group .meet-v2__actions[b-l8irjyist5] {
            justify-content: center;
        }
}
.quick-band__lede[b-l8irjyist5] {
    margin: 22px 0 0;
    max-width: 30ch;
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.3rem);
    line-height: 1.5;
    color: rgba(23, 20, 18, 0.62);
}

@media (max-width: 1100px) {
    .quick-band__inner[b-l8irjyist5] {
        gap: var(--space-5);
    }
}

    .quick-band__title span[b-l8irjyist5] {
        display: block;
    }

/* =====================================================================
   Homepage harmony
   Each section was designed on its own; this settles them into one page.
   One label, one headline size, one vertical rhythm, and soft joins
   between the light grounds instead of hard lines. Last in the file on
   purpose, so it has the final word over the per-section rules above.
   ===================================================================== */
.quick-band[b-l8irjyist5],
.meet-v2[b-l8irjyist5],
.statement[b-l8irjyist5],
.featured-routes[b-l8irjyist5],
.where-band[b-l8irjyist5],
.reviews-teaser[b-l8irjyist5],
.how-it-works[b-l8irjyist5],
.mosaic[b-l8irjyist5],
.journal-preview[b-l8irjyist5],
.faq[b-l8irjyist5],
.route-cta-banner[b-l8irjyist5] {
    --home-y: clamp(64px, 7vw, 104px);
    --home-head-gap: clamp(28px, 3.2vw, 48px);
    --home-h2: clamp(2rem, 1.9vw + 1.35rem, 3.25rem);
    --home-label-dark: #E3B98A;
}

/* ---- Rhythm ---- */
.quick-band[b-l8irjyist5],
.section.meet-v2[b-l8irjyist5],
.section.statement[b-l8irjyist5],
.section.featured-routes[b-l8irjyist5],
.where-band[b-l8irjyist5],
.section.reviews-teaser[b-l8irjyist5],
.section.how-it-works[b-l8irjyist5],
.section.journal-preview[b-l8irjyist5],
.section.faq[b-l8irjyist5] {
    padding-top: var(--home-y);
    padding-bottom: var(--home-y);
}

.mosaic[b-l8irjyist5] {
    padding-top: var(--home-y);
}

.section.route-cta-banner[b-l8irjyist5] {
    padding-top: var(--home-y);
}

/* Two sections on the same ground read as one stretch: a shorter step
   between them instead of two full paddings back to back. */
.trust-strip + .section.meet-v2[b-l8irjyist5],
.section.meet-v2 + .quick-band[b-l8irjyist5],
.section.how-it-works + .mosaic[b-l8irjyist5],
.section.how-it-works + .section.journal-preview[b-l8irjyist5],
.section.how-it-works + .section.faq[b-l8irjyist5],
.section.reviews-teaser + .section.how-it-works[b-l8irjyist5],
.mosaic + .section.journal-preview[b-l8irjyist5],
.mosaic + .section.faq[b-l8irjyist5],
.section.journal-preview + .section.faq[b-l8irjyist5] {
    padding-top: calc(var(--home-y) * 0.55);
}

/* ---- Grounds and joins ----
   Cream is the page; sand bands fade in and out of it rather than starting
   on a ruled line. Teal sections keep their clean edge. */
.trust-strip[b-l8irjyist5] {
    border-bottom: 0;
}

.quick-band[b-l8irjyist5] {
    border-bottom: 0;
    background: linear-gradient(to bottom,
        var(--color-off-white) 0,
        #EFEAE0 22%,
        #EFEAE0 78%,
        var(--color-off-white) 100%);
}

.how-it-works[b-l8irjyist5] {
    background: linear-gradient(to bottom, #EFEAE0 0, #EFEAE0 62%, var(--color-off-white) 100%);
}

/* ---- One label ---- */
.label.waypoint[b-l8irjyist5] {
    display: flex;
    width: fit-content;
    margin: 0 0 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--color-terracotta);
}

.statement .label.waypoint[b-l8irjyist5],
.where-band .label.waypoint[b-l8irjyist5],
.route-cta-banner .label.waypoint[b-l8irjyist5] {
    color: var(--home-label-dark);
}

.statement .waypoint[b-l8irjyist5]::after {
    background: none;
    background-image: repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 8px);
}

.route-cta-banner .label.waypoint[b-l8irjyist5] {
    margin-inline: auto;
}

/* ---- One headline ---- */
.quick-band__title[b-l8irjyist5],
.meet-v2__title[b-l8irjyist5],
.statement__heading[b-l8irjyist5],
.explore__title[b-l8irjyist5],
.mosaic__title[b-l8irjyist5],
.section-heading h2[b-l8irjyist5],
.route-cta-banner h2[b-l8irjyist5] {
    margin-top: 0;
    font-size: var(--home-h2);
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.section-heading h2[b-l8irjyist5],
.mosaic__title[b-l8irjyist5] {
    margin-bottom: 0;
    color: var(--color-teal);
}

.statement__heading[b-l8irjyist5],
.explore__title[b-l8irjyist5],
.route-cta-banner h2[b-l8irjyist5] {
    color: var(--color-off-white);
}

/* ---- Heading to content: the same gap everywhere ---- */
.section-heading[b-l8irjyist5],
.statement__head[b-l8irjyist5],
.explore__head[b-l8irjyist5],
.mosaic__head[b-l8irjyist5] {
    margin-bottom: var(--home-head-gap);
}

.section-heading p[b-l8irjyist5],
.mosaic__lede[b-l8irjyist5],
.explore__lede[b-l8irjyist5] {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* The two "see everything" links at the head of a section share one look. */
.mosaic__link[b-l8irjyist5] {
    padding-bottom: 4px;
    border-bottom: 1.5px solid rgba(21, 82, 89, 0.4);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-teal);
}

    .mosaic__link:hover[b-l8irjyist5] {
        text-decoration: none;
        border-color: var(--color-terracotta);
        color: var(--color-terracotta);
    }

/* ---- "What travelling with me looks like": no orphan card ----
   Five points sit as three over two, four as two over two. */
@media (min-width: 900px) {
    .statement__grid[b-l8irjyist5] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-5) var(--space-5);
    }

    .statement__item[b-l8irjyist5] {
        grid-column: span 2;
    }

        .statement__item:nth-child(4):nth-last-child(2)[b-l8irjyist5],
        .statement__item:nth-child(5):last-child[b-l8irjyist5],
        .statement__grid:has(> .statement__item:nth-child(4):last-child) .statement__item[b-l8irjyist5] {
            grid-column: span 3;
        }

        .statement__item p[b-l8irjyist5] {
            max-width: 48ch;
        }
}

/* ---- FAQ: heading beside the questions, not above half-empty width ---- */
@media (min-width: 900px) {
    .faq > .container[b-l8irjyist5] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
        gap: clamp(32px, 5vw, 80px);
        align-items: start;
    }

    .faq__head[b-l8irjyist5] {
        position: sticky;
        top: 110px;
        margin-bottom: 0;
    }

    .faq .faq-list[b-l8irjyist5] {
        max-width: none;
    }
}

.how-it-works__cta[b-l8irjyist5] {
    gap: 10px;
}

.route-cta-banner__inner > p[b-l8irjyist5] {
    max-width: 56ch;
    margin-inline: auto;
}

/* =====================================================================
   "Where would you like to go?": a drawn map instead of a flat teal
   ===================================================================== */
.where-band--plain[b-l8irjyist5] {
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 36%, #10454B 72%, #0B3237 100%);
}

.where-scene[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.where-scene__glow[b-l8irjyist5] {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
}

.where-scene__glow--warm[b-l8irjyist5] {
    top: -18%;
    right: -12%;
    width: 62vw;
    max-width: 900px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(209, 129, 96, 0.32) 0%, rgba(209, 129, 96, 0.1) 40%, transparent 68%);
    animation: where-drift-b-l8irjyist5 22s ease-in-out infinite alternate;
}

.where-scene__glow--cool[b-l8irjyist5] {
    bottom: -25%;
    left: -15%;
    width: 55vw;
    max-width: 800px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(126, 196, 196, 0.2) 0%, rgba(126, 196, 196, 0.06) 42%, transparent 68%);
    animation: where-drift-b-l8irjyist5 26s ease-in-out infinite alternate-reverse;
}

@keyframes where-drift-b-l8irjyist5 {
    from { translate: 0 0; }
    to { translate: -6% 5%; }
}

.where-scene__map[b-l8irjyist5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.where-scene__rings ellipse[b-l8irjyist5] {
    fill: none;
    stroke: rgba(244, 241, 234, 0.075);
    stroke-width: 1;
}

.where-scene__rings--a[b-l8irjyist5] {
    transform-origin: 1180px 170px;
    animation: where-turn-b-l8irjyist5 160s linear infinite;
}

.where-scene__rings--b[b-l8irjyist5] {
    transform-origin: 140px 900px;
    animation: where-turn-b-l8irjyist5 200s linear infinite reverse;
}

@keyframes where-turn-b-l8irjyist5 {
    to { rotate: 360deg; }
}

.where-scene__road[b-l8irjyist5] {
    fill: none;
    stroke: rgba(227, 185, 138, 0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 12;
    animation: where-road-b-l8irjyist5 2.4s linear infinite;
}

@keyframes where-road-b-l8irjyist5 {
    to { stroke-dashoffset: -15; }
}

.where-scene__stop[b-l8irjyist5] {
    fill: #E3B98A;
    transform-box: fill-box;
    transform-origin: center;
    animation: where-pulse-b-l8irjyist5 3.6s ease-in-out infinite;
}

@keyframes where-pulse-b-l8irjyist5 {
    0%, 100% { opacity: 0.55; scale: 1; }
    50% { opacity: 1; scale: 1.5; }
}

.where-scene__traveller[b-l8irjyist5] {
    fill: #F6D3A2;
    filter: drop-shadow(0 0 6px rgba(246, 211, 162, 0.95)) drop-shadow(0 0 16px rgba(246, 211, 162, 0.6));
}

/* The cards stay readable over the drawing. */
.where-band--plain .explore-card[b-l8irjyist5] {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .where-scene__glow[b-l8irjyist5],
    .where-scene__rings--a[b-l8irjyist5],
    .where-scene__rings--b[b-l8irjyist5],
    .where-scene__road[b-l8irjyist5],
    .where-scene__stop[b-l8irjyist5] {
        animation: none;
    }

    .where-scene__traveller[b-l8irjyist5] {
        display: none;
    }
}

/* ---- "Travelling with me": the same map, composed the other way round ---- */
.statement[b-l8irjyist5] {
    background: linear-gradient(200deg, #1B636A 0%, var(--color-teal) 36%, #10454B 72%, #0B3237 100%);
}

    /* The tiled zellige gave way to the drawn map. */
    .statement[b-l8irjyist5]::after {
        display: none;
    }

    .statement > .container[b-l8irjyist5] {
        position: relative;
        z-index: 2;
    }

.statement-scene__glow--warm[b-l8irjyist5] {
    bottom: -30%;
    left: -14%;
    width: 60vw;
    max-width: 880px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(209, 129, 96, 0.28) 0%, rgba(209, 129, 96, 0.09) 40%, transparent 68%);
    animation: where-drift-b-l8irjyist5 24s ease-in-out infinite alternate-reverse;
}

.statement-scene__glow--cool[b-l8irjyist5] {
    top: -22%;
    right: -10%;
    width: 50vw;
    max-width: 760px;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(126, 196, 196, 0.2) 0%, rgba(126, 196, 196, 0.06) 42%, transparent 68%);
    animation: where-drift-b-l8irjyist5 28s ease-in-out infinite alternate;
}

.statement-scene__rings--a[b-l8irjyist5] {
    transform-origin: 1300px 140px;
    animation: where-turn-b-l8irjyist5 180s linear infinite reverse;
}

.statement-scene__rings--b[b-l8irjyist5] {
    transform-origin: 60px 980px;
    animation: where-turn-b-l8irjyist5 210s linear infinite;
}

/* A big, thick, see-through Yaz.
   - draws itself in when the section arrives,
   - floats and breathes,
   - a light runs along its strokes every few seconds,
   - leans toward the pointer and glows brighter as it comes near
     (--yx, --yy, --yglow from motion.js; all 0 without a mouse). */
.statement[b-l8irjyist5] {
    --yx: 0;
    --yy: 0;
    --yglow: 0;
}

.statement-scene__yaz-lean[b-l8irjyist5] {
    transform-origin: 1300px 190px;
    translate: calc(var(--yx) * 22px) calc(var(--yy) * 14px);
    rotate: calc(var(--yx) * 6deg);
    scale: calc(1 + var(--yglow) * 0.06);
    transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.9s cubic-bezier(0.16, 1, 0.3, 1), scale 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.statement-scene__yaz-float[b-l8irjyist5] {
    animation: yaz-float-b-l8irjyist5 9s ease-in-out infinite;
}

@keyframes yaz-float-b-l8irjyist5 {
    0%, 100% { translate: 0 0; opacity: 0.85; }
    50% { translate: 0 -10px; opacity: 1; }
}

.statement-scene__yaz path[b-l8irjyist5] {
    fill: none;
    stroke: url(#statement-yaz-ink);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: calc(0.36 + var(--yglow) * 0.4);
    filter: drop-shadow(0 0 calc(3px + var(--yglow) * 5px) rgba(242, 201, 143, calc(0.4 + var(--yglow) * 0.5)));
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: opacity 0.6s ease, filter 0.6s ease, stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

/* Before the section has scrolled in, the letter waits undrawn (only when the
   motion script is running, so it is never left missing). */
html.mbs-motion .statement:not(:has(.is-visible)) .statement-scene__yaz path[b-l8irjyist5] {
    stroke-dashoffset: 1;
}

.statement-scene__yaz path.statement-scene__yaz-shine[b-l8irjyist5] {
    stroke: #FFF1D6;
    stroke-width: 4;
    stroke-dasharray: 0.08 0.92;
    opacity: calc(0.5 + var(--yglow) * 0.4);
    filter: drop-shadow(0 0 4px rgba(255, 236, 200, 0.9));
    animation: yaz-shine-b-l8irjyist5 7s linear infinite 2.6s;
}

html.mbs-motion .statement:not(:has(.is-visible)) .statement-scene__yaz path.statement-scene__yaz-shine[b-l8irjyist5] {
    opacity: 0;
}

@keyframes yaz-shine-b-l8irjyist5 {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* Kept to the open ground under the points, clear of the text. */
.statement-scene__road[b-l8irjyist5] {
    stroke: rgba(227, 185, 138, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .statement-scene__glow--warm[b-l8irjyist5],
    .statement-scene__glow--cool[b-l8irjyist5],
    .statement-scene__rings--a[b-l8irjyist5],
    .statement-scene__rings--b[b-l8irjyist5],
    .statement-scene__yaz-float[b-l8irjyist5] {
        animation: none;
    }

    .statement-scene__yaz path.statement-scene__yaz-shine[b-l8irjyist5] {
        display: none;
    }
}

/* Phones: the section is tall and narrow, so the Yaz lands behind the
   headline and the road crosses the points. Quieter Yaz, no road. */
@media (max-width: 700px) {
    .statement-scene__yaz path[b-l8irjyist5] {
        opacity: 0.16;
    }

    .statement-scene__yaz-float[b-l8irjyist5] {
        animation: none;
    }

    .statement-scene__yaz path.statement-scene__yaz-shine[b-l8irjyist5] {
        display: none;
    }

    .statement-scene .where-scene__road[b-l8irjyist5],
    .statement-scene .where-scene__stops[b-l8irjyist5],
    .statement-scene .where-scene__traveller[b-l8irjyist5] {
        display: none;
    }
}

.statement-scene__roadmap[b-l8irjyist5] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 220px;
}

/* =====================================================================
   Homepage order, as recommended: hero + one trust line, Meet Syphax,
   three tours + the region cards, reviews, what travelling with me is like,
   how it works, a few photographs, journal, FAQ, one final form.
   ===================================================================== */

/* ---- One compact trust line under the hero ----
   Icon beside the number, the label under the number. */
.trust-strip[b-l8irjyist5] {
    padding: 22px 0;
}

.trust-strip__grid[b-l8irjyist5] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 0;
}

.trust-item[b-l8irjyist5] {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    justify-content: center;
    text-align: left;
}

    .trust-item .trust-item__icon[b-l8irjyist5] {
        grid-row: 1 / 3;
        width: 36px;
        height: 36px;
    }

.trust-item__num[b-l8irjyist5] {
    font-size: 1.05rem;
    line-height: 1.15;
}

.trust-item .label[b-l8irjyist5] {
    font-size: 0.66rem;
}

@media (max-width: 640px) {
    .trust-item[b-l8irjyist5] {
        justify-content: start;
    }
}

/* ---- Reviews: the same cards and carousel as the routes and journal ---- */
.m-carousel--always[b-l8irjyist5] {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Room for the card shadows, which a scroller would otherwise clip. */
    margin-inline: -12px;
    padding: 8px 12px 26px;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
}

    .m-carousel--always[b-l8irjyist5]::-webkit-scrollbar {
        display: none;
    }

    .m-carousel--always > .review-card[b-l8irjyist5] {
        flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
        min-width: 0;
        max-width: none;
        scroll-snap-align: start;
    }

@media (max-width: 1000px) {
    .m-carousel--always > .review-card[b-l8irjyist5] {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
}

@media (max-width: 700px) {
    .m-carousel--always[b-l8irjyist5] {
        gap: 14px;
        margin-inline: calc(-1 * var(--space-4));
        padding: 6px var(--space-4) 22px;
        scroll-padding-inline: var(--space-4);
    }

        .m-carousel--always > .review-card[b-l8irjyist5] {
            flex-basis: 82%;
            max-width: 340px;
        }
}

.review-card[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

    .review-card[b-l8irjyist5]::before {
        content: none;
    }

.review-card__body[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: var(--space-4);
}

.review-card__stars[b-l8irjyist5] {
    display: flex;
    gap: 3px;
    color: var(--color-gold);
}

.review-card__route[b-l8irjyist5] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(23, 20, 18, 0.5);
}

.review-card__quote[b-l8irjyist5] {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--color-ink);
    -webkit-line-clamp: 5;
}

/* The same ruled footer as a route card, held to the bottom. */
.review-card__foot[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 20, 18, 0.1);
}

[b-l8irjyist5] .review-card__avatar,
.review-card__avatar[b-l8irjyist5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-card__who[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

/* Arrows and dots under the strip, shown whenever it scrolls. */
.m-carousel__controls[b-l8irjyist5] {
    display: none;
}

    .m-carousel__controls.is-on[b-l8irjyist5] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 6px 0 0;
    }

        .m-carousel__controls.is-on .m-carousel__dots[b-l8irjyist5] {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

    .m-carousel__controls .m-carousel__dot[b-l8irjyist5] {
        position: relative;
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(21, 82, 89, 0.25);
        cursor: pointer;
        transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    }

        .m-carousel__controls .m-carousel__dot.is-active[b-l8irjyist5] {
            width: 26px;
            background: var(--color-terracotta);
        }

        .m-carousel__controls .m-carousel__dot[b-l8irjyist5]::after {
            content: "";
            position: absolute;
            inset: -10px -4px;
        }

.m-carousel__arrow[b-l8irjyist5] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(21, 82, 89, 0.25);
    border-radius: 50%;
    background: #fff;
    color: var(--color-teal);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

    .m-carousel__arrow:hover:not(:disabled)[b-l8irjyist5] {
        background: var(--color-teal);
        border-color: var(--color-teal);
        color: var(--color-off-white);
    }

    .m-carousel__arrow:disabled[b-l8irjyist5] {
        opacity: 0.35;
        cursor: default;
        box-shadow: none;
    }

@media (max-width: 700px) {
    .m-carousel__arrow[b-l8irjyist5] {
        display: none;
    }
}

/* ---- Joins for the new order ---- */
.section.meet-v2 + .section.featured-routes[b-l8irjyist5] {
    padding-top: calc(var(--home-y) * 0.55);
}

/* How it works follows the teal section: sand from the top, fading into the
   cream photo strip below. */
.how-it-works[b-l8irjyist5] {
    background: linear-gradient(to bottom, #EFEAE0 0, #EFEAE0 62%, var(--color-off-white) 100%);
}

.review-card__quote.review-card__quote--expanded[b-l8irjyist5] {
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Meet Syphax's tall portrait already leaves room below it. */
.section.meet-v2:has(+ .section.featured-routes)[b-l8irjyist5] {
    padding-bottom: calc(var(--home-y) * 0.6);
}

/* =====================================================================
   The closing "see all" card at the end of every carousel
   Teal with a warm glow, like the map bands, so it reads as a way out
   rather than one more item. Routes and journal only carousel on phones,
   so their closing card only shows there (--phone).
   ===================================================================== */
.m-carousel__end[b-l8irjyist5] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    min-height: 220px;
    padding: var(--space-4);
    background:
        radial-gradient(circle at 88% 8%, rgba(209, 129, 96, 0.38), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(126, 196, 196, 0.16), transparent 55%),
        linear-gradient(160deg, #1B636A 0%, var(--color-teal) 45%, #0B3237 100%);
    color: var(--color-off-white);
    text-decoration: none;
    isolation: isolate;
}

    .m-carousel__end:hover[b-l8irjyist5] {
        text-decoration: none;
        color: var(--color-off-white);
    }

    /* Faint contour rings, echoing the map sections. */
    .m-carousel__end[b-l8irjyist5]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: repeating-radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(244, 241, 234, 0.07) 26px 27px);
        pointer-events: none;
    }

.m-carousel__end-arrow[b-l8irjyist5] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 10px;
    border: 1.5px solid rgba(244, 241, 234, 0.45);
    border-radius: 50%;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, translate 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-carousel__end:hover .m-carousel__end-arrow[b-l8irjyist5] {
    background: var(--color-off-white);
    border-color: var(--color-off-white);
    color: var(--color-teal);
    translate: 6px 0;
}

.m-carousel__end-kicker[b-l8irjyist5] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E3B98A;
}

.m-carousel__end-title[b-l8irjyist5] {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 1vw + 1.1rem, 1.8rem);
    font-weight: 600;
    line-height: 1.12;
    text-wrap: balance;
}

/* Routes and journal are grids on wider screens: no closing card there. */
.m-carousel__end--phone[b-l8irjyist5] {
    display: none;
}

@media (max-width: 700px) {
    .m-carousel__end--phone[b-l8irjyist5] {
        display: flex;
    }

    /* Never dimmed like an out-of-focus card: it's the destination. */
    .m-carousel.is-carousel > .card.m-carousel__end.m-carousel__end:not(.is-active)[b-l8irjyist5] {
        transform: none;
        opacity: 1;
    }
}

/* Reviews: the same width as a review card. */
.m-carousel--always > .m-carousel__end[b-l8irjyist5] {
    flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 1000px) {
    .m-carousel--always > .m-carousel__end[b-l8irjyist5] {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
}

@media (max-width: 700px) {
    .m-carousel--always > .m-carousel__end[b-l8irjyist5] {
        flex-basis: 82%;
        max-width: 340px;
    }
}

/* Photo strip: a tile as tall as the photographs. */
.filmstrip__more[b-l8irjyist5] {
    width: clamp(220px, 22vw, 300px);
    min-height: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
}

    .filmstrip__more:hover[b-l8irjyist5] {
        transform: none;
    }

/* =====================================================================
   Hero, cinematic: the photograph across the whole band under a dark
   wash, the header floating over it, a very large serif headline whose
   closing phrase turns italic gold, and pill buttons.
   ===================================================================== */
.hero[b-l8irjyist5] {
    background: #0A2A2E;
    /* Room for the header, which floats over the photograph on this page. */
    padding-top: 76px;
}

.hero__backdrop[b-l8irjyist5] {
    left: 0;
}

[b-l8irjyist5] .hero__photo {
    object-position: 72% center;
}

/* The cut-out was aligned to the old three-quarter box; the full-width
   photograph under a dark wash doesn't need it. */
.hero__backdrop--cutout[b-l8irjyist5] {
    display: none;
}

.hero__wash[b-l8irjyist5] {
    background:
        linear-gradient(90deg,
            rgba(6, 28, 31, 0.92) 0%,
            rgba(6, 28, 31, 0.8) 34%,
            rgba(6, 28, 31, 0.42) 62%,
            rgba(6, 28, 31, 0.12) 100%),
        linear-gradient(to bottom,
            rgba(6, 28, 31, 0.7) 0%,
            rgba(6, 28, 31, 0) 22%,
            rgba(6, 28, 31, 0) 62%,
            rgba(6, 28, 31, 0.75) 100%);
}

.hero__inner[b-l8irjyist5] {
    min-height: min(calc(100vh - 76px), 820px);
    padding-top: clamp(40px, 6vw, 88px);
    padding-bottom: clamp(48px, 6vw, 96px);
}

.hero__pane[b-l8irjyist5] {
    max-width: 48rem;
}

.hero__kicker[b-l8irjyist5] {
    gap: 16px;
    margin-bottom: clamp(18px, 2vw, 28px);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 0.2vw + 0.68rem, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #E9B86A;
}

.hero__kicker-rule[b-l8irjyist5] {
    width: 44px;
    background: #E9B86A;
}

.hero__title[b-l8irjyist5] {
    margin-bottom: clamp(20px, 2.4vw, 32px);
    font-size: clamp(2.9rem, 5.4vw + 0.4rem, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.028em;
}

/* The closing phrase in italic gold, in place of the drawn underline. */
.hero__title-word--accent[b-l8irjyist5] {
    font-style: italic;
    font-weight: 600;
    color: #E9B86A;
}

.hero__title-word--last[b-l8irjyist5] {
    background-image: none;
    padding-bottom: 0;
}

.hero__lede[b-l8irjyist5] {
    max-width: 46ch;
    margin-bottom: clamp(24px, 3vw, 40px);
    font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.hero__actions[b-l8irjyist5] {
    gap: 14px;
}

    .hero__actions .btn[b-l8irjyist5] {
        padding: 1.05rem 2rem;
        border-radius: 999px;
        font-size: 1rem;
    }

    .hero__actions .btn--primary[b-l8irjyist5] {
        background: var(--color-terracotta);
        color: #fff;
        box-shadow: 0 14px 30px -14px rgba(191, 117, 90, 0.9);
    }

        .hero__actions .btn--primary:hover[b-l8irjyist5] {
            background: #A9624A;
            color: #fff;
        }

    .hero__actions .btn--outline[b-l8irjyist5] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.45);
        color: #fff;
    }

    .hero__actions .hero__wa[b-l8irjyist5] {
        gap: 10px;
    }

@media (max-width: 900px) {
    .hero[b-l8irjyist5] {
        padding-top: 68px;
    }

    .hero__inner[b-l8irjyist5] {
        min-height: 0;
    }

    .hero__title[b-l8irjyist5] {
        font-size: clamp(2.5rem, 9vw, 3.6rem);
    }
}

/* Phones: the copy sits over the picture, so it gets the dark wash too. */
@media (max-width: 900px) {
    .hero__wash[b-l8irjyist5] {
        display: block;
        background: linear-gradient(to bottom,
            rgba(6, 28, 31, 0.82) 0%,
            rgba(6, 28, 31, 0.62) 45%,
            rgba(6, 28, 31, 0.78) 80%,
            rgba(6, 28, 31, 0.95) 100%);
    }
}

/* ---------- Trust figures as glass cards at the foot of the hero ---------- */
.hero__trust[b-l8irjyist5] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    padding-bottom: clamp(28px, 4vw, 48px);
}

.hero-stat[b-l8irjyist5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    color: #fff;
}

.hero-stat__icon[b-l8irjyist5] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(233, 184, 106, 0.16);
    color: #E9B86A;
}

    .hero-stat__icon[b-l8irjyist5]  svg,
    .hero-stat__icon svg[b-l8irjyist5] {
        width: 20px;
        height: 20px;
    }

.hero-stat__text[b-l8irjyist5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.hero-stat__num[b-l8irjyist5] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.hero-stat__label[b-l8irjyist5] {
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.hero__inner[b-l8irjyist5] {
    min-height: min(calc(100vh - 200px), 700px);
}

@media (max-width: 560px) {
    .hero__trust[b-l8irjyist5] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero-stat[b-l8irjyist5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }
}

/* The cards close the hero, so the copy no longer needs to fill the screen. */
.hero__inner[b-l8irjyist5] {
    min-height: 0;
    padding-bottom: clamp(28px, 3vw, 44px);
}

/* =====================================================================
   The whole hero on one screen: it fills the viewport, the copy centres
   in the space above the trust cards, and the type scales with the
   screen's height as well as its width so nothing spills below the fold.
   ===================================================================== */
@media (min-width: 901px) {
    .hero[b-l8irjyist5] {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
        padding-bottom: 0;
    }

    .hero__inner[b-l8irjyist5] {
        flex: 1;
        align-items: center;
        min-height: 0;
        padding-top: clamp(12px, 3vh, 48px);
        padding-bottom: clamp(12px, 3vh, 40px);
    }

    .hero__kicker[b-l8irjyist5] {
        margin-bottom: clamp(10px, 2vh, 26px);
    }

    .hero__title[b-l8irjyist5] {
        font-size: min(clamp(2.9rem, 5.4vw + 0.4rem, 6.2rem), 10.5vh);
        margin-bottom: clamp(12px, 2.2vh, 30px);
    }

    .hero__lede[b-l8irjyist5] {
        font-size: min(clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem), 2.4vh);
        margin-bottom: clamp(16px, 3vh, 36px);
    }

    .hero__actions[b-l8irjyist5] {
        margin-bottom: clamp(12px, 2.2vh, 24px);
    }

        .hero__actions .btn[b-l8irjyist5] {
            padding-block: clamp(0.75rem, 1.6vh, 1.05rem);
        }

    .hero__trust[b-l8irjyist5] {
        padding-bottom: clamp(16px, 3vh, 36px);
    }

    .hero-stat[b-l8irjyist5] {
        padding: clamp(10px, 1.4vh, 14px) 18px;
    }

    .hero-stat__icon[b-l8irjyist5] {
        width: 38px;
        height: 38px;
    }
}

/* Short laptop screens: the credential line goes, the lede gets tighter. */
@media (min-width: 901px) and (max-height: 820px) {
    .hero__proof-facts[b-l8irjyist5] {
        display: none;
    }

    .hero__lede[b-l8irjyist5] {
        line-height: 1.5;
    }
}

@media (min-width: 901px) {
    .hero__pane[b-l8irjyist5] {
        max-width: 60rem;
    }

    .hero__title[b-l8irjyist5] {
        font-size: min(clamp(2.9rem, 5.4vw + 0.4rem, 6.2rem), 9.4vh);
    }

    .hero__lede[b-l8irjyist5] {
        max-width: 62ch;
    }
}

/* =====================================================================
   Hero on phones
   - the photograph covers the whole hero (it used to stop at one screen
     height, leaving a hard edge where the plain colour took over);
   - one gradient over it, light at the top, deepening under the cards;
   - "Plan my trip" full width, the two others side by side under it;
   - the rating on one tidy line, the trust figures as compact cards.
   ===================================================================== */
@media (max-width: 900px) {
    .hero__stage[b-l8irjyist5] {
        height: 100%;
    }

    [b-l8irjyist5] .hero__photo {
        object-position: 62% 20%;
    }

    .hero__wash[b-l8irjyist5] {
        background: linear-gradient(to bottom,
            rgba(6, 28, 31, 0.55) 0%,
            rgba(6, 28, 31, 0.72) 30%,
            rgba(6, 28, 31, 0.86) 60%,
            rgba(6, 28, 31, 0.96) 100%);
    }

    .hero__inner[b-l8irjyist5] {
        padding-top: 28px;
        padding-bottom: 20px;
    }

    .hero__kicker[b-l8irjyist5] {
        align-items: flex-start;
        gap: 12px;
        font-size: 0.68rem;
        letter-spacing: 0.18em;
        line-height: 1.6;
    }

    .hero__kicker-rule[b-l8irjyist5] {
        width: 28px;
        margin-top: 0.8em;
    }

    .hero__title[b-l8irjyist5] {
        font-size: clamp(2.3rem, 10.5vw, 3.2rem);
        line-height: 1.02;
    }

    .hero__lede[b-l8irjyist5] {
        font-size: 1.02rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.84);
    }

    .hero__actions[b-l8irjyist5] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

        .hero__actions .btn[b-l8irjyist5] {
            width: 100%;
            padding: 0.9rem 0.8rem;
            font-size: 0.95rem;
        }

        .hero__actions .btn--primary[b-l8irjyist5] {
            grid-column: 1 / -1;
            padding-block: 1rem;
            font-size: 1.02rem;
        }

    /* The rating: faces, stars and the line on one row. */
    .hero__proof-row[b-l8irjyist5] {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .hero__proof-rating[b-l8irjyist5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
    }

    .hero__proof-count[b-l8irjyist5] {
        font-size: 0.88rem;
    }

    [b-l8irjyist5] .hero__face {
        width: 32px;
        height: 32px;
    }

    .hero__trust[b-l8irjyist5] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-bottom: 28px;
    }

    .hero-stat[b-l8irjyist5] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .hero-stat__icon[b-l8irjyist5] {
        width: 34px;
        height: 34px;
    }

        .hero-stat__icon svg[b-l8irjyist5],
        .hero-stat__icon[b-l8irjyist5]  svg {
            width: 17px;
            height: 17px;
        }

    .hero-stat__num[b-l8irjyist5] {
        font-size: 1.1rem;
    }

    .hero-stat__label[b-l8irjyist5] {
        font-size: 0.6rem;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 380px) {
    .hero__actions .btn[b-l8irjyist5] {
        font-size: 0.88rem;
        padding-inline: 0.5rem;
    }
}

@media (max-width: 900px) {
    .hero__actions .btn[b-l8irjyist5] {
        white-space: nowrap;
    }

    .hero__actions .btn--outline:not(.hero__wa)[b-l8irjyist5]  svg {
        display: none;
    }
}

/* Anchored near the top: the frame is wider than the photograph's shape, so
   the crop comes off the top and bottom, and the heads are near the top. */
[b-l8irjyist5] .hero__photo {
    object-position: 70% 14%;
}

@media (max-width: 900px) {
    [b-l8irjyist5] .hero__photo {
        object-position: 62% 12%;
    }
}

/* "WhatsApp me": the real WhatsApp green and logo, so it reads at a glance. */
.hero__actions .hero__wa[b-l8irjyist5] {
    gap: 10px;
    background: #25D366;
    border: 1px solid #25D366;
    color: #fff;
    box-shadow: 0 14px 30px -14px rgba(37, 211, 102, 0.75);
}

    .hero__actions .hero__wa:hover[b-l8irjyist5] {
        background: #1EBE5A;
        border-color: #1EBE5A;
        color: #fff;
    }

/* "Ask Syphax on WhatsApp" in the regions band: a WhatsApp button now. */
.explore__ask-btn.btn--whatsapp[b-l8irjyist5] {
    gap: 10px;
    border: 1px solid #25D366;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
}

    .explore__ask-btn.btn--whatsapp:hover[b-l8irjyist5] {
        background: #1EBE5A;
        border-color: #1EBE5A;
        color: #fff;
    }

.how-it-works__cta.btn--whatsapp[b-l8irjyist5] {
    border-radius: 999px;
    padding-inline: 1.8rem;
}

.explore__links[b-l8irjyist5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}
/* /Components/Pages/Journal.razor.rz.scp.css */
.visually-hidden[b-nh3j9i6c1h] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Controls: search + view toggle */
.journal-controls[b-nh3j9i6c1h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    max-width: 880px;
    margin: 0 auto var(--space-5);
}

.journal-search[b-nh3j9i6c1h] {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}

.journal-search__icon[b-nh3j9i6c1h] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(23, 20, 18, 0.4);
    pointer-events: none;
}

.journal-search input[b-nh3j9i6c1h] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.65rem 1rem 0.65rem 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(23, 20, 18, 0.18);
    background: #fff;
    color: var(--color-ink);
}

    .journal-search input:focus-visible[b-nh3j9i6c1h] {
        outline: 2px solid var(--color-teal);
        outline-offset: 1px;
    }

    .journal-search input[b-nh3j9i6c1h]::-webkit-search-cancel-button {
        cursor: pointer;
    }

.journal-view-toggle[b-nh3j9i6c1h] {
    display: inline-flex;
    background: rgba(23, 20, 18, 0.06);
    border-radius: 999px;
    padding: 4px;
    flex-shrink: 0;
}

.journal-view-toggle__btn[b-nh3j9i6c1h] {
    background: none;
    border: none;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.journal-view-toggle__btn--active[b-nh3j9i6c1h] {
    background: var(--color-teal);
    color: var(--color-off-white);
}

.journal-empty[b-nh3j9i6c1h] {
    text-align: center;
    color: rgba(23, 20, 18, 0.6);
    max-width: 880px;
    margin: 0 auto;
    padding: var(--space-5) 0;
}

.journal-feed[b-nh3j9i6c1h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 880px;
    margin: 0 auto;
}

.journal-post[b-nh3j9i6c1h] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-4);
    /* Top-aligned, not centred — centring floated the photo down the page and
       left a gap above it whenever the story ran longer than the image. */
    align-items: start;
}

    .journal-post:nth-child(even)[b-nh3j9i6c1h] {
        direction: rtl;
    }

        .journal-post:nth-child(even) > *[b-nh3j9i6c1h] {
            direction: ltr;
        }

[b-nh3j9i6c1h] .journal-post__photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.journal-post__body h2[b-nh3j9i6c1h] {
    margin: 8px 0;
}

.journal-post__body p[b-nh3j9i6c1h] {
    color: rgba(23, 20, 18, 0.8);
    margin: 0;
}

/* Gallery view */
.journal-gallery[b-nh3j9i6c1h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    max-width: 1100px;
    margin: 0 auto;
}

.journal-tile[b-nh3j9i6c1h] {
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: #fff;
}

.journal-tile__photo-wrap[b-nh3j9i6c1h] {
    position: relative;
    aspect-ratio: 4 / 3;
}

[b-nh3j9i6c1h] .journal-tile__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journal-tile__scrim[b-nh3j9i6c1h] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: var(--space-3);
    background: linear-gradient(0deg, rgba(23, 20, 18, 0.85) 0%, rgba(23, 20, 18, 0) 55%);
}

.journal-tile__date[b-nh3j9i6c1h] {
    color: rgba(244, 241, 234, 0.8);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.journal-tile__title[b-nh3j9i6c1h] {
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
}

.journal-tile[b-nh3j9i6c1h] {
    display: block;
    color: inherit;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

    .journal-tile:hover[b-nh3j9i6c1h],
    .journal-tile:focus-visible[b-nh3j9i6c1h] {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lift);
        text-decoration: none;
    }

/* Tag filter chips */
.journal-tags[b-nh3j9i6c1h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 880px;
    margin: 0 auto var(--space-5);
}

.journal-tag[b-nh3j9i6c1h] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(23, 20, 18, 0.18);
    background: transparent;
    color: rgba(23, 20, 18, 0.75);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .journal-tag:hover[b-nh3j9i6c1h] {
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

.journal-tag--active[b-nh3j9i6c1h] {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-off-white);
}

/* Post cards now link through to the entry's own page */
.journal-post__photo-link[b-nh3j9i6c1h] {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.journal-post__body h2 a[b-nh3j9i6c1h] {
    color: var(--color-ink);
}

    .journal-post__body h2 a:hover[b-nh3j9i6c1h] {
        color: var(--color-teal);
        text-decoration: none;
    }

.journal-post__tags[b-nh3j9i6c1h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-3);
}

.journal-post__tag[b-nh3j9i6c1h] {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.55);
    border: 1px solid rgba(23, 20, 18, 0.14);
    border-radius: 999px;
    padding: 3px 10px;
}

.journal-post__more[b-nh3j9i6c1h] {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Signup */
.journal-signup[b-nh3j9i6c1h] {
    background: var(--color-teal);
    color: var(--color-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .journal-signup .label[b-nh3j9i6c1h] {
        color: var(--color-gold);
    }

    .journal-signup h2[b-nh3j9i6c1h] {
        color: var(--color-off-white);
    }

    .journal-signup p[b-nh3j9i6c1h] {
        color: rgba(244, 241, 234, 0.85);
        margin-bottom: var(--space-4);
    }

@media (max-width: 720px) {
    .journal-post[b-nh3j9i6c1h] {
        grid-template-columns: 1fr;
        direction: ltr;
    }

        .journal-post:nth-child(even)[b-nh3j9i6c1h] {
            direction: ltr;
        }

    .journal-controls[b-nh3j9i6c1h] {
        flex-direction: column;
        align-items: stretch;
    }

    .journal-search[b-nh3j9i6c1h] {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .journal-view-toggle[b-nh3j9i6c1h] {
        align-self: flex-start;
    }

    .journal-gallery[b-nh3j9i6c1h] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--space-3);
    }

    /* Captions come out of the photo on phones. Overlaid on a ~160px-wide
       tile, a long title outgrew the image and collided with the date.
       Releasing the wrapper's fixed ratio lets the caption sit below the
       photo instead, turning each tile into a plain card. */
    .journal-tile__photo-wrap[b-nh3j9i6c1h] {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }

    [b-nh3j9i6c1h] .journal-tile__photo {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .journal-tile__scrim[b-nh3j9i6c1h] {
        position: static;
        background: none;
        padding: var(--space-3);
        gap: 4px;
    }

    .journal-tile__date[b-nh3j9i6c1h] {
        color: rgba(23, 20, 18, 0.55);
    }

    .journal-tile__title[b-nh3j9i6c1h] {
        color: var(--color-ink);
    }

    .journal-tags[b-nh3j9i6c1h] {
        gap: 6px;
    }
}

/* ---------- Site-wide redesign: the journal on the new system ---------- */

/* Search and view toggle: a white card pulled up over the hero's foot. */
.journal-controls[b-nh3j9i6c1h] {
    position: relative;
    z-index: 2;
    max-width: none;
    margin: calc(-1 * var(--page-y) - 48px) 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.journal-post__body h2[b-nh3j9i6c1h] {
    font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
    line-height: 1.12;
}

    .journal-post__body h2 a[b-nh3j9i6c1h] {
        color: var(--color-teal);
    }

.journal-post__more[b-nh3j9i6c1h] {
    color: var(--color-terracotta);
}

/* WhatsApp updates: a slim teal strip rather than a second big box. */
.journal-signup-band[b-nh3j9i6c1h] {
    padding-bottom: var(--page-y);
}

.journal-signup[b-nh3j9i6c1h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    max-width: none;
    padding: var(--space-5);
    border-radius: 18px;
    text-align: left;
}

    .journal-signup .label.waypoint[b-nh3j9i6c1h] {
        margin-bottom: 8px;
    }

    .journal-signup h2[b-nh3j9i6c1h] {
        margin: 0;
        font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
    }

    .journal-signup p[b-nh3j9i6c1h] {
        margin: 6px 0 0;
    }

    .journal-signup .btn--whatsapp[b-nh3j9i6c1h] {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

.journal-signup__text[b-nh3j9i6c1h] {
    position: relative;
    z-index: 1;
}

.journal-signup[b-nh3j9i6c1h]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, rgba(244, 241, 234, 0.06) 28px 29px);
}

@media (max-width: 720px) {
    .journal-controls[b-nh3j9i6c1h] {
        padding: var(--space-4);
    }
}

.journal-signup[b-nh3j9i6c1h] {
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 40%, #0B3237 100%);
}

    .journal-signup .label.waypoint[b-nh3j9i6c1h] {
        color: #E3B98A;
        opacity: 1;
    }
/* /Components/Pages/JournalEntryPage.razor.rz.scp.css */
.entry__inner[b-fdwyofemj2] {
    max-width: 760px;
}

.entry__back[b-fdwyofemj2] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(23, 20, 18, 0.6);
    margin-bottom: var(--space-4);
}

    .entry__back:hover[b-fdwyofemj2] {
        color: var(--color-teal);
        text-decoration: none;
    }

.entry__header h1[b-fdwyofemj2] {
    margin: 8px 0 var(--space-3);
}

.entry__tags[b-fdwyofemj2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-4);
}

.entry__tag[b-fdwyofemj2] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-teal);
    border: 1px solid rgba(21, 82, 89, 0.3);
    border-radius: 999px;
    padding: 4px 11px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .entry__tag:hover[b-fdwyofemj2] {
        background: var(--color-teal);
        color: var(--color-off-white);
        text-decoration: none;
    }

[b-fdwyofemj2] .entry__lead {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

/* ---------- Story body ----------
   Styles whatever the dashboard editor produces. The toolbar is limited to
   h2/h3, bold, italic, quote, lists and links, so this covers all of it.
   ::deep because the body is inserted as raw HTML, which never carries this
   component's scope attribute — without it none of these rules applied and
   posts rendered with browser-default headings and lists. */
.entry__body[b-fdwyofemj2] {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(23, 20, 18, 0.85);
}

    .entry__body[b-fdwyofemj2]  h2 {
        font-size: 1.6rem;
        margin: var(--space-5) 0 var(--space-3);
    }

    .entry__body[b-fdwyofemj2]  h3 {
        font-size: 1.25rem;
        margin: var(--space-4) 0 var(--space-2);
    }

    .entry__body[b-fdwyofemj2]  p {
        margin: 0 0 var(--space-4);
    }

    .entry__body[b-fdwyofemj2]  a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .entry__body[b-fdwyofemj2]  ul,
    .entry__body[b-fdwyofemj2]  ol {
        margin: 0 0 var(--space-4);
        padding-left: 1.4em;
    }

    .entry__body[b-fdwyofemj2]  li {
        margin-bottom: 6px;
    }

    .entry__body[b-fdwyofemj2]  blockquote {
        margin: var(--space-4) 0;
        padding: var(--space-2) 0 var(--space-2) var(--space-4);
        border-left: 3px solid var(--color-gold);
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-style: italic;
        color: var(--color-ink);
    }

    .entry__body[b-fdwyofemj2]  img {
        width: 100%;
        border-radius: var(--radius-md);
        margin: var(--space-4) 0;
    }

/* ---------- Gallery ---------- */
.entry__gallery[b-fdwyofemj2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.entry__figure[b-fdwyofemj2] {
    margin: 0;
}

    .entry__figure[b-fdwyofemj2]  img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    .entry__figure figcaption[b-fdwyofemj2] {
        margin-top: 8px;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: rgba(23, 20, 18, 0.55);
    }

/* A lone photo shouldn't sit in half a row */
.entry__figure:only-child[b-fdwyofemj2] {
    grid-column: 1 / -1;
}

    .entry__figure:only-child img[b-fdwyofemj2] {
        aspect-ratio: 16 / 9;
    }

/* ---------- "Drive this route" call to action ---------- */
/* Sits between the story and the next-entry links, where a reader who has just
   finished the piece is most likely to act on it. */
.entry__route[b-fdwyofemj2] {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: #EFEAE0;
    border-radius: var(--radius-md);
}

.entry__route .label[b-fdwyofemj2] {
    display: block;
    margin-bottom: var(--space-2);
}

.entry__route-heading[b-fdwyofemj2] {
    font-size: 1.35rem;
    margin: 0 0 var(--space-4);
}

/* ---------- Keep reading ---------- */
.entry__more[b-fdwyofemj2] {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(23, 20, 18, 0.12);
}

.entry__more .label[b-fdwyofemj2] {
    display: block;
    margin-bottom: var(--space-3);
}

.entry__more-list[b-fdwyofemj2] {
    display: grid;
    gap: var(--space-3);
}

.entry__more-item[b-fdwyofemj2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    color: var(--color-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .entry__more-item:hover[b-fdwyofemj2] {
        transform: translateX(3px);
        box-shadow: var(--shadow-lift);
        text-decoration: none;
    }

.entry__more-title[b-fdwyofemj2] {
    font-family: var(--font-display);
    font-size: 1.05rem;
}

@media (max-width: 640px) {
    .entry__gallery[b-fdwyofemj2] {
        grid-template-columns: 1fr;
    }

    [b-fdwyofemj2] .entry__lead {
        aspect-ratio: 4 / 3;
    }

    .entry__body[b-fdwyofemj2] {
        font-size: 1rem;
    }
}

.entry__draft[b-fdwyofemj2] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: #fff4d6;
    border: 1px dashed #c9a13b;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}

/* ---------- Site-wide redesign: the story on the new system ---------- */
.entry-hero[b-fdwyofemj2] {
    padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 6vw, 88px);
}

.entry--lead + *[b-fdwyofemj2] {
    margin-top: 0;
}

/* With a lead photo, the hero runs deeper and the photo overlaps its foot. */
.entry-hero:has(+ .entry--lead)[b-fdwyofemj2] {
    padding-bottom: clamp(140px, 14vw, 220px);
}

.entry-hero__inner[b-fdwyofemj2] {
    position: relative;
    z-index: 1;
}

    .entry-hero__inner h1[b-fdwyofemj2] {
        margin: 0;
        font-size: clamp(2.3rem, 3.2vw + 1rem, 4.2rem);
        line-height: 1.04;
        letter-spacing: -0.02em;
        color: var(--color-off-white);
    }

    .entry-hero__inner .entry__back[b-fdwyofemj2] {
        color: rgba(244, 241, 234, 0.7);
    }

        .entry-hero__inner .entry__back:hover[b-fdwyofemj2] {
            color: var(--color-off-white);
        }

    .entry-hero__inner .entry__tags[b-fdwyofemj2] {
        margin: var(--space-4) 0 0;
    }

    .entry-hero__inner .entry__tag[b-fdwyofemj2] {
        border-color: rgba(244, 241, 234, 0.35);
        color: var(--color-off-white);
    }

        .entry-hero__inner .entry__tag:hover[b-fdwyofemj2] {
            background: var(--color-off-white);
            color: var(--color-teal);
        }

.entry[b-fdwyofemj2] {
    padding: var(--page-y) 0;
}

.entry--lead[b-fdwyofemj2] {
    padding-top: 0;
}

    .entry--lead[b-fdwyofemj2]  .entry__lead {
        position: relative;
        z-index: 2;
        margin-top: clamp(-180px, -12vw, -100px);
        border-radius: 18px;
        box-shadow: 0 30px 60px -30px rgba(11, 50, 55, 0.5);
    }

/* Reading column: generous line length and spacing. */
.entry__body[b-fdwyofemj2] {
    font-size: 1.1rem;
    line-height: 1.8;
}

.entry__route[b-fdwyofemj2] {
    border-left: 4px solid var(--color-gold);
}

.entry__more-title[b-fdwyofemj2] {
    color: var(--color-teal);
    font-size: 1.2rem;
}
/* /Components/Pages/Logbook.razor.rz.scp.css */
/* ---------- Real stats, replacing the old "rating goes here" placeholder ---------- */
.logbook-stats[b-c8i0u4lfc3] {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    align-items: start;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(23, 20, 18, 0.14);
}

.logbook-stats__figure[b-c8i0u4lfc3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logbook-stats__num[b-c8i0u4lfc3] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw + 1rem, 2.9rem);
    font-weight: 500;
    line-height: 1;
    color: var(--color-ink);
}

.logbook-stats__stars[b-c8i0u4lfc3] {
    display: flex;
    gap: 2px;
    color: var(--color-gold);
    margin: 2px 0;
}

.logbook-stats .label[b-c8i0u4lfc3] {
    color: rgba(23, 20, 18, 0.55);
}

.logbook-stats__note[b-c8i0u4lfc3] {
    grid-column: 4;
    margin: 0;
    align-self: center;
    max-width: 42ch;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(23, 20, 18, 0.7);
    border-left: 2px solid var(--color-gold);
    padding-left: var(--space-3);
}

.logbook-verified[b-c8i0u4lfc3] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 20, 18, 0.1);
}

.logbook-verified__links[b-c8i0u4lfc3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.logbook-verified__links a[b-c8i0u4lfc3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-ink);
}

.logbook-verified__links a:hover[b-c8i0u4lfc3] {
    color: var(--color-rust);
}

/* ---------- Postcards ---------- */
.postcard-grid[b-c8i0u4lfc3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    /* Every card identical: 1fr rows equalise across rows, not just within one,
       and the clamped quote keeps that shared height sensible. */
    grid-auto-rows: 1fr;
}

.postcard[b-c8i0u4lfc3] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(23, 20, 18, 0.12);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    /* Pinned-to-a-board tilt, straightening as you approach it. */
    transform: rotate(-0.6deg);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

    .postcard:nth-child(even)[b-c8i0u4lfc3] {
        transform: rotate(0.7deg);
    }

    .postcard:nth-child(3n)[b-c8i0u4lfc3] {
        transform: rotate(-0.3deg);
    }

    .postcard:hover[b-c8i0u4lfc3] {
        transform: rotate(0deg) translateY(-6px);
        box-shadow: var(--shadow-lift);
    }

.postcard__stamp[b-c8i0u4lfc3] {
    position: absolute;
    top: -10px;
    right: var(--space-4);
    background: var(--color-off-white);
    border: 1px dashed rgba(23, 20, 18, 0.35);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 1.3rem;
    transform: rotate(4deg);
    line-height: 1;
    transition: transform 0.3s ease;
}

    .postcard:hover .postcard__stamp[b-c8i0u4lfc3] {
        transform: rotate(-2deg) scale(1.08);
    }

[b-c8i0u4lfc3] .postcard__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.postcard__stars[b-c8i0u4lfc3] {
    display: flex;
    gap: 2px;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.postcard__quote[b-c8i0u4lfc3] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
    /* Clamped so a long review can't stretch its card past the others. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.postcard__more[b-c8i0u4lfc3] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-teal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .postcard__more:hover[b-c8i0u4lfc3] {
        color: var(--color-terracotta);
    }

.postcard__divider[b-c8i0u4lfc3] {
    /* Pushed to the bottom so the name and date line up across every card,
       however short the review above it is. */
    margin-top: auto;
    border-top: 1px dashed rgba(23, 20, 18, 0.2);
    margin-bottom: var(--space-3);
}

.postcard__meta[b-c8i0u4lfc3] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: 0.9rem;
}

.postcard__name[b-c8i0u4lfc3] {
    font-weight: 600;
    color: var(--color-ink);
}

.postcard__when[b-c8i0u4lfc3] {
    font-size: 0.78rem;
    color: rgba(23, 20, 18, 0.5);
    white-space: nowrap;
}

.postcard__route[b-c8i0u4lfc3] {
    margin-top: 6px;
    font-size: 0.8rem;
}

.logbook-empty[b-c8i0u4lfc3] {
    max-width: 60ch;
    color: rgba(23, 20, 18, 0.7);
}

/* ---------- Full review panel ---------- */
.review-modal[b-c8i0u4lfc3] {
    position: fixed;
    inset: 0;
    /* Above the sticky header (800) and the floating WhatsApp button (900). */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(23, 20, 18, 0.72);
    backdrop-filter: blur(4px);
    animation: reviewFade-b-c8i0u4lfc3 0.22s ease both;
}

@keyframes reviewFade-b-c8i0u4lfc3 {
    from {
        opacity: 0;
    }
}

.review-modal__panel[b-c8i0u4lfc3] {
    position: relative;
    width: min(560px, 100%);
    max-height: 86vh;
    max-height: 86dvh;
    overflow-y: auto;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 70px rgba(23, 20, 18, 0.4);
    padding: var(--space-5);
    animation: reviewRise-b-c8i0u4lfc3 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes reviewRise-b-c8i0u4lfc3 {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
}

.review-modal__close[b-c8i0u4lfc3] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(23, 20, 18, 0.15);
    border-radius: 50%;
    background: #fff;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .review-modal__close:hover[b-c8i0u4lfc3] {
        background: var(--color-ink);
        color: var(--color-off-white);
        transform: scale(1.06);
    }

.review-modal__head[b-c8i0u4lfc3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

[b-c8i0u4lfc3] .review-modal__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-modal__avatar--fallback[b-c8i0u4lfc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.review-modal__who[b-c8i0u4lfc3] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.review-modal__name[b-c8i0u4lfc3] {
    font-weight: 600;
    color: var(--color-ink);
}

.review-modal__when[b-c8i0u4lfc3] {
    font-size: 0.8rem;
    color: rgba(23, 20, 18, 0.5);
}

.review-modal__stars[b-c8i0u4lfc3] {
    display: flex;
    gap: 2px;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.review-modal__quote[b-c8i0u4lfc3] {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}

.review-modal__route[b-c8i0u4lfc3] {
    display: block;
    padding-top: var(--space-3);
    border-top: 1px dashed rgba(23, 20, 18, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .review-modal[b-c8i0u4lfc3],
    .review-modal__panel[b-c8i0u4lfc3] {
        animation: none;
    }
}

/* ---------- Contribute CTA ---------- */
.logbook-cta[b-c8i0u4lfc3] {
    background: var(--color-terracotta);
    color: var(--color-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .logbook-cta .label[b-c8i0u4lfc3] {
        color: var(--color-off-white);
        opacity: 0.85;
    }

    .logbook-cta h2[b-c8i0u4lfc3] {
        color: var(--color-off-white);
    }

    .logbook-cta p[b-c8i0u4lfc3] {
        color: rgba(244, 241, 234, 0.9);
        margin-bottom: var(--space-4);
    }

@media (max-width: 960px) {
    .logbook-stats[b-c8i0u4lfc3] {
        grid-template-columns: repeat(3, 1fr);
    }

    .logbook-stats__note[b-c8i0u4lfc3] {
        grid-column: 1 / -1;
        max-width: none;
    }

    .postcard-grid[b-c8i0u4lfc3] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .logbook-stats[b-c8i0u4lfc3] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    .logbook-verified[b-c8i0u4lfc3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .postcard-grid[b-c8i0u4lfc3] {
        grid-template-columns: 1fr;
        /* One per row — forcing a shared height would just pad short reviews. */
        grid-auto-rows: auto;
    }

    .review-modal[b-c8i0u4lfc3] {
        padding: var(--space-3);
    }

    .review-modal__panel[b-c8i0u4lfc3] {
        padding: var(--space-4);
        max-height: 90vh;
        max-height: 90dvh;
    }

    /* Tilt reads as sloppy at one card per row. */
    .postcard[b-c8i0u4lfc3],
    .postcard:nth-child(even)[b-c8i0u4lfc3],
    .postcard:nth-child(3n)[b-c8i0u4lfc3] {
        transform: none;
    }
}

/* ---------- Site-wide redesign: reviews on the new system ---------- */

/* Rating, count and countries: a white card pulled up over the hero. */
.logbook-page[b-c8i0u4lfc3] {
    padding-bottom: var(--space-5);
}

.logbook-stats[b-c8i0u4lfc3] {
    position: relative;
    z-index: 2;
    margin: calc(-1 * var(--page-y) - 48px) 0 0;
    padding: var(--space-5);
    border-top: 0;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.logbook-stats__num[b-c8i0u4lfc3] {
    color: var(--color-teal);
}

.logbook-stats .label[b-c8i0u4lfc3] {
    color: var(--color-terracotta);
    font-weight: 700;
}

.logbook-reviews[b-c8i0u4lfc3] {
    padding-bottom: var(--page-y);
}

/* The same review card as the homepage. */
.postcard-grid[b-c8i0u4lfc3] {
    gap: var(--space-4);
}

.postcard[b-c8i0u4lfc3],
.postcard:nth-child(even)[b-c8i0u4lfc3],
.postcard:nth-child(3n)[b-c8i0u4lfc3] {
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    transform: none;
}

    .postcard:hover[b-c8i0u4lfc3] {
        transform: translateY(-4px);
    }

.postcard__body[b-c8i0u4lfc3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: var(--space-4);
}

.postcard__route[b-c8i0u4lfc3] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(23, 20, 18, 0.5);
}

.postcard__quote[b-c8i0u4lfc3] {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--color-ink);
}

.postcard__foot[b-c8i0u4lfc3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 20, 18, 0.1);
}

[b-c8i0u4lfc3] .postcard__avatar,
.postcard__avatar[b-c8i0u4lfc3] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.postcard__avatar--fallback[b-c8i0u4lfc3] {
    display: grid;
    place-items: center;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
}

.postcard__who[b-c8i0u4lfc3] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.postcard__name[b-c8i0u4lfc3] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-ink);
}

.postcard__when[b-c8i0u4lfc3] {
    font-size: 0.8rem;
    color: rgba(23, 20, 18, 0.5);
}

/* "Been on the road with me?": a slim teal strip. */
.logbook-cta-band[b-c8i0u4lfc3] {
    padding-bottom: var(--page-y);
}

.logbook-cta[b-c8i0u4lfc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    max-width: none;
    margin: 0;
    padding: var(--space-5);
    border-radius: 18px;
    text-align: left;
}

    .logbook-cta[b-c8i0u4lfc3]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, rgba(244, 241, 234, 0.06) 28px 29px);
    }

    .logbook-cta h2[b-c8i0u4lfc3] {
        margin: 0;
        font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
    }

    .logbook-cta p[b-c8i0u4lfc3] {
        margin: 6px 0 0;
        color: rgba(244, 241, 234, 0.85);
    }

    .logbook-cta .btn--whatsapp[b-c8i0u4lfc3] {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
    }

.logbook-cta__text[b-c8i0u4lfc3] {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .logbook-stats[b-c8i0u4lfc3] {
        grid-template-columns: repeat(3, auto);
    }

    .logbook-stats__note[b-c8i0u4lfc3] {
        grid-column: 1 / -1;
    }
}

.logbook-cta[b-c8i0u4lfc3] {
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 40%, #0B3237 100%);
}

    .logbook-cta .label.waypoint[b-c8i0u4lfc3] {
        color: #E3B98A;
        opacity: 1;
    }
/* /Components/Pages/MeetSyphax.razor.rz.scp.css */
/* ==========================================================================
   Meet Syphax: a portrait on the map, the story in a reading column, the van,
   the principles on teal with the Yaz, languages, and the photographs.
   ========================================================================== */

/* ---------- Hero ---------- */
.about-hero[b-zjs443v1s7] {
    padding: clamp(56px, 7vw, 104px) 0;
}

.about-hero__grid[b-zjs443v1s7] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.about-hero__content h1[b-zjs443v1s7] {
    margin: 0;
    font-size: clamp(2.4rem, 3.4vw + 1rem, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--color-off-white);
}

.about-hero__lede[b-zjs443v1s7] {
    max-width: 52ch;
    margin: 22px 0 0;
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.22rem);
    line-height: 1.65;
    color: rgba(244, 241, 234, 0.86);
}

.about-hero__actions[b-zjs443v1s7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

    .about-hero__actions .btn--outline[b-zjs443v1s7] {
        border-color: rgba(244, 241, 234, 0.6);
        color: var(--color-off-white);
    }

        .about-hero__actions .btn--outline:hover[b-zjs443v1s7] {
            background: var(--color-off-white);
            color: var(--color-teal);
        }

/* The portrait in a pale frame, tilted a touch, like a print on a desk. */
.about-hero__portrait[b-zjs443v1s7] {
    margin: 0;
    padding: 12px 12px 0;
    background: var(--color-off-white);
    border-radius: 20px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
    rotate: 1.5deg;
    transition: rotate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

    .about-hero__portrait:hover[b-zjs443v1s7] {
        rotate: 0deg;
    }

    .about-hero__portrait figcaption[b-zjs443v1s7] {
        padding: 12px 4px 14px;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-align: center;
        color: rgba(23, 20, 18, 0.6);
    }

[b-zjs443v1s7] .about-hero__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* ---------- The story ---------- */
.about-story__inner[b-zjs443v1s7] {
    max-width: 720px;
}

    .about-story__inner p[b-zjs443v1s7] {
        margin: 0 0 1.2em;
        font-size: 1.12rem;
        line-height: 1.8;
        color: rgba(23, 20, 18, 0.85);
    }

        .about-story__inner p:first-of-type[b-zjs443v1s7]::first-letter {
            float: left;
            margin: 6px 12px 0 0;
            font-family: var(--font-display);
            font-size: 4rem;
            line-height: 0.8;
            color: var(--color-terracotta);
        }

/* ---------- The van ---------- */
.the-van__grid[b-zjs443v1s7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.the-van__content h2[b-zjs443v1s7] {
    margin: 0 0 16px;
    font-size: var(--page-h2);
    line-height: 1.06;
}

.the-van__content p[b-zjs443v1s7] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(23, 20, 18, 0.8);
}

[b-zjs443v1s7] .the-van__photo,
.the-van__photo[b-zjs443v1s7] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 30px 60px -34px rgba(11, 50, 55, 0.5);
}

/* ---------- Principles, on teal ---------- */
.principles-grid[b-zjs443v1s7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.principle[b-zjs443v1s7] {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 1px solid rgba(244, 241, 234, 0.16);
    border-radius: 16px;
    background: rgba(244, 241, 234, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.principle__num[b-zjs443v1s7] {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: #E3B98A;
}

.principle h3[b-zjs443v1s7] {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--color-off-white);
}

.principle p[b-zjs443v1s7] {
    margin: 0;
    line-height: 1.65;
    color: rgba(244, 241, 234, 0.8);
}

/* ---------- Languages ---------- */
.languages__grid[b-zjs443v1s7] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
}

    .languages__grid .section-heading[b-zjs443v1s7] {
        margin-bottom: 0;
    }

.language-list[b-zjs443v1s7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.language-pill[b-zjs443v1s7] {
    padding: 14px 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-card);
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-teal);
}

/* ---------- Photographs strip ---------- */
.about-cta-band[b-zjs443v1s7] {
    padding-bottom: var(--page-y);
}

.about-cta[b-zjs443v1s7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5);
    border-radius: 18px;
}

    .about-cta[b-zjs443v1s7]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, rgba(244, 241, 234, 0.06) 28px 29px);
    }

    .about-cta h2[b-zjs443v1s7] {
        margin: 0;
        font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem);
    }

    .about-cta p[b-zjs443v1s7] {
        margin: 6px 0 0;
        color: rgba(244, 241, 234, 0.85);
    }

.about-cta__text[b-zjs443v1s7],
.about-cta__links[b-zjs443v1s7] {
    position: relative;
    z-index: 1;
}

.about-cta__links[b-zjs443v1s7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .about-cta__links .btn--outline[b-zjs443v1s7] {
        border-color: rgba(244, 241, 234, 0.6);
        color: var(--color-off-white);
    }

        .about-cta__links .btn--outline:hover[b-zjs443v1s7] {
            background: var(--color-off-white);
            color: var(--color-teal);
        }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
    .about-hero__grid[b-zjs443v1s7],
    .the-van__grid[b-zjs443v1s7],
    .languages__grid[b-zjs443v1s7] {
        grid-template-columns: 1fr;
    }

    .about-hero__portrait[b-zjs443v1s7] {
        max-width: 420px;
    }
}

@media (max-width: 640px) {
    .principles-grid[b-zjs443v1s7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PlanYourTrip.razor.rz.scp.css */
/* Hero */
.plan-hero[b-bq6yiedtfl] {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-terracotta) 100%);
    padding: var(--space-7) 0;
    color: var(--color-off-white);
}

.plan-hero__heading[b-bq6yiedtfl] {
    max-width: 640px;
}

    .plan-hero__heading h1[b-bq6yiedtfl] {
        color: var(--color-off-white);
    }

    .plan-hero__heading p[b-bq6yiedtfl] {
        color: rgba(244, 241, 234, 0.9);
        font-size: 1.1rem;
        max-width: 560px;
    }

.plan-hero .label[b-bq6yiedtfl] {
    color: var(--color-gold);
}

/* Wizard beside the running draft of the message */
.plan-layout[b-bq6yiedtfl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: var(--space-4);
    align-items: start;
}

/* Field groups */
.plan-field-group[b-bq6yiedtfl] {
    margin-bottom: var(--space-4);
}

    .plan-field-group > .label[b-bq6yiedtfl] {
        color: var(--color-gold);
    }

.label--icon[b-bq6yiedtfl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Region + duration + interest chips */
.chip-picker[b-bq6yiedtfl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: var(--space-2) 0 0;
}

.region-chip[b-bq6yiedtfl] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(244, 241, 234, 0.12);
    border: 1px solid rgba(244, 241, 234, 0.34);
    color: var(--color-off-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .region-chip:hover[b-bq6yiedtfl] {
        transform: translateY(-2px);
        background: rgba(244, 241, 234, 0.22);
        border-color: rgba(244, 241, 234, 0.6);
    }

    /* ::deep because the icon is a child component — a plain descendant
       selector in this scoped file never reaches its <svg>. */
    .region-chip[b-bq6yiedtfl]  svg {
        transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

.region-chip--active[b-bq6yiedtfl] {
    background: var(--color-off-white);
    border-color: var(--color-off-white);
    color: var(--color-ink);
    box-shadow: 0 6px 18px rgba(23, 20, 18, 0.22);
}

    .region-chip--active[b-bq6yiedtfl]  svg {
        transform: scale(1.08);
    }

.region-chip__tick[b-bq6yiedtfl] {
    position: absolute;
    top: -5px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: chipTick-b-bq6yiedtfl 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes chipTick-b-bq6yiedtfl {
    from {
        transform: scale(0.2);
        opacity: 0;
    }
}

/* Wizard panel — sits directly on the gradient hero, same translucent
   language as the region chips, not a white card */
.wizard-card[b-bq6yiedtfl] {
    background: rgba(244, 241, 234, 0.08);
    border: 1px solid rgba(244, 241, 234, 0.25);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    color: var(--color-off-white);
    min-width: 0;
}

.wizard-steps[b-bq6yiedtfl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wizard-step-wrap[b-bq6yiedtfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.wizard-step__circle[b-bq6yiedtfl] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(244, 241, 234, 0.38);
    background: rgba(21, 82, 89, 0.55);
    color: rgba(244, 241, 234, 0.72);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .wizard-step__circle:hover:not(:disabled)[b-bq6yiedtfl] {
        transform: scale(1.07);
    }

    .wizard-step__circle:disabled[b-bq6yiedtfl] {
        cursor: default;
    }

    .wizard-step__circle--active[b-bq6yiedtfl] {
        border-color: var(--color-off-white);
        background: var(--color-off-white);
        color: var(--color-ink);
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(23, 20, 18, 0.28);
    }

    .wizard-step__circle--done[b-bq6yiedtfl] {
        border-color: var(--color-gold);
        background: rgba(191, 151, 101, 0.18);
        color: var(--color-gold);
    }

.wizard-step__label[b-bq6yiedtfl] {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.55);
    text-align: center;
    max-width: 90px;
}

    .wizard-step__label--active[b-bq6yiedtfl] {
        color: var(--color-gold);
    }

/* One continuous bar under the four steps, rather than segments between them —
   it reads as progress at a glance and animates in one move. */
.wizard-track[b-bq6yiedtfl] {
    position: relative;
    height: 2px;
    background: rgba(244, 241, 234, 0.22);
    border-radius: 2px;
    margin: var(--space-3) 0 var(--space-5);
}

.wizard-track__fill[b-bq6yiedtfl] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--color-gold);
    border-radius: 2px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Two names carrying identical keyframes: Blazor reuses this element between
   steps, and re-applying the same animation name would not restart it. */
@keyframes wizardRiseA-b-bq6yiedtfl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes wizardRiseB-b-bq6yiedtfl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.wizard-body--a[b-bq6yiedtfl] {
    animation: wizardRiseA-b-bq6yiedtfl 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wizard-body--b[b-bq6yiedtfl] {
    animation: wizardRiseB-b-bq6yiedtfl 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wizard-body__title[b-bq6yiedtfl] {
    font-size: 1.4rem;
    color: var(--color-off-white);
    margin: 0 0 var(--space-4);
}

.wizard-field[b-bq6yiedtfl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-3);
    min-width: 0;
}

    .wizard-field .label[b-bq6yiedtfl] {
        color: var(--color-gold);
    }

    .wizard-field input[b-bq6yiedtfl],
    .wizard-textarea[b-bq6yiedtfl] {
        width: 100%;
        box-sizing: border-box;
        font-family: var(--font-body);
        font-size: 0.98rem;
        padding: 0.72rem 0.95rem;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        background: rgba(244, 241, 234, 0.95);
        color: var(--color-ink);
        resize: vertical;
        transition: box-shadow 0.18s ease, background-color 0.18s ease;
    }

        .wizard-field input:focus[b-bq6yiedtfl],
        .wizard-textarea:focus[b-bq6yiedtfl] {
            outline: none;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(191, 151, 101, 0.55);
        }

/* Counters — a stepper can't be left blank or filled with nonsense, and it
   doesn't summon a keyboard on a phone for a number that's almost always 1-4. */
.counter[b-bq6yiedtfl] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(244, 241, 234, 0.12);
    border: 1px solid rgba(244, 241, 234, 0.34);
    border-radius: 999px;
    padding: 4px;
    align-self: flex-start;
}

    .counter button[b-bq6yiedtfl] {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--color-off-white);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

        .counter button:hover[b-bq6yiedtfl] {
            background: rgba(244, 241, 234, 0.9);
            color: var(--color-ink);
            transform: scale(1.06);
        }

    .counter span[b-bq6yiedtfl] {
        min-width: 32px;
        text-align: center;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 1rem;
        color: var(--color-off-white);
    }

.wizard-grid[b-bq6yiedtfl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    min-width: 0;
    margin-bottom: var(--space-4);
}

.wizard-grid--2[b-bq6yiedtfl] {
    grid-template-columns: 1fr 1fr;
}

.wizard-hint[b-bq6yiedtfl] {
    font-size: 0.85rem;
    color: rgba(244, 241, 234, 0.75);
    margin: -2px 0 var(--space-2);
}

.wizard-hint--icon[b-bq6yiedtfl] {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .wizard-hint a[b-bq6yiedtfl] {
        color: var(--color-gold);
        text-decoration: underline;
    }

.wizard-nav[b-bq6yiedtfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(244, 241, 234, 0.2);
}

.wizard-nav__note[b-bq6yiedtfl] {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.5);
}

.wizard-nav .btn--outline[b-bq6yiedtfl] {
    border-color: var(--color-off-white);
    color: var(--color-off-white);
}

    .wizard-nav .btn--outline:hover[b-bq6yiedtfl] {
        background: var(--color-off-white);
        color: var(--color-ink);
    }

.plan-send[b-bq6yiedtfl] {
    margin-top: var(--space-4);
}

/* Contact method toggle */
.contact-method[b-bq6yiedtfl] {
    display: inline-flex;
    background: rgba(244, 241, 234, 0.12);
    border: 1px solid rgba(244, 241, 234, 0.4);
    border-radius: 999px;
    padding: 4px;
    margin-top: var(--space-2);
    align-self: flex-start;
}

.contact-method__btn[b-bq6yiedtfl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-off-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.58rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .contact-method__btn:hover[b-bq6yiedtfl] {
        background: rgba(244, 241, 234, 0.16);
    }

.contact-method__btn--active[b-bq6yiedtfl],
.contact-method__btn--active:hover[b-bq6yiedtfl] {
    background: var(--color-off-white);
    color: var(--color-ink);
}

.chat-bubble[b-bq6yiedtfl] {
    background: var(--color-off-white);
    color: var(--color-ink);
    border-radius: 4px 16px 16px 16px;
    padding: var(--space-3) var(--space-4);
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: var(--shadow-card);
}

.email-sent[b-bq6yiedtfl] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-off-white);
    font-weight: 600;
    margin: var(--space-3) 0 0;
}

.wizard-body .fallback-validation[b-bq6yiedtfl] {
    color: #ffe1d6;
    font-size: 0.9rem;
    margin: var(--space-3) 0 0;
}

.chat-bubble--editable[b-bq6yiedtfl] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    font-family: var(--font-body);
    padding: 18px 22px;
    resize: vertical;
    min-height: 132px;
}

    .chat-bubble--editable:hover[b-bq6yiedtfl] {
        border-color: rgba(23, 20, 18, 0.15);
    }

    .chat-bubble--editable:focus-visible[b-bq6yiedtfl] {
        outline: none;
        border-color: var(--color-teal);
    }

.message-reset[b-bq6yiedtfl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--color-gold);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-decoration: underline;
    cursor: pointer;
    padding: var(--space-2) 0 0;
}

/* Live draft of the message, building as the visitor answers */
.plan-live[b-bq6yiedtfl] {
    background: rgba(23, 20, 18, 0.22);
    border: 1px solid rgba(244, 241, 234, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    min-width: 0;
}

.plan-live__head[b-bq6yiedtfl] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: var(--space-3);
    color: var(--color-gold);
}

    .plan-live__head .label[b-bq6yiedtfl] {
        color: var(--color-gold);
    }

.plan-live__bubble[b-bq6yiedtfl] {
    font-size: 0.93rem;
}

.plan-live__rows[b-bq6yiedtfl] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: var(--space-4);
}

.plan-live__row[b-bq6yiedtfl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(244, 241, 234, 0.55);
}

    .plan-live__row > div[b-bq6yiedtfl] {
        min-width: 0;
    }

    .plan-live__row .label[b-bq6yiedtfl] {
        display: block;
        font-size: 0.6rem;
        color: rgba(244, 241, 234, 0.45);
    }

    .plan-live__row span:not(.label)[b-bq6yiedtfl] {
        font-size: 0.88rem;
        color: rgba(244, 241, 234, 0.92);
    }

.plan-live__note[b-bq6yiedtfl] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(244, 241, 234, 0.16);
    font-size: 0.8rem;
    color: rgba(244, 241, 234, 0.6);
    line-height: 1.5;
}

/* Fallback form */
.fallback-card[b-bq6yiedtfl] {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    max-width: 720px;
    margin: 0 auto;
}

.fallback-form[b-bq6yiedtfl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.fallback-field[b-bq6yiedtfl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fallback-field--wide[b-bq6yiedtfl] {
    grid-column: 1 / -1;
}

.fallback-field input[b-bq6yiedtfl],
.fallback-field textarea[b-bq6yiedtfl] {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(23, 20, 18, 0.2);
    background: var(--color-off-white);
    color: var(--color-ink);
    resize: vertical;
}

    .fallback-field input:focus-visible[b-bq6yiedtfl],
    .fallback-field textarea:focus-visible[b-bq6yiedtfl] {
        outline: 2px solid var(--color-teal);
        outline-offset: 1px;
    }

.fallback-validation[b-bq6yiedtfl] {
    color: var(--color-terracotta);
    font-size: 0.9rem;
    margin: 0 0 var(--space-3);
}

/* Success state */
.fallback-success[b-bq6yiedtfl] {
    text-align: center;
    padding: var(--space-3) 0;
}

.fallback-success__actions[b-bq6yiedtfl] {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* Responsive */
@media (max-width: 1000px) {
    .plan-layout[b-bq6yiedtfl] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Above the wizard would push the form down the page; below it, the draft
       is still there to check before the final step. */
    .plan-live[b-bq6yiedtfl] {
        order: 2;
    }
}

@media (max-width: 640px) {
    .plan-hero[b-bq6yiedtfl] {
        padding: var(--space-6) 0;
    }

    .wizard-grid[b-bq6yiedtfl],
    .fallback-form[b-bq6yiedtfl] {
        grid-template-columns: 1fr;
    }

    .wizard-card[b-bq6yiedtfl] {
        padding: var(--space-4);
    }

    .wizard-step__label[b-bq6yiedtfl] {
        display: none;
    }

    .region-chip[b-bq6yiedtfl] {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        min-height: 48px;
    }

    .counter[b-bq6yiedtfl] {
        align-self: stretch;
        justify-content: space-between;
    }

        .counter button[b-bq6yiedtfl] {
            width: 44px;
            height: 44px;
        }

    .btn--big[b-bq6yiedtfl] {
        width: 100%;
    }

    .wizard-nav__note[b-bq6yiedtfl] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .region-chip[b-bq6yiedtfl],
    .region-chip__tick[b-bq6yiedtfl],
    .wizard-body--a[b-bq6yiedtfl],
    .wizard-body--b[b-bq6yiedtfl],
    .wizard-step__circle[b-bq6yiedtfl] {
        animation: none;
        transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }
}

/* ---------- Site-wide redesign: the drawn map behind the planner ---------- */
.plan-hero[b-bq6yiedtfl] {
    background: linear-gradient(165deg, #1B636A 0%, var(--color-teal) 36%, #10454B 72%, #0B3237 100%);
    padding: clamp(56px, 7vw, 104px) 0;
}

    .plan-hero__heading h1[b-bq6yiedtfl] {
        font-size: clamp(2.4rem, 3.4vw + 1rem, 4.4rem);
        line-height: 1.02;
        letter-spacing: -0.02em;
    }

    .plan-hero .label.waypoint[b-bq6yiedtfl] {
        color: #E3B98A;
    }

    .plan-hero .waypoint[b-bq6yiedtfl]::after {
        transform: scaleX(1);
    }
/* /Components/Pages/RouteDetail.razor.rz.scp.css */
/* ==========================================================================
   Route page: a hero with the title, then the story in one column and the
   booking card in the other, staying in view while the visitor reads.
   ========================================================================== */

/* ---------- Hero ---------- */
.route-hero[b-2c0651q2ik] {
    min-height: clamp(360px, 46vw, 560px);
    display: flex;
    align-items: flex-end;
    padding: clamp(96px, 10vw, 150px) 0 clamp(120px, 11vw, 170px);
}

[b-2c0651q2ik] .route-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* The photograph darkens toward the text so the title always reads. */
.route-hero__shade[b-2c0651q2ik] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(11, 50, 55, 0.25) 0%, rgba(11, 50, 55, 0.55) 45%, rgba(11, 50, 55, 0.92) 100%);
}

.route-hero__content[b-2c0651q2ik] {
    position: relative;
    z-index: 1;
}

    .route-hero__content h1[b-2c0651q2ik] {
        max-width: 16ch;
        margin: 0;
        font-size: clamp(2.4rem, 3.6vw + 1rem, 4.6rem);
        line-height: 1.02;
        letter-spacing: -0.02em;
        color: var(--color-off-white);
    }

/* The same route named the way it gets searched for. Understated: it earns
   its place with Google, not with the reader. */
.route-hero__search[b-2c0651q2ik] {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.6);
}

.route-hero__subtitle[b-2c0651q2ik] {
    max-width: 46ch;
    margin: 12px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1vw + 0.9rem, 1.4rem);
    color: rgba(244, 241, 234, 0.86);
}

.route-facts[b-2c0651q2ik] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

    .route-facts li[b-2c0651q2ik] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1px solid rgba(244, 241, 234, 0.28);
        border-radius: 999px;
        background: rgba(244, 241, 234, 0.08);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        font-size: 0.92rem;
        font-weight: 500;
        color: var(--color-off-white);
    }

    .route-facts svg[b-2c0651q2ik] {
        flex-shrink: 0;
        color: #E3B98A;
    }

/* ---------- Two columns ---------- */
.route-layout[b-2c0651q2ik] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
    padding-bottom: var(--page-y);
}

.route-main[b-2c0651q2ik] {
    grid-column: 1;
    grid-row: 1;
    padding-top: var(--page-y);
    min-width: 0;
}

.route-aside[b-2c0651q2ik] {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 96px;
    /* Pulled up over the foot of the hero. */
    margin-top: -110px;
    z-index: 2;
}

.route-lede[b-2c0651q2ik] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 0.9vw + 1rem, 1.5rem);
    line-height: 1.5;
    color: var(--color-ink);
}

.route-block[b-2c0651q2ik] {
    margin-top: clamp(56px, 6vw, 88px);
}

/* ---------- Booking card ---------- */
.booking-card[b-2c0651q2ik] {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px -32px rgba(11, 50, 55, 0.45), 0 2px 6px rgba(23, 20, 18, 0.05);
    border-top: 4px solid var(--color-terracotta);
}

.booking-card__label[b-2c0651q2ik] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.booking-card__price[b-2c0651q2ik] {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-teal);
}

.booking-card__price--ask[b-2c0651q2ik] {
    font-size: 1.7rem;
}

.booking-card__from[b-2c0651q2ik] {
    margin-right: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.5);
}

.booking-card__note[b-2c0651q2ik] {
    margin: 8px 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(23, 20, 18, 0.62);
}

.booking-card__actions[b-2c0651q2ik] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--space-4);
}

    .booking-card__actions[b-2c0651q2ik]  .btn {
        width: 100%;
        justify-content: center;
    }

.booking-card__main[b-2c0651q2ik] {
    gap: 10px;
    padding-block: 1rem;
    font-size: 1rem;
}

.booking-card__dates[b-2c0651q2ik] {
    align-self: center;
    margin-top: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.booking-card[b-2c0651q2ik]  .contact-reassure {
    justify-content: center;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 20, 18, 0.08);
    width: 100%;
}

/* ---------- Group-size price estimate ---------- */
.price-calc[b-2c0651q2ik] {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: #F7F4EE;
    border-radius: 12px;
}

.price-calc__label[b-2c0651q2ik] {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.55);
}

.price-calc__row[b-2c0651q2ik] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.price-calc__chips[b-2c0651q2ik] {
    display: flex;
    gap: 6px;
}

.price-calc__chip[b-2c0651q2ik] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(23, 20, 18, 0.18);
    background: #fff;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

    .price-calc__chip:hover[b-2c0651q2ik] {
        border-color: var(--color-teal);
    }

.price-calc__chip--active[b-2c0651q2ik] {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-off-white);
}

.price-calc__result[b-2c0651q2ik] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.price-calc__amount[b-2c0651q2ik] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-terracotta);
}

.price-calc__unit[b-2c0651q2ik] {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.5);
}

.price-calc__note[b-2c0651q2ik] {
    margin: var(--space-2) 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(23, 20, 18, 0.62);
}

/* ---------- "Why I run it this way" ---------- */
.positioning[b-2c0651q2ik] {
    position: relative;
    margin: var(--space-5) 0 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    background: #EFEAE0;
    border-radius: 14px;
    border-left: 4px solid var(--color-gold);
}

.positioning__label[b-2c0651q2ik] {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.positioning p[b-2c0651q2ik] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.25rem);
    line-height: 1.5;
    color: var(--color-ink);
}

/* ---------- What you'll see ---------- */
.highlight-list[b-2c0651q2ik] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .highlight-list li[b-2c0651q2ik] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--shadow-card);
        font-size: 0.98rem;
        font-weight: 500;
        color: var(--color-ink);
    }

    .highlight-list svg[b-2c0651q2ik] {
        flex-shrink: 0;
        margin-top: 3px;
        color: var(--color-terracotta);
    }

/* ---------- Stops strip ----------
   Long routes (the 14-day has 10 stops) outgrow the column, so the strip
   scrolls sideways rather than overflowing the page. */
.route-map-scroll[b-2c0651q2ik] {
    margin: var(--space-4) calc(-1 * var(--space-2)) 0;
    padding: 0 var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

    .route-map-scroll[b-2c0651q2ik]::-webkit-scrollbar {
        display: none;
    }

.route-map[b-2c0651q2ik] {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    width: max-content;
    min-width: 100%;
}

    .route-map[b-2c0651q2ik]::before {
        content: "";
        position: absolute;
        top: 21px;
        left: 21px;
        right: 21px;
        height: 2px;
        background-image: repeating-linear-gradient(to right, rgba(191, 117, 90, 0.7) 0 8px, transparent 8px 14px);
        z-index: 0;
    }

.route-map__stop[b-2c0651q2ik] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 80px;
    text-align: center;
}

.route-map__circle[b-2c0651q2ik] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.1;
    box-shadow: 0 0 0 6px var(--color-bg);
}

.route-map__label[b-2c0651q2ik] {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---------- Day by day: a road down the page ---------- */
.day-list[b-2c0651q2ik] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

    .day-list[b-2c0651q2ik]::before {
        content: "";
        position: absolute;
        top: 30px;
        bottom: 30px;
        left: 29px;
        width: 2px;
        background-image: repeating-linear-gradient(to bottom, rgba(191, 117, 90, 0.55) 0 8px, transparent 8px 14px);
    }

.day-item[b-2c0651q2ik] {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: var(--space-4);
}

.day-item__number[b-2c0651q2ik] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-off-white);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 6px var(--color-bg);
}

    .day-item__number span[b-2c0651q2ik] {
        margin-bottom: 2px;
        font-family: var(--font-mono);
        font-size: 0.56rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #E3B98A;
    }

.day-item__body[b-2c0651q2ik] {
    padding: var(--space-4);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}

[b-2c0651q2ik] .day-item__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: var(--space-3);
}

.day-item__body h3[b-2c0651q2ik] {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--color-teal);
}

.day-item__body p[b-2c0651q2ik] {
    margin: 0;
    line-height: 1.7;
    color: rgba(23, 20, 18, 0.8);
}

.day-item__driving[b-2c0651q2ik] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(21, 82, 89, 0.08);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--color-teal);
}

    .day-item__driving svg[b-2c0651q2ik] {
        flex-shrink: 0;
    }

/* ---------- Included / not included ---------- */
.includes-grid[b-2c0651q2ik] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.includes-col[b-2c0651q2ik] {
    padding: var(--space-4);
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-card);
}

.includes-col--no[b-2c0651q2ik] {
    background: #F7F4EE;
    box-shadow: none;
}

.includes-col__heading[b-2c0651q2ik] {
    margin: 0 0 var(--space-3);
    font-size: 1.1rem;
    color: var(--color-teal);
}

.includes-col--no .includes-col__heading[b-2c0651q2ik] {
    color: rgba(23, 20, 18, 0.6);
}

.includes-list[b-2c0651q2ik] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .includes-list li[b-2c0651q2ik] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.95rem;
        color: rgba(23, 20, 18, 0.85);
    }

    .includes-list svg[b-2c0651q2ik] {
        flex-shrink: 0;
        margin-top: 3px;
    }

.includes-col--yes .includes-list svg[b-2c0651q2ik] {
    color: var(--color-teal);
}

.includes-col--no .includes-list svg[b-2c0651q2ik] {
    color: rgba(23, 20, 18, 0.4);
}

/* ---------- Photographs ---------- */
.route-gallery__grid[b-2c0651q2ik] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

[b-2c0651q2ik] .route-gallery__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
}

/* Links, not filters: the shared .chip is styled for buttons. */
.route-places__chip[b-2c0651q2ik] {
    display: inline-block;
    text-decoration: none;
}

/* ---------- Not found ---------- */
.not-found[b-2c0651q2ik] {
    text-align: center;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.not-found__actions[b-2c0651q2ik] {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* ---------- Narrower screens ---------- */
@media (max-width: 960px) {
    .route-layout[b-2c0651q2ik] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .route-aside[b-2c0651q2ik] {
        grid-column: 1;
        grid-row: 1;
        position: static;
        margin-top: -80px;
    }

    .route-main[b-2c0651q2ik] {
        grid-row: 2;
        padding-top: var(--space-6);
    }

    .route-hero[b-2c0651q2ik] {
        padding-bottom: 120px;
    }
}

@media (max-width: 640px) {
    .highlight-list[b-2c0651q2ik],
    .includes-grid[b-2c0651q2ik] {
        grid-template-columns: 1fr;
    }

    .day-list[b-2c0651q2ik]::before {
        left: 21px;
    }

    .day-item[b-2c0651q2ik] {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .day-item__number[b-2c0651q2ik] {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }

        .day-item__number span[b-2c0651q2ik] {
            font-size: 0.48rem;
        }

    .day-item__body[b-2c0651q2ik] {
        padding: var(--space-3);
    }

    .price-calc__row[b-2c0651q2ik] {
        justify-content: flex-start;
    }

    .price-calc__result[b-2c0651q2ik] {
        align-items: flex-start;
    }
}
/* /Components/Pages/RouteFinder.razor.rz.scp.css */
/* The three questions sit side by side on desktop. Stacked, they filled only
   the left third of a full-width card and left a large empty panel; as columns
   the card fills its own width and the page delivers its promise — "three
   questions" — in a single glance. */
.finder-questions[b-e44h9wuvj0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    background: #fff;
    border: 1px solid rgba(23, 20, 18, 0.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.finder-q + .finder-q[b-e44h9wuvj0] {
    /* Column rule between questions, drawn on the later sibling so the first
       column has no stray line on its left. */
    border-left: 1px solid rgba(23, 20, 18, 0.1);
    padding-left: var(--space-5);
}

.finder-q__title[b-e44h9wuvj0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.3;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.finder-q__num[b-e44h9wuvj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-off-white);
    border: 1px solid rgba(23, 20, 18, 0.15);
    color: rgba(23, 20, 18, 0.55);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.finder-q__hint[b-e44h9wuvj0] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.45);
}

/* Answered: the badge turns into a teal tick so progress is readable at a glance. */
.finder-q--done .finder-q__num[b-e44h9wuvj0] {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-off-white);
}

.finder-reset[b-e44h9wuvj0] {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border: none;
    border-top: 1px solid rgba(23, 20, 18, 0.1);
    background: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-teal);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .finder-reset:hover[b-e44h9wuvj0] {
        color: var(--color-terracotta);
    }

.finder-count[b-e44h9wuvj0] {
    margin-bottom: var(--space-4);
}

/* Shown until at least one question is answered */
.finder-start[b-e44h9wuvj0] {
    text-align: center;
    max-width: 480px;
    margin: var(--space-5) auto;
    color: rgba(23, 20, 18, 0.7);
}

.finder-start__mark[b-e44h9wuvj0] {
    display: block;
    font-size: 1.6rem;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.finder-start h2[b-e44h9wuvj0] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-2);
}

.finder-start p[b-e44h9wuvj0] {
    margin: 0 0 var(--space-3);
}

.finder-start__browse[b-e44h9wuvj0] {
    font-size: 0.9rem;
    font-weight: 600;
}

.finder-empty[b-e44h9wuvj0] {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    max-width: 620px;
}

    .finder-empty h2[b-e44h9wuvj0] {
        margin-top: 0;
        font-size: 1.4rem;
    }

    .finder-empty p[b-e44h9wuvj0] {
        color: rgba(23, 20, 18, 0.75);
        margin-bottom: var(--space-4);
    }

/* Three narrow columns start crushing the longer chips ("Doesn't matter",
   region names) well before the mobile breakpoint, so drop to one column early. */
@media (max-width: 900px) {
    .finder-questions[b-e44h9wuvj0] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .finder-q + .finder-q[b-e44h9wuvj0] {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(23, 20, 18, 0.1);
        padding-top: var(--space-4);
    }
}

@media (max-width: 640px) {
    .finder-questions[b-e44h9wuvj0] {
        padding: var(--space-4);
    }
}

/* ---------- Site-wide redesign ---------- */
/* The three questions: a white card pulled up over the hero's foot. */
.finder-questions[b-e44h9wuvj0] {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--page-y) - 48px);
    border: 0;
    box-shadow: var(--shadow-lift);
}

.finder-start h2[b-e44h9wuvj0],
.finder-empty h2[b-e44h9wuvj0] {
    color: var(--color-teal);
}
/* /Components/Pages/RoutesList.razor.rz.scp.css */
/* Filters: one white card above the grid, the count on the right. */
.filters[b-nk475g4mxk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4) var(--space-6);
    /* Pulled up over the foot of the hero (PageHero Class="page-hero--overlap"). */
    margin: calc(-1 * var(--page-y) - 48px) 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
}

.filter-group[b-nk475g4mxk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filters__label[b-nk475g4mxk] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.filters__count[b-nk475g4mxk] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    margin: 0;
    font-size: 0.95rem;
    color: rgba(23, 20, 18, 0.6);
}

    .filters__count strong[b-nk475g4mxk] {
        font-family: var(--font-display);
        font-size: 1.6rem;
        color: var(--color-teal);
        margin-right: 4px;
    }

/* .chip / .chip-row / .chip--active live in wwwroot/css/site.css. */

.no-results[b-nk475g4mxk] {
    text-align: center;
    color: rgba(23, 20, 18, 0.7);
    padding: var(--space-5) 0;
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .filters[b-nk475g4mxk] {
        padding: var(--space-4);
        gap: var(--space-4);
    }

    .filters__count[b-nk475g4mxk] {
        position: static;
        margin: 0;
    }
}
/* /Components/Pages/ToursByDuration.razor.rz.scp.css */
/* The other lengths, as chips on the hero's teal. */
.duration-switch__label[b-jgee1kr4n9] {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #E3B98A;
}

.duration-switch__row[b-jgee1kr4n9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.duration-switch__chip[b-jgee1kr4n9] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(244, 241, 234, 0.35);
    border-radius: 999px;
    background: rgba(244, 241, 234, 0.08);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-off-white);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .duration-switch__chip:hover[b-jgee1kr4n9] {
        background: var(--color-off-white);
        border-color: var(--color-off-white);
        color: var(--color-teal);
        text-decoration: none;
    }

.duration-switch__chip--all[b-jgee1kr4n9] {
    background: var(--color-off-white);
    border-color: var(--color-off-white);
    color: var(--color-teal);
}
/* /Components/Shared/AvailabilityCalendar.razor.rz.scp.css */
.availability-calendar[b-pprw8emp7q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--color-ink);
}

.availability-calendar__header[b-pprw8emp7q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.availability-calendar__month[b-pprw8emp7q] {
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.availability-calendar__nav[b-pprw8emp7q] {
    background: none;
    border: 1px solid rgba(23, 20, 18, 0.2);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    color: var(--color-ink);
    font-size: 1.3rem;
    line-height: 1;
}

    .availability-calendar__nav:hover:not(:disabled)[b-pprw8emp7q] {
        border-color: var(--color-teal);
    }

    .availability-calendar__nav:disabled[b-pprw8emp7q] {
        opacity: 0.3;
        cursor: default;
    }

.availability-calendar__weekdays[b-pprw8emp7q],
.availability-calendar__grid[b-pprw8emp7q] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.availability-calendar__weekdays span[b-pprw8emp7q] {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.45);
}

.availability-calendar__cell[b-pprw8emp7q] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    font-family: var(--font-body);
    color: inherit;
    cursor: default;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.availability-calendar__cell--empty[b-pprw8emp7q] {
    visibility: hidden;
}

.availability-calendar__cell--past[b-pprw8emp7q] {
    color: rgba(23, 20, 18, 0.25);
}

.availability-calendar__cell--available[b-pprw8emp7q] {
    background: rgba(21, 82, 89, 0.08);
    color: var(--color-ink);
}

.availability-calendar__cell--booked[b-pprw8emp7q] {
    background: rgba(191, 117, 90, 0.18);
    color: var(--color-terracotta);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.availability-calendar__cell--available:not(:disabled)[b-pprw8emp7q] {
    cursor: pointer;
}

    .availability-calendar__cell--available:not(:disabled):hover[b-pprw8emp7q] {
        background: var(--color-teal);
        color: var(--color-off-white);
        transform: scale(1.08);
    }

    .availability-calendar__cell--available:not(:disabled):focus-visible[b-pprw8emp7q] {
        outline: 2px solid var(--color-teal);
        outline-offset: 2px;
    }

.availability-calendar__legend[b-pprw8emp7q] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: rgba(23, 20, 18, 0.65);
}

.availability-calendar__legend-item[b-pprw8emp7q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.availability-calendar__dot[b-pprw8emp7q] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.availability-calendar__dot--available[b-pprw8emp7q] {
    background: var(--color-teal);
}

.availability-calendar__dot--booked[b-pprw8emp7q] {
    background: var(--color-terracotta);
}

/* Dark variant — for use directly on the gradient hero backgrounds */
.availability-calendar--dark[b-pprw8emp7q] {
    color: var(--color-off-white);
}

    .availability-calendar--dark .availability-calendar__nav[b-pprw8emp7q] {
        border-color: rgba(244, 241, 234, 0.4);
        color: var(--color-off-white);
    }

        .availability-calendar--dark .availability-calendar__nav:hover:not(:disabled)[b-pprw8emp7q] {
            border-color: var(--color-off-white);
        }

    .availability-calendar--dark .availability-calendar__weekdays span[b-pprw8emp7q] {
        color: rgba(244, 241, 234, 0.55);
    }

    .availability-calendar--dark .availability-calendar__cell--past[b-pprw8emp7q] {
        color: rgba(244, 241, 234, 0.25);
    }

    .availability-calendar--dark .availability-calendar__cell--available[b-pprw8emp7q] {
        background: rgba(244, 241, 234, 0.1);
        color: var(--color-off-white);
    }

    .availability-calendar--dark .availability-calendar__cell--booked[b-pprw8emp7q] {
        background: rgba(191, 117, 90, 0.4);
        color: var(--color-off-white);
        text-decoration-color: rgba(244, 241, 234, 0.7);
    }

    .availability-calendar--dark .availability-calendar__legend[b-pprw8emp7q] {
        color: rgba(244, 241, 234, 0.75);
    }
/* /Components/Shared/BackToTopButton.razor.rz.scp.css */
/* Sits directly above the WhatsApp button and shares its centre line. The
   offsets are derived from that button's own geometry — 56px tall at
   var(--space-4) on desktop, 52px at var(--space-3) on mobile — so the two stay
   aligned if either is moved. */
.back-to-top[b-w38vtu8uxy] {
    position: fixed;
    right: calc(var(--space-4) + 5px); /* centres a 46px button under a 56px one */
    /* Includes the home-bar inset, like the WhatsApp button it sits above —
       without it the two overlapped on iPhones once that one moved up. */
    bottom: calc(var(--space-4) + 56px + 12px + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(23, 20, 18, 0.12);
    border-radius: 50%;
    background: var(--color-off-white);
    color: var(--color-teal);
    cursor: pointer;
    box-shadow: var(--shadow-lift);
    z-index: 899; /* just under the WhatsApp button, which stays the priority */

    /* Hidden until scrolled. Kept in the DOM rather than toggled by Blazor so
       there's no server round trip and nothing to shift the layout. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

html.is-scrolled .back-to-top[b-w38vtu8uxy] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover[b-w38vtu8uxy] {
    color: var(--color-off-white);
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.back-to-top:active[b-w38vtu8uxy] {
    transform: translateY(1px);
}

@media (max-width: 640px) {
    .back-to-top[b-w38vtu8uxy] {
        right: calc(var(--space-3) + 4px); /* 44px button under a 52px one */
        bottom: calc(var(--space-3) + 52px + 10px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top[b-w38vtu8uxy],
    html.is-scrolled .back-to-top[b-w38vtu8uxy] {
        transform: none;
        transition: opacity 0.2s ease, visibility 0.2s;
    }
}
/* /Components/Shared/ContactReassurance.razor.rz.scp.css */
/* inline-flex, so the line takes its alignment from whatever it sits in: centred
   inside the mid-page banner, flush left under the planner's send button. */
.contact-reassure[b-4vecgb9ewv] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: rgba(23, 20, 18, 0.6);
}

.contact-reassure__item[b-4vecgb9ewv] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.contact-reassure__check[b-4vecgb9ewv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(21, 82, 89, 0.1);
    color: var(--color-teal);
}

.contact-reassure__dot[b-4vecgb9ewv] {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #25D366;
}

/* On the teal-to-terracotta grounds (the mid-page banner and the whole trip
   planner) plain cream type does not carry: measured against the terracotta end
   it reaches only 4.1:1, under the 4.5:1 this size needs, and translucent cream
   drops to 3.0:1. The plate darkens the ground under the line instead of
   lightening the text, which holds ~5.8:1 the whole way across the gradient. */
.contact-reassure--light[b-4vecgb9ewv] {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(23, 20, 18, 0.28);
    color: rgba(244, 241, 234, 0.95);
}

    .contact-reassure--light .contact-reassure__check[b-4vecgb9ewv] {
        background: rgba(244, 241, 234, 0.2);
        color: var(--color-off-white);
    }

@media (max-width: 480px) {
    .contact-reassure[b-4vecgb9ewv] {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* A pill radius on a stacked two-line block reads as a lozenge. */
    .contact-reassure--light[b-4vecgb9ewv] {
        border-radius: 14px;
        align-items: flex-start;
    }
}
/* /Components/Shared/FloatingWhatsAppButton.razor.rz.scp.css */
.floating-whatsapp[b-fp09eks1zh] {
    position: fixed;
    right: var(--space-4);
    /* Clear of the iPhone home bar, which otherwise sits on top of it. */
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #0b3d20;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lift);
    z-index: 900;
    transition: transform 0.15s ease;
}

    .floating-whatsapp:hover[b-fp09eks1zh] {
        transform: scale(1.06);
        text-decoration: none;
    }

@media (max-width: 640px) {
    .floating-whatsapp[b-fp09eks1zh] {
        right: var(--space-3);
        bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
    }
}
/* /Components/Shared/GradientAvatar.razor.rz.scp.css */
.gradient-avatar[b-e0mh75b85i] {
    width: var(--avatar-size, 44px);
    height: var(--avatar-size, 44px);
    flex-shrink: 0;
}

.gradient-avatar__ring[b-e0mh75b85i] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 210deg, #fdf497, #fd5949, #d6249f, #285aeb, #fdf497);
}

.gradient-avatar__gap[b-e0mh75b85i] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--color-off-white);
}

[b-e0mh75b85i] .gradient-avatar__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.gradient-avatar__placeholder[b-e0mh75b85i] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-near-black);
    color: rgba(244, 241, 234, 0.6);
}
/* /Components/Shared/ItineraryEmailCapture.razor.rz.scp.css */
/* Sits at the end of the day-by-day list, so it reads as the next step rather
   than an advert dropped into the page. Teal panel to separate it from the
   itinerary above without shouting. */
.itin-capture[b-hsc7yclr5p] {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-teal);
    color: var(--color-off-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.itin-capture__head[b-hsc7yclr5p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--space-3);
}

    .itin-capture__head strong[b-hsc7yclr5p] {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1.25;
        display: block;
    }

    .itin-capture__head p[b-hsc7yclr5p] {
        margin: 6px 0 0;
        font-size: 0.94rem;
        color: rgba(244, 241, 234, 0.82);
        max-width: 52ch;
    }

.itin-capture__form[b-hsc7yclr5p] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .itin-capture__form input[b-hsc7yclr5p] {
        flex: 1 1 260px;
        min-width: 0;
        font-family: var(--font-body);
        font-size: 1rem;
        padding: 0.8rem 1rem;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        background: rgba(244, 241, 234, 0.95);
        color: var(--color-ink);
        transition: box-shadow 0.18s ease, background-color 0.18s ease;
    }

        .itin-capture__form input:focus[b-hsc7yclr5p] {
            outline: none;
            background: #fff;
            box-shadow: 0 0 0 3px var(--color-gold);
        }

    .itin-capture__form .btn[b-hsc7yclr5p] {
        flex: 0 0 auto;
        background: var(--color-gold);
        color: var(--color-near-black);
    }

        .itin-capture__form .btn:hover[b-hsc7yclr5p] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lift);
        }

        .itin-capture__form .btn:disabled[b-hsc7yclr5p] {
            opacity: 0.7;
            cursor: default;
            transform: none;
        }

.itin-capture__opt[b-hsc7yclr5p] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: var(--space-3);
    font-size: 0.88rem;
    color: rgba(244, 241, 234, 0.82);
    cursor: pointer;
}

    .itin-capture__opt input[b-hsc7yclr5p] {
        margin-top: 3px;
        width: 16px;
        height: 16px;
        accent-color: var(--color-gold);
        flex-shrink: 0;
    }

.itin-capture__error[b-hsc7yclr5p] {
    margin: var(--space-3) 0 0;
    font-size: 0.9rem;
    color: #ffd9cc;
}

.itin-capture__note[b-hsc7yclr5p] {
    margin: var(--space-3) 0 0;
    font-size: 0.82rem;
    color: rgba(244, 241, 234, 0.6);
}

    .itin-capture__note a[b-hsc7yclr5p] {
        color: var(--color-gold);
        text-decoration: underline;
    }

/* Sent state */
.itin-capture__done[b-hsc7yclr5p] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .itin-capture__done strong[b-hsc7yclr5p] {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1.25;
        display: block;
    }

    .itin-capture__done p[b-hsc7yclr5p] {
        margin: 6px 0 0;
        font-size: 0.94rem;
        color: rgba(244, 241, 234, 0.82);
        max-width: 52ch;
    }

.itin-capture__tick[b-hsc7yclr5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-near-black);
    animation: itinTick-b-hsc7yclr5p 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes itinTick-b-hsc7yclr5p {
    from {
        transform: scale(0.3);
        opacity: 0;
    }
}

@media (max-width: 560px) {
    .itin-capture[b-hsc7yclr5p] {
        padding: var(--space-4);
    }

    .itin-capture__form .btn[b-hsc7yclr5p] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .itin-capture__tick[b-hsc7yclr5p] {
        animation: none;
    }
}
/* /Components/Shared/PageFaqs.razor.rz.scp.css */
/* Same look as the homepage FAQ, which is scoped to Home and can't be reused. */
.page-faqs__list[b-83lxtd0z0b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 760px;
}

.page-faqs__item[b-83lxtd0z0b] {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-card);
}

    .page-faqs__item summary[b-83lxtd0z0b] {
        cursor: pointer;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.05rem;
        color: var(--color-ink);
    }

    .page-faqs__item p[b-83lxtd0z0b] {
        margin: var(--space-3) 0 0;
        color: rgba(23, 20, 18, 0.75);
    }
/* Plus that becomes a minus, gold edge when open — matches the homepage FAQ. */
.page-faqs__item[b-83lxtd0z0b] {
    border-left: 3px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .page-faqs__item[open][b-83lxtd0z0b] {
        border-left-color: var(--color-gold);
        box-shadow: var(--shadow-lift);
    }

    .page-faqs__item summary[b-83lxtd0z0b] {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

        .page-faqs__item summary[b-83lxtd0z0b]::-webkit-details-marker {
            display: none;
        }

        .page-faqs__item summary[b-83lxtd0z0b]::after {
            content: "";
            flex: 0 0 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid rgba(21, 82, 89, 0.35);
            background:
                linear-gradient(var(--color-teal), var(--color-teal)) center / 10px 2px no-repeat,
                linear-gradient(var(--color-teal), var(--color-teal)) center / 2px 10px no-repeat;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-size 0.35s ease, background-color 0.25s ease;
        }

    .page-faqs__item[open] summary[b-83lxtd0z0b]::after {
        transform: rotate(180deg);
        background-size: 10px 2px, 2px 0;
        background-color: rgba(191, 151, 101, 0.15);
    }
/* /Components/Shared/PolicyPageView.razor.rz.scp.css */
.policy[b-bur3hehpqa] {
    max-width: 74ch;
}

.policy__head[b-bur3hehpqa] {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(23, 20, 18, 0.14);
}

    .policy__head h1[b-bur3hehpqa] {
        margin-bottom: var(--space-3);
    }

.policy__summary[b-bur3hehpqa] {
    font-size: 1.05rem;
    color: rgba(23, 20, 18, 0.75);
    margin-bottom: var(--space-3);
}

/* The body is editor HTML, so these style bare tags rather than classes. */
.policy__body[b-bur3hehpqa] {
    line-height: 1.75;
    color: rgba(23, 20, 18, 0.85);
}

    .policy__body[b-bur3hehpqa]  h2 {
        font-size: 1.35rem;
        margin-top: var(--space-5);
        margin-bottom: var(--space-2);
        color: var(--color-ink);
    }

    .policy__body[b-bur3hehpqa]  h3 {
        font-size: 1.1rem;
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
    }

    .policy__body[b-bur3hehpqa]  p {
        margin: 0 0 var(--space-3);
    }

    .policy__body[b-bur3hehpqa]  ul,
    .policy__body[b-bur3hehpqa]  ol {
        margin: 0 0 var(--space-3);
        padding-left: 1.35rem;
    }

    .policy__body[b-bur3hehpqa]  li {
        margin-bottom: 0.4rem;
    }

    .policy__body[b-bur3hehpqa]  strong {
        color: var(--color-ink);
    }

    .policy__body[b-bur3hehpqa]  blockquote {
        border-left: 3px solid var(--color-gold);
        padding-left: var(--space-3);
        margin: 0 0 var(--space-3);
        font-style: italic;
    }

.policy__foot[b-bur3hehpqa] {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: #fff;
    border: 1px solid rgba(23, 20, 18, 0.1);
    border-radius: var(--radius-md);
}

    .policy__foot p[b-bur3hehpqa] {
        margin: 0 0 var(--space-3);
        color: rgba(23, 20, 18, 0.75);
    }

.policy__others[b-bur3hehpqa] {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(23, 20, 18, 0.14);
}

.policy__others-links[b-bur3hehpqa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

    .policy__others-links a[b-bur3hehpqa] {
        font-weight: 600;
        font-size: 0.95rem;
    }

/* ---------- Site-wide redesign ---------- */
.policy__updated[b-bur3hehpqa] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(244, 241, 234, 0.65);
}

.policy__body[b-bur3hehpqa] {
    padding: clamp(24px, 4vw, 48px);
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
}
/* /Components/Shared/QuickTripForm.razor.rz.scp.css */
/* A card: dates / travellers / city on one row, then a full-width send button,
   "Prefer email?", a rule and the two reassurances. Stacks on phones. */
.quick-trip[b-hue32saczm] {
    width: 100%;
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid rgba(23, 20, 18, 0.1);
    border-radius: 18px;
    background: rgba(250, 248, 243, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 40px -28px rgba(23, 20, 18, 0.35);
    text-align: left;
}

.quick-trip__fields[b-hue32saczm] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 14px 16px;
    align-items: start;
}

.quick-trip__field[b-hue32saczm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.quick-trip__label[b-hue32saczm] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-teal);
}

/* Shared face for the three controls. */
.quick-trip__control[b-hue32saczm] {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    border: 1px solid rgba(23, 20, 18, 0.16);
    border-radius: 8px;
    background: #fff;
    color: var(--color-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .quick-trip__control:focus-within[b-hue32saczm] {
        border-color: var(--color-teal);
        box-shadow: 0 0 0 3px rgba(21, 82, 89, 0.15);
    }

.quick-trip input[b-hue32saczm],
.quick-trip select[b-hue32saczm] {
    font: inherit;
    font-size: 1.05rem;
    color: var(--color-ink);
}

/* Stepper. */
.quick-trip__stepper[b-hue32saczm] {
    overflow: hidden;
}

    .quick-trip__stepper button[b-hue32saczm] {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 34%;
        min-width: 40px;
        height: 100%;
        border: 0;
        background: rgba(23, 20, 18, 0.035);
        color: rgba(23, 20, 18, 0.6);
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .quick-trip__stepper button:first-child[b-hue32saczm] {
            border-right: 1px solid rgba(23, 20, 18, 0.12);
        }

        .quick-trip__stepper button:last-child[b-hue32saczm] {
            border-left: 1px solid rgba(23, 20, 18, 0.12);
            background: transparent;
            color: var(--color-ink);
        }

        .quick-trip__stepper button:hover[b-hue32saczm] {
            background: rgba(21, 82, 89, 0.08);
            color: var(--color-teal);
        }

    .quick-trip__stepper input[b-hue32saczm] {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: 0;
        background: transparent;
        text-align: center;
        appearance: textfield;
        -moz-appearance: textfield;
    }

        .quick-trip__stepper input[b-hue32saczm]::-webkit-outer-spin-button,
        .quick-trip__stepper input[b-hue32saczm]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .quick-trip__stepper input:focus[b-hue32saczm] {
            outline: none;
        }

/* Select with its own chevron. */
.quick-trip__select select[b-hue32saczm] {
    width: 100%;
    height: 100%;
    padding: 0 40px 0 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .quick-trip__select select:focus[b-hue32saczm] {
        outline: none;
    }

.quick-trip__chevron[b-hue32saczm] {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: var(--color-ink);
}

/* "My dates are flexible". */
.quick-trip__check[b-hue32saczm] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 6px;
    font-size: 1rem;
    color: rgba(23, 20, 18, 0.75);
    cursor: pointer;
}

    .quick-trip__check input[b-hue32saczm] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.quick-trip__box[b-hue32saczm] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(23, 20, 18, 0.28);
    border-radius: 4px;
    background: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .quick-trip__box[b-hue32saczm]::after {
        content: "";
        width: 6px;
        height: 11px;
        margin-top: -2px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) scale(0);
        transition: transform 0.15s ease;
    }

.quick-trip__check input:checked + .quick-trip__box[b-hue32saczm] {
    background: var(--color-teal);
    border-color: var(--color-teal);
}

    .quick-trip__check input:checked + .quick-trip__box[b-hue32saczm]::after {
        transform: rotate(45deg) scale(1);
    }

.quick-trip__check input:focus-visible + .quick-trip__box[b-hue32saczm] {
    box-shadow: 0 0 0 3px rgba(21, 82, 89, 0.25);
}

.quick-trip__error[b-hue32saczm] {
    margin: 12px 0 0;
    font-size: 0.9rem;
    color: #b3412a;
}

/* The big teal send button. */
.quick-trip__send[b-hue32saczm] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 64px;
    margin-top: 28px;
    padding: 0 28px 0 24px;
    border: 0;
    border-radius: 8px;
    background: var(--color-teal);
    color: var(--color-off-white);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .quick-trip__send:hover[b-hue32saczm] {
        background: #0f444a;
        box-shadow: 0 12px 28px -16px rgba(21, 82, 89, 0.9);
    }

    .quick-trip__send:focus-visible[b-hue32saczm] {
        outline: 3px solid rgba(21, 82, 89, 0.35);
        outline-offset: 3px;
    }

.quick-trip__send-text[b-hue32saczm] {
    flex: 1;
}

.quick-trip__arrow[b-hue32saczm] {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.quick-trip__send:hover .quick-trip__arrow[b-hue32saczm] {
    transform: translateX(4px);
}

.quick-trip__email[b-hue32saczm] {
    display: inline-block;
    margin-top: 18px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Rule + reassurances. */
.quick-trip__assure[b-hue32saczm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    margin: 22px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(23, 20, 18, 0.12);
    list-style: none;
    font-size: 0.95rem;
    color: rgba(23, 20, 18, 0.7);
}

    .quick-trip__assure li[b-hue32saczm] {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

        .quick-trip__assure li + li[b-hue32saczm] {
            margin-left: 18px;
            padding-left: 18px;
            border-left: 1px solid rgba(23, 20, 18, 0.18);
        }

    .quick-trip__assure svg[b-hue32saczm] {
        flex-shrink: 0;
        color: rgba(23, 20, 18, 0.55);
    }

/* On the sunset: a frosted card, light labels, the same white controls. */
.quick-trip--dark[b-hue32saczm] {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(23, 20, 18, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 24px 50px -30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

    .quick-trip--dark .quick-trip__label[b-hue32saczm],
    .quick-trip--dark .quick-trip__check[b-hue32saczm],
    .quick-trip--dark .quick-trip__email[b-hue32saczm] {
        color: var(--color-off-white);
    }

    .quick-trip--dark .quick-trip__control[b-hue32saczm] {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .quick-trip--dark .quick-trip__box[b-hue32saczm] {
        border-color: rgba(255, 255, 255, 0.6);
    }

    .quick-trip--dark .quick-trip__send[b-hue32saczm] {
        background: var(--color-off-white);
        color: var(--color-teal);
    }

        .quick-trip--dark .quick-trip__send:hover[b-hue32saczm] {
            background: #fff;
        }

    .quick-trip--dark .quick-trip__error[b-hue32saczm] {
        color: #ffd9c7;
    }

    .quick-trip--dark .quick-trip__assure[b-hue32saczm] {
        border-top-color: rgba(255, 255, 255, 0.25);
        color: rgba(244, 241, 234, 0.92);
    }

        .quick-trip--dark .quick-trip__assure li + li[b-hue32saczm] {
            border-left-color: rgba(255, 255, 255, 0.3);
        }

        .quick-trip--dark .quick-trip__assure svg[b-hue32saczm] {
            color: rgba(244, 241, 234, 0.8);
        }

@media (max-width: 860px) {
    .quick-trip__fields[b-hue32saczm] {
        grid-template-columns: 1fr 1fr;
        gap: 18px 14px;
    }

    .quick-trip__field--when[b-hue32saczm] {
        grid-column: 1 / -1;
    }

    .quick-trip__send[b-hue32saczm] {
        font-size: 1.05rem;
        gap: 14px;
        padding: 0 20px;
    }
}

@media (max-width: 420px) {
    .quick-trip__assure li + li[b-hue32saczm] {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .quick-trip__assure[b-hue32saczm] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Month: the same select, with a calendar icon in front. */
.quick-trip__select--icon .quick-trip__icon[b-hue32saczm] {
    position: absolute;
    left: 14px;
    color: rgba(23, 20, 18, 0.55);
    pointer-events: none;
}

.quick-trip__select--icon select[b-hue32saczm] {
    padding-left: 42px;
}

    .quick-trip__select--icon select:has(option[value=""]:checked)[b-hue32saczm] {
        color: rgba(23, 20, 18, 0.45);
    }

.quick-trip__select option[b-hue32saczm] {
    color: var(--color-ink);
}

/* "Start planning on WhatsApp": WhatsApp green with its logo, on cream and
   on the sunset alike. */
.quick-trip__send[b-hue32saczm],
.quick-trip--dark .quick-trip__send[b-hue32saczm] {
    background: #25D366;
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(37, 211, 102, 0.8);
}

    .quick-trip__send:hover[b-hue32saczm],
    .quick-trip--dark .quick-trip__send:hover[b-hue32saczm] {
        background: #1EBE5A;
        color: #fff;
        box-shadow: 0 16px 32px -16px rgba(37, 211, 102, 0.9);
    }

.quick-trip__logo[b-hue32saczm] {
    width: 26px;
    height: 26px;
}
/* /Components/Shared/RouteCard.razor.rz.scp.css */
.route-card[b-0yobgkerak] {
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
}

    .route-card:hover[b-0yobgkerak] {
        text-decoration: none;
        box-shadow: var(--shadow-lift);
    }

.route-card__photo-wrap[b-0yobgkerak] {
    position: relative;
}

[b-0yobgkerak] .route-card__photo {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    width: 100%;
    object-fit: cover;
    display: block;
}

.route-card__badge[b-0yobgkerak] {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: rgba(21, 82, 89, 0.9);
    color: var(--color-off-white);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
}

.route-card__body[b-0yobgkerak] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

    .route-card__body h3[b-0yobgkerak] {
        margin: 0;
    }

.route-card__price[b-0yobgkerak] {
    margin-top: -6px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-terracotta);
}

/* What the figure covers, right under it rather than only on the route page. */
.route-card__price-basis[b-0yobgkerak] {
    margin-top: -10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: rgba(23, 20, 18, 0.55);
}

.route-card__price-from[b-0yobgkerak] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(23, 20, 18, 0.5);
    margin-right: 4px;
}

.route-card__tags[b-0yobgkerak] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.route-card__tag[b-0yobgkerak] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(21, 82, 89, 0.08);
    color: var(--color-teal);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.route-card__footer[b-0yobgkerak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 2px;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(23, 20, 18, 0.1);
}

.route-card__duration[b-0yobgkerak] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(23, 20, 18, 0.65);
}

.route-card__cta[b-0yobgkerak] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-gold);
}

/* Editorial label — gold against the teal duration badge so the two read as
   different kinds of information rather than a pair. */
.route-card__flag[b-0yobgkerak] {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    max-width: calc(100% - (var(--space-3) * 2));
    background: var(--color-gold);
    color: var(--color-near-black);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    text-align: center;
}

/* The same trip in the words people search with. Quiet on purpose — the title
   above is the line that should be read first. */
.route-card__search[b-0yobgkerak] {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    line-height: 1.45;
    color: rgba(23, 20, 18, 0.5);
    margin: -2px 0 var(--space-2);
}


/* /Components/Shared/RouteMap.razor.rz.scp.css */
/* Height is fixed up front rather than grown once Leaflet initialises — this
   sits mid-page, and a box that appears late is exactly the layout shift the
   homepage was just fixed for. */
.route-live-map[b-q7vns8r10k] {
    height: 420px;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(21, 82, 89, 0.06);
    border: 1px solid rgba(23, 20, 18, 0.12);
    margin-bottom: var(--space-2);
}

@media (max-width: 640px) {
    .route-live-map[b-q7vns8r10k] {
        height: 320px;
    }
}

/* If the tiles never arrive, collapse the empty box — the stop list below it
   still tells the reader everything. */
.route-live-map--failed[b-q7vns8r10k] {
    display: none;
}

.route-live-map__note[b-q7vns8r10k] {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: rgba(23, 20, 18, 0.5);
}

/* Leaflet renders markers and popups outside this component's scope, so those
   rules live in site.css instead — ::deep can't reach them. */
/* /Components/Shared/RouteRequestCta.razor.rz.scp.css */
.route-request-cta[b-ywhux5nob6] {
    background: var(--color-teal);
    color: var(--color-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

    .route-request-cta .label[b-ywhux5nob6] {
        color: var(--color-gold);
    }

    .route-request-cta h2[b-ywhux5nob6] {
        color: var(--color-off-white);
    }

    .route-request-cta p[b-ywhux5nob6] {
        color: rgba(244, 241, 234, 0.85);
    }

/* WhatsApp and email side by side, equal weight; they stack on narrow screens. */
.route-request-cta__actions[b-ywhux5nob6] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
/* ==========================================================================
   Footer: a deep ground that starts in the colour of the sunset's front ridge
   and warms toward brown, the brand on the left, the ways in and the ways to
   reach Syphax in the middle, and one paper card with the next step.
   ========================================================================== */
.site-footer[b-7dsgorpgqn] {
    position: relative;
    margin-top: var(--space-7);
    background:
        radial-gradient(60% 80% at 100% 100%, rgba(191, 117, 90, 0.2) 0%, transparent 70%),
        linear-gradient(180deg, #1a2527 0%, #161b1a 45%, #1f1712 100%);
    color: var(--color-off-white);
}

/* The three brand colours as a hairline across the top edge. */
.site-footer__rule[b-7dsgorpgqn] {
    height: 3px;
    background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-gold) 50%, var(--color-terracotta) 100%);
}

.site-footer__inner[b-7dsgorpgqn] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.7fr) minmax(0, 1.25fr) minmax(0, 1.2fr);
    gap: clamp(32px, 4vw, 64px);
    padding-top: clamp(64px, 7vw, 104px);
    padding-bottom: clamp(40px, 5vw, 64px);
}

/* ---------- Brand ---------- */
.site-footer__brand[b-7dsgorpgqn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-footer__id[b-7dsgorpgqn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-footer__id-text[b-7dsgorpgqn] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.site-footer__name[b-7dsgorpgqn] {
    font-family: var(--font-display);
    font-size: 1.5rem;
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
}

.site-footer__tag[b-7dsgorpgqn] {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E9B86A;
}

.site-footer__desc[b-7dsgorpgqn] {
    margin: 0;
    max-width: 38ch;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(244, 241, 234, 0.72);
}

.site-footer__social[b-7dsgorpgqn] {
    display: flex;
    gap: 12px;
}

.site-footer__social-btn[b-7dsgorpgqn] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(244, 241, 234, 0.18);
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.04);
    color: rgba(244, 241, 234, 0.85);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .site-footer__social-btn:hover[b-7dsgorpgqn] {
        background: var(--color-terracotta);
        border-color: var(--color-terracotta);
        color: #fff;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* ---------- Columns ---------- */
.site-footer__col[b-7dsgorpgqn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__heading[b-7dsgorpgqn] {
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #E9B86A;
}

.site-footer__col > a[b-7dsgorpgqn] {
    width: fit-content;
    font-size: 1.02rem;
    color: rgba(244, 241, 234, 0.82);
    transition: color 0.2s ease, translate 0.2s ease;
}

    .site-footer__col > a:hover[b-7dsgorpgqn] {
        color: #fff;
        translate: 3px 0;
        text-decoration: none;
    }

/* ---------- Get in touch: icon circle, small label, value ---------- */
.site-footer__contacts[b-7dsgorpgqn] {
    gap: 18px;
}

.site-footer__contact[b-7dsgorpgqn] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

    a.site-footer__contact:hover .site-footer__contact-value[b-7dsgorpgqn] {
        color: #fff;
    }

    a.site-footer__contact:hover .site-footer__contact-icon[b-7dsgorpgqn] {
        background: var(--color-terracotta);
        border-color: var(--color-terracotta);
        color: #fff;
    }

.site-footer__contact-icon[b-7dsgorpgqn] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(244, 241, 234, 0.16);
    border-radius: 50%;
    background: rgba(244, 241, 234, 0.04);
    color: #E9B86A;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-footer__contact-text[b-7dsgorpgqn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-footer__contact-label[b-7dsgorpgqn] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.5);
}

.site-footer__contact-value[b-7dsgorpgqn] {
    font-size: 1rem;
    color: rgba(244, 241, 234, 0.9);
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

/* ---------- The card ---------- */
.site-footer__card[b-7dsgorpgqn] {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-5) var(--space-4);
    background: var(--color-off-white);
    border-radius: 20px;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
    color: var(--color-ink);
}

.site-footer__card-label[b-7dsgorpgqn] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.site-footer__card-title[b-7dsgorpgqn] {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-teal);
}

.site-footer__card p[b-7dsgorpgqn] {
    margin: 0 0 6px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(23, 20, 18, 0.7);
}

.site-footer__cta[b-7dsgorpgqn] {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: var(--color-terracotta);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 12px 26px -14px rgba(191, 117, 90, 0.95);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .site-footer__cta:hover[b-7dsgorpgqn] {
        background: #A9624A;
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
    }

/* ---------- Routes and lengths ---------- */
.site-footer__links[b-7dsgorpgqn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
    border-top: 1px solid rgba(244, 241, 234, 0.1);
}

.site-footer__links-row[b-7dsgorpgqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    font-size: 0.92rem;
}

    .site-footer__links-row a[b-7dsgorpgqn] {
        color: rgba(244, 241, 234, 0.7);
        transition: color 0.2s ease;
    }

        .site-footer__links-row a:hover[b-7dsgorpgqn] {
            color: #fff;
            text-decoration: none;
        }

.site-footer__links-label[b-7dsgorpgqn] {
    min-width: 130px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E9B86A;
}

.site-footer__links-row .site-footer__more[b-7dsgorpgqn] {
    color: #E9B86A;
}

/* ---------- Bottom bar ---------- */
.site-footer__bottom[b-7dsgorpgqn] {
    border-top: 1px solid rgba(244, 241, 234, 0.1);
}

.site-footer__bottom-inner[b-7dsgorpgqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    font-size: 0.9rem;
    color: rgba(244, 241, 234, 0.55);
}

.site-footer__legal[b-7dsgorpgqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-left: auto;
}

    .site-footer__legal a[b-7dsgorpgqn] {
        color: rgba(244, 241, 234, 0.65);
    }

        .site-footer__legal a:hover[b-7dsgorpgqn] {
            color: #fff;
            text-decoration: none;
        }

.site-footer__up[b-7dsgorpgqn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

    .site-footer__up svg[b-7dsgorpgqn] {
        transition: translate 0.2s ease;
    }

    .site-footer__up:hover svg[b-7dsgorpgqn] {
        translate: 0 -3px;
    }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
    .site-footer__inner[b-7dsgorpgqn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .site-footer__inner[b-7dsgorpgqn] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .site-footer__links-label[b-7dsgorpgqn] {
        min-width: 100%;
    }

    .site-footer__legal[b-7dsgorpgqn] {
        margin-left: 0;
    }
}

.site-footer__routes-col[b-7dsgorpgqn] {
    display: none !important;
}

/* Wider than the page column, so the footer uses the full screen. */
.site-footer .container[b-7dsgorpgqn] {
    max-width: 1600px;
    padding-left: clamp(20px, 5.5vw, 104px);
    padding-right: clamp(20px, 5.5vw, 104px);
}

@media (min-width: 1400px) {
    .site-footer__inner[b-7dsgorpgqn] {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
    }

    .site-footer__links-row--routes[b-7dsgorpgqn] {
        display: none;
    }

    .site-footer__routes-col[b-7dsgorpgqn] {
        display: flex !important;
    }
}

.site-footer__col > .site-footer__more[b-7dsgorpgqn] {
    color: #E9B86A;
}

/* ---------- Phones: compact, two columns where it fits ---------- */
@media (max-width: 640px) {
    .site-footer__inner[b-7dsgorpgqn] {
        grid-template-columns: 1fr 1fr;
        gap: 32px 20px;
        padding-top: 48px;
        padding-bottom: 28px;
    }

    .site-footer__brand[b-7dsgorpgqn],
    .site-footer__contacts[b-7dsgorpgqn],
    .site-footer__card[b-7dsgorpgqn] {
        grid-column: 1 / -1;
    }

    .site-footer__brand[b-7dsgorpgqn] {
        gap: 14px;
    }

    .site-footer__name[b-7dsgorpgqn] {
        font-size: 1.3rem;
    }

    .site-footer__desc[b-7dsgorpgqn] {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .site-footer__social-btn[b-7dsgorpgqn] {
        width: 42px;
        height: 42px;
    }

    /* Explore as a two-column list, sitting beside nothing wasted. */
    nav.site-footer__col[aria-label="Explore"][b-7dsgorpgqn] {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 20px;
    }

        nav.site-footer__col[aria-label="Explore"] .site-footer__heading[b-7dsgorpgqn] {
            grid-column: 1 / -1;
            margin-bottom: 0;
        }

    .site-footer__col > a[b-7dsgorpgqn] {
        font-size: 0.98rem;
    }

    /* Contacts: two by two, smaller circles. */
    .site-footer__contacts[b-7dsgorpgqn] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row dense;
        gap: 16px 14px;
    }

        .site-footer__contacts .site-footer__heading[b-7dsgorpgqn] {
            grid-column: 1 / -1;
            margin-bottom: 0;
        }

        .site-footer__contacts .site-footer__contact:nth-of-type(2)[b-7dsgorpgqn] {
            grid-column: 1 / -1;
        }

    .site-footer__contact[b-7dsgorpgqn] {
        gap: 10px;
        align-items: flex-start;
    }

    .site-footer__contact-icon[b-7dsgorpgqn] {
        width: 36px;
        height: 36px;
    }

    .site-footer__contact-value[b-7dsgorpgqn] {
        font-size: 0.92rem;
    }

    .site-footer__card[b-7dsgorpgqn] {
        padding: 22px 20px;
        border-radius: 16px;
    }

    .site-footer__card-title[b-7dsgorpgqn] {
        font-size: 1.35rem;
    }

    .site-footer__cta[b-7dsgorpgqn] {
        align-self: stretch;
    }

    .site-footer__links[b-7dsgorpgqn] {
        gap: 16px;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .site-footer__links-row[b-7dsgorpgqn] {
        gap: 8px;
    }

        .site-footer__links-row a[b-7dsgorpgqn] {
            padding: 5px 12px;
            border: 1px solid rgba(244, 241, 234, 0.14);
            border-radius: 999px;
            font-size: 0.85rem;
        }

        .site-footer__links-row .site-footer__more[b-7dsgorpgqn] {
            border-color: rgba(233, 184, 106, 0.4);
        }

    .site-footer__links-label[b-7dsgorpgqn] {
        margin-bottom: 2px;
    }

    .site-footer__bottom-inner[b-7dsgorpgqn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-top: 20px;
        padding-bottom: 88px;
        font-size: 0.85rem;
    }

    .site-footer__legal[b-7dsgorpgqn] {
        gap: 6px 16px;
    }
}

/* The WhatsApp links in WhatsApp green. */
.site-footer__social-btn--wa[b-7dsgorpgqn],
.site-footer__contact--wa .site-footer__contact-icon[b-7dsgorpgqn] {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

    .site-footer__social-btn--wa:hover[b-7dsgorpgqn],
    a.site-footer__contact--wa:hover .site-footer__contact-icon[b-7dsgorpgqn] {
        background: #1EBE5A;
        border-color: #1EBE5A;
        color: #fff;
    }
/* /Components/Shared/SiteHeader.razor.rz.scp.css */
.site-header[b-p6hb9aslfr] {
    background: var(--color-off-white);
    border-bottom: 1px solid rgba(23, 20, 18, 0.08);
    position: sticky;
    top: 0;
    z-index: 800;
}

.site-header__inner[b-p6hb9aslfr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.site-header__brand[b-p6hb9aslfr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header__brand-text[b-p6hb9aslfr] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-header__brand-name[b-p6hb9aslfr] {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-ink);
}

.site-header__brand-tag[b-p6hb9aslfr] {
    margin-top: 2px;
}

.site-header__toggle[b-p6hb9aslfr] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.site-header__toggle-bar[b-p6hb9aslfr] {
    width: 24px;
    height: 2px;
    background: var(--color-ink);
    display: block;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

/* Bars fold into an X while the menu is open, so the same control obviously
   closes it — there was no visible way out of the menu before. */
.site-header__toggle--open .site-header__toggle-bar:nth-child(1)[b-p6hb9aslfr] {
    transform: translateY(7px) rotate(45deg);
}

.site-header__toggle--open .site-header__toggle-bar:nth-child(2)[b-p6hb9aslfr] {
    opacity: 0;
}

.site-header__toggle--open .site-header__toggle-bar:nth-child(3)[b-p6hb9aslfr] {
    transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-header__toggle-bar[b-p6hb9aslfr] {
        transition: none;
    }
}

.site-header__nav[b-p6hb9aslfr] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

    .site-header__nav a[b-p6hb9aslfr] {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--color-ink);
        white-space: nowrap; /* two-word links stay on one line */
    }

        .site-header__nav a:hover[b-p6hb9aslfr] {
            color: var(--color-brand);
            text-decoration: none;
        }

.site-header__nav-cta[b-p6hb9aslfr] {
    background: var(--color-terracotta);
    color: #fff !important;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 600 !important;
    box-shadow: 0 10px 24px -12px rgba(191, 117, 90, 0.9);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    .site-header__nav-cta:hover[b-p6hb9aslfr] {
        background: #A9624A;
        transform: translateY(-1px);
    }

/* Collapse point: with six links instead of eight the nav is about 180px
   narrower, so it fits beside the wordmark down to roughly 950px. 1000 leaves
   margin for the scrollbar, which the media query counts but the layout doesn't. */
@media (max-width: 1340px) {
    .site-header__toggle[b-p6hb9aslfr] {
        display: flex;
    }

    .site-header__nav[b-p6hb9aslfr] {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-off-white);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--space-3) var(--space-4);
        transform: translateX(100%);
        transition: transform 0.2s ease;
        overflow-y: auto;
    }

        .site-header__nav a[b-p6hb9aslfr] {
            width: 100%;
            padding: var(--space-3) 0;
            border-bottom: 1px solid rgba(23, 20, 18, 0.08);
        }

        .site-header__nav.site-header__nav--open[b-p6hb9aslfr] {
            transform: translateX(0);
        }

    .site-header__nav-cta[b-p6hb9aslfr] {
        margin-top: var(--space-3);
        text-align: center;
    }
}

/* Eight links now: a little tighter between them. */
@media (min-width: 1341px) {
    .site-header__nav[b-p6hb9aslfr] {
        gap: clamp(14px, 1.5vw, 26px);
    }
}

/* ---------- Destinations dropdown ---------- */
.site-header__drop[b-p6hb9aslfr] {
    position: relative;
}

.site-header__drop-btn[b-p6hb9aslfr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}

    .site-header__drop-btn svg[b-p6hb9aslfr] {
        transition: rotate 0.2s ease;
    }

.site-header__drop-menu[b-p6hb9aslfr] {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 50px -24px rgba(11, 50, 55, 0.45), 0 2px 6px rgba(23, 20, 18, 0.06);
    opacity: 0;
    visibility: hidden;
    translate: -50% 6px;
    transition: opacity 0.18s ease, translate 0.18s ease, visibility 0.18s;
}

    /* A bridge over the gap so the pointer can travel down into the menu. */
    .site-header__drop-menu[b-p6hb9aslfr]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }

    .site-header__nav .site-header__drop-menu a[b-p6hb9aslfr] {
        padding: 10px 14px;
        border-radius: 8px;
        color: var(--color-ink);
    }

        .site-header__nav .site-header__drop-menu a:hover[b-p6hb9aslfr] {
            background: #F4F1EA;
            color: var(--color-teal);
        }

.site-header__drop:hover .site-header__drop-menu[b-p6hb9aslfr],
.site-header__drop:focus-within .site-header__drop-menu[b-p6hb9aslfr] {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
}

.site-header__drop:hover .site-header__drop-btn svg[b-p6hb9aslfr],
.site-header__drop:focus-within .site-header__drop-btn svg[b-p6hb9aslfr] {
    rotate: 180deg;
}

/* Phone menu: Destinations is an accordion row like the others; tapping it
   opens the regions as indented rows underneath. */
@media (max-width: 1340px) {
    .site-header__drop[b-p6hb9aslfr] {
        width: 100%;
        border-bottom: 1px solid rgba(23, 20, 18, 0.08);
    }

    .site-header__drop-btn[b-p6hb9aslfr] {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-3) 0;
        font-size: 0.95rem;
        text-align: left;
    }

    .site-header__drop--open .site-header__drop-btn svg[b-p6hb9aslfr] {
        rotate: 180deg;
    }

    /* The desktop hover and focus reveal is switched off here. */
    .site-header__drop-menu[b-p6hb9aslfr],
    .site-header__drop:hover .site-header__drop-menu[b-p6hb9aslfr],
    .site-header__drop:focus-within .site-header__drop-menu[b-p6hb9aslfr] {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 var(--space-2) var(--space-3);
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        translate: none;
    }

    .site-header__drop--open .site-header__drop-menu[b-p6hb9aslfr],
    .site-header__drop--open:hover .site-header__drop-menu[b-p6hb9aslfr] {
        display: flex;
    }

    .site-header__drop:hover .site-header__drop-btn svg[b-p6hb9aslfr],
    .site-header__drop:focus-within .site-header__drop-btn svg[b-p6hb9aslfr] {
        rotate: none;
    }

    .site-header__drop--open .site-header__drop-btn svg[b-p6hb9aslfr],
    .site-header__drop--open:hover .site-header__drop-btn svg[b-p6hb9aslfr] {
        rotate: 180deg;
    }

        .site-header__drop-menu[b-p6hb9aslfr]::before {
            content: none;
        }

        .site-header__nav .site-header__drop-menu a[b-p6hb9aslfr] {
            padding: 10px 0 10px 14px;
            border: 0;
            border-left: 2px solid rgba(191, 117, 90, 0.35);
            border-radius: 0;
            background: none;
            font-size: 0.95rem;
            color: rgba(23, 20, 18, 0.8);
        }

            .site-header__nav .site-header__drop-menu a:hover[b-p6hb9aslfr] {
                background: none;
                border-left-color: var(--color-terracotta);
                color: var(--color-teal);
            }
}

.site-header__brand-text[b-p6hb9aslfr] {
    white-space: nowrap;
}

/* Desktop menu links a touch larger. */
@media (min-width: 1341px) {
    .site-header__nav a:not(.site-header__nav-cta)[b-p6hb9aslfr],
    .site-header__drop-btn[b-p6hb9aslfr] {
        font-size: 1.02rem;
    }
}

/* "All destinations" heads the list, set apart from the four regions. */
.site-header__nav .site-header__drop-menu .site-header__drop-all[b-p6hb9aslfr] {
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(23, 20, 18, 0.08);
    border-radius: 8px 8px 0 0;
    font-weight: 700;
    color: var(--color-teal);
}

@media (max-width: 1340px) {
    .site-header__nav .site-header__drop-menu .site-header__drop-all[b-p6hb9aslfr] {
        margin-bottom: 0;
        padding-bottom: 10px;
        border-bottom: 0;
        border-radius: 0;
    }
}