/* _content/AlRihlaVoyages/Components/About/StorySection.razor.rz.scp.css */
/* Editorial split: copy on one side, a cinematic photograph on the other. */

.story[b-y3um95h32e] {
    overflow: hidden;
}

.story__grid[b-y3um95h32e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

/* ------------------------------------------------------------------ copy */

.story__heading[b-y3um95h32e] {
    margin-top: clamp(1.25rem, 2.4vw, 2rem);
    color: var(--white);
}

.story__line[b-y3um95h32e] {
    display: block;
}

.story__rule[b-y3um95h32e] {
    margin-block: clamp(1.75rem, 3vw, 2.5rem);
}

.story__copy[b-y3um95h32e] {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    max-width: 52ch;
    font-size: clamp(0.975rem, 1.1vw, 1.075rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.7);
}

.story__stats[b-y3um95h32e] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin: clamp(2.25rem, 4vw, 3rem) 0 0;
    padding-top: clamp(1.75rem, 3vw, 2.25rem);
    border-top: 1px solid var(--navy-line);
}

.story__stat[b-y3um95h32e] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.story__stat-value[b-y3um95h32e] {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: var(--gold);
}

.story__stat-label[b-y3um95h32e] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.story__action[b-y3um95h32e] {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* ----------------------------------------------------------------- media */

.story__media[b-y3um95h32e] {
    position: relative;
    margin: 0;
}

.story__frame[b-y3um95h32e] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.story__frame[b-y3um95h32e]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* The stacking and crossfade of .story__slide come from the shared
   [data-rotator-slide] rules in wwwroot/css/site.css. */

/* ::deep is required because the <img> is rendered by the ResponsiveImage
   component, so it does not carry this component's scope attribute. */
.story__slide[b-y3um95h32e]  .story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out);
}

.story__media:hover .story__slide[b-y3um95h32e]  .story__image {
    transform: scale(1.04);
}

/* The caption fades out, swaps its words and fades back in, so the text never
   changes visibly part-way through the dissolve. */
.story__caption-title[b-y3um95h32e],
.story__caption-detail[b-y3um95h32e] {
    transition: opacity var(--t-med) var(--ease);
}

.story__media.is-changing .story__caption-title[b-y3um95h32e],
.story__media.is-changing .story__caption-detail[b-y3um95h32e] {
    opacity: 0;
}

/* A cream plate lifted off the photograph, echoing the light sections. */
.story__caption[b-y3um95h32e] {
    position: absolute;
    left: clamp(-1.5rem, -1.6vw, -0.5rem);
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.4rem, 2.2vw, 2rem);
    background: var(--cream);
    color: var(--ink);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.story__caption-title[b-y3um95h32e] {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.1;
}

.story__caption-detail[b-y3um95h32e] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------- queries */

@media (max-width: 900px) {
    .story__grid[b-y3um95h32e] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.75rem, 8vw, 3.5rem);
    }

    /* Photograph first on narrow screens, so the section still opens on an image. */
    .story__media[b-y3um95h32e] {
        order: -1;
        margin-bottom: 1rem;
    }

    /* The story photographs are portrait, so a landscape frame cut half the
       height off each one. Squarer keeps the minarets and the Kaaba in shot
       without making the picture tower over the copy beneath it. */
    .story__frame[b-y3um95h32e] {
        aspect-ratio: 1 / 1;
    }

    .story__caption[b-y3um95h32e] {
        left: auto;
        right: clamp(1rem, 4vw, 2rem);
        bottom: -1.25rem;
    }
}

@media (max-width: 560px) {
    .story__stats[b-y3um95h32e] {
        gap: 1.25rem 2rem;
    }

    .story__action[b-y3um95h32e] {
        width: 100%;
        max-width: 340px;
    }
}
/* _content/AlRihlaVoyages/Components/Contact/ContactSection.razor.rz.scp.css */
/* The darkest section on the page, so the form reads as the final step.
   Field styling itself lives in wwwroot/css/forms.css — see the note there. */

.enquire[b-uqak12j13b] {
    background: var(--navy-deep);
    color: rgba(255, 255, 255, 0.8);
}

/* Side by side: the heading holds the left, the form the right. */
.enquire__grid[b-uqak12j13b] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

/* ------------------------------------------------------------------ copy */

.enquire__heading[b-uqak12j13b] {
    margin-top: clamp(1.25rem, 2.4vw, 2rem);
    color: var(--white);
}

.enquire__line[b-uqak12j13b] {
    display: block;
}

.enquire__lede[b-uqak12j13b] {
    max-width: 42ch;
    margin-top: clamp(1.5rem, 2.6vw, 2rem);
}

/* ----------------------------------------------------------------- panel */

.enquire__panel[b-uqak12j13b] {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--navy-line);
}

/* --------------------------------------------------------------- queries */

@media (max-width: 980px) {
    .enquire__grid[b-uqak12j13b] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(2.5rem, 7vw, 3.5rem);
    }

    .enquire__lede[b-uqak12j13b] {
        max-width: 56ch;
    }
}

@media (max-width: 560px) {
    .enquire__panel[b-uqak12j13b] {
        padding: 1.35rem 1.15rem;
        margin-inline: calc(var(--gutter) * -0.35);
    }
}
/* _content/AlRihlaVoyages/Components/Destinations/DestinationCard.razor.rz.scp.css */
.card[b-5f4os2u166] {
    position: relative;
    overflow: hidden;
    background: var(--navy);
}

.card__link[b-5f4os2u166] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    color: var(--white);
}

.card--featured .card__link[b-5f4os2u166] {
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
}

/* ::deep is required because the <img> is rendered by the ResponsiveImage
   component, so it does not carry this component's scope attribute. */
.card__link[b-5f4os2u166]  .card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1.1s var(--ease-out);
}

.card__link:hover[b-5f4os2u166]  .card__image,
.card__link:focus-visible[b-5f4os2u166]  .card__image {
    transform: scale(1.07);
}

/* One frame of a rotating card. The stacking and the crossfade itself come from
   the shared [data-rotator-slide] rules in wwwroot/css/site.css; only the crop
   is set here, so a photograph never grows past the card while it scales. */
.card__slide[b-5f4os2u166] {
    overflow: hidden;
}

/* Two stacked gradients: a soft wash over the whole frame for consistency,
   and a stronger foot so the copy stays readable on any photograph. */
.card__veil[b-5f4os2u166] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(8, 13, 25, 0.97) 0%,
            rgba(8, 13, 25, 0.88) 36%,
            rgba(8, 13, 25, 0.55) 60%,
            rgba(8, 13, 25, 0.14) 84%,
            rgba(8, 13, 25, 0) 100%),
        linear-gradient(to bottom, rgba(8, 13, 25, 0.3), rgba(8, 13, 25, 0) 40%);
    transition: opacity var(--t-med) var(--ease);
}

.card__link:hover .card__veil[b-5f4os2u166],
.card__link:focus-visible .card__veil[b-5f4os2u166] {
    opacity: 0.86;
}

.card__body[b-5f4os2u166] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1.35rem, 2.2vw, 2.25rem);
}

.card__region[b-5f4os2u166] {
    margin-bottom: 0.7rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}

.card__name[b-5f4os2u166] {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.4vw, 2.35rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.card--featured .card__name[b-5f4os2u166] {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
}

.card__text[b-5f4os2u166] {
    max-width: 34ch;
    margin-top: 0.7rem;
    font-size: 0.895rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

/* The prompt only appears on intent, keeping the resting state calm. */
.card__cue[b-5f4os2u166] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-height: 0;
    margin-top: 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                max-height var(--t-med) var(--ease),
                margin-top var(--t-med) var(--ease);
}

.card__link:hover .card__cue[b-5f4os2u166],
.card__link:focus-visible .card__cue[b-5f4os2u166] {
    max-height: 3rem;
    margin-top: 1.15rem;
    opacity: 1;
    transform: none;
}

.card__arrow[b-5f4os2u166] {
    transition: transform var(--t-med) var(--ease);
}

.card__link:hover .card__arrow[b-5f4os2u166] {
    transform: translateX(5px);
}

/* Touch devices have no hover, so the prompt is simply always present. */
@media (hover: none) {
    .card__cue[b-5f4os2u166] {
        max-height: 3rem;
        margin-top: 1.15rem;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1024px) {
    .card--featured .card__link[b-5f4os2u166] {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}

@media (max-width: 560px) {
    /* Landscape, not portrait. A 3/4 cell threw away half the width of every
       landscape photograph - the Katara Towers crescent came out cut in two -
       and it meant the crops on a phone bore no relation to the ones on a
       desktop. Matching the desktop 4/3 keeps every subject whole and lets the
       object-position values in SiteContent hold on both. */
    .card__link[b-5f4os2u166],
    .card--featured .card__link[b-5f4os2u166] {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .card__text[b-5f4os2u166] {
        font-size: 0.85rem;
    }
}
/* _content/AlRihlaVoyages/Components/Destinations/DestinationsSection.razor.rz.scp.css */
/* The asymmetric editorial grid: one featured destination holding the left
   column full height, with four supporting cards to its right. */
.destinations__grid[b-5w80z87i9p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.5rem);
}

.destinations__grid[b-5w80z87i9p]  .card--featured {
    grid-row: span 2;
}

.destinations__note[b-5w80z87i9p] {
    margin-top: clamp(2rem, 3.5vw, 3.25rem);
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.destinations__link[b-5w80z87i9p] {
    color: var(--ink);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
    transition: color var(--t-fast) var(--ease);
}

.destinations__link:hover[b-5w80z87i9p],
.destinations__link:focus-visible[b-5w80z87i9p] {
    color: var(--gold);
}

@media (max-width: 1024px) {
    .destinations__grid[b-5w80z87i9p] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .destinations__grid[b-5w80z87i9p]  .card--featured {
        grid-row: auto;
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .destinations__grid[b-5w80z87i9p] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .destinations__grid[b-5w80z87i9p]  .card--featured {
        grid-column: auto;
    }
}
/* _content/AlRihlaVoyages/Components/Hero/HeroSection.razor.rz.scp.css */
.hero[b-7wirv2cngm] {
    position: relative;
    display: flex;
    align-items: center;
    /* Falls back gracefully where dvh is unsupported. */
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--header-h);
    overflow: hidden;
    background: var(--jet);
    color: var(--white);
    isolation: isolate;
}

/* ----------------------------------------------------------------- media */

.hero__media[b-7wirv2cngm] {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* ::deep is required because the <img> is rendered by the ResponsiveImage
   component, so it does not carry this component's scope attribute. */
.hero__media[b-7wirv2cngm]  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    /* A very slow settle, so the photograph feels alive without moving enough
       to read as an animation. */
    animation: hero-settle-b-7wirv2cngm 12s var(--ease-out) forwards;
}

/* The headline sits over the left third of a detailed photograph, so that side
   carries a heavy wash that falls away across the frame. Tuned for a busy, lit
   skyline: a darker image would survive a lighter treatment, but this keeps
   white and gold type legible over a grid of street lights. */
.hero__scrim[b-7wirv2cngm] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(8, 13, 25, 0.93) 0%,
            rgba(8, 13, 25, 0.88) 28%,
            rgba(8, 13, 25, 0.66) 50%,
            rgba(8, 13, 25, 0.3) 78%,
            rgba(8, 13, 25, 0.4) 100%),
        linear-gradient(to bottom, rgba(8, 13, 25, 0.5) 0%, rgba(8, 13, 25, 0.05) 30%, rgba(8, 13, 25, 0.7) 100%);
}

@keyframes hero-settle-b-7wirv2cngm {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* --------------------------------------------------------------- content */

/* The scroll cue is positioned absolutely in the bottom band of the hero, so
   the content column reserves that band instead of running into it. */
.hero__body[b-7wirv2cngm] {
    width: 100%;
    padding-top: clamp(2.5rem, 6vh, 5rem);
    padding-bottom: clamp(4.25rem, 9vh, 6.5rem);
}

/* Wide enough to hold the capability strip on one line. The headline is broken
   by hand into two spans, so widening the column does not change where it
   wraps, and the intro carries its own narrower measure. */
.hero__content[b-7wirv2cngm] {
    max-width: 68ch;
}

.hero__eyebrow[b-7wirv2cngm],
.hero__title .hero__line[b-7wirv2cngm],
.hero__intro[b-7wirv2cngm],
.hero__actions[b-7wirv2cngm],
.hero__capabilities[b-7wirv2cngm] {
    animation: hero-rise-b-7wirv2cngm 1.15s var(--ease-out) both;
}

.hero__eyebrow[b-7wirv2cngm] {
    margin-bottom: clamp(1.35rem, 2.6vw, 2.25rem);
    animation-delay: 0.15s;
}

.hero__title[b-7wirv2cngm] {
    margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem);
    text-wrap: balance;
}

.hero__line[b-7wirv2cngm] {
    display: block;
}

.hero__title .hero__line:nth-child(1)[b-7wirv2cngm] {
    animation-delay: 0.3s;
}

.hero__title .hero__line:nth-child(2)[b-7wirv2cngm] {
    animation-delay: 0.45s;
}

.hero__intro[b-7wirv2cngm] {
    max-width: 52ch;
    margin-bottom: clamp(2rem, 3.6vw, 3rem);
    font-size: clamp(1rem, 1.25vw, 1.185rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    animation-delay: 0.6s;
}

.hero__actions[b-7wirv2cngm] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 1.4vw, 1.15rem);
    animation-delay: 0.75s;
}

/* ---------------------------------------------------- capability line */

/* Four short claims under the buttons, divided by hairlines. Set as a grid of
   four columns rather than a wrapping row: a row that wraps strands a divider
   at the start of the next line, and the whole point of the strip is that it
   reads as one quiet line. */
.hero__capabilities[b-7wirv2cngm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
    margin-top: clamp(1.6rem, 2.6vw, 2.15rem);
    padding-top: clamp(1.1rem, 1.9vw, 1.45rem);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    animation-delay: 0.9s;
}

.hero__capabilities li[b-7wirv2cngm] {
    padding-inline: clamp(0.75rem, 1.6vw, 1.25rem);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.hero__capabilities li:first-child[b-7wirv2cngm] {
    padding-left: 0;
    border-left: 0;
}

@keyframes hero-rise-b-7wirv2cngm {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------ vertical rail */

.hero__rail[b-7wirv2cngm] {
    position: absolute;
    right: clamp(1.25rem, 2.4vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    animation: hero-rise-b-7wirv2cngm 1.4s var(--ease-out) 1s both;
}

/* ------------------------------------------------------- scroll cue */

.hero__scroll[b-7wirv2cngm] {
    position: absolute;
    left: var(--gutter);
    bottom: clamp(1.5rem, 4vh, 2.75rem);
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    animation: hero-rise-b-7wirv2cngm 1.4s var(--ease-out) 1.1s both;
    transition: color var(--t-fast) var(--ease);
}

.hero__scroll:hover[b-7wirv2cngm] {
    color: var(--white);
}

.hero__scroll-line[b-7wirv2cngm] {
    position: relative;
    display: block;
    width: 58px;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}

.hero__scroll-line[b-7wirv2cngm]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: translateX(-100%);
    animation: scroll-cue-b-7wirv2cngm 2.6s var(--ease) 2s infinite;
}

@keyframes scroll-cue-b-7wirv2cngm {
    0% { transform: translateX(-100%); }
    45% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------- queries */

@media (max-width: 1024px) {
    .hero__rail[b-7wirv2cngm] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero[b-7wirv2cngm] {
        min-height: 92vh;
        min-height: 92dvh;
        align-items: flex-end;
    }

    .hero__body[b-7wirv2cngm] {
        padding-bottom: clamp(6rem, 16vh, 8rem);
    }

    /* A portrait viewport keeps only a narrow centre slice of the frame, which
       on this photograph is the Burj Khalifa and the lit downtown around it —
       the strongest part of the picture, so the crop stays centred. */
    .hero__media[b-7wirv2cngm]  .hero__image {
        object-position: center 55%;
    }

    /* Portrait screens put the copy over the middle of the photograph, so the
       wash has to be heavier here than on the wide layout. */
    .hero__scrim[b-7wirv2cngm] {
        background:
            linear-gradient(to bottom,
                rgba(8, 13, 25, 0.82) 0%,
                rgba(8, 13, 25, 0.6) 22%,
                rgba(8, 13, 25, 0.82) 52%,
                rgba(8, 13, 25, 0.93) 78%,
                rgba(8, 13, 25, 0.96) 100%);
    }

    .hero__intro[b-7wirv2cngm] {
        font-size: 1rem;
    }
}

@media (max-width: 560px) {
    .hero__actions[b-7wirv2cngm] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 340px;
    }

    .hero__scroll-label[b-7wirv2cngm] {
        display: none;
    }

    .hero__scroll[b-7wirv2cngm] {
        bottom: 1.5rem;
    }
}

/* Laptop screens are short, and the hero carries a lot: eyebrow, a display
   headline, a paragraph, two buttons and the capability strip. Rather than let
   the bottom of that column run into the scroll cue, the whole stack tightens
   once there is less than about 960px of height to work with. */
@media (min-width: 721px) and (max-height: 960px) {
    .hero__eyebrow[b-7wirv2cngm] {
        margin-bottom: 1.15rem;
    }

    .hero__title[b-7wirv2cngm] {
        margin-bottom: 1.25rem;
    }

    .hero__intro[b-7wirv2cngm] {
        margin-bottom: 1.6rem;
    }

    .hero__capabilities[b-7wirv2cngm] {
        margin-top: 1.25rem;
        padding-top: 0.95rem;
    }
}

/* Below this the four claims no longer fit across one line, so they fold into
   two columns of two and the dividers move accordingly. Last of the queries
   because it has to win wherever it overlaps the ones above. */
@media (max-width: 720px) {
    .hero__capabilities[b-7wirv2cngm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 0;
        max-width: 360px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .hero__capabilities li:nth-child(odd)[b-7wirv2cngm] {
        padding-left: 0;
        border-left: 0;
    }
}
/* _content/AlRihlaVoyages/Components/Layout/SiteFooter.razor.rz.scp.css */
.footer[b-2cltfa5s0s] {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.5rem);
    background: var(--jet);
    color: rgba(255, 255, 255, 0.6);
}

.footer__top[b-2cltfa5s0s] {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1.1fr) max-content;
    gap: clamp(2rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.footer__brand[b-2cltfa5s0s]  .logo {
    --logo-height: 64px;
    color: var(--white);
}

.footer__blurb[b-2cltfa5s0s] {
    max-width: 42ch;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.45);
}

.footer__nav-title[b-2cltfa5s0s] {
    margin-bottom: 1.25rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer__nav ul[b-2cltfa5s0s],
.footer__contact ul[b-2cltfa5s0s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.footer__nav a[b-2cltfa5s0s],
.footer__contact a[b-2cltfa5s0s] {
    color: rgba(255, 255, 255, 0.62);
    transition: color var(--t-fast) var(--ease);
}

.footer__nav a:hover[b-2cltfa5s0s],
.footer__nav a:focus-visible[b-2cltfa5s0s],
.footer__contact a:hover[b-2cltfa5s0s],
.footer__contact a:focus-visible[b-2cltfa5s0s] {
    color: var(--gold);
}

.footer__social[b-2cltfa5s0s] {
    /* Continues the badge list started by email and phone above, so it keeps
       that list's row spacing rather than opening a gap between the two. */
    margin-top: 0.75rem;
}

/* Days in one rail, times in the next, so a visitor can find today's row at a
   glance. The day column is sized to its widest label — the times then sit on a
   single edge rather than ragging along behind seven different day names. */
.footer__hours-list[b-2cltfa5s0s] {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.6rem 1.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.62);
}

.footer__hours-list li[b-2cltfa5s0s] {
    display: contents;
}

.footer__hours-time[b-2cltfa5s0s] {
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
}

/* Instagram is the only outbound account we have, so the glyph gets a gold
   badge rather than sitting dim among the other footer links. */
.footer__social-link[b-2cltfa5s0s] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
    transition: color var(--t-fast) var(--ease);
}

.footer__social-link[b-2cltfa5s0s]  .social__glyph {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    padding: 8px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    background: rgba(188, 156, 34, 0.1);
    transition: transform var(--t-med) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.footer__social-link:hover[b-2cltfa5s0s],
.footer__social-link:focus-visible[b-2cltfa5s0s] {
    color: var(--gold-light);
}

.footer__social-link:hover[b-2cltfa5s0s]  .social__glyph,
.footer__social-link:focus-visible[b-2cltfa5s0s]  .social__glyph {
    transform: scale(1.08);
    background: var(--gold);
    color: var(--jet);
    box-shadow: 0 0 0 4px rgba(188, 156, 34, 0.18);
}

/* The attribution line. Quiet, but deliberately not so quiet it cannot be read:
   two of the photographs are used on the condition that these names appear, and
   a credit set below the threshold of legibility does not meet that condition. */
.footer__credits[b-2cltfa5s0s] {
    max-width: 78ch;
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    padding-top: clamp(1.5rem, 2.5vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.38);
}

/* Each credit stays whole when the line wraps, so a photographer's name is never
   split from the picture it belongs to. */
.footer__credit[b-2cltfa5s0s] {
    display: inline-block;
}

.footer__credits a[b-2cltfa5s0s] {
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.footer__credits a:hover[b-2cltfa5s0s],
.footer__credits a:focus-visible[b-2cltfa5s0s] {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
}

/* The credits already draw the dividing rule when they are present. */
.footer__credits + .footer__bottom[b-2cltfa5s0s] {
    border-top: 0;
}

.footer__bottom[b-2cltfa5s0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(1.5rem, 2.5vw, 2rem);
    /* Keeps the tagline clear of the floating WhatsApp button, which is fixed
       to the bottom-right and would otherwise sit on top of it. */
    padding-right: 84px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.38);
}

/* Set in the serif rather than an italic of it — a separate italic face would
   have been a 20 KB download for this single line. */
.footer__tagline[b-2cltfa5s0s] {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

/* Four columns need more room than three did. Below this the brand takes a line
   of its own and the three lists share the one under it, hours last. */
@media (max-width: 1100px) {
    .footer__top[b-2cltfa5s0s] {
        grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr) max-content;
    }

    .footer__brand[b-2cltfa5s0s] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .footer__top[b-2cltfa5s0s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Two columns leave hours on a row of its own, which suits it: the day/time
       table keeps its own width and does not stretch. */
    .footer__hours[b-2cltfa5s0s] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer__top[b-2cltfa5s0s] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }

    .footer__bottom[b-2cltfa5s0s] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        /* Stacked here, so the clearance moves from the side to underneath. */
        padding-right: 0;
        padding-bottom: 4rem;
    }
}
/* _content/AlRihlaVoyages/Components/Navigation/NavBar.razor.rz.scp.css */
/* ----------------------------------------------------------------- shell */

.nav[b-vfy2164mkf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    color: var(--white);
    /* Transparent over the hero, with just enough of a gradient to keep the
       links legible against bright photography. */
    background: linear-gradient(to bottom, rgba(8, 14, 27, 0.72), rgba(8, 14, 27, 0));
    border-bottom: 1px solid transparent;
    transition: background-color var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease);
}

.nav.is-scrolled[b-vfy2164mkf] {
    background: rgba(9, 15, 29, 0.9);
    border-bottom-color: var(--navy-line);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.nav__inner[b-vfy2164mkf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--header-h);
    transition: height var(--t-med) var(--ease);
}

.nav.is-scrolled .nav__inner[b-vfy2164mkf] {
    height: calc(var(--header-h) - 12px);
}

/* ----------------------------------------------------------------- brand */

.nav__brand[b-vfy2164mkf] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav__brand[b-vfy2164mkf]  .logo {
    --logo-height: 54px;
}

.nav__brand:hover[b-vfy2164mkf]  .logo__image,
.nav__brand:focus-visible[b-vfy2164mkf]  .logo__image {
    transform: scale(1.03);
}

/* ---------------------------------------------------------- desktop nav */

.nav__desktop[b-vfy2164mkf] {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.nav__list[b-vfy2164mkf] {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 2.6vw, 2.75rem);
}

.nav__link[b-vfy2164mkf] {
    position: relative;
    display: inline-block;
    padding-block: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    transition: color var(--t-fast) var(--ease);
}

.nav__link[b-vfy2164mkf]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease);
}

.nav__link:hover[b-vfy2164mkf],
.nav__link:focus-visible[b-vfy2164mkf] {
    color: var(--white);
}

.nav__link:hover[b-vfy2164mkf]::after,
.nav__link:focus-visible[b-vfy2164mkf]::after {
    transform: scaleX(1);
}

.nav__cta[b-vfy2164mkf] {
    padding: 0.95rem 1.85rem;
    font-size: 0.68rem;
}

/* ------------------------------------------------------------- hamburger */

.nav__toggle[b-vfy2164mkf] {
    display: none;
    position: relative;
    z-index: 2;
    /* No waiting on a possible double-tap before the tap counts. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.nav__toggle:hover[b-vfy2164mkf] {
    border-color: var(--gold);
}

.nav__bar[b-vfy2164mkf] {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.5px;
    background: var(--white);
    transform: translateX(-50%);
    transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav__bar:nth-child(1)[b-vfy2164mkf] {
    top: 19px;
}

.nav__bar:nth-child(2)[b-vfy2164mkf] {
    top: 25px;
}

.nav.is-open .nav__bar:nth-child(1)[b-vfy2164mkf] {
    transform: translateX(-50%) translateY(3px) rotate(45deg);
}

.nav.is-open .nav__bar:nth-child(2)[b-vfy2164mkf] {
    transform: translateX(-50%) translateY(-3px) rotate(-45deg);
}

/* While the menu is open the header sits solid. Re-blurring the backdrop on
   every frame of the slide is the single most expensive thing a phone can be
   asked to do here, and the panel covers what the blur was for anyway. */
.nav.is-open[b-vfy2164mkf] {
    background: rgba(9, 15, 29, 0.96);
    border-bottom-color: var(--navy-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ----------------------------------------------------------- mobile menu */

.nav__scrim[b-vfy2164mkf] {
    position: fixed;
    inset: 0;
    /* Above the WhatsApp button (90) so nothing floats over the dimmed page,
       and under the header (100) so the logo and the close button stay above
       the menu and stay tappable while it is open. */
    z-index: 92;
    background: rgba(5, 9, 18, 0.6);
    opacity: 0;
    visibility: hidden;
    /* Its own compositor layer, so fading it costs no layout and no repaint of
       the page behind it. */
    will-change: opacity;
    transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
}

/* Two selectors for one state. The body class is what site.js sets. The sibling
   form matches on the header's own is-open class, which every version of the
   script has set, so a visitor holding a cached older site.js still gets a menu
   that opens rather than a page that has quietly stopped responding. */
body.is-menu-open .nav__scrim[b-vfy2164mkf],
.nav.is-open ~ .nav__scrim[b-vfy2164mkf] {
    opacity: 1;
    visibility: visible;
}

.nav__panel[b-vfy2164mkf] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    width: min(420px, 88vw);
    display: flex;
    background: var(--navy-deep);
    border-left: 1px solid var(--navy-line);
    box-shadow: -30px 0 60px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    visibility: hidden;
    /* The panel is promoted to its own layer up front rather than at the moment
       it starts moving. The slide then runs on the compositor and stays smooth
       even while the main thread is busy pinning the page behind it — which is
       what made opening the menu stutter the further down you had scrolled. */
    will-change: transform;
    backface-visibility: hidden;
    transition: transform var(--t-menu) var(--ease-out), visibility var(--t-menu) var(--ease-out);
}

body.is-menu-open .nav__panel[b-vfy2164mkf],
.nav.is-open ~ .nav__panel[b-vfy2164mkf] {
    transform: translateX(0);
    visibility: visible;
}

.nav__panel-inner[b-vfy2164mkf] {
    display: flex;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--header-h) + 2.5rem) clamp(1.75rem, 7vw, 3rem) 2.5rem;
    overflow-y: auto;
}

.nav__panel-list[b-vfy2164mkf] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nav__panel-list li[b-vfy2164mkf] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--t-menu) var(--ease-out), transform var(--t-menu) var(--ease-out);
}

body.is-menu-open .nav__panel-list li[b-vfy2164mkf],
.nav.is-open ~ .nav__panel .nav__panel-list li[b-vfy2164mkf] {
    opacity: 1;
    transform: none;
    transition-delay: var(--item-delay, 0ms);
}

.nav__panel-link[b-vfy2164mkf] {
    display: block;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 1.15rem 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
    transition: color var(--t-fast) var(--ease), padding-left var(--t-med) var(--ease);
}

.nav__panel-link:hover[b-vfy2164mkf],
.nav__panel-link:focus-visible[b-vfy2164mkf] {
    color: var(--gold);
    padding-left: 0.5rem;
}

.nav__panel-link--gold[b-vfy2164mkf] {
    color: var(--gold);
}

.nav__panel-footer[b-vfy2164mkf] {
    margin-top: 3rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------- queries */

/* Five links and a button is a lot to fit beside the logo. Between here and the
   mobile breakpoint the row tightens rather than wrapping. */
@media (max-width: 1180px) {
    .nav__list[b-vfy2164mkf] {
        gap: 1.3rem;
    }

    .nav__link[b-vfy2164mkf] {
        font-size: 0.64rem;
        letter-spacing: 0.14em;
    }

    .nav__cta[b-vfy2164mkf] {
        padding: 0.9rem 1.35rem;
        font-size: 0.62rem;
    }
}

@media (max-width: 1024px) {
    .nav__desktop[b-vfy2164mkf] {
        display: none;
    }

    .nav__toggle[b-vfy2164mkf] {
        display: block;
    }
}

@media (max-width: 640px) {
    .nav__inner[b-vfy2164mkf] {
        height: 72px;
    }

    .nav.is-scrolled .nav__inner[b-vfy2164mkf] {
        height: 66px;
    }

    .nav__brand[b-vfy2164mkf]  .logo {
        --logo-height: 42px;
    }

    .nav__toggle[b-vfy2164mkf] {
        width: 42px;
        height: 42px;
    }

    .nav__bar:nth-child(1)[b-vfy2164mkf] {
        top: 17px;
    }

    .nav__bar:nth-child(2)[b-vfy2164mkf] {
        top: 23px;
    }

    .nav__panel-inner[b-vfy2164mkf] {
        padding-top: 6.5rem;
    }
}
/* _content/AlRihlaVoyages/Components/Pages/Error.razor.rz.scp.css */
.error-page[b-gqmtp4gj2p] {
    display: flex;
    align-items: center;
    min-height: 80vh;
    background: var(--navy-deep);
    color: rgba(255, 255, 255, 0.8);
}

.error-page__heading[b-gqmtp4gj2p] {
    max-width: 18ch;
    margin-top: clamp(1.25rem, 2.4vw, 2rem);
    color: var(--white);
}

.error-page__lede[b-gqmtp4gj2p] {
    max-width: 46ch;
    margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}

.error-page__actions[b-gqmtp4gj2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.error-page__id[b-gqmtp4gj2p] {
    margin-top: 2rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}
/* _content/AlRihlaVoyages/Components/Services/ServicesSection.razor.rz.scp.css */
/* ==========================================================================
   SERVICES — the index
   --------------------------------------------------------------------------
   Full-width rows separated by hairlines. Hovering a row washes it in navy
   from the left, which is the only colour change on an otherwise very quiet
   piece of typography. On a touch screen there is no pointer to hover with, so
   the same wash follows the scroll instead — see `is-current` below.
   ========================================================================== */

.services__list[b-e6s7ahyt7o] {
    margin-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid rgba(13, 21, 39, 0.14);
}

.services__row[b-e6s7ahyt7o] {
    border-bottom: 1px solid rgba(13, 21, 39, 0.14);
}

/* Not a link itself — see the note at the top of ServicesSection.razor. It is
   the grid, the hover wash and the stacking context; the links sit inside it. */
.services__link[b-e6s7ahyt7o] {
    position: relative;
    display: grid;
    grid-template-columns: clamp(3rem, 5vw, 4.5rem) minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    padding: clamp(1.35rem, 2.4vw, 2rem) clamp(0.75rem, 1.6vw, 1.5rem);
    /* Without a stacking context of its own, the wash below would sink behind
       the section's background colour and never be seen. */
    isolation: isolate;
    transition: color var(--t-med) var(--ease);
}

/* The wash. It sits behind the row's own text and grows out of the left edge,
   so the row fills the way a line of ink spreads rather than switching on. */
.services__link[b-e6s7ahyt7o]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
}

/* :focus-within rather than :focus-visible, because the element carrying these
   states is no longer the element that takes focus.
   
   `is-current` is the same state arrived at by scrolling instead of pointing:
   site.js puts it on whichever row is nearest the middle of the screen, but
   only on a device with no pointer to hover with. See initServicesFocus. */
.services__link:hover[b-e6s7ahyt7o],
.services__link:focus-within[b-e6s7ahyt7o],
.services__link.is-current[b-e6s7ahyt7o] {
    color: var(--white);
}

.services__link:hover[b-e6s7ahyt7o]::before,
.services__link:focus-within[b-e6s7ahyt7o]::before,
.services__link.is-current[b-e6s7ahyt7o]::before {
    transform: scaleX(1);
}

/* The row-wide link: invisible, stretched over everything, and named only for
   screen readers. Being positioned, it paints above the row's plain spans —
   which is exactly what makes the whole row clickable — so anything that needs
   its own click has to be lifted above it in turn. */
.services__jump[b-e6s7ahyt7o] {
    position: absolute;
    inset: 0;
    border-radius: 2px;
}

/* ---------------------------------------------------------------- columns */

.services__number[b-e6s7ahyt7o] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--gold);
    transition: color var(--t-med) var(--ease);
}

.services__link:hover .services__number[b-e6s7ahyt7o],
.services__link:focus-within .services__number[b-e6s7ahyt7o],
.services__link.is-current .services__number[b-e6s7ahyt7o] {
    color: var(--gold-light);
}

.services__body[b-e6s7ahyt7o] {
    display: block;
}

.services__name[b-e6s7ahyt7o] {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.services__detail[b-e6s7ahyt7o] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--ink-soft);
    transition: color var(--t-med) var(--ease);
}

.services__link:hover .services__detail[b-e6s7ahyt7o],
.services__link:focus-within .services__detail[b-e6s7ahyt7o],
.services__link.is-current .services__detail[b-e6s7ahyt7o] {
    color: rgba(255, 255, 255, 0.6);
}

.services__text[b-e6s7ahyt7o] {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ink-soft);
    transition: color var(--t-med) var(--ease);
}

.services__link:hover .services__text[b-e6s7ahyt7o],
.services__link:focus-within .services__text[b-e6s7ahyt7o],
.services__link.is-current .services__text[b-e6s7ahyt7o] {
    color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------------ note */

.services__note[b-e6s7ahyt7o] {
    margin-top: clamp(2rem, 3.5vw, 3rem);
    font-size: 0.88rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------- queries */

@media (max-width: 900px) {
    /* The supporting sentence moves under the name, and the number becomes a
       small label above it, so the row still reads as one thought. */
    .services__link[b-e6s7ahyt7o] {
        grid-template-columns: clamp(2.5rem, 8vw, 3.25rem) minmax(0, 1fr);
        align-items: start;
    }

    .services__text[b-e6s7ahyt7o] {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0.65rem;
        font-size: 0.9rem;
    }

    .services__number[b-e6s7ahyt7o] {
        padding-top: 0.4rem;
    }
}

@media (max-width: 560px) {
    .services__link[b-e6s7ahyt7o] {
        gap: 0.85rem 1rem;
        padding-inline: 0;
    }

    .services__detail[b-e6s7ahyt7o] {
        font-size: 0.63rem;
        letter-spacing: 0.12em;
    }
}
/* _content/AlRihlaVoyages/Components/Shared/BrandLogo.razor.rz.scp.css */
/* The lockup scales from a single custom property, so callers only set
   --logo-height and the artwork keeps its own proportions. */
.logo[b-q1bs7qiqmn] {
    --logo-height: 46px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    color: inherit;
    line-height: 1;
}

.logo__image[b-q1bs7qiqmn] {
    height: var(--logo-height);
    width: auto;
    display: block;
    transition: transform var(--t-med) var(--ease);
}

/* "VOYAGES" between two short gold rules, as on the brand board. */
.logo__sub[b-q1bs7qiqmn] {
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-sans);
    font-size: calc(var(--logo-height) * 0.15);
    font-weight: 600;
    letter-spacing: 0.38em;
    text-indent: 0.38em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.logo__sub[b-q1bs7qiqmn]::before,
.logo__sub[b-q1bs7qiqmn]::after {
    content: "";
    width: calc(var(--logo-height) * 0.28);
    height: 1px;
    background: currentColor;
    opacity: 0.75;
    flex: 0 0 auto;
}

.logo__sub[b-q1bs7qiqmn]::after {
    /* Cancels the trailing letter-spacing so the rules sit symmetrically. */
    margin-left: -0.38em;
}

.logo__tagline[b-q1bs7qiqmn] {
    margin-top: 0.25em;
    font-family: var(--font-sans);
    font-size: calc(var(--logo-height) * 0.13);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.5;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .logo__tagline[b-q1bs7qiqmn] {
        display: none;
    }
}
/* _content/AlRihlaVoyages/Components/Shared/SectionIntro.razor.rz.scp.css */
.intro[b-vgcsgkalga] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4.5rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 5vw, 4.75rem);
}

.intro__eyebrow[b-vgcsgkalga] {
    margin-bottom: clamp(1.1rem, 2vw, 1.75rem);
}

.intro__heading[b-vgcsgkalga] {
    max-width: 15ch;
}

.intro__body[b-vgcsgkalga] {
    padding-bottom: 0.65rem;
}

.intro__body .lede[b-vgcsgkalga] {
    max-width: 46ch;
}

@media (max-width: 900px) {
    .intro[b-vgcsgkalga] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .intro__heading[b-vgcsgkalga] {
        max-width: 18ch;
    }

    .intro__body[b-vgcsgkalga] {
        padding-bottom: 0;
    }
}
/* _content/AlRihlaVoyages/Components/Shared/WhatsAppButton.razor.rz.scp.css */
/* Sits above everything except the open mobile menu, clear of the footer copy
   and of the enquiry form's submit button. */
.wa[b-2zeifvgegd] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    color: var(--white);
    /* Eases in once the visitor has started reading rather than competing with
       the hero on arrival; site.js adds .is-ready past the first screen. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                visibility var(--t-med) var(--ease);
}

.wa.is-ready[b-2zeifvgegd] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* WhatsApp's own green. A navy disc on a navy page disappeared, so the button
   now carries the colour people already recognise as "chat", ringed in gold so
   it still belongs to the site. Size and position are unchanged. */
.wa[b-2zeifvgegd] {
    --wa-green: #25D366;
    --wa-green-bright: #3BE87C;
}

/* The tappable row: caption on the left, disc on the right. It is a <button>
   when there are choices to open and an <a> when there is only the chat. */
.wa__trigger[b-2zeifvgegd] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wa__disc[b-2zeifvgegd] {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--wa-green);
    border: 2px solid var(--gold);
    box-shadow: 0 10px 30px rgba(5, 9, 18, 0.5),
                0 6px 22px rgba(37, 211, 102, 0.35);
    transition: transform var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                box-shadow var(--t-med) var(--ease),
                background-color var(--t-med) var(--ease);
}

/* Slow halo that breathes outward, so the button catches the eye in peripheral
   vision without flashing at anyone. */
.wa__disc[b-2zeifvgegd]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--wa-green);
    opacity: 0;
    pointer-events: none;
    animation: wa-halo-b-2zeifvgegd 2.8s var(--ease) infinite;
}

@keyframes wa-halo-b-2zeifvgegd {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

.wa__icon[b-2zeifvgegd] {
    /* Both icons share one cell so the mark can cross-fade into the close X. */
    grid-area: 1 / 1;
    width: 26px;
    height: 26px;
    color: var(--white);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-med) var(--ease);
}

.wa__icon--close[b-2zeifvgegd] {
    width: 22px;
    height: 22px;
    opacity: 0;
    transform: rotate(-90deg) scale(0.7);
}

.wa__trigger:hover .wa__disc[b-2zeifvgegd],
.wa__trigger:focus-visible .wa__disc[b-2zeifvgegd] {
    transform: translateY(-3px) scale(1.04);
    background: var(--wa-green-bright);
    border-color: var(--gold-light);
    box-shadow: 0 14px 34px rgba(5, 9, 18, 0.5),
                0 8px 28px rgba(37, 211, 102, 0.5);
}

/* The halo has done its job once the pointer is on the button, or once the
   choices are open and the button is asking to be closed again. */
.wa__trigger:hover .wa__disc[b-2zeifvgegd]::after,
.wa__trigger:focus-visible .wa__disc[b-2zeifvgegd]::after,
.wa.is-open .wa__disc[b-2zeifvgegd]::after {
    animation: none;
    opacity: 0;
}

/* ------------------------------------------------------------- open state */

.wa.is-open .wa__icon[b-2zeifvgegd] {
    opacity: 0;
    transform: rotate(90deg) scale(0.7);
}

.wa.is-open .wa__icon--close[b-2zeifvgegd] {
    opacity: 1;
    transform: none;
}

.wa.is-open .wa__disc[b-2zeifvgegd] {
    background: var(--wa-green-bright);
    border-color: var(--gold-light);
}

/* ---------------------------------------------------------------- tooltip */

.wa__tip[b-2zeifvgegd] {
    padding: 0.6rem 0.95rem;
    background: var(--navy);
    border: 1px solid var(--navy-line);
    box-shadow: 0 10px 26px rgba(5, 9, 18, 0.4);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.wa__trigger:hover .wa__tip[b-2zeifvgegd],
.wa__trigger:focus-visible .wa__tip[b-2zeifvgegd] {
    opacity: 1;
    transform: none;
}

/* The tooltip would only repeat what the two open choices already say. */
.wa.is-open .wa__tip[b-2zeifvgegd] {
    opacity: 0;
    transform: translateX(8px);
}

/* ------------------------------------------------------------------- menu */

.wa__menu[b-2zeifvgegd] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease),
                visibility var(--t-med) var(--ease);
}

.wa.is-open .wa__menu[b-2zeifvgegd] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wa__option[b-2zeifvgegd] {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    max-width: min(19rem, calc(100vw - 44px));
    padding: 0.6rem 0.7rem 0.6rem 1rem;
    background: var(--navy);
    border: 1px solid var(--navy-line);
    box-shadow: 0 12px 30px rgba(5, 9, 18, 0.45);
    color: var(--white);
    text-decoration: none;
    /* Each card lifts into place a beat after the one below it. */
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transform-origin: 100% 100%;
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                border-color var(--t-med) var(--ease),
                background-color var(--t-med) var(--ease);
}

.wa.is-open .wa__option[b-2zeifvgegd] {
    opacity: 1;
    transform: none;
}

/* Bottom card first, so the stack unfolds upward from the button. */
.wa.is-open .wa__option:last-child[b-2zeifvgegd] { transition-delay: 0.04s; }
.wa.is-open .wa__option:first-child[b-2zeifvgegd] { transition-delay: 0.12s; }

.wa__option:hover[b-2zeifvgegd],
.wa__option:focus-visible[b-2zeifvgegd] {
    background: var(--navy-soft);
    border-color: var(--gold);
}

.wa__option-text[b-2zeifvgegd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: right;
    min-width: 0;
}

.wa__option-title[b-2zeifvgegd] {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.wa__option-note[b-2zeifvgegd] {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.62);
}

.wa__option-disc[b-2zeifvgegd] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.16);
    border: 1px solid rgba(37, 211, 102, 0.5);
    color: var(--wa-green-bright);
    transition: background-color var(--t-med) var(--ease),
                color var(--t-med) var(--ease);
}

.wa__option:hover .wa__option-disc[b-2zeifvgegd],
.wa__option:focus-visible .wa__option-disc[b-2zeifvgegd] {
    background: var(--wa-green);
    color: var(--white);
}

.wa__option-icon[b-2zeifvgegd] {
    width: 20px;
    height: 20px;
}

/* --------------------------------------------------------------- queries */

@media (max-width: 768px) {
    .wa[b-2zeifvgegd] {
        right: 18px;
        bottom: 18px;
    }

    .wa__disc[b-2zeifvgegd] {
        width: 52px;
        height: 52px;
    }

    .wa__icon[b-2zeifvgegd] {
        width: 24px;
        height: 24px;
    }

    /* No hover on touch, and no room for it either. */
    .wa__tip[b-2zeifvgegd] {
        display: none;
    }

    .wa__option[b-2zeifvgegd] {
        padding: 0.55rem 0.6rem 0.55rem 0.85rem;
    }

    .wa__option-note[b-2zeifvgegd] {
        font-size: 0.62rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa[b-2zeifvgegd] {
        transform: none;
    }

    .wa__trigger:hover .wa__disc[b-2zeifvgegd],
    .wa__trigger:focus-visible .wa__disc[b-2zeifvgegd] {
        transform: none;
    }

    /* Colour alone carries the button for anyone who asked for stillness. */
    .wa__disc[b-2zeifvgegd]::after {
        animation: none;
        opacity: 0;
    }

    /* The choices appear rather than fly in, and all at once. */
    .wa__option[b-2zeifvgegd] {
        transform: none;
    }

    .wa.is-open .wa__option[b-2zeifvgegd] {
        transition-delay: 0s;
    }

    .wa__icon[b-2zeifvgegd],
    .wa__icon--close[b-2zeifvgegd] {
        transform: none;
    }

    .wa.is-open .wa__icon[b-2zeifvgegd] {
        transform: none;
    }
}
/* _content/AlRihlaVoyages/Components/Showcase/ShowcaseSection.razor.rz.scp.css */
/* ==========================================================================
   SHOWCASE — flights, and then hotels
   --------------------------------------------------------------------------
   One section each, sharing this stylesheet because they are the same object in
   two shapes. The window a panel's photographs sit in is drawn rather than
   photographed: an aircraft porthole for flights, an arched hotel window for
   stays. Cabin wall, shade slot, inner pane, the reflection across the glass
   and the breather hole are all CSS.
   ========================================================================== */

.showcase[b-c6w0n0ajdj] {
    position: relative;
    overflow: hidden;
}

/* Two soft washes of light behind everything: cold blue high on the left, a
   warm gold horizon low on the right. They give the black some depth without
   ever reading as a shape. */
.showcase__aurora[b-c6w0n0ajdj] {
    position: absolute;
    inset: -20% -10% 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 40% at 22% 12%, rgba(38, 62, 110, 0.5), transparent 70%),
        radial-gradient(46% 38% at 78% 78%, rgba(188, 156, 34, 0.16), transparent 72%);
}

.showcase__panel[b-c6w0n0ajdj] {
    position: relative;
    z-index: 1;
}

.showcase__grid[b-c6w0n0ajdj] {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* ------------------------------------------------------------------ copy */

.showcase__heading[b-c6w0n0ajdj] {
    margin-top: clamp(1.25rem, 2.2vw, 1.9rem);
    color: var(--white);
}

.showcase__line[b-c6w0n0ajdj] {
    display: block;
}

.showcase__rule[b-c6w0n0ajdj] {
    margin-block: clamp(1.5rem, 2.6vw, 2.25rem);
}

.showcase__lede[b-c6w0n0ajdj] {
    max-width: 46ch;
}

/* --------------------------------------------------------------- options */

.showcase__options[b-c6w0n0ajdj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(2rem, 3.4vw, 2.75rem);
    border-top: 1px solid var(--navy-line);
}

.showcase__option[b-c6w0n0ajdj] {
    padding: 1.05rem 1.25rem 1.05rem 0;
    border-bottom: 1px solid var(--navy-line);
}

/* A hairline between the two columns, not down the outside edge. */
.showcase__option:nth-child(odd)[b-c6w0n0ajdj] {
    border-right: 1px solid var(--navy-line);
}

.showcase__option:nth-child(even)[b-c6w0n0ajdj] {
    padding-left: clamp(1rem, 2vw, 1.75rem);
}

.showcase__option-name[b-c6w0n0ajdj] {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.2;
    color: var(--white);
}

.showcase__option-note[b-c6w0n0ajdj] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.76rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}

.showcase__note[b-c6w0n0ajdj] {
    max-width: 48ch;
    margin-top: clamp(1.75rem, 3vw, 2.4rem);
    font-size: 0.86rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.56);
}

.showcase__action[b-c6w0n0ajdj] {
    margin-top: clamp(1.85rem, 3vw, 2.5rem);
}

/* ================================================================ window */

.showcase__view[b-c6w0n0ajdj] {
    margin: 0;
    /* A very slow rise and fall, roughly the period of calm air. */
    animation: frame-float-b-c6w0n0ajdj 11s var(--ease) infinite;
}

@keyframes frame-float-b-c6w0n0ajdj {
    0%, 100% { transform: translateY(-7px); }
    50% { transform: translateY(7px); }
}

.frame[b-c6w0n0ajdj] {
    display: flex;
    justify-content: center;
}

/* -- the wall the window is set into ------------------------------------- */

.frame__shell[b-c6w0n0ajdj] {
    position: relative;
    width: min(100%, 410px);
    aspect-ratio: 1 / 1.42;
    padding: clamp(14px, 2.4vw, 20px);
    /* Brushed panel, lit from the upper left and falling into shadow at the
       lower right the way an interior wall does beside a window. */
    background:
        linear-gradient(152deg,
            #39414f 0%,
            #262d3b 26%,
            #1a202c 58%,
            #12161f 100%);
    box-shadow:
        0 45px 90px -25px rgba(0, 0, 0, 0.85),
        0 0 70px -20px rgba(188, 156, 34, 0.16),
        inset 0 2px 1px rgba(255, 255, 255, 0.18),
        inset 0 -2px 2px rgba(0, 0, 0, 0.65);
}

/* The gold hairline that catches the light — the one piece of brand in an
   otherwise entirely grey object. */
.frame__shell[b-c6w0n0ajdj]::before {
    content: "";
    position: absolute;
    inset: clamp(6px, 1.1vw, 9px);
    border: 1px solid rgba(188, 156, 34, 0.3);
    border-radius: inherit;
    pointer-events: none;
}

/* -- porthole: the aircraft window --------------------------------------- */

.frame--porthole .frame__shell[b-c6w0n0ajdj] {
    border-radius: 47% 47% 47% 47% / 33% 33% 33% 33%;
}

.frame--porthole .frame__pane[b-c6w0n0ajdj] {
    border-radius: 46% 46% 46% 46% / 32% 32% 32% 32%;
}

/* The shade, parked at the top of its slot. */
.frame--porthole .frame__shade[b-c6w0n0ajdj] {
    position: absolute;
    top: clamp(9px, 1.5vw, 13px);
    left: 30%;
    right: 30%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(#5c6577, #2b3342);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 3px 6px rgba(0, 0, 0, 0.5);
}

/* The breather hole in the middle pane — the detail that makes the whole thing
   read as an aircraft window rather than an oval. */
.frame--porthole .frame__bleed[b-c6w0n0ajdj] {
    position: absolute;
    left: 50%;
    bottom: 7.5%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.32), rgba(0, 0, 0, 0.92) 68%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 1px 2px rgba(0, 0, 0, 0.6);
}

/* -- arch: the hotel window ---------------------------------------------- */

/* A tall casement with a gently arched head. The head used to be a near
   semicircle, which on a square base read as a porthole with corners — too
   close to the aircraft window next to it. Flattening it to a shallow curve on
   straight jambs is what makes it read as architecture: a hotel window, not a
   fuselage. Same wall, same glass, same gold hairline; the shade and the
   breather hole are dropped rather than left floating on a building. */
.frame--arch .frame__shell[b-c6w0n0ajdj] {
    border-radius: 24% 24% 3% 3% / 15% 15% 2% 2%;
}

.frame--arch .frame__pane[b-c6w0n0ajdj] {
    border-radius: 23% 23% 2% 2% / 14% 14% 1% 1%;
}

.frame--arch .frame__shade[b-c6w0n0ajdj],
.frame--arch .frame__bleed[b-c6w0n0ajdj] {
    display: none;
}

/* -- the pane ------------------------------------------------------------ */

.frame__pane[b-c6w0n0ajdj] {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #05080e;
    /* Enough shadow to seat the picture inside the frame, and no more — the
       view through the glass has to stay the brightest thing in the section. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 10px 26px rgba(0, 0, 0, 0.45),
        inset 0 -10px 26px rgba(0, 0, 0, 0.4);
}

.frame__slide[b-c6w0n0ajdj] {
    /* Positioning and the crossfade itself come from the shared rotator rules
       in site.css; only the framing is set here. */
    overflow: hidden;
}

.frame__pane[b-c6w0n0ajdj]  .frame__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Barely touched. An earlier version dimmed the picture to suggest tinted
       glazing and only succeeded in making it look foggy; the frame supplies
       all the depth this needs. */
    filter: saturate(1.04) contrast(1.04);
}

/* Each view drifts almost imperceptibly while it is the one on screen. The
   animation restarts every time the panel hands over. */
.frame__slide.is-active[b-c6w0n0ajdj]  .frame__image {
    animation: frame-drift-b-c6w0n0ajdj 14s var(--ease-out) forwards;
}

@keyframes frame-drift-b-c6w0n0ajdj {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}

/* One narrow band of light across the top corner and a faint one at the far
   edge. It has to stay this restrained: spread any wider and it stops reading
   as a reflection and starts reading as fog over the photograph. */
.frame__glare[b-c6w0n0ajdj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(116deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.05) 9%,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0) 88%,
        rgba(255, 255, 255, 0.05) 100%);
    mix-blend-mode: screen;
}

/* -- caption -------------------------------------------------------------- */

.showcase__caption[b-c6w0n0ajdj] {
    margin-top: clamp(1.5rem, 2.6vw, 2.15rem);
    text-align: center;
}

/* The detail reads as a boarding pass: set wide, with a hairline running out to
   either side. */
.showcase__detail[b-c6w0n0ajdj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.showcase__detail[b-c6w0n0ajdj]::before,
.showcase__detail[b-c6w0n0ajdj]::after {
    content: "";
    width: clamp(28px, 6vw, 58px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-dim));
}

.showcase__detail[b-c6w0n0ajdj]::after {
    background: linear-gradient(to left, transparent, var(--gold-dim));
}

.showcase__title[b-c6w0n0ajdj] {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    color: var(--white);
}

/* The caption fades out, swaps its words and fades back in, so the place name
   never changes visibly part-way through the dissolve behind it. The rotator in
   site.js sets is-changing for the length of the swap. */
.showcase__detail[b-c6w0n0ajdj],
.showcase__title[b-c6w0n0ajdj] {
    transition: opacity var(--t-med) var(--ease);
}

.showcase__view.is-changing .showcase__detail[b-c6w0n0ajdj],
.showcase__view.is-changing .showcase__title[b-c6w0n0ajdj] {
    opacity: 0;
}

/* ================================================================ roster */

.roster[b-c6w0n0ajdj] {
    position: relative;
    z-index: 1;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: clamp(2rem, 3.5vw, 3rem);
    border-top: 1px solid var(--navy-line);
}

.roster__label[b-c6w0n0ajdj] {
    margin-bottom: clamp(1.25rem, 2.2vw, 1.85rem);
    padding-inline: var(--gutter);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    text-align: center;
}

/* Full bleed, with both ends dissolving into the background so the names never
   appear to stop against the edge of the screen. */
.roster__viewport[b-c6w0n0ajdj] {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.roster__track[b-c6w0n0ajdj] {
    display: flex;
    width: max-content;
    animation: roster-drift-b-c6w0n0ajdj 40s linear infinite;
}

/* Reading one of them is reason enough to stop the strip. */
.roster__viewport:hover .roster__track[b-c6w0n0ajdj],
.roster__track:focus-within[b-c6w0n0ajdj] {
    animation-play-state: paused;
}

/* Exactly half the track: the list is written out four times, so sliding by
   two sets lands on an identical frame and the loop is seamless. */
@keyframes roster-drift-b-c6w0n0ajdj {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.roster__set[b-c6w0n0ajdj] {
    display: flex;
    align-items: baseline;
}

.roster__item[b-c6w0n0ajdj] {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-inline: clamp(1.5rem, 3vw, 2.75rem);
}

/* A small gold lozenge between names, in place of a bullet. */
.roster__item + .roster__item[b-c6w0n0ajdj] {
    position: relative;
}

.roster__item + .roster__item[b-c6w0n0ajdj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--gold-dim);
}

.roster__name[b-c6w0n0ajdj] {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.8vw, 1.55rem);
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.86);
}

.roster__note[b-c6w0n0ajdj] {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--gold);
}

/* ========================================================== light ground

   Flights sits on the cream so the page alternates light and dark all the way
   down. Everything above is written for a dark ground — white copy, hairlines
   in white at 12% — so the cream variant restates the parts that would
   otherwise be white on cream. --navy-line is redefined rather than each
   border being rewritten: every rule in this file draws its hairlines from it.

   The window itself is not re-coloured. It is an aircraft interior: a dark
   object on a light page, which is what it would be. Only the shadow it casts
   lightens, because a black bloom that reads as depth on the jet reads as
   a smudge on the cream.
   ========================================================================== */

.showcase.section--cream[b-c6w0n0ajdj] {
    --navy-line: rgba(26, 34, 51, 0.14);
}

.showcase.section--cream .showcase__aurora[b-c6w0n0ajdj] {
    /* The same two washes, at the strength cream can carry. */
    background:
        radial-gradient(48% 40% at 22% 12%, rgba(38, 62, 110, 0.07), transparent 70%),
        radial-gradient(46% 38% at 78% 78%, rgba(188, 156, 34, 0.1), transparent 72%);
}

.showcase.section--cream .showcase__heading[b-c6w0n0ajdj],
.showcase.section--cream .showcase__option-name[b-c6w0n0ajdj],
.showcase.section--cream .showcase__title[b-c6w0n0ajdj] {
    color: var(--ink);
}

.showcase.section--cream .showcase__option-note[b-c6w0n0ajdj],
.showcase.section--cream .showcase__note[b-c6w0n0ajdj] {
    color: var(--ink-soft);
}

.showcase.section--cream .roster__label[b-c6w0n0ajdj] {
    color: rgba(26, 34, 51, 0.5);
}

.showcase.section--cream .roster__name[b-c6w0n0ajdj] {
    color: var(--ink);
}

.showcase.section--cream .frame__shell[b-c6w0n0ajdj] {
    box-shadow:
        0 40px 80px -30px rgba(26, 34, 51, 0.45),
        0 0 60px -25px rgba(188, 156, 34, 0.2),
        inset 0 2px 1px rgba(255, 255, 255, 0.18),
        inset 0 -2px 2px rgba(0, 0, 0, 0.65);
}

/* --------------------------------------------------------------- queries */

@media (max-width: 900px) {
    .showcase__grid[b-c6w0n0ajdj] {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.75rem, 8vw, 4rem);
    }

    /* On a phone the window is the thing worth leading with. */
    .showcase__view[b-c6w0n0ajdj] {
        order: -1;
    }

    .showcase__lede[b-c6w0n0ajdj],
    .showcase__note[b-c6w0n0ajdj] {
        max-width: 60ch;
    }
}

@media (max-width: 480px) {
    .showcase__options[b-c6w0n0ajdj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .showcase__option:nth-child(odd)[b-c6w0n0ajdj] {
        border-right: 0;
    }

    .showcase__option:nth-child(even)[b-c6w0n0ajdj] {
        padding-left: 0;
    }

    .frame__shell[b-c6w0n0ajdj] {
        width: min(100%, 300px);
    }
}

/* Anyone who has asked for less motion keeps the window still and the roster
   parked where it starts. The view also stops changing — that part is handled
   by the rotator in site.js. */
@media (prefers-reduced-motion: reduce) {
    .showcase__view[b-c6w0n0ajdj],
    .roster__track[b-c6w0n0ajdj] {
        animation: none;
    }

    .frame__slide.is-active[b-c6w0n0ajdj]  .frame__image {
        animation: none;
    }
}