/* ==========================================================================
   Sharm Caribe — Marine & Desert Tours
   Palette taken from the logo: deep navy, teal, aqua, coral, sand.
   No frameworks, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
    --navy-900: #051c2b;
    --navy-800: #0b2d43;
    --navy-700: #103c58;
    --navy-600: #16506f;

    --teal-700: #0c6480;
    --teal-600: #0f7d9c;
    --teal-500: #1795b8;

    --aqua-400: #2fb6d6;
    --aqua-300: #62d0e8;
    --aqua-200: #a6e3f2;
    --aqua-100: #d9f4fb;

    --coral-700: #c9501f;
    --coral-600: #de6a33;
    --coral-500: #f08a55;
    --coral-400: #f9a678;

    --sand-100: #fdf4e8;
    --sand-200: #f7e3cb;
    --sand-300: #eecfae;

    --cream: #fffbf5;
    --ink: #0c2333;
    --ink-soft: #40606f;
    --ink-muted: #6b8494;

    --wa: #25d366;
    --wa-dark: #1da851;

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-xl: 36px;

    --shadow-sm: 0 2px 8px rgba(5, 28, 43, .08);
    --shadow: 0 12px 32px -12px rgba(5, 28, 43, .28);
    --shadow-lg: 0 28px 60px -24px rgba(5, 28, 43, .45);
    --shadow-coral: 0 16px 34px -14px rgba(222, 106, 51, .65);

    --header-h: 92px;
    --container: 1220px;

    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
            "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-display: var(--font);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0;
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 800;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--aqua-400);
    outline-offset: 3px;
    border-radius: 6px;
}

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 200;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--coral-600);
    color: #fff;
    font-weight: 700;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 860px); }

/* -------------------------------------------------------------- buttons -- */
.btn {
    --btn-bg: var(--coral-600);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .85em 1.5em;
    border: 0;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: .975rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    cursor: pointer;
    text-align: center;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease),
                background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__icon { width: 1.25em; height: 1.25em; }

.btn--primary {
    background: linear-gradient(135deg, var(--coral-500), var(--coral-700));
    box-shadow: var(--shadow-coral);
}
.btn--primary:hover { box-shadow: 0 20px 40px -14px rgba(222, 106, 51, .8); }

.btn--whatsapp {
    background: linear-gradient(135deg, var(--wa), var(--wa-dark));
    box-shadow: 0 12px 26px -12px rgba(29, 168, 81, .7);
}
.btn--whatsapp:hover { box-shadow: 0 20px 38px -14px rgba(29, 168, 81, .85); }

.btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .18); }

.section--sand .btn--ghost,
.section--light .btn--ghost {
    color: var(--navy-700);
    background: rgba(11, 45, 67, .04);
    box-shadow: inset 0 0 0 1.5px rgba(11, 45, 67, .2);
}

.btn--lg { padding: 1.05em 1.9em; font-size: 1.05rem; }
.btn--sm { padding: .65em 1.1em; font-size: .875rem; }

/* --------------------------------------------------------------- header -- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: box-shadow .3s var(--ease);
}
/* The frosted bar sits on a pseudo-element rather than on .site-header itself.
   backdrop-filter (like transform or filter) turns an element into the
   containing block for position:fixed descendants — and .site-nav is one. Put
   it on the header and the open mobile panel gets trapped inside the 92px
   header box instead of covering the screen, but only once scrolling adds
   .is-stuck, which makes it a nasty one to spot. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(6, 30, 46, .88);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-stuck { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(100% - 2rem, var(--container));
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-inline-end: auto;
    color: #fff;
}
.brand__logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
    transition: transform .35s var(--ease);
}
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -.025em;
}
.brand__tagline {
    font-size: .74rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--aqua-300);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.site-nav__item a {
    display: block;
    padding: .55rem .8rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-weight: 600;
    font-size: .93rem;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.site-nav__item a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.site-nav__item a.is-current { color: var(--aqua-300); }

.site-nav__footer { display: flex; align-items: center; gap: .75rem; }

.lang-switch {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.lang-switch__item {
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang-switch__item:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lang-switch__item.is-active {
    background: #fff;
    color: var(--navy-800);
    box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .5);
}
.lang-switch__label { display: none; }

.burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    cursor: pointer;
}
.burger__box { display: block; position: relative; width: 20px; height: 14px; margin: 0 auto; }
.burger__line,
.burger__line::before,
.burger__line::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.burger__line { top: 6px; }
.burger__line::before { content: ""; top: -6px; }
.burger__line::after { content: ""; top: 6px; }
.burger[aria-expanded="true"] .burger__line { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__line::before { opacity: 0; }
.burger[aria-expanded="true"] .burger__line::after { transform: rotate(-90deg) translateX(6px); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 18, 28, .6);
    backdrop-filter: blur(3px);
    animation: fade-in .25s var(--ease);
}

/* ------------------------------------------------------- language hint -- */
.langbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 95;
    padding: .6rem 0;
    background: linear-gradient(120deg, var(--teal-700), var(--navy-700));
    color: #fff;
    box-shadow: 0 -8px 26px -14px rgba(0, 0, 0, .8);
    animation: slide-up .4s var(--ease);
}
.langbar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
    font-size: .92rem;
}
.langbar__icon { width: 1.2rem; height: 1.2rem; color: var(--aqua-300); }
.langbar__cta {
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--coral-600);
    font-weight: 700;
}
.langbar__dismiss {
    margin-inline-start: auto;
    padding: .35rem .6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: .85rem;
    cursor: pointer;
    text-decoration: underline;
}
.langbar__dismiss:hover { color: #fff; }

/* ----------------------------------------------------------------- hero -- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(100svh, 900px);
    padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
    color: #fff;
    background:
        radial-gradient(120% 90% at 80% 0%, rgba(47, 182, 214, .5) 0%, transparent 55%),
        radial-gradient(90% 80% at 10% 100%, rgba(240, 138, 85, .28) 0%, transparent 60%),
        linear-gradient(170deg, #0d4a68 0%, var(--navy-800) 55%, var(--navy-900) 100%);
    overflow: hidden;
    isolation: isolate;
}
/* Optional hero photo: the gradients stay layered on top of it so the
   headline keeps its contrast. Path comes from --hero-photo, set in hero.php. */
.hero--photo {
    background-image:
        radial-gradient(120% 90% at 80% 0%, rgba(47, 182, 214, .42) 0%, transparent 55%),
        radial-gradient(90% 80% at 10% 100%, rgba(240, 138, 85, .26) 0%, transparent 60%),
        linear-gradient(170deg, rgba(13, 74, 104, .8) 0%, rgba(11, 45, 67, .86) 55%, rgba(5, 28, 43, .94) 100%),
        var(--hero-photo);
    background-size: auto, auto, auto, cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* With a clip behind the copy the wash moves to .hero__scrim, so the poster
   and the video sit under exactly the same gradients — the fade-in changes
   the picture, never the brightness. --hero-photo is the clip's first frame. */
.hero--video {
    background-image: var(--hero-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Soft fade into the dark section below — the hero photo ends without a seam. */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    height: clamp(90px, 12vw, 190px);
    background: linear-gradient(to bottom, rgba(5, 28, 43, 0), var(--navy-800));
    pointer-events: none;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* main.js attaches the source and only reveals the clip once it is actually
   running. Until then — and whenever it never starts, from a blocked autoplay
   to JS being off — the element stays transparent and the identical still on
   .hero--video shows through, so there is nothing to see fail. */
.hero__video { opacity: 0; transition: opacity 1s var(--ease); }
.hero__video.is-playing { opacity: 1; }

/* The wash that buys the white copy its contrast. Heaviest at the top (the
   header floats over it untinted) and down the left, where the headline sits;
   the right-hand side stays clear so the footage is actually visible. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(5, 28, 43, .66) 0%, rgba(5, 28, 43, 0) 30%),
        linear-gradient(100deg, rgba(5, 28, 43, .8) 0%, rgba(6, 33, 50, .54) 45%, rgba(6, 33, 50, .18) 78%),
        radial-gradient(115% 85% at 82% 2%, rgba(47, 182, 214, .28) 0%, transparent 58%),
        radial-gradient(85% 70% at 6% 98%, rgba(240, 138, 85, .2) 0%, transparent 62%),
        linear-gradient(to top, rgba(5, 28, 43, .78) 0%, rgba(5, 28, 43, 0) 34%);
}

.hero__bubbles { position: absolute; inset: 0; }
.bubble {
    position: absolute;
    bottom: -60px;
    left: calc(var(--i) * 6.8% - 2%);
    width: calc(5px + (var(--i) % 5) * 5px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 62%);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, .5);
    opacity: 0;
    animation: rise calc(11s + (var(--i) % 7) * 2.2s) linear infinite;
    animation-delay: calc(var(--i) * -1.6s);
}

/* Auto block margins centre the copy in whatever space the stats strip leaves. */
.hero__inner { position: relative; z-index: 2; margin-block: auto; }

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: .45rem 1.05rem .45rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.hero__badge .icon { width: 1.1rem; height: 1.1rem; color: var(--coral-400); }

.hero__title {
    max-width: 15ch;
    font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
    letter-spacing: -.035em;
}
.hero__title-line { display: block; }
.hero__title-line--accent {
    /* Coral straight into aqua greys out in the middle — the sand stop keeps
       the blend warm the whole way across. */
    background: linear-gradient(98deg, #f8945c 0%, #f9c489 34%, #8ad9ec 72%, #5ccbe6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__subtitle {
    max-width: 60ch;
    margin-top: 1.4rem;
    font-size: clamp(1.02rem, .95rem + .38vw, 1.22rem);
    color: rgba(255, 255, 255, .84);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.2rem;
}

.hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.75rem;
    margin-top: 2.6rem;
    font-size: .93rem;
    color: rgba(255, 255, 255, .82);
}
.hero__points li { display: flex; align-items: center; gap: .5rem; }
.hero__check { width: 1.15rem; height: 1.15rem; color: var(--aqua-300); stroke-width: 2.4; }

.hero__scroll {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: .15rem;
    margin-top: clamp(1.6rem, 1rem + 2vw, 3rem);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    animation: nudge 2.4s ease-in-out infinite;
}
.hero__scroll .icon { width: 1.2rem; height: 1.2rem; }

/* ---------------------------------------------------------------- stats -- */
/* Lives inside the hero: no background of its own, the backdrop shows through. */
.stats {
    position: relative;
    z-index: 3;
    margin-top: clamp(1.8rem, 1rem + 2.5vw, 3rem);
}
.stats__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    /* No panel colour: the 1px gaps stay unblurred photo, so the cells read as
       separate panes of glass rather than one frosted slab. */
    background: transparent;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.stats__item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.7rem 1.5rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    text-align: center;
}
/* Without backdrop-filter the photo stays sharp behind the glass, so a light
   wash would eat the text — tint dark instead and keep the copy legible. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .stats__item { background: linear-gradient(160deg, rgba(9, 40, 60, .72), rgba(5, 28, 43, .62)); }
}
.stats__value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    /* Light end of the sea palette — the deep teals used on cream disappear
       against the photo behind the glass. */
    background: linear-gradient(140deg, #fff 0%, var(--aqua-200) 55%, var(--aqua-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stats__label {
    font-size: .875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .84);
    text-wrap: balance;
}

/* ------------------------------------------------------------- sections -- */
.section {
    position: relative;
    padding: clamp(4.5rem, 3rem + 5vw, 8rem) 0;
    overflow: hidden;
}
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 6rem); }

.section--ocean {
    background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-700) 100%);
    color: #fff;
}
.section--deep {
    background:
        radial-gradient(80% 60% at 15% 0%, rgba(23, 149, 184, .3), transparent 60%),
        var(--navy-900);
    color: #fff;
}
.section--sand {
    background: linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%);
}
.section--light { background: var(--cream); }

/* soft light blobs on the dark sections */
.section--ocean::before,
.section--deep::before {
    content: "";
    position: absolute;
    top: -18%;
    right: -12%;
    width: 46vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 182, 214, .18), transparent 68%);
    pointer-events: none;
}
.section--sand::before {
    content: "";
    position: absolute;
    bottom: -22%;
    left: -10%;
    width: 40vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 138, 85, .22), transparent 68%);
    pointer-events: none;
}

.section > .container { position: relative; z-index: 1; }

.section__head {
    display: grid;
    row-gap: .95rem;
    max-width: 62ch;
    margin-bottom: clamp(2.4rem, 1.9rem + 1.5vw, 3.4rem);
}
.section__head .eyebrow { margin-bottom: 0; justify-self: start; }
.section__head .section__lead { margin-top: 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .9rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--aqua-300);
}
/* Aqua reads well on the dark sections but not on cream/sand — swap it there. */
.section--light .eyebrow,
.section--sand .eyebrow { color: var(--teal-700); }
.eyebrow--warm,
.section--light .eyebrow--warm,
.section--sand .eyebrow--warm { color: var(--coral-700); }
.eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .14);
}

.section__title {
    font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.2rem);
    text-wrap: balance;
}
.section__lead {
    margin-top: 1.1rem;
    font-size: clamp(1.06rem, 1rem + .42vw, 1.26rem);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.section--ocean .section__lead,
.section--deep .section__lead { color: rgba(255, 255, 255, .76); }

/* From 940px the description sits beside the heading instead of under it.
   Every section gets noticeably shorter, and the lead stops running to an
   uncomfortable measure. `.reviews__intro` is excluded: it already occupies
   its own column next to the Tripadvisor / Instagram links. */
@media (min-width: 940px) {
    .section__head:not(.reviews__intro) {
        max-width: none;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        column-gap: clamp(2.5rem, 5vw, 6rem);
        align-items: end;
    }
    .section__head:not(.reviews__intro) > .eyebrow        { grid-area: 1 / 1; }
    .section__head:not(.reviews__intro) > .section__title { grid-area: 2 / 1; }
    .section__head:not(.reviews__intro) > .section__lead  { grid-area: 2 / 2; }

    /* The narrow container (FAQ) has less room, so give the heading more of it
       — otherwise a two-word title breaks across two lines for no reason. */
    .container--narrow .section__head {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 3vw, 3.5rem);
    }
}

.section__note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 78ch;
    margin-top: 2.2rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    font-size: .93rem;
    color: rgba(255, 255, 255, .8);
}
.section__note .icon { width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--aqua-300); }
.section__note--warm {
    background: rgba(222, 106, 51, .09);
    box-shadow: inset 0 0 0 1px rgba(222, 106, 51, .22);
    color: var(--ink-soft);
}
.section__note--warm .icon { color: var(--coral-700); }

/* ---------------------------------------------------------------- cards -- */
.cards {
    display: grid;
    gap: clamp(1rem, .6rem + 1.2vw, 1.6rem);
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.8rem 1.6rem 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
    backdrop-filter: blur(4px);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease),
                background-color .3s var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(98, 208, 232, .5), 0 26px 48px -26px rgba(0, 0, 0, .8);
}

.card--warm {
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(11, 45, 67, .06);
}
.card--warm:hover {
    background: #fff;
    box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(240, 138, 85, .55);
}

/* Photo-led card: the image runs edge to edge, so the padding moves inward. */
.card--photo { padding: 0; overflow: hidden; }
.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .85rem;
}
.card--photo .card__body { padding: 1.35rem 1.5rem 1.5rem; }
.card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(150deg, var(--sand-200), var(--sand-300));
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.card--photo:hover .card__media img { transform: scale(1.06); }

.card__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: linear-gradient(140deg, rgba(47, 182, 214, .28), rgba(23, 149, 184, .12));
    box-shadow: inset 0 0 0 1px rgba(98, 208, 232, .35);
    color: var(--aqua-300);
}
.card__icon .icon { width: 1.7rem; height: 1.7rem; }
.card__icon--warm {
    background: linear-gradient(140deg, rgba(240, 138, 85, .22), rgba(247, 227, 203, .5));
    box-shadow: inset 0 0 0 1px rgba(222, 106, 51, .25);
    color: var(--coral-700);
}

.card__title { font-size: 1.22rem; text-wrap: balance; }
.card__text {
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
    text-wrap: pretty;
}
.card--warm .card__text { color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    font-size: .775rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}
.chip--warm {
    background: rgba(11, 45, 67, .05);
    box-shadow: inset 0 0 0 1px rgba(11, 45, 67, .09);
    color: var(--ink-soft);
}

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.card--warm .card__foot { border-top-color: rgba(11, 45, 67, .09); }

.price { display: flex; flex-direction: column; line-height: 1.1; }
.price__label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.card--warm .price__label { color: var(--ink-muted); }
.price__value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--aqua-300);
}
.card--warm .price__value { color: var(--coral-700); }

/* ----------------------------------------------------------- dive sites -- */
.sites {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, rgba(5, 28, 43, .55), rgba(16, 60, 88, .3));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.sites__head { max-width: 60ch; margin-bottom: 2rem; }
.sites__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.sites__lead { margin-top: .6rem; color: rgba(255, 255, 255, .68); font-size: .95rem; }

.sites__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem 2.2rem;
}
.site { display: flex; gap: 1rem; }
.site__index {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--coral-400);
    padding-top: .1rem;
}
.site__name { font-size: 1.05rem; margin-bottom: .35rem; }
.site__text { font-size: .92rem; color: rgba(255, 255, 255, .7); line-height: 1.55; }

/* -------------------------------------------------------------- gallery -- */
.gallery {
    /* A multi-column flow, not a grid: every photo keeps its own aspect ratio,
       so portrait, square and 16:9 shots share one stream without cropping. */
    columns: 4 250px;
    column-gap: 14px;
}
.gallery__cell {
    break-inside: avoid;
    margin-bottom: 14px;
}

.gallery__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(150deg, rgba(23, 149, 184, .28), rgba(5, 28, 43, .7));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    cursor: zoom-in;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
/* width/height attributes on the <img> reserve the right box before the file
   arrives, so the columns never reshuffle mid-load. */
.gallery__item img {
    width: 100%;
    height: auto;
    transition: transform .7s var(--ease);
}
/* The scrim stays on so captions are always readable; hover just deepens it. */
.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(5, 28, 43, .92) 0%, rgba(5, 28, 43, .2) 42%, transparent 68%);
    opacity: .72;
    transition: opacity .35s var(--ease);
}
.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.06); }
.gallery__item:hover::after,
.gallery__item:focus-visible::after { opacity: 1; }

.gallery__caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 1.5rem 1rem .9rem;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: start;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
    opacity: .92;
    transition: opacity .3s var(--ease);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; }

.gallery__zoom {
    position: absolute;
    top: .7rem;
    inset-inline-end: .7rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(5, 28, 43, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    backdrop-filter: blur(4px);
    color: #fff;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery__zoom .icon { width: 1.05rem; height: 1.05rem; }
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom { opacity: 1; transform: none; }

/* Touch devices never hover — surface the zoom affordance there permanently. */
@media (hover: none) {
    .gallery__zoom { opacity: 1; transform: none; }
}

/* Empty state: numbered placeholders in assorted shapes so the masonry rhythm
   is visible before any photo is uploaded. */
.gallery__item--empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .45rem;
    aspect-ratio: 4 / 3;
    cursor: default;
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .035) 0 12px,
            transparent 12px 24px),
        linear-gradient(150deg, rgba(23, 149, 184, .3), rgba(5, 28, 43, .75));
}
.gallery--empty .gallery__cell:nth-child(3n + 1) .gallery__item--empty { aspect-ratio: 3 / 4; }
.gallery--empty .gallery__cell:nth-child(4n + 3) .gallery__item--empty { aspect-ratio: 16 / 9; }
.gallery__item--empty::after { content: none; }
.gallery__ph-number {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .16);
    line-height: 1;
}
.gallery__ph-icon { color: rgba(166, 227, 242, .55); }
.gallery__ph-icon .icon { width: 1.6rem; height: 1.6rem; }
.gallery__ph-label {
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(166, 227, 242, .6);
}
.gallery__foot { margin-top: 2.2rem; text-align: center; }

/* ------------------------------------------------------------ lightbox -- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(.5rem, 2vw, 2rem);
    padding: clamp(1rem, 3vw, 3rem);
    background: rgba(3, 15, 24, .93);
    backdrop-filter: blur(10px);
    animation: fade-in .25s var(--ease);
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    min-width: 0;
}
.lightbox__image {
    max-width: 100%;
    max-height: 76vh;
    border-radius: var(--radius);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
    object-fit: contain;
}
.lightbox__caption {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    text-align: center;
}
.lightbox__counter {
    padding: .2rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.lightbox__nav,
.lightbox__close {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.lightbox__nav:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.lightbox__nav--prev .icon { transform: rotate(90deg); }
.lightbox__nav--next .icon { transform: rotate(-90deg); }
.lightbox__close {
    position: absolute;
    top: clamp(.75rem, 2vw, 1.5rem);
    inset-inline-end: clamp(.75rem, 2vw, 1.5rem);
}

/* ------------------------------------------------------------- features -- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.4rem, 1rem + 1.5vw, 2.4rem);
}
.feature { display: flex; gap: 1.1rem; }
.feature__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--aqua-100), #fff);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(23, 149, 184, .18);
    color: var(--teal-600);
}
.feature__icon .icon { width: 1.6rem; height: 1.6rem; }
.feature__title { font-size: 1.1rem; margin-bottom: .4rem; }
.feature__text { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; }

/* ---------------------------------------------------------------- steps -- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1.2rem, .8rem + 1.5vw, 2rem);
    counter-reset: step;
}
.step {
    position: relative;
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.step__number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--coral-500), var(--coral-700));
    box-shadow: var(--shadow-coral);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.step__title { font-size: 1.08rem; margin-bottom: .5rem; }
.step__text { font-size: .93rem; color: rgba(255, 255, 255, .74); line-height: 1.6; }
.steps__cta { margin-top: 2.6rem; text-align: center; }

/* --------------------------------------------------- reviews & quotes --- */
.quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.3rem;
    margin-bottom: 2.4rem;
}
.quote {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.7rem 1.6rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(11, 45, 67, .06);
}
.quote__stars { display: flex; gap: .15rem; color: #f5a623; }
.quote__star { width: 1.1rem; height: 1.1rem; }
.quote__text { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--ink-soft); }
.quote__author { display: flex; flex-direction: column; margin-top: auto; font-size: .88rem; }
.quote__author span { color: var(--ink-muted); }

/* Text left, social links right — keeps the section short on desktop. */
.reviews {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}
.reviews__intro { margin-bottom: 0; }

.socials-cta { display: grid; gap: 1rem; }

/* Each link wears its own platform colours instead of the site palette. */
.brand-card {
    --brand: var(--teal-600);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    padding: 1.15rem 1.35rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(11, 45, 67, .07);
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.brand-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow), inset 0 0 0 1.5px var(--brand);
}
/* Brand tint fading in from the trailing edge. A radial gradient rather than a
   circle with opacity: a hard circle edge reads as a separate block. */
.brand-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(130% 160% at 100% 50%, var(--brand-glow) 0%, transparent 62%);
    pointer-events: none;
}

.brand-card__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 16px;
    background: var(--brand-fill, var(--brand));
    box-shadow: 0 10px 22px -12px var(--brand);
    color: #fff;
}
.brand-card__mark .icon { width: 1.75rem; height: 1.75rem; }

.brand-card__body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-card__body strong { font-size: 1rem; text-wrap: balance; }
.brand-card__body small { margin-top: .15rem; color: var(--ink-muted); font-size: .84rem; }

.brand-card__arrow {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin-inline-start: auto;
    color: var(--brand);
    transition: transform .25s var(--ease);
}
.brand-card:hover .brand-card__arrow { transform: translate(3px, -3px); }

.brand-card--tripadvisor {
    --brand: #00aa6c;
    --brand-glow: rgba(0, 170, 108, .16);
}
.brand-card--instagram {
    --brand: #d6249f;
    --brand-fill: linear-gradient(135deg, #fdc468 0%, #f95b3f 30%, #d6249f 65%, #5b51d8 100%);
    --brand-glow: rgba(214, 36, 159, .15);
}

/* ------------------------------------------------------- press mention -- */
/* Russian-only card about the Channel One report. Text-only until the clip is
   dropped in — .press--with-video is what turns it into a two-column block. */
.press {
    display: grid;
    gap: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
    align-items: center;
    margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 2.4rem;
    padding: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(11, 45, 67, .07);
}

.press__media {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy-900);
    box-shadow: var(--shadow);
}
.press__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.press__body { display: flex; align-items: flex-start; gap: 1.1rem; }
/* The mark is the channel's own blue square — it needs no plate behind it. */
.press__logo {
    width: 60px;
    height: 60px;
    flex: none;
    border-radius: 14px;
    box-shadow: 0 10px 22px -12px rgba(0, 56, 126, .85);
}
.press__copy { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
/* Without the player the card runs the full container width — cap the measure. */
.press:not(.press--with-video) .press__copy { max-width: 72ch; }
.press__title {
    font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem);
    text-wrap: balance;
}
.press__text { font-size: .97rem; line-height: 1.6; color: var(--ink-soft); }
.press__meta { font-size: .84rem; color: var(--ink-muted); }
.press__link { align-self: flex-start; margin-top: .35rem; }

@media (min-width: 900px) {
    .reviews { grid-template-columns: minmax(0, 1fr) minmax(330px, 38%); }
    .press--with-video { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ faq -- */
.faq { display: flex; flex-direction: column; gap: .7rem; }
.faq__item {
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(11, 45, 67, .06);
    overflow: hidden;
    transition: box-shadow .25s var(--ease);
}
.faq__item.is-open { box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(23, 149, 184, .35); }
.faq__heading { margin: 0; font-size: inherit; }
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.4rem;
    border: 0;
    background: transparent;
    font-size: 1.03rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: start;
    cursor: pointer;
}
.faq__chevron {
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
    color: var(--teal-600);
    transition: transform .3s var(--ease);
}
.faq__question[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 1.4rem 1.3rem; }
.faq__answer p { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); max-width: 72ch; }

/* ------------------------------------------------------------- contacts -- */
.contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.1rem;
}
.contact-card {
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}
.contact-card--wide { grid-column: span 2; }
.contact-card__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    margin-bottom: .6rem;
}
.contact-card__icon { width: 1.35rem; height: 1.35rem; color: var(--aqua-300); }
.contact-card__hint { font-size: .9rem; color: rgba(255, 255, 255, .68); line-height: 1.55; }
.contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-weight: 700;
    color: var(--aqua-300);
    text-decoration: underline;
    text-underline-offset: 4px;
    word-break: break-word;
}
.contact-card__link .icon { width: 1.05rem; height: 1.05rem; }

.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .65rem; margin-top: 1.1rem; }
.phone {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    background: rgba(37, 211, 102, .12);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .3);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.phone:hover { background: rgba(37, 211, 102, .22); transform: translateY(-2px); }
.phone__flag {
    display: grid;
    place-items: center;
    width: 36px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.phone__body { display: flex; flex-direction: column; line-height: 1.25; }
.phone__number { font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.phone__region { font-size: .78rem; color: rgba(255, 255, 255, .6); }
.phone__arrow { width: 1.1rem; height: 1.1rem; margin-inline-start: auto; color: rgba(255, 255, 255, .5); }

.socials { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.social {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
}
.social .icon { width: 1.25rem; height: 1.25rem; color: var(--aqua-300); }
.social:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------- footer -- */
.site-footer {
    padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem;
    background: var(--navy-900);
    color: rgba(255, 255, 255, .78);
    font-size: .93rem;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: 2.2rem;
}
/* The footer emblem is stacked above the wordmark rather than beside it: at
   this size a side-by-side row squeezes the tagline onto two lines. */
.brand--footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin: 0 0 1.3rem;
}
.brand--footer .brand__logo { width: 150px; height: auto; }
.brand--footer .brand__name { font-size: 1.6rem; }
.brand--footer .brand__tagline { font-size: .72rem; }
.site-footer__about { max-width: 44ch; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.site-footer__title {
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--aqua-300);
}
.site-footer__links { display: flex; flex-direction: column; gap: .6rem; }
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .72);
    transition: color .2s var(--ease);
}
.site-footer__links a:hover { color: #fff; }
.site-footer__links .icon { width: 1.05rem; height: 1.05rem; color: rgba(166, 227, 242, .7); }
.site-footer__links--lang a.is-active { color: #fff; font-weight: 700; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .84rem;
    color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------ floating whatsapp fab -- */
.wa-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 96;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;
    transition: opacity .25s var(--ease), visibility .25s, bottom .3s var(--ease);
}
.wa-fab__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--wa), var(--wa-dark));
    box-shadow: 0 14px 30px -10px rgba(29, 168, 81, .8);
    color: #fff;
    cursor: pointer;
    transition: transform .25s var(--ease);
}
.wa-fab__button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    animation: pulse 2.8s ease-out infinite;
}
.wa-fab__button:hover { transform: scale(1.08); }
.wa-fab__icon { width: 2rem; height: 2rem; }

.wa-fab__panel {
    width: min(88vw, 310px);
    padding: 1.1rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    animation: pop-in .22s var(--ease);
}
.wa-fab__panel[hidden] { display: none; }
.wa-fab__title { font-weight: 800; margin-bottom: .7rem; font-size: .95rem; }
.wa-fab__number {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: var(--radius-sm);
    transition: background-color .2s var(--ease);
}
.wa-fab__number:hover { background: rgba(37, 211, 102, .12); }
.wa-fab__number span { display: flex; flex-direction: column; line-height: 1.2; }
.wa-fab__number small { color: var(--ink-muted); font-size: .78rem; }
.wa-fab__glyph { width: 1.5rem; height: 1.5rem; color: var(--wa-dark); }
.wa-fab__hint { margin-top: .6rem; font-size: .78rem; color: var(--ink-muted); }

.to-top {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 96;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 45, 67, .82);
    box-shadow: var(--shadow);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease),
                visibility .3s, bottom .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy-900); }

/* Get the floating buttons out of the way of the mobile menu and the lightbox. */
body.is-locked .wa-fab,
body.is-locked .to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* …and above the language-hint bar while it is on screen. */
body.has-langbar .wa-fab { bottom: 82px; }
body.has-langbar .to-top { bottom: 82px; }

/* ------------------------------------------------------------------ 404 -- */
.page-404 { background: var(--navy-900); }
.notfound {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 100svh;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(47, 182, 214, .35), transparent 60%),
        linear-gradient(180deg, var(--navy-800), var(--navy-900));
    overflow: hidden;
    justify-content: center;
}
.notfound__bubbles { position: absolute; inset: 0; pointer-events: none; }
.notfound__logo { width: clamp(110px, 20vw, 150px); height: auto; }
.notfound__code {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    background: linear-gradient(100deg, var(--coral-400), var(--aqua-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.notfound__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.notfound__text { max-width: 46ch; color: rgba(255, 255, 255, .74); }
.lang-switch--404 { margin-top: 1.5rem; }
.lang-switch--404 .lang-switch__short { display: none; }
.lang-switch--404 .lang-switch__label { display: block; }

/* ------------------------------------------------------------ animation -- */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes rise {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
    12%  { opacity: .7; }
    80%  { opacity: .5; }
    100% { opacity: 0; transform: translate3d(28px, -102vh, 0) scale(1.15); }
}
@keyframes nudge {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}
@keyframes pulse {
    0%        { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
    70%, 100% { box-shadow: 0 0 0 22px rgba(37, 211, 102, 0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- responsive -- */
@media (min-width: 1180px) {
    /* Links, language switch and CTA share one row inside the fixed header. */
    .site-nav { display: flex; align-items: center; gap: 1.25rem; }
    .lang-switch__label { display: none; }
    /* Two sections are reachable from the footer and the mobile menu only —
       the desktop bar stays readable instead of wrapping. */
    .site-nav__item--compact { display: none; }
}

@media (max-width: 1179px) {
    .burger { display: block; }

    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 95;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        width: min(88vw, 380px);
        padding: calc(var(--header-h) + 1.5rem) 1.8rem 2rem;
        background: linear-gradient(165deg, var(--navy-700), var(--navy-900));
        box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .9);
        transform: translateX(101%);
        transition: transform .35s var(--ease);
        overflow-y: auto;
    }
    .site-nav.is-open { transform: none; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
    .site-nav__item a {
        padding: .8rem 1rem;
        border-radius: var(--radius-sm);
        font-size: 1.05rem;
    }

    .site-nav__footer { flex-direction: column; align-items: stretch; gap: 1.1rem; }
    .lang-switch { justify-content: space-between; }
    .lang-switch__item { flex: 1; text-align: center; }
    .site-nav__cta { width: 100%; }

    .contact-card--wide { grid-column: 1 / -1; }
}

/* Portrait territory. Keep this width in step with the matchMedia query in
   main.js — it is the same switch, once for the file and once for the still. */
@media (max-width: 820px) {
    /* The narrow encode is a portrait cut of the same trip, framed for a phone,
       so it needs its own first frame to fade in over. */
    .hero--video { background-image: var(--hero-photo-sm, var(--hero-photo)); }

    /* The copy runs the full width here, so the sideways wash would leave the
       ends of every line sitting on bare footage — even it out top to bottom. */
    .hero__scrim {
        background:
            linear-gradient(to bottom, rgba(5, 28, 43, .72) 0%, rgba(6, 33, 50, .58) 38%, rgba(5, 28, 43, .84) 100%),
            radial-gradient(120% 60% at 80% 0%, rgba(47, 182, 214, .26) 0%, transparent 60%),
            radial-gradient(100% 50% at 10% 100%, rgba(240, 138, 85, .18) 0%, transparent 62%);
    }
}

@media (max-width: 720px) {
    :root { --header-h: 80px; }

    .brand__logo { width: 56px; height: 56px; }
    .brand__name { font-size: 1.18rem; }
    .brand__tagline { font-size: .66rem; letter-spacing: .14em; }
    .brand--footer .brand__logo { width: 120px; height: auto; }
    .brand--footer .brand__name { font-size: 1.35rem; }

    .hero { min-height: auto; padding-bottom: 3rem; }
    .hero__scroll { display: none; }

    .stats { margin-top: 2.2rem; }
    .stats__item { padding: 1.3rem 1rem; }

    /* Two columns keep the wall feeling like a wall on a phone. */
    .gallery { columns: 2 140px; column-gap: 10px; }
    .gallery__cell { margin-bottom: 10px; }
    .gallery__caption { padding: 1.1rem .7rem .6rem; font-size: .75rem; }
    .gallery__zoom { display: none; }

    .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .lightbox__nav {
        position: absolute;
        bottom: clamp(1rem, 4vw, 2rem);
    }
    .lightbox__nav--prev { inset-inline-start: 18%; }
    .lightbox__nav--next { inset-inline-end: 18%; }
    .lightbox__figure { grid-row: 1; }
    .lightbox__image { max-height: 62vh; }

    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }

    .wa-fab { inset: auto 14px 14px auto; }
    .to-top { inset: auto auto 14px 14px; width: 42px; height: 42px; }
}

@media (max-width: 420px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
    /* The clip is never fetched under this preference (see main.js) — the
       poster it would have covered is the whole hero backdrop. */
    .bubble { display: none; }
}

@media print {
    .site-header, .wa-fab, .to-top, .langbar, .hero__bg, .lightbox { display: none !important; }
    body { color: #000; background: #fff; }
    /* Glass + clipped-gradient text vanish when backgrounds aren't printed. */
    .stats__item { background: none !important; box-shadow: none !important; }
    .stats__value, .stats__label { background: none !important; color: #000 !important; }
    .section { padding: 1.5rem 0; background: #fff !important; color: #000 !important; }
}